@openfort/react 1.5.0 → 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/BuySelectProvider/index.js

@@ -5,6 +5,7 @@ import { useEthereumEmbeddedWallet } from '../../../ethereum/hooks/useEthereumEm
 import { useEthereumWalletAssets } from '../../../ethereum/hooks/useEthereumWalletAssets.js';
 import { useOpenfortCore } from '../../../openfort/useOpenfort.js';
 import { useSolanaEmbeddedWallet } from '../../../solana/hooks/useSolanaEmbeddedWallet.js';
+import { getPublishableKeyEnvironment } from '../../../utils/validation.js';
 import Button from '../../Common/Button/index.js';
 import { ModalHeading, ModalBody } from '../../Common/Modal/styles.js';
 import { routes } from '../../Openfort/types.js';
@@ -22,6 +23,9 @@ import { isSameToken, getAssetSymbol } from '../Send/utils.js';
 const BuySelectProvider = () => {
     const { buyForm, setBuyForm, setRoute, triggerResize, publishableKey } = useOpenfort();
     const { chainType } = useOpenfortCore();
+    // Card / Apple Pay settle on mainnet, so a test key can't deliver — block both
+    // providers (and Continue) with a clear reason while keeping the screen reachable.
+    const testnet = getPublishableKeyEnvironment(publishableKey) === 'test';
     // Use chain-specific hooks
     const ethereumWallet = useEthereumEmbeddedWallet();
     const solanaWallet = useSolanaEmbeddedWallet();
@@ -220,6 +224,10 @@ const BuySelectProvider = () => {
                             providerFeePercentage = fiatAmount ? ((totalFees / fiatAmount) * 100).toFixed(2) : null;
                         }
                     }
+                    if (testnet) {
+                        isDisabled = true;
+                        disabledReason = 'Not on testnet';
+                    }
                     // Use real quote data if available, otherwise show loading or fallback
                     const netDisplay = isDisabled
                         ? disabledReason
@@ -241,7 +249,7 @@ const BuySelectProvider = () => {
                     const metaText = isDisabled ? '' : `Fee ${isEstimated ? '~' : ''}${feePercentage}%`;
                     const isActive = buyForm.providerId === provider.id;
                     return (jsxs(ProviderButton, { type: "button", onClick: () => !isDisabled && handleSelectProvider(provider.id), "$active": isActive, disabled: isDisabled, children: [jsxs(ProviderInfo, { children: [jsxs(ProviderNameRow, { children: [jsx(ProviderName, { children: provider.name }), highlight && !isDisabled ? jsx(ProviderBadge, { children: highlight }) : null] }), jsx(ProviderMeta, { children: metaText })] }), jsxs(ProviderRight, { children: [jsx(ProviderQuote, { children: fiatDisplay }), jsx(ProviderFiat, { children: netDisplay })] })] }, provider.id));
-                }) }), jsxs(ContinueButtonWrapper, { children: [jsx(Button, { variant: "secondary", onClick: handleBack, children: "Back" }), jsx(Button, { variant: "primary", onClick: handleContinue, disabled: step2Disabled, children: "Continue" })] })] }));
+                }) }), jsxs(ContinueButtonWrapper, { children: [jsx(Button, { variant: "secondary", onClick: handleBack, children: "Back" }), jsx(Button, { variant: "primary", onClick: handleContinue, disabled: step2Disabled || testnet, children: "Continue" })] })] }));
 };
 
 export { BuySelectProvider as default };

package/build/components/Pages/BuySelectProvider/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/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/UnsupportedNetworkNotice.d.ts

@@ -10,3 +10,12 @@ export declare function UnsupportedNetworkNotice({ targetChain, railChains, }: {
     targetChain: string;
     railChains: FundingChain[];
 }): import("react/jsx-runtime").JSX.Element;
+/**
+ * Shown in the deposit flow when funds would settle on the target chain but the active
+ * embedded account can't operate there — a smart or delegated account deployed only on
+ * other chains. EOAs share one address across EVM chains, so they never hit this.
+ * Guides the user to set up an account usable on the target chain.
+ */
+export declare function AccountChainNotice({ targetChain }: {
+    targetChain: string;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -92,6 +92,16 @@ function UnsupportedNetworkNotice({ targetChain, railChains, }) {
                     ? "Solana isn't supported by the funding rail in test mode. Switch to a supported EVM testnet to add funds."
                     : "The funding rail can't deliver to this network. Switch to a supported one to add funds." }), bridge && jsx(SupportedChainSwitcher, { railChains: railChains })] }));
 }
+/**
+ * Shown in the deposit flow when funds would settle on the target chain but the active
+ * embedded account can't operate there — a smart or delegated account deployed only on
+ * other chains. EOAs share one address across EVM chains, so they never hit this.
+ * Guides the user to set up an account usable on the target chain.
+ */
+function AccountChainNotice({ targetChain }) {
+    const name = chainName(targetChain);
+    return (jsxs(Card, { children: [jsxs(Title, { children: ["Your account isn't available on ", name] }), jsxs(Body, { children: ["Deposits settle on ", name, ", but your active account isn't set up there. Create an EOA, or a smart or delegated account on ", name, ", then deposit again."] })] }));
+}
 /**
  * EVM-only: the rail-supported chains the wallet can switch to. Rendered only when
  * an Ethereum bridge is present (wagmi), so the wagmi hook below never runs in a
@@ -107,5 +117,5 @@ function SupportedChainSwitcher({ railChains }) {
                     }) }) })] }));
 }
 
-export { UnsupportedNetworkNotice };
+export { AccountChainNotice, UnsupportedNetworkNotice };
 //# sourceMappingURL=UnsupportedNetworkNotice.js.map

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

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

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

@@ -7,7 +7,6 @@ import { useFunding } from '../../../hooks/openfort/useFunding.js';
 import { useFundingChains } from '../../../hooks/openfort/useFundingChains.js';
 import useIsMobile from '../../../hooks/useIsMobile.js';
 import { useOpenfortCore } from '../../../openfort/useOpenfort.js';
-import { getPublishableKeyEnvironment } from '../../../utils/validation.js';
 import { ModalHeading } from '../../Common/Modal/styles.js';
 import PoweredByFooter from '../../Common/PoweredByFooter/index.js';
 import { FundingMethod, routes } from '../../Openfort/types.js';
@@ -17,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';
 
@@ -52,7 +50,7 @@ const hideBrokenLogo = (e) => {
  */
 const Deposit = () => {
     var _a;
-    const { setRoute, setBuyForm, uiConfig, publishableKey, triggerResize } = useOpenfort();
+    const { setRoute, setBuyForm, uiConfig, triggerResize } = useOpenfort();
     const { chainType } = useOpenfortCore();
     const isMobile = useIsMobile();
     const { isAvailable } = useFunding();
@@ -70,7 +68,6 @@ const Deposit = () => {
     const options = getPaymentOptions({
         isMobile,
         fundingAvailable: isAvailable,
-        testnet: getPublishableKeyEnvironment(publishableKey) === 'test',
         methods: (_a = uiConfig.funding) === null || _a === void 0 ? void 0 : _a.methods,
     });
     // Distinct source-currency logos (USDC, USDT, ETH, …) for the "from address" row.
@@ -120,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/paymentOptions.d.ts

@@ -28,12 +28,6 @@ type PaymentOptionsContext = {
     isMobile: boolean;
     /** When the funding backend is unavailable, crypto/CEX rows are disabled. */
     fundingAvailable: boolean;
-    /**
-     * Test-key (`pk_test_…`) project. The fiat (card/Apple Pay) and exchange rails
-     * settle real money on mainnet only — Stripe/Coinbase can't deliver to a testnet
-     * wallet — so they're disabled here. The crypto rails (Relay testnet) stay on.
-     */
-    testnet?: boolean;
     /**
      * Integrator-selected methods, in display order. When set, only these show
      * (still subject to device/availability gating). Omit to show all.