@daimo/pay 1.19.2 → 1.19.4

package/build/connectkit/src/components/Pages/WaitingDepositAddress/index.js

@@ -0,0 +1,503 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { isHydrated, getChainName, DepositAddressPaymentOptions, ethereumUSDC, polygonUSDC, baseUSDC, arbitrumUSDC, optimismUSDC, getAddressContraction } from '@daimo/pay-common';
+import { useState, useEffect, useMemo } from 'react';
+import { keyframes } from 'styled-components';
+import { AlertIcon, WarningIcon } from '../../../assets/icons.js';
+import { useDaimoPay } from '../../../hooks/useDaimoPay.js';
+import useIsMobile from '../../../hooks/useIsMobile.js';
+import useLocales from '../../../hooks/useLocales.js';
+import { usePayContext } from '../../../hooks/usePayContext.js';
+import styled from '../../../styles/styled/index.js';
+import Button from '../../Common/Button/index.js';
+import CircleTimer from '../../Common/CircleTimer.js';
+import CopyToClipboardIcon from '../../Common/CopyToClipboard/CopyToClipboardIcon.js';
+import CustomQRCode from '../../Common/CustomQRCode/index.js';
+import { ModalBody, PageContent, ModalContent, ModalH1 } from '../../Common/Modal/styles.js';
+import SelectAnotherMethodButton from '../../Common/SelectAnotherMethodButton/index.js';
+import TokenChainLogo from '../../Common/TokenChainLogo/index.js';
+
+const CenterContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 16px;
+  max-width: 100%;
+`;
+function WaitingDepositAddress() {
+  const context = usePayContext();
+  const { triggerResize, paymentState } = context;
+  const { payWithDepositAddress, selectedDepositAddressOption } = paymentState;
+  const { order } = useDaimoPay();
+  const tronUnderpay = order != null && isHydrated(order) && order.sourceTokenAmount != null && order.sourceTokenAmount.token.chainId === 10 && order.sourceTokenAmount.token.symbol.toUpperCase() === "USDT0" && Number(order.sourceTokenAmount.usd) < order.usdValue;
+  const [depAddr, setDepAddr] = useState();
+  const [failed, setFailed] = useState(false);
+  const generateDepositAddress = () => {
+    if (selectedDepositAddressOption == null) {
+      if (order == null || !isHydrated(order)) return;
+      if (order.sourceTokenAmount == null) return;
+      const taPaid = order.sourceTokenAmount;
+      const usdPaid = taPaid.usd;
+      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);
+      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,
+        uri: order.intentAddr,
+        displayToken: taPaid.token,
+        logoURI: ""
+        // Not needed for underpaid orders
+      });
+    } else {
+      const displayToken = getDisplayToken(selectedDepositAddressOption);
+      const logoURI = selectedDepositAddressOption.logoURI;
+      setDepAddr({
+        displayToken,
+        logoURI
+      });
+      payWithDepositAddress(selectedDepositAddressOption.id).then((details) => {
+        if (details) {
+          setDepAddr({
+            address: details.address,
+            amount: details.amount,
+            coins: details.suffix,
+            expirationS: details.expirationS,
+            uri: details.uri,
+            displayToken,
+            logoURI
+          });
+        } else {
+          setFailed(true);
+        }
+      });
+    }
+  };
+  useEffect(generateDepositAddress, [selectedDepositAddressOption]);
+  useEffect(triggerResize, [depAddr, failed]);
+  return /* @__PURE__ */ jsx(PageContent, { children: tronUnderpay ? /* @__PURE__ */ jsx(TronUnderpayContent, { orderId: order?.id?.toString() }) : failed ? selectedDepositAddressOption && /* @__PURE__ */ jsx(DepositFailed, { name: selectedDepositAddressOption.id }) : depAddr && /* @__PURE__ */ jsx(
+    DepositAddressInfo,
+    {
+      depAddr,
+      refresh: generateDepositAddress,
+      triggerResize
+    }
+  ) });
+}
+function TronUnderpayContent({ orderId }) {
+  const locales = useLocales();
+  return /* @__PURE__ */ jsx(
+    ModalContent,
+    {
+      style: {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        paddingBottom: 0,
+        position: "relative"
+      },
+      children: /* @__PURE__ */ jsxs(CenterContainer, { children: [
+        /* @__PURE__ */ jsx(FailIcon, {}),
+        /* @__PURE__ */ jsx(ModalH1, { style: { textAlign: "center", marginTop: 16 }, children: "USDT Tron Payment Was Too Low" }),
+        /* @__PURE__ */ jsx("div", { style: { height: 16 } }),
+        /* @__PURE__ */ jsxs(ModalBody, { style: { textAlign: "center" }, children: [
+          "Your funds are safe.",
+          /* @__PURE__ */ jsx("br", {}),
+          "Email support@daimo.com for a refund."
+        ] }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            onClick: () => window.open(
+              `mailto:support@daimo.com?subject=Underpaid%20USDT%20Tron%20payment%20for%20order%20${orderId}`,
+              "_blank"
+            ),
+            style: { marginTop: 16, width: 200 },
+            children: locales.contactSupport
+          }
+        )
+      ] })
+    }
+  );
+}
+function DepositAddressInfo({
+  depAddr,
+  refresh,
+  triggerResize
+}) {
+  const { isMobile } = useIsMobile();
+  const locales = useLocales();
+  const [remainingS, totalS] = useCountdown(depAddr?.expirationS);
+  const isExpired = depAddr?.expirationS != null && remainingS === 0;
+  const [showQR, setShowQR] = useState(!isMobile);
+  useEffect(triggerResize, [isExpired, showQR]);
+  const logoOffset = isMobile ? 4 : 0;
+  const logoElement = depAddr.displayToken ? /* @__PURE__ */ jsx(
+    TokenChainLogo,
+    {
+      token: depAddr.displayToken,
+      size: 64,
+      offset: logoOffset
+    }
+  ) : /* @__PURE__ */ jsx("img", { src: depAddr.logoURI, width: "64px", height: "64px" });
+  return /* @__PURE__ */ jsxs(ModalContent, { children: [
+    isExpired ? /* @__PURE__ */ jsx(LogoRow, { children: /* @__PURE__ */ jsx(Button, { onClick: refresh, style: { width: 128 }, children: locales.refresh }) }) : showQR ? /* @__PURE__ */ jsx(QRWrap, { children: /* @__PURE__ */ jsx(
+      CustomQRCode,
+      {
+        value: depAddr?.uri,
+        contentPadding: 24,
+        size: 200,
+        image: logoElement
+      }
+    ) }) : /* @__PURE__ */ jsx(LogoRow, { children: /* @__PURE__ */ jsx(LogoWrap, { children: logoElement }) }),
+    /* @__PURE__ */ jsx("div", { style: { height: 8 } }),
+    isMobile && /* @__PURE__ */ jsx(ShowHideQRRow, { showQR, setShowQR }),
+    /* @__PURE__ */ jsx(CopyableInfo, { depAddr, remainingS, 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;
+  }
+}
+function ShowHideQRRow({
+  showQR,
+  setShowQR
+}) {
+  const toggleQR = () => setShowQR(!showQR);
+  const locales = useLocales();
+  return /* @__PURE__ */ jsx(ShowQRWrap, { children: /* @__PURE__ */ jsxs(CopyRow, { onClick: toggleQR, children: [
+    /* @__PURE__ */ jsx(SmallText, { children: showQR ? locales.hideQR : locales.showQR }),
+    /* @__PURE__ */ jsx("div", { style: { width: 8 } }),
+    /* @__PURE__ */ jsx(ShowQRIcon, { children: /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        fill: "none",
+        viewBox: "0 0 24 24",
+        strokeWidth: 1.5,
+        stroke: "#666",
+        className: "size-6",
+        width: 20,
+        height: 20,
+        children: [
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              d: "M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0 1 3.75 9.375v-4.5ZM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 0 1-1.125-1.125v-4.5ZM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0 1 13.5 9.375v-4.5Z"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              d: "M6.75 6.75h.75v.75h-.75v-.75ZM6.75 16.5h.75v.75h-.75v-.75ZM16.5 6.75h.75v.75h-.75v-.75ZM13.5 13.5h.75v.75h-.75v-.75ZM13.5 19.5h.75v.75h-.75v-.75ZM19.5 13.5h.75v.75h-.75v-.75ZM19.5 19.5h.75v.75h-.75v-.75ZM16.5 16.5h.75v.75h-.75v-.75Z"
+            }
+          )
+        ]
+      }
+    ) })
+  ] }) });
+}
+const ShowQRWrap = styled.div`
+  display: flex;
+  justify-content: center;
+  color: var(--ck-primary-button-color);
+`;
+const ShowQRIcon = styled.div`
+  width: 20px;
+`;
+const LogoWrap = styled.div`
+  position: relative;
+  width: 64px;
+  height: 64px;
+`;
+const LogoRow = styled.div`
+  padding: 32px 0;
+  height: 128px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  justify-content: center;
+`;
+const QRWrap = styled.div`
+  margin: 0 auto;
+  width: 280px;
+`;
+function CopyableInfo({
+  depAddr,
+  remainingS,
+  totalS
+}) {
+  const underpayment = depAddr?.underpayment;
+  const isExpired = depAddr?.expirationS != null && remainingS === 0;
+  const locales = useLocales();
+  return /* @__PURE__ */ jsxs(CopyableInfoWrapper, { children: [
+    underpayment && /* @__PURE__ */ jsx(UnderpaymentInfo, { underpayment }),
+    /* @__PURE__ */ jsx(
+      CopyRowOrThrobber,
+      {
+        title: locales.sendExactly,
+        value: depAddr?.amount,
+        smallText: depAddr?.coins,
+        disabled: isExpired
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      CopyRowOrThrobber,
+      {
+        title: locales.receivingAddress,
+        value: depAddr?.address,
+        valueText: depAddr?.address && getAddressContraction(depAddr.address),
+        disabled: isExpired
+      }
+    ),
+    /* @__PURE__ */ jsx(CountdownWrap, { children: /* @__PURE__ */ jsx(CountdownTimer, { remainingS, totalS }) })
+  ] });
+}
+function UnderpaymentInfo({ underpayment }) {
+  return /* @__PURE__ */ jsxs(UnderpaymentWrapper, { children: [
+    /* @__PURE__ */ jsxs(UnderpaymentHeader, { children: [
+      /* @__PURE__ */ jsx(WarningIcon, {}),
+      /* @__PURE__ */ jsxs("span", { children: [
+        "Received ",
+        underpayment.unitsPaid,
+        " ",
+        underpayment.coin
+      ] })
+    ] }),
+    /* @__PURE__ */ 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;
+  justify-content: stretch;
+  gap: 0;
+`;
+const CountdownWrap = styled.div`
+  margin-top: 24px;
+  height: 16px;
+`;
+const FailIcon = styled(AlertIcon)`
+  color: var(--ck-body-color-alert);
+  width: 32px;
+  height: 32px;
+  margin-top: auto;
+  margin-bottom: 16px;
+`;
+function useCountdown(expirationS) {
+  const initMs = useMemo(() => Date.now(), [expirationS]);
+  const [ms, setMs] = useState(initMs);
+  useEffect(() => {
+    const interval = setInterval(() => setMs(Date.now()), 1e3);
+    return () => clearInterval(interval);
+  }, []);
+  if (expirationS == null) return [0, 0];
+  const remainingS = Math.max(0, expirationS - ms / 1e3 | 0);
+  const totalS = Math.max(0, expirationS - initMs / 1e3 | 0);
+  return [remainingS, totalS];
+}
+function CountdownTimer({
+  remainingS,
+  totalS
+}) {
+  const locales = useLocales();
+  if (totalS == 0 || remainingS > 3600) {
+    return /* @__PURE__ */ jsx(SmallText, { children: locales.sendOnlyOnce });
+  }
+  const isExpired = remainingS === 0;
+  return /* @__PURE__ */ jsx(ModalBody, { children: /* @__PURE__ */ jsxs(CountdownRow, { children: [
+    /* @__PURE__ */ jsx(
+      CircleTimer,
+      {
+        total: totalS,
+        currentTime: remainingS,
+        size: 18,
+        stroke: 3
+      }
+    ),
+    /* @__PURE__ */ jsx("strong", { children: isExpired ? "Expired" : formatTime(remainingS) })
+  ] }) });
+}
+const CountdownRow = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  font-variant-numeric: tabular-nums;
+`;
+const formatTime = (sec) => {
+  const m = `${Math.floor(sec / 60)}`.padStart(2, "0");
+  const s = `${sec % 60}`.padStart(2, "0");
+  return `${m}:${s}`;
+};
+function DepositFailed({ name }) {
+  return /* @__PURE__ */ jsxs(ModalContent, { style: { marginLeft: 24, marginRight: 24 }, children: [
+    /* @__PURE__ */ jsxs(ModalH1, { children: [
+      name,
+      " unavailable"
+    ] }),
+    /* @__PURE__ */ jsxs(ModalBody, { children: [
+      "We're unable to process ",
+      name,
+      " payments at this time. Please select another payment method."
+    ] }),
+    /* @__PURE__ */ jsx(SelectAnotherMethodButton, {})
+  ] });
+}
+const CopyRow = styled.button`
+  display: block;
+  height: 64px;
+  border-radius: 8px;
+  padding: 8px 16px;
+
+  cursor: pointer;
+  background-color: var(--ck-body-background);
+  background-color: var(--ck-body-background);
+
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  transition: all 100ms ease;
+
+  &:hover {
+    opacity: 0.8;
+  }
+
+  &:active {
+    transform: scale(0.98);
+    background-color: var(--ck-body-background-secondary);
+  }
+
+  &:disabled {
+    cursor: default;
+    opacity: 0.5;
+    transform: scale(0.98);
+    background-color: var(--ck-body-background-secondary);
+  }
+`;
+const LabelRow = styled.div`
+  margin-bottom: 4px;
+`;
+const MainRow = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+const ValueContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+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% {
+    opacity: 0.6;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.6;
+  }
+`;
+const Skeleton = styled.div`
+  width: 80px;
+  height: 16px;
+  border-radius: 8px;
+  background-color: rgba(0, 0, 0, 0.1);
+  animation: ${pulse} 1.5s ease-in-out infinite;
+`;
+function CopyRowOrThrobber({
+  title,
+  value,
+  valueText,
+  smallText,
+  disabled
+}) {
+  const [copied, setCopied] = useState(false);
+  const handleCopy = () => {
+    if (disabled) return;
+    if (!value) return;
+    const str = value.trim();
+    if (navigator.clipboard) {
+      navigator.clipboard.writeText(str);
+    }
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1e3);
+  };
+  if (!value) {
+    return /* @__PURE__ */ jsxs(CopyRow, { children: [
+      /* @__PURE__ */ jsx(LabelRow, { children: /* @__PURE__ */ jsx(LabelText, { children: title }) }),
+      /* @__PURE__ */ jsx(MainRow, { children: /* @__PURE__ */ jsx(Skeleton, {}) })
+    ] });
+  }
+  const displayValue = valueText || value;
+  return /* @__PURE__ */ jsxs(CopyRow, { as: "button", onClick: handleCopy, disabled, children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(LabelRow, { children: /* @__PURE__ */ jsx(LabelText, { children: title }) }),
+      /* @__PURE__ */ jsx(MainRow, { children: /* @__PURE__ */ jsxs(ValueContainer, { children: [
+        /* @__PURE__ */ jsx(ValueText, { children: displayValue }),
+        smallText && /* @__PURE__ */ jsx(SmallText, { children: smallText })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsx(CopyIconWrap, { children: /* @__PURE__ */ jsx(CopyToClipboardIcon, { copied, dark: true }) })
+  ] });
+}
+const CopyIconWrap = styled.div`
+  --color: var(--ck-copytoclipboard-stroke);
+  --bg: var(--ck-body-background);
+`;
+
+export { WaitingDepositAddress as default };
+//# sourceMappingURL=index.js.map

package/build/connectkit/src/components/Pages/WaitingDepositAddress/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../src/components/Pages/WaitingDepositAddress/index.tsx"],"sourcesContent":["import {\n  arbitrumUSDC,\n  baseUSDC,\n  DepositAddressPaymentOptionMetadata,\n  DepositAddressPaymentOptions,\n  ethereumUSDC,\n  getAddressContraction,\n  getChainName,\n  isHydrated,\n  optimismUSDC,\n  polygonUSDC,\n  type Token,\n} from \"@daimo/pay-common\";\nimport { useEffect, useMemo, useState } from \"react\";\nimport { keyframes } from \"styled-components\";\nimport { AlertIcon, WarningIcon } from \"../../../assets/icons\";\nimport { useDaimoPay } from \"../../../hooks/useDaimoPay\";\nimport useIsMobile from \"../../../hooks/useIsMobile\";\nimport useLocales from \"../../../hooks/useLocales\";\nimport { usePayContext } from \"../../../hooks/usePayContext\";\nimport styled from \"../../../styles/styled\";\nimport Button from \"../../Common/Button\";\nimport CircleTimer from \"../../Common/CircleTimer\";\nimport CopyToClipboardIcon from \"../../Common/CopyToClipboard/CopyToClipboardIcon\";\nimport CustomQRCode from \"../../Common/CustomQRCode\";\nimport {\n  ModalBody,\n  ModalContent,\n  ModalH1,\n  PageContent,\n} from \"../../Common/Modal/styles\";\nimport SelectAnotherMethodButton from \"../../Common/SelectAnotherMethodButton\";\nimport TokenChainLogo from \"../../Common/TokenChainLogo\";\n\n// Centered container for icon + text in Tron underpay screen\nconst CenterContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: 16px;\n  max-width: 100%;\n`;\n\ntype DepositAddr = {\n  displayToken: Token | null;\n  logoURI: string;\n  expirationS?: number;\n  uri?: string;\n  coins?: string;\n  amount?: string;\n  address?: string;\n  underpayment?: Underpayment;\n};\n\ntype Underpayment = {\n  unitsPaid: string;\n  coin: string;\n};\n\nexport default function WaitingDepositAddress() {\n  const context = usePayContext();\n  const { triggerResize, paymentState } = context;\n  const { payWithDepositAddress, selectedDepositAddressOption } = paymentState;\n  const { order } = useDaimoPay();\n\n  // Detect Optimism USDT0 under-payment: the order has received some funds\n  // but less than required.\n  const tronUnderpay =\n    order != null &&\n    isHydrated(order) &&\n    order.sourceTokenAmount != null &&\n    order.sourceTokenAmount.token.chainId === 10 &&\n    order.sourceTokenAmount.token.symbol.toUpperCase() === \"USDT0\" &&\n    Number(order.sourceTokenAmount.usd) < order.usdValue;\n\n  const [depAddr, setDepAddr] = useState<DepositAddr>();\n  const [failed, setFailed] = useState(false);\n\n  // If we selected a deposit address option, generate the address...\n  const generateDepositAddress = () => {\n    if (selectedDepositAddressOption == null) {\n      if (order == null || !isHydrated(order)) return;\n      if (order.sourceTokenAmount == null) return;\n\n      // Pay underpaid order\n      const taPaid = order.sourceTokenAmount;\n      const usdPaid = taPaid.usd; // TODO: get usdPaid directly from the order\n      const usdToPay = Math.max(order.usdValue - usdPaid, 0.01);\n      const dispDecimals = taPaid.token.displayDecimals;\n      const unitsToPay = (usdToPay / taPaid.token.usd).toFixed(dispDecimals);\n      const unitsPaid = (\n        Number(taPaid.amount) /\n        10 ** taPaid.token.decimals\n      ).toFixed(dispDecimals);\n\n      // (Removed duplicate tronUnderpay calculation now handled at top-level)\n      // Hack to always show a <= 60 minute countdown\n      let expirationS = (order.createdAt ?? 0) + 59.5 * 60;\n      if (\n        order.expirationTs != null &&\n        Number(order.expirationTs) < expirationS\n      ) {\n        expirationS = Number(order.expirationTs);\n      }\n\n      setDepAddr({\n        address: order.intentAddr,\n        amount: unitsToPay,\n        underpayment: { unitsPaid, coin: taPaid.token.symbol },\n        coins: `${taPaid.token.symbol} on ${getChainName(taPaid.token.chainId)}`,\n        expirationS: expirationS,\n        uri: order.intentAddr,\n        displayToken: taPaid.token,\n        logoURI: \"\", // Not needed for underpaid orders\n      });\n    } else {\n      const displayToken = getDisplayToken(selectedDepositAddressOption);\n      const logoURI = selectedDepositAddressOption.logoURI;\n      setDepAddr({\n        displayToken,\n        logoURI,\n      });\n      payWithDepositAddress(selectedDepositAddressOption.id).then((details) => {\n        if (details) {\n          setDepAddr({\n            address: details.address,\n            amount: details.amount,\n            coins: details.suffix,\n            expirationS: details.expirationS,\n            uri: details.uri,\n            displayToken,\n            logoURI,\n          });\n        } else {\n          setFailed(true);\n        }\n      });\n    }\n  };\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useEffect(generateDepositAddress, [selectedDepositAddressOption]);\n\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useEffect(triggerResize, [depAddr, failed]);\n\n  return (\n    <PageContent>\n      {tronUnderpay ? (\n        <TronUnderpayContent orderId={order?.id?.toString()} />\n      ) : failed ? (\n        selectedDepositAddressOption && (\n          <DepositFailed name={selectedDepositAddressOption.id} />\n        )\n      ) : (\n        depAddr && (\n          <DepositAddressInfo\n            depAddr={depAddr}\n            refresh={generateDepositAddress}\n            triggerResize={triggerResize}\n          />\n        )\n      )}\n    </PageContent>\n  );\n}\n\nfunction TronUnderpayContent({ orderId }: { orderId?: string }) {\n  const locales = useLocales();\n  return (\n    <ModalContent\n      style={{\n        display: \"flex\",\n        justifyContent: \"center\",\n        alignItems: \"center\",\n        paddingBottom: 0,\n        position: \"relative\",\n      }}\n    >\n      <CenterContainer>\n        <FailIcon />\n        <ModalH1 style={{ textAlign: \"center\", marginTop: 16 }}>\n          USDT Tron Payment Was Too Low\n        </ModalH1>\n        <div style={{ height: 16 }} />\n        <ModalBody style={{ textAlign: \"center\" }}>\n          Your funds are safe.\n          <br />\n          Email support@daimo.com for a refund.\n        </ModalBody>\n        <Button\n          onClick={() =>\n            window.open(\n              `mailto:support@daimo.com?subject=Underpaid%20USDT%20Tron%20payment%20for%20order%20${orderId}`,\n              \"_blank\",\n            )\n          }\n          style={{ marginTop: 16, width: 200 }}\n        >\n          {locales.contactSupport}\n        </Button>\n      </CenterContainer>\n    </ModalContent>\n  );\n}\n\nfunction DepositAddressInfo({\n  depAddr,\n  refresh,\n  triggerResize,\n}: {\n  depAddr: DepositAddr;\n  refresh: () => void;\n  triggerResize: () => void;\n}) {\n  const { isMobile } = useIsMobile();\n  const locales = useLocales();\n  const [remainingS, totalS] = useCountdown(depAddr?.expirationS);\n  const isExpired = depAddr?.expirationS != null && remainingS === 0;\n  const [showQR, setShowQR] = useState(!isMobile);\n\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useEffect(triggerResize, [isExpired, showQR]);\n\n  const logoOffset = isMobile ? 4 : 0;\n  const logoElement = depAddr.displayToken ? (\n    <TokenChainLogo\n      token={depAddr.displayToken}\n      size={64}\n      offset={logoOffset}\n    />\n  ) : (\n    <img src={depAddr.logoURI} width=\"64px\" height=\"64px\" />\n  );\n\n  return (\n    <ModalContent>\n      {isExpired ? (\n        <LogoRow>\n          <Button onClick={refresh} style={{ width: 128 }}>\n            {locales.refresh}\n          </Button>\n        </LogoRow>\n      ) : showQR ? (\n        <QRWrap>\n          <CustomQRCode\n            value={depAddr?.uri}\n            contentPadding={24}\n            size={200}\n            image={logoElement}\n          />\n        </QRWrap>\n      ) : (\n        <LogoRow>\n          <LogoWrap>{logoElement}</LogoWrap>\n        </LogoRow>\n      )}\n      <div style={{ height: 8 }} />\n      {isMobile && <ShowHideQRRow showQR={showQR} setShowQR={setShowQR} />}\n      <CopyableInfo depAddr={depAddr} remainingS={remainingS} totalS={totalS} />\n    </ModalContent>\n  );\n}\n\nfunction getDisplayToken(meta: DepositAddressPaymentOptionMetadata) {\n  switch (meta.id) {\n    case DepositAddressPaymentOptions.OP_MAINNET:\n      return optimismUSDC;\n    case DepositAddressPaymentOptions.ARBITRUM:\n      return arbitrumUSDC;\n    case DepositAddressPaymentOptions.BASE:\n      return baseUSDC;\n    case DepositAddressPaymentOptions.POLYGON:\n      return polygonUSDC;\n    case DepositAddressPaymentOptions.ETH_L1:\n      return ethereumUSDC;\n    default:\n      return null;\n  }\n}\n\nfunction ShowHideQRRow({\n  showQR,\n  setShowQR,\n}: {\n  showQR: boolean;\n  setShowQR: (showQR: boolean) => void;\n}) {\n  const toggleQR = () => setShowQR(!showQR);\n  const locales = useLocales();\n\n  return (\n    <ShowQRWrap>\n      <CopyRow onClick={toggleQR}>\n        <SmallText>{showQR ? locales.hideQR : locales.showQR}</SmallText>\n        <div style={{ width: 8 }} />\n        <ShowQRIcon>\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            strokeWidth={1.5}\n            stroke=\"#666\"\n            className=\"size-6\"\n            width={20}\n            height={20}\n          >\n            <path\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              d=\"M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0 1 3.75 9.375v-4.5ZM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 0 1-1.125-1.125v-4.5ZM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0 1 13.5 9.375v-4.5Z\"\n            />\n            <path\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              d=\"M6.75 6.75h.75v.75h-.75v-.75ZM6.75 16.5h.75v.75h-.75v-.75ZM16.5 6.75h.75v.75h-.75v-.75ZM13.5 13.5h.75v.75h-.75v-.75ZM13.5 19.5h.75v.75h-.75v-.75ZM19.5 13.5h.75v.75h-.75v-.75ZM19.5 19.5h.75v.75h-.75v-.75ZM16.5 16.5h.75v.75h-.75v-.75Z\"\n            />\n          </svg>\n        </ShowQRIcon>\n      </CopyRow>\n    </ShowQRWrap>\n  );\n}\n\nconst ShowQRWrap = styled.div`\n  display: flex;\n  justify-content: center;\n  color: var(--ck-primary-button-color);\n`;\n\nconst ShowQRIcon = styled.div`\n  width: 20px;\n`;\n\nconst LogoWrap = styled.div`\n  position: relative;\n  width: 64px;\n  height: 64px;\n`;\n\nconst LogoRow = styled.div`\n  padding: 32px 0;\n  height: 128px;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  justify-content: center;\n`;\n\nconst QRWrap = styled.div`\n  margin: 0 auto;\n  width: 280px;\n`;\n\nfunction CopyableInfo({\n  depAddr,\n  remainingS,\n  totalS,\n}: {\n  depAddr?: DepositAddr;\n  remainingS: number;\n  totalS: number;\n}) {\n  const underpayment = depAddr?.underpayment;\n  const isExpired = depAddr?.expirationS != null && remainingS === 0;\n  const locales = useLocales();\n  return (\n    <CopyableInfoWrapper>\n      {underpayment && <UnderpaymentInfo underpayment={underpayment} />}\n      <CopyRowOrThrobber\n        title={locales.sendExactly}\n        value={depAddr?.amount}\n        smallText={depAddr?.coins}\n        disabled={isExpired}\n      />\n      <CopyRowOrThrobber\n        title={locales.receivingAddress}\n        value={depAddr?.address}\n        valueText={depAddr?.address && getAddressContraction(depAddr.address)}\n        disabled={isExpired}\n      />\n      <CountdownWrap>\n        <CountdownTimer remainingS={remainingS} totalS={totalS} />\n      </CountdownWrap>\n    </CopyableInfoWrapper>\n  );\n}\n\nfunction UnderpaymentInfo({ underpayment }: { underpayment: Underpayment }) {\n  // Default message\n  return (\n    <UnderpaymentWrapper>\n      <UnderpaymentHeader>\n        <WarningIcon />\n        <span>\n          Received {underpayment.unitsPaid} {underpayment.coin}\n        </span>\n      </UnderpaymentHeader>\n      <SmallText>Finish by sending the extra amount below.</SmallText>\n    </UnderpaymentWrapper>\n  );\n}\n\nconst UnderpaymentWrapper = styled.div`\n  background: var(--ck-body-background-tertiary);\n  border-radius: 8px;\n  padding: 16px;\n  margin: 0 4px 16px 4px;\n  margin-bottom: 16px;\n`;\n\nconst UnderpaymentHeader = styled.div`\n  font-weight: 500;\n  display: flex;\n  justify-content: center;\n  align-items: flex-end;\n  gap: 8px;\n  margin-bottom: 8px;\n`;\n\nconst CopyableInfoWrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: stretch;\n  gap: 0;\n`;\n\nconst CountdownWrap = styled.div`\n  margin-top: 24px;\n  height: 16px;\n`;\n\nconst FailIcon = styled(AlertIcon)`\n  color: var(--ck-body-color-alert);\n  width: 32px;\n  height: 32px;\n  margin-top: auto;\n  margin-bottom: 16px;\n`;\n\nfunction useCountdown(expirationS?: number) {\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  const initMs = useMemo(() => Date.now(), [expirationS]);\n  const [ms, setMs] = useState(initMs);\n\n  useEffect(() => {\n    const interval = setInterval(() => setMs(Date.now()), 1000);\n    return () => clearInterval(interval);\n  }, []);\n\n  if (expirationS == null) return [0, 0];\n\n  const remainingS = Math.max(0, (expirationS - ms / 1000) | 0);\n  const totalS = Math.max(0, (expirationS - initMs / 1000) | 0);\n  return [remainingS, totalS];\n}\n\nfunction CountdownTimer({\n  remainingS,\n  totalS,\n}: {\n  remainingS: number;\n  totalS: number;\n}) {\n  const locales = useLocales();\n  if (totalS == 0 || remainingS > 3600) {\n    return <SmallText>{locales.sendOnlyOnce}</SmallText>;\n  }\n  const isExpired = remainingS === 0;\n\n  return (\n    <ModalBody>\n      <CountdownRow>\n        <CircleTimer\n          total={totalS}\n          currentTime={remainingS}\n          size={18}\n          stroke={3}\n        />\n        <strong>{isExpired ? \"Expired\" : formatTime(remainingS)}</strong>\n      </CountdownRow>\n    </ModalBody>\n  );\n}\n\nconst CountdownRow = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  font-variant-numeric: tabular-nums;\n`;\n\nconst formatTime = (sec: number) => {\n  const m = `${Math.floor(sec / 60)}`.padStart(2, \"0\");\n  const s = `${sec % 60}`.padStart(2, \"0\");\n  return `${m}:${s}`;\n};\n\nfunction DepositFailed({ name }: { name: string }) {\n  return (\n    <ModalContent style={{ marginLeft: 24, marginRight: 24 }}>\n      <ModalH1>{name} unavailable</ModalH1>\n      <ModalBody>\n        We&apos;re unable to process {name} payments at this time. Please select\n        another payment method.\n      </ModalBody>\n      <SelectAnotherMethodButton />\n    </ModalContent>\n  );\n}\n\nconst CopyRow = styled.button`\n  display: block;\n  height: 64px;\n  border-radius: 8px;\n  padding: 8px 16px;\n\n  cursor: pointer;\n  background-color: var(--ck-body-background);\n  background-color: var(--ck-body-background);\n\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n\n  transition: all 100ms ease;\n\n  &:hover {\n    opacity: 0.8;\n  }\n\n  &:active {\n    transform: scale(0.98);\n    background-color: var(--ck-body-background-secondary);\n  }\n\n  &:disabled {\n    cursor: default;\n    opacity: 0.5;\n    transform: scale(0.98);\n    background-color: var(--ck-body-background-secondary);\n  }\n`;\n\nconst LabelRow = styled.div`\n  margin-bottom: 4px;\n`;\n\nconst MainRow = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n`;\n\nconst ValueContainer = styled.div`\n  display: flex;\n  align-items: center;\n  gap: 8px;\n`;\n\nconst SmallText = styled.span`\n  font-size: 14px;\n  color: var(--ck-primary-button-color);\n`;\n\nconst ValueText = styled.span`\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--ck-primary-button-color);\n`;\n\nconst LabelText = styled(ModalBody)`\n  margin: 0;\n  text-align: left;\n`;\n\nconst pulse = keyframes`\n  0% {\n    opacity: 0.6;\n  }\n  50% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0.6;\n  }\n`;\n\nconst Skeleton = styled.div`\n  width: 80px;\n  height: 16px;\n  border-radius: 8px;\n  background-color: rgba(0, 0, 0, 0.1);\n  animation: ${pulse} 1.5s ease-in-out infinite;\n`;\n\nfunction CopyRowOrThrobber({\n  title,\n  value,\n  valueText,\n  smallText,\n  disabled,\n}: {\n  title: string;\n  value?: string;\n  valueText?: string;\n  smallText?: string;\n  disabled?: boolean;\n}) {\n  const [copied, setCopied] = useState(false);\n\n  const handleCopy = () => {\n    if (disabled) return;\n    if (!value) return;\n    const str = value.trim();\n    if (navigator.clipboard) {\n      navigator.clipboard.writeText(str);\n    }\n    setCopied(true);\n    setTimeout(() => setCopied(false), 1000);\n  };\n\n  if (!value) {\n    return (\n      <CopyRow>\n        <LabelRow>\n          <LabelText>{title}</LabelText>\n        </LabelRow>\n        <MainRow>\n          <Skeleton />\n        </MainRow>\n      </CopyRow>\n    );\n  }\n\n  const displayValue = valueText || value;\n\n  return (\n    <CopyRow as=\"button\" onClick={handleCopy} disabled={disabled}>\n      <div>\n        <LabelRow>\n          <LabelText>{title}</LabelText>\n        </LabelRow>\n        <MainRow>\n          <ValueContainer>\n            <ValueText>{displayValue}</ValueText>\n            {smallText && <SmallText>{smallText}</SmallText>}\n          </ValueContainer>\n        </MainRow>\n      </div>\n      <CopyIconWrap>\n        <CopyToClipboardIcon copied={copied} dark />\n      </CopyIconWrap>\n    </CopyRow>\n  );\n}\n\nconst CopyIconWrap = styled.div`\n  --color: var(--ck-copytoclipboard-stroke);\n  --bg: var(--ck-body-background);\n`;\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,89 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { usePayContext } from '../../../hooks/usePayContext.js';
+import { PageContent, ModalContent, ModalH1, ModalBody } from '../../Common/Modal/styles.js';
+import { ExternalPaymentOptions, shouldShowExternalQRCodeOnDesktop } from '@daimo/pay-common';
+import { ExternalLinkIcon } from '../../../assets/icons.js';
+import useIsMobile from '../../../hooks/useIsMobile.js';
+import useLocales from '../../../hooks/useLocales.js';
+import Button from '../../Common/Button/index.js';
+import ConnectWithQRCode from '../../DaimoPayModal/ConnectWithQRCode.js';
+import ExternalPaymentSpinner from '../../Spinners/ExternalPaymentSpinner/index.js';
+
+const WaitingExternal = () => {
+  const context = usePayContext();
+  const { triggerResize, paymentState } = context;
+  const { isMobile } = useIsMobile();
+  const locales = useLocales();
+  const { selectedExternalOption, payWithExternal, paymentWaitingMessage } = paymentState;
+  let isCoinbase = false;
+  if (selectedExternalOption) {
+    isCoinbase = selectedExternalOption.id === ExternalPaymentOptions.Coinbase;
+  }
+  const [externalURL, setExternalURL] = useState(null);
+  useEffect(() => {
+    if (!selectedExternalOption) return;
+    payWithExternal(selectedExternalOption.id).then((url) => {
+      setExternalURL(url);
+      if (!shouldShowExternalQRCodeOnDesktop) {
+        openExternalWindow(url);
+      }
+    });
+  }, [selectedExternalOption]);
+  const openExternalWindow = (url) => {
+    if (!isCoinbase || isMobile) {
+      window.open(url, "_blank");
+    } else {
+      let width = 500;
+      let height = 700;
+      const left = Math.max(
+        0,
+        Math.floor((window.innerWidth - width) / 2) + window.screenX
+      );
+      const top = Math.max(
+        0,
+        Math.floor((window.innerHeight - height) / 2) + window.screenY
+      );
+      window.open(
+        url,
+        "popupWindow",
+        `width=${width},height=${height},left=${left},top=${top},scrollbars=yes`
+      );
+    }
+  };
+  const waitingMessageLength = paymentWaitingMessage?.length;
+  useEffect(() => {
+    triggerResize();
+  }, [waitingMessageLength, externalURL]);
+  if (!selectedExternalOption) {
+    return /* @__PURE__ */ jsx(PageContent, {});
+  }
+  return shouldShowExternalQRCodeOnDesktop(selectedExternalOption.id) && !isMobile ? /* @__PURE__ */ jsx(ConnectWithQRCode, { externalUrl: externalURL ?? "" }) : /* @__PURE__ */ jsxs(PageContent, { children: [
+    /* @__PURE__ */ jsx(
+      ExternalPaymentSpinner,
+      {
+        logoURI: selectedExternalOption.logoURI,
+        logoShape: selectedExternalOption.logoShape
+      }
+    ),
+    /* @__PURE__ */ jsxs(ModalContent, { style: { marginLeft: 24, marginRight: 24 }, children: [
+      /* @__PURE__ */ jsx(ModalH1, { children: locales.waitingForPayment }),
+      paymentWaitingMessage && /* @__PURE__ */ jsx(ModalBody, { style: { marginTop: 12, marginBottom: 12 }, children: paymentWaitingMessage })
+    ] }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        icon: /* @__PURE__ */ jsx(ExternalLinkIcon, {}),
+        onClick: () => {
+          if (externalURL) {
+            openExternalWindow(externalURL);
+          }
+        },
+        children: selectedExternalOption.cta
+      }
+    )
+  ] });
+};
+
+export { WaitingExternal as default };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../src/components/Pages/WaitingExternal/index.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { usePayContext } from \"../../../hooks/usePayContext\";\n\nimport {\n  ModalBody,\n  ModalContent,\n  ModalH1,\n  PageContent,\n} from \"../../Common/Modal/styles\";\n\nimport {\n  ExternalPaymentOptions,\n  shouldShowExternalQRCodeOnDesktop,\n} from \"@daimo/pay-common\";\nimport { ExternalLinkIcon } from \"../../../assets/icons\";\nimport useIsMobile from \"../../../hooks/useIsMobile\";\nimport useLocales from \"../../../hooks/useLocales\";\nimport Button from \"../../Common/Button\";\nimport ConnectWithQRCode from \"../../DaimoPayModal/ConnectWithQRCode\";\nimport ExternalPaymentSpinner from \"../../Spinners/ExternalPaymentSpinner\";\n\nconst WaitingExternal: React.FC = () => {\n  const context = usePayContext();\n  const { triggerResize, paymentState } = context;\n  const { isMobile } = useIsMobile();\n  const locales = useLocales();\n  const { selectedExternalOption, payWithExternal, paymentWaitingMessage } =\n    paymentState;\n\n  let isCoinbase = false;\n  if (selectedExternalOption) {\n    isCoinbase = selectedExternalOption.id === ExternalPaymentOptions.Coinbase;\n  }\n\n  const [externalURL, setExternalURL] = useState<string | null>(null);\n\n  useEffect(() => {\n    if (!selectedExternalOption) return;\n    payWithExternal(selectedExternalOption.id).then((url) => {\n      setExternalURL(url);\n      if (!shouldShowExternalQRCodeOnDesktop) {\n        openExternalWindow(url);\n      }\n    });\n  }, [selectedExternalOption]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  const openExternalWindow = (url: string) => {\n    if (!isCoinbase || isMobile) {\n      // for non-exchange apps: open in a new tab\n      window.open(url, \"_blank\");\n    } else {\n      // for Coinbase: open in a popup window\n      // in portrait mode in the center of the screen\n      let width = 500;\n      let height = 700;\n      const left = Math.max(\n        0,\n        Math.floor((window.innerWidth - width) / 2) + window.screenX,\n      );\n      const top = Math.max(\n        0,\n        Math.floor((window.innerHeight - height) / 2) + window.screenY,\n      );\n\n      window.open(\n        url,\n        \"popupWindow\",\n        `width=${width},height=${height},left=${left},top=${top},scrollbars=yes`,\n      );\n    }\n  };\n\n  const waitingMessageLength = paymentWaitingMessage?.length;\n\n  useEffect(() => {\n    triggerResize();\n  }, [waitingMessageLength, externalURL]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  if (!selectedExternalOption) {\n    return <PageContent></PageContent>;\n  }\n\n  return shouldShowExternalQRCodeOnDesktop(selectedExternalOption.id) &&\n    !isMobile ? (\n    <ConnectWithQRCode externalUrl={externalURL ?? \"\"} />\n  ) : (\n    <PageContent>\n      <ExternalPaymentSpinner\n        logoURI={selectedExternalOption.logoURI}\n        logoShape={selectedExternalOption.logoShape}\n      />\n      <ModalContent style={{ marginLeft: 24, marginRight: 24 }}>\n        <ModalH1>{locales.waitingForPayment}</ModalH1>\n        {paymentWaitingMessage && (\n          <ModalBody style={{ marginTop: 12, marginBottom: 12 }}>\n            {paymentWaitingMessage}\n          </ModalBody>\n        )}\n      </ModalContent>\n      <Button\n        icon={<ExternalLinkIcon />}\n        onClick={() => {\n          if (externalURL) {\n            openExternalWindow(externalURL);\n          }\n        }}\n      >\n        {selectedExternalOption.cta}\n      </Button>\n    </PageContent>\n  );\n};\n\nexport default WaitingExternal;\n"],"names":[],"mappings":"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"}