@abstraxn/signer-react 3.1.3 → 3.2.0

package/CHANGELOG.md

@@ -5,16 +5,40 @@ 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.1.3] - 2026-03-31
+## [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
 
-- **Embedded-only wagmi context** – When `externalWallets.enabled` is `false`, the provider still mounts `QueryClientProvider` and `WagmiProvider` using a **connector-free** wagmi config (`createWagmiConfig(..., embedOnly: true)`), so hooks like `useConfig`, `useAccount`, and unified chain switching keep working for email/social embedded flows without registering injected/MetaMask/WalletConnect connectors. If React Query is missing, the error message now describes wagmi hook requirements instead of blaming disabled external wallets.
-- **`createWagmiConfig` embed mode** – New optional `embedOnly` flag builds a minimal wagmi `Config` (empty `connectors`, shared HTTP transports and storage) for embedded-only usage; chain list must still be non-empty.
+- **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`
 
-### Fixed
+### 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
+
+- **Passkey completion via login code (`@abstraxn/signer-core`)** – Passkey signup and login now expect a `loginCode` (and optional `mfaRequired`) from the backend, then exchange it through `POST /auth/exchange` before tokens and user state are finalized. Passkey responses no longer persist access/refresh tokens directly from those calls.
+- **Auth route prefixes** – OTP init/verify and passkey signup/login client paths use `/auth/otp/...` and `/auth/passkey/...` instead of `/login/otp/...` and `/login/passkey/...`.
+- **Passkey login stamp** – The WebAuthn/Turnkey stamp is serialized and sent as a JSON string in the passkey login request, matching the updated API contract.
+- **Passkey signup payload** – `targetPublicKey` is optional when a device public key is not available; session completion merges profile fields from the passkey API response where the JWT omits them (e.g. `isPolicy`, `publicKey`, `authProvider`).
+- **MFA after passkey** – `AbstraxnWallet.loginWithPasskey` / `signupWithPasskey` and the React provider defer `connect()` when MFA is still required; `AuthManager` tracks `pendingSessionAuthMethod: 'passkey'` so post-MFA session setup uses the correct path.
+
+### Added
 
-- **`useExternalWalletInfo().switchChain`** – Returns the unified `switchChain` implementation (embedded + external) instead of only the external-wallet switcher, so chain changes behave consistently when external wallets are off.
+- **`PasskeyFlowResult` and onboarding hooks** – `onPasskeySignup` / `onPasskeyLogin` may return `{ mfaRequired: true }`; `onPasskeyPendingMfa` lets UIs jump to the MFA step (`OnboardingUIReact`, `OnboardingUIWeb`, and `useAuthMethods`). `PasskeyFlowResult` is re-exported from `@abstraxn/signer-core`.
+- **Server logout on full disconnect** – When the Abstraxn session disconnect runs, the SDK best-effort calls `POST /auth/logout` with the current access token (external-wallet-only disconnect continues to skip this).
 
 ## [3.1.2] - 2026-03-27
 

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/AbstraxnProvider.js

@@ -168,67 +168,38 @@ export function AbstraxnProvider({ config, children }) {
         externalSsr,
         config.wagmiConfig,
     ]);
-    // Connector-free wagmi config so `useConfig` / `useAccount` / etc. never throw when
-    // `externalWallets.enabled` is false (embedded email/social only). React Query is required
-    // for WagmiProvider the same as for the full external-wallet tree.
-    const { embedWagmiConfig, embedConfigError } = useMemo(() => {
-        if (externalWalletsEnabled) {
-            return { embedWagmiConfig: null, embedConfigError: null };
-        }
-        try {
-            const cfg = createWagmiConfig(wagmiChains, undefined, undefined, wagmiThemeRef.current, externalSsr, true);
-            return { embedWagmiConfig: cfg, embedConfigError: null };
-        }
-        catch (error) {
-            console.error("Failed to create embed-only wagmi config:", error);
-            return {
-                embedWagmiConfig: null,
-                embedConfigError: error instanceof Error
-                    ? error
-                    : new Error("Failed to create embed-only wagmi config"),
-            };
-        }
-    }, [externalWalletsEnabled, chainsKey, externalSsr]);
-    // Embedded-only mode: still mount WagmiProvider (no connectors) when React Query is available.
-    if (!externalWalletsEnabled) {
+    // If external wallets are enabled, wrap with QueryClientProvider and WagmiProvider
+    if (externalWalletsEnabled) {
+        // Check if React Query is available BEFORE doing anything else
+        // This prevents errors from happening in the first place
         const queryCheck = canUseReactQuery();
         if (!queryCheck.canUse) {
-            console.error("❌ Wagmi hooks require @tanstack/react-query. Install it or wrap your app with QueryClientProvider.\n" +
+            console.error("❌ External wallets are disabled because React Query is not available.\n" +
                 `Reason: ${queryCheck.reason || "Unknown"}\n` +
-                "Rendering without WagmiProvider; calls to useConfig may throw.");
+                "Please install @tanstack/react-query@^5.90.16 and ensure there is only one React instance.\n" +
+                "Falling back to Abstraxn wallet only.");
             return (_jsx(AbstraxnProviderWithoutWagmi, { config: config, children: children }));
         }
-        if (embedConfigError || !embedWagmiConfig) {
-            if (embedConfigError) {
-                console.error("Failed to create embed-only wagmi config:", embedConfigError);
-            }
+        if (configError) {
+            console.error("Failed to create wagmi config:", configError);
+            // Fallback to provider without wagmi if config creation fails
             return (_jsx(AbstraxnProviderWithoutWagmi, { config: config, children: children }));
         }
+        if (!wagmiConfig) {
+            // Show loading state while config is being created
+            // Don't render AbstraxnProviderInner until wagmiConfig is ready
+            return (_jsx(QueryClientWrapper, { queryClient: queryClient, children: _jsx("div", { style: { display: "none" }, children: "Loading wallet connectors..." }) }));
+        }
+        // ✅ For SSR mode, wait for hydration before rendering WagmiProvider
+        // This ensures injected wallets (Phantom, etc.) are detected properly
         if (externalSsr && !isHydrated) {
-            return (_jsx(QueryClientWrapper, { queryClient: queryClient, children: _jsx("div", { style: { display: "none" }, children: "Hydrating..." }) }));
+            return (_jsx(QueryClientWrapper, { queryClient: queryClient, children: _jsx("div", { style: { display: "none" }, children: "Hydrating wallet connectors..." }) }));
         }
-        return (_jsx(QueryClientWrapper, { queryClient: queryClient, children: _jsx(WagmiProvider, { config: embedWagmiConfig, children: _jsx(AbstraxnProviderWithoutWagmi, { config: config, children: children }) }) }));
-    }
-    // External wallets enabled: full connectors + Solana adapter tree
-    // Check if React Query is available BEFORE doing anything else
-    const queryCheck = canUseReactQuery();
-    if (!queryCheck.canUse) {
-        console.error("❌ External wallets are disabled because React Query is not available.\n" +
-            `Reason: ${queryCheck.reason || "Unknown"}\n` +
-            "Please install @tanstack/react-query@^5.90.16 and ensure there is only one React instance.\n" +
-            "Falling back to Abstraxn wallet only.");
-        return (_jsx(AbstraxnProviderWithoutWagmi, { config: config, children: children }));
-    }
-    if (configError) {
-        console.error("Failed to create wagmi config:", configError);
-        return (_jsx(AbstraxnProviderWithoutWagmi, { config: config, children: children }));
-    }
-    if (!wagmiConfig) {
-        return (_jsx(QueryClientWrapper, { queryClient: queryClient, children: _jsx("div", { style: { display: "none" }, children: "Loading wallet connectors..." }) }));
-    }
-    if (externalSsr && !isHydrated) {
-        return (_jsx(QueryClientWrapper, { queryClient: queryClient, children: _jsx("div", { style: { display: "none" }, children: "Hydrating wallet connectors..." }) }));
+        // Do NOT pass key to WagmiProvider. Remounting loses connection state and causes
+        // "Connector not connected" in Next.js (e.g. when config loads after hydration).
+        return (_jsx(QueryClientWrapper, { queryClient: queryClient, children: _jsx(ConnectionProvider, { endpoint: config.chains?.solanaEndpoint || "https://api.mainnet-beta.solana.com", children: _jsx(WalletProvider, { wallets: solanaWallets, autoConnect: true, children: _jsx(WagmiProvider, { config: wagmiConfig, initialState: config.initialState, children: _jsx(AbstraxnProviderWithWagmi, { config: config, children: children }) }) }) }) }));
     }
-    return (_jsx(QueryClientWrapper, { queryClient: queryClient, children: _jsx(ConnectionProvider, { endpoint: config.chains?.solanaEndpoint || "https://api.mainnet-beta.solana.com", children: _jsx(WalletProvider, { wallets: solanaWallets, autoConnect: true, children: _jsx(WagmiProvider, { config: wagmiConfig, initialState: config.initialState, children: _jsx(AbstraxnProviderWithWagmi, { config: config, children: children }) }) }) }) }));
+    // If external wallets are disabled, use the provider without wagmi
+    return (_jsx(AbstraxnProviderWithoutWagmi, { config: config, children: children }));
 }
 //# sourceMappingURL=AbstraxnProvider.js.map

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

@@ -766,10 +766,13 @@ export function AbstraxnProviderInner({ config, children, base, wagmi, solana, }
                 }
                 const authManager = walletInstance.getAuthManager();
                 const user = await authManager.loginWithPasskey();
-                // Set user immediately so onLoginSuccess can access it
                 setUser(user);
-                // Connect wallet after successful authentication
+                const lastAuthState = authManager.getLastAuthState();
+                if (lastAuthState?.mfaRequired === true) {
+                    return { mfaRequired: true };
+                }
                 await walletInstance.connect();
+                return undefined;
             },
             onPasskeySignup: async () => {
                 if (!walletInstance)
@@ -784,11 +787,13 @@ export function AbstraxnProviderInner({ config, children, base, wagmi, solana, }
                 }
                 const authManager = walletInstance.getAuthManager();
                 const user = await authManager.signupWithPasskey();
-                // Clear any previous errors on successful verification
-                // setError(null);
                 setUser(user);
-                // Connect wallet after successful authentication
+                const lastAuthState = authManager.getLastAuthState();
+                if (lastAuthState?.mfaRequired === true) {
+                    return { mfaRequired: true };
+                }
                 await walletInstance.connect();
+                return undefined;
             },
             onLoginSuccess: async (_data) => {
                 // Clear any previous errors on successful login
@@ -1605,7 +1610,7 @@ export function AbstraxnProviderInner({ config, children, base, wagmi, solana, }
             setLoading(false);
         }
     }, [showOnboarding]);
-    // Disconnect wallet
+    // Full disconnect: when Abstraxn is connected, `wallet.disconnect()` runs and signer-core notifies POST /auth/logout; external-wallet-only flows use `disconnectExternalWallet` instead (no core disconnect).
     const disconnect = useCallback(async () => {
         setLoading(true);
         setDisconnecting(true);
@@ -2972,7 +2977,7 @@ export function AbstraxnProviderInner({ config, children, base, wagmi, solana, }
         wagmiDisconnect,
         wagmiAccount?.isConnected,
     ]);
-    // Disconnect external wallet
+    // External wallet only — does not call AbstraxnWallet.disconnect (no server /auth/logout).
     const disconnectExternalWallet = useCallback(async () => {
         if (!externalWalletsEnabled || !wagmiDisconnect) {
             return;
@@ -3220,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) {
@@ -3227,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;
@@ -3254,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) => {
@@ -3281,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
@@ -3308,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);
@@ -3325,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) {
@@ -3342,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`);
         }
@@ -3402,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/AbstraxnProvider/useWalletInitialization.js

@@ -351,10 +351,13 @@ export function useWalletInitialization({ config, walletRef, onboardingRef, otpI
                 }
                 const authManager = walletInstance.getAuthManager();
                 const user = await authManager.loginWithPasskey();
-                // Set user immediately so onLoginSuccess can access it
                 setUser(user);
-                // Connect wallet after successful authentication
+                const lastAuthState = authManager.getLastAuthState();
+                if (lastAuthState?.mfaRequired === true) {
+                    return { mfaRequired: true };
+                }
                 await walletInstance.connect();
+                return undefined;
             },
             onPasskeySignup: async () => {
                 if (!walletInstance)
@@ -369,11 +372,13 @@ export function useWalletInitialization({ config, walletRef, onboardingRef, otpI
                 }
                 const authManager = walletInstance.getAuthManager();
                 const user = await authManager.signupWithPasskey();
-                // Clear any previous errors on successful verification
-                // setError(null);
                 setUser(user);
-                // Connect wallet after successful authentication
+                const lastAuthState = authManager.getLastAuthState();
+                if (lastAuthState?.mfaRequired === true) {
+                    return { mfaRequired: true };
+                }
                 await walletInstance.connect();
+                return undefined;
             },
             onLoginSuccess: async (_data) => {
                 // Clear any previous errors on successful login