Skip to main content
This package is dependent on Connect SDK.
1

Install and setup Connect SDK

Follow the steps here.
2

Install Wallet Widget SDK

    npm install @0xsequence/wallet-widget
    # or
    pnpm install @0xsequence/wallet-widget
    # or
    yarn add @0xsequence/wallet-widget
3

Wrap your App with the SequenceWalletProvider

[main.tsx]
    import React from "react";
    import ReactDOM from "react-dom/client";
    import "./index.css";
    import { config } from "./config";

    import App from "./App";
    import { SequenceWalletProvider } from "@0xsequence/wallet-widget";
    import { SequenceConnect } from "@0xsequence/connect";

    function Dapp() {
        return (
            <SequenceConnect config={config}>
                <SequenceWalletProvider>
                    <App />
                </SequenceWalletProvider>
            </SequenceConnect>
        );
    }

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

Start using it

Now you can open the Wallet Widget using the useOpenWalletModal hook.
[App.tsx]
    import { injected, useAccount, useConnect } from 'wagmi'
    import './App.css'
    import { useOpenWalletModal } from '@0xsequence/wallet-widget'

    function App() {
        const { isConnected } = useAccount()
        const { connect } = useConnect()
        const { setOpenWalletModal } = useOpenWalletModal()

        return (
            <>
                {isConnected ? <button onClick={() => setOpenWalletModal(true)}>Open Wallet Modal</button> : <button onClick={() => connect({ connector: injected() })}>Connect</button>}
            </>
        )
    }

    export default App
Wallet Widget