@daimo/pay 1.1.5 → 1.3.0

package/build/index.d.ts

@@ -1,12 +1,10 @@
 import React$1, { ReactNode } from 'react';
 export { version } from '../package.json';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as _daimo_common from '@daimo/common';
-import { DepositAddressPaymentOptionMetadata, PlatformType, ExternalPaymentOptionMetadata, DaimoPayOrder, DaimoPayTokenAmount, ExternalPaymentOptions, DepositAddressPaymentOptions, DepositAddressPaymentOptionData, SolanaPublicKey, PaymentStartedEvent, PaymentCompletedEvent, PaymentBouncedEvent } from '@daimo/common';
+import { DaimoPayOrderMode, DepositAddressPaymentOptionMetadata, PlatformType, ExternalPaymentOptionMetadata, WalletPaymentOption, DaimoPayOrder, DaimoPayTokenAmount, ExternalPaymentOptions, DepositAddressPaymentOptions, DepositAddressPaymentOptionData, SolanaPublicKey, DaimoPayUserMetadata, PaymentStartedEvent, PaymentCompletedEvent, PaymentBouncedEvent, DaimoPayIntentStatus } from '@daimo/common';
 import { Address, Hex } from 'viem';
 import { AppRouter } from '@daimo/pay-api';
 import { CreateTRPCClient } from '@trpc/client';
-import * as abitype from 'abitype';
 import { WalletName } from '@solana/wallet-adapter-base';
 import { CreateConfigParameters } from '@wagmi/core';
 import { CreateConnectorFn } from 'wagmi';
@@ -71,8 +69,6 @@ type DaimoPayContextOptions = {
 type DaimoPayModalOptions = {
     closeOnSuccess?: boolean;
 };
-/** Payment status. See webhooks and React useDaimoPayStatus() hook. */
-type PaymentStatus = "payment_pending" | "payment_started" | "payment_completed" | "payment_bounced";
 /** Additional payment options. Onchain payments are always enabled. */
 type PaymentOption = "Daimo" | "Coinbase" | "Binance" | "RampNetwork";
 
@@ -84,10 +80,9 @@ type types_d_DaimoPayModalOptions = DaimoPayModalOptions;
 type types_d_Languages = Languages;
 type types_d_Mode = Mode;
 type types_d_PaymentOption = PaymentOption;
-type types_d_PaymentStatus = PaymentStatus;
 type types_d_Theme = Theme;
 declare namespace types_d {
-  export type { types_d_All as All, types_d_CustomAvatarProps as CustomAvatarProps, types_d_CustomTheme as CustomTheme, types_d_DaimoPayContextOptions as DaimoPayContextOptions, types_d_DaimoPayModalOptions as DaimoPayModalOptions, types_d_Languages as Languages, types_d_Mode as Mode, types_d_PaymentOption as PaymentOption, types_d_PaymentStatus as PaymentStatus, types_d_Theme as Theme };
+  export type { types_d_All as All, types_d_CustomAvatarProps as CustomAvatarProps, types_d_CustomTheme as CustomTheme, types_d_DaimoPayContextOptions as DaimoPayContextOptions, types_d_DaimoPayModalOptions as DaimoPayModalOptions, types_d_Languages as Languages, types_d_Mode as Mode, types_d_PaymentOption as PaymentOption, types_d_Theme as Theme };
 }
 
 type useConnectCallbackProps = {
@@ -100,68 +95,39 @@ type useConnectCallbackProps = {
 
 type TrpcClient = CreateTRPCClient<AppRouter>;
 
-declare function useDepositAddressOptions({ trpc, usdRequired, }: {
+declare function useDepositAddressOptions({ trpc, usdRequired, mode, }: {
     trpc: TrpcClient;
-    usdRequired: number;
+    usdRequired: number | undefined;
+    mode: DaimoPayOrderMode | undefined;
 }): {
     options: DepositAddressPaymentOptionMetadata[];
     loading: boolean;
 };
 
-declare function useExternalPaymentOptions({ trpc, filterIds, usdRequired, platform, }: {
+declare function useExternalPaymentOptions({ trpc, filterIds, platform, usdRequired, mode, }: {
     trpc: TrpcClient;
     filterIds: string[] | undefined;
-    usdRequired: number | undefined;
     platform: PlatformType | undefined;
+    usdRequired: number | undefined;
+    mode: DaimoPayOrderMode | undefined;
 }): {
     options: ExternalPaymentOptionMetadata[];
     loading: boolean;
 };
 
-type SolanaPaymentOption = Awaited<ReturnType<TrpcClient["getSolanaPaymentOptions"]["query"]>>[0];
-declare function useSolanaPaymentOptions({ trpc, address, usdRequired, }: {
+/** Wallet payment options. User picks one. */
+declare function useSolanaPaymentOptions({ trpc, address, usdRequired, isDepositFlow, }: {
     trpc: TrpcClient;
     address: string | undefined;
     usdRequired: number | undefined;
+    isDepositFlow: boolean;
 }): {
-    options: {
-        required: {
-            token: {
-                symbol: string;
-                chainId: number;
-                token: abitype.Address | _daimo_common.SolanaPublicKey;
-                usd: number;
-                displayDecimals: number;
-                decimals: number;
-                name?: string;
-                fiatSymbol?: string;
-                logoURI?: string;
-            };
-            amount: _daimo_common.BigIntStr;
-            usd: number;
-        };
-        balance: {
-            token: {
-                symbol: string;
-                chainId: number;
-                token: abitype.Address | _daimo_common.SolanaPublicKey;
-                usd: number;
-                displayDecimals: number;
-                decimals: number;
-                name?: string;
-                fiatSymbol?: string;
-                logoURI?: string;
-            };
-            amount: _daimo_common.BigIntStr;
-            usd: number;
-        };
-    }[] | null;
+    options: WalletPaymentOption[] | null;
     isLoading: boolean;
 };
 
 /** Wallet payment options. User picks one. */
-type WalletPaymentOption = Awaited<ReturnType<TrpcClient["getWalletPaymentOptions"]["query"]>>[0];
-declare function useWalletPaymentOptions({ trpc, address, usdRequired, destChainId, preferredChains, preferredTokens, log, }: {
+declare function useWalletPaymentOptions({ trpc, address, usdRequired, destChainId, preferredChains, preferredTokens, isDepositFlow, log, }: {
     trpc: TrpcClient;
     address: string | undefined;
     usdRequired: number | undefined;
@@ -171,55 +137,10 @@ declare function useWalletPaymentOptions({ trpc, address, usdRequired, destChain
         chain: number;
         address: string;
     }[] | undefined;
+    isDepositFlow: boolean;
     log: (msg: string) => void;
 }): {
-    options: {
-        fees: {
-            token: {
-                symbol: string;
-                chainId: number;
-                token: abitype.Address | _daimo_common.SolanaPublicKey;
-                usd: number;
-                displayDecimals: number;
-                decimals: number;
-                name?: string;
-                fiatSymbol?: string;
-                logoURI?: string;
-            };
-            amount: _daimo_common.BigIntStr;
-            usd: number;
-        };
-        required: {
-            token: {
-                symbol: string;
-                chainId: number;
-                token: abitype.Address | _daimo_common.SolanaPublicKey;
-                usd: number;
-                displayDecimals: number;
-                decimals: number;
-                name?: string;
-                fiatSymbol?: string;
-                logoURI?: string;
-            };
-            amount: _daimo_common.BigIntStr;
-            usd: number;
-        };
-        balance: {
-            token: {
-                symbol: string;
-                chainId: number;
-                token: abitype.Address | _daimo_common.SolanaPublicKey;
-                usd: number;
-                displayDecimals: number;
-                decimals: number;
-                name?: string;
-                fiatSymbol?: string;
-                logoURI?: string;
-            };
-            amount: _daimo_common.BigIntStr;
-            usd: number;
-        };
-    }[] | null;
+    options: WalletPaymentOption[] | null;
     isLoading: boolean;
 };
 
@@ -231,14 +152,15 @@ interface PayParams {
     toChain: number;
     /** The destination token to send. */
     toToken: Address;
-    /** The amount of the token to send. */
-    toUnits: string;
+    /**
+     * The amount of the token to send.
+     * If not provided, the user will be prompted to enter an amount.
+     */
+    toUnits?: string;
     /** The final address to transfer to or contract to call. */
     toAddress: Address;
     /** Calldata for final call, or empty data for transfer. */
     toCallData?: Hex;
-    /** Let the user edit the amount to send. */
-    isAmountEditable: boolean;
     /** The intent verb, such as Pay, Deposit, or Purchase. Default: Pay */
     intent?: string;
     /** Payment options. By default, all are enabled. */
@@ -250,13 +172,19 @@ interface PayParams {
         chain: number;
         address: Address;
     }[];
+    /** External ID. E.g. a correlation ID. */
+    externalId?: string;
+    /** Developer metadata. E.g. correlation ID. */
+    metadata?: DaimoPayUserMetadata;
 }
 /** Creates (or loads) a payment and manages the corresponding modal. */
 interface PaymentState {
     setPayId: (id: string | undefined) => void;
     setPayParams: (payParams: PayParams | undefined) => void;
     payParams: PayParams | undefined;
+    generatePreviewOrder: (payParams: PayParams) => void;
     daimoPayOrder: DaimoPayOrder | undefined;
+    isDepositFlow: boolean;
     modalOptions: DaimoPayModalOptions;
     setModalOptions: (modalOptions: DaimoPayModalOptions) => void;
     paymentWaitingMessage: string | undefined;
@@ -266,13 +194,15 @@ interface PaymentState {
     depositAddressOptions: ReturnType<typeof useDepositAddressOptions>;
     selectedExternalOption: ExternalPaymentOptionMetadata | undefined;
     selectedTokenOption: WalletPaymentOption | undefined;
-    selectedSolanaTokenOption: SolanaPaymentOption | undefined;
+    selectedSolanaTokenOption: WalletPaymentOption | undefined;
     selectedDepositAddressOption: DepositAddressPaymentOptionMetadata | undefined;
-    setSelectedDepositAddressOption: (option: DepositAddressPaymentOptionMetadata | undefined) => void;
+    getOrderUsdLimit: () => number;
+    setPaymentWaitingMessage: (message: string | undefined) => void;
     setSelectedExternalOption: (option: ExternalPaymentOptionMetadata | undefined) => void;
     setSelectedTokenOption: (option: WalletPaymentOption | undefined) => void;
-    setSelectedSolanaTokenOption: (option: SolanaPaymentOption | undefined) => void;
-    setChosenUsd: (amount: number) => void;
+    setSelectedSolanaTokenOption: (option: WalletPaymentOption | undefined) => void;
+    setSelectedDepositAddressOption: (option: DepositAddressPaymentOptionMetadata | undefined) => void;
+    setChosenUsd: (usd: number) => void;
     payWithToken: (tokenAmount: DaimoPayTokenAmount) => Promise<void>;
     payWithExternal: (option: ExternalPaymentOptions) => Promise<string>;
     payWithDepositAddress: (option: DepositAddressPaymentOptions) => Promise<DepositAddressPaymentOptionData | null>;
@@ -290,7 +220,10 @@ type SolanaWalletName = WalletName<string>;
 declare enum ROUTES {
     SELECT_METHOD = "daimoPaySelectMethod",
     SELECT_TOKEN = "daimoPaySelectToken",
-    WAITING_OTHER = "daimoPayWaitingOther",
+    SELECT_AMOUNT = "daimoPaySelectAmount",
+    SELECT_EXTERNAL_AMOUNT = "daimoPaySelectExternalAmount",
+    SELECT_DEPOSIT_ADDRESS_AMOUNT = "daimoPaySelectDepositAddressAmount",
+    WAITING_EXTERNAL = "daimoPayWaitingExternal",
     SELECT_DEPOSIT_ADDRESS_CHAIN = "daimoPaySelectDepositAddressChain",
     WAITING_DEPOSIT_ADDRESS = "daimoPayWaitingDepositAddress",
     PAY_WITH_TOKEN = "daimoPayPayWithToken",
@@ -298,6 +231,7 @@ declare enum ROUTES {
     SOLANA_CONNECT = "daimoPaySolanaConnect",
     SOLANA_CONNECTOR = "daimoPaySolanaConnector",
     SOLANA_SELECT_TOKEN = "daimoPaySolanaSelectToken",
+    SOLANA_SELECT_AMOUNT = "daimoPaySolanaSelectAmount",
     SOLANA_PAY_WITH_TOKEN = "daimoPaySolanaPayWithToken",
     ONBOARDING = "onboarding",
     ABOUT = "about",
@@ -323,9 +257,9 @@ type ContextValue = {
     lang: Languages;
     setLang: React$1.Dispatch<React$1.SetStateAction<Languages>>;
     open: boolean;
-    setOpen: React$1.Dispatch<React$1.SetStateAction<boolean>>;
+    setOpen: (open: boolean, meta?: Record<string, any>) => void;
     route: string;
-    setRoute: React$1.Dispatch<React$1.SetStateAction<ROUTES>>;
+    setRoute: (route: ROUTES, data?: Record<string, any>) => void;
     connector: Connector;
     setConnector: React$1.Dispatch<React$1.SetStateAction<Connector>>;
     errorMessage: Error;
@@ -334,6 +268,8 @@ type ContextValue = {
     displayError: (message: string | React$1.ReactNode | null, code?: any) => void;
     resize: number;
     triggerResize: () => void;
+    /** Session ID. */
+    sessionId: string;
     /** Chosen Solana wallet, eg Phantom.*/
     solanaConnector: SolanaWalletName | undefined;
     setSolanaConnector: React$1.Dispatch<React$1.SetStateAction<SolanaWalletName | undefined>>;
@@ -406,12 +342,9 @@ type PayButtonPaymentProps = {
     toToken: Address;
     /**
      * The amount of destination token to send (transfer or approve).
+     * If not provided, the user will be prompted to enter an amount.
      */
-    toUnits: string;
-    /**
-     * Let the user edit the amount to send.
-     */
-    amountEditable?: boolean;
+    toUnits?: string;
     /**
      * The destination address to transfer to, or contract to call.
      */
@@ -439,6 +372,14 @@ type PayButtonPaymentProps = {
         chain: number;
         address: Address;
     }[];
+    /**
+     * External ID. E.g. a correlation ID.
+     */
+    externalId?: string;
+    /**
+     * Developer metadata. E.g. correlation ID.
+     * */
+    metadata?: DaimoPayUserMetadata;
 } | {
     /** The payment ID, generated via the Daimo Pay API. Replaces params above. */
     payId: string;
@@ -491,7 +432,7 @@ declare namespace DaimoPayButtonCustom {
 /** Returns the current payment, or undefined if there is none.
  *
  * Status values:
- * - `payment_pending` - the user has not paid yet
+ * - `payment_unpaid` - the user has not paid yet
  * - `payment_started` - the user has paid & payment is in progress. This status
  *    typically lasts a few seconds.
  * - `payment_completed` - the final call or transfer succeeded
@@ -500,16 +441,9 @@ declare namespace DaimoPayButtonCustom {
  */
 declare function useDaimoPayStatus(): {
     paymentId: string;
-    status: PaymentStatus;
+    status: DaimoPayIntentStatus;
 } | undefined;
 
-type UseModalProps = {} & useConnectCallbackProps;
-/** Opens and closes the payment modal. */
-declare const useModal: ({ onConnect, onDisconnect }?: UseModalProps) => {
-    open: boolean;
-    setOpen: (show: boolean) => void;
-};
-
 /** Icon for an EVM chain, given chain ID. No ID shows a loading spinner. */
 declare const Chain: React$1.FC<{
     id?: number;
@@ -524,7 +458,7 @@ declare const wallets: {
 };
 
 declare const daimoPayVersion: string;
-/** Generates a globally-unique payId. */
-declare function generatePayId(): string;
+/** Chain ids supported by Daimo Pay. */
+declare const supportedChainIds: Set<number>;
 
-export { Avatar, Chain as ChainIcon, DaimoPayButton, Context as DaimoPayContext, DaimoPayProvider, types_d as Types, daimoPayVersion, generatePayId, defaultConfig as getDefaultConfig, useModal as useDaimoPayModal, useDaimoPayStatus, usePayContext, wallets };
+export { Avatar, Chain as ChainIcon, DaimoPayButton, Context as DaimoPayContext, DaimoPayProvider, types_d as Types, daimoPayVersion, defaultConfig as getDefaultConfig, supportedChainIds, useDaimoPayStatus, usePayContext, wallets };

package/build/package.json.js

@@ -1,5 +1,5 @@
 var name = "@daimo/pay";
-var version = "1.1.5";
+var version = "1.3.0";
 var author = "Daimo";
 var homepage = "https://pay.daimo.com";
 var license = "BSD-2-Clause license";
@@ -38,8 +38,8 @@ var keywords = [
 	"crypto"
 ];
 var dependencies = {
-	"@daimo/common": "1.1.0",
-	"@daimo/contract": "1.1.0",
+	"@daimo/common": "1.2.0",
+	"@daimo/contract": "1.2.0",
 	"@solana/wallet-adapter-base": "^0.9.23",
 	"@solana/wallet-adapter-react": "^0.15.35",
 	"@solana/web3.js": "^1.95.4",
@@ -65,7 +65,6 @@ var peerDependencies = {
 };
 var devDependencies = {
 	"@rollup/plugin-json": "^6.1.0",
-	"@rollup/plugin-node-resolve": "^13.1.3",
 	"@types/node": "^20.14.12",
 	"@types/qrcode": "^1.4.2",
 	"@types/react": "^18.2.47",

package/build/package.json.js.map

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

package/build/src/assets/icons.js

@@ -23,6 +23,7 @@ const RetryIconCircle = ({ ...props }) => {
     return (jsx("svg", { "aria-hidden": "true", width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M32 16C32 24.8366 24.8366 32 16 32C7.16344 32 0 24.8366 0 16C0 7.16344 7.16344 0 16 0C24.8366 0 32 7.16344 32 16ZM24.5001 8.74263C25.0834 8.74263 25.5563 9.21551 25.5563 9.79883V14.5997C25.5563 15.183 25.0834 15.6559 24.5001 15.6559H19.6992C19.1159 15.6559 18.643 15.183 18.643 14.5997C18.643 14.0164 19.1159 13.5435 19.6992 13.5435H21.8378L20.071 11.8798C20.0632 11.8724 20.0555 11.865 20.048 11.8574C19.1061 10.915 17.8835 10.3042 16.5643 10.1171C15.2452 9.92999 13.9009 10.1767 12.7341 10.82C11.5674 11.4634 10.6413 12.4685 10.0955 13.684C9.54968 14.8994 9.41368 16.2593 9.70801 17.5588C10.0023 18.8583 10.711 20.0269 11.7273 20.8885C12.7436 21.7502 14.0124 22.2582 15.3425 22.336C16.6726 22.4138 17.9919 22.0572 19.1017 21.3199C19.5088 21.0495 19.8795 20.7333 20.2078 20.3793C20.6043 19.9515 21.2726 19.9262 21.7004 20.3228C22.1282 20.7194 22.1534 21.3876 21.7569 21.8154C21.3158 22.2912 20.8176 22.7161 20.2706 23.0795C18.7793 24.0702 17.0064 24.5493 15.2191 24.4448C13.4318 24.3402 11.7268 23.6576 10.3612 22.4998C8.9956 21.3419 8.0433 19.7716 7.6478 18.0254C7.2523 16.2793 7.43504 14.4519 8.16848 12.8186C8.90192 11.1854 10.1463 9.83471 11.7142 8.97021C13.282 8.10572 15.0884 7.77421 16.861 8.02565C18.6282 8.27631 20.2664 9.09278 21.5304 10.3525L23.4439 12.1544V9.79883C23.4439 9.21551 23.9168 8.74263 24.5001 8.74263Z", fill: "currentColor" }) }));
 };
 const CopyToClipboardIcon = ({ ...props }) => (jsxs("svg", { "aria-hidden": "true", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [jsx("path", { d: "M14 9.5V7C14 5.89543 13.1046 5 12 5H7C5.89543 5 5 5.89543 5 7V12C5 13.1046 5.89543 14 7 14H9.5", stroke: "var(--ck-body-color-muted)", strokeWidth: "2" }), jsx("rect", { x: "10", y: "10", width: "9", height: "9", rx: "2", stroke: "var(--ck-body-color-muted)", strokeWidth: "2" }), jsx("path", { d: "M1 3L3 5L7 1", stroke: "var(--ck-body-color)", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" })] }));
+const SwitchIcon = ({ ...props }) => (jsx("svg", { "aria-hidden": "true", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: jsx("path", { stroke: "var(--ck-body-color-muted)", strokeWidth: 1.75, strokeLinecap: "round", strokeLinejoin: "round", d: "M3 7.5 7.5 3m0 0L12 7.5M7.5 3v13.5m13.5 0L16.5 21m0 0L12 16.5m4.5 4.5V7.5" }) }));
 
-export { AlertIcon, CopyToClipboardIcon, DisconnectIcon, ExternalLinkIcon, LoadingCircleIcon, RetryIconCircle, TickIcon };
+export { AlertIcon, CopyToClipboardIcon, DisconnectIcon, ExternalLinkIcon, LoadingCircleIcon, RetryIconCircle, SwitchIcon, TickIcon };
 //# sourceMappingURL=icons.js.map

package/build/src/assets/icons.js.map

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

package/build/src/components/Common/AmountInput/AmountInputField.js

@@ -0,0 +1,59 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useEffect } from 'react';
+import styled from '../../../styles/styled/index.js';
+import { ModalBody } from '../Modal/styles.js';
+
+const Container = styled.button `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+`;
+const InputField = styled.input `
+  margin: 0;
+  padding: 0;
+  background: none;
+  border: none;
+  outline: none;
+  font-size: 30px;
+  font-weight: var(--ck-modal-h1-font-weight, 600);
+  color: var(--ck-body-color);
+  width: ${(props) => {
+    const length = props.value?.length ?? 0;
+    // Placeholder is "0.00", 3ch for digits + 0.55ch for decimal point
+    if (length === 0)
+        return "3.55ch";
+    // Reduce width when decimal or commas are present since they're smaller than normal chars
+    const numPunctuations = (props.value?.match(/[.,]/g) || []).length;
+    const adjustedLength = length - numPunctuations * 0.55;
+    return `${Math.min(adjustedLength, 10)}ch`;
+}};
+  min-width: 1ch;
+  max-width: 10ch;
+`;
+const AnimatedCurrency = styled(ModalBody) `
+  @keyframes fadeInDown {
+    from {
+      opacity: 0;
+      transform: translateY(-8px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  animation: fadeInDown 0.3s ease-out forwards;
+  font-size: ${(props) => (props.$small ? "16px" : "24px")};
+`;
+const AmountInputField = ({ value, onChange, currency = "$", onKeyDown }) => {
+    // Focus the input when the component mounts so the user can start typing immediately
+    const inputRef = useRef(null);
+    useEffect(() => {
+        inputRef.current?.focus();
+    }, [value]);
+    return (jsxs(Container, { children: [currency === "$" && jsx(AnimatedCurrency, { children: currency }), jsx(InputField, { ref: inputRef, type: "text", value: value, onChange: onChange, placeholder: "0.00", onKeyDown: onKeyDown }), currency !== "$" && (jsx(AnimatedCurrency, { "$small": true, children: currency }))] }));
+};
+
+export { AmountInputField as default };
+//# sourceMappingURL=AmountInputField.js.map

package/build/src/components/Common/AmountInput/AmountInputField.js.map

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

package/build/src/components/Common/AmountInput/index.js

@@ -0,0 +1,147 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { usePayContext } from '../../DaimoPay.js';
+import { PageContent, ModalContent, ModalBody } from '../Modal/styles.js';
+import { parseUnits } from 'viem';
+import styled from '../../../styles/styled/index.js';
+import { formatUsd, usdToRoundedTokenAmount, USD_DECIMALS, tokenAmountToRoundedUsd, roundUsd, roundTokenAmount, roundTokenAmountUnits } from '../../../utils/format.js';
+import { isValidNumber, sanitizeNumber } from '../../../utils/validateInput.js';
+import Button from '../Button/index.js';
+import SwitchButton from '../SwitchButton/index.js';
+import TokenLogoSpinner from '../../Spinners/TokenLogoSpinner/index.js';
+import AmountInputField from './AmountInputField.js';
+
+const MultiCurrencySelectAmount = ({ selectedTokenOption, setSelectedTokenOption, nextPage }) => {
+    const { paymentState, setRoute, triggerResize } = usePayContext();
+    const maxUsdLimit = paymentState.getOrderUsdLimit();
+    const balanceToken = selectedTokenOption.balance.token;
+    const isUsdStablecoin = balanceToken.fiatSymbol === "$";
+    const minimumMessage = selectedTokenOption.minimumRequired.usd > 0
+        ? `Minimum 
+  ${formatUsd(selectedTokenOption.minimumRequired.usd, "up")}`
+        : null;
+    const [usdValue, setUsdValue] = useState("");
+    const [tokenValue, setTokenValue] = useState(usdToRoundedTokenAmount(0, balanceToken));
+    const [isEditingUsd, setIsEditingUsd] = useState(true);
+    const [message, setMessage] = useState(minimumMessage);
+    const [continueDisabled, setContinueDisabled] = useState(true);
+    useEffect(() => {
+        triggerResize();
+    }, [message]);
+    /**
+     * Update the editable value and secondary value, taking into account whether
+     * the user is currently editing the USD value or the token value.
+     */
+    const updateValues = (newUsdValue, newTokenValue, newIsEditingUsd) => {
+        const sanitizedUsdValue = sanitizeNumber(newUsdValue);
+        const sanitizedTokenValue = sanitizeNumber(newTokenValue);
+        // Update the state. Don't sanitize the value if the user is editing it.
+        setUsdValue(newIsEditingUsd ? newUsdValue : roundUsd(Number(sanitizedUsdValue)));
+        setTokenValue(newIsEditingUsd
+            ? roundTokenAmountUnits(Number(sanitizedTokenValue), balanceToken)
+            : newTokenValue);
+        setIsEditingUsd(newIsEditingUsd);
+        setContinueDisabled(Number(sanitizedUsdValue) <= 0 ||
+            Number(sanitizedUsdValue) < selectedTokenOption.minimumRequired.usd ||
+            Number(sanitizedUsdValue) > selectedTokenOption.balance.usd ||
+            Number(sanitizedUsdValue) > maxUsdLimit);
+        if (Number(sanitizedUsdValue) > selectedTokenOption.balance.usd) {
+            setMessage(`Amount exceeds your balance: 
+  ${formatUsd(selectedTokenOption.balance.usd)}`);
+        }
+        else if (Number(usdValue) > maxUsdLimit) {
+            setMessage(`Maximum ${formatUsd(maxUsdLimit)}`);
+        }
+        else {
+            setMessage(minimumMessage);
+        }
+    };
+    const handleAmountChange = (e) => {
+        const value = e.target.value;
+        const maxDecimals = isEditingUsd
+            ? USD_DECIMALS
+            : balanceToken.displayDecimals;
+        if (value !== "" && !isValidNumber(value, maxDecimals))
+            return;
+        const sanitizedValue = sanitizeNumber(value);
+        const newUsdValue = isEditingUsd
+            ? value
+            : tokenAmountToRoundedUsd(parseUnits(sanitizedValue, balanceToken.decimals), balanceToken);
+        const newTokenValue = isEditingUsd
+            ? usdToRoundedTokenAmount(Number(sanitizedValue), balanceToken)
+            : value;
+        updateValues(newUsdValue, newTokenValue, isEditingUsd);
+    };
+    const handleMax = () => {
+        const usdValue = roundUsd(Number(selectedTokenOption.balance.usd));
+        const tokenValue = roundTokenAmount(selectedTokenOption.balance.amount, balanceToken);
+        updateValues(usdValue, tokenValue, isEditingUsd);
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === "Enter" && !continueDisabled) {
+            handleContinue();
+        }
+    };
+    const handleSwitchCurrency = () => {
+        updateValues(usdValue, tokenValue, !isEditingUsd);
+    };
+    const handleContinue = () => {
+        const usd = Number(sanitizeNumber(usdValue));
+        const amountUnits = usd / balanceToken.usd;
+        const amount = parseUnits(amountUnits.toString(), balanceToken.decimals);
+        setSelectedTokenOption({
+            ...selectedTokenOption,
+            required: {
+                token: balanceToken,
+                amount: amount.toString(),
+                usd,
+            },
+        });
+        paymentState.setChosenUsd(usd);
+        setRoute(nextPage, {
+            amountUsd: usd,
+            amountUnits,
+            tokenSymbol: balanceToken.symbol,
+        });
+    };
+    return (jsxs(PageContent, { children: [jsx(TokenLogoSpinner, { token: balanceToken, showSpinner: false }), jsxs(ModalContent, { "$preserveDisplay": true, children: [jsxs(AmountInputContainer, { children: [jsx(MaxButton, { style: { visibility: "hidden" }, children: "Max" }), jsx(AmountInputField, { value: isEditingUsd ? usdValue : tokenValue, onChange: handleAmountChange, currency: isEditingUsd ? "$" : balanceToken.symbol, onKeyDown: handleKeyDown }), jsx(MaxButton, { onClick: handleMax, children: "Max" })] }), !isUsdStablecoin && (jsx(SwitchContainer, { children: jsx(SwitchButton, { onClick: handleSwitchCurrency, children: jsx(SecondaryAmount, { children: isEditingUsd
+                                    ? `${tokenValue} ${balanceToken.symbol}`
+                                    : `$${usdValue}` }) }) })), message && jsx(ModalBody, { children: message }), jsx(Button, { onClick: handleContinue, disabled: continueDisabled, children: "Continue" })] })] }));
+};
+const AmountInputContainer = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+`;
+const SecondaryAmount = styled.div `
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 21px;
+  color: var(--ck-body-color-muted);
+  strong {
+    font-weight: 500;
+    color: var(--ck-body-color);
+  }
+`;
+const MaxButton = styled.button `
+  display: inline-block;
+  padding: 3px 8px;
+  border-radius: var(--ck-primary-button-border-radius);
+  font-size: 14px;
+  font-weight: 400;
+  background: var(
+    --ck-secondary-button-background,
+    var(--ck-body-background-secondary)
+  );
+  color: var(--ck-body-color-muted);
+  cursor: pointer;
+`;
+const SwitchContainer = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+export { MultiCurrencySelectAmount as default };
+//# sourceMappingURL=index.js.map

package/build/src/components/Common/AmountInput/index.js.map

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

package/build/src/components/Common/ChainSelectList/index.js

@@ -57,7 +57,7 @@ const ChainSelectList = ({ variant, }) => {
                                                                 opacity: [1, 0],
                                                                 transition: { delay: 4, duration: 3 },
                                                             }
-                                                            : { opacity: 1 }, children: Spinner }, `${ch?.id}-${ch?.name}`) }), jsx(ChainIcon, { children: ch.logo ?? jsx(Chains.UnknownChain, {}) })] }), ch.name] }), variant !== "secondary" && (jsx(ChainButtonStatus, { children: jsxs(AnimatePresence, { initial: false, exitBeforeEnter: true, children: [ch.id === chain?.id && (jsx(motion.span, { style: {
+                                                            : { opacity: 1 }, children: Spinner }, `${ch?.id}-${ch?.name}`) }), jsx(ChainIcon, { children: ch.logo ?? jsx(Chains.UnknownChain, {}) })] }), ch.name] }), variant !== "secondary" && (jsx(ChainButtonStatus, { children: jsxs(AnimatePresence, { initial: false, mode: "wait", children: [ch.id === chain?.id && (jsx(motion.span, { style: {
                                                     color: "var(--ck-dropdown-active-color, var(--ck-focus-color))",
                                                     display: "block",
                                                     position: "relative",

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

@@ -185,7 +185,7 @@ const Modal = ({ open, pages, pageId, positionInside, inline, demo, onClose, onB
                 if (!selectedSolanaTokenOption)
                     return undefined;
                 return `Pay with ${selectedSolanaTokenOption.required.token.symbol}`;
-            case ROUTES.WAITING_OTHER:
+            case ROUTES.WAITING_EXTERNAL:
                 return selectedExternalOption?.cta;
             case ROUTES.SELECT_DEPOSIT_ADDRESS_CHAIN:
                 return "Select Chain";
@@ -193,12 +193,17 @@ const Modal = ({ open, pages, pageId, positionInside, inline, demo, onClose, onB
                 if (!selectedDepositAddressOption)
                     return undefined;
                 return `Pay with ${selectedDepositAddressOption.id}`;
+            case ROUTES.SELECT_AMOUNT:
+            case ROUTES.SELECT_EXTERNAL_AMOUNT:
+            case ROUTES.SELECT_DEPOSIT_ADDRESS_AMOUNT:
+            case ROUTES.SOLANA_SELECT_AMOUNT:
+                return "Select Amount";
             case ROUTES.PAY_WITH_TOKEN:
-                if (!selectedTokenOption)
+                if (selectedTokenOption == null)
                     return undefined;
-                const chainName = getChainName(selectedTokenOption.required.token.chainId ?? 0);
+                const chainName = getChainName(selectedTokenOption.balance.token.chainId);
                 const capitalizedChainName = chainName.charAt(0).toUpperCase() + chainName.slice(1);
-                return `Pay with ${capitalizedChainName} ${selectedTokenOption.required.token.symbol}`;
+                return `Pay with ${capitalizedChainName} ${selectedTokenOption.balance.token.symbol}`;
             case ROUTES.CONFIRMATION:
                 return "Payment Successful";
         }

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

@@ -131,7 +131,8 @@ const ModalContent = styled(motion.div) `
   padding: 0 0 16px;
 
   @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
-    display: block;
+    display: ${(props) => (props.$preserveDisplay ? "flex" : "block")};
+    gap: ${(props) => (props.$preserveDisplay ? "4px" : undefined)};
   }
 `;
 const ModalH1 = styled(motion.h1) `