@abstraxn/signer-react 3.1.4 → 3.2.0

package/CHANGELOG.md

@@ -5,6 +5,26 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [3.2.0] - 2026-04-22
+
+### Added
+
+- **Account Abstraction owner hook** – Added `useSmartAccountOwner()` to expose a viem-compatible custom local account for AA integrations (e.g. permissionless). The hook returns `{ smartAccountOwner, isReady, address }`, supports optional address override, and is exported from `@abstraxn/signer-react`.
+- **EIP-7702 authorization signing support** – `smartAccountOwner` now implements `signAuthorization(...)` so 7702 flows can sign delegation authorizations through the SDK backend path.
+
+### Changed
+
+- **AA signing now uses backend signing APIs** – AA owner signing routes through existing authenticated backend signing methods (`signTransactionViaAPI` / `signTypedTxViaAPI`) instead of requiring app-level Turnkey account creation.
+- **UserOperation message signing compatibility** – `signMessage` in AA owner flow now follows viem EIP-191 semantics (`hashMessage(...)` then sign digest) to match permissionless/simple account UserOperation signature expectations.
+- **7702 payload encoding alignment** – 7702 authorization signing uses Turnkey-specific parameters:
+  - `encoding: PAYLOAD_ENCODING_EIP7702_AUTHORIZATION`
+  - `hashFunction: HASH_FUNCTION_NOT_APPLICABLE`
+
+### Documentation
+
+- **AA docs update** – Added `useSmartAccountOwner()` to hook list and expanded AA integration example in README.
+- **Abstraxn infra example** – Updated README AA sample to use Abstraxn bundler/paymaster endpoints and dynamic chain-based URL construction.
+
 ## [3.1.4] - 2026-04-06
 
 ### Changed

package/README.md

@@ -105,6 +105,78 @@ function HookConnectButton() {
 - `useExportWallet()` - Export wallet (EVM or Solana, based on current chain)
 - `usePublicClient()` / `usePrepareRawTxn()` / `useSignTxn()` / `useSignAndSendTxn()` / `useWaitForTxnReceipt()` - EVM transaction flow (prepare → sign → send → confirm)
 - `useSolanaConnection()` / `useSolanaPublicKey()` / `usePrepareSolanaTxn()` / `useSignSolanaTxn()` / `useSignAndSendSolanaTxn()` / `useWaitForSolanaConfirmation()` - Solana transaction flow (prepare → sign → send → confirm)
+- `useSmartAccountOwner()` - Get an AA-compatible owner account for permissionless-style account abstraction flows
+
+### Example: Account Abstraction owner (permissionless-compatible)
+
+```tsx
+import { useMemo } from 'react';
+import { useSmartAccountOwner } from '@abstraxn/signer-react';
+import { createPublicClient, createWalletClient, http } from 'viem';
+import { sepolia } from 'viem/chains';
+import { toSimpleSmartAccount } from 'permissionless/accounts';
+import {
+  createBundlerClient,
+  createPaymasterClient,
+  entryPoint07Address,
+} from 'viem/account-abstraction';
+
+export function useAaClient({
+  chain = sepolia,
+  rpcUrl = 'https://sepolia.rpc.thirdweb.com',
+  abstraxnApiKey,
+}: {
+  chain?: Chain;
+  rpcUrl?: string;
+  abstraxnApiKey: string;
+}) {
+  const { smartAccountOwner, isReady } = useSmartAccountOwner();
+
+  return useMemo(async () => {
+    if (!isReady || !smartAccountOwner) {
+      return null;
+    }
+
+    const bundlerUrl = `https://bundler.abstraxn.com/api/v1/${chainId}/?apikey=${abstraxnApiKey}`;
+    const paymasterUrl = `https://paymaster.abstraxn.com/api/v2/${chainId}/?apikey=${abstraxnApiKey}`;
+
+    const publicClient = createPublicClient({
+      chain,
+      transport: http(rpcUrl),
+    });
+
+    // permissionless expects a wallet client owner
+    const ownerWalletClient = createWalletClient({
+      account: smartAccountOwner,
+      chain,
+      transport: http(rpcUrl),
+    });
+
+    const paymasterClient = createPaymasterClient({
+      transport: http(paymasterUrl),
+    });
+
+    const simpleSmartAccount = await toSimpleSmartAccount({
+      owner: ownerWalletClient,
+      client: publicClient,
+      entryPoint: {
+        address: entryPoint07Address,
+        version: '0.7',
+      },
+    });
+
+    return createBundlerClient({
+      client: publicClient,
+      transport: http(bundlerUrl),
+    });
+  }, [isReady, smartAccountOwner, chain, rpcUrl, abstraxnApiKey]);
+}
+```
+
+Notes:
+- `permissionless` and AA provider clients are app-level dependencies (not bundled in `@abstraxn/signer-react`).
+- The owner returned by `useSmartAccountOwner()` is signer-only; you control chain, bundler, paymaster, and entry point in your app.
+- After creating the `bundlerClient`, call `sendUserOperation({ account: simpleSmartAccount, calls: [...], paymaster: paymasterClient })`.
 
 ### Example: EVM → Solana flow after social/email login
 

package/dist/src/WalletModal.css

@@ -531,6 +531,52 @@
   color: #6b7280;
 }
 
+.wallet-modal-asset-balance-skeleton {
+  display: inline-block;
+  width: 140px;
+  max-width: 100%;
+  height: 14px;
+  border-radius: 999px;
+  background: linear-gradient(90deg, rgba(156, 163, 175, 0.22), rgba(156, 163, 175, 0.44), rgba(156, 163, 175, 0.22));
+  background-size: 200% 100%;
+  animation: wallet-modal-balance-shimmer 1.2s ease-in-out infinite;
+}
+
+.wallet-modal-theme-dark .wallet-modal-asset-balance-skeleton {
+  background: linear-gradient(90deg, rgba(75, 85, 99, 0.3), rgba(107, 114, 128, 0.55), rgba(75, 85, 99, 0.3));
+  background-size: 200% 100%;
+}
+
+.wallet-modal-asset-explorer-link {
+  display: inline-flex;
+  width: fit-content;
+  margin-top: 2px;
+  font-size: 12px;
+  font-weight: 500;
+  text-decoration: none;
+}
+
+.wallet-modal-theme-dark .wallet-modal-asset-explorer-link {
+  color: #a855f7;
+}
+
+.wallet-modal-theme-light .wallet-modal-asset-explorer-link {
+  color: #9333ea;
+}
+
+.wallet-modal-asset-explorer-link:hover {
+  text-decoration: underline;
+}
+
+@keyframes wallet-modal-balance-shimmer {
+  0% {
+    background-position: 100% 0;
+  }
+  100% {
+    background-position: -100% 0;
+  }
+}
+
 .wallet-modal-asset-status {
   position: absolute;
   bottom: 0;

package/dist/src/WalletModal.js

@@ -36,6 +36,7 @@ export function WalletModal({ isOpen, onClose, onRampUrl }) {
     const [showSendModal, setShowSendModal] = useState(false);
     const [showManageModal, setShowManageModal] = useState(false);
     const [showChainSelector, setShowChainSelector] = useState(false);
+    const [isBalanceRefreshing, setIsBalanceRefreshing] = useState(false);
     const [selectedChainType, setSelectedChainType] = useState("evm");
     // Export states
     const [showExportWarning, setShowExportWarning] = useState(false);
@@ -59,19 +60,30 @@ export function WalletModal({ isOpen, onClose, onRampUrl }) {
             // If no chain selected, show default
             if (!balance || balance === 0n)
                 return "0";
-            return formatBalance(balance, 18, "ETH");
+            return formatBalance(balance, 18, "ETH", 4);
         }
         const symbol = currentChain.nativeCurrency?.symbol || "ETH";
         const decimals = currentChain.nativeCurrency?.decimals || 18;
         if (!balance || balance === 0n) {
             return `0 ${symbol}`;
         }
-        return formatBalance(balance, decimals, symbol);
+        return formatBalance(balance, decimals, symbol, 4);
     }, [currentChain, externalWalletBalance, walletBalance]);
+    const chainExplorer = useMemo(() => {
+        if (!currentChain)
+            return null;
+        const url = currentChain.blockExplorer?.url || currentChain.explorerUrl;
+        if (!url)
+            return null;
+        return {
+            url,
+            label: currentChain.blockExplorer?.name || "Explorer",
+        };
+    }, [currentChain]);
     // Refetch balance from RPC when UI screen changes (back button, modal open/close, etc.)
     useEffect(() => {
         if (isOpen && refetchBalance) {
-            refetchBalance();
+            void refetchBalance();
         }
     }, [isOpen, showReceiveModal, showSendModal, showManageModal, showChainSelector, refetchBalance]);
     /** Load MFA status once per session (in-memory) when this wallet modal opens; not persisted. */
@@ -300,7 +312,7 @@ export function WalletModal({ isOpen, onClose, onRampUrl }) {
         return (_jsx(ManageWalletModal, { isOpen: true, onClose: () => setShowManageModal(false), displayAddress: displayAddress, userEmail: user?.email, organizationName: whoami?.organizationName, isExternalWalletConnected: isExternalWalletConnected || false, onExportPrivateKey: handleExportPrivateKey, theme: theme }));
     }
     // Main Modal
-    return (_jsxs(_Fragment, { children: [_jsx("div", { "data-abstraxn-sdk-root": true, className: `wallet-modal-overlay wallet-modal-theme-${theme}`, onClick: showChainSelector ? undefined : onClose, style: showChainSelector ? { pointerEvents: "none" } : undefined, children: _jsxs("div", { className: `wallet-modal-content wallet-modal-theme-${theme} ${showChainSelector ? "selector-open" : ""}`, onClick: (e) => e.stopPropagation(), style: showChainSelector ? { pointerEvents: "auto" } : undefined, children: [_jsxs("div", { className: "wallet-modal-header", children: [_jsx("div", { className: "wallet-modal-header-left", children: _jsxs("div", { className: "wallet-modal-user-info", children: [_jsx("div", { className: "wallet-modal-avatar", children: _jsx(UserAvatar, { user: user, isExternalWalletConnected: isExternalWalletConnected || false }) }), _jsxs("div", { className: "wallet-modal-user-details", children: [_jsxs("div", { className: "wallet-modal-address", onClick: handleCopyAddress, children: [formatAddress(displayAddress || address), copied ? (_jsx("span", { className: "wallet-modal-copy-notification", children: "Copied!" })) : (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", className: "wallet-modal-copy-icon", children: [_jsx("path", { d: "M5.5 3.5H3.5C2.67157 3.5 2 4.17157 2 5V12.5C2 13.3284 2.67157 14 3.5 14H11C11.8284 14 12.5 13.3284 12.5 12.5V10.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M5.5 3.5C5.5 2.67157 6.17157 2 7 2H12.5C13.3284 2 14 2.67157 14 3.5V9C14 9.82843 13.3284 10.5 12.5 10.5H7C6.17157 10.5 5.5 9.82843 5.5 9V3.5Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }))] }), user?.email && (_jsx("div", { className: "wallet-modal-email", children: user.email }))] })] }) }), _jsx("div", { className: "wallet-modal-header-right", children: _jsx("button", { className: "wallet-modal-close", onClick: onClose, "aria-label": "Close", children: _jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M18 6L6 18M6 6L18 18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }) })] }), !isExternalWalletConnected && (_jsxs("div", { className: "wallet-modal-actions", children: [_jsxs("button", { className: "wallet-modal-action-btn", onClick: handleSend, children: [_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("line", { x1: "22", y1: "2", x2: "11", y2: "13" }), _jsx("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })] }), _jsx("span", { children: "Send" })] }), _jsxs("button", { className: "wallet-modal-action-btn", onClick: handleReceive, children: [_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }), _jsx("polyline", { points: "7 10 12 15 17 10" }), _jsx("line", { x1: "12", y1: "15", x2: "12", y2: "3" })] }), _jsx("span", { children: "Receive" })] }), _jsxs("button", { className: "wallet-modal-action-btn", onClick: handleBuy, children: [_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("line", { x1: "12", y1: "5", x2: "12", y2: "19" }), _jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" })] }), _jsx("span", { children: "Buy" })] })] })), !isExternalWalletConnected && currentChain && (_jsxs("div", { className: "wallet-modal-asset", onClick: () => setShowChainSelector(true), children: [_jsxs("div", { className: "wallet-modal-asset-info", children: [_jsxs("div", { className: "wallet-modal-asset-icon-wrapper", children: [currentChain.iconUrl ? (_jsx("img", { src: currentChain.iconUrl, alt: currentChain.displayName, className: "wallet-modal-asset-icon-img" })) : (_jsx("div", { className: "wallet-modal-asset-icon", children: _jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("path", { d: "M12 2v20M2 12h20" })] }) })), _jsx("span", { className: "wallet-modal-asset-status" })] }), _jsxs("div", { className: "wallet-modal-asset-details", children: [_jsx("div", { className: "wallet-modal-asset-name", children: currentChain.displayName }), _jsx("div", { className: "wallet-modal-asset-balance", children: balanceDisplay })] })] }), _jsx("div", { className: "wallet-modal-asset-arrow", children: _jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("polyline", { points: "9 18 15 12 9 6" }) }) })] })), _jsxs("div", { className: "wallet-modal-menu", children: [_jsxs("button", { className: "wallet-modal-menu-item", onClick: handleManageWallet, children: [_jsx(LuWallet, { size: 20 }), _jsx("span", { children: "Manage Wallet" })] }), _jsxs("button", { className: "wallet-modal-menu-item wallet-modal-menu-item-disconnect", onClick: handleDisconnect, children: [_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [_jsx("path", { d: "M7 3H4C3.44772 3 3 3.44772 3 4V16C3 16.5523 3.44772 17 4 17H7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M13 7L17 10L13 13", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M17 10H9", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] }), _jsx("span", { children: "Disconnect" })] })] })] }) }), showChainSelector && (_jsx("div", { "data-abstraxn-sdk-root": true, className: `wallet-modal-overlay wallet-modal-theme-${theme}`, style: { zIndex: 10006, pointerEvents: "auto" }, onClick: (e) => {
+    return (_jsxs(_Fragment, { children: [_jsx("div", { "data-abstraxn-sdk-root": true, className: `wallet-modal-overlay wallet-modal-theme-${theme}`, onClick: showChainSelector ? undefined : onClose, style: showChainSelector ? { pointerEvents: "none" } : undefined, children: _jsxs("div", { className: `wallet-modal-content wallet-modal-theme-${theme} ${showChainSelector ? "selector-open" : ""}`, onClick: (e) => e.stopPropagation(), style: showChainSelector ? { pointerEvents: "auto" } : undefined, children: [_jsxs("div", { className: "wallet-modal-header", children: [_jsx("div", { className: "wallet-modal-header-left", children: _jsxs("div", { className: "wallet-modal-user-info", children: [_jsx("div", { className: "wallet-modal-avatar", children: _jsx(UserAvatar, { user: user, isExternalWalletConnected: isExternalWalletConnected || false }) }), _jsxs("div", { className: "wallet-modal-user-details", children: [_jsxs("div", { className: "wallet-modal-address", onClick: handleCopyAddress, children: [formatAddress(displayAddress || address), copied ? (_jsx("span", { className: "wallet-modal-copy-notification", children: "Copied!" })) : (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", className: "wallet-modal-copy-icon", children: [_jsx("path", { d: "M5.5 3.5H3.5C2.67157 3.5 2 4.17157 2 5V12.5C2 13.3284 2.67157 14 3.5 14H11C11.8284 14 12.5 13.3284 12.5 12.5V10.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M5.5 3.5C5.5 2.67157 6.17157 2 7 2H12.5C13.3284 2 14 2.67157 14 3.5V9C14 9.82843 13.3284 10.5 12.5 10.5H7C6.17157 10.5 5.5 9.82843 5.5 9V3.5Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }))] }), user?.email && (_jsx("div", { className: "wallet-modal-email", children: user.email }))] })] }) }), _jsx("div", { className: "wallet-modal-header-right", children: _jsx("button", { className: "wallet-modal-close", onClick: onClose, "aria-label": "Close", children: _jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M18 6L6 18M6 6L18 18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }) })] }), !isExternalWalletConnected && (_jsxs("div", { className: "wallet-modal-actions", children: [_jsxs("button", { className: "wallet-modal-action-btn", onClick: handleSend, children: [_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("line", { x1: "22", y1: "2", x2: "11", y2: "13" }), _jsx("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })] }), _jsx("span", { children: "Send" })] }), _jsxs("button", { className: "wallet-modal-action-btn", onClick: handleReceive, children: [_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }), _jsx("polyline", { points: "7 10 12 15 17 10" }), _jsx("line", { x1: "12", y1: "15", x2: "12", y2: "3" })] }), _jsx("span", { children: "Receive" })] }), _jsxs("button", { className: "wallet-modal-action-btn", onClick: handleBuy, children: [_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("line", { x1: "12", y1: "5", x2: "12", y2: "19" }), _jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" })] }), _jsx("span", { children: "Buy" })] })] })), !isExternalWalletConnected && currentChain && (_jsxs("div", { className: "wallet-modal-asset", onClick: () => setShowChainSelector(true), children: [_jsxs("div", { className: "wallet-modal-asset-info", children: [_jsxs("div", { className: "wallet-modal-asset-icon-wrapper", children: [currentChain.iconUrl ? (_jsx("img", { src: currentChain.iconUrl, alt: currentChain.displayName, className: "wallet-modal-asset-icon-img" })) : (_jsx("div", { className: "wallet-modal-asset-icon", children: _jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("path", { d: "M12 2v20M2 12h20" })] }) })), _jsx("span", { className: "wallet-modal-asset-status" })] }), _jsxs("div", { className: "wallet-modal-asset-details", children: [_jsx("div", { className: "wallet-modal-asset-name", children: currentChain.displayName }), _jsx("div", { className: "wallet-modal-asset-balance", children: isBalanceRefreshing ? (_jsx("span", { className: "wallet-modal-asset-balance-skeleton", "aria-label": "Loading balance" })) : (balanceDisplay) }), chainExplorer?.url && (_jsx("a", { href: chainExplorer.url, target: "_blank", rel: "noopener noreferrer", className: "wallet-modal-asset-explorer-link", onClick: (e) => e.stopPropagation(), children: chainExplorer.label }))] })] }), _jsx("div", { className: "wallet-modal-asset-arrow", children: _jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("polyline", { points: "9 18 15 12 9 6" }) }) })] })), _jsxs("div", { className: "wallet-modal-menu", children: [_jsxs("button", { className: "wallet-modal-menu-item", onClick: handleManageWallet, children: [_jsx(LuWallet, { size: 20 }), _jsx("span", { children: "Manage Wallet" })] }), _jsxs("button", { className: "wallet-modal-menu-item wallet-modal-menu-item-disconnect", onClick: handleDisconnect, children: [_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [_jsx("path", { d: "M7 3H4C3.44772 3 3 3.44772 3 4V16C3 16.5523 3.44772 17 4 17H7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M13 7L17 10L13 13", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M17 10H9", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] }), _jsx("span", { children: "Disconnect" })] })] })] }) }), showChainSelector && (_jsx("div", { "data-abstraxn-sdk-root": true, className: `wallet-modal-overlay wallet-modal-theme-${theme}`, style: { zIndex: 10006, pointerEvents: "auto" }, onClick: (e) => {
                     e.stopPropagation();
                     setShowChainSelector(false);
                 }, children: _jsx("div", { className: `wallet-modal-content wallet-modal-theme-${theme}`, onClick: (e) => e.stopPropagation(), children: _jsx(ChainSelector, { isOpen: showChainSelector, onClose: () => setShowChainSelector(false), currentChain: currentChain || null, availableChains: availableChains || [], onChainSelect: async (chainId) => {
@@ -317,7 +329,11 @@ export function WalletModal({ isOpen, onClose, onRampUrl }) {
                             // Switch to a different chain
                             if (switchChainEnhanced) {
                                 try {
+                                    setIsBalanceRefreshing(true);
                                     await switchChainEnhanced(chainId);
+                                    if (refetchBalance) {
+                                        await refetchBalance();
+                                    }
                                     // Only close if switch was successful
                                     setShowChainSelector(false);
                                 }
@@ -325,6 +341,9 @@ export function WalletModal({ isOpen, onClose, onRampUrl }) {
                                     console.error("Failed to switch chain:", error);
                                     // Don't close the selector on error so user can try again
                                 }
+                                finally {
+                                    setIsBalanceRefreshing(false);
+                                }
                             }
                             else {
                                 console.warn("switchChainEnhanced not available");

package/dist/src/components/AbstraxnProvider/AbstraxnProviderInner.js

@@ -3225,6 +3225,60 @@ export function AbstraxnProviderInner({ config, children, base, wagmi, solana, }
     const currentChainId = isExternalWalletConnected && externalWalletChainId
         ? externalWalletChainId
         : chainId;
+    // Custom chains passed via `config.chains` (array form) are not part of the static `EVM_CHAINS` map.
+    // Normalize them into `ChainData` so the wallet UI can resolve chain + balance correctly.
+    const customChainsById = useMemo(() => {
+        const chainConfig = config.chains;
+        const map = new Map();
+        if (!Array.isArray(chainConfig) || chainConfig.length === 0)
+            return map;
+        for (const raw of chainConfig) {
+            if (!raw || typeof raw.id !== "number" || !raw.nativeCurrency)
+                continue;
+            // Extract RPC URL (support viem shape + sdk-integrate custom shape)
+            let rpcUrl;
+            if (raw.rpcUrls?.default?.http) {
+                rpcUrl = Array.isArray(raw.rpcUrls.default.http)
+                    ? raw.rpcUrls.default.http[0]
+                    : raw.rpcUrls.default.http;
+            }
+            else if (raw.rpcUrls?.public?.http) {
+                rpcUrl = Array.isArray(raw.rpcUrls.public.http)
+                    ? raw.rpcUrls.public.http[0]
+                    : raw.rpcUrls.public.http;
+            }
+            else if (typeof raw.rpcUrl === "string") {
+                rpcUrl = raw.rpcUrl;
+            }
+            if (!rpcUrl || rpcUrl.trim() === "")
+                continue;
+            const explorerUrl = raw.blockExplorers?.default?.url ||
+                raw.explorerUrl || '';
+            const displayName = raw.displayName || raw.name || `Chain ${raw.id}`;
+            const name = (raw.name ? String(raw.name) : `chain-${raw.id}`)
+                .toLowerCase()
+                .replace(/\s+/g, "-");
+            const isTestnet = raw.testnet === true ||
+                raw.isTestnet === true ||
+                // Heuristic fallback for unknown custom chains
+                (raw.id !== 1 && raw.id !== 10 && raw.id !== 137 && raw.id !== 8453 && raw.id !== 42161 && raw.id !== 2741);
+            const chainData = {
+                id: raw.id,
+                name,
+                displayName,
+                rpcUrl,
+                explorerUrl,
+                iconUrl: raw.iconUrl,
+                icon: raw.icon,
+                nativeCurrency: raw.nativeCurrency,
+                type: "evm",
+                isTestnet,
+                blockExplorer: raw.blockExplorer,
+            };
+            map.set(chainData.id, chainData);
+        }
+        return map;
+    }, [config.chains]);
     // Fetch balance for Abstraxn wallet (not external wallet) - reusable for on-demand refetch
     const refetchWalletBalance = useCallback(async () => {
         if (isExternalWalletConnected || !address || !currentChainId) {
@@ -3232,7 +3286,7 @@ export function AbstraxnProviderInner({ config, children, base, wagmi, solana, }
             return;
         }
         try {
-            const currentChain = getChainById(currentChainId);
+            const currentChain = getChainById(currentChainId) || customChainsById.get(currentChainId);
             if (!currentChain || currentChain.type !== "evm") {
                 setWalletBalance(null);
                 return;
@@ -3259,24 +3313,35 @@ export function AbstraxnProviderInner({ config, children, base, wagmi, solana, }
             console.error("Failed to fetch balance:", error);
             setWalletBalance(null);
         }
-    }, [address, currentChainId, isExternalWalletConnected]);
+    }, [address, currentChainId, isExternalWalletConnected, customChainsById]);
     useEffect(() => {
         refetchWalletBalance();
     }, [refetchWalletBalance]);
     // Single refetch for UI: Abstraxn wallet = RPC call, external wallet = wagmi refetch
-    const refetchBalance = useCallback(() => {
+    const refetchBalance = useCallback(async () => {
         if (isExternalWalletConnected && wagmiBalance?.refetch) {
-            void wagmiBalance.refetch();
+            await wagmiBalance.refetch();
             return;
         }
-        void refetchWalletBalance();
+        await refetchWalletBalance();
     }, [isExternalWalletConnected, wagmiBalance, refetchWalletBalance]);
     // Compute available chains from config - supports both legacy and new format
     const availableChains = useMemo(() => {
         const chains = [];
         const chainConfig = config.chains;
-        // Priority 1: Check new chains config format
-        if (chainConfig?.supportedEvmChains &&
+        // Priority 1: Check if chains is an array of viem/custom chain objects
+        if (Array.isArray(chainConfig) && chainConfig.length > 0) {
+            for (const raw of chainConfig) {
+                const normalized = raw && typeof raw.id === "number"
+                    ? customChainsById.get(raw.id)
+                    : undefined;
+                if (normalized)
+                    chains.push(normalized);
+            }
+        }
+        // Priority 2: Check new chains config format
+        if (!Array.isArray(chainConfig) &&
+            chainConfig?.supportedEvmChains &&
             chainConfig.supportedEvmChains.length > 0) {
             // Use configured chains from new format
             chainConfig.supportedEvmChains.forEach((chainName) => {
@@ -3286,8 +3351,10 @@ export function AbstraxnProviderInner({ config, children, base, wagmi, solana, }
                 }
             });
         }
-        // Priority 2: Check legacy supportedChains format
-        else if (config.supportedChains && config.supportedChains.length > 0) {
+        // Priority 3: Check legacy supportedChains format
+        else if (!Array.isArray(chainConfig) &&
+            config.supportedChains &&
+            config.supportedChains.length > 0) {
             // Convert legacy Chain format to ChainData
             config.supportedChains.forEach((legacyChain) => {
                 // Try to find matching chain by ID
@@ -3313,7 +3380,7 @@ export function AbstraxnProviderInner({ config, children, base, wagmi, solana, }
                 }
             });
         }
-        // Priority 3: Default chains only if nothing configured at all
+        // Priority 4: Default chains only if nothing configured at all
         // Only show defaults if both config.chains and config.supportedChains are missing
         else if (!chainConfig && !config.supportedChains) {
             chains.push(EVM_CHAINS.ethereum, EVM_CHAINS.polygon, EVM_CHAINS.base);
@@ -3330,13 +3397,15 @@ export function AbstraxnProviderInner({ config, children, base, wagmi, solana, }
             : !chainConfig && !config.supportedChains
                 ? [EVM_CHAINS.ethereum, EVM_CHAINS.polygon, EVM_CHAINS.base]
                 : [];
-    }, [config.chains, config.supportedChains]);
+    }, [config.chains, config.supportedChains, customChainsById]);
     // Get current chain data
     const currentChain = useMemo(() => {
         if (!currentChainId)
             return null;
-        return getChainById(currentChainId) || null;
-    }, [currentChainId]);
+        return (getChainById(currentChainId) ||
+            customChainsById.get(currentChainId) ||
+            null);
+    }, [currentChainId, customChainsById]);
     // Enhanced switchChain that works for both EVM and Solana
     const switchChainEnhanced = useCallback(async (targetChainId) => {
         if (!walletRef.current) {
@@ -3347,7 +3416,7 @@ export function AbstraxnProviderInner({ config, children, base, wagmi, solana, }
         if (!targetChainInAvailable) {
             throw new Error(`Chain with ID ${targetChainId} is not available. Please configure it in your SDK setup.`);
         }
-        const targetChain = getChainById(targetChainId);
+        const targetChain = getChainById(targetChainId) || customChainsById.get(targetChainId);
         if (!targetChain) {
             throw new Error(`Chain with ID ${targetChainId} is not supported`);
         }
@@ -3407,7 +3476,13 @@ export function AbstraxnProviderInner({ config, children, base, wagmi, solana, }
         finally {
             setLoading(false);
         }
-    }, [isExternalWalletConnected, wagmiSwitchChain, switchChain, availableChains]);
+    }, [
+        isExternalWalletConnected,
+        wagmiSwitchChain,
+        switchChain,
+        availableChains,
+        customChainsById,
+    ]);
     const setEmailForOtp = useCallback((email) => {
         setEmailForOtpState(email);
     }, []);

package/dist/src/components/WalletModal/hooks/useSendTransaction.js

@@ -95,7 +95,7 @@ export function useSendTransaction({ sendTransaction, currentChain, fromAddress,
                 data: '0x',
                 chainId: currentChain.id,
                 gas: {
-                    gasLimit,
+                    gasLimit: gasLimit,
                     maxFeePerGas: gasFees.maxFeePerGas,
                     maxPriorityFeePerGas: gasFees.maxPriorityFeePerGas,
                     gasPrice: gasFees.gasPrice,

package/dist/src/components/WalletModal/utils/formatUtils.d.ts

@@ -9,7 +9,7 @@ export declare function formatAddress(addr: string | null | undefined): string;
  * Formats a balance with proper decimals and symbol
  * Removes trailing zeros and unnecessary decimals
  */
-export declare function formatBalance(balance: bigint | null | undefined, decimals: number, symbol: string): string;
+export declare function formatBalance(balance: bigint | null | undefined, decimals: number, symbol: string, maxFractionDigits?: number): string;
 /**
  * Formats a balance value (number) with proper decimals
  */

package/dist/src/components/WalletModal/utils/formatUtils.js

@@ -15,13 +15,12 @@ export function formatAddress(addr) {
  * Formats a balance with proper decimals and symbol
  * Removes trailing zeros and unnecessary decimals
  */
-export function formatBalance(balance, decimals, symbol) {
+export function formatBalance(balance, decimals, symbol, maxFractionDigits = decimals) {
     if (!balance || balance === 0n)
         return `0 ${symbol}`;
     const balanceValue = Number(balance) / Math.pow(10, decimals);
-    // Remove trailing zeros and unnecessary decimals
-    // Use toFixed with max decimals, then remove trailing zeros
-    const formatted = balanceValue.toFixed(decimals);
+    const safeFractionDigits = Math.max(0, Math.min(maxFractionDigits, decimals));
+    const formatted = balanceValue.toFixed(safeFractionDigits);
     // Remove trailing zeros and decimal point if not needed
     const trimmed = formatted.replace(/\.?0+$/, '');
     return `${trimmed} ${symbol}`;

package/dist/src/hooks.d.ts

@@ -1,4 +1,4 @@
-import type { WhoamiResponse, TransactionRequest, EnableMfaResponse, VerifySetupMfaResponse, DisableMfaResponse } from '@abstraxn/signer-core';
+import type { WhoamiResponse, TransactionRequest, EnableMfaResponse, VerifySetupMfaResponse, DisableMfaResponse, SupportedAuthMethod, LinkedAuthMethod } from '@abstraxn/signer-core';
 import type { Chain, PublicClient, Address, Abi, GetContractReturnType, TransactionReceipt } from 'viem';
 import { Connection as SolanaConnection, Transaction as SolanaTransaction, TransactionInstruction, type Commitment, type SendOptions } from '@solana/web3.js';
 import type { TypedData, TypedDataDomain } from 'viem';
@@ -46,6 +46,20 @@ export { useAbstraxnWallet } from './AbstraxnProvider';
  * Hook to get wallet instance (for advanced usage)
  */
 export declare function useWallet(): import("@abstraxn/signer-core").AbstraxnWallet | null;
+export interface SmartAccountOwnerOptions {
+    /** Override the signer address. By default, uses connected wallet address from context. */
+    address?: Address;
+}
+export interface SmartAccountOwnerResult {
+    smartAccountOwner: any | null;
+    isReady: boolean;
+    address: Address | null;
+}
+/**
+ * Hook to get an AA-compatible owner account for permissionless-compatible SDKs.
+ * This does not include bundler/paymaster integration; apps can plug in any provider.
+ */
+export declare function useSmartAccountOwner(options?: SmartAccountOwnerOptions): SmartAccountOwnerResult;
 /**
  * Hook to export wallet private key
  * Returns the export bundle containing the private key
@@ -127,6 +141,28 @@ export declare function useDisableMfa(): {
     confirmDisable: () => Promise<DisableMfaResponse | null>;
     reset: () => void;
 };
+export interface UseAuthMethodLinkingReturn {
+    supportedMethods: SupportedAuthMethod[];
+    linkedMethods: LinkedAuthMethod[];
+    loading: boolean;
+    actionProvider: string | null;
+    error: string | null;
+    refreshAuthMethods: (options?: {
+        force?: boolean;
+    }) => Promise<void>;
+    isLinked: (provider: string) => boolean;
+    linkProvider: (provider: 'google' | 'discord' | 'twitter' | 'x' | 'passkey') => Promise<void>;
+    requestEmailLinkOtp: (email: string) => Promise<{
+        otpId: string;
+    }>;
+    confirmEmailLink: (otpId: string, otpCode: string) => Promise<void>;
+    unlinkProvider: (provider: string) => Promise<void>;
+}
+/**
+ * Hook for linking/unlinking auth methods without any UI concerns.
+ * It exposes state and actions only; consumers own rendering and messaging.
+ */
+export declare function useAuthMethodLinking(): UseAuthMethodLinkingReturn;
 /**
  * Hook to access external wallet functionality
  * Returns external wallet connection state and methods
@@ -270,7 +306,6 @@ export declare function usePublicClient(chain: Chain, rpcUrl: string): {
             request?: (parameters: import("viem").CcipRequestParameters) => Promise<import("viem/_types/utils/ccip").CcipRequestReturnType>;
         } | undefined;
         chain: Chain | undefined;
-        dataSuffix?: import("viem").DataSuffix | undefined;
         experimental_blockTag?: import("viem").BlockTag | undefined;
         key: string;
         name: string;
@@ -453,7 +488,6 @@ export declare function usePublicClient(chain: Chain, rpcUrl: string): {
         getChainId: () => Promise<import("viem").GetChainIdReturnType>;
         getCode: (args: import("viem").GetBytecodeParameters) => Promise<import("viem").GetBytecodeReturnType>;
         getContractEvents: <const abi extends Abi | readonly unknown[], eventName extends import("viem").ContractEventName<abi> | undefined = undefined, strict extends boolean | undefined = undefined, fromBlock extends import("viem").BlockNumber | import("viem").BlockTag | undefined = undefined, toBlock extends import("viem").BlockNumber | import("viem").BlockTag | undefined = undefined>(args: import("viem").GetContractEventsParameters<abi, eventName, strict, fromBlock, toBlock>) => Promise<import("viem").GetContractEventsReturnType<abi, eventName, strict, fromBlock, toBlock>>;
-        getDelegation: (args: import("viem").GetDelegationParameters) => Promise<import("viem").GetDelegationReturnType>;
         getEip712Domain: (args: import("viem").GetEip712DomainParameters) => Promise<import("viem").GetEip712DomainReturnType>;
         getEnsAddress: (args: import("viem").GetEnsAddressParameters) => Promise<import("viem").GetEnsAddressReturnType>;
         getEnsAvatar: (args: import("viem").GetEnsAvatarParameters) => Promise<import("viem").GetEnsAvatarReturnType>;
@@ -3879,7 +3913,6 @@ export declare function usePublicClient(chain: Chain, rpcUrl: string): {
             cacheTime?: undefined;
             ccipRead?: undefined;
             chain?: undefined;
-            dataSuffix?: undefined;
             experimental_blockTag?: undefined;
             key?: undefined;
             name?: undefined;
@@ -3929,7 +3962,6 @@ export declare function useWalletClient(chain: any, rpcUrl?: string): {
             request?: (parameters: import("viem").CcipRequestParameters) => Promise<import("viem/_types/utils/ccip").CcipRequestReturnType>;
         } | undefined;
         chain: Chain | undefined;
-        dataSuffix?: import("viem").DataSuffix | undefined;
         experimental_blockTag?: import("viem").BlockTag | undefined;
         key: string;
         name: string;
@@ -8341,7 +8373,6 @@ export declare function useWalletClient(chain: any, rpcUrl?: string): {
             cacheTime?: undefined;
             ccipRead?: undefined;
             chain?: undefined;
-            dataSuffix?: undefined;
             experimental_blockTag?: undefined;
             key?: undefined;
             name?: undefined;
@@ -8868,7 +8899,6 @@ export declare function useExternalWalletClient(): {
             request?: (parameters: import("viem").CcipRequestParameters) => Promise<import("viem/_types/utils/ccip").CcipRequestReturnType>;
         } | undefined;
         chain: Chain;
-        dataSuffix?: import("viem").DataSuffix | undefined;
         experimental_blockTag?: import("viem").BlockTag | undefined;
         key: string;
         name: string;
@@ -13280,7 +13310,6 @@ export declare function useExternalWalletClient(): {
             cacheTime?: undefined;
             ccipRead?: undefined;
             chain?: undefined;
-            dataSuffix?: undefined;
             experimental_blockTag?: undefined;
             key?: undefined;
             name?: undefined;

package/dist/src/hooks.js

@@ -4,7 +4,8 @@
 import { useState, useCallback, useEffect, useMemo } from 'react';
 import { useAbstraxnWallet } from './AbstraxnProvider';
 import { InvalidDeviceIdError, SignMfaRequiredError } from '@abstraxn/signer-core';
-import { createPublicClient, createWalletClient, http, getContract, serializeTransaction, encodeFunctionData, hashTypedData } from 'viem';
+import { createPublicClient, createWalletClient, http, getContract, serializeTransaction, encodeFunctionData, hashTypedData, hashMessage, parseSignature } from 'viem';
+import { toAccount } from 'viem/accounts';
 import { Connection as SolanaConnection, Transaction as SolanaTransaction, SystemProgram, PublicKey, LAMPORTS_PER_SOL, TransactionInstruction, } from '@solana/web3.js';
 import { useWalletClient as useWagmiWalletClient, useAccount, useConfig, useChainId as useWagmiChainId, useSwitchChain as useWagmiSwitchChain, useSignMessage as useWagmiSignMessage, useReconnect as useWagmiReconnect } from 'wagmi';
 import { getWalletClient, switchChain } from '@wagmi/core';
@@ -72,6 +73,67 @@ export function useWallet() {
     const { wallet } = useAbstraxnWallet();
     return wallet;
 }
+/**
+ * Hook to get an AA-compatible owner account for permissionless-compatible SDKs.
+ * This does not include bundler/paymaster integration; apps can plug in any provider.
+ */
+export function useSmartAccountOwner(options = {}) {
+    const { isConnected, address: connectedAddress, signTransactionViaAPI, signTypedTxViaAPI, verifySignMfa, } = useAbstraxnWallet();
+    const ownerAddress = (options.address ?? connectedAddress ?? null);
+    const smartAccountOwner = useMemo(() => {
+        if (!isConnected || !ownerAddress)
+            return null;
+        return toAccount({
+            address: ownerAddress,
+            /**
+             * ERC-4337 SimpleAccount (permissionless) signs UserOperations via viem `signMessage` with
+             * `message: { raw: userOpHash }`. That requires the same digest as viem local accounts:
+             * EIP-191 `hashMessage(message)`, then ECDSA sign that 32-byte digest — not UTF-8 text hashing.
+             */
+            async signMessage({ message }) {
+                const digest = hashMessage(message);
+                const signature = await runWithSignStepUpRetry(() => signTypedTxViaAPI(ownerAddress, digest, 'PAYLOAD_ENCODING_HEXADECIMAL', 'HASH_FUNCTION_NO_OP').then((res) => res.signature), verifySignMfa);
+                return (signature.startsWith('0x') ? signature : `0x${signature}`);
+            },
+            async signTransaction(transaction) {
+                const unsignedTransaction = serializeTransaction(transaction);
+                const result = await runWithSignStepUpRetry(() => signTransactionViaAPI(unsignedTransaction, ownerAddress), verifySignMfa);
+                return result.signedTransaction;
+            },
+            async signTypedData(typedData) {
+                const digest = hashTypedData(typedData);
+                const result = await runWithSignStepUpRetry(() => signTypedTxViaAPI(ownerAddress, digest, 'PAYLOAD_ENCODING_EIP712', 'HASH_FUNCTION_NO_OP'), verifySignMfa);
+                const signature = result.signature;
+                return (signature.startsWith('0x') ? signature : `0x${signature}`);
+            },
+            /** EIP-7702: sign delegation authorization (`keccak256(0x05 || rlp(...))`) via backend, same as raw ECDSA over digest. */
+            async signAuthorization(parameters) {
+                const authorizationAddress = parameters.contractAddress ?? parameters.address;
+                const authorizationPayload = JSON.stringify({
+                    chainId: parameters.chainId,
+                    address: authorizationAddress,
+                    nonce: parameters.nonce,
+                });
+                const sig = await runWithSignStepUpRetry(() => signTypedTxViaAPI(ownerAddress, authorizationPayload, 'PAYLOAD_ENCODING_EIP7702_AUTHORIZATION', 'HASH_FUNCTION_NOT_APPLICABLE').then((res) => res.signature), verifySignMfa);
+                const hex = (sig.startsWith('0x') ? sig : `0x${sig}`);
+                const { r, s, yParity } = parseSignature(hex);
+                return {
+                    address: authorizationAddress,
+                    chainId: parameters.chainId,
+                    nonce: parameters.nonce,
+                    r,
+                    s,
+                    yParity,
+                };
+            },
+        });
+    }, [isConnected, ownerAddress, signTransactionViaAPI, signTypedTxViaAPI, verifySignMfa]);
+    return {
+        smartAccountOwner,
+        isReady: !!smartAccountOwner,
+        address: ownerAddress,
+    };
+}
 /**
  * Hook to export wallet private key
  * Returns the export bundle containing the private key
@@ -414,6 +476,282 @@ export function useDisableMfa() {
         reset,
     };
 }
+const AUTH_METHOD_LINK_PROVIDER_ALLOWLIST = new Set([
+    'google',
+    'discord',
+    'x',
+    'passkey',
+]);
+const AUTH_METHOD_UNLINK_PROVIDER_ALLOWLIST = new Set([
+    'google',
+    'discord',
+    'x',
+    'email',
+    'passkey',
+]);
+function normalizeAuthMethodProviderForApi(provider) {
+    const normalized = provider.trim().toLowerCase();
+    if (normalized === 'otp')
+        return 'email';
+    return normalized;
+}
+function normalizeAuthMethodProviderForMatch(provider) {
+    const normalized = normalizeAuthMethodProviderForApi(provider);
+    if (normalized === 'twitter' || normalized === 'x')
+        return 'x';
+    return normalized;
+}
+function normalizeAuthMethodErrorMessage(message) {
+    return message.replace(/^network error:\s*/i, '').trim();
+}
+function toAuthMethodError(error, fallbackMessage) {
+    if (error instanceof Error) {
+        return new Error(normalizeAuthMethodErrorMessage(error.message || fallbackMessage));
+    }
+    if (typeof error === 'string' && error.trim() !== '') {
+        return new Error(normalizeAuthMethodErrorMessage(error));
+    }
+    return new Error(fallbackMessage);
+}
+/**
+ * Hook for linking/unlinking auth methods without any UI concerns.
+ * It exposes state and actions only; consumers own rendering and messaging.
+ */
+export function useAuthMethodLinking() {
+    const { wallet, whoami, getSupportedAuthMethods, getLinkedAuthMethods, requestOtpForEmailLink, loginWithOTP, } = useAbstraxnWallet();
+    const [supportedMethods, setSupportedMethods] = useState([]);
+    const [linkedMethods, setLinkedMethods] = useState([]);
+    const [queryLoading, setQueryLoading] = useState(false);
+    const [actionProvider, setActionProvider] = useState(null);
+    const [error, setError] = useState(null);
+    const requireConnectedWallet = useCallback(() => {
+        if (!wallet?.isConnected) {
+            throw new Error('Wallet not connected');
+        }
+        return wallet;
+    }, [wallet]);
+    const refreshAuthMethods = useCallback(async (_options) => {
+        const activeWallet = requireConnectedWallet();
+        setQueryLoading(true);
+        setError(null);
+        try {
+            const supportedRequest = getSupportedAuthMethods != null
+                ? getSupportedAuthMethods()
+                : activeWallet.getSupportedAuthMethods();
+            const linkedRequest = getLinkedAuthMethods != null
+                ? getLinkedAuthMethods()
+                : activeWallet.getLinkedAuthMethods();
+            const [supportedResponse, linkedResponse] = await Promise.all([
+                supportedRequest,
+                linkedRequest,
+            ]);
+            const loginProvider = normalizeAuthMethodProviderForMatch(String(whoami?.loginProvider ?? ''));
+            const allSupportedMethods = supportedResponse.supportedMethods ?? [];
+            const filteredMethods = loginProvider !== ''
+                ? allSupportedMethods.filter((method) => normalizeAuthMethodProviderForMatch(method.provider) !== loginProvider)
+                : allSupportedMethods;
+            setSupportedMethods(filteredMethods);
+            setLinkedMethods(linkedResponse.linkedMethods ?? []);
+        }
+        catch (err) {
+            const nextError = toAuthMethodError(err, 'Failed to load auth methods');
+            setSupportedMethods([]);
+            setLinkedMethods([]);
+            setError(nextError.message);
+            throw nextError;
+        }
+        finally {
+            setQueryLoading(false);
+        }
+    }, [getLinkedAuthMethods, getSupportedAuthMethods, requireConnectedWallet, whoami]);
+    const isLinked = useCallback((provider) => {
+        const normalizedProvider = normalizeAuthMethodProviderForMatch(provider);
+        return linkedMethods.some((method) => normalizeAuthMethodProviderForMatch(method.authProvider) === normalizedProvider);
+    }, [linkedMethods]);
+    const runOAuthPopupLink = useCallback(async (activeWallet, provider) => {
+        if (typeof window === 'undefined') {
+            throw new Error('OAuth linking requires a browser environment');
+        }
+        const { authUrl } = await activeWallet.initiateLinkAuth(provider);
+        const width = 500;
+        const height = 600;
+        const left = Math.round((window.screen.width - width) / 2);
+        const top = Math.round((window.screen.height - height) / 2);
+        const popup = window.open(authUrl, 'abstraxn-auth-link', `width=${width},height=${height},left=${left},top=${top},scrollbars=yes,resizable=yes`);
+        if (!popup) {
+            throw new Error('Popup blocked. Please allow popups for this site.');
+        }
+        const timeoutMs = 120000;
+        await new Promise((resolve, reject) => {
+            let settled = false;
+            let closeCheckId = null;
+            let timeoutId = null;
+            const finalizeReject = (reason) => {
+                if (settled)
+                    return;
+                settled = true;
+                cleanup();
+                reject(new Error(reason));
+            };
+            const cleanup = () => {
+                window.removeEventListener('message', onMessage);
+                if (closeCheckId != null)
+                    clearInterval(closeCheckId);
+                if (timeoutId != null)
+                    clearTimeout(timeoutId);
+            };
+            const onMessage = (event) => {
+                if (event.origin !== window.location.origin)
+                    return;
+                if (event.source !== popup)
+                    return;
+                const data = event.data;
+                if (!data?.type)
+                    return;
+                const eventProvider = normalizeAuthMethodProviderForMatch(String(data.provider ?? ''));
+                const targetProvider = normalizeAuthMethodProviderForMatch(provider);
+                if (eventProvider !== targetProvider)
+                    return;
+                if (data.type === 'abstraxn-auth-link-error') {
+                    finalizeReject(normalizeAuthMethodErrorMessage(String(data.error ?? 'Failed to link auth method')));
+                    return;
+                }
+                if (data.type === 'abstraxn-auth-link-done') {
+                    if (!data.activityBody || data.activityBody.trim() === '') {
+                        finalizeReject('Invalid linking response');
+                        return;
+                    }
+                    settled = true;
+                    cleanup();
+                    activeWallet
+                        .submitLinkAuthStamped(provider, data.activityBody)
+                        .then(resolve)
+                        .catch((submitError) => {
+                        reject(toAuthMethodError(submitError, 'Failed to finalize auth method link'));
+                    });
+                }
+            };
+            window.addEventListener('message', onMessage);
+            closeCheckId = setInterval(() => {
+                if (popup.closed) {
+                    finalizeReject('Linking was cancelled');
+                }
+            }, 200);
+            timeoutId = setTimeout(() => {
+                finalizeReject('Linking timed out. Please try again.');
+            }, timeoutMs);
+        });
+    }, [wallet]);
+    const linkProvider = useCallback(async (provider) => {
+        const activeWallet = requireConnectedWallet();
+        const normalizedProvider = provider.toLowerCase();
+        if (!AUTH_METHOD_LINK_PROVIDER_ALLOWLIST.has(normalizedProvider)) {
+            throw new Error(`Unsupported provider for linking: ${provider}`);
+        }
+        setActionProvider(normalizedProvider);
+        setError(null);
+        try {
+            if (normalizedProvider === 'passkey') {
+                await activeWallet.linkPasskey();
+            }
+            else {
+                await runOAuthPopupLink(activeWallet, normalizedProvider);
+            }
+            await refreshAuthMethods({ force: true });
+        }
+        catch (err) {
+            const nextError = toAuthMethodError(err, 'Failed to link auth method');
+            setError(nextError.message);
+            throw nextError;
+        }
+        finally {
+            setActionProvider(null);
+        }
+    }, [refreshAuthMethods, requireConnectedWallet, runOAuthPopupLink]);
+    const requestEmailLinkOtp = useCallback(async (email) => {
+        const activeWallet = requireConnectedWallet();
+        const trimmedEmail = email.trim();
+        if (!trimmedEmail) {
+            throw new Error('Email is required');
+        }
+        setActionProvider('email');
+        setError(null);
+        try {
+            if (requestOtpForEmailLink) {
+                return await requestOtpForEmailLink(trimmedEmail);
+            }
+            if (loginWithOTP) {
+                return await loginWithOTP(trimmedEmail);
+            }
+            // Fallback to core method directly if context methods are unavailable.
+            return await activeWallet.requestOtpForEmailLink(trimmedEmail);
+        }
+        catch (err) {
+            const nextError = toAuthMethodError(err, 'Failed to send email verification code');
+            setError(nextError.message);
+            throw nextError;
+        }
+        finally {
+            setActionProvider(null);
+        }
+    }, [loginWithOTP, requestOtpForEmailLink, requireConnectedWallet]);
+    const confirmEmailLink = useCallback(async (otpId, otpCode) => {
+        const activeWallet = requireConnectedWallet();
+        const trimmedOtpId = otpId.trim();
+        const trimmedOtpCode = otpCode.trim();
+        if (!trimmedOtpId || !trimmedOtpCode) {
+            throw new Error('otpId and otpCode are required');
+        }
+        setActionProvider('email');
+        setError(null);
+        try {
+            await activeWallet.linkEmail(trimmedOtpId, trimmedOtpCode);
+            await refreshAuthMethods({ force: true });
+        }
+        catch (err) {
+            const nextError = toAuthMethodError(err, 'Failed to link email');
+            setError(nextError.message);
+            throw nextError;
+        }
+        finally {
+            setActionProvider(null);
+        }
+    }, [refreshAuthMethods, requireConnectedWallet]);
+    const unlinkProvider = useCallback(async (provider) => {
+        const activeWallet = requireConnectedWallet();
+        const normalizedProvider = normalizeAuthMethodProviderForApi(provider);
+        if (!AUTH_METHOD_UNLINK_PROVIDER_ALLOWLIST.has(normalizedProvider)) {
+            throw new Error(`Unsupported provider for unlinking: ${provider}`);
+        }
+        setActionProvider(normalizedProvider);
+        setError(null);
+        try {
+            await activeWallet.unlinkAuthMethod(normalizedProvider);
+            await refreshAuthMethods({ force: true });
+        }
+        catch (err) {
+            const nextError = toAuthMethodError(err, 'Failed to unlink auth method');
+            setError(nextError.message);
+            throw nextError;
+        }
+        finally {
+            setActionProvider(null);
+        }
+    }, [refreshAuthMethods, requireConnectedWallet]);
+    return {
+        supportedMethods,
+        linkedMethods,
+        loading: queryLoading || actionProvider !== null,
+        actionProvider,
+        error,
+        refreshAuthMethods,
+        isLinked,
+        linkProvider,
+        requestEmailLinkOtp,
+        confirmEmailLink,
+        unlinkProvider,
+    };
+}
 /**
  * Hook to access external wallet functionality
  * Returns external wallet connection state and methods

package/dist/src/index.d.ts

@@ -4,14 +4,14 @@
  * when used in a React project
  */
 export { AbstraxnProvider, useAbstraxnWallet } from './AbstraxnProvider';
-export { useIsConnected, useAddress, useAuthContext, useChainId, useError, useEnableMfa, useDisableMfa, useEmailForOtp, useWallet, useExportWallet, useWhoami, useExternalWallet, useExternalWalletBalance, useExternalWalletChain, useExternalWalletInfo, usePublicClient, useWalletClient, useContract, usePrepareRawTxn, useSignTxn, useSignTypedTx, useSignAndSendTxn, useWaitForTxnReceipt, useReadContract, useExternalWalletClient, useWriteContract, useConnectionType, useSwitchChain, useSignMessage, useEstimateGas, useGetGasPrice, useSolanaConnection, useSolanaPublicKey, useSolanaBalance, usePrepareSolanaTxn, useSolanaExternalWallet, usePrepareSolanaProgramTxn, useSolanaProgramTransaction, useSignSolanaTxn, useSignAndSendSolanaTxn, useWaitForSolanaConfirmation, } from './hooks';
+export { useIsConnected, useAddress, useAuthContext, useChainId, useError, useEnableMfa, useDisableMfa, useAuthMethodLinking, useEmailForOtp, useWallet, useSmartAccountOwner, useExportWallet, useWhoami, useExternalWallet, useExternalWalletBalance, useExternalWalletChain, useExternalWalletInfo, usePublicClient, useWalletClient, useContract, usePrepareRawTxn, useSignTxn, useSignTypedTx, useSignAndSendTxn, useWaitForTxnReceipt, useReadContract, useExternalWalletClient, useWriteContract, useConnectionType, useSwitchChain, useSignMessage, useEstimateGas, useGetGasPrice, useSolanaConnection, useSolanaPublicKey, useSolanaBalance, usePrepareSolanaTxn, useSolanaExternalWallet, usePrepareSolanaProgramTxn, useSolanaProgramTransaction, useSignSolanaTxn, useSignAndSendSolanaTxn, useWaitForSolanaConfirmation, } from './hooks';
 export { ConnectButton } from './ConnectButton';
 export type { ConnectButtonProps, ConnectButtonVariant, ConnectButtonSize } from './ConnectButton';
 export { WalletModal } from './WalletModal';
 export type { WalletModalProps } from './WalletModal';
 export { OnboardingUIComponent as OnboardingUI } from './OnboardingUI';
 export type { AbstraxnProviderConfig, AbstraxnUIConfig, AbstraxnContextValue, ChainConfig, } from './types';
-export type { PayloadEncoding, HashFunction, SignTypedTxParams, SolanaAccountMetaInput, SolanaInstructionDataInput, } from './hooks';
+export type { PayloadEncoding, HashFunction, SignTypedTxParams, SmartAccountOwnerOptions, SmartAccountOwnerResult, SolanaAccountMetaInput, SolanaInstructionDataInput, } from './hooks';
 export type { OnboardingUIComponentProps, OnboardingUIComponentRef } from './OnboardingUI';
 export { ALL_CHAINS, EVM_CHAINS, SOLANA_CHAINS, getChainById, getChainsByType, getDefaultChains, toCoreChain, type ChainData, } from './chains';
 export { CONNECTORS, getConnectorMeta, isOAuthConnector, isWalletConnector, isAuthConnector, type ConnectorType, type ConnectorMeta, } from './connectors';

package/dist/src/index.js

@@ -4,7 +4,7 @@
  * when used in a React project
  */
 export { AbstraxnProvider, useAbstraxnWallet } from './AbstraxnProvider';
-export { useIsConnected, useAddress, useAuthContext, useChainId, useError, useEnableMfa, useDisableMfa, useEmailForOtp, useWallet, useExportWallet, useWhoami, useExternalWallet, useExternalWalletBalance, useExternalWalletChain, useExternalWalletInfo, usePublicClient, useWalletClient, useContract, usePrepareRawTxn, useSignTxn, useSignTypedTx, useSignAndSendTxn, useWaitForTxnReceipt, useReadContract, useExternalWalletClient, useWriteContract, useConnectionType, useSwitchChain, useSignMessage, useEstimateGas, useGetGasPrice, useSolanaConnection, useSolanaPublicKey, useSolanaBalance, usePrepareSolanaTxn, useSolanaExternalWallet, usePrepareSolanaProgramTxn, useSolanaProgramTransaction, useSignSolanaTxn, useSignAndSendSolanaTxn, useWaitForSolanaConfirmation, } from './hooks';
+export { useIsConnected, useAddress, useAuthContext, useChainId, useError, useEnableMfa, useDisableMfa, useAuthMethodLinking, useEmailForOtp, useWallet, useSmartAccountOwner, useExportWallet, useWhoami, useExternalWallet, useExternalWalletBalance, useExternalWalletChain, useExternalWalletInfo, usePublicClient, useWalletClient, useContract, usePrepareRawTxn, useSignTxn, useSignTypedTx, useSignAndSendTxn, useWaitForTxnReceipt, useReadContract, useExternalWalletClient, useWriteContract, useConnectionType, useSwitchChain, useSignMessage, useEstimateGas, useGetGasPrice, useSolanaConnection, useSolanaPublicKey, useSolanaBalance, usePrepareSolanaTxn, useSolanaExternalWallet, usePrepareSolanaProgramTxn, useSolanaProgramTransaction, useSignSolanaTxn, useSignAndSendSolanaTxn, useWaitForSolanaConfirmation, } from './hooks';
 export { ConnectButton } from './ConnectButton';
 export { WalletModal } from './WalletModal';
 export { OnboardingUIComponent as OnboardingUI } from './OnboardingUI';

package/dist/src/types.d.ts

@@ -273,7 +273,7 @@ export interface AbstraxnContextValue {
     availableChains?: import("./chains").ChainData[];
     walletBalance?: bigint | null;
     /** Refetch wallet balance from RPC (Abstraxn or external). Call when UI screen changes (e.g. back button, modal open/close). */
-    refetchBalance?: () => void;
+    refetchBalance?: () => Promise<void>;
     connectionType?: string | null;
     emailForOtp?: string;
     setEmailForOtp?: (email: string) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abstraxn/signer-react",
-  "version": "3.1.4",
+  "version": "3.2.0",
   "description": "React SDK for Abstraxn Wallet - React components, hooks, and providers for seamless Web3 wallet integration",
   "main": "./dist/src/index.js",
   "module": "./dist/src/index.js",