- Independent Usage
- With Connect SDK
If you want to use this package without @0xsequence/connect, you can do so by following the steps below.
1
Install the required libraries
Copy
Ask 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
Get a project access key
Get your project access key from the Sequence Builder.
3
Wrap your App with the required providers
[config.ts]
Copy
Ask 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]
Copy
Ask 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
Start using it
Now you can start using hooks like useGetCoinPrices.
If you want to use this pacakge with @0xsequence/connect, you can do so by following the steps below.
1
Install and setup Connect SDK
Follow the steps here.
2
Install Hooks SDK
Copy
Ask AI
npm install @0xsequence/hooks@v6-beta
# or
pnpm install @0xsequence/hooks@v6-beta
# or
yarn add @0xsequence/hooks@v6-beta
3
Wrap your App with the SequenceHooksProvider
[main.tsx]
Copy
Ask 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
Start using it
Now you can start using hooks like useGetCoinPrices.