provider-connect

Multi-wallet connection library for Supra blockchain supporting Starkey and Ribbit wallets.

Installation

npm install provider-connect
# or
yarn add provider-connect
# or
pnpm add provider-connect

Peer Dependencies

This package requires the following peer dependencies:

• react (^18.0.0 || ^19.0.0)
• react-dom (^18.0.0 || ^19.0.0)

Note: Wallet icons are automatically included as base64 data URLs in the bundle, so no additional configuration is needed for images.

Usage

Basic Wallet Connection

import { ConnectWalletHandler } from 'provider-connect';

function App() {
  return (
    <ConnectWalletHandler>
      {({ isConnected, handleConnect, handleDisconnect, accounts, balance }) => (
        <div>
          {isConnected ? (
            <div>
              <p>Connected: {accounts[0]}</p>
              <p>Balance: {balance}</p>
              <button onClick={handleDisconnect}>Disconnect</button>
            </div>
          ) : (
            <button onClick={handleConnect}>Connect Wallet</button>
          )}
        </div>
      )}
    </ConnectWalletHandler>
  );
}

Using the Hook Directly

import { useSupraMultiWallet } from 'provider-connect';

function MyComponent() {
  const {
    accounts,
    balance,
    connectWallet,
    chainId,
    disconnectWallet,
    sendRawTransaction,
    signMessage,
    loading,
  } = useSupraMultiWallet();

  const handleConnect = async () => {
    await connectWallet('starkey'); // or 'ribbit'
  };

  return (
    <div>
      {/* Your component */}
    </div>
  );
}

Conversion Utils

import { useConversionUtils } from 'provider-connect';

function MyComponent() {
  const {
    serializeUint64,
    serializeUint128,
    serializeTransactionArgs,
    addressToUint8Array,
  } = useConversionUtils();

  // Use conversion utilities
}

Wallet Icons

Wallet icons are included in the package and automatically used by the ConnectWalletHandler component. You can also import them directly:

import { WALLET_ICONS, starkeyIcon, ribbitIcon } from 'provider-connect';

// Use in your components
<img src={starkeyIcon} alt="Starkey Wallet" />
<img src={WALLET_ICONS.ribbit} alt="Ribbit Wallet" />

API Reference

Components

ConnectWalletHandler

Main component for wallet connection UI.

Props:

• onConnect?: (account: string) => void - Callback when wallet connects
• onDisconnect?: () => void - Callback when wallet disconnects
• children: (props) => React.ReactNode - Render prop with wallet state

Children Props:

• isConnected: boolean - Whether wallet is connected
• accounts: string[] - Connected account addresses
• loading: boolean - Loading state
• balance: string - Wallet balance
• userProfile: UserProfile | null - User profile data
• handleConnect: () => void - Function to trigger connection modal
• handleDisconnect: () => void - Function to disconnect wallet

Hooks

useSupraMultiWallet()

Main hook for wallet functionality.

Returns:

• selectedWallet: WalletType - Currently selected wallet type
• accounts: string[] - Connected accounts
• balance: string - Wallet balance
• connectWallet: (walletType?: WalletType) => Promise<boolean> - Connect wallet
• disconnectWallet: () => Promise<void> - Disconnect wallet
• sendRawTransaction: (...) => Promise<string> - Send raw transaction
• signMessage: (...) => Promise<SignMessageResponse> - Sign message
• getAvailableWallets: () => WalletInfo[] - Get available wallets
• loading: boolean - Loading state

useConversionUtils()

Utility hook for data conversion and serialization.

Returns:

• serializeUint8, serializeUint16, serializeUint32, serializeUint64, serializeUint128, serializeU256
• serializeBool, serializeVector
• addressToUint8Array, stringToUint8Array
• serializeTransactionArgs - Serialize transaction arguments from ABI
• fetchModuleABI - Fetch module ABI from RPC
• getFunctionParamTypes - Get function parameter types

Types

type WalletType = 'starkey' | 'ribbit';

interface UserProfile {
  address: string;
  username: string | null;
  profileImage: string | null;
}

interface ModuleABI {
  address: string;
  name: string;
  exposed_functions: Array<{
    name: string;
    params: string[];
    return?: string[];
  }>;
  // ... more fields
}

Supported Wallets

• Starkey Wallet - Browser extension wallet
• Ribbit Wallet - Mobile and browser wallet

License

if i can create a package then user install tthen what they can do direclty install this depandancy ? MIT