@notifi-network/notifi-wallet-provider

@notifi-network/notifi-wallet-provider

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

Supported wallets

• Metamask browser extension
• Keplr browser extension
• more to come ...

Prerequisites

• Node.js version > 18
• 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) // `keplr` & `metamask`
          .filter((wallet) => wallets[wallet].isInstalled)
          .map((wallet) => {
            return (
              <button
                key={wallet}
                disabled={isLoading}
                className="bg-white size-32 flex items-center justify-center flex-col gap-3 rounded-lg border border-gray-600/10 cursor-pointer"
                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