@openfort/react 1.1.3 → 1.2.0

package/build/assets/icons.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
 const SendIcon = ({ ...props }) => (jsxs("svg", { "aria-hidden": "true", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [jsx("path", { d: "M5 19L19 5", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M9 5H19V15", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" })] }));
 const ReceiveIcon = ({ ...props }) => (jsxs("svg", { "aria-hidden": "true", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [jsx("path", { d: "M19 5L5 19", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M15 19H5V9", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" })] }));

package/build/assets/logos.d.ts

@@ -125,5 +125,17 @@ declare const _default: {
     CoinbasePay: ({ ...props }: {
         [x: string]: any;
     }) => import("react/jsx-runtime").JSX.Element;
+    Apple: ({ ...props }: {
+        [x: string]: any;
+    }) => import("react/jsx-runtime").JSX.Element;
+    Binance: ({ ...props }: {
+        [x: string]: any;
+    }) => import("react/jsx-runtime").JSX.Element;
+    Visa: ({ ...props }: {
+        [x: string]: any;
+    }) => import("react/jsx-runtime").JSX.Element;
+    Mastercard: ({ ...props }: {
+        [x: string]: any;
+    }) => import("react/jsx-runtime").JSX.Element;
 };
 export default _default;

package/build/assets/logos.js

@@ -103,6 +103,9 @@ const Openfort = ({ ...props }) => (jsx("svg", { viewBox: "0 0 22 24", width: "2
 const Stripe = ({ ...props }) => (jsxs("svg", { ...props, width: "360", height: "151", viewBox: "0 0 360 151", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M360 78.2001C360 52.6001 347.6 32.4001 323.9 32.4001C300.1 32.4001 285.7 52.6001 285.7 78.0001C285.7 108.1 302.7 123.3 327.1 123.3C339 123.3 348 120.6 354.8 116.8V96.8001C348 100.2 340.2 102.3 330.3 102.3C320.6 102.3 312 98.9002 310.9 87.1002H359.8C359.8 85.8002 360 80.6002 360 78.2001ZM310.6 68.7001C310.6 57.4002 317.5 52.7001 323.8 52.7001C329.9 52.7001 336.4 57.4002 336.4 68.7001H310.6Z", fill: "currentColor" }), jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M247.1 32.4001C237.3 32.4001 231 37.0001 227.5 40.2001L226.2 34.0001H204.2V150.6L229.2 145.3L229.3 117C232.9 119.6 238.2 123.3 247 123.3C264.9 123.3 281.2 108.9 281.2 77.2001C281.1 48.2001 264.6 32.4001 247.1 32.4001ZM241.1 101.3C235.2 101.3 231.7 99.2001 229.3 96.6002L229.2 59.5001C231.8 56.6001 235.4 54.6002 241.1 54.6002C250.2 54.6002 256.5 64.8001 256.5 77.9001C256.5 91.3001 250.3 101.3 241.1 101.3Z", fill: "currentColor" }), jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M169.8 26.5L194.9 21.1V0.800049L169.8 6.10005V26.5Z", fill: "currentColor" }), jsx("path", { d: "M194.9 34.1001H169.8V121.6H194.9V34.1001Z", fill: "currentColor" }), jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M142.9 41.5001L141.3 34.1001H119.7V121.6H144.7V62.3001C150.6 54.6001 160.6 56.0001 163.7 57.1001V34.1001C160.5 32.9001 148.8 30.7001 142.9 41.5001Z", fill: "currentColor" }), jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M92.8999 12.4001L68.4999 17.6001L68.3999 97.7001C68.3999 112.5 79.4999 123.4 94.2999 123.4C102.5 123.4 108.5 121.9 111.8 120.1V99.8001C108.6 101.1 92.7999 105.7 92.7999 90.9001V55.4001H111.8V34.1002H92.7999L92.8999 12.4001Z", fill: "currentColor" }), jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M25.3 59.5001C25.3 55.6001 28.5 54.1002 33.8 54.1002C41.4 54.1002 51 56.4001 58.6 60.5001V37.0001C50.3 33.7001 42.1 32.4001 33.8 32.4001C13.5 32.4001 0 43.0001 0 60.7001C0 88.3001 38 83.9001 38 95.8001C38 100.4 34 101.9 28.4 101.9C20.1 101.9 9.5 98.5002 1.1 93.9002V117.7C10.4 121.7 19.8 123.4 28.4 123.4C49.2 123.4 63.5 113.1 63.5 95.2001C63.4 65.4001 25.3 70.7001 25.3 59.5001Z", fill: "currentColor" })] }));
 const CoinbasePay = ({ ...props }) => (jsx("svg", { ...props, version: "1.1", id: "Layer_1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", x: "0px", y: "0px", viewBox: "0 0 1101.64 196.79", style: { enableBackground: 'new 0 0 1101.64 196.79' }, xmlSpace: "preserve", children: jsx("path", { fill: "currentColor", d: "M222.34,54.94c-40.02,0-71.29,30.38-71.29,71.05s30.48,70.79,71.29,70.79c40.81,0,71.82-30.64,71.82-71.05\n      C294.16,85.58,263.68,54.94,222.34,54.94z M222.61,167.47c-22.79,0-39.49-17.7-39.49-41.47c0-24.04,16.43-41.73,39.22-41.73\n      c23.06,0,39.75,17.96,39.75,41.73S245.4,167.47,222.61,167.47z M302.9,85.85h19.88v108.3h31.8V57.58H302.9V85.85z M71.02,84.26\n      c16.7,0,29.95,10.3,34.98,25.62h33.66c-6.1-32.75-33.13-54.94-68.37-54.94C31.27,54.94,0,85.32,0,126s30.48,70.79,71.29,70.79\n      c34.45,0,62.01-22.19,68.11-55.21H106c-4.77,15.32-18.02,25.89-34.72,25.89c-23.06,0-39.22-17.7-39.22-41.47\n      C32.07,101.96,47.97,84.26,71.02,84.26z M907.12,112.79l-23.32-3.43c-11.13-1.58-19.08-5.28-19.08-14\n      c0-9.51,10.34-14.26,24.38-14.26c15.37,0,25.18,6.6,27.3,17.43h30.74c-3.45-27.47-24.65-43.58-57.24-43.58\n      c-33.66,0-55.92,17.17-55.92,41.47c0,23.24,14.58,36.72,43.99,40.94l23.32,3.43c11.4,1.58,17.76,6.08,17.76,14.53\n      c0,10.83-11.13,15.32-26.5,15.32c-18.82,0-29.42-7.66-31.01-19.28h-31.27c2.92,26.68,23.85,45.43,62.01,45.43\n      c34.72,0,57.77-15.85,57.77-43.06C950.05,129.43,933.36,116.75,907.12,112.79z M338.68,1.32c-11.66,0-20.41,8.45-20.41,20.07\n      s8.74,20.07,20.41,20.07c11.66,0,20.41-8.45,20.41-20.07S350.34,1.32,338.68,1.32z M805.36,104.34c0-29.58-18.02-49.39-56.18-49.39\n      c-36.04,0-56.18,18.23-60.16,46.23h31.54c1.59-10.83,10.07-19.81,28.09-19.81c16.17,0,24.12,7.13,24.12,15.85\n      c0,11.36-14.58,14.26-32.6,16.11c-24.38,2.64-54.59,11.09-54.59,42.79c0,24.57,18.29,40.41,47.44,40.41\n      c22.79,0,37.1-9.51,44.26-24.57c1.06,13.47,11.13,22.19,25.18,22.19h18.55v-28.26h-15.64V104.34z M774.09,138.68\n      c0,18.23-15.9,31.7-35.25,31.7c-11.93,0-22-5.02-22-15.58c0-13.47,16.17-17.17,31.01-18.75c14.31-1.32,22.26-4.49,26.24-10.57\n      V138.68z M605.28,54.94c-17.76,0-32.6,7.4-43.2,19.81V0h-31.8v194.15h31.27v-17.96c10.6,12.94,25.71,20.6,43.73,20.6\n      c38.16,0,67.05-30.11,67.05-70.79S642.91,54.94,605.28,54.94z M600.51,167.47c-22.79,0-39.49-17.7-39.49-41.47\n      s16.96-41.73,39.75-41.73c23.06,0,39.22,17.7,39.22,41.73C639.99,149.77,623.3,167.47,600.51,167.47z M454.22,54.94\n      c-20.67,0-34.19,8.45-42.14,20.34v-17.7h-31.54v136.56h31.8v-74.22c0-20.87,13.25-35.66,32.86-35.66c18.29,0,29.68,12.94,29.68,31.7\n      v78.19h31.8v-80.56C506.69,79.24,488.94,54.94,454.22,54.94z M1101.64,121.51c0-39.09-28.62-66.56-67.05-66.56\n      c-40.81,0-70.76,30.64-70.76,71.05c0,42.53,32.07,70.79,71.29,70.79c33.13,0,59.1-19.55,65.72-47.28h-33.13\n      c-4.77,12.15-16.43,19.02-32.07,19.02c-20.41,0-35.78-12.68-39.22-34.87h105.21V121.51z M998.28,110.94\n      c5.04-19.02,19.35-28.26,35.78-28.26c18.02,0,31.8,10.3,34.98,28.26H998.28z" }) }));
 const Apple = ({ ...props }) => (jsx("svg", { fill: "currentColor", width: "800px", height: "800px", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M18.71 19.5C17.88 20.74 17 21.95 15.66 21.97C14.32 22 13.89 21.18 12.37 21.18C10.84 21.18 10.37 21.95 9.09997 22C7.78997 22.05 6.79997 20.68 5.95997 19.47C4.24997 17 2.93997 12.45 4.69997 9.39C5.56997 7.87 7.12997 6.91 8.81997 6.88C10.1 6.86 11.32 7.75 12.11 7.75C12.89 7.75 14.37 6.68 15.92 6.84C16.57 6.87 18.39 7.1 19.56 8.82C19.47 8.88 17.39 10.1 17.41 12.63C17.44 15.65 20.06 16.66 20.09 16.67C20.06 16.74 19.67 18.11 18.71 19.5ZM13 3.5C13.73 2.67 14.94 2.04 15.94 2C16.07 3.17 15.6 4.35 14.9 5.19C14.21 6.04 13.07 6.7 11.95 6.61C11.8 5.46 12.36 4.26 13 3.5Z" }) }));
+const Binance = ({ ...props }) => (jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ...props, children: [jsx("circle", { cx: "12", cy: "12", r: "12", fill: "#F3BA2F" }), jsx("path", { fill: "#fff", d: "M12 6.6l1.86 1.86L12 10.32 10.14 8.46 12 6.6zM8.46 10.14 10.32 12l-1.86 1.86L6.6 12l1.86-1.86zm7.08 0L17.4 12l-1.86 1.86L13.68 12l1.86-1.86zM12 13.68l1.86 1.86L12 17.4l-1.86-1.86L12 13.68zM12 10.32 13.68 12 12 13.68 10.32 12 12 10.32z" })] }));
+const Visa = ({ ...props }) => (jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ...props, children: [jsx("rect", { width: "24", height: "24", rx: "4", fill: "#1A1F71" }), jsx("text", { x: "12", y: "15.5", textAnchor: "middle", fontFamily: "Arial, Helvetica, sans-serif", fontStyle: "italic", fontWeight: "700", fontSize: "7", fill: "#fff", children: "VISA" })] }));
+const Mastercard = ({ ...props }) => (jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ...props, children: [jsx("rect", { width: "24", height: "24", rx: "4", fill: "#fff" }), jsx("circle", { cx: "9.5", cy: "12", r: "5.5", fill: "#EB001B" }), jsx("circle", { cx: "14.5", cy: "12", r: "5.5", fill: "#F79E1B", fillOpacity: "0.9" })] }));
 const OtherSocials = ({ ...props }) => {
     const column = {
         position: 'relative',
@@ -167,6 +170,10 @@ var Logos = {
     Openfort,
     Stripe,
     CoinbasePay,
+    Apple,
+    Binance,
+    Visa,
+    Mastercard,
 };
 
 export { OtherSocials, Logos as default, providersLogos };

package/build/assets/logos.js.map

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

package/build/components/Common/CopyToClipboard/CopyIconButton.d.ts

@@ -1,5 +1,7 @@
 interface CopyIconButtonProps {
     value: string;
+    /** Button edge length in px (default 48). The icon scales to half. */
+    size?: number;
 }
-export declare const CopyIconButton: ({ value }: CopyIconButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CopyIconButton: ({ value, size }: CopyIconButtonProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/build/components/Common/CopyToClipboard/CopyIconButton.js

@@ -4,8 +4,8 @@ import styled from '../../../styles/styled/index.js';
 import { CopyIcon } from './CopyIcon.js';
 
 const StyledButton = styled.button `
-  width: 48px;
-  height: 48px;
+  width: ${(p) => p.$size}px;
+  height: ${(p) => p.$size}px;
   padding: 0;
   border: none;
   border-radius: var(--ck-secondary-button-border-radius);
@@ -29,9 +29,9 @@ const StyledButton = styled.button `
     cursor: not-allowed;
   }
 `;
-const CopyIconButton = ({ value }) => {
+const CopyIconButton = ({ value, size = 48 }) => {
     const { copied, copy } = useCopyToClipboard();
-    return (jsx(StyledButton, { onClick: () => copy(value), disabled: !value, type: "button", children: jsx(CopyIcon, { copied: copied, size: 24 }) }));
+    return (jsx(StyledButton, { "$size": size, onClick: () => copy(value), disabled: !value, type: "button", children: jsx(CopyIcon, { copied: copied, size: Math.round(size / 2) }) }));
 };
 
 export { CopyIconButton };

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

@@ -1,5 +1,5 @@
 import type { CustomQRCodeProps } from './types';
-declare function CustomQRCode({ value, image, imageBackground, imagePosition, tooltipMessage }: CustomQRCodeProps): import("react/jsx-runtime").JSX.Element;
+declare function CustomQRCode({ value, image, imageBackground, imageClip, imagePosition, tooltipMessage, }: CustomQRCodeProps): import("react/jsx-runtime").JSX.Element;
 declare namespace CustomQRCode {
     var displayName: string;
 }

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

@@ -5,14 +5,14 @@ import Tooltip from '../Tooltip/index.js';
 import { QRCode } from './QRCode.js';
 import { QRCodeContainer, QRCodeContent, LogoContainer, LogoIcon, QRPlaceholder } from './styles.js';
 
-function CustomQRCode({ value, image, imageBackground, imagePosition = 'center', tooltipMessage }) {
+function CustomQRCode({ value, image, imageBackground, imageClip = true, imagePosition = 'center', tooltipMessage, }) {
     const windowSize = useWindowSize();
     const Logo = windowSize.width > 920 && tooltipMessage ? (jsx(Tooltip, { xOffset: 139, yOffset: 5, delay: 0.1, message: tooltipMessage, children: image })) : (image);
-    return (jsx(QRCodeContainer, { children: jsxs(QRCodeContent, { children: [image && (jsx(LogoContainer, { children: jsx(LogoIcon, { "$wcLogo": imagePosition !== 'center', style: {
+    return (jsx(QRCodeContainer, { children: jsxs(QRCodeContent, { children: [image && (jsx(LogoContainer, { children: jsx(LogoIcon, { "$wcLogo": imagePosition !== 'center', "$clip": imageClip, style: {
                             background: imagePosition === 'center' ? imageBackground : undefined,
                         }, children: Logo }) })), jsx(AnimatePresence, { initial: false, children: value ? (jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0, position: 'absolute', inset: [0, 0] }, transition: {
                             duration: 0.2,
-                        }, children: jsx(QRCode, { uri: value, size: 288, ecl: "M", clearArea: !!(imagePosition === 'center' && image) }) }, value)) : (jsxs(QRPlaceholder, { initial: { opacity: 0.1 }, animate: { opacity: 0.1 }, exit: { opacity: 0, position: 'absolute', inset: [0, 0] }, transition: {
+                        }, children: jsx(QRCode, { uri: value, size: 288, ecl: "H", clearArea: !!(imagePosition === 'center' && image) }) }, value)) : (jsxs(QRPlaceholder, { initial: { opacity: 0.1 }, animate: { opacity: 0.1 }, exit: { opacity: 0, position: 'absolute', inset: [0, 0] }, transition: {
                             duration: 0.2,
                         }, children: [jsx("span", {}), jsx("span", {}), jsx("span", {}), jsx("div", {})] })) })] }) }));
 }

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

@@ -4,4 +4,5 @@ export declare const QRPlaceholder: 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 LogoIcon: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, any, {
     $wcLogo?: boolean;
+    $clip?: boolean;
 }, never>;

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

@@ -12,7 +12,7 @@ const QRCodeContainer = styled(motion.div) `
   align-items: center;
   justify-content: center;
   margin: 1px 0 2px;
-  border-radius: var(--ck-qr-border-radius, 24px);
+  border-radius: var(--ck-qr-border-radius, 48px);
   background: var(--ck-qr-background, transparent);
   box-shadow: 0 0 0 1px var(--ck-qr-border-color);
   backface-visibility: hidden;
@@ -25,7 +25,7 @@ const QRCodeContainer = styled(motion.div) `
 `;
 const QRCodeContent = styled(motion.div) `
   position: absolute;
-  inset: 13px;
+  inset: 16px;
   svg {
     width: 100% !important;
     height: auto !important;
@@ -119,7 +119,7 @@ const LogoIcon = styled(motion.div) `
   z-index: 6;
   position: absolute;
   left: 50%;
-  overflow: hidden;
+  overflow: ${(props) => (props.$clip === false ? 'visible' : 'hidden')};
 
   transform: translate(-50%, -50%) scale(0.9999); // Shifting fix
 
@@ -138,7 +138,7 @@ const LogoIcon = styled(motion.div) `
     : css `
           width: 28%;
           height: 28%;
-          border-radius: 17px;
+          border-radius: ${props.$clip === false ? '50%' : '17px'};
           &:before {
             pointer-events: none;
             z-index: 2;

package/build/components/Common/CustomQRCode/types.d.ts

@@ -3,6 +3,8 @@ export type CustomQRCodeProps = {
     value?: string;
     image?: React.ReactNode;
     imageBackground?: string;
+    /** When false, the center logo isn't clipped to the rounded square (lets a badge overflow). Default true. */
+    imageClip?: boolean;
     imagePosition?: 'center' | 'bottom right';
     tooltipMessage?: React.ReactNode | string;
 };

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

@@ -279,8 +279,11 @@ const ControllerContainer = styled(motion.div) `
 `;
 const InnerContainer = styled(motion.div) `
   position: relative;
-  overflow: hidden;
+  overflow-x: hidden;
+  overflow-y: auto;
   height: var(--height);
+  /* Cap at the viewport so a tall page scrolls instead of running off-screen. */
+  max-height: 88vh;
   transition: 0.2s ease height;
   @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
     transition: 0ms height cubic-bezier(0.15, 1.15, 0.6, 1);

package/build/components/Common/Modal/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/ConnectModal/index.js

@@ -10,6 +10,7 @@ import { routes } from '../Openfort/types.js';
 import { useOpenfort } from '../Openfort/useOpenfort.js';
 import About from '../Pages/About/index.js';
 import { AssetInventory } from '../Pages/AssetInventory/index.js';
+import { SolanaAssetInventory } from '../Pages/AssetInventory/SolanaAssetInventory.js';
 import Buy from '../Pages/Buy/index.js';
 import BuyComplete from '../Pages/BuyComplete/index.js';
 import BuyProcessing from '../Pages/BuyProcessing/index.js';
@@ -20,6 +21,10 @@ import ConnectedSuccess from '../Pages/ConnectedSuccess/index.js';
 import Connectors from '../Pages/Connectors/index.js';
 import CreateGuestUserPage from '../Pages/CreateGuestUserPage/index.js';
 import CreateWallet from '../Pages/CreateWallet/index.js';
+import Deposit from '../Pages/Deposit/index.js';
+import DepositCex from '../Pages/DepositCex/index.js';
+import DepositCrypto from '../Pages/DepositCrypto/index.js';
+import DepositWallet from '../Pages/DepositWallet/index.js';
 import DownloadApp from '../Pages/DownloadApp/index.js';
 import EmailLogin from '../Pages/EmailLogin/index.js';
 import EmailOTP from '../Pages/EmailOTP/index.js';
@@ -43,7 +48,9 @@ import RemoveLinkedProvider from '../Pages/RemoveLinkedProvider/index.js';
 import SelectToken from '../Pages/SelectToken/index.js';
 import SelectWalletToRecover from '../Pages/SelectWalletToRecover/index.js';
 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 SocialProviders from '../Pages/SocialProviders/index.js';
 import ConnectUsing from './ConnectUsing.js';
 import ConnectWithMobile from './ConnectWithMobile.js';
@@ -90,6 +97,10 @@ function buildSharedPages() {
         buyProviderSelect: jsx(BuyProviderSelect, {}),
         receive: jsx(Receive, {}),
         buy: jsx(Buy, {}),
+        deposit: jsx(Deposit, {}),
+        depositCrypto: jsx(DepositCrypto, {}),
+        depositWallet: jsx(DepositWallet, {}),
+        depositCex: jsx(DepositCex, {}),
         exportKey: jsx(ExportKey, {}),
         walletOverview: jsx(Connected, {}),
     };
@@ -109,9 +120,10 @@ const CHAIN_PREFIXED_PAGES = {
         'sol:connected': jsx(Connected, {}),
         'sol:createWallet': jsx(CreateWallet, {}),
         'sol:recoverWallet': jsx(RecoverPage, {}),
-        // 'sol:send': <SolanaSend />,
-        // 'sol:sendConfirmation': <SolanaSendConfirmation />,
+        'sol:send': jsx(SolanaSend, {}),
+        'sol:sendConfirmation': jsx(SolanaSendConfirmation, {}),
         'sol:receive': jsx(Receive, {}),
+        'sol:assetInventory': jsx(SolanaAssetInventory, {}),
         // 'sol:wallets': <SolanaWallets />,
     },
 };

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

@@ -40,7 +40,10 @@ const OpenfortProvider = ({ children, uiConfig, onConnect, onDisconnect, debugMo
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
     const bridge = useContext(OpenfortEthereumBridgeContext);
     const hasWagmi = !!bridge;
-    const hasExternalWallets = (_b = (_a = bridge === null || bridge === void 0 ? void 0 : bridge.connectors) === null || _a === void 0 ? void 0 : _a.some((c) => c.id === 'walletConnect')) !== null && _b !== void 0 ? _b : false;
+    // External wallet sign-in is available via any connector — WalletConnect (QR)
+    // or an injected/MetaMask browser extension — not WalletConnect alone.
+    const EXTERNAL_WALLET_CONNECTOR_IDS = ['walletConnect', 'injected', 'metaMask', 'metaMaskSDK', 'io.metamask'];
+    const hasExternalWallets = (_b = (_a = bridge === null || bridge === void 0 ? void 0 : bridge.connectors) === null || _a === void 0 ? void 0 : _a.some((c) => EXTERNAL_WALLET_CONNECTOR_IDS.includes(c.id))) !== null && _b !== void 0 ? _b : false;
     const hasSolana = !!(walletConfig === null || walletConfig === void 0 ? void 0 : walletConfig.solana);
     // Only allow for mounting OpenfortProvider once, so we avoid weird global
     // state collisions.

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/types.d.ts

@@ -44,6 +44,10 @@ export declare const routes: {
     readonly SEND_TOKEN_SELECT: "sendTokenSelect";
     readonly SEND_CONFIRMATION: "sendConfirmation";
     readonly RECEIVE: "receive";
+    readonly DEPOSIT: "deposit";
+    readonly DEPOSIT_CRYPTO: "depositCrypto";
+    readonly DEPOSIT_WALLET: "depositWallet";
+    readonly DEPOSIT_CEX: "depositCex";
     readonly BUY: "buy";
     readonly BUY_TOKEN_SELECT: "buyTokenSelect";
     readonly BUY_SELECT_PROVIDER: "buySelectProvider";
@@ -294,6 +298,17 @@ export type ConnectUIOptions = {
     buyWithCardUrl?: string;
     buyFromExchangeUrl?: string;
     buyTroubleshootingUrl?: string;
+    /**
+     * Base URL of the openfort-funding backend (e.g. `https://funding.openfort.io`).
+     * Powers the Deposit hub's crypto/CEX rails (session API). When omitted, those
+     * rails are unavailable and the network layer is a no-op.
+     *
+     * TODO(openfort-funding-backend): default this from the platform config once the
+     * backend ships, so integrators don't have to set it manually.
+     */
+    fundingBaseUrl?: string;
+    /** Deposit-hub funding options (destination chain/token for incoming deposits). */
+    funding?: FundingUIOptions;
     phoneConfig?: PhoneConfig;
     customPageComponents?: {
         [key in CustomizableRoutes]?: React.ReactElement;
@@ -303,6 +318,73 @@ type WalletRecoveryOptionsExtended = {
     allowedMethods: RecoveryMethod[];
     defaultMethod: RecoveryMethod;
 };
+/**
+ * A funding method shown in the Deposit hub. Use `funding.methods` to choose
+ * which appear and in what order — like `authProviders` for the auth modal.
+ */
+export declare enum FundingMethod {
+    /** Apple Pay (fiat onramp; mobile only). */
+    APPLE_PAY = "applePay",
+    /** Card (fiat onramp). */
+    CARD = "card",
+    /** Transfer from wallet — prefilled wallet deeplinks. */
+    WALLET = "wallet",
+    /** Transfer from address — cross-chain deposit address + QR. */
+    ADDRESS = "crypto",
+    /** Transfer from Exchange — Coinbase / Binance on-ramp links + deposit address. */
+    EXCHANGE = "cex"
+}
+/** Where Deposit-hub funding lands. Defaults to USDC on Base when omitted. */
+export type FundingUIOptions = {
+    /**
+     * Destination CAIP-2 chain id for deposits.
+     * @default "eip155:8453" (Base)
+     */
+    targetChain?: string;
+    /**
+     * Destination token contract on the target chain (or the zero address for native).
+     * @default USDC on Base
+     */
+    targetCurrency?: string;
+    /**
+     * Destination wallet that receives the deposit. Optional integrator override;
+     * when unset, deposits land on the active embedded wallet for the target chain.
+     */
+    targetAddress?: string;
+    /**
+     * Which funding methods the Deposit hub shows, and in what order. Omit to show
+     * all available methods (Apple Pay first on mobile). Mirrors `authProviders`.
+     * @example [FundingMethod.WALLET, FundingMethod.ADDRESS]
+     */
+    methods?: FundingMethod[];
+    /**
+     * Allowlist of source chains shown in the crypto/exchange pickers, by CAIP-2 id,
+     * in this order. Omit for the common defaults (Arbitrum, Base, BNB, Ethereum,
+     * Monad, Optimism, Polygon, Solana). Selections the rail doesn't support are
+     * skipped.
+     * @example ['eip155:8453', 'eip155:42161', 'eip155:137']
+     */
+    sourceChains?: string[];
+    /**
+     * Allowlist of source currencies shown, by symbol (case-insensitive). The
+     * sentinel `'native'` matches each chain's native currency (ETH, SOL, POL, …).
+     * Applied across every chain; chains left with none are hidden. Omit for the
+     * default `['native', 'USDC', 'USDT']`.
+     * @example ['native', 'USDC', 'USDT']
+     */
+    sourceCurrencies?: string[];
+    /**
+     * URL of the standalone deposit "send" page. On mobile, wallet open-dApp
+     * deeplinks wrap this URL with the deposit address, chain, token and amount so
+     * the user confirms the transfer in their wallet's in-app browser. Defaults to
+     * the Openfort-hosted page (`https://deposit.openfort.io`); override to self-host,
+     * or set to an empty string to hide one-tap wallet deeplinks (the deposit-address
+     * / QR path still works).
+     * @default "https://deposit.openfort.io"
+     * @example "https://yourapp.com/deposit.html"
+     */
+    depositPageUrl?: string;
+};
 export type CustomizableRoutes = typeof routes.CONNECTED;
 export type OpenfortUIOptionsExtended = {
     appName?: string;
@@ -337,6 +419,10 @@ export type OpenfortUIOptionsExtended = {
     buyWithCardUrl?: string;
     buyFromExchangeUrl?: string;
     buyTroubleshootingUrl?: string;
+    /** Base URL of the openfort-funding backend. See {@link ConnectUIOptions.fundingBaseUrl}. */
+    fundingBaseUrl?: string;
+    /** Deposit-hub funding options. See {@link ConnectUIOptions.funding}. */
+    funding?: FundingUIOptions;
     walletRecovery: WalletRecoveryOptionsExtended;
     phoneConfig?: PhoneConfig;
     customPageComponents?: {

package/build/components/Openfort/types.js

@@ -34,6 +34,10 @@ const routes = {
     SEND_TOKEN_SELECT: 'sendTokenSelect',
     SEND_CONFIRMATION: 'sendConfirmation',
     RECEIVE: 'receive',
+    DEPOSIT: 'deposit',
+    DEPOSIT_CRYPTO: 'depositCrypto',
+    DEPOSIT_WALLET: 'depositWallet',
+    DEPOSIT_CEX: 'depositCex',
     BUY: 'buy',
     BUY_TOKEN_SELECT: 'buyTokenSelect',
     BUY_SELECT_PROVIDER: 'buySelectProvider',
@@ -97,6 +101,23 @@ var LinkWalletOnSignUpOption;
     LinkWalletOnSignUpOption["REQUIRED"] = "required";
     LinkWalletOnSignUpOption["DISABLED"] = "disabled";
 })(LinkWalletOnSignUpOption || (LinkWalletOnSignUpOption = {}));
+/**
+ * A funding method shown in the Deposit hub. Use `funding.methods` to choose
+ * which appear and in what order — like `authProviders` for the auth modal.
+ */
+var FundingMethod;
+(function (FundingMethod) {
+    /** Apple Pay (fiat onramp; mobile only). */
+    FundingMethod["APPLE_PAY"] = "applePay";
+    /** Card (fiat onramp). */
+    FundingMethod["CARD"] = "card";
+    /** Transfer from wallet — prefilled wallet deeplinks. */
+    FundingMethod["WALLET"] = "wallet";
+    /** Transfer from address — cross-chain deposit address + QR. */
+    FundingMethod["ADDRESS"] = "crypto";
+    /** Transfer from Exchange — Coinbase / Binance on-ramp links + deposit address. */
+    FundingMethod["EXCHANGE"] = "cex";
+})(FundingMethod || (FundingMethod = {}));
 const defaultSendFormState = {
     recipient: '',
     amount: '',
@@ -115,5 +136,5 @@ const defaultBuyFormState = {
     providerId: 'coinbase',
 };
 
-export { LinkWalletOnSignUpOption, UIAuthProvider, defaultBuyFormState, defaultSendFormState, notStoredInHistoryRoutes, routes, socialProviders };
+export { FundingMethod, LinkWalletOnSignUpOption, UIAuthProvider, defaultBuyFormState, defaultSendFormState, notStoredInHistoryRoutes, routes, socialProviders };
 //# sourceMappingURL=types.js.map

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/AssetInventory/SolanaAssetInventory.d.ts

@@ -0,0 +1,6 @@
+/**
+ * SVM counterpart of {@link AssetInventory}: lists the connected Solana wallet's
+ * native SOL and SPL token holdings (e.g. USDC). Reached by tapping the balance on
+ * the Solana connected page.
+ */
+export declare const SolanaAssetInventory: () => import("react/jsx-runtime").JSX.Element;

package/build/components/Pages/AssetInventory/SolanaAssetInventory.js

@@ -0,0 +1,42 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useEffect, useState } from 'react';
+import { formatUnits } from 'viem';
+import { TOKEN_LOGO, symbolToColor } from '../../../constants/logos.js';
+import { useSolanaWalletAssets } from '../../../solana/hooks/useSolanaWalletAssets.js';
+import { ModalHeading } from '../../Common/Modal/styles.js';
+import { routes } from '../../Openfort/types.js';
+import { useOpenfort } from '../../Openfort/useOpenfort.js';
+import { SelectTokenContent, EmptyState, ContentWrapper, TokenList, TokenContainer, TokenLeftGroup, TokenInfo, TokenSymbol, TokenName, TokenLogoArea, TokenLogoImg, TokenLogoFallback } from '../SelectToken/styles.js';
+
+const ZERO = BigInt(0);
+function SolanaTokenLogo({ symbol }) {
+    var _a;
+    const [imgError, setImgError] = useState(false);
+    const url = (_a = TOKEN_LOGO[symbol.toUpperCase()]) !== null && _a !== void 0 ? _a : null;
+    return (jsx(TokenLogoArea, { children: url && !imgError ? (jsx(TokenLogoImg, { src: url, alt: symbol, onError: () => setImgError(true) })) : (jsx(TokenLogoFallback, { "$bg": symbolToColor(symbol), children: symbol.charAt(0).toUpperCase() })) }));
+}
+/**
+ * SVM counterpart of {@link AssetInventory}: lists the connected Solana wallet's
+ * native SOL and SPL token holdings (e.g. USDC). Reached by tapping the balance on
+ * the Solana connected page.
+ */
+const SolanaAssetInventory = () => {
+    const { data, isLoading } = useSolanaWalletAssets();
+    const { triggerResize } = useOpenfort();
+    useEffect(() => {
+        if (!isLoading)
+            triggerResize();
+    }, [isLoading, triggerResize]);
+    const tokens = (data !== null && data !== void 0 ? data : []).filter((t) => t.amount > ZERO);
+    if (isLoading) {
+        return (jsxs(SelectTokenContent, { onBack: routes.SOL_CONNECTED, children: [jsx(ModalHeading, { children: "Your assets" }), jsx(EmptyState, { children: "Loading balances..." })] }));
+    }
+    return (jsxs(SelectTokenContent, { onBack: routes.SOL_CONNECTED, children: [jsx(ModalHeading, { children: "Your assets" }), jsx(ContentWrapper, { children: jsx(TokenList, { children: tokens.length > 0 ? (tokens.map((token) => {
+                        const amount = Number(formatUnits(token.amount, token.decimals));
+                        const balanceStr = `${amount.toLocaleString('en-US', { maximumFractionDigits: 4 })} ${token.symbol}`;
+                        return (jsx(TokenContainer, { children: jsxs(TokenLeftGroup, { children: [jsx(SolanaTokenLogo, { symbol: token.symbol }), jsxs(TokenInfo, { style: { textAlign: 'left' }, children: [jsx(TokenSymbol, { children: token.name }), jsx(TokenName, { children: balanceStr })] })] }) }, token.mint));
+                    })) : (jsx(EmptyState, { children: "No assets found" })) }) })] }, "sol-assets"));
+};
+
+export { SolanaAssetInventory };
+//# sourceMappingURL=SolanaAssetInventory.js.map

package/build/components/Pages/AssetInventory/SolanaAssetInventory.js.map

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

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

@@ -77,11 +77,12 @@ const Buy = () => {
         setRoute(routes.BUY_SELECT_PROVIDER);
     };
     const handleBack = () => {
-        setRoute(routes.CONNECTED);
+        // Card/Apple Pay is reached via the Add funds hub — back returns there.
+        setRoute(routes.DEPOSIT);
     };
     const isPresetSelected = (value) => pressedPreset === value;
     const step1Disabled = fiatAmount === null || fiatAmount <= 0;
-    return (jsxs(PageContent, { onBack: handleBack, children: [jsx(ModalHeading, { children: locales.buyScreen_heading }), jsx(ModalBody, { children: locales.buyScreen_subheading }), jsxs(Section, { children: [jsx(SectionLabel, { children: "Amount" }), jsxs(AmountCard, { children: [jsx(CurrencySymbol, { children: currencySymbol }), jsx(AmountInput, { value: buyForm.amount, onChange: handleAmountChange, onBlur: handleAmountBlur, placeholder: "0.00", inputMode: "decimal", autoComplete: "off" })] }), jsx(PresetList, { children: amountPresets.map((preset) => (jsx(PresetButton, { type: "button", onClick: () => handlePresetClick(preset), "$active": isPresetSelected(preset), children: currencyFormatter.format(preset) }, preset))) })] }), jsxs(Section, { children: [jsx(SectionLabel, { children: "Asset" }), jsxs(SelectorButton, { type: "button", onClick: handleOpenTokenSelector, children: [jsxs(SelectorContent, { children: [jsx(SelectorTitle, { children: tokenSymbol || 'Select asset' }), jsx(SelectorSubtitle, { children: tokenName })] }), jsx(SelectorRight, { children: jsx(Arrow, { width: "13", height: "12", viewBox: "0 0 13 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx(ArrowChevron, { stroke: "currentColor", d: "M7.51431 1.5L11.757 5.74264M7.5 10.4858L11.7426 6.24314", strokeWidth: "2", strokeLinecap: "round" }) }) })] })] }), jsx(ContinueButtonWrapper, { children: jsx(Button, { variant: "primary", onClick: handleContinue, disabled: step1Disabled, children: "Continue" }) })] }));
+    return (jsxs(PageContent, { onBack: handleBack, children: [jsx(ModalHeading, { children: locales.buyScreen_heading }), jsx(ModalBody, { children: locales.buyScreen_subheading }), jsxs(Section, { children: [jsx(SectionLabel, { children: "Amount" }), jsxs(AmountCard, { children: [jsx(CurrencySymbol, { children: currencySymbol }), jsx(AmountInput, { value: buyForm.amount, onChange: handleAmountChange, onBlur: handleAmountBlur, placeholder: "0.00", inputMode: "decimal", autoComplete: "off" })] }), jsx(PresetList, { children: amountPresets.map((preset) => (jsx(PresetButton, { type: "button", onClick: () => handlePresetClick(preset), "$active": isPresetSelected(preset), children: currencyFormatter.format(preset) }, preset))) })] }), jsxs(Section, { children: [jsx(SectionLabel, { children: "Currency" }), jsxs(SelectorButton, { type: "button", onClick: handleOpenTokenSelector, children: [jsxs(SelectorContent, { children: [jsx(SelectorTitle, { children: tokenSymbol || 'Select currency' }), jsx(SelectorSubtitle, { children: tokenName })] }), jsx(SelectorRight, { children: jsx(Arrow, { width: "13", height: "12", viewBox: "0 0 13 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx(ArrowChevron, { stroke: "currentColor", d: "M7.51431 1.5L11.757 5.74264M7.5 10.4858L11.7426 6.24314", strokeWidth: "2", strokeLinecap: "round" }) }) })] })] }), jsx(ContinueButtonWrapper, { children: jsx(Button, { variant: "primary", onClick: handleContinue, disabled: step1Disabled, children: "Continue" }) })] }));
 };
 
 export { Buy as default };

package/build/components/Pages/Buy/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/BuySelectProvider/index.js

@@ -147,7 +147,7 @@ const BuySelectProvider = () => {
             .filter((n) => Number.isFinite(n));
         return amounts.length > 0 ? Math.max(...amounts) : null;
     }, [quotes]);
-    return (jsxs(PageContent, { onBack: handleBack, children: [jsx(ModalHeading, { children: "Select Provider" }), jsx(ModalBody, { children: formattedFiat && `Buying ${formattedFiat} of ${tokenSymbol}` }), jsx(ModalBody, { style: { marginTop: 4, fontSize: '12px', opacity: 0.7 }, children: isLoadingQuote ? 'Loading quotes...' : `Quotes refresh in ${quoteRefreshTimer}s` }), jsx(ProviderList, { children: providers.map((provider) => {
+    return (jsxs(PageContent, { onBack: handleBack, children: [jsx(ModalHeading, { children: "Select Provider" }), jsxs("div", { style: { textAlign: 'center', margin: '6px 0 16px' }, children: [jsx("div", { style: { fontSize: 13, color: 'var(--ck-body-color-muted)' }, children: "You pay" }), jsx("div", { style: { fontSize: 30, fontWeight: 700, lineHeight: 1.1, color: 'var(--ck-body-color)' }, children: formattedFiat || '—' }), targetDestinationAmount !== null && (jsxs("div", { style: { fontSize: 14, fontWeight: 500, color: 'var(--ck-body-color-muted)', marginTop: 4 }, children: ["\u2248 ", targetDestinationAmount.toFixed(2), " ", tokenSymbol] }))] }), jsx(ModalBody, { style: { marginTop: 0, fontSize: '12px', opacity: 0.7 }, children: isLoadingQuote ? 'Loading quotes…' : `Quotes refresh in ${quoteRefreshTimer}s` }), jsx(ProviderList, { children: providers.map((provider) => {
                     var _a, _b, _c, _d, _e, _f;
                     // Get provider-specific quote data
                     const providerQuote = quotes[provider.id];