Skip to main content

​
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.
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>
  );
};

​
Using Your UI

Coming soon.