@abstraxn/signer-react 3.1.4 → 3.3.0

package/CHANGELOG.md

@@ -5,6 +5,38 @@ 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.3.0] - 2026-04-28
+
+### Added
+
+- **Solana gasless relayer hooks** – Added `useSolanaGasless()` and `useSignAndSendSolanaGaslessTxn()` to support build/sign/send gasless flow from React apps.
+- **Solana gasless provider config** – Added `solanaGasless` in `AbstraxnProviderConfig` for relayer settings (`enabled`, `relayerBaseUrl`, `apiKey`, `networkChainId`, and optional polling defaults).
+
+### Changed
+
+- **Gasless signing path uses existing signer-react backend signing** – Gasless transaction signing now reuses `signSolanaTransactionViaAPI` (+ MFA step-up retry) so signatures continue to come from the existing Turnkey-backed signer flow instead of client-side signing.
+- **Public exports extended** – Exported new Solana gasless hooks and related types from `@abstraxn/signer-react`.
+
+## [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

@@ -27,6 +27,12 @@ import App from './App';
 
 const providerConfig: AbstraxnProviderConfig = {
   apiKey: 'your-api-key-here',
+  solanaGasless: {
+    enabled: true,
+    relayerBaseUrl: 'https://solana-hub.abstraxn.com',
+    apiKey: 'your-solana-relayer-api-key',
+    networkChainId: 101, // Solana mainnet
+  },
 };
 
 createRoot(document.getElementById('root')!).render(
@@ -105,6 +111,79 @@ 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)
+- `useSolanaGasless()` / `useSignAndSendSolanaGaslessTxn()` - Solana gasless flow using relayer build/send with Turnkey signing through signer-react
+- `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

@@ -14,6 +14,9 @@ import { ConnectionProvider, WalletProvider } from "@solana/wallet-adapter-react
 import { PhantomWalletAdapter, SolflareWalletAdapter } from "@solana/wallet-adapter-wallets";
 export function AbstraxnProvider({ config, children }) {
     const externalWalletsEnabled = config.externalWallets?.enabled ?? false;
+    const solanaEndpoint = config.chains?.solanaEndpoint ??
+        config.solanaEndpoint ??
+        "https://api.mainnet-beta.solana.com";
     const externalSsr = config.externalWallets?.ssr ?? false;
     // Get or create QueryClient - tries to use existing one from context first
     // This ensures we use the app's QueryClient instance if it exists, preventing multiple instances
@@ -197,7 +200,7 @@ export function AbstraxnProvider({ config, children }) {
         }
         // 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: solanaEndpoint, 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 }));

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);
     }, []);
@@ -3611,6 +3686,7 @@ export function AbstraxnProviderInner({ config, children, base, wagmi, solana, }
         setEmailForOtp: setEmailForOtp,
         // Global config flags
         enableSolana: config.chains?.enableSolana,
+        solanaGaslessConfig: config.solanaGasless,
     };
     // Ref to store latest value to avoid dependency issues (defined after value)
     const valueRef = useRef(value);

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}`;