provider-connect 1.0.2

package/README.md

@@ -0,0 +1,191 @@
+# provider-connect
+
+Multi-wallet connection library for Supra blockchain supporting Starkey and Ribbit wallets.
+
+## Installation
+
+```bash
+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
+
+```tsx
+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
+
+```tsx
+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
+
+```tsx
+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:
+
+```tsx
+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
+
+```typescript
+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

package/dist/index.d.mts

@@ -0,0 +1,185 @@
+import * as React$1 from 'react';
+import { BCS } from 'supra-l1-sdk-core';
+import { ClassValue } from 'clsx';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { Toaster as Toaster$1 } from 'sonner';
+
+type WalletType = 'starkey' | 'ribbit';
+interface WalletCapabilities {
+    signMessage: boolean;
+    accountSwitching: boolean;
+    networkSwitching: boolean;
+    rawTransactions: boolean;
+    eventListeners: boolean;
+    tokenRevalidation: boolean;
+}
+declare const WALLET_EVENTS: {
+    readonly CONNECTED: "wallet-connected";
+    readonly PRESIGNED_STATE: "presigned-state";
+    readonly POSTSIGNED_STATE: "postsigned-state";
+    readonly ERROR: "wallet-error";
+};
+declare const useSupraMultiWallet: (enabledWallets?: WalletType[]) => {
+    selectedWallet: WalletType;
+    walletCapabilities: WalletCapabilities;
+    getAvailableWallets: () => {
+        type: WalletType;
+        name: string;
+        isInstalled: boolean;
+        capabilities: WalletCapabilities;
+    }[];
+    getCurrentProvider: () => any;
+    isExtensionInstalled: boolean;
+    accounts: string[];
+    networkData: any;
+    balance: string;
+    transactions: {
+        hash: string;
+    }[];
+    selectedChainId: string;
+    connectWallet: (walletType?: WalletType) => Promise<boolean>;
+    disconnectWallet: () => Promise<void>;
+    sendRawTransaction: (moduleAddress?: string, moduleName?: string, functionName?: string, params?: any[], runTimeParams?: any[], txExpiryTime?: number) => Promise<any>;
+    signMessage: (message: string, nonce?: string, account?: any, forceSign?: boolean) => Promise<any>;
+    setSelectedChainId: React$1.Dispatch<React$1.SetStateAction<string>>;
+    loading: boolean;
+};
+
+interface UserProfile {
+    address: string;
+    username: string | null;
+    profileImage: string | null;
+}
+interface ConnectWalletHandlerProps {
+    onConnect?: (account: string) => void;
+    onDisconnect?: () => void;
+    /**
+     * Optional array of wallet types to enable. If not provided, all available wallets will be shown.
+     * Example: `enabledWallets={['starkey']}` will only show Starkey Wallet.
+     */
+    enabledWallets?: WalletType[];
+    children: (props: {
+        isConnected: boolean;
+        accounts: string[];
+        loading: boolean;
+        balance: string;
+        userProfile: UserProfile | null;
+        handleConnect: () => void;
+        handleDisconnect: () => void;
+    }) => React.ReactNode;
+}
+declare const ConnectWalletHandler: React.FC<ConnectWalletHandlerProps>;
+
+interface ModuleABI {
+    address: string;
+    name: string;
+    friends?: string[];
+    exposed_functions: Array<{
+        name: string;
+        visibility?: string;
+        is_entry?: boolean;
+        is_view?: boolean;
+        generic_type_params?: Array<{
+            constraints?: any[];
+        }>;
+        params: string[];
+        return?: string[];
+    }>;
+    structs?: Array<{
+        name: string;
+        is_native?: boolean;
+        abilities?: string[];
+        generic_type_params?: any[];
+        fields?: Array<{
+            name: string;
+            type: string;
+        }>;
+    }>;
+}
+interface ABIStorage {
+    [moduleAddress: string]: {
+        [moduleName: string]: ModuleABI;
+    };
+}
+declare function getStoredABI(moduleAddress: string, moduleName: string): ModuleABI | null;
+
+declare const useConversionUtils: () => {
+    stringToUint8Array: (humanReadableStr: string) => Uint8Array<ArrayBufferLike>;
+    addressToUint8Array: (cryptoAddress: string) => Uint8Array<ArrayBufferLike>;
+    serializeString: (humanReadableStr: string) => Uint8Array<ArrayBufferLike>;
+    serializeUint8: (value: number | string) => Uint8Array<ArrayBufferLike>;
+    serializeUint16: (value: number | string | bigint) => Uint8Array<ArrayBufferLike>;
+    serializeUint32: (value: number | string | bigint) => Uint8Array<ArrayBufferLike>;
+    serializeUint64: (value: number | string | bigint) => Uint8Array<ArrayBufferLike>;
+    serializeUint128: (value: number | string | bigint) => Uint8Array<ArrayBufferLike>;
+    serializeU256: (value: bigint) => Uint8Array<ArrayBufferLike>;
+    serializeBool: (value: boolean) => Uint8Array<ArrayBufferLike>;
+    serializeVector: (values: any[], type: "u8" | "u64" | "bool" | "string" | "address") => Uint8Array<ArrayBufferLike>;
+    deserializeString: (uint8Array: string) => Uint8Array<ArrayBufferLike>;
+    deserializeVector: (uint8Array: Uint8Array) => any[];
+    hexToString: (hex: string, type: string) => string;
+    stringToHex: (str: string) => string;
+    serializeValueByType: (value: any, type: string, serializer?: BCS.Serializer) => Uint8Array;
+    serializeArgsFromTypes: (args: any[], paramTypes: string[]) => Uint8Array[];
+    fetchModuleABI: (moduleAddress: string, moduleName: string, rpcUrl?: string) => Promise<ModuleABI>;
+    getFunctionParamTypes: (moduleAddress: string, moduleName: string, functionName: string, rpcUrl?: string) => Promise<string[]>;
+    serializeTransactionArgs: (args: any[], moduleAddress: string, moduleName: string, functionName: string, rpcUrl?: string) => Promise<Uint8Array[]>;
+};
+
+declare function cn(...inputs: ClassValue[]): string;
+declare function standardizeAddress(address: string): string;
+
+declare const buttonVariants: (props?: ({
+    variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+}
+declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
+
+declare const Dialog: React$1.FC<DialogPrimitive.DialogProps>;
+declare const DialogTrigger: React$1.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const DialogPortal: React$1.FC<DialogPrimitive.DialogPortalProps>;
+declare const DialogClose: React$1.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const DialogOverlay: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const DialogContent: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const DialogHeader: {
+    ({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const DialogFooter: {
+    ({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const DialogTitle: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React$1.RefAttributes<HTMLHeadingElement>, "ref"> & React$1.RefAttributes<HTMLHeadingElement>>;
+declare const DialogDescription: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React$1.RefAttributes<HTMLParagraphElement>, "ref"> & React$1.RefAttributes<HTMLParagraphElement>>;
+
+type ToasterProps = React.ComponentProps<typeof Toaster$1>;
+declare const Toaster: ({ ...props }: ToasterProps) => react_jsx_runtime.JSX.Element;
+
+// Type declarations for wallet icons
+declare const WALLET_ICONS: {
+  readonly starkey: string;
+  readonly ribbit: string;
+};
+
+declare const starkeyIcon: string;
+declare const ribbitIcon: string;
+
+/**
+ * Optional wallet icon URLs.
+ * If provided, these will be used instead of the default bundled static images.
+ * If not provided, the component will automatically use bundled PNG images.
+ */
+interface WalletIcons {
+    /** Custom URL for Starkey wallet icon (PNG recommended) */
+    starkey?: string;
+    /** Custom URL for Ribbit wallet icon (PNG recommended) */
+    ribbit?: string;
+}
+
+export { type ABIStorage, Button, type ButtonProps, ConnectWalletHandler, type ConnectWalletHandlerProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, type ModuleABI, Toaster, type UserProfile, WALLET_EVENTS, WALLET_ICONS, type WalletIcons, type WalletType, buttonVariants, cn, getStoredABI, ribbitIcon, standardizeAddress, starkeyIcon, useConversionUtils, useSupraMultiWallet };

package/dist/index.d.ts

@@ -0,0 +1,185 @@
+import * as React$1 from 'react';
+import { BCS } from 'supra-l1-sdk-core';
+import { ClassValue } from 'clsx';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { Toaster as Toaster$1 } from 'sonner';
+
+type WalletType = 'starkey' | 'ribbit';
+interface WalletCapabilities {
+    signMessage: boolean;
+    accountSwitching: boolean;
+    networkSwitching: boolean;
+    rawTransactions: boolean;
+    eventListeners: boolean;
+    tokenRevalidation: boolean;
+}
+declare const WALLET_EVENTS: {
+    readonly CONNECTED: "wallet-connected";
+    readonly PRESIGNED_STATE: "presigned-state";
+    readonly POSTSIGNED_STATE: "postsigned-state";
+    readonly ERROR: "wallet-error";
+};
+declare const useSupraMultiWallet: (enabledWallets?: WalletType[]) => {
+    selectedWallet: WalletType;
+    walletCapabilities: WalletCapabilities;
+    getAvailableWallets: () => {
+        type: WalletType;
+        name: string;
+        isInstalled: boolean;
+        capabilities: WalletCapabilities;
+    }[];
+    getCurrentProvider: () => any;
+    isExtensionInstalled: boolean;
+    accounts: string[];
+    networkData: any;
+    balance: string;
+    transactions: {
+        hash: string;
+    }[];
+    selectedChainId: string;
+    connectWallet: (walletType?: WalletType) => Promise<boolean>;
+    disconnectWallet: () => Promise<void>;
+    sendRawTransaction: (moduleAddress?: string, moduleName?: string, functionName?: string, params?: any[], runTimeParams?: any[], txExpiryTime?: number) => Promise<any>;
+    signMessage: (message: string, nonce?: string, account?: any, forceSign?: boolean) => Promise<any>;
+    setSelectedChainId: React$1.Dispatch<React$1.SetStateAction<string>>;
+    loading: boolean;
+};
+
+interface UserProfile {
+    address: string;
+    username: string | null;
+    profileImage: string | null;
+}
+interface ConnectWalletHandlerProps {
+    onConnect?: (account: string) => void;
+    onDisconnect?: () => void;
+    /**
+     * Optional array of wallet types to enable. If not provided, all available wallets will be shown.
+     * Example: `enabledWallets={['starkey']}` will only show Starkey Wallet.
+     */
+    enabledWallets?: WalletType[];
+    children: (props: {
+        isConnected: boolean;
+        accounts: string[];
+        loading: boolean;
+        balance: string;
+        userProfile: UserProfile | null;
+        handleConnect: () => void;
+        handleDisconnect: () => void;
+    }) => React.ReactNode;
+}
+declare const ConnectWalletHandler: React.FC<ConnectWalletHandlerProps>;
+
+interface ModuleABI {
+    address: string;
+    name: string;
+    friends?: string[];
+    exposed_functions: Array<{
+        name: string;
+        visibility?: string;
+        is_entry?: boolean;
+        is_view?: boolean;
+        generic_type_params?: Array<{
+            constraints?: any[];
+        }>;
+        params: string[];
+        return?: string[];
+    }>;
+    structs?: Array<{
+        name: string;
+        is_native?: boolean;
+        abilities?: string[];
+        generic_type_params?: any[];
+        fields?: Array<{
+            name: string;
+            type: string;
+        }>;
+    }>;
+}
+interface ABIStorage {
+    [moduleAddress: string]: {
+        [moduleName: string]: ModuleABI;
+    };
+}
+declare function getStoredABI(moduleAddress: string, moduleName: string): ModuleABI | null;
+
+declare const useConversionUtils: () => {
+    stringToUint8Array: (humanReadableStr: string) => Uint8Array<ArrayBufferLike>;
+    addressToUint8Array: (cryptoAddress: string) => Uint8Array<ArrayBufferLike>;
+    serializeString: (humanReadableStr: string) => Uint8Array<ArrayBufferLike>;
+    serializeUint8: (value: number | string) => Uint8Array<ArrayBufferLike>;
+    serializeUint16: (value: number | string | bigint) => Uint8Array<ArrayBufferLike>;
+    serializeUint32: (value: number | string | bigint) => Uint8Array<ArrayBufferLike>;
+    serializeUint64: (value: number | string | bigint) => Uint8Array<ArrayBufferLike>;
+    serializeUint128: (value: number | string | bigint) => Uint8Array<ArrayBufferLike>;
+    serializeU256: (value: bigint) => Uint8Array<ArrayBufferLike>;
+    serializeBool: (value: boolean) => Uint8Array<ArrayBufferLike>;
+    serializeVector: (values: any[], type: "u8" | "u64" | "bool" | "string" | "address") => Uint8Array<ArrayBufferLike>;
+    deserializeString: (uint8Array: string) => Uint8Array<ArrayBufferLike>;
+    deserializeVector: (uint8Array: Uint8Array) => any[];
+    hexToString: (hex: string, type: string) => string;
+    stringToHex: (str: string) => string;
+    serializeValueByType: (value: any, type: string, serializer?: BCS.Serializer) => Uint8Array;
+    serializeArgsFromTypes: (args: any[], paramTypes: string[]) => Uint8Array[];
+    fetchModuleABI: (moduleAddress: string, moduleName: string, rpcUrl?: string) => Promise<ModuleABI>;
+    getFunctionParamTypes: (moduleAddress: string, moduleName: string, functionName: string, rpcUrl?: string) => Promise<string[]>;
+    serializeTransactionArgs: (args: any[], moduleAddress: string, moduleName: string, functionName: string, rpcUrl?: string) => Promise<Uint8Array[]>;
+};
+
+declare function cn(...inputs: ClassValue[]): string;
+declare function standardizeAddress(address: string): string;
+
+declare const buttonVariants: (props?: ({
+    variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+}
+declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
+
+declare const Dialog: React$1.FC<DialogPrimitive.DialogProps>;
+declare const DialogTrigger: React$1.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const DialogPortal: React$1.FC<DialogPrimitive.DialogPortalProps>;
+declare const DialogClose: React$1.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const DialogOverlay: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const DialogContent: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const DialogHeader: {
+    ({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const DialogFooter: {
+    ({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const DialogTitle: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React$1.RefAttributes<HTMLHeadingElement>, "ref"> & React$1.RefAttributes<HTMLHeadingElement>>;
+declare const DialogDescription: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React$1.RefAttributes<HTMLParagraphElement>, "ref"> & React$1.RefAttributes<HTMLParagraphElement>>;
+
+type ToasterProps = React.ComponentProps<typeof Toaster$1>;
+declare const Toaster: ({ ...props }: ToasterProps) => react_jsx_runtime.JSX.Element;
+
+// Type declarations for wallet icons
+declare const WALLET_ICONS: {
+  readonly starkey: string;
+  readonly ribbit: string;
+};
+
+declare const starkeyIcon: string;
+declare const ribbitIcon: string;
+
+/**
+ * Optional wallet icon URLs.
+ * If provided, these will be used instead of the default bundled static images.
+ * If not provided, the component will automatically use bundled PNG images.
+ */
+interface WalletIcons {
+    /** Custom URL for Starkey wallet icon (PNG recommended) */
+    starkey?: string;
+    /** Custom URL for Ribbit wallet icon (PNG recommended) */
+    ribbit?: string;
+}
+
+export { type ABIStorage, Button, type ButtonProps, ConnectWalletHandler, type ConnectWalletHandlerProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, type ModuleABI, Toaster, type UserProfile, WALLET_EVENTS, WALLET_ICONS, type WalletIcons, type WalletType, buttonVariants, cn, getStoredABI, ribbitIcon, standardizeAddress, starkeyIcon, useConversionUtils, useSupraMultiWallet };