Link/Unlink a Wallet

Link a Wallet

Using Your UI

If the user is not already logged in, it will trigger login with that wallet rather than linking. The difference between login and linking is that login will create a new user if one doesn’t exist, whereas linking will add the wallet to the existing user.

Wallet linking is currently only supported in React.

React

useWalletOptions provides a method called selectWalletOption that allows you to prompt the user to link using a specific wallet (by passing in the key).

This method takes a wallet key, you can see how to find the available wallet keys in Find a Wallet Key.

React

import { useWalletOptions, useIsLoggedIn } from "@dynamic-labs/sdk-react-core";

const isLoggedIn = useIsLoggedIn();
const { selectWalletOption } = useWalletOptions();

const connectWithWallet = async (walletKey: string) => {
  return await selectWalletOption(walletKey)
}

return (
  <>
    {isLoggedIn ? (
      <button onClick={() => connectWithWallet('wallet-key')}>Link Wallet</button>
    ) : (
      <button onClick={() => connectWithWallet('wallet-key')}>Login</button>
    )}
  </>
)

React Native

The React Native SDK provides walletOptions and connectWallet for programmatic wallet connections.

Get available wallet options:

React Native

import { useReactiveClient } from '@dynamic-labs/react-hooks';
import { dynamicClient } from './path-to-your-client'; // Replace with your actual client path

export const useDynamicClient = () => useReactiveClient(dynamicClient);
const client = useDynamicClient();

// Access available wallet options
const walletOptions = client.wallets.walletOptions;

// Each option contains:
// - key: unique identifier for the wallet connector
// - name: display name of the wallet
// - chain: blockchain the wallet supports (e.g., 'EVM', 'SOL')
// - isInstalledOnBrowser: whether the wallet is installed
// - isWalletConnect: whether it uses WalletConnect
// - metadata: { id, name, icon, brandColor }

Connect to a specific wallet:

React Native

import { useReactiveClient } from '@dynamic-labs/react-hooks';
import { dynamicClient } from './path-to-your-client'; // Replace with your actual client path

export const useDynamicClient = () => useReactiveClient(dynamicClient);
const client = useDynamicClient();

const connectToWallet = async (walletKey: string) => {
  const wallet = await client.wallets.connectWallet(walletKey);
  console.log("Connected wallet:", wallet.address);
  return wallet;
};

// Example: Connect to MetaMask
connectToWallet("metamask");

Full example with wallet selection UI:

React Native

import { useReactiveClient } from '@dynamic-labs/react-hooks';
import { dynamicClient } from './path-to-your-client'; // Replace with your actual client path
import { View, TouchableOpacity, Text } from "react-native";

export const useDynamicClient = () => useReactiveClient(dynamicClient);

const WalletSelector = () => {
  const client = useDynamicClient();
  // Note: Replace useIsLoggedIn with your app's login state check
  const isLoggedIn = false; // Replace with your actual login check

  const walletOptions = client.wallets.walletOptions.filter(
    (option) => option.chain !== null
  );

  const handleConnect = async (walletKey: string) => {
    try {
      const wallet = await client.wallets.connectWallet(walletKey);
      console.log("Connected:", wallet.address);
    } catch (error) {
      console.error("Connection failed:", error);
    }
  };

  return (
    <View>
      {walletOptions.map((option) => (
        <TouchableOpacity
          key={`${option.key}-${option.chain}`}
          onPress={() => handleConnect(option.key)}
        >
          <Text>
            {isLoggedIn ? `Link ${option.name}` : `Login with ${option.name}`}
          </Text>
        </TouchableOpacity>
      ))}
    </View>
  );
};

Swift

Coming soon.

Flutter

Coming soon.

Using Dynamic Modals

React

You can allow the user to link a new wallet by using the useDynamicModals hook and the setShowLinkNewWalletModal method.

You will need to also use the DynamicMultiWalletPromptsWidget component

Linking will fail if user is not fully logged in i.e. if they are missing info. See Check for Missing User Info for more information.

React

import {
  useDynamicModals,
  DynamicMultiWalletPromptsWidget,
} from '@dynamic-labs/sdk-react-core'

const LinkWallet = ({ text }: { text: string }) => {
  const { setShowLinkNewWalletModal } = useDynamicModals()

  return (
    <>
      <div className="link-wallet-container">
        <Button
          className="profile-button"
          onClick={() => setShowLinkNewWalletModal(true)}
        >
          {text}
        </Button>
      </div>
      <DynamicMultiWalletPromptsWidget />
    </>
  )
}

React Native

Coming soon.

Swift

Coming soon.

Flutter

Coming soon.

Unlink a Wallet

React

You can unlink a wallet by using the useDynamicContext hook, specifically the removeWallet method.

React

import { useDynamicContext, useUserWallets } from '@dynamic-labs/sdk-react-core'

const { removeWallet } = useDynamicContext();
const userWallets = useUserWallets();

return (
  <div>
    {userWallets.map(wallet => (
      <button
        key={wallet.id}
        onClick={() => removeWallet(wallet.id)}
      >
        Unlink {wallet.address}
      </button>
    ))}
  </div>
);

React Native

Coming soon.

Swift

Coming soon.

Flutter

Coming soon.