Skip to main content

useConnectWallet

The useConnectWallet hook is a mutation hook for establishing a connection to a specific wallet.

Live Editor
function withProviders(
    Component: React.FunctionComponent<object>,
    walletProviderProps?: Omit<ComponentProps<typeof WalletProvider>, 'children'>,
) {
    // Work around server-side pre-rendering
    const queryClient = new QueryClient();
    const networks = {
        testnet: { url: getFullnodeUrl('testnet') },
    };

    return () => {
        const [shouldRender, setShouldRender] = useState(false);
        useEffect(() => {
            setShouldRender(true);
        }, [setShouldRender]);

        if (!shouldRender) {
            return null;
        }

        return (
            <QueryClientProvider client={queryClient}>
                <IotaClientProvider networks={networks}>
                    <WalletProvider {...walletProviderProps}>
                        <Component />
                    </WalletProvider>
                </IotaClientProvider>
            </QueryClientProvider>
        );
    };
}

const UseConnectWalletExample = withProviders(() => {
    const wallets = useWallets();
    const { mutate: connect } = useConnectWallet();

    return (
        <div style={{ padding: 20 }}>
            <ConnectButton />
            <ul>
                {wallets.map((wallet) => (
                    <li key={wallet.name}>
                        <button
                            onClick={() => {
                                connect(
                                    { wallet },
                                    {
                                        onSuccess: () => console.log('connected'),
                                    },
                                );
                            }}
                        >
                            Connect to {wallet.name}
                        </button>
                    </li>
                ))}
            </ul>
        </div>
    );
});

render(<UseConnectWalletExample/>)
Result
Loading...

Connect arguments​

  • args - Arguments passed to the connect function of the wallet.

    • wallet - The wallet to connect to.
    • accountAddress - (optional) The address in the wallet to connect to.

  • options - Options passed the useMutation hook from @tanstack/react-query.