Skip to main content

useWallets

The useWallets hook returns an array of wallets that are available to the user. The wallets are sorted by their priority, with the highest priority wallet being the first in the array.

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 UseWalletsExample = withProviders(() => {
    const wallets = useWallets();

    return (
        <div>
            <h2>Installed wallets:</h2>
            {wallets.length === 0 && <div>No wallets installed</div>}
            <ul>
                {wallets.map((wallet) => (
                    <li key={wallet.name}>- {wallet.name}</li>
                ))}
            </ul>
        </div>
    );
});

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

Wallet properties​

  • name - The name of the wallet.
  • version - The version of the wallet as a string.
  • icon - A data URL of the wallet icon as an SVG.
  • accounts - An array of accounts that are available in the wallet.
  • features - An object with all the wallet-standard features implemented by the wallet.
  • chains - An array of chain identifiers that the wallet supports.