- 単独での利用
- Connect SDKを利用する場合
このパッケージを@0xsequence/connectなしで使いたい場合は、以下の手順でご利用いただけます。
1
必要なライブラリをインストールします
コピー
AIに質問
npm install @0xsequence/hooks@v6-beta @tanstack/react-query wagmi
# or
pnpm install @0xsequence/hooks@v6-beta @tanstack/react-query wagmi
# or
yarn add @0xsequence/hooks@v6-beta @tanstack/react-query wagmi
2
プロジェクトのアクセスキーを取得する
Sequence Builderからプロジェクトのアクセスキーを取得してください。
3
アプリを必要なプロバイダーでラップしてください
[config.ts]
コピー
AIに質問
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]
コピー
AIに質問
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;
4
使い始める
これで、useGetCoinPricesなどのフックが使えるようになります。
このパッケージを@0xsequence/connectと一緒に使いたい場合は、以下の手順に従ってください。
1
Connect SDKのインストールとセットアップ
手順はこちらをご覧ください。
2
Hooks SDKのインストール
コピー
AIに質問
npm install @0xsequence/hooks@v6-beta
# or
pnpm install @0xsequence/hooks@v6-beta
# or
yarn add @0xsequence/hooks@v6-beta
3
アプリをSequenceHooksProviderでラップする
[main.tsx]
コピー
AIに質問
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;
4
使い始める
これで、useGetCoinPricesなどのフックが使えるようになります。