@openfort/react 1.5.1 → 1.6.0

package/build/components/Common/Chain/styles.d.ts

@@ -6,4 +6,14 @@ export declare const ChainContainer: import("styled-components").StyledComponent
 export declare const LogoContainer: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, any, {}, never>;
 export declare const LoadingContainer: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, any, {}, never>;
 export declare const Unsupported: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, any, {}, never>;
+/**
+ * Pill-shaped chain indicator/switch button shown in the connected header.
+ *
+ * Shared by the EVM `ChainSelect` (which adds a chevron + dropdown when more
+ * than one chain is available) and the read-only Solana indicator (which always
+ * renders in the `disabled` single-network state). The `disabled` branch
+ * collapses to an icon-only badge and shifts left to keep the icon aligned with
+ * the enabled pill.
+ */
+export declare const SwitchChainButton: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLButtonElement, import("framer-motion").HTMLMotionProps<"button">>, any, {}, never>;
 export {};

package/build/components/Common/Chain/styles.js

@@ -1,5 +1,6 @@
 import { motion } from 'framer-motion';
 import { css, keyframes } from 'styled-components';
+import defaultTheme from '../../../constants/defaultTheme.js';
 import styled from '../../../styles/styled/index.js';
 
 const ChainContainer = styled.div `
@@ -89,6 +90,107 @@ const Unsupported = styled(motion.div) `
     right: -30%;
   }
 `;
+/**
+ * Pill-shaped chain indicator/switch button shown in the connected header.
+ *
+ * Shared by the EVM `ChainSelect` (which adds a chevron + dropdown when more
+ * than one chain is available) and the read-only Solana indicator (which always
+ * renders in the `disabled` single-network state). The `disabled` branch
+ * collapses to an icon-only badge and shifts left to keep the icon aligned with
+ * the enabled pill.
+ */
+const SwitchChainButton = styled(motion.button) `
+  --color: var(
+    --ck-dropdown-button-color,
+    var(--ck-button-primary-color, var(--ck-body-color))
+  );
+  --background: var(
+    --ck-dropdown-button-background,
+    var(--ck-secondary-button-background, var(--ck-body-background-secondary))
+  );
+  --box-shadow: var(
+    --ck-dropdown-button-box-shadow,
+    var(
+      --ck-secondary-button-box-shadow,
+      var(--ck-button-primary-box-shadow),
+      none
+    )
+  );
 
-export { ChainContainer, LoadingContainer, LogoContainer, Unsupported };
+  --hover-color: var(--ck-dropdown-button-hover-color, var(--color));
+  --hover-background: var(
+    --ck-dropdown-button-hover-background,
+    var(--background)
+  );
+  --hover-box-shadow: var(
+    --ck-dropdown-button-hover-box-shadow,
+    var(--box-shadow)
+  );
+
+  --active-color: var(--ck-dropdown-button-active-color, var(--hover-color));
+  --active-background: var(
+    --ck-dropdown-button-active-background,
+    var(--hover-background)
+  );
+  --active-box-shadow: var(
+    --ck-dropdown-button-active-box-shadow,
+    var(--hover-box-shadow)
+  );
+
+  appearance: none;
+  user-select: none;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-radius: 15px;
+  width: 52px;
+  height: 30px;
+  padding: 2px 6px 2px 3px;
+  font-size: 16px;
+  line-height: 19px;
+  font-weight: 500;
+  text-decoration: none;
+  white-space: nowrap;
+  transform: translateZ(0px);
+
+  transition: 100ms ease;
+  transition-property: transform, background-color, box-shadow, color;
+
+  color: var(--color);
+  background: var(--background);
+  box-shadow: var(--box-shadow);
+
+  svg {
+    position: relative;
+    display: block;
+  }
+
+  ${(props) => props.disabled
+    ? css `
+          width: auto;
+          padding: 3px;
+          position: relative;
+          left: -22px;
+        `
+    : css `
+          cursor: pointer;
+
+          @media only screen and (min-width: ${defaultTheme.mobileWidth + 1}px) {
+            &:hover,
+            &:focus-visible {
+              color: var(--hover-color);
+              background: var(--hover-background);
+              box-shadow: var(--hover-box-shadow);
+            }
+            &:active {
+              color: var(--active-color);
+              background: var(--active-background);
+              box-shadow: var(--active-box-shadow);
+            }
+          }
+        `}
+`;
+
+export { ChainContainer, LoadingContainer, LogoContainer, SwitchChainButton, Unsupported };
 //# sourceMappingURL=styles.js.map

package/build/components/Common/Chain/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/components/Common/Modal/index.js

@@ -186,6 +186,8 @@ onInfo, }) => {
             case routes.SWITCHNETWORKS:
             case routes.ETH_SWITCH_NETWORK:
                 return locales.switchNetworkScreen_heading;
+            case routes.SIGN_MESSAGE:
+                return 'Sign message';
             default:
                 return '';
         }

package/build/components/Common/Modal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/components/Common/SolanaChain/index.d.ts

@@ -1,8 +1,9 @@
 /**
- * Read-only Solana network indicator for the Connected modal — the Solana logo,
- * with the active cluster shown on hover. There is no switch: the cluster is
- * fixed by `walletConfig.solana`, and switching between Solana and EVM is
- * intentionally unsupported.
+ * Read-only Solana network indicator for the Connected modal. Mirrors the EVM
+ * `ChainSelect` in its single-network (`disabled`) state — the same pill button
+ * and tooltip — so EVM and Solana headers stay visually consistent. There is no
+ * switch: the cluster is fixed by `walletConfig.solana` and cannot change at
+ * runtime, so the button never gains a chevron or dropdown.
  */
 declare const SolanaChain: () => import("react/jsx-runtime").JSX.Element;
 export default SolanaChain;

package/build/components/Common/SolanaChain/index.js

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import Logos from '../../../assets/logos.js';
 import { useSolanaContext } from '../../../solana/SolanaContext.js';
-import styled from '../../../styles/styled/index.js';
+import { SwitchChainButton, ChainContainer, LogoContainer } from '../Chain/styles.js';
 import Tooltip from '../Tooltip/index.js';
 
 /** `mainnet-beta` → "Mainnet"; otherwise capitalize the cluster name. */
@@ -12,28 +12,20 @@ function formatCluster(cluster) {
         return 'Mainnet';
     return cluster.charAt(0).toUpperCase() + cluster.slice(1);
 }
-const Badge = styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  background: #131313;
-  border: 2px solid var(--ck-body-background, #fff);
-  box-sizing: border-box;
-`;
+/** Solana mark rendered in the same circular container as the EVM `Chain` icon. */
+const SolanaChainIcon = () => (jsx(ChainContainer, { size: 24, radius: "50%", children: jsx(LogoContainer, { initial: false, animate: { opacity: 1 }, children: jsx(Logos.Solana, { style: { width: '62%', height: 'auto' } }) }) }));
 /**
- * Read-only Solana network indicator for the Connected modal — the Solana logo,
- * with the active cluster shown on hover. There is no switch: the cluster is
- * fixed by `walletConfig.solana`, and switching between Solana and EVM is
- * intentionally unsupported.
+ * Read-only Solana network indicator for the Connected modal. Mirrors the EVM
+ * `ChainSelect` in its single-network (`disabled`) state — the same pill button
+ * and tooltip — so EVM and Solana headers stay visually consistent. There is no
+ * switch: the cluster is fixed by `walletConfig.solana` and cannot change at
+ * runtime, so the button never gains a chevron or dropdown.
  */
 const SolanaChain = () => {
     var _a;
     const cluster = (_a = useSolanaContext()) === null || _a === void 0 ? void 0 : _a.cluster;
     const label = cluster ? `Solana · ${formatCluster(cluster)}` : 'Solana';
-    return (jsx(Tooltip, { message: label, children: jsx(Badge, { "aria-label": label, children: jsx(Logos.Solana, { style: { width: '62%', height: 'auto' } }) }) }));
+    return (jsx(SwitchChainButton, { type: "button", disabled: true, "aria-label": label, children: jsx(Tooltip, { message: label, xOffset: -6, delay: 0.01, children: jsx(SolanaChainIcon, {}) }) }));
 };
 
 export { SolanaChain as default };

package/build/components/Common/SolanaChain/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/components/ConnectModal/index.js

@@ -52,6 +52,7 @@ import Send from '../Pages/Send/index.js';
 import { SolanaSend } from '../Pages/Send/SolanaSend.js';
 import SendConfirmation from '../Pages/SendConfirmation/index.js';
 import { SolanaSendConfirmation } from '../Pages/SendConfirmation/SolanaSendConfirmation.js';
+import SignMessage from '../Pages/SignMessage/index.js';
 import SocialProviders from '../Pages/SocialProviders/index.js';
 import ConnectUsing from './ConnectUsing.js';
 import ConnectWithMobile from './ConnectWithMobile.js';
@@ -103,6 +104,7 @@ function buildSharedPages() {
         depositWallet: jsx(DepositWallet, {}),
         depositCex: jsx(DepositCex, {}),
         exportKey: jsx(ExportKey, {}),
+        signMessage: jsx(SignMessage, {}),
         walletOverview: jsx(Connected, {}),
     };
 }

package/build/components/ConnectModal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/components/Openfort/OpenfortProvider.js

@@ -145,6 +145,7 @@ const OpenfortProvider = ({ children, uiConfig, onConnect, onDisconnect, debugMo
     const [emailInput, setEmailInput] = useState('');
     const [phoneInput, setPhoneInput] = useState('');
     const [sendForm, setSendForm] = useState(defaultSendFormState);
+    const [signRequest, setSignRequest] = useState(null);
     const [buyForm, setBuyForm] = useState(defaultBuyFormState);
     const [headerLeftSlot, setHeaderLeftSlot] = useState(null);
     const [chainType, setChainType] = useState((_g = walletConfig === null || walletConfig === void 0 ? void 0 : walletConfig.chainType) !== null && _g !== void 0 ? _g : ChainTypeEnum.EVM);
@@ -263,6 +264,8 @@ const OpenfortProvider = ({ children, uiConfig, onConnect, onDisconnect, debugMo
         setSendForm,
         buyForm,
         setBuyForm,
+        signRequest,
+        setSignRequest,
         onConnect,
         onDisconnect,
         chains,
@@ -291,6 +294,7 @@ const OpenfortProvider = ({ children, uiConfig, onConnect, onDisconnect, debugMo
         phoneInput,
         sendForm,
         buyForm,
+        signRequest,
         headerLeftSlot,
         onConnect,
         onDisconnect,

package/build/components/Openfort/OpenfortProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"OpenfortProvider.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"OpenfortProvider.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/components/Openfort/context.d.ts

@@ -3,7 +3,7 @@ import type React from 'react';
 import type { Chain } from 'viem';
 import type { useConnectCallbackProps } from '../../openfort/connectCallbackTypes';
 import type { CustomTheme, Languages, Mode, Theme } from '../../types';
-import type { BuyFormState, DebugModeOptions, OpenfortUIOptionsExtended, OpenfortWalletConfig, RouteOptions, SendFormState, SetRouteOptions } from './types';
+import type { BuyFormState, DebugModeOptions, OpenfortUIOptionsExtended, OpenfortWalletConfig, RouteOptions, SendFormState, SetRouteOptions, SignRequest } from './types';
 type Connector = {
     id: string;
     type?: 'wallet';
@@ -50,6 +50,9 @@ export type ContextValue = {
     setSendForm: React.Dispatch<React.SetStateAction<SendFormState>>;
     buyForm: BuyFormState;
     setBuyForm: React.Dispatch<React.SetStateAction<BuyFormState>>;
+    /** In-flight message/typed-data sign request driving the Sign message screen. */
+    signRequest: SignRequest | null;
+    setSignRequest: React.Dispatch<React.SetStateAction<SignRequest | null>>;
     /** Configured EVM chains (from wagmi bridge or walletConfig.ethereum). Empty when not EVM. */
     chains: Chain[];
 } & useConnectCallbackProps;

package/build/components/Openfort/types.d.ts

@@ -13,6 +13,7 @@ export declare const routes: {
     readonly SOCIAL_PROVIDERS: "socialProviders";
     readonly PROFILE: "profile";
     readonly EXPORT_KEY: "exportKey";
+    readonly SIGN_MESSAGE: "signMessage";
     readonly LOADING: "loading";
     readonly LOAD_WALLETS: "loadWallets";
     readonly RECOVER_WALLET: "recoverWallets";
@@ -473,6 +474,27 @@ export type SendFormState = {
     asset: Asset;
 };
 export declare const defaultSendFormState: SendFormState;
+/** EIP-712 typed-data payload accepted by `useSignMessage().signTypedData`. */
+export type SignTypedDataPayload = {
+    domain?: Record<string, unknown>;
+    types: Record<string, {
+        name: string;
+        type: string;
+    }[]>;
+    primaryType: string;
+    message: Record<string, unknown>;
+};
+/** An in-flight sign request that drives the Sign message modal screen. */
+export type SignRequest = ({
+    kind: 'message';
+    message: string;
+} | {
+    kind: 'typedData';
+    typedData: SignTypedDataPayload;
+}) & {
+    resolve: (signature: `0x${string}`) => void;
+    reject: (reason?: unknown) => void;
+};
 export type BuyProviderId = 'moonpay' | 'coinbase' | 'stripe';
 export type BuyFormState = {
     amount: string;

package/build/components/Openfort/types.js

@@ -3,6 +3,7 @@ const routes = {
     SOCIAL_PROVIDERS: 'socialProviders',
     PROFILE: 'profile',
     EXPORT_KEY: 'exportKey',
+    SIGN_MESSAGE: 'signMessage',
     LOADING: 'loading',
     LOAD_WALLETS: 'loadWallets',
     RECOVER_WALLET: 'recoverWallets',

package/build/components/Openfort/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"types.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/components/Pages/Buy/styles.js

@@ -4,8 +4,8 @@ import { ButtonContainer } from '../../Common/Button/styles.js';
 const Section = styled.div `
   display: flex;
   flex-direction: column;
-  margin-top: 20px;
-  gap: 12px;
+  margin-top: 16px;
+  gap: 10px;
 `;
 const SectionLabel = styled.span `
   font-size: 13px;
@@ -16,16 +16,16 @@ const SectionLabel = styled.span `
 `;
 const AmountCard = styled.div `
   display: flex;
-  align-items: baseline;
-  gap: 12px;
-  padding: 18px 20px;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 14px;
   border-radius: var(--ck-secondary-button-border-radius);
   border: 1px solid var(--ck-body-divider);
   background: var(--ck-secondary-button-background);
   color: var(--ck-body-color);
 `;
 const CurrencySymbol = styled.span `
-  font-size: 28px;
+  font-size: 18px;
   font-weight: 600;
   color: var(--ck-body-color-muted);
   line-height: 1;
@@ -35,7 +35,7 @@ const AmountInput = styled.input `
   border: none;
   background: transparent;
   color: var(--ck-body-color);
-  font-size: 44px;
+  font-size: 24px;
   font-weight: 600;
   line-height: 1;
   padding: 0;
@@ -53,12 +53,12 @@ const PresetList = styled.div `
 `;
 const PresetButton = styled.button `
   flex: 1;
-  padding: 10px 14px;
+  padding: 8px 12px;
   border-radius: 999px;
   border: none;
   background: ${({ $active }) => ($active ? 'var(--ck-accent-color)' : 'var(--ck-secondary-button-background)')};
   color: ${({ $active }) => ($active ? 'var(--ck-accent-text-color)' : 'var(--ck-body-color)')};
-  font-size: 14px;
+  font-size: 13px;
   font-weight: 600;
   cursor: pointer;
 
@@ -71,7 +71,7 @@ const SelectorButton = styled.button `
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  padding: 14px 16px;
+  padding: 10px 14px;
   border-radius: var(--ck-secondary-button-border-radius);
   border: 1px solid var(--ck-body-divider);
   background: var(--ck-secondary-button-background);

package/build/components/Pages/Connected/EthereumConnected.js

@@ -81,9 +81,15 @@ const EthereumConnected = () => {
             return acc + price * balance;
         }, 0);
     }, [multiChainAssets]);
+    // Re-measure on mount, after paint, and when the async assets resolve. Without
+    // the post-paint pass, returning to this screen (assets already cached) measures
+    // before layout settles and the modal keeps the shorter height, clipping the
+    // actions below the fold.
     useEffect(() => {
         context.triggerResize();
-    }, [context.triggerResize]);
+        const id = requestAnimationFrame(() => context.triggerResize());
+        return () => cancelAnimationFrame(id);
+    }, [context.triggerResize, isLoading, totalBalanceUsd]);
     useEffect(() => {
         if (!address) {
             setHeaderLeftSlot(null);

package/build/components/Pages/Connected/EthereumConnected.js.map

@@ -1 +1 @@
-{"version":3,"file":"EthereumConnected.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"EthereumConnected.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/components/Pages/Deposit/TestnetNotice.js

@@ -1,7 +1,11 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { ChainTypeEnum } from '@openfort/openfort-js';
 import { useState, useEffect } from 'react';
+import { useEthereumEmbeddedWallet } from '../../../ethereum/hooks/useEthereumEmbeddedWallet.js';
+import { useOpenfortCore } from '../../../openfort/useOpenfort.js';
+import { useSolanaEmbeddedWallet } from '../../../solana/hooks/useSolanaEmbeddedWallet.js';
 import styled from '../../../styles/styled/index.js';
-import { getPublishableKeyEnvironment } from '../../../utils/validation.js';
+import { isTestnetChainId } from '../../../utils/rpc.js';
 import { useOpenfort } from '../../Openfort/useOpenfort.js';
 
 /** Relay's own testnet guide — the authoritative explanation of the limitation. */
@@ -116,13 +120,21 @@ const DocsLink = styled.a `
  * Renders nothing on live keys.
  */
 function TestnetNotice() {
-    const { publishableKey, triggerResize } = useOpenfort();
+    const { triggerResize } = useOpenfort();
+    const { chainType } = useOpenfortCore();
+    const ethereumWallet = useEthereumEmbeddedWallet();
+    const solanaWallet = useSolanaEmbeddedWallet();
     const [open, setOpen] = useState(false);
     // Re-measure the modal when the details expand/collapse so it grows/shrinks to fit.
     useEffect(() => {
         triggerResize();
     }, [open, triggerResize]);
-    if (getPublishableKeyEnvironment(publishableKey) !== 'test')
+    // Testnet is a property of the active chain, not the publishable key — read it
+    // from the connected embedded wallet so the notice tracks the real deposit network.
+    const isTestnet = chainType === ChainTypeEnum.SVM
+        ? solanaWallet.status === 'connected' && solanaWallet.cluster !== 'mainnet-beta'
+        : ethereumWallet.status === 'connected' && isTestnetChainId(ethereumWallet.chainId);
+    if (!isTestnet)
         return null;
     return (jsxs(Card, { children: [jsxs(Header, { type: "button", "aria-expanded": open, onClick: () => setOpen((v) => !v), children: [jsx(Badge, { children: jsx(FlaskIcon, {}) }), jsx(Summary, { children: "Testnet mode \u2014 funding is limited" }), jsx(Chevron, { "$open": open, children: "\u25B6" })] }), open && (jsxs(Body, { children: [jsx(Muted, { children: "Deposits route through Relay's testnet rail. It bridges the same asset but can't swap between tokens \u2014 testnets have no DEX liquidity. Card and exchange rails are mainnet-only." }), jsxs(Rules, { children: [jsx("li", { "data-ok": "true", children: "Bridging the same asset (e.g. ETH \u2192 ETH) and same-chain transfers" }), jsx("li", { "data-ok": "false", children: "Swapping to another token (e.g. \u2192 USDC) \u2014 fails with \"$0 liquidity\"" })] }), jsx(Muted, { children: "To test swaps, card or exchange deposits, use a live key on a low-cost chain like Base." }), jsx(DocsLink, { href: RELAY_TESTNET_DOCS, target: "_blank", rel: "noreferrer", children: "Why? Read Relay's testnet guide \u2197" })] }))] }));
 }

package/build/components/Pages/Deposit/TestnetNotice.js.map

@@ -1 +1 @@
-{"version":3,"file":"TestnetNotice.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"TestnetNotice.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/components/Pages/Deposit/index.js

@@ -16,7 +16,6 @@ import { EVM_BUY_CURRENCIES } from '../Buy/evmCurrencies.js';
 import { SOLANA_BUY_CURRENCIES } from '../Buy/solanaCurrencies.js';
 import { getPaymentOptions } from './paymentOptions.js';
 import { DepositContent, OptionList, OptionButton, OptionLeft, OptionIconBadge, OptionInfo, OptionTitle, OptionSubtitle, LogoCluster } from './styles.js';
-import { TestnetNotice } from './TestnetNotice.js';
 import { UnsupportedNetworkNotice } from './UnsupportedNetworkNotice.js';
 import { useFundingTarget } from './useFundingTarget.js';
 
@@ -118,7 +117,7 @@ const Deposit = () => {
         }));
         setRoute(routes.BUY);
     };
-    return (jsxs(PageContent, { onBack: routes.CONNECTED, children: [jsx(ModalHeading, { children: "Add funds" }), jsx(TestnetNotice, {}), targetUnsupported ? (jsx(UnsupportedNetworkNotice, { targetChain: target.chain, railChains: railChains })) : (jsx(DepositContent, { children: jsx(OptionList, { children: options.map((option) => {
+    return (jsxs(PageContent, { onBack: routes.CONNECTED, children: [jsx(ModalHeading, { children: "Add funds" }), targetUnsupported ? (jsx(UnsupportedNetworkNotice, { targetChain: target.chain, railChains: railChains })) : (jsx(DepositContent, { children: jsx(OptionList, { children: options.map((option) => {
                         var _a;
                         return (jsxs(OptionButton, { type: "button", disabled: option.disabled, onClick: () => go(option.target), children: [jsxs(OptionLeft, { children: [jsx(OptionIconBadge, { children: METHOD_ICON[option.id] }), jsxs(OptionInfo, { children: [jsx(OptionTitle, { children: option.title }), jsx(OptionSubtitle, { children: (_a = option.disabledReason) !== null && _a !== void 0 ? _a : option.subtitle })] })] }), jsx(LogoCluster, { children: clusterFor(option.id) })] }, option.id));
                     }) }) })), jsx(PoweredByFooter, {})] }));

package/build/components/Pages/Deposit/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/components/Pages/Deposit/sources.d.ts

@@ -13,5 +13,8 @@ export declare const DEST_USDC = "0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913";
  */
 export declare const DEST_CHAIN_SOL = "solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp";
 export declare const DEST_USDC_SOL = "EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v";
+/** EVM native-asset sentinel (zero address) — the default destination currency on
+ * chains where we don't ship a stablecoin address (e.g. testnets). */
+export declare const NATIVE_TOKEN_ADDRESS = "0x0000000000000000000000000000000000000000";
 /** True for a CAIP-2 Solana chain id. */
 export declare function isSolana(chain: string): boolean;

package/build/components/Pages/Deposit/sources.js

@@ -13,10 +13,13 @@ const DEST_USDC = '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913';
  */
 const DEST_CHAIN_SOL = 'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp';
 const DEST_USDC_SOL = 'EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v';
+/** EVM native-asset sentinel (zero address) — the default destination currency on
+ * chains where we don't ship a stablecoin address (e.g. testnets). */
+const NATIVE_TOKEN_ADDRESS = '0x0000000000000000000000000000000000000000';
 /** True for a CAIP-2 Solana chain id. */
 function isSolana(chain) {
     return chain.startsWith('solana:');
 }
 
-export { DEST_CHAIN, DEST_CHAIN_SOL, DEST_USDC, DEST_USDC_SOL, isSolana };
+export { DEST_CHAIN, DEST_CHAIN_SOL, DEST_USDC, DEST_USDC_SOL, NATIVE_TOKEN_ADDRESS, isSolana };
 //# sourceMappingURL=sources.js.map

package/build/components/Pages/Deposit/sources.js.map

@@ -1 +1 @@
-{"version":3,"file":"sources.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"sources.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/components/Pages/Deposit/useFundingTarget.d.ts

@@ -1,9 +1,11 @@
 /**
  * The destination route Deposit-hub funding settles into. Integrators override the
- * chain and currency via `uiConfig.funding.{targetChain,targetCurrency}`; both
- * default to USDC on the active chain type (Base for EVM, Solana mainnet for SVM)
- * so the flow works with zero configuration. The deposit recipient is always the
- * active embedded wallet for the destination chain family — callers resolve it.
+ * chain and currency via `uiConfig.funding.{targetChain,targetCurrency}`. With no
+ * override the destination follows the wallet's ACTIVE chain — so a testnet wallet
+ * funds on its own network instead of being told "funding isn't available on Base".
+ * Currency defaults to USDC where we ship its address (Base, Solana mainnet) and to
+ * the native asset otherwise, so the destination currency is always valid on-chain.
+ * The deposit recipient is always the active embedded wallet — callers resolve it.
  */
 export declare function useFundingTarget(): {
     chain: string;

package/build/components/Pages/Deposit/useFundingTarget.js

@@ -1,23 +1,34 @@
 import { ChainTypeEnum } from '@openfort/openfort-js';
+import { useEthereumEmbeddedWallet } from '../../../ethereum/hooks/useEthereumEmbeddedWallet.js';
 import { useOpenfortCore } from '../../../openfort/useOpenfort.js';
 import { useOpenfort } from '../../Openfort/useOpenfort.js';
-import { DEST_CHAIN_SOL, DEST_CHAIN, DEST_USDC_SOL, DEST_USDC } from './sources.js';
+import { DEST_CHAIN_SOL, DEST_CHAIN, DEST_USDC, DEST_USDC_SOL, NATIVE_TOKEN_ADDRESS } from './sources.js';
 
 /**
  * The destination route Deposit-hub funding settles into. Integrators override the
- * chain and currency via `uiConfig.funding.{targetChain,targetCurrency}`; both
- * default to USDC on the active chain type (Base for EVM, Solana mainnet for SVM)
- * so the flow works with zero configuration. The deposit recipient is always the
- * active embedded wallet for the destination chain family — callers resolve it.
+ * chain and currency via `uiConfig.funding.{targetChain,targetCurrency}`. With no
+ * override the destination follows the wallet's ACTIVE chain — so a testnet wallet
+ * funds on its own network instead of being told "funding isn't available on Base".
+ * Currency defaults to USDC where we ship its address (Base, Solana mainnet) and to
+ * the native asset otherwise, so the destination currency is always valid on-chain.
+ * The deposit recipient is always the active embedded wallet — callers resolve it.
  */
 function useFundingTarget() {
     var _a, _b, _c, _d;
     const { uiConfig } = useOpenfort();
     const { chainType } = useOpenfortCore();
+    const ethereumWallet = useEthereumEmbeddedWallet();
     const isSolana = chainType === ChainTypeEnum.SVM;
+    const activeChain = isSolana
+        ? DEST_CHAIN_SOL
+        : ethereumWallet.status === 'connected'
+            ? `eip155:${ethereumWallet.chainId}`
+            : DEST_CHAIN;
+    const chain = (_b = (_a = uiConfig.funding) === null || _a === void 0 ? void 0 : _a.targetChain) !== null && _b !== void 0 ? _b : activeChain;
+    const defaultCurrency = chain === DEST_CHAIN ? DEST_USDC : chain === DEST_CHAIN_SOL ? DEST_USDC_SOL : NATIVE_TOKEN_ADDRESS;
     return {
-        chain: (_b = (_a = uiConfig.funding) === null || _a === void 0 ? void 0 : _a.targetChain) !== null && _b !== void 0 ? _b : (isSolana ? DEST_CHAIN_SOL : DEST_CHAIN),
-        currency: (_d = (_c = uiConfig.funding) === null || _c === void 0 ? void 0 : _c.targetCurrency) !== null && _d !== void 0 ? _d : (isSolana ? DEST_USDC_SOL : DEST_USDC),
+        chain,
+        currency: (_d = (_c = uiConfig.funding) === null || _c === void 0 ? void 0 : _c.targetCurrency) !== null && _d !== void 0 ? _d : defaultCurrency,
     };
 }
 

package/build/components/Pages/Deposit/useFundingTarget.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFundingTarget.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"useFundingTarget.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/components/Pages/DepositCex/index.js

@@ -21,6 +21,7 @@ import { DepositStatus } from '../Deposit/DepositStatus.js';
 import { walletListBtn } from '../Deposit/formStyles.js';
 import { isSolana, DEST_USDC } from '../Deposit/sources.js';
 import { StepDivider, ButtonLogo } from '../Deposit/styles.js';
+import { TestnetNotice } from '../Deposit/TestnetNotice.js';
 import { useFundingTarget } from '../Deposit/useFundingTarget.js';
 import { sanitizeForParsing, sanitizeAmountInput } from '../Send/utils.js';
 
@@ -213,7 +214,7 @@ const DepositCex = () => {
     // success / refunded / expired screen (shared with the crypto rail).
     if (isDepositFlowActive(status))
         return jsx(DepositProgress, { status: status });
-    return (jsxs(PageContent, { onBack: routes.DEPOSIT, children: [jsx(ModalHeading, { children: "Transfer from Exchange" }), jsxs(Section, { children: [jsx(SectionLabel, { children: "Amount" }), jsxs(AmountCard, { children: [jsx(CurrencySymbol, { children: "$" }), jsx(AmountInput, { value: amount, onChange: handleAmountChange, onBlur: handleAmountBlur, placeholder: "0.00", inputMode: "decimal", autoComplete: "off" })] }), jsx(PresetList, { children: PRESETS.map((preset) => (jsxs(PresetButton, { type: "button", "$active": pressedPreset === preset, onClick: () => handlePreset(preset), children: ["$", preset] }, preset))) }), amountTooLow ? (jsxs("span", { style: errorHelper, children: ["Enter at least $", MIN_AMOUNT, ".00 \u2014 the Coinbase minimum."] })) : (jsxs("span", { style: helperText, children: ["Minimum $", MIN_AMOUNT, ".00"] })), chainSupported && (jsxs("span", { style: destinationRow, children: [destAssetLogo && jsx("img", { src: destAssetLogo, alt: "", style: destinationLogo, onError: hideBrokenLogo }), destChainLogo && jsx("img", { src: destChainLogo, alt: "", style: destinationLogo, onError: hideBrokenLogo })] }))] }), !isAvailable && jsx(ModalBody, { children: "Funding isn't available right now." }), !testnet && isAvailable && !chainSupported && (jsxs(ModalBody, { children: ["Coinbase can't deliver to ", destChainName, " yet."] })), !testnet && error && jsx(ModalBody, { style: { color: '#dc2626' }, children: error.message }), jsx(StepDivider, { children: "Then open an exchange" }), jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 8, marginTop: 12 }, children: EXCHANGES.map((ex) => ex.comingSoon ? (jsxs("button", { type: "button", disabled: true, style: {
+    return (jsxs(PageContent, { onBack: routes.DEPOSIT, children: [jsx(ModalHeading, { children: "Transfer from Exchange" }), jsx(TestnetNotice, {}), jsxs(Section, { children: [jsx(SectionLabel, { children: "Amount" }), jsxs(AmountCard, { children: [jsx(CurrencySymbol, { children: "$" }), jsx(AmountInput, { value: amount, onChange: handleAmountChange, onBlur: handleAmountBlur, placeholder: "0.00", inputMode: "decimal", autoComplete: "off" })] }), jsx(PresetList, { children: PRESETS.map((preset) => (jsxs(PresetButton, { type: "button", "$active": pressedPreset === preset, onClick: () => handlePreset(preset), children: ["$", preset] }, preset))) }), amountTooLow ? (jsxs("span", { style: errorHelper, children: ["Enter at least $", MIN_AMOUNT, ".00 \u2014 the Coinbase minimum."] })) : (jsxs("span", { style: helperText, children: ["Minimum $", MIN_AMOUNT, ".00"] })), chainSupported && (jsxs("span", { style: destinationRow, children: [destAssetLogo && jsx("img", { src: destAssetLogo, alt: "", style: destinationLogo, onError: hideBrokenLogo }), destChainLogo && jsx("img", { src: destChainLogo, alt: "", style: destinationLogo, onError: hideBrokenLogo })] }))] }), !isAvailable && jsx(ModalBody, { children: "Funding isn't available right now." }), !testnet && isAvailable && !chainSupported && (jsxs(ModalBody, { children: ["Coinbase can't deliver to ", destChainName, " yet."] })), !testnet && error && jsx(ModalBody, { style: { color: '#dc2626' }, children: error.message }), jsx(StepDivider, { children: "Then open an exchange" }), jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 8, marginTop: 12 }, children: EXCHANGES.map((ex) => ex.comingSoon ? (jsxs("button", { type: "button", disabled: true, style: {
                         ...walletListBtn,
                         display: 'flex',
                         alignItems: 'center',

package/build/components/Pages/DepositCex/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}