Skip to main content

useAutoConnectWallet

The useAutoConnectWallet hook retrieves the status for the initial wallet auto-connection process.

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 UseAutoConnectionStatusExample = withProviders(
    () => {
        const autoConnectionStatus = useAutoConnectWallet();

        return (
            <div style={{ padding: 20 }}>
                <ConnectButton />
                <div>Auto-connection status: {autoConnectionStatus}</div>
            </div>
        );
    },
    { autoConnect: true },
);

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

Auto-connection status properties​

  • disabled - When the auto-connection functionality is disabled.
  • idle - When the initial auto-connection attempt hasn't been made yet.
  • attempted - When an auto-connection attempt has been made. This means either that there is no previously connected wallet, the previously connected wallet was not found, or that it has successfully connected to a wallet.