@daimo/pay 1.9.2 → 1.9.5

package/build/index.js

@@ -2,7 +2,7 @@ import { http, useConnectors as useConnectors$1, useAccount, useSwitchChain, use
 import { mainnet, base as base$1, polygon, optimism, arbitrum, linea, bsc, sepolia, baseSepolia, worldchain, mantle } from 'wagmi/chains';
 import { safe, injected, coinbaseWallet, walletConnect } from '@wagmi/connectors';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { DaimoPayIntentStatus, assert, DaimoPayOrderMode, readDaimoPayOrderID, getOrderDestChainId, assertNotNull, getChainName, arbitrum as arbitrum$1, base as base$2, bsc as bsc$1, ethereum, linea as linea$1, mantle as mantle$1, optimism as optimism$1, polygon as polygon$1, worldchain as worldchain$1, solana, getAddressContraction, supportedChains, getChainExplorerTxUrl, ExternalPaymentOptions, DepositAddressPaymentOptions, ethereumUSDC, polygonUSDC, baseUSDC, arbitrumUSDC, optimismUSDC, isCCTPV1Chain, debugJson, writeDaimoPayOrderID, getOrderSourceChainId, DaimoPayEventType, getDaimoPayOrderView } from '@daimo/pay-common';
+import { DaimoPayIntentStatus, assert, DaimoPayOrderMode, isHydrated, readDaimoPayOrderID, getOrderDestChainId, assertNotNull, getChainName, arbitrum as arbitrum$1, base as base$2, bsc as bsc$1, ethereum, linea as linea$1, mantle as mantle$1, optimism as optimism$1, polygon as polygon$1, worldchain as worldchain$1, solana, getAddressContraction, supportedChains, getChainExplorerTxUrl, ExternalPaymentOptions, DepositAddressPaymentOptions, ethereumUSDC, polygonUSDC, baseUSDC, arbitrumUSDC, optimismUSDC, isCCTPV1Chain, debugJson, writeDaimoPayOrderID, DaimoPayOrderStatusSource, getOrderSourceChainId, DaimoPayEventType, getDaimoPayOrderView } from '@daimo/pay-common';
 import { Buffer } from 'buffer';
 import React, { createContext, useRef, useState, useEffect, useLayoutEffect, useMemo, useContext, useSyncExternalStore, useCallback, createElement } from 'react';
 import styled$1, { css, keyframes, ThemeProvider } from 'styled-components';
@@ -22,7 +22,7 @@ import { VersionedTransaction } from '@solana/web3.js';
 import { normalize } from 'viem/ens';
 
 var name = "@daimo/pay";
-var version = "1.9.2";
+var version = "1.9.5";
 var author = "Daimo";
 var homepage = "https://pay.daimo.com";
 var license = "BSD-2-Clause license";
@@ -61,7 +61,7 @@ var keywords = [
 	"crypto"
 ];
 var dependencies = {
-	"@daimo/pay-common": "1.9.2",
+	"@daimo/pay-common": "1.9.5",
 	"@rollup/plugin-typescript": "^12.1.2",
 	"@solana/wallet-adapter-base": "^0.9.23",
 	"@solana/wallet-adapter-react": "^0.15.35",
@@ -2163,6 +2163,7 @@ function useLockBodyScroll(initialLocked) {
     return [locked, setLocked];
 }
 
+const WarningIcon = () => (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", className: "size-6", width: "16", height: "16", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" }) }));
 const ExternalLinkIcon = ({ ...props }) => (jsxs("svg", { "aria-hidden": "true", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: {
         left: 0,
         top: 0,
@@ -2391,8 +2392,8 @@ function reduceUnhydrated(state, event) {
 }
 function reducePaymentUnpaid(state, event) {
     switch (event.type) {
-        case "payment_started":
-            return { type: "payment_started", order: state.order };
+        case "order_refreshed":
+            return reduceOrderRefreshed(state, event.order);
         case "error":
             return {
                 type: "error",
@@ -2407,14 +2408,8 @@ function reducePaymentUnpaid(state, event) {
 }
 function reducePaymentStarted(state, event) {
     switch (event.type) {
-        case "order_refreshed": {
-            assert(event.order.mode === DaimoPayOrderMode.HYDRATED, `[PAYMENT_REDUCER] order ${event.order.id} is ${event.order.intentStatus} but not hydrated`);
-            return { type: "payment_started", order: event.order };
-        }
-        case "dest_processed":
-            return event.order.intentStatus === DaimoPayIntentStatus.COMPLETED
-                ? { type: "payment_completed", order: event.order }
-                : { type: "payment_bounced", order: event.order };
+        case "order_refreshed":
+            return reduceOrderRefreshed(state, event.order);
         case "error":
             return {
                 type: "error",
@@ -2427,6 +2422,21 @@ function reducePaymentStarted(state, event) {
             return state;
     }
 }
+function reduceOrderRefreshed(state, order) {
+    assert(isHydrated(order), `[PAYMENT_REDUCER] unhydrated`);
+    switch (order.intentStatus) {
+        case DaimoPayIntentStatus.UNPAID:
+            return { type: "payment_unpaid", order };
+        case DaimoPayIntentStatus.STARTED:
+            return { type: "payment_started", order };
+        case DaimoPayIntentStatus.COMPLETED:
+            return { type: "payment_completed", order };
+        case DaimoPayIntentStatus.BOUNCED:
+            return { type: "payment_bounced", order };
+        default:
+            return state;
+    }
+}
 function reduceTerminal(state, event) {
     switch (event.type) {
         case "reset":
@@ -2460,10 +2470,9 @@ function waitForPaymentState(store, predicate) {
  * Will poll the given function at the specified interval. Stops when the
  * returned handle is invoked.
  */
-function startPolling({ key, intervalMs, pollFn, onResult, onError, maxErrors = 5, log = console.log, }) {
+function startPolling({ key, intervalMs, pollFn, onResult, onError, log = console.log, }) {
     let active = true;
     let timer;
-    let errorCount = 0;
     const stop = () => {
         active = false;
         clearTimeout(timer);
@@ -2475,7 +2484,6 @@ function startPolling({ key, intervalMs, pollFn, onResult, onError, maxErrors =
             const res = await pollFn();
             if (!active)
                 return;
-            errorCount = 0;
             log(`[POLL] ${key} success`);
             onResult(res);
         }
@@ -2484,11 +2492,6 @@ function startPolling({ key, intervalMs, pollFn, onResult, onError, maxErrors =
                 return;
             log(`[POLL] ${key} error: ${e}`);
             onError(e);
-            errorCount++;
-            if (errorCount >= maxErrors) {
-                log(`[POLL] ${key} reached max errors (${maxErrors}), giving up`);
-                return stop();
-            }
         }
         timer = setTimeout(tick, intervalMs);
     };
@@ -2526,7 +2529,7 @@ function attachPaymentEffectHandlers(store, trpc, log) {
         if (prev.type !== next.type) {
             // Start watching for source payment
             if (next.type === "payment_unpaid") {
-                pollFindSourcePayment(store, trpc, next.order.id);
+                pollFindPayments(store, trpc, next.order.id);
             }
             // Refresh the order to watch for destination processing
             if (next.type === "payment_started") {
@@ -2590,22 +2593,19 @@ function attachPaymentEffectHandlers(store, trpc, log) {
     };
     return cleanup;
 }
-async function pollFindSourcePayment(store, trpc, orderId) {
+async function pollFindPayments(store, trpc, orderId) {
     const key = `${PollerType.FIND_SOURCE_PAYMENT}:${orderId}`;
     const stopPolling = startPolling({
         key,
         intervalMs: 1_000,
-        pollFn: () => trpc.findSourcePayment.query({ orderId: orderId.toString() }),
-        onResult: (found) => {
+        pollFn: () => trpc.findOrderPayments.query({ orderId: orderId.toString() }),
+        onResult: (order) => {
             const state = store.getState();
-            // Check that we're still in the payment_unpaid state
             if (state.type !== "payment_unpaid") {
                 stopPolling();
+                return;
             }
-            else if (found) {
-                stopPolling();
-                store.dispatch({ type: "payment_started", order: state.order });
-            }
+            store.dispatch({ type: "order_refreshed", order });
         },
         onError: () => { },
     });
@@ -2620,16 +2620,12 @@ async function pollRefreshOrder(store, trpc, orderId) {
         onResult: (res) => {
             const state = store.getState();
             // Check that we're still in the payment_started state
-            if (state.type !== "payment_started")
+            if (state.type !== "payment_started") {
+                stopPolling();
                 return;
+            }
             const order = res.order;
             store.dispatch({ type: "order_refreshed", order });
-            if (order.intentStatus === "payment_completed" ||
-                order.intentStatus === "payment_bounced") {
-                assert(order.mode === DaimoPayOrderMode.HYDRATED, `[PAYMENT_EFFECTS] order ${order.id} is ${order.intentStatus} but not hydrated`);
-                store.dispatch({ type: "dest_processed", order });
-                stopPolling();
-            }
         },
         onError: () => { },
     });
@@ -2738,7 +2734,7 @@ async function runHydratePayIdEffects(store, trpc, prev, event) {
 async function runPayEthereumSourceEffects(store, trpc, prev, event) {
     const orderId = prev.order.id;
     try {
-        await trpc.processSourcePayment.mutate({
+        const order = await trpc.processSourcePayment.mutate({
             orderId: orderId.toString(),
             sourceInitiateTxHash: event.paymentTxHash,
             sourceChainId: event.sourceChainId,
@@ -2746,8 +2742,7 @@ async function runPayEthereumSourceEffects(store, trpc, prev, event) {
             sourceToken: event.sourceToken,
             sourceAmount: event.sourceAmount.toString(),
         });
-        // TODO: Update order state with updated txHash
-        store.dispatch({ type: "payment_started", order: prev.order });
+        store.dispatch({ type: "order_refreshed", order });
     }
     catch (e) {
         store.dispatch({ type: "error", order: prev.order, message: e.message });
@@ -2756,13 +2751,12 @@ async function runPayEthereumSourceEffects(store, trpc, prev, event) {
 async function runPaySolanaSourceEffects(store, trpc, prev, event) {
     const orderId = prev.order.id;
     try {
-        await trpc.processSolanaSourcePayment.mutate({
+        const order = await trpc.processSolanaSourcePayment.mutate({
             orderId: orderId.toString(),
             startIntentTxHash: event.paymentTxHash,
             token: event.sourceToken,
         });
-        // TODO: Update order state with updated txHash
-        store.dispatch({ type: "payment_started", order: prev.order });
+        store.dispatch({ type: "order_refreshed", order });
     }
     catch (e) {
         store.dispatch({ type: "error", order: prev.order, message: e.message });
@@ -7696,7 +7690,7 @@ const QRPlaceholder = styled(motion.div) `
     content: "";
     position: absolute;
     inset: 0;
-    transform: scale(1.5) rotate(45deg);
+    transform: scale(1.7) rotate(45deg);
     background-image: linear-gradient(
       90deg,
       rgba(255, 255, 255, 0) 50%,
@@ -7739,16 +7733,6 @@ const LogoIcon = styled(motion.div) `
     : css `
           width: 28%;
           height: 28%;
-          border-radius: 17px;
-          &:before {
-            pointer-events: none;
-            z-index: 2;
-            content: "";
-            position: absolute;
-            inset: 0;
-            border-radius: inherit;
-            box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.02);
-          }
         `}
 `;
 
@@ -8033,6 +8017,7 @@ const WalletItem = styled.button `
   text-align: center;
   transition: opacity 100ms ease;
   opacity: ${(props) => (props.$waiting ? 0.4 : 1)};
+  background: transparent;
 `;
 const WalletIcon = styled.div `
   z-index: 9;
@@ -10270,9 +10255,10 @@ const SelectDepositAddressAmount = () => {
     const { paymentState, setRoute, triggerResize } = usePayContext();
     const { selectedDepositAddressOption } = paymentState;
     const maxUsdLimit = paymentState.getOrderUsdLimit();
-    // const minimumMessage = `Minimum ${formatUsd(MIN_USD_VALUE, "up")}`;
+    const minUsd = selectedDepositAddressOption?.minimumUsd ?? 0;
+    const minimumMessage = `Minimum ${formatUsd(minUsd, "up")}`;
     const [usdInput, setUsdInput] = useState("");
-    const [message, setMessage] = useState("");
+    const [message, setMessage] = useState(minimumMessage);
     const [continueDisabled, setContinueDisabled] = useState(true);
     useEffect(() => {
         triggerResize();
@@ -10289,7 +10275,7 @@ const SelectDepositAddressAmount = () => {
             setMessage(`Maximum ${formatUsd(maxUsdLimit)}`);
         }
         else {
-            setMessage("");
+            setMessage(minimumMessage);
         }
         const usd = Number(sanitizeNumber(value));
         setContinueDisabled(usd <= 0 || usd > maxUsdLimit);
@@ -10612,6 +10598,8 @@ function SelectAnotherMethodButton() {
 
 const SelectDepositAddressChain = () => {
     const { setRoute, paymentState } = usePayContext();
+    const pay = useDaimoPay();
+    const { order } = pay;
     const { isDepositFlow, setSelectedDepositAddressOption, depositAddressOptions, } = paymentState;
     return (jsxs(PageContent, { children: [jsx(OrderHeader, { minified: true }), !depositAddressOptions.loading &&
                 depositAddressOptions.options?.length === 0 && (jsxs(ModalContent, { style: {
@@ -10625,6 +10613,9 @@ const SelectDepositAddressChain = () => {
                         id: option.id,
                         title: option.id,
                         icons: [option.logoURI],
+                        disabled: option.minimumUsd > 0 &&
+                            order?.mode === DaimoPayOrderMode.HYDRATED &&
+                            order.usdValue < option.minimumUsd,
                         onClick: () => {
                             setSelectedDepositAddressOption(option);
                             const meta = { event: "click-option", option: option.id };
@@ -10891,26 +10882,52 @@ function getDepositAddressOption(setRoute) {
     };
 }
 
-const TokenChainLogo = ({ token, size = 32, offset, }) => {
-    const s1 = useMemo(() => ({ width: size, height: size }), [size]);
-    const s2 = useMemo(() => ({ width: size / 2, height: size / 2, right: offset }), [size, offset]);
-    return (jsxs(TokenChainContainer, { style: s1, children: [jsx("img", { src: token.logoURI, alt: token.symbol, style: { borderRadius: 9999 } }), jsx(ChainContainer$1, { style: s2, children: chainToLogo[token.chainId] })] }));
+const TokenChainLogo = ({ token, size = 32, offset = 0, }) => {
+    const chainLogoSize = Math.round((size * 30) / 64);
+    return (jsxs(TokenChainContainer, { "$size": size, children: [jsx(TokenImage, { src: token.logoURI, alt: token.symbol, "$size": size }), jsx(ChainContainer$1, { "$size": chainLogoSize, "$offset": offset, children: chainToLogo[token.chainId] })] }));
 };
 const TokenChainContainer = styled(motion.div) `
-  width: 100%;
-  height: 100%;
+  position: relative;
+  width: ${(props) => props.$size}px;
+  height: ${(props) => props.$size}px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const TokenImage = styled.img `
+  width: ${(props) => props.$size}px;
+  height: ${(props) => props.$size}px;
+  border-radius: 50%;
+  object-fit: cover;
+  transition: transform 0.2s ease;
+
+  ${(props) => props.$showBorder &&
+    `
+    border: 2px solid var(--ck-body-background, #fff);
+  `}
 `;
 const ChainContainer$1 = styled(motion.div) `
   position: absolute;
-  border-radius: 9999px;
-  overflow: hidden;
+  width: ${(props) => props.$size}px;
+  height: ${(props) => props.$size}px;
+  min-width: ${(props) => props.$size}px;
+  min-height: ${(props) => props.$size}px;
   bottom: 0px;
-  right: 0px;
+  right: ${(props) => props.$offset}px;
+  border-radius: 50%;
+  aspect-ratio: 1 / 1;
+  overflow: hidden;
+  background: ${(props) => props.$showBorder ? "var(--ck-body-background, #fff)" : "transparent"};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
 
   svg {
-    position: absolute;
     width: 100%;
     height: 100%;
+    border-radius: 50%;
+    flex-shrink: 0;
   }
 `;
 
@@ -11309,7 +11326,8 @@ const CircleTimer = ({ total, size = 24, stroke = 3, currentTime, onTimeChange,
         return () => clearInterval(id);
     }, [target, onTimeChange]);
     const ratio = Math.round((left * 100) / total); // 0-100
-    const radius = Math.round((size - stroke) / 2); // integer radius
+    // Ensure stroke stays within viewBox: use floor to be conservative
+    const radius = Math.floor((size - stroke) / 2);
     const circumference = Math.round((2 * 314 * radius) / 100); // 2πr, π≈3.14
     const dashoffset = Math.round((circumference * (100 - ratio)) / 100);
     // colour transition: green → orange → red
@@ -11332,49 +11350,91 @@ function WaitingDepositAddress() {
     const context = usePayContext();
     const { triggerResize, paymentState } = context;
     const { payWithDepositAddress, selectedDepositAddressOption } = paymentState;
-    const [details, setDetails] = useState();
+    const { order } = useDaimoPay();
+    const [depAddr, setDepAddr] = useState();
     const [failed, setFailed] = useState(false);
+    // If we selected a deposit address option, generate the address...
     const generateDepositAddress = () => {
-        if (!selectedDepositAddressOption)
-            return;
-        payWithDepositAddress(selectedDepositAddressOption.id).then((details) => {
-            if (!details)
-                setFailed(true);
-            else
-                setDetails(details);
-        });
+        if (selectedDepositAddressOption == null) {
+            if (order == null || !isHydrated(order))
+                return;
+            if (order.sourceTokenAmount == null)
+                return;
+            // Pay underpaid order
+            const taPaid = order.sourceTokenAmount;
+            const usdPaid = taPaid.usd; // TODO: get usdPaid directly from the order
+            const usdToPay = Math.max(order.usdValue - usdPaid, 0.01);
+            const dispDecimals = taPaid.token.displayDecimals;
+            const unitsToPay = (usdToPay / taPaid.token.usd).toFixed(dispDecimals);
+            const unitsPaid = (Number(taPaid.amount) /
+                10 ** taPaid.token.decimals).toFixed(dispDecimals);
+            // Hack to always show a <= 60 minute countdown
+            let expirationS = (order.createdAt ?? 0) + 59.5 * 60;
+            if (order.expirationTs != null &&
+                Number(order.expirationTs) < expirationS) {
+                expirationS = Number(order.expirationTs);
+            }
+            setDepAddr({
+                address: order.intentAddr,
+                amount: unitsToPay,
+                underpayment: { unitsPaid, coin: taPaid.token.symbol },
+                coins: `${taPaid.token.symbol} on ${getChainName(taPaid.token.chainId)}`,
+                expirationS: expirationS,
+                uri: order.intentAddr,
+                displayToken: taPaid.token,
+                logoURI: "", // Not needed for underpaid orders
+            });
+        }
+        else {
+            payWithDepositAddress(selectedDepositAddressOption.id).then((details) => {
+                if (details) {
+                    setDepAddr({
+                        address: details.address,
+                        amount: details.amount,
+                        coins: details.suffix,
+                        expirationS: details.expirationS,
+                        uri: details.uri,
+                        displayToken: getDisplayToken(selectedDepositAddressOption),
+                        logoURI: selectedDepositAddressOption.logoURI,
+                    });
+                }
+                else {
+                    setFailed(true);
+                }
+            });
+        }
     };
-    // TODO: load payment status, show underpayment
     // eslint-disable-next-line react-hooks/exhaustive-deps
     useEffect(generateDepositAddress, [selectedDepositAddressOption]);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    useEffect(triggerResize, [details, failed]);
-    return (jsx(PageContent, { children: selectedDepositAddressOption == null ? null : failed ? (jsx(DepositFailed, { meta: selectedDepositAddressOption })) : (jsx(DepositAddressInfo, { meta: selectedDepositAddressOption, details: details, refresh: generateDepositAddress, triggerResize: triggerResize })) }));
+    useEffect(triggerResize, [depAddr, failed]);
+    return (jsx(PageContent, { children: failed ? (selectedDepositAddressOption && (jsx(DepositFailed, { name: selectedDepositAddressOption.id }))) : (jsx(DepositAddressInfo, { depAddr: depAddr, refresh: generateDepositAddress, triggerResize: triggerResize })) }));
 }
-function DepositAddressInfo({ meta, details, refresh, triggerResize, }) {
+function DepositAddressInfo({ depAddr, refresh, triggerResize, }) {
     const { isMobile } = useIsMobile();
-    const [remainingS, totalS] = useCountdown(details?.expirationS);
-    const isExpired = details?.expirationS != null && remainingS === 0;
+    const [remainingS, totalS] = useCountdown(depAddr?.expirationS);
+    const isExpired = depAddr?.expirationS != null && remainingS === 0;
     // eslint-disable-next-line react-hooks/exhaustive-deps
     useEffect(triggerResize, [isExpired]);
-    const displayToken = (() => {
-        switch (meta.id) {
-            case DepositAddressPaymentOptions.OP_MAINNET:
-                return optimismUSDC;
-            case DepositAddressPaymentOptions.ARBITRUM:
-                return arbitrumUSDC;
-            case DepositAddressPaymentOptions.BASE:
-                return baseUSDC;
-            case DepositAddressPaymentOptions.POLYGON:
-                return polygonUSDC;
-            case DepositAddressPaymentOptions.ETH_L1:
-                return ethereumUSDC;
-            default:
-                return null;
-        }
-    })();
-    const logoElement = displayToken ? (jsx(TokenChainLogo, { token: displayToken, size: 64, offset: -4 })) : (jsx("img", { src: meta.logoURI, width: "64px", height: "64px" }));
-    return (jsxs(ModalContent, { children: [isExpired ? (jsx(LogoRow, { children: jsx(Button, { onClick: refresh, style: { width: 128 }, children: "Refresh" }) })) : isMobile ? (jsx(LogoRow, { children: jsx(LogoWrap, { children: logoElement }) })) : (jsx(QRWrap, { children: jsx(CustomQRCode, { value: details?.uri, contentPadding: 24, size: 200, image: logoElement }) })), jsx(CopyableInfo, { details: details, remainingS: remainingS, totalS: totalS })] }));
+    const logoOffset = isMobile ? 4 : 0;
+    const logoElement = depAddr?.displayToken ? (jsx(TokenChainLogo, { token: depAddr.displayToken, size: 64, offset: logoOffset })) : (jsx("img", { src: depAddr?.logoURI, width: "64px", height: "64px" }));
+    return (jsxs(ModalContent, { children: [isExpired ? (jsx(LogoRow, { children: jsx(Button, { onClick: refresh, style: { width: 128 }, children: "Refresh" }) })) : isMobile ? (jsx(LogoRow, { children: jsx(LogoWrap, { children: logoElement }) })) : (jsx(QRWrap, { children: jsx(CustomQRCode, { value: depAddr?.uri, contentPadding: 24, size: 200, image: logoElement }) })), jsx(CopyableInfo, { depAddr: depAddr, remainingS: remainingS, totalS: totalS })] }));
+}
+function getDisplayToken(meta) {
+    switch (meta.id) {
+        case DepositAddressPaymentOptions.OP_MAINNET:
+            return optimismUSDC;
+        case DepositAddressPaymentOptions.ARBITRUM:
+            return arbitrumUSDC;
+        case DepositAddressPaymentOptions.BASE:
+            return baseUSDC;
+        case DepositAddressPaymentOptions.POLYGON:
+            return polygonUSDC;
+        case DepositAddressPaymentOptions.ETH_L1:
+            return ethereumUSDC;
+        default:
+            return null;
+    }
 }
 const LogoWrap = styled.div `
   position: relative;
@@ -11393,11 +11453,29 @@ const QRWrap = styled.div `
   margin: 0 auto;
   width: 280px;
 `;
-function CopyableInfo({ details, remainingS, totalS, }) {
-    const currencies = details?.suffix;
-    const isExpired = details?.expirationS != null && remainingS === 0;
-    return (jsxs(CopyableInfoWrapper, { children: [jsx(CopyRowOrThrobber, { title: "Send Exactly", value: details?.amount, smallText: currencies + " only", disabled: isExpired }), jsx(CopyRowOrThrobber, { title: "Receiving Address", value: details?.address, valueText: details && getAddressContraction(details.address), disabled: isExpired }), jsx(CountdownWrap, { children: jsx(CountdownTimer, { remainingS: remainingS, totalS: totalS }) })] }));
+function CopyableInfo({ depAddr, remainingS, totalS, }) {
+    const underpayment = depAddr?.underpayment;
+    const isExpired = depAddr?.expirationS != null && remainingS === 0;
+    return (jsxs(CopyableInfoWrapper, { children: [underpayment && jsx(UnderpaymentInfo, { underpayment: underpayment }), jsx(CopyRowOrThrobber, { title: "Send Exactly", value: depAddr?.amount, smallText: depAddr?.coins, disabled: isExpired }), jsx(CopyRowOrThrobber, { title: "Receiving Address", value: depAddr?.address, valueText: depAddr?.address && getAddressContraction(depAddr.address), disabled: isExpired }), jsx(CountdownWrap, { children: jsx(CountdownTimer, { remainingS: remainingS, totalS: totalS }) })] }));
 }
+function UnderpaymentInfo({ underpayment }) {
+    return (jsxs(UnderpaymentWrapper, { children: [jsxs(UnderpaymentHeader, { children: [jsx(WarningIcon, {}), jsxs("span", { children: ["Received ", underpayment.unitsPaid, " ", underpayment.coin] })] }), jsx(SmallText, { children: "Finish by sending the extra amount below." })] }));
+}
+const UnderpaymentWrapper = styled.div `
+  background: var(--ck-body-background-tertiary);
+  border-radius: 8px;
+  padding: 16px;
+  margin: 0 4px 16px 4px;
+  margin-bottom: 16px;
+`;
+const UnderpaymentHeader = styled.div `
+  font-weight: 500;
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+  gap: 8px;
+  margin-bottom: 8px;
+`;
 const CopyableInfoWrapper = styled.div `
   display: flex;
   flex-direction: column;
@@ -11441,8 +11519,8 @@ const formatTime = (sec) => {
     const s = `${sec % 60}`.padStart(2, "0");
     return `${m}:${s}`;
 };
-function DepositFailed({ meta, }) {
-    return (jsxs(ModalContent, { style: { marginLeft: 24, marginRight: 24 }, children: [jsxs(ModalH1, { children: [meta.id, " unavailable"] }), jsxs(ModalBody, { children: ["We're unable to process ", meta.id, " payments at this time. Please select another payment method."] }), jsx(SelectAnotherMethodButton, {})] }));
+function DepositFailed({ name }) {
+    return (jsxs(ModalContent, { style: { marginLeft: 24, marginRight: 24 }, children: [jsxs(ModalH1, { children: [name, " unavailable"] }), jsxs(ModalBody, { children: ["We're unable to process ", name, " payments at this time. Please select another payment method."] }), jsx(SelectAnotherMethodButton, {})] }));
 }
 const CopyRow = styled.button `
   display: block;
@@ -11451,6 +11529,7 @@ const CopyRow = styled.button `
   padding: 8px 16px;
 
   cursor: pointer;
+  background-color: var(--ck-body-background);
 
   display: flex;
   align-items: center;
@@ -11489,6 +11568,16 @@ const ValueContainer = styled.div `
 `;
 const SmallText = styled.span `
   font-size: 14px;
+  color: var(--ck-primary-button-color);
+`;
+const ValueText = styled.span `
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--ck-primary-button-color);
+`;
+const LabelText = styled(ModalBody) `
+  margin: 0;
+  text-align: left;
 `;
 const pulse = keyframes `
   0% {
@@ -11523,10 +11612,10 @@ function CopyRowOrThrobber({ title, value, valueText, smallText, disabled, }) {
         setTimeout(() => setCopied(false), 1000);
     };
     if (!value) {
-        return (jsxs(CopyRow, { children: [jsx(LabelRow, { children: jsx(ModalBody, { style: { margin: 0, textAlign: "left" }, children: title }) }), jsx(MainRow, { children: jsx(Skeleton, {}) })] }));
+        return (jsxs(CopyRow, { children: [jsx(LabelRow, { children: jsx(LabelText, { children: title }) }), jsx(MainRow, { children: jsx(Skeleton, {}) })] }));
     }
     const displayValue = valueText || value;
-    return (jsxs(CopyRow, { as: "button", onClick: handleCopy, disabled: disabled, children: [jsxs("div", { children: [jsx(LabelRow, { children: jsx(ModalBody, { style: { margin: 0, textAlign: "left" }, children: title }) }), jsx(MainRow, { children: jsxs(ValueContainer, { children: [jsx("span", { style: { fontWeight: 600 }, children: displayValue }), smallText && jsx(SmallText, { children: smallText })] }) })] }), jsx(CopyIconWrap, { children: jsx(CopyToClipboardIcon, { copied: copied, dark: true }) })] }));
+    return (jsxs(CopyRow, { as: "button", onClick: handleCopy, disabled: disabled, children: [jsxs("div", { children: [jsx(LabelRow, { children: jsx(LabelText, { children: title }) }), jsx(MainRow, { children: jsxs(ValueContainer, { children: [jsx(ValueText, { children: displayValue }), smallText && jsx(SmallText, { children: smallText })] }) })] }), jsx(CopyIconWrap, { children: jsx(CopyToClipboardIcon, { copied: copied, dark: true }) })] }));
 }
 const CopyIconWrap = styled.div `
   --color: var(--ck-copytoclipboard-stroke);
@@ -11983,7 +12072,12 @@ function useExternalPaymentOptions({ trpc, filterIds, platform, usdRequired, mod
         if (usdRequired != null && mode != null) {
             refreshExternalPaymentOptions(usdRequired, mode);
         }
-    }, [usdRequired, filterIds, platform, mode, trpc]);
+        // TODO: this is an ugly way to handle polling/refresh
+        // Notice the load-bearing JSON.stringify() to prevent a visible infinite
+        // refresh glitch on the SelectMethod screen. Replace this useEffect().
+        //
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [usdRequired, JSON.stringify(filterIds), platform, mode, trpc]);
     return { options, loading };
 }
 
@@ -12709,13 +12803,22 @@ const DaimoPayUIProvider = ({ children, theme = "auto", mode = "auto", customThe
         }
     };
     // Watch when the order gets paid and navigate to confirmation
+    // ...if underpaid, go to the deposit addr screen, let the user finish paying.
+    const isUnderpaid = pay.order?.mode === DaimoPayOrderMode.HYDRATED &&
+        pay.order.sourceStatus === DaimoPayOrderStatusSource.WAITING_PAYMENT &&
+        pay.order.sourceTokenAmount != null;
     useEffect(() => {
         if (pay.paymentState === "payment_started" ||
             pay.paymentState === "payment_completed" ||
             pay.paymentState === "payment_bounced") {
             setRoute(ROUTES.CONFIRMATION, { event: "payment-started" });
         }
-    }, [pay.paymentState, setRoute]);
+        else if (isUnderpaid) {
+            paymentState.setSelectedDepositAddressOption(undefined);
+            setRoute(ROUTES.WAITING_DEPOSIT_ADDRESS);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [pay.paymentState, setRoute, isUnderpaid]);
     const value = {
         theme: ckTheme,
         setTheme,