はじめに - Sequence Docs

単独での利用
Connect SDKを利用する場合

このパッケージを@0xsequence/connectなしで使いたい場合は、以下の手順でご利用いただけます。

必要なライブラリをインストールします

    npm install @0xsequence/hooks @tanstack/react-query wagmi
    # or
    pnpm install @0xsequence/hooks @tanstack/react-query wagmi
    # or
    yarn add @0xsequence/hooks @tanstack/react-query wagmi

プロジェクトのアクセスキーを取得する

Sequence Builderからプロジェクトのアクセスキーを取得してください。

アプリを必要なプロバイダーでラップしてください

[config.ts]

import { mainnet, polygon } from "wagmi/chains"
import { createConfig, http } from "wagmi"
import { QueryClient } from "@tanstack/react-query"

const wagmiConfig = createConfig({
  chains: [mainnet, polygon],
  transports: {
    [mainnet.id]: http('https://mainnet.example.com'),
    [polygon.id]: http('https://polygon.example.com'),
  },
})

const queryClient = new QueryClient()

export { wagmiConfig, queryClient }

[main.tsx]

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";

import App from "./App";
import { SequenceHooksProvider } from "@0xsequence/hooks";
import { WagmiProvider } from "wagmi";
import { queryClient, wagmiConfig } from "./config";
import { QueryClientProvider } from "@tanstack/react-query";

function Dapp() {
  return (
    <WagmiProvider config={wagmiConfig}>
      <QueryClientProvider client={queryClient}>
        <SequenceHooksProvider config={{ projectAccessKey: "AQAAAAAAAJbd_5JOcE50AqglZCtvu51YlGI" }}>
          <App />
        </SequenceHooksProvider>
      </QueryClientProvider>
    </WagmiProvider>
   
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <Dapp />
  </React.StrictMode>
);

export default Dapp;

使い始める

これで、useGetCoinPricesなどのフックが使えるようになります。

このパッケージを@0xsequence/connectと一緒に使いたい場合は、以下の手順に従ってください。

Connect SDKのインストールとセットアップ

手順はこちらをご覧ください。

Hooks SDKのインストール

    npm install @0xsequence/hooks
    # or
    pnpm install @0xsequence/hooks
    # or
    yarn add @0xsequence/hooks  

アプリをSequenceHooksProviderでラップする

[main.tsx]

    import React from "react";
    import ReactDOM from "react-dom/client";
    import "./index.css";

    import App from "./App";
    import { config } from "./config";
    import { SequenceConnect } from "@0xsequence/connect";
    import { SequenceHooksProvider } from "@0xsequence/hooks";

    function Dapp() {
        return (
            <SequenceConnect config={config}>
                <SequenceHooksProvider config={config.connectConfig}>
                    <App />
                </SequenceHooksProvider>
            </SequenceConnect>
        );
    }

    ReactDOM.createRoot(document.getElementById("root")!).render(
        <React.StrictMode>
            <Dapp />
        </React.StrictMode>
    );

    export default Dapp;

使い始める

これで、useGetCoinPricesなどのフックが使えるようになります。

useTransferFundsModal useGetCoinPrices

⌘I