Skip to main content

ConnectButton

The ConnectButton shows the user a button to connect and disconnect a wallet. It automatically uses the connected state to show a connect or disconnect button.

Live Editor
const NETWORKS = {
  [getDefaultNetwork()]: { url: getFullnodeUrl(getDefaultNetwork()) },
};

function withProviders(Component: () => React.JSX.Element) {
  return () => {

    if(typeof window === 'undefined') {
      return null
    }

    // Work around server-side pre-rendering
    const queryClient = useMemo(() => new QueryClient(), []);

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

const ConnectButtonExample = withProviders(() => {
  return <ConnectButton />;
});

render(<ConnectButtonExample />);
Result
Loading...

Props​

All props are optional.

  • connectText = "Connect Wallet" - The text that displays in the button when the user is not currently connected to a wallet.