@daimo/pay 1.16.0 → 1.16.2

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/components/Common/OptionsList/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx","_Fragment"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../../src/components/Common/OptionsList/index.tsx"],"sourcesContent":["import { motion } from \"framer-motion\";\nimport { useEffect } from \"react\";\nimport { keyframes } from \"styled-components\";\nimport { usePayContext } from \"../../../hooks/usePayContext\";\nimport styled from \"../../../styles/styled\";\nimport { OrDivider } from \"../Modal\";\nimport { ScrollArea } from \"../ScrollArea\";\nimport {\n  OptionButton,\n  OptionLabel,\n  OptionSubtitle,\n  OptionTitle,\n  OptionsContainer,\n} from \"./styles\";\n\nexport interface Option {\n  id: string;\n  sortValue?: number;\n  title: string;\n  subtitle?: string;\n  icons: (React.ReactNode | string)[];\n  onClick: () => void;\n  disabled?: boolean;\n}\n\nexport const OptionsList = ({\n  options,\n  isLoading,\n  requiredSkeletons,\n  scrollHeight = 300,\n  orDivider = false,\n  hideBottomLine = false,\n}: {\n  options: Option[];\n  isLoading?: boolean;\n  requiredSkeletons?: number;\n  scrollHeight?: number;\n  orDivider?: boolean;\n  hideBottomLine?: boolean;\n}) => {\n  const { triggerResize, log } = usePayContext();\n  const optionsLength = options.length;\n\n  useEffect(() => {\n    log(`[OPTIONS RESIZE]: ${optionsLength}, triggering resize`);\n    if (optionsLength > 0) triggerResize();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [optionsLength]);\n\n  if (isLoading) {\n    const skeletonCount = requiredSkeletons\n      ? Math.max(requiredSkeletons - optionsLength, 0)\n      : 0;\n\n    return (\n      <OptionsContainer $totalResults={options.length}>\n        {options.map((option) => (\n          <OptionItem key={option.id} option={option} />\n        ))}\n        {isLoading &&\n          Array.from({ length: skeletonCount }).map((_, index) => (\n            <SkeletonOptionItem key={index} />\n          ))}\n      </OptionsContainer>\n    );\n  }\n\n  return (\n    <>\n      <ScrollArea\n        mobileDirection={\"vertical\"}\n        height={scrollHeight}\n        hideBottomLine={orDivider || hideBottomLine}\n        totalItems={options.length}\n      >\n        <OptionsContainer $totalResults={options.length}>\n          {options.map((option) => (\n            <OptionItem key={option.id} option={option} />\n          ))}\n        </OptionsContainer>\n      </ScrollArea>\n      {orDivider && <OrDivider />}\n    </>\n  );\n};\n\nconst SkeletonOptionItem = () => {\n  return (\n    <OptionButton type=\"button\">\n      <SkeletonIcon />\n      <SkeletonLabel />\n    </OptionButton>\n  );\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 SkeletonIcon = styled.div`\n  position: absolute;\n  right: 20px;\n  width: 32px;\n  height: 32px;\n  border-radius: 22.5%;\n  background-color: rgba(0, 0, 0, 0.1);\n  animation: ${pulse} 1.5s ease-in-out infinite;\n`;\n\nconst SkeletonLabel = styled.div`\n  width: 100px;\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\nconst OptionItem = ({ option }: { option: Option }) => {\n  const hydratedIcons = option.icons.map((icon) => {\n    if (typeof icon === \"string\") {\n      return <img key={option.id} src={icon} alt=\"\" />;\n    }\n    return icon;\n  });\n\n  const iconContent = (() => {\n    return (\n      <IconStackContainer>\n        {hydratedIcons.map((icon, index) => (\n          <IconStackItem\n            key={index}\n            $marginRight={index !== hydratedIcons.length - 1 ? -12 : 0}\n            $zIndex={hydratedIcons.length - index}\n          >\n            {icon}\n          </IconStackItem>\n        ))}\n      </IconStackContainer>\n    );\n  })();\n\n  return (\n    <OptionButton\n      type=\"button\"\n      onClick={option.onClick}\n      disabled={option.disabled}\n    >\n      {iconContent}\n      <OptionLabel>\n        <OptionTitle>{option.title}</OptionTitle>\n        {option.subtitle && <OptionSubtitle>{option.subtitle}</OptionSubtitle>}\n      </OptionLabel>\n    </OptionButton>\n  );\n};\n\nconst IconStackContainer = styled(motion.div)`\n  position: absolute;\n  right: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`;\n\nconst IconStackItem = styled(motion.div)<{\n  $marginRight?: number;\n  $zIndex?: number;\n}>`\n  display: block;\n  overflow: hidden;\n  user-select: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-right: ${(props) => props.$marginRight || 0}px;\n  z-index: ${(props) => props.$zIndex || 2};\n  width: 32px;\n  height: 32px;\n  overflow: hidden;\n  svg,\n  img {\n    display: block;\n    position: relative;\n    pointer-events: none;\n    overflow: hidden;\n    width: 100%;\n    height: 100%;\n  }\n  border-radius: 22.5%;\n`;\n"],"names":[],"mappings":"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"}

package/build/src/components/Common/OptionsList/styles.js

@@ -2,10 +2,10 @@ import { css } from 'styled-components';
 import styled from '../../../styles/styled/index.js';
 import { motion } from 'framer-motion';
 
-const OptionButton = styled(motion.button) `
+const OptionButton = styled(motion.button)`
   display: block;
   text-decoration: none;
-  cursor: ${(props) => (props.disabled ? "default" : "pointer")};
+  cursor: ${(props) => props.disabled ? "default" : "pointer"};
   user-select: none;
   position: relative;
   display: flex;
@@ -97,7 +97,7 @@ const OptionButton = styled(motion.button) `
     }
   }
 `;
-const OptionLabel = styled(motion.span) `
+const OptionLabel = styled(motion.span)`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -107,13 +107,13 @@ const OptionLabel = styled(motion.span) `
   padding: 2px 0;
   padding-right: 38px;
 `;
-const OptionTitle = styled(motion.span) `
+const OptionTitle = styled(motion.span)`
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
   width: 100%;
 `;
-const OptionSubtitle = styled(motion.span) `
+const OptionSubtitle = styled(motion.span)`
   font-size: 14px;
   opacity: 0.6;
   font-weight: 400;
@@ -122,14 +122,13 @@ const OptionSubtitle = styled(motion.span) `
   overflow: hidden;
   width: 100%;
 `;
-const OptionsContainer = styled.div `
+const OptionsContainer = styled.div`
   transition: opacity 300ms ease;
   display: flex;
   flex-direction: column;
   gap: 12px;
 
-  ${(props) => props.$disabled &&
-    css `
+  ${(props) => props.$disabled && css`
       pointer-events: none;
       opacity: 0.4;
     `}

package/build/src/components/Common/OptionsList/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../../src/components/Common/OptionsList/styles.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;AAKa,MAAA,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,CAAA,CAAA;;;AAGrC,UAAA,EAAA,CAAC,KAAK,MAAM,KAAK,CAAC,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2F7D;AAEW,MAAA,WAAW,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA,CAAA;;;;;;;;;EAS5C;AAEW,MAAA,WAAW,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA,CAAA;;;;;EAK5C;AAEW,MAAA,cAAc,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA,CAAA;;;;;;;;EAQ/C;AAEW,MAAA,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAExC,CAAA;;;;;;AAME,EAAA,EAAA,CAAC,KAAK,KACN,KAAK,CAAC,SAAS;AACf,IAAA,GAAG,CAAA,CAAA;;;AAGF,IAAA,CAAA,CAAA;;;;;"}
+{"version":3,"file":"styles.js","sources":["../../../../../src/components/Common/OptionsList/styles.ts"],"sourcesContent":["import { css } from \"styled-components\";\nimport styled from \"../../../styles/styled\";\n\nimport { motion } from \"framer-motion\";\n\nexport const OptionButton = styled(motion.button)`\n  display: block;\n  text-decoration: none;\n  cursor: ${(props) => (props.disabled ? \"default\" : \"pointer\")};\n  user-select: none;\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: 0 20px;\n  height: 64px;\n  font-size: 17px;\n  font-weight: var(--ck-primary-button-font-weight, 500);\n  line-height: 20px;\n  text-align: var(--ck-body-button-text-align, left);\n  transition: 180ms ease;\n  transition-property: background, color, box-shadow, transform, opacity;\n  will-change: transform, box-shadow, background-color, color, opacity;\n\n  --fallback-color: var(--ck-primary-button-color);\n  --fallback-background: var(--ck-primary-button-background);\n  --fallback-box-shadow: var(--ck-primary-button-box-shadow);\n  --fallback-border-radius: var(--ck-primary-button-border-radius);\n\n  --color: var(--ck-primary-button-color, var(--fallback-color));\n  --background: var(--ck-primary-button-background, var(--fallback-background));\n  --box-shadow: var(--ck-primary-button-box-shadow, var(--fallback-box-shadow));\n  --border-radius: var(\n    --ck-primary-button-border-radius,\n    var(--fallback-border-radius)\n  );\n\n  --hover-color: var(--ck-primary-button-hover-color, var(--color));\n  --hover-background: var(\n    --ck-primary-button-hover-background,\n    var(--background)\n  );\n  --hover-box-shadow: var(\n    --ck-primary-button-hover-box-shadow,\n    var(--box-shadow)\n  );\n  --hover-border-radius: var(\n    --ck-primary-button-hover-border-radius,\n    var(--border-radius)\n  );\n\n  --active-color: var(--ck-primary-button-active-color, var(--hover-color));\n  --active-background: var(\n    --ck-primary-button-active-background,\n    var(--hover-background)\n  );\n  --active-box-shadow: var(\n    --ck-primary-button-active-box-shadow,\n    var(--hover-box-shadow)\n  );\n  --active-border-radius: var(\n    --ck-primary-button-active-border-radius,\n    var(--hover-border-radius)\n  );\n\n  color: var(--color);\n  background: var(--background);\n  box-shadow: var(--box-shadow);\n  border-radius: var(--border-radius);\n\n  &:disabled {\n    transition: 180ms ease;\n    opacity: 0.4;\n  }\n\n  --bg: var(--background);\n  &:not(:disabled) {\n    &:hover {\n      color: var(--hover-color);\n      background: var(--hover-background);\n      box-shadow: var(--hover-box-shadow);\n      border-radius: var(--hover-border-radius);\n      --bg: var(--hover-background, var(--background));\n    }\n    &:focus-visible {\n      transition-duration: 100ms;\n      color: var(--hover-color);\n      background: var(--hover-background);\n      box-shadow: var(--hover-box-shadow);\n      border-radius: var(--hover-border-radius);\n      --bg: var(--hover-background, var(--background));\n    }\n    &:active {\n      color: var(--active-color);\n      background: var(--active-background);\n      box-shadow: var(--active-box-shadow);\n      border-radius: var(--active-border-radius);\n      --bg: var(--active-background, var(--background));\n    }\n  }\n`;\n\nexport const OptionLabel = styled(motion.span)`\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 2px;\n  width: 100%;\n  overflow: hidden;\n  padding: 2px 0;\n  padding-right: 38px;\n`;\n\nexport const OptionTitle = styled(motion.span)`\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  width: 100%;\n`;\n\nexport const OptionSubtitle = styled(motion.span)`\n  font-size: 14px;\n  opacity: 0.6;\n  font-weight: 400;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  width: 100%;\n`;\n\nexport const OptionsContainer = styled.div<{\n  $disabled?: boolean;\n}>`\n  transition: opacity 300ms ease;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n\n  ${(props) =>\n    props.$disabled &&\n    css`\n      pointer-events: none;\n      opacity: 0.4;\n    `}\n`;\n"],"names":[],"mappings":";;;;AAKa,MAAA,YAAA,GAAe,MAAO,CAAA,MAAA,CAAO,MAAM,CAAA,CAAA;AAAA;AAAA;AAAA,UAAA,EAGpC,CAAC,KAAA,KAAW,KAAM,CAAA,QAAA,GAAW,YAAY,SAAU,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AA6FlD,MAAA,WAAA,GAAc,MAAO,CAAA,MAAA,CAAO,IAAI,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAWhC,MAAA,WAAA,GAAc,MAAO,CAAA,MAAA,CAAO,IAAI,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAOhC,MAAA,cAAA,GAAiB,MAAO,CAAA,MAAA,CAAO,IAAI,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAUzC,MAAM,mBAAmB,MAAO,CAAA,GAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQnC,EAAA,CAAC,KACD,KAAA,KAAA,CAAM,SACN,IAAA,GAAA,CAAA;AAAA;AAAA;AAAA,IAGC,CAAA,CAAA;AAAA;;;;"}

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

@@ -13,75 +13,119 @@ import { usePayContext } from '../../../hooks/usePayContext.js';
 import styled from '../../../styles/styled/index.js';
 import { formatUsd } from '../../../utils/format.js';
 
-/** Shows payment amount. */
-const OrderHeader = ({ minified = false, show = "all", }) => {
-    const { paymentState, route } = usePayContext();
-    const { isConnected: isEthConnected, address, connector } = useAccount();
-    const { connected: isSolanaConnected, publicKey, wallet: solanaWallet, } = useWallet();
-    const { senderEnsName } = paymentState;
-    const { order } = useDaimoPay();
-    const ethWalletDisplayName = senderEnsName ?? (address ? getAddressContraction(address) : "wallet");
-    const solWalletDisplayName = getAddressContraction(publicKey?.toBase58() ?? "");
-    const orderUsd = order?.destFinalCallTokenAmount.usd;
-    const locales = useLocales();
-    const titleAmountContent = (() => {
-        if (paymentState.isDepositFlow) {
-            return route === ROUTES.SELECT_TOKEN ? (
-            // TODO: make this match `ModalH1` font size for mobile
-            jsx("span", { style: { fontSize: "19px", lineHeight: "22px" }, children: locales.yourBalances })) : null;
-        }
-        else {
-            return orderUsd != null ? (jsx("span", { children: formatUsd(orderUsd, "nearest") })) : null;
-        }
-    })();
-    const renderIcon = (icon, name, size = 32) => {
-        if (!icon) {
-            return null;
-        }
-        return (jsx(LogoContainer, { "$size": size, "$zIndex": 1, style: { borderRadius: "22.5%" }, children: typeof icon === "string" ? (jsx("img", { src: icon, alt: name || "wallet", style: { maxWidth: "100%", maxHeight: "100%" } })) : (icon) }));
-    };
-    let walletIcon = renderIcon(connector?.icon);
-    let solanaIcon = renderIcon(solanaWallet?.adapter.icon || jsx(Solana, {}), solanaWallet?.adapter.name);
-    if (minified) {
-        if (titleAmountContent != null) {
-            if (show === "zkp2p") {
-                return (jsx(MinifiedContainer, { children: jsx(MinifiedTitleAmount, { children: titleAmountContent }) }));
-            }
-            return (jsxs(MinifiedContainer, { children: [jsx(MinifiedTitleAmount, { children: titleAmountContent }), show === "evm" && isEthConnected && (jsx(Fragment, { children: jsxs(SubtitleContainer, { children: [jsx(Subtitle, { children: ethWalletDisplayName }), walletIcon] }) })), show === "solana" && isSolanaConnected && (jsx(Fragment, { children: jsxs(SubtitleContainer, { children: [jsx(Subtitle, { children: solWalletDisplayName }), solanaIcon] }) })), show === "all" && (jsx(Fragment, { children: jsx(CoinLogos, { "$size": 32 }) }))] }));
-        }
-        else {
-            return (jsxs(MinifiedContainer, { children: [jsx(CoinLogos, {}), jsx(Subtitle, { children: locales.tokensAccepted })] }));
-        }
+const OrderHeader = ({
+  minified = false,
+  show = "all"
+}) => {
+  const { paymentState, route } = usePayContext();
+  const { isConnected: isEthConnected, address, connector } = useAccount();
+  const {
+    connected: isSolanaConnected,
+    publicKey,
+    wallet: solanaWallet
+  } = useWallet();
+  const { senderEnsName } = paymentState;
+  const { order } = useDaimoPay();
+  const ethWalletDisplayName = senderEnsName ?? (address ? getAddressContraction(address) : "wallet");
+  const solWalletDisplayName = getAddressContraction(
+    publicKey?.toBase58() ?? ""
+  );
+  const orderUsd = order?.destFinalCallTokenAmount.usd;
+  const locales = useLocales();
+  const titleAmountContent = (() => {
+    if (paymentState.isDepositFlow) {
+      return route === ROUTES.SELECT_TOKEN ? (
+        // TODO: make this match `ModalH1` font size for mobile
+        /* @__PURE__ */ jsx("span", { style: { fontSize: "19px", lineHeight: "22px" }, children: locales.yourBalances })
+      ) : null;
+    } else {
+      return orderUsd != null ? /* @__PURE__ */ jsx("span", { children: formatUsd(orderUsd, "nearest") }) : null;
     }
-    else {
-        return (jsxs(Fragment, { children: [titleAmountContent && jsx(TitleAmount, { children: titleAmountContent }), jsxs(AnyChainAnyCoinContainer, { children: [jsx(CoinLogos, {}), jsx(Subtitle, { children: locales.tokensAccepted })] })] }));
+  })();
+  const renderIcon = (icon, name, size = 32) => {
+    if (!icon) {
+      return null;
     }
+    return /* @__PURE__ */ jsx(LogoContainer, { $size: size, $zIndex: 1, style: { borderRadius: "22.5%" }, children: typeof icon === "string" ? /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: icon,
+        alt: name || "wallet",
+        style: { maxWidth: "100%", maxHeight: "100%" }
+      }
+    ) : icon });
+  };
+  let walletIcon = renderIcon(connector?.icon);
+  let solanaIcon = renderIcon(
+    solanaWallet?.adapter.icon || /* @__PURE__ */ jsx(Solana, {}),
+    solanaWallet?.adapter.name
+  );
+  if (minified) {
+    if (titleAmountContent != null) {
+      if (show === "zkp2p") {
+        return /* @__PURE__ */ jsx(MinifiedContainer, { children: /* @__PURE__ */ jsx(MinifiedTitleAmount, { children: titleAmountContent }) });
+      }
+      return /* @__PURE__ */ jsxs(MinifiedContainer, { children: [
+        /* @__PURE__ */ jsx(MinifiedTitleAmount, { children: titleAmountContent }),
+        show === "evm" && isEthConnected && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(SubtitleContainer, { children: [
+          /* @__PURE__ */ jsx(Subtitle, { children: ethWalletDisplayName }),
+          walletIcon
+        ] }) }),
+        show === "solana" && isSolanaConnected && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(SubtitleContainer, { children: [
+          /* @__PURE__ */ jsx(Subtitle, { children: solWalletDisplayName }),
+          solanaIcon
+        ] }) }),
+        show === "all" && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(CoinLogos, { $size: 32 }) })
+      ] });
+    } else {
+      return /* @__PURE__ */ jsxs(MinifiedContainer, { children: [
+        /* @__PURE__ */ jsx(CoinLogos, {}),
+        /* @__PURE__ */ jsx(Subtitle, { children: locales.tokensAccepted })
+      ] });
+    }
+  } else {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      titleAmountContent && /* @__PURE__ */ jsx(TitleAmount, { children: titleAmountContent }),
+      /* @__PURE__ */ jsxs(AnyChainAnyCoinContainer, { children: [
+        /* @__PURE__ */ jsx(CoinLogos, {}),
+        /* @__PURE__ */ jsx(Subtitle, { children: locales.tokensAccepted })
+      ] })
+    ] });
+  }
 };
 function CoinLogos({ $size = 24 }) {
-    const logos = [
-        jsx(Ethereum, {}, "eth"),
-        jsx(USDC, {}, "usdc"),
-        jsx(Optimism, {}, "optimism"),
-        jsx(Arbitrum, {}, "arbitrum"),
-        jsx(Base, {}, "base"),
-        jsx(Polygon, {}, "polygon"),
-        jsx(Solana, {}, "solana"),
-    ];
-    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)) }));
+  const logos = [
+    /* @__PURE__ */ jsx(Ethereum, {}, "eth"),
+    /* @__PURE__ */ jsx(USDC, {}, "usdc"),
+    /* @__PURE__ */ jsx(Optimism, {}, "optimism"),
+    /* @__PURE__ */ jsx(Arbitrum, {}, "arbitrum"),
+    /* @__PURE__ */ jsx(Base, {}, "base"),
+    /* @__PURE__ */ jsx(Polygon, {}, "polygon"),
+    /* @__PURE__ */ jsx(Solana, {}, "solana")
+  ];
+  const logoBlock = (element, index) => /* @__PURE__ */ jsx(
+    LogoContainer,
+    {
+      $marginLeft: index !== 0 ? -($size / 3) : 0,
+      $zIndex: logos.length - index,
+      $size,
+      transition: { duration: 0.5, ease: [0.175, 0.885, 0.32, 0.98] },
+      children: element
+    },
+    index
+  );
+  return /* @__PURE__ */ jsx(Logos, { children: logos.map((element, index) => logoBlock(element, index)) });
 }
-const TitleAmount = styled(motion.h1) `
+const TitleAmount = styled(motion.h1)`
   margin-bottom: 24px;
   padding: 0;
   line-height: 66px;
   font-size: 64px;
   font-weight: var(--ck-modal-h1-font-weight, 600);
   color: ${(props) => {
-    if (props.$error)
-        return "var(--ck-body-color-danger)";
-    if (props.$valid)
-        return "var(--ck-body-color-valid)";
-    return "var(--ck-body-color)";
+  if (props.$error) return "var(--ck-body-color-danger)";
+  if (props.$valid) return "var(--ck-body-color-valid)";
+  return "var(--ck-body-color)";
 }};
   @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
     font-size: 64px;
@@ -91,13 +135,13 @@ const TitleAmount = styled(motion.h1) `
   justify-content: center;
   gap: 8px;
 `;
-const Subtitle = styled(motion.div) `
+const Subtitle = styled(motion.div)`
   font-size: 18px;
   font-weight: 500;
   line-height: 21px;
   color: var(--ck-body-color-muted);
 `;
-const MinifiedTitleAmount = styled(motion.div) `
+const MinifiedTitleAmount = styled(motion.div)`
   font-size: 32px;
   font-weight: var(--ck-modal-h1-font-weight, 600);
   line-height: 36px;
@@ -107,14 +151,14 @@ const MinifiedTitleAmount = styled(motion.div) `
   justify-content: start;
   gap: 8px;
 `;
-const MinifiedContainer = styled(motion.div) `
+const MinifiedContainer = styled(motion.div)`
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
   margin-bottom: 24px;
 `;
-const AnyChainAnyCoinContainer = styled(motion.div) `
+const AnyChainAnyCoinContainer = styled(motion.div)`
   display: flex;
   vertical-align: middle;
   align-items: center;
@@ -123,7 +167,7 @@ const AnyChainAnyCoinContainer = styled(motion.div) `
   gap: 8px;
   margin-bottom: 24px;
 `;
-const LogoContainer = styled(motion.div) `
+const LogoContainer = styled(motion.div)`
   display: block;
   overflow: hidden;
   user-select: none;
@@ -141,12 +185,12 @@ const LogoContainer = styled(motion.div) `
     height: auto;
   }
 `;
-const Logos = styled(motion.div) `
+const Logos = styled(motion.div)`
   display: flex;
   align-items: center;
   justify-content: center;
 `;
-const SubtitleContainer = styled.div `
+const SubtitleContainer = styled.div`
   display: flex;
   align-items: center;
   justify-content: flex-end;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/components/Common/OrderHeader/index.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../../src/components/Common/OrderHeader/index.tsx"],"sourcesContent":["import { getAddressContraction } from \"@daimo/pay-common\";\nimport { useWallet } from \"@solana/wallet-adapter-react\";\nimport { motion } from \"framer-motion\";\nimport React from \"react\";\nimport { useAccount } from \"wagmi\";\nimport {\n  Arbitrum,\n  Base,\n  Ethereum,\n  Optimism,\n  Polygon,\n  Solana,\n} from \"../../../assets/chains\";\nimport { USDC } from \"../../../assets/coins\";\nimport defaultTheme from \"../../../constants/defaultTheme\";\nimport { ROUTES } from \"../../../constants/routes\";\nimport { useDaimoPay } from \"../../../hooks/useDaimoPay\";\nimport useLocales from \"../../../hooks/useLocales\";\nimport { usePayContext } from \"../../../hooks/usePayContext\";\nimport styled from \"../../../styles/styled\";\nimport { formatUsd } from \"../../../utils/format\";\n\n/** Shows payment amount. */\nexport const OrderHeader = ({\n  minified = false,\n  show = \"all\",\n}: {\n  minified?: boolean;\n  show?: \"evm\" | \"solana\" | \"zkp2p\" | \"all\";\n}) => {\n  const { paymentState, route } = usePayContext();\n  const { isConnected: isEthConnected, address, connector } = useAccount();\n  const {\n    connected: isSolanaConnected,\n    publicKey,\n    wallet: solanaWallet,\n  } = useWallet();\n  const { senderEnsName } = paymentState;\n  const { order } = useDaimoPay();\n\n  const ethWalletDisplayName =\n    senderEnsName ?? (address ? getAddressContraction(address) : \"wallet\");\n  const solWalletDisplayName = getAddressContraction(\n    publicKey?.toBase58() ?? \"\",\n  );\n  const orderUsd = order?.destFinalCallTokenAmount.usd;\n\n  const locales = useLocales();\n\n  const titleAmountContent = (() => {\n    if (paymentState.isDepositFlow) {\n      return route === ROUTES.SELECT_TOKEN ? (\n        // TODO: make this match `ModalH1` font size for mobile\n        <span style={{ fontSize: \"19px\", lineHeight: \"22px\" }}>\n          {locales.yourBalances}\n        </span>\n      ) : null;\n    } else {\n      return orderUsd != null ? (\n        <span>{formatUsd(orderUsd, \"nearest\")}</span>\n      ) : null;\n    }\n  })();\n\n  const renderIcon = (\n    icon: React.ReactNode | string | undefined,\n    name?: string,\n    size = 32,\n  ): JSX.Element | null => {\n    if (!icon) {\n      return null;\n    }\n\n    return (\n      <LogoContainer $size={size} $zIndex={1} style={{ borderRadius: \"22.5%\" }}>\n        {typeof icon === \"string\" ? (\n          <img\n            src={icon}\n            alt={name || \"wallet\"}\n            style={{ maxWidth: \"100%\", maxHeight: \"100%\" }}\n          />\n        ) : (\n          icon\n        )}\n      </LogoContainer>\n    );\n  };\n  let walletIcon = renderIcon(connector?.icon);\n  let solanaIcon = renderIcon(\n    solanaWallet?.adapter.icon || <Solana />,\n    solanaWallet?.adapter.name,\n  );\n\n  if (minified) {\n    if (titleAmountContent != null) {\n      if (show === \"zkp2p\") {\n        return (\n          <MinifiedContainer>\n            <MinifiedTitleAmount>{titleAmountContent}</MinifiedTitleAmount>\n          </MinifiedContainer>\n        );\n      }\n\n      return (\n        <MinifiedContainer>\n          <MinifiedTitleAmount>{titleAmountContent}</MinifiedTitleAmount>\n          {show === \"evm\" && isEthConnected && (\n            <>\n              <SubtitleContainer>\n                <Subtitle>{ethWalletDisplayName}</Subtitle>\n                {walletIcon}\n              </SubtitleContainer>\n            </>\n          )}\n          {show === \"solana\" && isSolanaConnected && (\n            <>\n              <SubtitleContainer>\n                <Subtitle>{solWalletDisplayName}</Subtitle>\n                {solanaIcon}\n              </SubtitleContainer>\n            </>\n          )}\n          {show === \"all\" && (\n            <>\n              <CoinLogos $size={32} />\n            </>\n          )}\n        </MinifiedContainer>\n      );\n    } else {\n      return (\n        <MinifiedContainer>\n          <CoinLogos />\n          <Subtitle>{locales.tokensAccepted}</Subtitle>\n        </MinifiedContainer>\n      );\n    }\n  } else {\n    return (\n      <>\n        {titleAmountContent && <TitleAmount>{titleAmountContent}</TitleAmount>}\n        <AnyChainAnyCoinContainer>\n          <CoinLogos />\n          <Subtitle>{locales.tokensAccepted}</Subtitle>\n        </AnyChainAnyCoinContainer>\n      </>\n    );\n  }\n};\n\nfunction CoinLogos({ $size = 24 }: { $size?: number }) {\n  const logos = [\n    <Ethereum key=\"eth\" />,\n    <USDC key=\"usdc\" />,\n    <Optimism key=\"optimism\" />,\n    <Arbitrum key=\"arbitrum\" />,\n    <Base key=\"base\" />,\n    <Polygon key=\"polygon\" />,\n    <Solana key=\"solana\" />,\n  ];\n\n  const logoBlock = (element: React.ReactElement, index: number) => (\n    <LogoContainer\n      key={index}\n      $marginLeft={index !== 0 ? -($size / 3) : 0}\n      $zIndex={logos.length - index}\n      $size={$size}\n      transition={{ duration: 0.5, ease: [0.175, 0.885, 0.32, 0.98] }}\n    >\n      {element}\n    </LogoContainer>\n  );\n\n  return (\n    <Logos>{logos.map((element, index) => logoBlock(element, index))}</Logos>\n  );\n}\n\nconst TitleAmount = styled(motion.h1)<{\n  $error?: boolean;\n  $valid?: boolean;\n}>`\n  margin-bottom: 24px;\n  padding: 0;\n  line-height: 66px;\n  font-size: 64px;\n  font-weight: var(--ck-modal-h1-font-weight, 600);\n  color: ${(props) => {\n    if (props.$error) return \"var(--ck-body-color-danger)\";\n    if (props.$valid) return \"var(--ck-body-color-valid)\";\n    return \"var(--ck-body-color)\";\n  }};\n  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {\n    font-size: 64px;\n  }\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n`;\n\nconst Subtitle = styled(motion.div)`\n  font-size: 18px;\n  font-weight: 500;\n  line-height: 21px;\n  color: var(--ck-body-color-muted);\n`;\n\nconst MinifiedTitleAmount = styled(motion.div)`\n  font-size: 32px;\n  font-weight: var(--ck-modal-h1-font-weight, 600);\n  line-height: 36px;\n  color: var(--ck-body-color);\n  display: flex;\n  align-items: center;\n  justify-content: start;\n  gap: 8px;\n`;\n\nconst MinifiedContainer = styled(motion.div)`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  margin-bottom: 24px;\n`;\n\nconst AnyChainAnyCoinContainer = styled(motion.div)`\n  display: flex;\n  vertical-align: middle;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  gap: 8px;\n  margin-bottom: 24px;\n`;\n\nconst LogoContainer = styled(motion.div)<{\n  $marginLeft?: number;\n  $zIndex?: number;\n  $size: number;\n}>`\n  display: block;\n  overflow: hidden;\n  user-select: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: ${(props) => props.$marginLeft || 0}px;\n  z-index: ${(props) => props.$zIndex || 2};\n  width: ${(props) => props.$size}px;\n  height: ${(props) => props.$size}px;\n  border-radius: 9999px;\n  svg {\n    display: block;\n    width: 100%;\n    height: auto;\n  }\n`;\n\nconst Logos = styled(motion.div)`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`;\n\nconst SubtitleContainer = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 8px;\n`;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAuBO,MAAM,cAAc,CAAC;AAAA,EAC1B,QAAW,GAAA,KAAA;AAAA,EACX,IAAO,GAAA,KAAA;AACT,CAGM,KAAA;AACJ,EAAA,MAAM,EAAE,YAAA,EAAc,KAAM,EAAA,GAAI,aAAc,EAAA,CAAA;AAC9C,EAAA,MAAM,EAAE,WAAa,EAAA,cAAA,EAAgB,OAAS,EAAA,SAAA,KAAc,UAAW,EAAA,CAAA;AACvE,EAAM,MAAA;AAAA,IACJ,SAAW,EAAA,iBAAA;AAAA,IACX,SAAA;AAAA,IACA,MAAQ,EAAA,YAAA;AAAA,MACN,SAAU,EAAA,CAAA;AACd,EAAM,MAAA,EAAE,eAAkB,GAAA,YAAA,CAAA;AAC1B,EAAM,MAAA,EAAE,KAAM,EAAA,GAAI,WAAY,EAAA,CAAA;AAE9B,EAAA,MAAM,oBACJ,GAAA,aAAA,KAAkB,OAAU,GAAA,qBAAA,CAAsB,OAAO,CAAI,GAAA,QAAA,CAAA,CAAA;AAC/D,EAAA,MAAM,oBAAuB,GAAA,qBAAA;AAAA,IAC3B,SAAA,EAAW,UAAc,IAAA,EAAA;AAAA,GAC3B,CAAA;AACA,EAAM,MAAA,QAAA,GAAW,OAAO,wBAAyB,CAAA,GAAA,CAAA;AAEjD,EAAA,MAAM,UAAU,UAAW,EAAA,CAAA;AAE3B,EAAA,MAAM,sBAAsB,MAAM;AAChC,IAAA,IAAI,aAAa,aAAe,EAAA;AAC9B,MAAA,OAAO,UAAU,MAAO,CAAA,YAAA;AAAA;AAAA,wBAEtB,GAAA,CAAC,MAAK,EAAA,EAAA,KAAA,EAAO,EAAE,QAAA,EAAU,QAAQ,UAAY,EAAA,MAAA,EAC1C,EAAA,QAAA,EAAA,OAAA,CAAQ,YACX,EAAA,CAAA;AAAA,UACE,IAAA,CAAA;AAAA,KACC,MAAA;AACL,MAAO,OAAA,QAAA,IAAY,uBAChB,GAAA,CAAA,MAAA,EAAA,EAAM,oBAAU,QAAU,EAAA,SAAS,GAAE,CACpC,GAAA,IAAA,CAAA;AAAA,KACN;AAAA,GACC,GAAA,CAAA;AAEH,EAAA,MAAM,UAAa,GAAA,CACjB,IACA,EAAA,IAAA,EACA,OAAO,EACgB,KAAA;AACvB,IAAA,IAAI,CAAC,IAAM,EAAA;AACT,MAAO,OAAA,IAAA,CAAA;AAAA,KACT;AAEA,IAAA,uBACG,GAAA,CAAA,aAAA,EAAA,EAAc,KAAO,EAAA,IAAA,EAAM,OAAS,EAAA,CAAA,EAAG,KAAO,EAAA,EAAE,YAAc,EAAA,OAAA,EAC5D,EAAA,QAAA,EAAA,OAAO,SAAS,QACf,mBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAK,EAAA,IAAA;AAAA,QACL,KAAK,IAAQ,IAAA,QAAA;AAAA,QACb,KAAO,EAAA,EAAE,QAAU,EAAA,MAAA,EAAQ,WAAW,MAAO,EAAA;AAAA,OAAA;AAAA,QAG/C,IAEJ,EAAA,CAAA,CAAA;AAAA,GAEJ,CAAA;AACA,EAAI,IAAA,UAAA,GAAa,UAAW,CAAA,SAAA,EAAW,IAAI,CAAA,CAAA;AAC3C,EAAA,IAAI,UAAa,GAAA,UAAA;AAAA,IACf,YAAc,EAAA,OAAA,CAAQ,IAAQ,oBAAA,GAAA,CAAC,MAAO,EAAA,EAAA,CAAA;AAAA,IACtC,cAAc,OAAQ,CAAA,IAAA;AAAA,GACxB,CAAA;AAEA,EAAA,IAAI,QAAU,EAAA;AACZ,IAAA,IAAI,sBAAsB,IAAM,EAAA;AAC9B,MAAA,IAAI,SAAS,OAAS,EAAA;AACpB,QAAA,uBACG,GAAA,CAAA,iBAAA,EAAA,EACC,QAAC,kBAAA,GAAA,CAAA,mBAAA,EAAA,EAAqB,8BAAmB,CAC3C,EAAA,CAAA,CAAA;AAAA,OAEJ;AAEA,MAAA,4BACG,iBACC,EAAA,EAAA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,uBAAqB,QAAmB,EAAA,kBAAA,EAAA,CAAA;AAAA,QACxC,IAAS,KAAA,KAAA,IAAS,cACjB,oBAAA,GAAA,CAAA,QAAA,EAAA,EACE,+BAAC,iBACC,EAAA,EAAA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,YAAU,QAAqB,EAAA,oBAAA,EAAA,CAAA;AAAA,UAC/B,UAAA;AAAA,SAAA,EACH,CACF,EAAA,CAAA;AAAA,QAED,IAAS,KAAA,QAAA,IAAY,iBACpB,oBAAA,GAAA,CAAA,QAAA,EAAA,EACE,+BAAC,iBACC,EAAA,EAAA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,YAAU,QAAqB,EAAA,oBAAA,EAAA,CAAA;AAAA,UAC/B,UAAA;AAAA,SAAA,EACH,CACF,EAAA,CAAA;AAAA,QAED,SAAS,KACR,oBAAA,GAAA,CAAA,QAAA,EAAA,EACE,8BAAC,SAAU,EAAA,EAAA,KAAA,EAAO,IAAI,CACxB,EAAA,CAAA;AAAA,OAEJ,EAAA,CAAA,CAAA;AAAA,KAEG,MAAA;AACL,MAAA,4BACG,iBACC,EAAA,EAAA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,SAAU,EAAA,EAAA,CAAA;AAAA,wBACX,GAAA,CAAC,QAAU,EAAA,EAAA,QAAA,EAAA,OAAA,CAAQ,cAAe,EAAA,CAAA;AAAA,OACpC,EAAA,CAAA,CAAA;AAAA,KAEJ;AAAA,GACK,MAAA;AACL,IAAA,uBAEK,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,MAAsB,kBAAA,oBAAA,GAAA,CAAC,eAAa,QAAmB,EAAA,kBAAA,EAAA,CAAA;AAAA,2BACvD,wBACC,EAAA,EAAA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,SAAU,EAAA,EAAA,CAAA;AAAA,wBACX,GAAA,CAAC,QAAU,EAAA,EAAA,QAAA,EAAA,OAAA,CAAQ,cAAe,EAAA,CAAA;AAAA,OACpC,EAAA,CAAA;AAAA,KACF,EAAA,CAAA,CAAA;AAAA,GAEJ;AACF,EAAA;AAEA,SAAS,SAAU,CAAA,EAAE,KAAQ,GAAA,EAAA,EAA0B,EAAA;AACrD,EAAA,MAAM,KAAQ,GAAA;AAAA,oBACZ,GAAA,CAAC,cAAa,KAAM,CAAA;AAAA,oBACpB,GAAA,CAAC,UAAS,MAAO,CAAA;AAAA,oBACjB,GAAA,CAAC,cAAa,UAAW,CAAA;AAAA,oBACzB,GAAA,CAAC,cAAa,UAAW,CAAA;AAAA,oBACzB,GAAA,CAAC,UAAS,MAAO,CAAA;AAAA,oBACjB,GAAA,CAAC,aAAY,SAAU,CAAA;AAAA,oBACvB,GAAA,CAAC,YAAW,QAAS,CAAA;AAAA,GACvB,CAAA;AAEA,EAAM,MAAA,SAAA,GAAY,CAAC,OAAA,EAA6B,KAC9C,qBAAA,GAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MAEC,WAAa,EAAA,KAAA,KAAU,CAAI,GAAA,EAAE,QAAQ,CAAK,CAAA,GAAA,CAAA;AAAA,MAC1C,OAAA,EAAS,MAAM,MAAS,GAAA,KAAA;AAAA,MACxB,KAAA;AAAA,MACA,UAAA,EAAY,EAAE,QAAA,EAAU,GAAK,EAAA,IAAA,EAAM,CAAC,KAAO,EAAA,KAAA,EAAO,IAAM,EAAA,IAAI,CAAE,EAAA;AAAA,MAE7D,QAAA,EAAA,OAAA;AAAA,KAAA;AAAA,IANI,KAAA;AAAA,GAOP,CAAA;AAGF,EACE,uBAAA,GAAA,CAAC,KAAO,EAAA,EAAA,QAAA,EAAA,KAAA,CAAM,GAAI,CAAA,CAAC,OAAS,EAAA,KAAA,KAAU,SAAU,CAAA,OAAA,EAAS,KAAK,CAAC,CAAE,EAAA,CAAA,CAAA;AAErE,CAAA;AAEA,MAAM,WAAA,GAAc,MAAO,CAAA,MAAA,CAAO,EAAE,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAAA,EASzB,CAAC,KAAU,KAAA;AAClB,EAAI,IAAA,KAAA,CAAM,QAAe,OAAA,6BAAA,CAAA;AACzB,EAAI,IAAA,KAAA,CAAM,QAAe,OAAA,4BAAA,CAAA;AACzB,EAAO,OAAA,sBAAA,CAAA;AACT,CAAC,CAAA;AAAA,qCAAA,EACoC,aAAa,WAAW,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAA,CAAA;AAS/D,MAAM,QAAA,GAAW,MAAO,CAAA,MAAA,CAAO,GAAG,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAA,CAAA;AAOlC,MAAM,mBAAA,GAAsB,MAAO,CAAA,MAAA,CAAO,GAAG,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAA,CAAA;AAW7C,MAAM,iBAAA,GAAoB,MAAO,CAAA,MAAA,CAAO,GAAG,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAA,CAAA;AAQ3C,MAAM,wBAAA,GAA2B,MAAO,CAAA,MAAA,CAAO,GAAG,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAA,CAAA;AAUlD,MAAM,aAAA,GAAgB,MAAO,CAAA,MAAA,CAAO,GAAG,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAAA,EAWtB,CAAC,KAAA,KAAU,KAAM,CAAA,WAAA,IAAe,CAAC,CAAA;AAAA,WAAA,EACrC,CAAC,KAAA,KAAU,KAAM,CAAA,OAAA,IAAW,CAAC,CAAA;AAAA,SAC/B,EAAA,CAAC,KAAU,KAAA,KAAA,CAAM,KAAK,CAAA;AAAA,UACrB,EAAA,CAAC,KAAU,KAAA,KAAA,CAAM,KAAK,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAA,CAAA;AASlC,MAAM,KAAA,GAAQ,MAAO,CAAA,MAAA,CAAO,GAAG,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA,CAAA,CAAA;AAM/B,MAAM,oBAAoB,MAAO,CAAA,GAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAA;;;;"}

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

@@ -4,12 +4,34 @@ import styled from '../../../styles/styled/index.js';
 import { ModalBody } from '../Modal/styles.js';
 
 const PaymentBreakdown = ({ paymentOption }) => {
-    const subtotalUsd = paymentOption.required.usd;
-    const feesUsd = paymentOption.fees.usd;
-    const totalUsd = subtotalUsd + 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 subtotalUsd = paymentOption.required.usd;
+  const feesUsd = paymentOption.fees.usd;
+  const totalUsd = subtotalUsd + feesUsd;
+  return /* @__PURE__ */ jsxs(FeesContainer, { children: [
+    feesUsd > 0 && /* @__PURE__ */ jsxs(FeeRow, { children: [
+      /* @__PURE__ */ jsx(ModalBody, { children: "Subtotal" }),
+      /* @__PURE__ */ jsxs(ModalBody, { children: [
+        "$",
+        subtotalUsd.toFixed(2)
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(FeeRow, { children: [
+      /* @__PURE__ */ jsx(ModalBody, { children: "Fees" }),
+      feesUsd === 0 ? /* @__PURE__ */ jsx(Badge, { children: "Free" }) : /* @__PURE__ */ jsxs(ModalBody, { children: [
+        "$",
+        feesUsd.toFixed(2)
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(FeeRow, { style: { marginTop: 8 }, children: [
+      /* @__PURE__ */ jsx(ModalBody, { style: { fontWeight: 600 }, children: "Total" }),
+      /* @__PURE__ */ jsxs(ModalBody, { style: { fontWeight: 600 }, children: [
+        "$",
+        totalUsd.toFixed(2)
+      ] })
+    ] })
+  ] });
 };
-const FeesContainer = styled.div `
+const FeesContainer = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -25,13 +47,13 @@ const FeesContainer = styled.div `
     }
   }
 `;
-const FeeRow = styled.div `
+const FeeRow = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 50%;
 `;
-const Badge = styled.span `
+const Badge = styled.span`
   display: inline-block;
   padding: 3px 8px;
   border-radius: var(--ck-primary-button-border-radius);

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/components/Common/PaymentBreakdown/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;;AAOA,MAAM,gBAAgB,GAEjB,CAAC,EAAE,aAAa,EAAE,KAAI;AACzB,IAAA,MAAM,WAAW,GAAG,aAAa,CAAC,QAAQ,CAAC,GAAG,CAAC;AAC/C,IAAA,MAAM,OAAO,GAAG,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC;AACvC,IAAA,MAAM,QAAQ,GAAG,WAAW,GAAG,OAAO,CAAC;IAEvC,QACEA,IAAC,CAAA,aAAa,EACX,EAAA,QAAA,EAAA,CAAA,OAAO,GAAG,CAAC,KACVA,IAAA,CAAC,MAAM,EAAA,EAAA,QAAA,EAAA,CACLC,IAAC,SAAS,EAAA,EAAA,QAAA,EAAA,UAAA,EAAA,CAAqB,EAC/BD,IAAA,CAAC,SAAS,EAAA,EAAA,QAAA,EAAA,CAAA,GAAA,EAAG,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC,CAAA,EAAA,CAAa,IACzC,CACV,EACDA,IAAC,CAAA,MAAM,EACL,EAAA,QAAA,EAAA,CAAAC,GAAA,CAAC,SAAS,EAAiB,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,EAC1B,OAAO,KAAK,CAAC,IACZA,GAAC,CAAA,KAAK,EAAa,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,KAEnBD,IAAA,CAAC,SAAS,EAAA,EAAA,QAAA,EAAA,CAAA,GAAA,EAAG,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAAA,EAAA,CAAa,CAC7C,CACM,EAAA,CAAA,EACTA,IAAC,CAAA,MAAM,EAAC,EAAA,KAAK,EAAE,EAAE,SAAS,EAAE,CAAC,EAAE,EAAA,QAAA,EAAA,CAC7BC,IAAC,SAAS,EAAA,EAAC,KAAK,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,EAAmB,QAAA,EAAA,OAAA,EAAA,CAAA,EACxDD,IAAC,CAAA,SAAS,IAAC,KAAK,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,EACjC,QAAA,EAAA,CAAA,GAAA,EAAA,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CACX,EAAA,CAAA,CAAA,EAAA,CACL,CACK,EAAA,CAAA,EAChB;AACJ,EAAE;AAEF,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA,CAAA;;;;;;;;AAQO,qCAAA,EAAA,YAAY,CAAC,WAAW,CAAA;QACvD,SAAS,CAAA;;;;;;CAMhB,CAAC;AACF,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAA,CAAA;;;;;CAKxB,CAAC;AACF,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAA,CAAA;;;;;;;;;;;CAWxB;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../src/components/Common/PaymentBreakdown/index.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { WalletPaymentOption } from \"@daimo/pay-common\";\nimport defaultTheme from \"../../../constants/defaultTheme\";\nimport styled from \"../../../styles/styled\";\nimport { ModalBody } from \"../../Common/Modal/styles\";\n\nconst PaymentBreakdown: React.FC<{\n  paymentOption: WalletPaymentOption;\n}> = ({ paymentOption }) => {\n  const subtotalUsd = paymentOption.required.usd;\n  const feesUsd = paymentOption.fees.usd;\n  const totalUsd = subtotalUsd + feesUsd;\n\n  return (\n    <FeesContainer>\n      {feesUsd > 0 && (\n        <FeeRow>\n          <ModalBody>Subtotal</ModalBody>\n          <ModalBody>${subtotalUsd.toFixed(2)}</ModalBody>\n        </FeeRow>\n      )}\n      <FeeRow>\n        <ModalBody>Fees</ModalBody>\n        {feesUsd === 0 ? (\n          <Badge>Free</Badge>\n        ) : (\n          <ModalBody>${feesUsd.toFixed(2)}</ModalBody>\n        )}\n      </FeeRow>\n      <FeeRow style={{ marginTop: 8 }}>\n        <ModalBody style={{ fontWeight: 600 }}>Total</ModalBody>\n        <ModalBody style={{ fontWeight: 600 }}>\n          ${totalUsd.toFixed(2)}\n        </ModalBody>\n      </FeeRow>\n    </FeesContainer>\n  );\n};\n\nconst FeesContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n  gap: 4px;\n  margin: 16px 0;\n\n  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {\n    & ${ModalBody} {\n      margin: 0 !important;\n      max-width: 100% !important;\n      text-align: left !important;\n    }\n  }\n`;\nconst FeeRow = styled.div`\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  width: 50%;\n`;\nconst Badge = styled.span`\n  display: inline-block;\n  padding: 3px 8px;\n  border-radius: var(--ck-primary-button-border-radius);\n  font-size: 14px;\n  font-weight: 400;\n  background: var(\n    --ck-secondary-button-background,\n    var(--ck-body-background-secondary)\n  );\n  color: var(--ck-body-color-muted);\n`;\n\nexport default PaymentBreakdown;\n"],"names":[],"mappings":";;;;;AAOA,MAAM,gBAED,GAAA,CAAC,EAAE,aAAA,EAAoB,KAAA;AAC1B,EAAM,MAAA,WAAA,GAAc,cAAc,QAAS,CAAA,GAAA,CAAA;AAC3C,EAAM,MAAA,OAAA,GAAU,cAAc,IAAK,CAAA,GAAA,CAAA;AACnC,EAAA,MAAM,WAAW,WAAc,GAAA,OAAA,CAAA;AAE/B,EAAA,4BACG,aACE,EAAA,EAAA,QAAA,EAAA;AAAA,IAAU,OAAA,GAAA,CAAA,yBACR,MACC,EAAA,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,aAAU,QAAQ,EAAA,UAAA,EAAA,CAAA;AAAA,2BAClB,SAAU,EAAA,EAAA,QAAA,EAAA;AAAA,QAAA,GAAA;AAAA,QAAE,WAAA,CAAY,QAAQ,CAAC,CAAA;AAAA,OAAE,EAAA,CAAA;AAAA,KACtC,EAAA,CAAA;AAAA,yBAED,MACC,EAAA,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,aAAU,QAAI,EAAA,MAAA,EAAA,CAAA;AAAA,MACd,YAAY,CACX,mBAAA,GAAA,CAAC,SAAM,QAAI,EAAA,MAAA,EAAA,CAAA,wBAEV,SAAU,EAAA,EAAA,QAAA,EAAA;AAAA,QAAA,GAAA;AAAA,QAAE,OAAA,CAAQ,QAAQ,CAAC,CAAA;AAAA,OAAE,EAAA,CAAA;AAAA,KAEpC,EAAA,CAAA;AAAA,yBACC,MAAO,EAAA,EAAA,KAAA,EAAO,EAAE,SAAA,EAAW,GAC1B,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,aAAU,KAAO,EAAA,EAAE,UAAY,EAAA,GAAA,IAAO,QAAK,EAAA,OAAA,EAAA,CAAA;AAAA,2BAC3C,SAAU,EAAA,EAAA,KAAA,EAAO,EAAE,UAAA,EAAY,KAAO,EAAA,QAAA,EAAA;AAAA,QAAA,GAAA;AAAA,QACnC,QAAA,CAAS,QAAQ,CAAC,CAAA;AAAA,OACtB,EAAA,CAAA;AAAA,KACF,EAAA,CAAA;AAAA,GACF,EAAA,CAAA,CAAA;AAEJ,EAAA;AAEA,MAAM,gBAAgB,MAAO,CAAA,GAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qCAAA,EAQU,aAAa,WAAW,CAAA;AAAA,MAAA,EACvD,SAAS,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAA,CAAA;AAOjB,MAAM,SAAS,MAAO,CAAA,GAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAA,CAAA;AAMtB,MAAM,QAAQ,MAAO,CAAA,IAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAA;;;;"}

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

@@ -3,28 +3,27 @@ import { createPortal } from 'react-dom';
 import packageJson from '../../../../package.json.js';
 
 const Portal = (props) => {
-    props = {
-        selector: "__DAIMOPAY__",
-        ...props,
-    };
-    const { selector, children } = props;
-    const ref = useRef(null);
-    const [mounted, setMounted] = useState(false);
-    useEffect(() => {
-        const selectorPrefixed = "#" + selector.replace(/^#/, "");
-        ref.current = document.querySelector(selectorPrefixed);
-        if (!ref.current) {
-            const div = document.createElement("div");
-            div.setAttribute("id", selector);
-            div.setAttribute("data-daimopay", `${packageJson.version}`);
-            document.body.appendChild(div);
-            ref.current = div;
-        }
-        setMounted(true);
-    }, [selector]);
-    if (!ref.current)
-        return null;
-    return mounted ? createPortal(children, ref.current) : null;
+  props = {
+    selector: "__DAIMOPAY__",
+    ...props
+  };
+  const { selector, children } = props;
+  const ref = useRef(null);
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    const selectorPrefixed = "#" + selector.replace(/^#/, "");
+    ref.current = document.querySelector(selectorPrefixed);
+    if (!ref.current) {
+      const div = document.createElement("div");
+      div.setAttribute("id", selector);
+      div.setAttribute("data-daimopay", `${packageJson.version}`);
+      document.body.appendChild(div);
+      ref.current = div;
+    }
+    setMounted(true);
+  }, [selector]);
+  if (!ref.current) return null;
+  return mounted ? createPortal(children, ref.current) : null;
 };
 
 export { Portal as default };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/components/Common/Portal/index.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;AAIA,MAAM,MAAM,GAAG,CAAC,KAAU,KAAI;AAC5B,IAAA,KAAK,GAAG;AACN,QAAA,QAAQ,EAAE,cAAc;AACxB,QAAA,GAAG,KAAK;KACT,CAAC;AAEF,IAAA,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;AAErC,IAAA,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACzC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IAEvD,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,gBAAgB,GAAG,GAAG,GAAG,QAAQ,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;QAC1D,GAAG,CAAC,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;AAEvD,QAAA,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE;YAChB,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;AAC1C,YAAA,GAAG,CAAC,YAAY,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;YACjC,GAAG,CAAC,YAAY,CAAC,eAAe,EAAE,CAAG,EAAA,WAAW,CAAC,OAAO,CAAE,CAAA,CAAC,CAAC;AAC5D,YAAA,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;AAC/B,YAAA,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC;SACnB;QAED,UAAU,CAAC,IAAI,CAAC,CAAC;AACnB,KAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,IAAI,CAAC,GAAG,CAAC,OAAO;AAAE,QAAA,OAAO,IAAI,CAAC;AAC9B,IAAA,OAAO,OAAO,GAAG,YAAY,CAAC,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC;AAC9D;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../src/components/Common/Portal/index.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport packageJson from \"../../../../package.json\";\n\nconst Portal = (props: any) => {\n  props = {\n    selector: \"__DAIMOPAY__\",\n    ...props,\n  };\n\n  const { selector, children } = props;\n\n  const ref = useRef<Element | null>(null);\n  const [mounted, setMounted] = useState<boolean>(false);\n\n  useEffect(() => {\n    const selectorPrefixed = \"#\" + selector.replace(/^#/, \"\");\n    ref.current = document.querySelector(selectorPrefixed);\n\n    if (!ref.current) {\n      const div = document.createElement(\"div\");\n      div.setAttribute(\"id\", selector);\n      div.setAttribute(\"data-daimopay\", `${packageJson.version}`);\n      document.body.appendChild(div);\n      ref.current = div;\n    }\n\n    setMounted(true);\n  }, [selector]);\n\n  if (!ref.current) return null;\n  return mounted ? createPortal(children, ref.current) : null;\n};\n\nexport default Portal;\n"],"names":[],"mappings":";;;;AAIM,MAAA,MAAA,GAAS,CAAC,KAAe,KAAA;AAC7B,EAAQ,KAAA,GAAA;AAAA,IACN,QAAU,EAAA,cAAA;AAAA,IACV,GAAG,KAAA;AAAA,GACL,CAAA;AAEA,EAAM,MAAA,EAAE,QAAU,EAAA,QAAA,EAAa,GAAA,KAAA,CAAA;AAE/B,EAAM,MAAA,GAAA,GAAM,OAAuB,IAAI,CAAA,CAAA;AACvC,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAkB,KAAK,CAAA,CAAA;AAErD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,gBAAmB,GAAA,GAAA,GAAM,QAAS,CAAA,OAAA,CAAQ,MAAM,EAAE,CAAA,CAAA;AACxD,IAAI,GAAA,CAAA,OAAA,GAAU,QAAS,CAAA,aAAA,CAAc,gBAAgB,CAAA,CAAA;AAErD,IAAI,IAAA,CAAC,IAAI,OAAS,EAAA;AAChB,MAAM,MAAA,GAAA,GAAM,QAAS,CAAA,aAAA,CAAc,KAAK,CAAA,CAAA;AACxC,MAAI,GAAA,CAAA,YAAA,CAAa,MAAM,QAAQ,CAAA,CAAA;AAC/B,MAAA,GAAA,CAAI,YAAa,CAAA,eAAA,EAAiB,CAAG,EAAA,WAAA,CAAY,OAAO,CAAE,CAAA,CAAA,CAAA;AAC1D,MAAS,QAAA,CAAA,IAAA,CAAK,YAAY,GAAG,CAAA,CAAA;AAC7B,MAAA,GAAA,CAAI,OAAU,GAAA,GAAA,CAAA;AAAA,KAChB;AAEA,IAAA,UAAA,CAAW,IAAI,CAAA,CAAA;AAAA,GACjB,EAAG,CAAC,QAAQ,CAAC,CAAA,CAAA;AAEb,EAAI,IAAA,CAAC,GAAI,CAAA,OAAA,EAAgB,OAAA,IAAA,CAAA;AACzB,EAAA,OAAO,OAAU,GAAA,YAAA,CAAa,QAAU,EAAA,GAAA,CAAI,OAAO,CAAI,GAAA,IAAA,CAAA;AACzD;;;;"}