Connecting to a Wallet

Connect Wallet

This function is designed to initiate the connection process to a user's Bitcoin wallet. It leverages the Sats Connect API to request addresses for receiving both payments (native segwit) and ordinals (taproot).

async function connectWallet() {
  try {
    await getAddress({
      getProvider: async () =>
      (wallet as unknown as WalletWithFeatures<SatsConnectFeature>).features[SatsConnectNamespace]
      ?.provider,
      payload: {
        purposes: [AddressPurpose.Ordinals, AddressPurpose.Payment],
        message: 'Address for receiving Ordinals and payments',
        network: {
          type: BitcoinNetworkType.Mainnet,
        },
      },
      onFinish: (response) => {
        connectionStatus?.setAccounts(response.addresses as unknown as Account[]);
      },
      onCancel: () => {
        alert('Request canceled');
      },
    });
  } catch (err) {
    setWallet(null);
  }
}

Address Types

The Magic Eden Wallet clearly distinguishes between these accounts in the browser extension UI, as they serve different purposes. Depending on what type of transaction you want to send, you need to specify the correct address. Although the names are rather self explanatory, you want to ensure that payments go through the native segwit address (starts with bc1) and ordinals transactions go through the taproot address (starts with bc1p).

Context Provider

In this particular example, we are using React context to track our connection status across various accounts.

import React, { useState, createContext } from 'react';
import type { FC, ReactNode } from 'react';
import type { Account } from '../types';

export const ConnectionStatusContext = createContext<{
    isConnected: boolean;
    accounts: Account[];
    setAccounts: (accounts: Account[]) => void;
} | null>(null);

export const ConnectionStatusProvider: FC<{ children: NonNullable<ReactNode> }> = ({ children }) => {
    const [accounts, setAccounts] = useState<Account[]>([]);

    const value = {
        isConnected: accounts.length > 0,
        accounts: accounts,
        setAccounts,
    };

    return <ConnectionStatusContext.Provider value={value}>{children}</ConnectionStatusContext.Provider>;
};