@daimo/pay 1.1.4 → 1.2.0

package/build/src/components/Pages/SelectAmount/index.js

@@ -0,0 +1,16 @@
+import { jsx } from 'react/jsx-runtime';
+import MultiCurrencySelectAmount from '../../Common/AmountInput/index.js';
+import { PageContent } from '../../Common/Modal/styles.js';
+import { usePayContext, ROUTES } from '../../DaimoPay.js';
+
+const SelectAmount = () => {
+    const { paymentState } = usePayContext();
+    const { selectedTokenOption, setSelectedTokenOption } = paymentState;
+    if (selectedTokenOption == null) {
+        return jsx(PageContent, {});
+    }
+    return (jsx(MultiCurrencySelectAmount, { selectedTokenOption: selectedTokenOption, setSelectedTokenOption: setSelectedTokenOption, nextPage: ROUTES.PAY_WITH_TOKEN }));
+};
+
+export { SelectAmount as default };
+//# sourceMappingURL=index.js.map

package/build/src/components/Pages/SelectAmount/index.js.map

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

package/build/src/components/Pages/SelectDepositAddressAmount/index.js

@@ -0,0 +1,60 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { usePayContext, ROUTES } from '../../DaimoPay.js';
+import { PageContent, ModalContent, ModalBody } from '../../Common/Modal/styles.js';
+import styled from '../../../styles/styled/index.js';
+import { formatUsd, USD_DECIMALS } from '../../../utils/format.js';
+import { isValidNumber, sanitizeNumber } from '../../../utils/validateInput.js';
+import AmountInputField from '../../Common/AmountInput/AmountInputField.js';
+import Button from '../../Common/Button/index.js';
+import ExternalPaymentSpinner from '../../Spinners/ExternalPaymentSpinner/index.js';
+
+// TODO: min amount for deposit address should come from the backend
+const MIN_USD_VALUE = 20;
+const SelectDepositAddressAmount = () => {
+    const { paymentState, setRoute, triggerResize } = usePayContext();
+    const { selectedDepositAddressOption } = paymentState;
+    const maxUsdLimit = paymentState.getOrderUsdLimit();
+    const minimumMessage = `Minimum ${formatUsd(MIN_USD_VALUE, "up")}`;
+    const [usdInput, setUsdInput] = useState("");
+    const [message, setMessage] = useState(minimumMessage);
+    const [continueDisabled, setContinueDisabled] = useState(true);
+    useEffect(() => {
+        triggerResize();
+    }, [message]);
+    if (selectedDepositAddressOption == null) {
+        return jsx(PageContent, {});
+    }
+    const handleAmountChange = (e) => {
+        const value = e.target.value;
+        if (value !== "" && !isValidNumber(value, USD_DECIMALS))
+            return;
+        setUsdInput(value);
+        if (Number(value) > maxUsdLimit) {
+            setMessage(`Maximum ${formatUsd(maxUsdLimit)}`);
+        }
+        else {
+            setMessage(minimumMessage);
+        }
+        const usd = Number(sanitizeNumber(value));
+        setContinueDisabled(usd <= 0 || usd < MIN_USD_VALUE || usd > maxUsdLimit);
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === "Enter" && !continueDisabled) {
+            handleContinue();
+        }
+    };
+    const handleContinue = () => {
+        paymentState.setChosenUsd(Number(sanitizeNumber(usdInput)));
+        setRoute(ROUTES.WAITING_DEPOSIT_ADDRESS);
+    };
+    return (jsxs(PageContent, { children: [jsx(ExternalPaymentSpinner, { logoURI: selectedDepositAddressOption.logoURI, logoShape: "circle", showSpinner: false }), jsxs(ModalContent, { "$preserveDisplay": true, children: [jsx(AmountInputContainer, { children: jsx(AmountInputField, { value: usdInput, onChange: handleAmountChange, onKeyDown: handleKeyDown }) }), 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;
+`;
+
+export { SelectDepositAddressAmount as default };
+//# sourceMappingURL=index.js.map

package/build/src/components/Pages/SelectDepositAddressAmount/index.js.map

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

package/build/src/components/Pages/SelectDepositAddressChain/index.js

@@ -7,7 +7,7 @@ import { OrderHeader } from '../../Common/OrderHeader/index.js';
 
 const SelectDepositAddressChain = () => {
     const { setRoute, paymentState } = usePayContext();
-    const { setSelectedDepositAddressOption, depositAddressOptions } = paymentState;
+    const { isDepositFlow, setSelectedDepositAddressOption, depositAddressOptions, } = paymentState;
     return (jsxs(PageContent, { children: [jsx(OrderHeader, { minified: true }), !depositAddressOptions.loading &&
                 depositAddressOptions.options?.length === 0 && (jsxs(ModalContent, { style: {
                     display: "flex",
@@ -22,7 +22,12 @@ const SelectDepositAddressChain = () => {
                         icons: [option.logoURI],
                         onClick: () => {
                             setSelectedDepositAddressOption(option);
-                            setRoute(ROUTES.WAITING_DEPOSIT_ADDRESS);
+                            if (isDepositFlow) {
+                                setRoute(ROUTES.SELECT_DEPOSIT_ADDRESS_AMOUNT);
+                            }
+                            else {
+                                setRoute(ROUTES.WAITING_DEPOSIT_ADDRESS);
+                            }
                         },
                     };
                 }) ?? [] })] }));

package/build/src/components/Pages/SelectDepositAddressChain/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/Pages/SelectExternalAmount/index.js

@@ -0,0 +1,62 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { usePayContext, ROUTES } from '../../DaimoPay.js';
+import { PageContent, ModalContent, ModalBody } from '../../Common/Modal/styles.js';
+import styled from '../../../styles/styled/index.js';
+import { formatUsd, USD_DECIMALS } from '../../../utils/format.js';
+import { isValidNumber, sanitizeNumber } from '../../../utils/validateInput.js';
+import AmountInputField from '../../Common/AmountInput/AmountInputField.js';
+import Button from '../../Common/Button/index.js';
+import ExternalPaymentSpinner from '../../Spinners/ExternalPaymentSpinner/index.js';
+
+const SelectExternalAmount = () => {
+    const { paymentState, setRoute, triggerResize } = usePayContext();
+    const { selectedExternalOption } = paymentState;
+    const maxUsdLimit = paymentState.getOrderUsdLimit();
+    const minimumMessage = (selectedExternalOption?.minimumUsd ?? 0) > 0
+        ? `Minimum ${formatUsd(selectedExternalOption?.minimumUsd ?? 0, "up")}`
+        : null;
+    const [usdInput, setUsdInput] = useState("");
+    const [message, setMessage] = useState(minimumMessage);
+    const [continueDisabled, setContinueDisabled] = useState(true);
+    useEffect(() => {
+        triggerResize();
+    }, [message]);
+    if (selectedExternalOption == null) {
+        return jsx(PageContent, {});
+    }
+    const handleAmountChange = (e) => {
+        const value = e.target.value;
+        if (value !== "" && !isValidNumber(value, USD_DECIMALS))
+            return;
+        setUsdInput(value);
+        if (Number(value) > maxUsdLimit) {
+            setMessage(`Maximum ${formatUsd(maxUsdLimit)}`);
+        }
+        else {
+            setMessage(minimumMessage);
+        }
+        const usd = Number(sanitizeNumber(value));
+        setContinueDisabled(usd <= 0 ||
+            usd < (selectedExternalOption.minimumUsd ?? 0) ||
+            usd > maxUsdLimit);
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === "Enter" && !continueDisabled) {
+            handleContinue();
+        }
+    };
+    const handleContinue = () => {
+        paymentState.setChosenUsd(Number(sanitizeNumber(usdInput)));
+        setRoute(ROUTES.WAITING_EXTERNAL);
+    };
+    return (jsxs(PageContent, { children: [jsx(ExternalPaymentSpinner, { logoURI: selectedExternalOption.logoURI, logoShape: selectedExternalOption.logoShape, showSpinner: false }), jsxs(ModalContent, { "$preserveDisplay": true, children: [jsx(AmountInputContainer, { children: jsx(AmountInputField, { value: usdInput, onChange: handleAmountChange, onKeyDown: handleKeyDown }) }), 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;
+`;
+
+export { SelectExternalAmount as default };
+//# sourceMappingURL=index.js.map

package/build/src/components/Pages/SelectExternalAmount/index.js.map

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

package/build/src/components/Pages/SelectMethod/index.js

@@ -45,19 +45,21 @@ function getSolanaOption() {
     };
 }
 function getDepositAddressOption(depositAddressOptions) {
-    const { setRoute } = usePayContext();
-    if (!depositAddressOptions.loading &&
-        depositAddressOptions.options.length === 0) {
-        return null;
-    }
+    const { setRoute, paymentState } = usePayContext();
+    // TODO: API should serve the subtitle and disabled
+    const disabled = !paymentState.isDepositFlow &&
+        !depositAddressOptions.loading &&
+        depositAddressOptions.options.length === 0;
+    const subtitle = disabled ? "Minimum $20.00" : "Bitcoin, Tron, Zcash...";
     return {
         id: "depositAddress",
         title: "Pay on another chain",
-        subtitle: "Bitcoin, Tron, Zcash...",
+        subtitle,
         icons: [jsx(Bitcoin, {}), jsx(Tron, {}), jsx(Zcash, {})],
         onClick: () => {
             setRoute(ROUTES.SELECT_DEPOSIT_ADDRESS_CHAIN);
         },
+        disabled,
     };
 }
 const SelectMethod = () => {
@@ -101,7 +103,12 @@ const SelectMethod = () => {
             icons: [option.logoURI],
             onClick: () => {
                 setSelectedExternalOption(option);
-                setRoute(ROUTES.WAITING_OTHER);
+                if (paymentState.isDepositFlow) {
+                    setRoute(ROUTES.SELECT_EXTERNAL_AMOUNT);
+                }
+                else {
+                    setRoute(ROUTES.WAITING_EXTERNAL);
+                }
             },
             disabled: option.disabled,
             subtitle: option.message,

package/build/src/components/Pages/SelectMethod/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/Pages/SelectToken/index.js

@@ -1,61 +1,56 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { usePayContext, ROUTES } from '../../DaimoPay.js';
 import { PageContent, ModalContent, ModalH1 } from '../../Common/Modal/styles.js';
-import { capitalize, getDisplayPrice } from '@daimo/common';
+import { capitalize } from '@daimo/common';
 import { getChainName } from '@daimo/contract';
-import { motion } from 'framer-motion';
-import { chainToLogo } from '../../../assets/chains.js';
-import styled from '../../../styles/styled/index.js';
+import { formatUsd, roundTokenAmount } from '../../../utils/format.js';
 import Button from '../../Common/Button/index.js';
 import OptionsList from '../../Common/OptionsList/index.js';
 import { OrderHeader } from '../../Common/OrderHeader/index.js';
+import TokenChainLogo from '../../Common/TokenChainLogo/index.js';
 
 function getDaimoTokenKey(token) {
     return `${token.chainId}-${token.token}`;
 }
-const TokenChainLogo = ({ token }) => {
-    return (jsxs(TokenChainContainer, { children: [jsx("img", { src: token.logoURI, alt: token.symbol, style: { borderRadius: 9999 } }), jsx(ChainContainer, { children: chainToLogo[token.chainId] })] }));
-};
-const TokenChainContainer = styled(motion.div) `
-  width: 100%;
-  height: 100%;
-`;
-const ChainContainer = styled(motion.div) `
-  position: absolute;
-  width: 16px;
-  height: 16px;
-  border-radius: 9999px;
-  overflow: hidden;
-  bottom: 0px;
-  right: 0px;
-`;
 const SelectToken = () => {
     const { setRoute, paymentState } = usePayContext();
-    const { setSelectedTokenOption, walletPaymentOptions } = paymentState;
-    return (jsxs(PageContent, { children: [jsx(OrderHeader, { minified: true }), !walletPaymentOptions.isLoading &&
-                walletPaymentOptions.options?.length === 0 && (jsxs(ModalContent, { style: {
+    const { isDepositFlow, walletPaymentOptions, setSelectedTokenOption } = paymentState;
+    const optionsList = walletPaymentOptions.options?.map((option) => {
+        const capitalizedChainName = capitalize(getChainName(option.balance.token.chainId));
+        const titlePrice = isDepositFlow
+            ? formatUsd(option.balance.usd)
+            : roundTokenAmount(option.required.amount, option.required.token);
+        const title = `${titlePrice} ${option.balance.token.symbol} on ${capitalizedChainName}`;
+        const balanceStr = `${roundTokenAmount(option.balance.amount, option.balance.token)} ${option.balance.token.symbol}`;
+        const subtitle = option.disabledReason ??
+            `${isDepositFlow ? "" : "Balance: "}${balanceStr}`;
+        const disabled = option.disabledReason != null;
+        return {
+            id: getDaimoTokenKey(option.balance.token),
+            title,
+            subtitle,
+            icons: [
+                jsx(TokenChainLogo, { token: option.balance.token }, getDaimoTokenKey(option.balance.token)),
+            ],
+            onClick: () => {
+                setSelectedTokenOption(option);
+                if (isDepositFlow) {
+                    setRoute(ROUTES.SELECT_AMOUNT);
+                }
+                else {
+                    setRoute(ROUTES.PAY_WITH_TOKEN);
+                }
+            },
+            disabled,
+        };
+    }) ?? [];
+    return (jsxs(PageContent, { children: [jsx(OrderHeader, { minified: true }), !walletPaymentOptions.isLoading && optionsList.length === 0 && (jsxs(ModalContent, { style: {
                     display: "flex",
                     alignItems: "center",
                     justifyContent: "center",
                     paddingTop: 16,
                     paddingBottom: 16,
-                }, children: [jsx(ModalH1, { children: "Insufficient balance." }), jsx(Button, { onClick: () => setRoute(ROUTES.SELECT_METHOD), children: "Select Another Method" })] })), jsx(OptionsList, { requiredSkeletons: 4, isLoading: walletPaymentOptions.isLoading, options: walletPaymentOptions.options?.map((option) => {
-                    const capitalizedChainName = capitalize(getChainName(option.required.token.chainId));
-                    const title = `${getDisplayPrice(option.required)} ${option.required.token.symbol} on ${capitalizedChainName}`;
-                    const subtitle = `Balance: ${getDisplayPrice(option.balance)} ${option.balance.token.symbol}`;
-                    return {
-                        id: getDaimoTokenKey(option.required.token),
-                        title,
-                        subtitle,
-                        icons: [
-                            jsx(TokenChainLogo, { token: option.required.token }, getDaimoTokenKey(option.required.token)),
-                        ],
-                        onClick: () => {
-                            setSelectedTokenOption(option);
-                            setRoute(ROUTES.PAY_WITH_TOKEN);
-                        },
-                    };
-                }) ?? [] })] }));
+                }, children: [jsx(ModalH1, { children: "Insufficient balance." }), jsx(Button, { onClick: () => setRoute(ROUTES.SELECT_METHOD), children: "Select Another Method" })] })), jsx(OptionsList, { requiredSkeletons: 4, isLoading: walletPaymentOptions.isLoading, options: optionsList })] }));
 };
 
 export { SelectToken as default };

package/build/src/components/Pages/SelectToken/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/Pages/Solana/ConnectorSolana/index.js

@@ -6,7 +6,6 @@ import { motion, AnimatePresence } from 'framer-motion';
 import styled from '../../../../styles/styled/index.js';
 import { usePayContext, ROUTES } from '../../../DaimoPay.js';
 import SquircleSpinner from '../../../Spinners/SquircleSpinner/index.js';
-import { LoadingContainer } from '../../WaitingOther/index.js';
 
 const ConnectSolana = () => {
     const solanaWallets = useWallet();
@@ -28,6 +27,13 @@ const ConnectSolana = () => {
         return null;
     return (jsxs(PageContent, { children: [jsx(LoadingContainer, { children: jsx(AnimationContainer, { children: jsx(AnimatePresence, { children: jsx(SquircleSpinner, { logo: jsx("div", { style: { borderRadius: "22.5%", overflow: "hidden" }, children: jsx("img", { src: selectedWallet?.adapter.icon, alt: selectedWallet?.adapter.name }) }), loading: true }) }) }) }), jsx(ModalContent, { style: { paddingBottom: 0 }, children: isConnected ? (jsx(ModalH1, { children: "Connected" })) : (jsxs(Fragment, { children: [jsx(ModalH1, { children: "Requesting Connection" }), jsxs(ModalBody, { children: ["Open ", selectedWallet?.adapter.name, " to continue."] })] })) })] }));
 };
+const LoadingContainer = styled(motion.div) `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 10px auto 16px;
+  height: 120px;
+`;
 const AnimationContainer = styled(motion.div) `
   user-select: none;
   position: relative;
@@ -41,5 +47,5 @@ const AnimationContainer = styled(motion.div) `
   }
 `;
 
-export { ConnectSolana as default };
+export { LoadingContainer, ConnectSolana as default };
 //# sourceMappingURL=index.js.map

package/build/src/components/Pages/Solana/ConnectorSolana/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/Pages/Solana/PayWithSolanaToken/index.js

@@ -1,14 +1,15 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, useEffect } from 'react';
 import { usePayContext, ROUTES } from '../../../DaimoPay.js';
-import { WalletSignTransactionError } from '@solana/wallet-adapter-base';
+import { WalletSignTransactionError, WalletSendTransactionError } from '@solana/wallet-adapter-base';
 import { PageContent, ModalContent, ModalH1 } from '../../../Common/Modal/styles.js';
 import { assert } from '@daimo/common';
-import { motion, AnimatePresence } from 'framer-motion';
+import { motion } from 'framer-motion';
 import { css } from 'styled-components';
 import styled from '../../../../styles/styled/index.js';
 import Button from '../../../Common/Button/index.js';
-import CircleSpinner from '../../../Spinners/CircleSpinner/index.js';
+import PaymentBreakdown from '../../../Common/PaymentBreakdown/index.js';
+import TokenLogoSpinner from '../../../Spinners/TokenLogoSpinner/index.js';
 
 var PayState;
 (function (PayState) {
@@ -19,7 +20,7 @@ var PayState;
 })(PayState || (PayState = {}));
 const PayWithSolanaToken = () => {
     const { triggerResize, paymentState, setRoute } = usePayContext();
-    const { selectedSolanaTokenOption, payWithSolanaToken } = paymentState;
+    const { payParams, generatePreviewOrder, selectedSolanaTokenOption, payWithSolanaToken, } = paymentState;
     const [payState, setPayState] = useState(PayState.RequestingPayment);
     const handleTransfer = async () => {
         try {
@@ -33,7 +34,8 @@ const PayWithSolanaToken = () => {
         }
         catch (error) {
             console.error(error);
-            if (error instanceof WalletSignTransactionError) {
+            if (error instanceof WalletSignTransactionError ||
+                error instanceof WalletSendTransactionError) {
                 setPayState(PayState.RequestCancelled);
             }
             else {
@@ -52,16 +54,20 @@ const PayWithSolanaToken = () => {
     useEffect(() => {
         triggerResize();
     }, [payState]);
-    return (jsxs(PageContent, { children: [jsx(LoadingContainer, { children: jsx(AnimationContainer, { "$circle": true, children: jsx(AnimatePresence, { children: jsx(CircleSpinner, { logo: jsx("img", { src: selectedSolanaTokenOption?.required.token.logoURI, alt: selectedSolanaTokenOption?.required.token.symbol }, selectedSolanaTokenOption?.required.token.logoURI), loading: true, unavailable: false }, "CircleSpinner") }) }) }), jsxs(ModalContent, { style: { paddingBottom: 0 }, children: [jsx(ModalH1, { children: payState }), payState === PayState.RequestCancelled && (jsx(Button, { onClick: handleTransfer, children: "Retry Payment" })), payState === PayState.RequestFailed && (jsx(Button, { onClick: () => setRoute(ROUTES.SELECT_METHOD), children: "Select Another Method" }))] })] }));
+    return (jsxs(PageContent, { children: [selectedSolanaTokenOption && (jsx(TokenLogoSpinner, { token: selectedSolanaTokenOption.required.token })), jsxs(ModalContent, { style: { paddingBottom: 0 }, children: [jsx(ModalH1, { children: payState }), selectedSolanaTokenOption && (jsx(PaymentBreakdown, { paymentOption: selectedSolanaTokenOption })), payState === PayState.RequestCancelled && (jsx(Button, { onClick: handleTransfer, children: "Retry Payment" })), payState === PayState.RequestFailed && (jsx(Button, { onClick: () => {
+                            assert(payParams != null, "payParams cannot be null in deposit flow");
+                            generatePreviewOrder(payParams);
+                            setRoute(ROUTES.SELECT_METHOD);
+                        }, children: "Select Another Method" }))] })] }));
 };
-const LoadingContainer = styled(motion.div) `
+styled(motion.div) `
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 10px auto 16px;
   height: 120px;
 `;
-const AnimationContainer = styled(motion.div) `
+styled(motion.div) `
   user-select: none;
   position: relative;
   --spinner-error-opacity: 0;

package/build/src/components/Pages/Solana/PayWithSolanaToken/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/Pages/Solana/SelectSolanaAmount/index.js

@@ -0,0 +1,16 @@
+import { jsx } from 'react/jsx-runtime';
+import { usePayContext, ROUTES } from '../../../DaimoPay.js';
+import MultiCurrencySelectAmount from '../../../Common/AmountInput/index.js';
+import { PageContent } from '../../../Common/Modal/styles.js';
+
+const SelectSolanaAmount = () => {
+    const { paymentState } = usePayContext();
+    const { selectedSolanaTokenOption, setSelectedSolanaTokenOption } = paymentState;
+    if (selectedSolanaTokenOption == null) {
+        return jsx(PageContent, {});
+    }
+    return (jsx(MultiCurrencySelectAmount, { selectedTokenOption: selectedSolanaTokenOption, setSelectedTokenOption: setSelectedSolanaTokenOption, nextPage: ROUTES.SOLANA_PAY_WITH_TOKEN }));
+};
+
+export { SelectSolanaAmount as default };
+//# sourceMappingURL=index.js.map

package/build/src/components/Pages/Solana/SelectSolanaAmount/index.js.map

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

package/build/src/components/Pages/Solana/SelectSolanaToken/index.js

@@ -1,37 +1,53 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { usePayContext, ROUTES } from '../../../DaimoPay.js';
 import { PageContent, ModalContent, ModalH1 } from '../../../Common/Modal/styles.js';
-import { getDisplayPrice } from '@daimo/common';
+import { formatUsd, roundTokenAmount } from '../../../../utils/format.js';
 import Button from '../../../Common/Button/index.js';
 import OptionsList from '../../../Common/OptionsList/index.js';
 import { OrderHeader } from '../../../Common/OrderHeader/index.js';
+import TokenChainLogo from '../../../Common/TokenChainLogo/index.js';
 
+function getDaimoSolanaTokenKey(token) {
+    return `${token.chainId}-${token.token}`;
+}
 const SelectSolanaToken = () => {
     const { paymentState, setRoute } = usePayContext();
-    const { solanaPaymentOptions, setSelectedSolanaTokenOption } = paymentState;
-    return (jsxs(PageContent, { children: [jsx(OrderHeader, { minified: true }), !solanaPaymentOptions.isLoading &&
-                solanaPaymentOptions.options?.length === 0 && (jsxs(ModalContent, { style: {
+    const { isDepositFlow, solanaPaymentOptions, setSelectedSolanaTokenOption } = paymentState;
+    const optionsList = solanaPaymentOptions.options?.map((option) => {
+        const titlePrice = isDepositFlow
+            ? formatUsd(option.balance.usd)
+            : roundTokenAmount(option.required.amount, option.required.token);
+        const title = `${titlePrice} ${option.balance.token.symbol} on Solana`;
+        const balanceStr = `${roundTokenAmount(option.balance.amount, option.balance.token)} ${option.balance.token.symbol}`;
+        const subtitle = option.disabledReason ??
+            `${isDepositFlow ? "" : "Balance: "}${balanceStr}`;
+        const disabled = option.disabledReason != null;
+        return {
+            id: getDaimoSolanaTokenKey(option.balance.token),
+            title,
+            subtitle,
+            icons: [
+                jsx(TokenChainLogo, { token: option.balance.token }, getDaimoSolanaTokenKey(option.balance.token)),
+            ],
+            onClick: () => {
+                setSelectedSolanaTokenOption(option);
+                if (isDepositFlow) {
+                    setRoute(ROUTES.SOLANA_SELECT_AMOUNT);
+                }
+                else {
+                    setRoute(ROUTES.SOLANA_PAY_WITH_TOKEN);
+                }
+            },
+            disabled,
+        };
+    }) ?? [];
+    return (jsxs(PageContent, { children: [jsx(OrderHeader, { minified: true }), !solanaPaymentOptions.isLoading && optionsList.length === 0 && (jsxs(ModalContent, { style: {
                     display: "flex",
                     alignItems: "center",
                     justifyContent: "center",
                     paddingTop: 16,
                     paddingBottom: 16,
-                }, children: [jsx(ModalH1, { children: "Insufficient balance." }), jsx(Button, { onClick: () => setRoute(ROUTES.SELECT_METHOD), children: "Select Another Method" })] })), jsx(OptionsList, { requiredSkeletons: 4, isLoading: solanaPaymentOptions.isLoading, options: solanaPaymentOptions.options?.map((option) => {
-                    const title = `${getDisplayPrice(option.required)} ${option.required.token.symbol}`;
-                    const subtitle = `Balance: ${getDisplayPrice(option.balance)} ${option.balance.token.symbol}`;
-                    return {
-                        id: `${option.required.token.token}-${option.required.token.symbol}`,
-                        title,
-                        subtitle,
-                        icons: [
-                            jsx("img", { src: option.required.token.logoURI, alt: option.required.token.symbol, style: { borderRadius: 9999 } }),
-                        ],
-                        onClick: () => {
-                            setSelectedSolanaTokenOption(option);
-                            setRoute(ROUTES.SOLANA_PAY_WITH_TOKEN);
-                        },
-                    };
-                }) ?? [] })] }));
+                }, children: [jsx(ModalH1, { children: "Insufficient balance." }), jsx(Button, { onClick: () => setRoute(ROUTES.SELECT_METHOD), children: "Select Another Method" })] })), jsx(OptionsList, { requiredSkeletons: 4, isLoading: solanaPaymentOptions.isLoading, options: optionsList })] }));
 };
 
 export { SelectSolanaToken as default };

package/build/src/components/Pages/Solana/SelectSolanaToken/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/Pages/WaitingExternal/index.js

@@ -0,0 +1,53 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { usePayContext, ROUTES } from '../../DaimoPay.js';
+import { PageContent, ModalContent, ModalH1, ModalBody } from '../../Common/Modal/styles.js';
+import { ExternalLinkIcon } from '../../../assets/icons.js';
+import Button from '../../Common/Button/index.js';
+import ExternalPaymentSpinner from '../../Spinners/ExternalPaymentSpinner/index.js';
+
+const WaitingExternal = () => {
+    const context = usePayContext();
+    const { triggerResize, paymentState, setRoute } = context;
+    const trpc = context.trpc;
+    const { selectedExternalOption, payWithExternal, paymentWaitingMessage, daimoPayOrder, } = paymentState;
+    const [externalURL, setExternalURL] = useState(null);
+    useEffect(() => {
+        const checkForSourcePayment = async () => {
+            if (!daimoPayOrder)
+                return;
+            const found = await trpc.findSourcePayment.query({
+                orderId: daimoPayOrder.id.toString(),
+            });
+            if (found) {
+                setRoute(ROUTES.CONFIRMATION);
+            }
+        };
+        const interval = setInterval(checkForSourcePayment, 1000);
+        return () => clearInterval(interval);
+    }, [daimoPayOrder?.id]);
+    useEffect(() => {
+        if (!selectedExternalOption)
+            return;
+        payWithExternal(selectedExternalOption.id).then((url) => {
+            setExternalURL(url);
+            setTimeout(() => {
+                window.open(url, "_blank");
+            });
+        });
+    }, [selectedExternalOption]);
+    const waitingMessageLength = paymentWaitingMessage?.length;
+    useEffect(() => {
+        triggerResize();
+    }, [waitingMessageLength, externalURL]);
+    if (!selectedExternalOption) {
+        return jsx(PageContent, {});
+    }
+    return (jsxs(PageContent, { children: [jsx(ExternalPaymentSpinner, { logoURI: selectedExternalOption.logoURI, logoShape: selectedExternalOption.logoShape }), jsxs(ModalContent, { style: { marginLeft: 24, marginRight: 24 }, children: [jsx(ModalH1, { children: "Waiting for Payment" }), paymentWaitingMessage && (jsx(ModalBody, { style: { marginTop: 12, marginBottom: 12 }, children: paymentWaitingMessage }))] }), jsx(Button, { icon: jsx(ExternalLinkIcon, {}), onClick: () => {
+                    if (externalURL)
+                        window.open(externalURL, "_blank");
+                }, children: "Open in New Tab" })] }));
+};
+
+export { WaitingExternal as default };
+//# sourceMappingURL=index.js.map

package/build/src/components/Pages/WaitingExternal/index.js.map

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

package/build/src/components/Spinners/ExternalPaymentSpinner/index.js

@@ -0,0 +1,20 @@
+import { jsx } from 'react/jsx-runtime';
+import { AnimatePresence } from 'framer-motion';
+import CircleSpinner from '../CircleSpinner/index.js';
+import SquircleSpinner from '../SquircleSpinner/index.js';
+import { LoadingContainer, AnimationContainer } from '../styles.js';
+
+const ExternalPaymentSpinner = ({ logoURI, logoShape, showSpinner = true, }) => {
+    const optionSpinner = (() => {
+        if (logoShape === "circle") {
+            return (jsx(CircleSpinner, { logo: jsx("img", { src: logoURI }), loading: showSpinner, unavailable: false }));
+        }
+        else {
+            return (jsx(SquircleSpinner, { logo: jsx("img", { src: logoURI }), loading: showSpinner }));
+        }
+    })();
+    return (jsx(LoadingContainer, { children: jsx(AnimationContainer, { "$circle": logoShape === "circle", children: jsx(AnimatePresence, { children: optionSpinner }) }) }));
+};
+
+export { ExternalPaymentSpinner as default };
+//# sourceMappingURL=index.js.map

package/build/src/components/Spinners/ExternalPaymentSpinner/index.js.map

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

package/build/src/components/Spinners/TokenLogoSpinner/index.js

@@ -0,0 +1,13 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { AnimatePresence } from 'framer-motion';
+import { chainToLogo } from '../../../assets/chains.js';
+import CircleSpinner from '../CircleSpinner/index.js';
+import { LoadingContainer, AnimationContainer } from '../styles.js';
+import { ChainLogoContainer } from './styles.js';
+
+const TokenLogoSpinner = ({ token, showSpinner = true, }) => {
+    return (jsx(LoadingContainer, { children: jsx(AnimationContainer, { "$circle": true, children: jsxs(AnimatePresence, { children: [chainToLogo[token.chainId] && (jsx(ChainLogoContainer, { children: chainToLogo[token.chainId] }, "ChainLogoContainer")), jsx(CircleSpinner, { logo: jsx("img", { src: token.logoURI, alt: token.symbol }, token.logoURI), loading: showSpinner, unavailable: false }, "CircleSpinner")] }) }) }));
+};
+
+export { TokenLogoSpinner as default };
+//# sourceMappingURL=index.js.map

package/build/src/components/Spinners/TokenLogoSpinner/index.js.map

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