@daimo/pay 1.1.4 → 1.2.0

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

@@ -1,92 +1,37 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { DaimoPayOrderMode } from '@daimo/common';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { motion } from 'framer-motion';
-import { useState } from 'react';
 import { Ethereum, Optimism, Arbitrum, Base, Polygon, Solana } from '../../../assets/chains.js';
 import { USDC } from '../../../assets/coins.js';
 import defaultTheme from '../../../constants/defaultTheme.js';
 import styled from '../../../styles/styled/index.js';
-import { usePayContext } from '../../DaimoPay.js';
-import Button from '../Button/index.js';
+import { formatUsd } from '../../../utils/format.js';
+import { usePayContext, ROUTES } from '../../DaimoPay.js';
 
 /** Shows payment amount. */
 const OrderHeader = ({ minified = false }) => {
-    const { paymentState } = usePayContext();
-    const amountUsd = paymentState.daimoPayOrder?.destFinalCallTokenAmount.usd;
-    const isEditable = paymentState.daimoPayOrder?.mode === DaimoPayOrderMode.CHOOSE_AMOUNT;
-    const [editableAmount, setEditableAmount] = useState(amountUsd == null ? "" : amountUsd.toFixed(2));
-    const [isEditing, setIsEditing] = useState(false);
-    const handleSave = () => {
-        if (!isEditing)
-            return;
-        paymentState.setChosenUsd(Number(editableAmount));
-        setIsEditing(false);
-    };
-    const handleKeyDown = (e) => {
-        if (e.key === "Enter" && isEditing) {
-            handleSave();
-        }
-    };
-    const sanitizeAndSetAmount = (enteredUsd) => {
-        if (!enteredUsd.match(/^[0-9]*(\.[0-9]{0,2})?$/)) {
-            return;
+    const { paymentState, route } = usePayContext();
+    const orderUsd = paymentState.daimoPayOrder?.destFinalCallTokenAmount.usd;
+    const titleAmountContent = (() => {
+        if (paymentState.isDepositFlow) {
+            return route === ROUTES.SELECT_TOKEN ||
+                route === ROUTES.SOLANA_SELECT_TOKEN ? (
+            // TODO: make this match `ModalH1` font size for mobile
+            jsx("span", { style: { fontSize: "19px", lineHeight: "22px" }, children: "Your balances" })) : null;
         }
-        const [digitsBeforeDecimal, digitsAfterDecimal] = (() => {
-            if (enteredUsd.includes("."))
-                return enteredUsd.split(".");
-            else
-                return [enteredUsd, ""];
-        })();
-        if (digitsBeforeDecimal.length > 5 || digitsAfterDecimal.length > 2) {
-            return;
+        else {
+            return orderUsd != null ? (jsx("span", { children: formatUsd(orderUsd, "nearest") })) : null;
         }
-        setEditableAmount(enteredUsd);
-    };
-    const titleAmountContent = (() => {
-        const buttonStyles = (() => {
-            if (minified)
-                return {
-                    height: "24px",
-                    width: "42px",
-                    lineHeight: "12px",
-                    borderRadius: "6px",
-                    fontSize: "14px",
-                };
-            else
-                return {
-                    height: "30px",
-                    width: "54px",
-                    lineHeight: "16px",
-                    borderRadius: "8px",
-                    fontSize: "20px",
-                };
-        })();
-        return (jsxs(Fragment, { children: [isEditable && !minified && (jsx("div", { style: { width: buttonStyles.width, height: buttonStyles.height } })), !isEditing && amountUsd != null && (jsx("span", { children: new Intl.NumberFormat("en-US", {
-                        style: "currency",
-                        currency: "USD",
-                    }).format(amountUsd) })), isEditing && (jsxs("div", { style: { display: "flex" }, children: ["$", jsx(InputUnderlineField, { value: editableAmount, onChange: (e) => sanitizeAndSetAmount(e.target.value), onBlur: (e) => {
-                                if (!e.relatedTarget) {
-                                    setIsEditing(false);
-                                }
-                            }, onKeyDown: handleKeyDown })] })), isEditable && (jsx(Button, { variant: "primary", onClick: () => {
-                        if (isEditing)
-                            handleSave();
-                        else
-                            setIsEditing(true);
-                    }, style: {
-                        width: buttonStyles.width,
-                        height: buttonStyles.height,
-                        lineHeight: buttonStyles.lineHeight,
-                        borderRadius: buttonStyles.borderRadius,
-                        fontSize: buttonStyles.fontSize,
-                        margin: 0,
-                    }, children: isEditing ? "Save" : "Edit" }))] }));
     })();
     if (minified) {
-        return (jsxs(MinifiedContainer, { children: [jsx(MinifiedTitleAmount, { children: titleAmountContent }), jsx(CoinLogos, { "$size": 32 })] }));
+        if (titleAmountContent != null) {
+            return (jsxs(MinifiedContainer, { children: [jsx(MinifiedTitleAmount, { children: titleAmountContent }), jsx(CoinLogos, { "$size": 32 })] }));
+        }
+        else {
+            return (jsxs(MinifiedContainer, { children: [jsx(CoinLogos, {}), jsx(Subtitle, { children: "1000+ tokens accepted" })] }));
+        }
     }
     else {
-        return (jsxs(Fragment, { children: [jsx(TitleAmount, { children: titleAmountContent }), jsxs(AnyChainAnyCoinContainer, { children: [jsx(CoinLogos, {}), jsx(Subtitle, { children: "1000+ tokens accepted" })] })] }));
+        return (jsxs(Fragment, { children: [titleAmountContent && jsx(TitleAmount, { children: titleAmountContent }), jsxs(AnyChainAnyCoinContainer, { children: [jsx(CoinLogos, {}), jsx(Subtitle, { children: "1000+ tokens accepted" })] })] }));
     }
 };
 function CoinLogos({ $size = 24 }) {
@@ -102,42 +47,8 @@ function CoinLogos({ $size = 24 }) {
     const logoBlock = (element, index) => (jsx(LogoContainer, { "$marginLeft": index !== 0 ? -($size / 3) : 0, "$zIndex": logos.length - index, "$size": $size, transition: { duration: 0.5, ease: [0.175, 0.885, 0.32, 0.98] }, children: element }, index));
     return (jsx(Logos, { children: logos.map((element, index) => logoBlock(element, index)) }));
 }
-function InputUnderlineField({ value, onChange, onBlur, onKeyDown, }) {
-    // subtract width for decimal point if necessary
-    const width = value.length - 0.5 * (value.includes(".") ? 1 : 0) + "ch";
-    const selectAll = (e) => {
-        // When entering edit mode, select the amount for quicker editing
-        setTimeout(() => e.target.select(), 100);
-    };
-    return (jsxs("div", { style: { width: "auto", position: "relative" }, children: [jsx(InputField, { "$width": width, type: "text", pattern: "\\d*.\\d{2}", value: value, onChange: onChange, onBlur: onBlur, onFocus: selectAll, onKeyDown: onKeyDown, autoFocus: true }), jsx(Underline, {})] }));
-}
-const InputField = styled(motion.input) `
-  box-sizing: border-box;
-  background-color: transparent;
-  outline: none;
-  width: ${(props) => props.$width || "5ch"};
-  line-height: inherit;
-  font-size: inherit;
-  font-weight: inherit;
-  color: inherit;
-  border: none;
-  padding: 0;
-  &:focus {
-    box-sizing: border-box;
-    outline: none;
-    border: none;
-  }
-`;
-const Underline = styled(motion.div) `
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 2px;
-  background-color: var(--ck-body-color-muted);
-`;
 const TitleAmount = styled(motion.h1) `
-  margin: 0;
+  margin-bottom: 24px;
   padding: 0;
   line-height: 66px;
   font-size: 64px;
@@ -187,7 +98,7 @@ const AnyChainAnyCoinContainer = styled(motion.div) `
   justify-content: center;
   text-align: center;
   gap: 8px;
-  margin: 24px 0;
+  margin-bottom: 24px;
 `;
 const LogoContainer = styled(motion.div) `
   display: block;

package/build/src/components/Common/OrderHeader/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/PaymentBreakdown/index.js

@@ -0,0 +1,48 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import defaultTheme from '../../../constants/defaultTheme.js';
+import styled from '../../../styles/styled/index.js';
+import { ModalBody } from '../Modal/styles.js';
+
+const PaymentBreakdown = ({ paymentOption }) => {
+    const totalUsd = paymentOption.required.usd;
+    const feesUsd = paymentOption.fees.usd;
+    const subtotalUsd = totalUsd - feesUsd;
+    return (jsxs(FeesContainer, { children: [feesUsd > 0 && (jsxs(FeeRow, { children: [jsx(ModalBody, { children: "Subtotal" }), jsxs(ModalBody, { children: ["$", subtotalUsd.toFixed(2)] })] })), jsxs(FeeRow, { children: [jsx(ModalBody, { children: "Fees" }), feesUsd === 0 ? (jsx(Badge, { children: "Free" })) : (jsxs(ModalBody, { children: ["$", feesUsd.toFixed(2)] }))] }), jsxs(FeeRow, { style: { marginTop: 8 }, children: [jsx(ModalBody, { style: { fontWeight: 600 }, children: "Total" }), jsxs(ModalBody, { style: { fontWeight: 600 }, children: ["$", totalUsd.toFixed(2)] })] })] }));
+};
+const FeesContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  gap: 4px;
+  margin: 16px 0;
+
+  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
+    & ${ModalBody} {
+      margin: 0 !important;
+      max-width: 100% !important;
+      text-align: left !important;
+    }
+  }
+`;
+const FeeRow = styled.div `
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 50%;
+`;
+const Badge = styled.span `
+  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);
+`;
+
+export { PaymentBreakdown as default };
+//# sourceMappingURL=index.js.map

package/build/src/components/{Pages/WaitingOther → Common/PaymentBreakdown}/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/SwitchButton/index.js

@@ -0,0 +1,39 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { SwitchIcon } from '../../../assets/icons.js';
+import styled from '../../../styles/styled/index.js';
+
+const Container = styled.button `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  cursor: pointer;
+  width: fit-content;
+`;
+const IconWrapper = styled.div `
+  opacity: ${({ $isFlipped }) => ($isFlipped ? 1 : 1)};
+  transform: scaleY(${({ $isFlipped }) => ($isFlipped ? -1 : 1)});
+  transition: all 0.2s ease-in-out;
+
+  &.fade {
+    opacity: 0;
+    transform: scaleY(0);
+  }
+`;
+const SwitchButton = ({ onClick, children }) => {
+    const [isFlipped, setIsFlipped] = useState(false);
+    const [isFading, setIsFading] = useState(false);
+    const handleClick = () => {
+        setIsFading(true);
+        setTimeout(() => {
+            setIsFlipped(!isFlipped);
+            setIsFading(false);
+        }, 150); // Match the transition duration
+        onClick();
+    };
+    return (jsxs(Container, { onClick: handleClick, children: [jsx(IconWrapper, { "$isFlipped": isFlipped, className: isFading ? "fade" : "", children: jsx(SwitchIcon, {}) }), children] }));
+};
+
+export { SwitchButton as default };
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,24 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { motion } from 'framer-motion';
+import styled from 'styled-components';
+import { chainToLogo } from '../../../assets/chains.js';
+
+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;
+`;
+
+export { TokenChainLogo as default };
+//# sourceMappingURL=index.js.map

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

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

package/build/src/components/DaimoPay.js

@@ -20,7 +20,10 @@ var ROUTES;
 (function (ROUTES) {
     ROUTES["SELECT_METHOD"] = "daimoPaySelectMethod";
     ROUTES["SELECT_TOKEN"] = "daimoPaySelectToken";
-    ROUTES["WAITING_OTHER"] = "daimoPayWaitingOther";
+    ROUTES["SELECT_AMOUNT"] = "daimoPaySelectAmount";
+    ROUTES["SELECT_EXTERNAL_AMOUNT"] = "daimoPaySelectExternalAmount";
+    ROUTES["SELECT_DEPOSIT_ADDRESS_AMOUNT"] = "daimoPaySelectDepositAddressAmount";
+    ROUTES["WAITING_EXTERNAL"] = "daimoPayWaitingExternal";
     ROUTES["SELECT_DEPOSIT_ADDRESS_CHAIN"] = "daimoPaySelectDepositAddressChain";
     ROUTES["WAITING_DEPOSIT_ADDRESS"] = "daimoPayWaitingDepositAddress";
     ROUTES["PAY_WITH_TOKEN"] = "daimoPayPayWithToken";
@@ -28,6 +31,7 @@ var ROUTES;
     ROUTES["SOLANA_CONNECT"] = "daimoPaySolanaConnect";
     ROUTES["SOLANA_CONNECTOR"] = "daimoPaySolanaConnector";
     ROUTES["SOLANA_SELECT_TOKEN"] = "daimoPaySolanaSelectToken";
+    ROUTES["SOLANA_SELECT_AMOUNT"] = "daimoPaySolanaSelectAmount";
     ROUTES["SOLANA_PAY_WITH_TOKEN"] = "daimoPaySolanaPayWithToken";
     // Unused routes. Kept to minimize connectkit merge conflicts.
     ROUTES["ONBOARDING"] = "onboarding";
@@ -157,7 +161,8 @@ const DaimoPayProviderWithoutSolana = ({ children, theme = "auto", mode = "auto"
             return;
         }
         log(`[PAY] polling in ${intervalMs}ms`);
-        setTimeout(() => retryBackoff("refreshOrder", () => paymentState.refreshOrder()), intervalMs);
+        const timeout = setTimeout(() => retryBackoff("refreshOrder", () => paymentState.refreshOrder()), intervalMs);
+        return () => clearTimeout(timeout);
     }, [daimoPayOrder]);
     const showPayment = async (modalOptions) => {
         const { daimoPayOrder } = paymentState;

package/build/src/components/DaimoPay.js.map

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

package/build/src/components/DaimoPayButton/index.js

@@ -30,7 +30,6 @@ function DaimoPayButtonCustom(props) {
             toToken: props.toToken,
             toUnits: props.toUnits,
             toCallData: props.toCallData,
-            isAmountEditable: props.amountEditable ?? false,
             intent: props.intent,
             paymentOptions: props.paymentOptions,
             preferredChains: props.preferredChains,

package/build/src/components/DaimoPayButton/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/DaimoPayModal/index.js

@@ -10,25 +10,31 @@ import MobileConnectors from '../Pages/MobileConnectors/index.js';
 import Introduction from '../Pages/Onboarding/index.js';
 import SwitchNetworks from '../Pages/SwitchNetworks/index.js';
 import ConnectUsing from './ConnectUsing.js';
+import assert from 'assert';
 import { getAppName } from '../../defaultConfig.js';
 import { useChainIsSupported } from '../../hooks/useChainIsSupported.js';
 import { DaimoPayThemeProvider } from '../DaimoPayThemeProvider/DaimoPayThemeProvider.js';
 import Confirmation from '../Pages/Confirmation/index.js';
 import PayWithToken from '../Pages/PayWithToken/index.js';
+import SelectAmount from '../Pages/SelectAmount/index.js';
+import SelectDepositAddressAmount from '../Pages/SelectDepositAddressAmount/index.js';
 import SelectDepositAddressChain from '../Pages/SelectDepositAddressChain/index.js';
+import SelectExternalAmount from '../Pages/SelectExternalAmount/index.js';
 import SelectMethod from '../Pages/SelectMethod/index.js';
 import SelectToken from '../Pages/SelectToken/index.js';
 import ConnectSolana$1 from '../Pages/Solana/ConnectorSolana/index.js';
 import ConnectSolana from '../Pages/Solana/ConnectSolana/index.js';
 import PayWithSolanaToken from '../Pages/Solana/PayWithSolanaToken/index.js';
+import SelectSolanaAmount from '../Pages/Solana/SelectSolanaAmount/index.js';
 import SelectSolanaToken from '../Pages/Solana/SelectSolanaToken/index.js';
 import WaitingDepositAddress from '../Pages/WaitingDepositAddress/index.js';
-import WaitingOther from '../Pages/WaitingOther/index.js';
+import WaitingExternal from '../Pages/WaitingExternal/index.js';
 
 const customThemeDefault = {};
 const DaimoPayModal = ({ mode = "auto", theme = "auto", customTheme = customThemeDefault, lang = "en-US", }) => {
     const context = usePayContext();
-    const { setSelectedExternalOption, setSelectedTokenOption, setSelectedDepositAddressOption, setSelectedSolanaTokenOption, } = context.paymentState;
+    const paymentState = context.paymentState;
+    const { payParams, generatePreviewOrder, isDepositFlow, setPaymentWaitingMessage, setSelectedExternalOption, setSelectedTokenOption, setSelectedSolanaTokenOption, setSelectedDepositAddressOption, } = paymentState;
     const { isConnected, chain } = useAccount();
     const chainIsSupported = useChainIsSupported(chain?.id);
     //if chain is unsupported we enforce a "switch chain" prompt
@@ -48,50 +54,104 @@ const DaimoPayModal = ({ mode = "auto", theme = "auto", customTheme = customThem
         else if (context.route === ROUTES.SELECT_TOKEN) {
             context.setRoute(ROUTES.SELECT_METHOD);
         }
-        else if (context.route === ROUTES.WAITING_OTHER) {
+        else if (context.route === ROUTES.SELECT_AMOUNT) {
+            setSelectedTokenOption(undefined);
+            context.setRoute(ROUTES.SELECT_TOKEN);
+        }
+        else if (context.route === ROUTES.SELECT_EXTERNAL_AMOUNT) {
             setSelectedExternalOption(undefined);
             context.setRoute(ROUTES.SELECT_METHOD);
         }
+        else if (context.route === ROUTES.SELECT_DEPOSIT_ADDRESS_AMOUNT) {
+            setSelectedDepositAddressOption(undefined);
+            context.setRoute(ROUTES.SELECT_DEPOSIT_ADDRESS_CHAIN);
+        }
+        else if (context.route === ROUTES.WAITING_EXTERNAL) {
+            setPaymentWaitingMessage(undefined);
+            if (isDepositFlow) {
+                assert(payParams != null, "payParams cannot be null in deposit flow");
+                generatePreviewOrder(payParams);
+                context.setRoute(ROUTES.SELECT_EXTERNAL_AMOUNT);
+            }
+            else {
+                setSelectedExternalOption(undefined);
+                context.setRoute(ROUTES.SELECT_METHOD);
+            }
+        }
         else if (context.route === ROUTES.PAY_WITH_TOKEN) {
-            setSelectedTokenOption(undefined);
-            context.setRoute(ROUTES.SELECT_TOKEN);
+            if (isDepositFlow) {
+                assert(payParams != null, "payParams cannot be null in deposit flow");
+                generatePreviewOrder(payParams);
+                context.setRoute(ROUTES.SELECT_AMOUNT);
+            }
+            else {
+                setSelectedTokenOption(undefined);
+                context.setRoute(ROUTES.SELECT_TOKEN);
+            }
         }
         else if (context.route === ROUTES.ONBOARDING) {
             context.setRoute(ROUTES.CONNECTORS);
         }
         else if (context.route === ROUTES.WAITING_DEPOSIT_ADDRESS) {
-            setSelectedDepositAddressOption(undefined);
-            context.setRoute(ROUTES.SELECT_DEPOSIT_ADDRESS_CHAIN);
+            if (isDepositFlow) {
+                assert(payParams != null, "payParams cannot be null in deposit flow");
+                generatePreviewOrder(payParams);
+                context.setRoute(ROUTES.SELECT_DEPOSIT_ADDRESS_AMOUNT);
+            }
+            else {
+                setSelectedDepositAddressOption(undefined);
+                context.setRoute(ROUTES.SELECT_DEPOSIT_ADDRESS_CHAIN);
+            }
         }
-        else if (context.route === ROUTES.SOLANA_PAY_WITH_TOKEN) {
+        else if (context.route === ROUTES.SOLANA_SELECT_AMOUNT) {
             setSelectedSolanaTokenOption(undefined);
             context.setRoute(ROUTES.SOLANA_SELECT_TOKEN);
         }
+        else if (context.route === ROUTES.SOLANA_PAY_WITH_TOKEN) {
+            if (isDepositFlow) {
+                assert(payParams != null, "payParams cannot be null in deposit flow");
+                generatePreviewOrder(payParams);
+                context.setRoute(ROUTES.SOLANA_SELECT_AMOUNT);
+            }
+            else {
+                setSelectedSolanaTokenOption(undefined);
+                context.setRoute(ROUTES.SOLANA_SELECT_TOKEN);
+            }
+        }
         else {
             context.setRoute(ROUTES.SELECT_METHOD);
         }
     };
     const pages = {
-        daimoPaySelectMethod: jsx(SelectMethod, {}),
-        daimoPaySelectToken: jsx(SelectToken, {}),
-        daimoPayWaitingOther: jsx(WaitingOther, {}),
-        daimoPaySelectDepositAddressChain: jsx(SelectDepositAddressChain, {}),
-        daimoPayWaitingDepositAddress: jsx(WaitingDepositAddress, {}),
-        daimoPayConfirmation: jsx(Confirmation, {}),
-        daimoPayPayWithToken: jsx(PayWithToken, {}),
-        daimoPaySolanaConnect: jsx(ConnectSolana, {}),
-        daimoPaySolanaConnector: jsx(ConnectSolana$1, {}),
-        daimoPaySolanaSelectToken: jsx(SelectSolanaToken, {}),
-        daimoPaySolanaPayWithToken: jsx(PayWithSolanaToken, {}),
-        onboarding: jsx(Introduction, {}),
-        about: jsx(About, {}),
-        download: jsx(DownloadApp, {}),
-        connectors: jsx(Wallets, {}),
-        mobileConnectors: jsx(MobileConnectors, {}),
-        connect: jsx(ConnectUsing, {}),
-        switchNetworks: jsx(SwitchNetworks, {}),
+        [ROUTES.SELECT_METHOD]: jsx(SelectMethod, {}),
+        [ROUTES.SELECT_TOKEN]: jsx(SelectToken, {}),
+        [ROUTES.SELECT_AMOUNT]: jsx(SelectAmount, {}),
+        [ROUTES.SELECT_EXTERNAL_AMOUNT]: jsx(SelectExternalAmount, {}),
+        [ROUTES.SELECT_DEPOSIT_ADDRESS_AMOUNT]: jsx(SelectDepositAddressAmount, {}),
+        [ROUTES.WAITING_EXTERNAL]: jsx(WaitingExternal, {}),
+        [ROUTES.SELECT_DEPOSIT_ADDRESS_CHAIN]: jsx(SelectDepositAddressChain, {}),
+        [ROUTES.WAITING_DEPOSIT_ADDRESS]: jsx(WaitingDepositAddress, {}),
+        [ROUTES.CONFIRMATION]: jsx(Confirmation, {}),
+        [ROUTES.PAY_WITH_TOKEN]: jsx(PayWithToken, {}),
+        [ROUTES.SOLANA_CONNECT]: jsx(ConnectSolana, {}),
+        [ROUTES.SOLANA_CONNECTOR]: jsx(ConnectSolana$1, {}),
+        [ROUTES.SOLANA_SELECT_TOKEN]: jsx(SelectSolanaToken, {}),
+        [ROUTES.SOLANA_SELECT_AMOUNT]: jsx(SelectSolanaAmount, {}),
+        [ROUTES.SOLANA_PAY_WITH_TOKEN]: jsx(PayWithSolanaToken, {}),
+        // Unused routes. Kept to minimize connectkit merge conflicts.
+        [ROUTES.ONBOARDING]: jsx(Introduction, {}),
+        [ROUTES.ABOUT]: jsx(About, {}),
+        [ROUTES.DOWNLOAD]: jsx(DownloadApp, {}),
+        [ROUTES.CONNECTORS]: jsx(Wallets, {}),
+        [ROUTES.MOBILECONNECTORS]: jsx(MobileConnectors, {}),
+        [ROUTES.CONNECT]: jsx(ConnectUsing, {}),
+        [ROUTES.SWITCHNETWORKS]: jsx(SwitchNetworks, {}),
     };
     function hide() {
+        if (isDepositFlow) {
+            assert(payParams != null, "payParams cannot be null in deposit flow");
+            generatePreviewOrder(payParams);
+        }
         context.setOpen(false);
     }
     useEffect(() => {

package/build/src/components/DaimoPayModal/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/PayWithToken/index.js

@@ -1,15 +1,11 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, useEffect } from 'react';
 import { usePayContext, ROUTES } from '../../DaimoPay.js';
-import { ModalBody, PageContent, ModalContent, ModalH1 } from '../../Common/Modal/styles.js';
-import { motion, AnimatePresence } from 'framer-motion';
-import { css } from 'styled-components';
+import { PageContent, ModalContent, ModalH1 } from '../../Common/Modal/styles.js';
 import { useChainId, useSwitchChain } from 'wagmi';
-import { chainToLogo } from '../../../assets/chains.js';
-import defaultTheme from '../../../constants/defaultTheme.js';
-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) {
@@ -96,109 +92,8 @@ const PayWithToken = () => {
     useEffect(() => {
         triggerResize();
     }, [payState]);
-    return (jsxs(PageContent, { children: [jsx(LoadingContainer, { children: jsx(AnimationContainer, { "$circle": true, children: jsxs(AnimatePresence, { children: [jsx(ChainLogoContainer, { children: selectedTokenOption &&
-                                    chainToLogo[selectedTokenOption.required.token.chainId] }, "ChainLogoContainer"), jsx(CircleSpinner, { logo: jsx("img", { src: selectedTokenOption?.required.token.logoURI, alt: selectedTokenOption?.required.token.symbol }, selectedTokenOption?.required.token.logoURI), loading: true, unavailable: false }, "CircleSpinner")] }) }) }), jsxs(ModalContent, { style: { paddingBottom: 0 }, children: [jsx(ModalH1, { children: payState }), selectedTokenOption && (jsx(PaymentDetails, { selectedTokenOption: selectedTokenOption })), payState === PayState.RequestCancelled && (jsx(Button, { onClick: () => selectedTokenOption ? handleTransfer(selectedTokenOption) : null, children: "Retry Payment" }))] })] }));
+    return (jsxs(PageContent, { children: [selectedTokenOption && (jsx(TokenLogoSpinner, { token: selectedTokenOption.required.token })), jsxs(ModalContent, { style: { paddingBottom: 0 }, "$preserveDisplay": true, children: [jsx(ModalH1, { children: payState }), selectedTokenOption && (jsx(PaymentBreakdown, { paymentOption: selectedTokenOption })), payState === PayState.RequestCancelled && (jsx(Button, { onClick: () => selectedTokenOption ? handleTransfer(selectedTokenOption) : null, children: "Retry Payment" }))] })] }));
 };
-const PaymentDetails = ({ selectedTokenOption, }) => {
-    const totalUsd = selectedTokenOption.required.usd;
-    const feesUsd = selectedTokenOption.fees.usd;
-    const subtotalUsd = totalUsd - feesUsd;
-    return (jsxs(FeesContainer, { children: [feesUsd > 0 && (jsxs(FeeRow, { children: [jsx(ModalBody, { children: "Subtotal" }), jsxs(ModalBody, { children: ["$", subtotalUsd.toFixed(2)] })] })), jsxs(FeeRow, { children: [jsx(ModalBody, { children: "Fees" }), feesUsd === 0 ? (jsx(Badge, { children: "Free" })) : (jsxs(ModalBody, { children: ["$", feesUsd.toFixed(2)] }))] }), jsxs(FeeRow, { style: { marginTop: 8 }, children: [jsx(ModalBody, { style: { fontWeight: 600 }, children: "Total" }), jsxs(ModalBody, { style: { fontWeight: 600 }, children: ["$", totalUsd.toFixed(2)] })] })] }));
-};
-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;
-  --spinner-error-opacity: 0;
-  &:before {
-    content: "";
-    position: absolute;
-    inset: 1px;
-    opacity: 0;
-    background: var(--ck-body-color-danger);
-    ${(props) => props.$circle &&
-    css `
-        inset: -5px;
-        border-radius: 50%;
-        background: none;
-        box-shadow: inset 0 0 0 3.5px var(--ck-body-color-danger);
-      `}
-  }
-`;
-const ChainLogoContainer = styled(motion.div) `
-  z-index: 10;
-  position: absolute;
-  right: 2px;
-  bottom: 2px;
-  padding: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  border-radius: 16px;
-  overflow: hidden;
-
-  color: var(--ck-body-background);
-  transition: color 200ms ease;
-
-  &:before {
-    z-index: 5;
-    content: "";
-    position: absolute;
-    inset: 0;
-    opacity: 0;
-    transition: opacity 200ms ease;
-    background: var(--ck-body-color);
-  }
-
-  svg {
-    display: block;
-    position: relative;
-    width: 100%;
-    height: 100%;
-  }
-`;
-const FeesContainer = styled.div `
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 100%;
-  gap: 4px;
-  margin: 16px 0;
-
-  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
-    & ${ModalBody} {
-      margin: 0 !important;
-      max-width: 100% !important;
-      text-align: left !important;
-    }
-  }
-`;
-const FeeRow = styled.div `
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 50%;
-`;
-const Badge = styled.span `
-  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);
-`;
 
 export { PayWithToken as default };
 //# sourceMappingURL=index.js.map

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

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