@notifi-network/notifi-wallet-provider

@notifi-network/notifi-wallet-provider

Simply wrap the React components with NotifiWalletProvider to utilize Notifi's supported wallets.

[!TIP] Check Typedoc for supported wallets and other details.

Prerequisites

• Node.js version > 22
• React version > 17

Installation

npm install @notifi-network/notifi-wallet-provider

Usage

• Wrap components with NotifiWalletProvider wrapper

//...
<NotifiWalletProvider>
  <App /> {/* or components which wants to consume context */}
</NotifiWalletProvider>
// ...

• Use useWallet hook to access wallet information

// ...
import { useWallet } from '@notifi-network/notifi-wallet-provider';

function MyComponent() {
  const { selectWallet, selectedWallet, wallets, error, isLoading } =
    useWallet();

  useEffect(() => {
    if (error) {
      // handle error
    }
  }, [error]);

  return (
    <div>
      <div className="flex grow gap-6 px-5 justify-center items-center">
        {Object.keys(wallets)
          .filter((wallet) => wallets[wallet].isInstalled)
          .map((wallet) => {
            return (
              <button
                key={wallet}
                disabled={isLoading}
                onClick={() => {
                  wallets[wallet].connect(); // Refer to `Wallet methods` section for more supported wallet methods
                }}
              >
                <div>{wallet}</div>
              </button>
            );
          })}
      </div>
    </div>
  );
}

Wallet methods

• connect - Connect to wallet
• disconnect - Disconnect from wallet
• signArbitrary - Sign arbitrary message