@avalabs/avacloud-waas-react 1.0.10 → 1.0.12

package/README.md

@@ -73,9 +73,9 @@ The main provider component that wraps your application and provides wallet cont
 
 ```tsx
 <AvaCloudWalletProvider
-  orgId="your-avacloud-org-id" // Required
-  chainId={43113}
-  darkMode={false}
+  orgId="your-avacloud-org-id" // Required - your AvaCloud organization ID
+  chainId={43113}               // Optional - defaults to Avalanche Fuji Testnet
+  darkMode={false}              // Optional - theme mode for UI components
   onAuthSuccess={(user) => console.log('Auth success', user)}
   onAuthError={(error) => console.error('Auth error', error)}
   onWalletUpdate={(wallet) => console.log('Wallet updated', wallet)}
@@ -88,13 +88,13 @@ The main provider component that wraps your application and provides wallet cont
 
 | Prop | Type | Description |
 |------|------|-------------|
-| `orgId` | `string` | Required AvaCloud organization ID |
-| `env` | `'local' \| 'development' \| 'prod'` | (Optional) Environment to use. Defaults to 'prod'. |
-| `chainId` | `number` | (Optional) EVM chain ID to use (defaults to Avalanche Fuji Testnet - 43113) |
-| `darkMode` | `boolean` | (Optional) Whether to use dark mode for UI components |
-| `onAuthSuccess` | `(user: Auth0User) => void` | (Optional) Callback called when authentication is successful |
-| `onAuthError` | `(error: Error) => void` | (Optional) Callback called when authentication fails |
-| `onWalletUpdate` | `(wallet: WalletInfo) => void` | (Optional) Callback called when wallet information is updated |
+| `orgId` | `string` | **Required** - Your AvaCloud organization ID used to fetch wallet configuration |
+| `env` | `'local' \| 'development' \| 'prod'` | Environment to use (default: `'prod'`) |
+| `chainId` | `number` | EVM chain ID (default: `43113` - Avalanche Fuji Testnet) |
+| `darkMode` | `boolean` | Enable dark mode for UI components (default: `false`) |
+| `onAuthSuccess` | `(user: Auth0User) => void` | Callback on successful authentication |
+| `onAuthError` | `(error: Error) => void` | Callback on authentication error |
+| `onWalletUpdate` | `(wallet: WalletInfo) => void` | Callback when wallet information updates |
 
 ### UI Components
 
@@ -209,6 +209,100 @@ Hook for accessing and setting the current chain ID.
 const { chainId, setChainId } = useChainId();
 ```
 
+## WAGMI Integration
+
+This SDK includes a WAGMI connector that allows you to use AvaCloud wallets with WAGMI (React Ethereum Library).
+
+### Prerequisites
+
+Install the required WAGMI dependencies:
+
+```bash
+npm install wagmi viem@2.x @tanstack/react-query
+```
+
+### Setting up WAGMI with AvaCloud
+
+```tsx
+import { WagmiProvider, createConfig } from 'wagmi';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { avaCloudWallet } from '@avalabs/avacloud-waas-react';
+import { avalancheFuji } from 'wagmi/chains';
+import { http } from 'wagmi';
+
+const queryClient = new QueryClient();
+
+const config = createConfig({
+  chains: [avalancheFuji],
+  connectors: [
+    avaCloudWallet(),
+  ],
+  transports: {
+    [avalancheFuji.id]: http(),
+  },
+});
+
+function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <WagmiProvider config={config}>
+        <AvaCloudWalletProvider orgId="your-avacloud-org-id">
+          <YourApp />
+        </AvaCloudWalletProvider>
+      </WagmiProvider>
+    </QueryClientProvider>
+  );
+}
+```
+
+### Using WAGMI Hooks
+
+Once configured, use standard WAGMI hooks with your AvaCloud wallet:
+
+```tsx
+import { useAccount, useConnect, useDisconnect, useSignMessage } from 'wagmi';
+
+function WagmiExample() {
+  const { address, isConnected } = useAccount();
+  const { connect, connectors } = useConnect();
+  const { disconnect } = useDisconnect();
+  const { signMessage } = useSignMessage();
+
+  const handleConnect = () => {
+    const avaCloudConnector = connectors.find(c => c.id === 'avaCloudWallet');
+    if (avaCloudConnector) {
+      connect({ connector: avaCloudConnector });
+    }
+  };
+
+  const handleSign = async () => {
+    const signature = await signMessage({ message: 'Hello from WAGMI!' });
+    console.log('Signature:', signature);
+  };
+
+  return (
+    <div>
+      {isConnected ? (
+        <>
+          <p>Connected: {address}</p>
+          <button onClick={() => disconnect()}>Disconnect</button>
+          <button onClick={handleSign}>Sign Message</button>
+        </>
+      ) : (
+        <button onClick={handleConnect}>Connect AvaCloud Wallet</button>
+      )}
+    </div>
+  );
+}
+```
+
+### Important Notes
+
+- The AvaCloud WAGMI connector requires the `AvaCloudWalletProvider` to be present in your component tree
+- Authentication is still managed through the AvaCloud SDK's authentication flow
+- The connector automatically syncs with the wallet state from `AvaCloudWalletProvider`
+- All standard WAGMI hooks and functionality are supported
+
 ## Advanced Usage
 
 ### Theme Customization
@@ -274,30 +368,4 @@ We welcome contributions! Please see [CONTRIBUTING.md](https://github.com/ava-la
 
 ## License
 
-MIT © [Ava Labs, Inc.](https://github.com/ava-labs)
-
-## Using the AvaCloud Organization ID
-
-The `AvaCloudWalletProvider` requires an AvaCloud organization ID (`orgId`). This is used to fetch the organization configuration from the AvaCloud API, which includes the mapping to the appropriate wallet service organization ID used for wallet operations.
-
-```jsx
-import { AvaCloudWalletProvider } from '@avalabs/avacloud-waas-react';
-
-function App() {
-  return (
-    <AvaCloudWalletProvider
-      orgId="your-avacloud-org-id" // Required AvaCloud organization ID
-    >
-      <YourApp />
-    </AvaCloudWalletProvider>
-  );
-}
-```
-
-When provided, the `orgId` will be used to:
-
-1. Fetch the organization configuration from the AvaCloud API
-2. Map to the appropriate wallet service organization ID
-3. Use the mapped ID for wallet operations
-
-This enables organizations to have their AvaCloud identity seamlessly map to their WaaS wallets. 
+MIT © [Ava Labs, Inc.](https://github.com/ava-labs) 

package/dist/index.d.mts

@@ -1,9 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as _cubist_labs_cubesigner_sdk from '@cubist-labs/cubesigner-sdk';
-import { IdentityProof, CubeSignerClient } from '@cubist-labs/cubesigner-sdk';
+import { CubeSignerClient, IdentityProof } from '@cubist-labs/cubesigner-sdk';
 import { PropsWithChildren, ButtonHTMLAttributes } from 'react';
 import { ButtonProps } from '@avalabs/core-k2-components';
-import { Hex, TransactionRequest, Signature, Hash } from 'viem';
+import { Hex, Signature, TransactionRequest, Hash } from 'viem';
+import { CreateConnectorFn } from '@wagmi/core';
 
 /**
  * Cubist wallet information
@@ -518,4 +519,6 @@ interface UseUserWalletsResult {
 }
 declare function useUserWallets(): UseUserWalletsResult;
 
-export { type AddAccountMessage, type AdminPortalSettings, type Auth0User, type AuthMessage, type AuthMessagePayload, type AuthStateUpdateMessage, type AuthStatusMessage, type AvaCloudEnvironment, type AvaCloudWalletContextType, AvaCloudWalletProvider, type AvaCloudWalletProviderProps, type BaseAuthMessage, type CheckAuthStatusMessage, type CubistWalletInfo, type ErrorMessage, ExportView, type GetOidcMessage, type IframeReadyMessage, LoginButton, type LoginRequestMessage, type LogoutRequestMessage, type MessageType, type OrgConfig, type ReceiveOidcMessage, ReceiveView, type RegisterMessage, type RegisterPayload, type RegisterSuccessMessage, SendView, type SignupRequestMessage, ThemeProvider, TokensView, type UserInfo, UserProfile, VM, WalletButton, WalletCard, WalletDisplay, type WalletInfo, type WalletKeysErrorMessage, type WalletKeysUpdateMessage, useAuth, useAvaCloudWallet, useChainId, usePostMessage, useSignMessage, useSignTransaction, useThemeMode, useTransferTokens, useUserWallets };
+declare function avaCloudWallet(): CreateConnectorFn;
+
+export { type AddAccountMessage, type AdminPortalSettings, type Auth0User, type AuthMessage, type AuthMessagePayload, type AuthStateUpdateMessage, type AuthStatusMessage, type AvaCloudEnvironment, type AvaCloudWalletContextType, AvaCloudWalletProvider, type AvaCloudWalletProviderProps, type BaseAuthMessage, type CheckAuthStatusMessage, type CubistWalletInfo, type ErrorMessage, ExportView, type GetOidcMessage, type IframeReadyMessage, LoginButton, type LoginRequestMessage, type LogoutRequestMessage, type MessageType, type OrgConfig, type ReceiveOidcMessage, ReceiveView, type RegisterMessage, type RegisterPayload, type RegisterSuccessMessage, SendView, type SignupRequestMessage, ThemeProvider, TokensView, type UserInfo, UserProfile, VM, WalletButton, WalletCard, WalletDisplay, type WalletInfo, type WalletKeysErrorMessage, type WalletKeysUpdateMessage, avaCloudWallet, useAuth, useAvaCloudWallet, useChainId, usePostMessage, useSignMessage, useSignTransaction, useThemeMode, useTransferTokens, useUserWallets };

package/dist/index.d.ts

@@ -1,9 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as _cubist_labs_cubesigner_sdk from '@cubist-labs/cubesigner-sdk';
-import { IdentityProof, CubeSignerClient } from '@cubist-labs/cubesigner-sdk';
+import { CubeSignerClient, IdentityProof } from '@cubist-labs/cubesigner-sdk';
 import { PropsWithChildren, ButtonHTMLAttributes } from 'react';
 import { ButtonProps } from '@avalabs/core-k2-components';
-import { Hex, TransactionRequest, Signature, Hash } from 'viem';
+import { Hex, Signature, TransactionRequest, Hash } from 'viem';
+import { CreateConnectorFn } from '@wagmi/core';
 
 /**
  * Cubist wallet information
@@ -518,4 +519,6 @@ interface UseUserWalletsResult {
 }
 declare function useUserWallets(): UseUserWalletsResult;
 
-export { type AddAccountMessage, type AdminPortalSettings, type Auth0User, type AuthMessage, type AuthMessagePayload, type AuthStateUpdateMessage, type AuthStatusMessage, type AvaCloudEnvironment, type AvaCloudWalletContextType, AvaCloudWalletProvider, type AvaCloudWalletProviderProps, type BaseAuthMessage, type CheckAuthStatusMessage, type CubistWalletInfo, type ErrorMessage, ExportView, type GetOidcMessage, type IframeReadyMessage, LoginButton, type LoginRequestMessage, type LogoutRequestMessage, type MessageType, type OrgConfig, type ReceiveOidcMessage, ReceiveView, type RegisterMessage, type RegisterPayload, type RegisterSuccessMessage, SendView, type SignupRequestMessage, ThemeProvider, TokensView, type UserInfo, UserProfile, VM, WalletButton, WalletCard, WalletDisplay, type WalletInfo, type WalletKeysErrorMessage, type WalletKeysUpdateMessage, useAuth, useAvaCloudWallet, useChainId, usePostMessage, useSignMessage, useSignTransaction, useThemeMode, useTransferTokens, useUserWallets };
+declare function avaCloudWallet(): CreateConnectorFn;
+
+export { type AddAccountMessage, type AdminPortalSettings, type Auth0User, type AuthMessage, type AuthMessagePayload, type AuthStateUpdateMessage, type AuthStatusMessage, type AvaCloudEnvironment, type AvaCloudWalletContextType, AvaCloudWalletProvider, type AvaCloudWalletProviderProps, type BaseAuthMessage, type CheckAuthStatusMessage, type CubistWalletInfo, type ErrorMessage, ExportView, type GetOidcMessage, type IframeReadyMessage, LoginButton, type LoginRequestMessage, type LogoutRequestMessage, type MessageType, type OrgConfig, type ReceiveOidcMessage, ReceiveView, type RegisterMessage, type RegisterPayload, type RegisterSuccessMessage, SendView, type SignupRequestMessage, ThemeProvider, TokensView, type UserInfo, UserProfile, VM, WalletButton, WalletCard, WalletDisplay, type WalletInfo, type WalletKeysErrorMessage, type WalletKeysUpdateMessage, avaCloudWallet, useAuth, useAvaCloudWallet, useChainId, usePostMessage, useSignMessage, useSignTransaction, useThemeMode, useTransferTokens, useUserWallets };

package/dist/index.js

@@ -32,6 +32,7 @@ __export(index_exports, {
   WalletButton: () => WalletButton,
   WalletCard: () => WalletCard,
   WalletDisplay: () => WalletDisplay,
+  avaCloudWallet: () => avaCloudWallet,
   useAuth: () => useAuth,
   useAvaCloudWallet: () => useAvaCloudWallet,
   useChainId: () => useChainId,
@@ -1600,7 +1601,7 @@ var queryClient = new import_react_query2.QueryClient({
   }
 });
 function getCubistEnv(environment) {
-  return environment === "gamma" || environment === "development" ? import_cubesigner_sdk.envs.gamma : import_cubesigner_sdk.envs.prod;
+  return environment === "production" ? import_cubesigner_sdk.envs.prod : import_cubesigner_sdk.envs.gamma;
 }
 function ViemProviderWrapper({ children, chainId }) {
   const { data: blockchain } = useBlockchain(chainId.toString());
@@ -1692,7 +1693,7 @@ function AvaCloudWalletProvider({
       }
       try {
         const resp = await import_cubesigner_sdk2.CubeSignerClient.createOidcSession(
-          getCubistEnv(environment),
+          getCubistEnv(environment === "production" ? "prod" : "gamma"),
           orgConfig.walletProviderOrgID,
           accessToken,
           ["sign:*", "manage:*", "export:*"],
@@ -4524,6 +4525,68 @@ function useUserWallets() {
     isLoading
   };
 }
+
+// src/wagmi/connector.ts
+var import_core = require("@wagmi/core");
+var import_viem5 = require("viem");
+function avaCloudWallet() {
+  return (0, import_core.createConnector)((config) => ({
+    id: "avaCloudWallet",
+    name: "AvaCloud Wallet",
+    type: "injected",
+    async connect() {
+      const { walletClient } = useViem();
+      if (!walletClient) {
+        throw new Error("AvaCloud Wallet not connected");
+      }
+      const accounts = await this.getAccounts();
+      const chainId = await this.getChainId();
+      config.emitter.emit("connect", { accounts, chainId });
+      return { accounts, chainId };
+    },
+    async disconnect() {
+      config.emitter.emit("disconnect");
+    },
+    async getAccounts() {
+      const { walletClient } = useViem();
+      if (!(walletClient == null ? void 0 : walletClient.account)) {
+        throw new Error("AvaCloud Wallet not connected or account not found.");
+      }
+      return [walletClient.account.address];
+    },
+    async getChainId() {
+      const { chainId } = useViem();
+      return chainId;
+    },
+    async getProvider() {
+      const { publicClient } = useViem();
+      if (!publicClient) {
+        throw new Error("Public client not found.");
+      }
+      return publicClient;
+    },
+    async isAuthorized() {
+      const { walletClient } = useViem();
+      return !!walletClient;
+    },
+    onAccountsChanged(accounts) {
+      if (accounts.length === 0) {
+        this.disconnect();
+      } else {
+        config.emitter.emit("change", {
+          accounts: accounts.map((x) => (0, import_viem5.getAddress)(x))
+        });
+      }
+    },
+    onChainChanged(chain) {
+      const chainId = Number(chain);
+      config.emitter.emit("change", { chainId });
+    },
+    onDisconnect() {
+      config.emitter.emit("disconnect");
+    }
+  }));
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AvaCloudWalletProvider,
@@ -4538,6 +4601,7 @@ function useUserWallets() {
   WalletButton,
   WalletCard,
   WalletDisplay,
+  avaCloudWallet,
   useAuth,
   useAvaCloudWallet,
   useChainId,

package/dist/index.mjs

@@ -1554,7 +1554,7 @@ var queryClient = new QueryClient({
   }
 });
 function getCubistEnv(environment) {
-  return environment === "gamma" || environment === "development" ? envs.gamma : envs.prod;
+  return environment === "production" ? envs.prod : envs.gamma;
 }
 function ViemProviderWrapper({ children, chainId }) {
   const { data: blockchain } = useBlockchain(chainId.toString());
@@ -1646,7 +1646,7 @@ function AvaCloudWalletProvider({
       }
       try {
         const resp = await CubeSignerClient.createOidcSession(
-          getCubistEnv(environment),
+          getCubistEnv(environment === "production" ? "prod" : "gamma"),
           orgConfig.walletProviderOrgID,
           accessToken,
           ["sign:*", "manage:*", "export:*"],
@@ -4556,6 +4556,72 @@ function useUserWallets() {
     isLoading
   };
 }
+
+// src/wagmi/connector.ts
+import {
+  createConnector
+} from "@wagmi/core";
+import {
+  getAddress
+} from "viem";
+function avaCloudWallet() {
+  return createConnector((config) => ({
+    id: "avaCloudWallet",
+    name: "AvaCloud Wallet",
+    type: "injected",
+    async connect() {
+      const { walletClient } = useViem();
+      if (!walletClient) {
+        throw new Error("AvaCloud Wallet not connected");
+      }
+      const accounts = await this.getAccounts();
+      const chainId = await this.getChainId();
+      config.emitter.emit("connect", { accounts, chainId });
+      return { accounts, chainId };
+    },
+    async disconnect() {
+      config.emitter.emit("disconnect");
+    },
+    async getAccounts() {
+      const { walletClient } = useViem();
+      if (!(walletClient == null ? void 0 : walletClient.account)) {
+        throw new Error("AvaCloud Wallet not connected or account not found.");
+      }
+      return [walletClient.account.address];
+    },
+    async getChainId() {
+      const { chainId } = useViem();
+      return chainId;
+    },
+    async getProvider() {
+      const { publicClient } = useViem();
+      if (!publicClient) {
+        throw new Error("Public client not found.");
+      }
+      return publicClient;
+    },
+    async isAuthorized() {
+      const { walletClient } = useViem();
+      return !!walletClient;
+    },
+    onAccountsChanged(accounts) {
+      if (accounts.length === 0) {
+        this.disconnect();
+      } else {
+        config.emitter.emit("change", {
+          accounts: accounts.map((x) => getAddress(x))
+        });
+      }
+    },
+    onChainChanged(chain) {
+      const chainId = Number(chain);
+      config.emitter.emit("change", { chainId });
+    },
+    onDisconnect() {
+      config.emitter.emit("disconnect");
+    }
+  }));
+}
 export {
   AvaCloudWalletProvider,
   ExportView,
@@ -4569,6 +4635,7 @@ export {
   WalletButton,
   WalletCard,
   WalletDisplay,
+  avaCloudWallet,
   useAuth,
   useAvaCloudWallet,
   useChainId,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@avalabs/avacloud-waas-react",
-  "version": "1.0.10",
+  "version": "1.0.12",
   "description": "React SDK for AvaCloud Wallet as a Service",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -28,9 +28,10 @@
     "@cubist-labs/cubesigner-sdk": "0.4.110-0",
     "@iconify/react": "^4.1.1",
     "@tanstack/react-query": "^5.64.2",
+    "@wagmi/core": "^2.17.3",
     "lottie-react": "^2.4.0",
     "qrcode.react": "^3.1.0",
-    "viem": "^2.5.0"
+    "viem": "2.31.2"
   },
   "keywords": [
     "avalanche",