@daimo/pay 1.15.0 → 1.16.1

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

@@ -3,7 +3,7 @@ import { css } from 'styled-components';
 import defaultTheme from '../../../constants/defaultTheme.js';
 import styled from '../../../styles/styled/index.js';
 
-const SpinnerContainer = styled(motion.div) `
+const SpinnerContainer = styled(motion.div)`
   position: absolute;
   right: 16px;
   top: 0;
@@ -12,7 +12,7 @@ const SpinnerContainer = styled(motion.div) `
   align-items: center;
   justify-content: center;
 `;
-const Arrow = styled.svg `
+const Arrow = styled.svg`
   --x: -3px;
   --stroke-width: 2;
   position: relative;
@@ -27,37 +27,36 @@ const Arrow = styled.svg `
   color: currentColor;
   opacity: 0.4;
 `;
-const ArrowChevron = styled.path ``;
-const ArrowLine = styled.line `
+const ArrowChevron = styled.path``;
+const ArrowLine = styled.line`
   transition: inherit;
   transition-property: transform;
   transform-origin: 90% 50%;
   transform: scaleX(0.1);
 `;
-const DownloadArrow = styled.div `
+const DownloadArrow = styled.div`
   display: inline-block;
   vertical-align: middle;
   position: relative;
   margin-right: 6px;
   color: currentColor;
 `;
-const DownloadArrowInner = styled.div `
+const DownloadArrowInner = styled.div`
   transform: rotate(90deg);
   ${Arrow} {
     margin: 0 auto;
   }
 `;
-const ButtonContainerInner = styled(motion.div) `
+const ButtonContainerInner = styled(motion.div)`
   display: flex;
   align-items: center;
   justify-content: center;
   inset: 0;
   height: 100%;
 `;
-const ButtonContainer = styled.button `
+const ButtonContainer = styled.button`
 
-  ${({ disabled }) => disabled &&
-    css `
+  ${({ disabled }) => disabled && css`
       cursor: not-allowed;
       pointer-events: none;
       ${InnerContainer} {
@@ -66,8 +65,8 @@ const ButtonContainer = styled.button `
     `}
 
   ${({ $variant }) => {
-    if ($variant === "primary") {
-        return css `
+  if ($variant === "primary") {
+    return css`
         --color: var(--ck-primary-button-color, var(--ck-body-color));
         --background: var(
           --ck-primary-button-background,
@@ -95,9 +94,8 @@ const ButtonContainer = styled.button `
           var(--font-weight)
         );
       `;
-    }
-    else if ($variant === "secondary") {
-        return css `
+  } else if ($variant === "secondary") {
+    return css`
         --color: var(--ck-secondary-button-color, var(--ck-body-color));
         --background: var(
           --ck-secondary-button-background,
@@ -125,9 +123,8 @@ const ButtonContainer = styled.button `
           var(--font-weight)
         );
       `;
-    }
-    else if ($variant === "tertiary") {
-        return css `
+  } else if ($variant === "tertiary") {
+    return css`
         --color: var(
           --ck-tertiary-button-color,
           var(--ck-secondary-button-color)
@@ -170,7 +167,7 @@ const ButtonContainer = styled.button `
           var(--ck-secondary-button-font-weight)
         );
       `;
-    }
+  }
 }}
 
   appearance: none;
@@ -247,7 +244,7 @@ const ButtonContainer = styled.button `
     }
   }
 `;
-const InnerContainer = styled.div `
+const InnerContainer = styled.div`
   transform: translateZ(0); // Shifting fix
   position: relative;
   display: inline-block;
@@ -259,7 +256,7 @@ const InnerContainer = styled.div `
   text-overflow: ellipsis;
   */
 `;
-const IconContainer = styled(motion.div) `
+const IconContainer = styled(motion.div)`
   position: relative;
   display: inline-block;
   vertical-align: middle;
@@ -273,11 +270,10 @@ const IconContainer = styled(motion.div) `
     margin-right: 0;
   }
   ${(props) => {
-    return (props.$rounded &&
-        css `
+  return props.$rounded && css`
         overflow: hidden;
         border-radius: 5px;
-      `);
+      `;
 }}
   svg {
     display: block;

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../../src/components/Common/Button/styles.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAKa,MAAA,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA,CAAA;;;;;;;;EAQhD;AAEW,MAAA,KAAK,GAAG,MAAM,CAAC,GAAG,CAAA,CAAA;;;;;;;;;;;;;;EAc7B;MACW,YAAY,GAAG,MAAM,CAAC,IAAI,CAAA,CAAA,EAAG;AAC7B,MAAA,SAAS,GAAG,MAAM,CAAC,IAAI,CAAA,CAAA;;;;;EAKlC;AACW,MAAA,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA,CAAA;;;;;;EAMrC;AACW,MAAA,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA,CAAA;;IAExC,KAAK,CAAA;;;EAGP;AAEW,MAAA,oBAAoB,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA,CAAA;;;;;;EAMpD;AACW,MAAA,eAAe,GAAG,MAAM,CAAC,MAAM,CAG1C,CAAA;;AAEE,EAAA,EAAA,CAAC,EAAE,QAAQ,EAAE,KACb,QAAQ;AACR,IAAA,GAAG,CAAA,CAAA;;;QAGC,cAAc,CAAA;;;AAGjB,IAAA,CAAA,CAAA;;AAED,EAAA,EAAA,CAAC,EAAE,QAAQ,EAAE,KAAI;AACjB,IAAA,IAAI,QAAQ,KAAK,SAAS,EAAE;AAC1B,QAAA,OAAO,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;OA2BT,CAAC;KACH;AAAM,SAAA,IAAI,QAAQ,KAAK,WAAW,EAAE;AACnC,QAAA,OAAO,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;OA2BT,CAAC;KACH;AAAM,SAAA,IAAI,QAAQ,KAAK,UAAU,EAAE;AAClC,QAAA,OAAO,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA0CT,CAAC;KACH;AACH,CAAC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;IAyBC,aAAa,CAAA;MACX,KAAK,CAAA;;QAEH,SAAS,CAAA;;;QAGT,YAAY,CAAA;;;;;;uCAMmB,YAAY,CAAC,WAAW,GAAG,CAAC,CAAA;;;;;;;;QAQ3D,KAAK,CAAA;;UAEH,SAAS,CAAA;;;UAGT,YAAY,CAAA;;;QAGd,aAAa,CAAA;UACX,KAAK,CAAA;;YAEH,SAAS,CAAA;;;YAGT,YAAY,CAAA;;;;;;;;;AASe,qCAAA,EAAA,YAAY,CAAC,WAAW,CAAA;;;;;;;EAO7D;AAEW,MAAA,cAAc,GAAG,MAAM,CAAC,GAAG,CAAA,CAAA;;;;;;;;;;;EAWtC;AAEW,MAAA,aAAa,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAwB,CAAA;;;;;;;;;;;;;IAanE,CAAC,KAAK,KAAI;IACV,QACE,KAAK,CAAC,QAAQ;AACd,QAAA,GAAG,CAAA,CAAA;;;AAGF,MAAA,CAAA,EACD;AACJ,CAAC,CAAA;;;;;;;;;;;"}
+{"version":3,"file":"styles.js","sources":["../../../../../src/components/Common/Button/styles.ts"],"sourcesContent":["import { motion } from \"framer-motion\";\nimport { css } from \"styled-components\";\nimport defaultTheme from \"../../../constants/defaultTheme\";\nimport styled from \"./../../../styles/styled\";\n\nexport const SpinnerContainer = styled(motion.div)`\n  position: absolute;\n  right: 16px;\n  top: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`;\n\nexport const Arrow = styled.svg`\n  --x: -3px;\n  --stroke-width: 2;\n  position: relative;\n  top: 1px;\n  left: -0.5px;\n  display: inline-block;\n  vertical-align: middle;\n  margin-left: 9px;\n  margin-right: 1px;\n  transition: all 100ms ease;\n  transform: translateX(var(--x, -3px));\n  color: currentColor;\n  opacity: 0.4;\n`;\nexport const ArrowChevron = styled.path``;\nexport const ArrowLine = styled.line`\n  transition: inherit;\n  transition-property: transform;\n  transform-origin: 90% 50%;\n  transform: scaleX(0.1);\n`;\nexport const DownloadArrow = styled.div`\n  display: inline-block;\n  vertical-align: middle;\n  position: relative;\n  margin-right: 6px;\n  color: currentColor;\n`;\nexport const DownloadArrowInner = styled.div`\n  transform: rotate(90deg);\n  ${Arrow} {\n    margin: 0 auto;\n  }\n`;\n\nexport const ButtonContainerInner = styled(motion.div)`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  inset: 0;\n  height: 100%;\n`;\nexport const ButtonContainer = styled.button<{\n  disabled?: boolean;\n  $variant?: \"primary\" | \"secondary\" | \"tertiary\";\n}>`\n\n  ${({ disabled }) =>\n    disabled &&\n    css`\n      cursor: not-allowed;\n      pointer-events: none;\n      ${InnerContainer} {\n        opacity: 0.4;\n      }\n    `}\n\n  ${({ $variant }) => {\n    if ($variant === \"primary\") {\n      return css`\n        --color: var(--ck-primary-button-color, var(--ck-body-color));\n        --background: var(\n          --ck-primary-button-background,\n          var(--ck-body-background-primary)\n        );\n        --box-shadow: var(--ck-primary-button-box-shadow);\n        --border-radius: var(--ck-primary-button-border-radius);\n        --font-weight: var(--ck-primary-button-font-weight, 500);\n\n        --hover-color: var(--ck-button-primary-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        --hover-font-weight: var(\n          --ck-primary-button-font-weight,\n          var(--font-weight)\n        );\n      `;\n    } else if ($variant === \"secondary\") {\n      return css`\n        --color: var(--ck-secondary-button-color, var(--ck-body-color));\n        --background: var(\n          --ck-secondary-button-background,\n          var(--ck-body-background-secondary)\n        );\n        --box-shadow: var(--ck-secondary-button-box-shadow);\n        --border-radius: var(--ck-secondary-button-border-radius);\n        --font-weight: var(--ck-secondary-button-font-weight, 500);\n\n        --hover-color: var(--ck-secondary-button-hover-color, var(--color));\n        --hover-background: var(\n          --ck-secondary-button-hover-background,\n          var(--background)\n        );\n        --hover-box-shadow: var(\n          --ck-secondary-button-hover-box-shadow,\n          var(--box-shadow)\n        );\n        --hover-border-radius: var(\n          --ck-secondary-button-hover-border-radius,\n          var(--border-radius)\n        );\n        --hover-font-weight: var(\n          --ck-secondary-button-font-weight,\n          var(--font-weight)\n        );\n      `;\n    } else if ($variant === \"tertiary\") {\n      return css`\n        --color: var(\n          --ck-tertiary-button-color,\n          var(--ck-secondary-button-color)\n        );\n        --background: var(\n          --ck-tertiary-button-background,\n          var(--ck-secondary-button-background)\n        );\n        --box-shadow: var(\n          --ck-tertiary-button-box-shadow,\n          var(--ck-secondary-button-box-shadow)\n        );\n        --border-radius: var(\n          --ck-tertiary-button-border-radius,\n          var(--ck-secondary-button-border-radius)\n        );\n        --font-weight: var(\n          --ck-tertiary-button-font-weight,\n          var(--ck-secondary-button-font-weight)\n        );\n\n        --hover-color: var(\n          --button-tertiary-hover-color,\n          var(--ck-tertiary-button-color)\n        );\n        --hover-background: var(\n          --ck-tertiary-button-hover-background,\n          var(--ck-tertiary-button-background)\n        );\n        --hover-box-shadow: var(\n          --ck-tertiary-button-hover-box-shadow,\n          var(--ck-tertiary-button-box-shadow)\n        );\n        --hover-border-radius: var(\n          --ck-tertiary-button-hover-border-radius,\n          var(--ck-tertiary-button-border-radius, var(--border-radius))\n        );\n        --hover-font-weight: var(\n          --ck-tertiary-button-font-weight,\n          var(--ck-secondary-button-font-weight)\n        );\n      `;\n    }\n  }}\n\n  appearance: none;\n  cursor: pointer;\n  user-select: none;\n  min-width: fit-content;\n  width: 100%;\n  display:block;\n  text-align: center;\n  height: 48px;\n  margin: 12px 0 0;\n  line-height: 48px;\n  padding: 0 4px;\n  font-size: 16px;\n  font-weight: var(--font-weight,500);\n  text-decoration: none;\n  white-space: nowrap;\n  transition: 100ms ease;\n  transition-property: box-shadow, background-color;\n  color: var(--color);\n  background: var(--background);\n  border-radius: var(--border-radius);\n  box-shadow: var(--box-shadow);\n  will-change: transform, box-shadow, background-color, color;\n\n  ${DownloadArrow} {\n    ${Arrow} {\n      transform: translateX(0);\n      ${ArrowLine} {\n        transform: none;\n      }\n      ${ArrowChevron} {\n      }\n    }\n  }\n}\n\n  @media only screen and (min-width: ${defaultTheme.mobileWidth + 1}px) {\n    &:hover,\n    &:focus-visible {\n      color: var(--ck-accent-text-color, var(--hover-color));\n      background: var(--ck-accent-color, var(--hover-background));\n      border-radius: var(--hover-border-radius);\n      box-shadow: var(--hover-box-shadow);\n\n      ${Arrow} {\n        transform: translateX(0);\n        ${ArrowLine} {\n          transform: none;\n        }\n        ${ArrowChevron} {\n        }\n      }\n      ${DownloadArrow} {\n        ${Arrow} {\n          transform: translateX(var(--x));\n          ${ArrowLine} {\n            transform: scaleX(0.1);\n          }\n          ${ArrowChevron} {\n          }\n        }\n      }\n    }\n    &:active {\n      box-shadow: var(--ck-secondary-button-active-box-shadow, var(--hover-box-shadow));\n    }\n  }\n  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {\n    transition: transform 100ms ease;\n    transform: scale(1);\n    font-size: 17px;\n    &:active {\n    }\n  }\n`;\n\nexport const InnerContainer = styled.div`\n  transform: translateZ(0); // Shifting fix\n  position: relative;\n  display: inline-block;\n  vertical-align: middle;\n  max-width: calc(100% - 42px);\n  transition: opacity 300ms ease;\n  /*\n  overflow: hidden;\n  text-overflow: ellipsis;\n  */\n`;\n\nexport const IconContainer = styled(motion.div)<{ $rounded?: boolean }>`\n  position: relative;\n  display: inline-block;\n  vertical-align: middle;\n  max-width: 20px;\n  max-height: 20px;\n  margin: 0 10px;\n  &:first-child {\n    margin-left: 0;\n  }\n  &:last-child {\n    margin-right: 0;\n  }\n  ${(props) => {\n    return (\n      props.$rounded &&\n      css`\n        overflow: hidden;\n        border-radius: 5px;\n      `\n    );\n  }}\n  svg {\n    display: block;\n    position: relative;\n    max-width: 100%;\n    height: auto;\n  }\n`;\n"],"names":[],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { supportedChains } from '@daimo/pay-common';
 import { AnimatePresence } from 'framer-motion';
 import { chainToLogo, UnknownChain } from '../../../assets/chains.js';
@@ -6,19 +6,135 @@ import { useChainIsSupported } from '../../../hooks/useChainIsSupported.js';
 import useIsMounted from '../../../hooks/useIsMounted.js';
 import { ChainContainer, Unsupported, LogoContainer, LoadingContainer } from './styles.js';
 
-const Spinner = (jsxs("svg", { "aria-hidden": "true", width: "36", height: "36", viewBox: "0 0 36 36", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.3592 30.1654C10.0472 29.4491 8.85718 28.524 7.83713 27.424C6.81708 26.324 5.98425 25.0677 5.36889 23.7054C5.20157 23.335 5.05033 22.9567 4.91578 22.5717C4.51465 21.4237 4.26735 20.2308 4.17794 19.0239C4.16599 18.8626 4.13894 18.7041 4.09809 18.5507C3.85023 17.6197 3.09399 16.8738 2.11531 16.7999C0.975331 16.7138 -0.0310983 17.5702 0.0141657 18.7125C0.0223289 18.9185 0.0340286 19.1243 0.049253 19.3298C0.165374 20.8971 0.486545 22.4464 1.00749 23.9373C1.10424 24.2142 1.20764 24.4884 1.31755 24.7596C2.13617 26.7799 3.31595 28.6371 4.80146 30.239C6.28696 31.841 8.04998 33.1573 10.0029 34.1258C10.2651 34.2558 10.5307 34.3796 10.7995 34.4969C12.247 35.1287 13.7676 35.5656 15.3217 35.7995C15.5255 35.8301 15.7298 35.8573 15.9346 35.881C17.0703 36.0122 18.0001 35.0731 18.0001 33.9299C18.0001 32.9484 17.3133 32.1381 16.4036 31.8208C16.2537 31.7685 16.0977 31.7296 15.9377 31.7056C14.7411 31.5255 13.5702 31.1891 12.4556 30.7026C12.0818 30.5394 11.716 30.3601 11.3592 30.1654Z", fill: "url(#paint0_linear_1288_1870)" }), jsx("defs", { children: jsxs("linearGradient", { id: "paint0_linear_1288_1870", x1: "2", y1: "19.4884", x2: "16.8752", y2: "33.7485", gradientUnits: "userSpaceOnUse", children: [jsx("stop", { stopColor: "var(--ck-connectbutton-balance-color,currentColor)", stopOpacity: "0.7" }), jsx("stop", { offset: "1", stopColor: "var(--ck-connectbutton-balance-color,currentColor)", stopOpacity: "0" })] }) })] }));
-/** Icon for an EVM chain, given chain ID. No ID shows a loading spinner. */
-const Chain = ({ id, unsupported: controlledUnsupported, radius = "50%", size = 24, }) => {
-    const isChainSupported = useChainIsSupported(id);
-    const unsupported = controlledUnsupported ?? !isChainSupported;
-    const chain = supportedChains.find((c) => c.chainId === id);
-    const isMounted = useIsMounted();
-    if (!isMounted)
-        return (jsx("div", { style: {
-                width: size,
-                height: size,
-            } }));
-    return (jsx(ChainContainer, { size: size, radius: radius, children: jsxs(AnimatePresence, { initial: false, children: [unsupported && (jsx(Unsupported, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, children: jsxs("svg", { width: "13", height: "12", viewBox: "0 0 13 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("path", { d: "M2.61317 11.2501H9.46246C10.6009 11.2501 11.3256 10.3506 11.3256 9.3549C11.3256 9.05145 11.255 8.73244 11.0881 8.43303L7.65903 2.14708C7.659 2.14702 7.65897 2.14696 7.65893 2.1469C7.65889 2.14682 7.65884 2.14673 7.65879 2.14664C7.31045 1.50746 6.6741 1.17871 6.04 1.17871C5.41478 1.17871 4.763 1.50043 4.41518 2.14968L0.993416 8.43476C0.828865 8.72426 0.75 9.04297 0.75 9.3549C0.75 10.3506 1.47471 11.2501 2.61317 11.2501Z", fill: "currentColor", stroke: "var(--ck-body-background, #fff)", strokeWidth: "1.5" }), jsx("path", { d: "M6.03258 7.43916C5.77502 7.43916 5.63096 7.29153 5.62223 7.02311L5.55675 4.96973C5.54802 4.69684 5.74446 4.5 6.02821 4.5C6.3076 4.5 6.51277 4.70131 6.50404 4.9742L6.43856 7.01864C6.42546 7.29153 6.2814 7.43916 6.03258 7.43916ZM6.03258 9.11676C5.7401 9.11676 5.5 8.9065 5.5 8.60677C5.5 8.30704 5.7401 8.09678 6.03258 8.09678C6.32506 8.09678 6.56515 8.30256 6.56515 8.60677C6.56515 8.91097 6.32069 9.11676 6.03258 9.11676Z", fill: "white" })] }) })), id ? (jsx(LogoContainer, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.3 }, children: chain?.chainId ? chainToLogo[chain.chainId] : jsx(UnknownChain, {}) }, `${chain?.chainId}-${chain?.name}-${id}`)) : (jsx(LoadingContainer, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.3 }, children: Spinner }, "loading"))] }) }));
+const Spinner = /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    "aria-hidden": "true",
+    width: "36",
+    height: "36",
+    viewBox: "0 0 36 36",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M11.3592 30.1654C10.0472 29.4491 8.85718 28.524 7.83713 27.424C6.81708 26.324 5.98425 25.0677 5.36889 23.7054C5.20157 23.335 5.05033 22.9567 4.91578 22.5717C4.51465 21.4237 4.26735 20.2308 4.17794 19.0239C4.16599 18.8626 4.13894 18.7041 4.09809 18.5507C3.85023 17.6197 3.09399 16.8738 2.11531 16.7999C0.975331 16.7138 -0.0310983 17.5702 0.0141657 18.7125C0.0223289 18.9185 0.0340286 19.1243 0.049253 19.3298C0.165374 20.8971 0.486545 22.4464 1.00749 23.9373C1.10424 24.2142 1.20764 24.4884 1.31755 24.7596C2.13617 26.7799 3.31595 28.6371 4.80146 30.239C6.28696 31.841 8.04998 33.1573 10.0029 34.1258C10.2651 34.2558 10.5307 34.3796 10.7995 34.4969C12.247 35.1287 13.7676 35.5656 15.3217 35.7995C15.5255 35.8301 15.7298 35.8573 15.9346 35.881C17.0703 36.0122 18.0001 35.0731 18.0001 33.9299C18.0001 32.9484 17.3133 32.1381 16.4036 31.8208C16.2537 31.7685 16.0977 31.7296 15.9377 31.7056C14.7411 31.5255 13.5702 31.1891 12.4556 30.7026C12.0818 30.5394 11.716 30.3601 11.3592 30.1654Z",
+          fill: "url(#paint0_linear_1288_1870)"
+        }
+      ),
+      /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
+        "linearGradient",
+        {
+          id: "paint0_linear_1288_1870",
+          x1: "2",
+          y1: "19.4884",
+          x2: "16.8752",
+          y2: "33.7485",
+          gradientUnits: "userSpaceOnUse",
+          children: [
+            /* @__PURE__ */ jsx(
+              "stop",
+              {
+                stopColor: "var(--ck-connectbutton-balance-color,currentColor)",
+                stopOpacity: "0.7"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "stop",
+              {
+                offset: "1",
+                stopColor: "var(--ck-connectbutton-balance-color,currentColor)",
+                stopOpacity: "0"
+              }
+            )
+          ]
+        }
+      ) })
+    ]
+  }
+);
+const Chain = ({
+  id,
+  unsupported: controlledUnsupported,
+  radius = "50%",
+  size = 24
+}) => {
+  const isChainSupported = useChainIsSupported(id);
+  const unsupported = controlledUnsupported ?? !isChainSupported;
+  const chain = supportedChains.find((c) => c.chainId === id);
+  const isMounted = useIsMounted();
+  if (!isMounted)
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          width: size,
+          height: size
+        }
+      }
+    );
+  return /* @__PURE__ */ jsx(ChainContainer, { size, radius, children: /* @__PURE__ */ jsxs(AnimatePresence, { initial: false, children: [
+    unsupported && /* @__PURE__ */ jsx(
+      Unsupported,
+      {
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        children: /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            width: "13",
+            height: "12",
+            viewBox: "0 0 13 12",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg",
+            children: [
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: "M2.61317 11.2501H9.46246C10.6009 11.2501 11.3256 10.3506 11.3256 9.3549C11.3256 9.05145 11.255 8.73244 11.0881 8.43303L7.65903 2.14708C7.659 2.14702 7.65897 2.14696 7.65893 2.1469C7.65889 2.14682 7.65884 2.14673 7.65879 2.14664C7.31045 1.50746 6.6741 1.17871 6.04 1.17871C5.41478 1.17871 4.763 1.50043 4.41518 2.14968L0.993416 8.43476C0.828865 8.72426 0.75 9.04297 0.75 9.3549C0.75 10.3506 1.47471 11.2501 2.61317 11.2501Z",
+                  fill: "currentColor",
+                  stroke: "var(--ck-body-background, #fff)",
+                  strokeWidth: "1.5"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: "M6.03258 7.43916C5.77502 7.43916 5.63096 7.29153 5.62223 7.02311L5.55675 4.96973C5.54802 4.69684 5.74446 4.5 6.02821 4.5C6.3076 4.5 6.51277 4.70131 6.50404 4.9742L6.43856 7.01864C6.42546 7.29153 6.2814 7.43916 6.03258 7.43916ZM6.03258 9.11676C5.7401 9.11676 5.5 8.9065 5.5 8.60677C5.5 8.30704 5.7401 8.09678 6.03258 8.09678C6.32506 8.09678 6.56515 8.30256 6.56515 8.60677C6.56515 8.91097 6.32069 9.11676 6.03258 9.11676Z",
+                  fill: "white"
+                }
+              )
+            ]
+          }
+        )
+      }
+    ),
+    id ? /* @__PURE__ */ jsx(
+      LogoContainer,
+      {
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        transition: { duration: 0.3 },
+        children: chain?.chainId ? chainToLogo[chain.chainId] : /* @__PURE__ */ jsx(UnknownChain, {})
+      },
+      `${chain?.chainId}-${chain?.name}-${id}`
+    ) : /* @__PURE__ */ jsx(
+      LoadingContainer,
+      {
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        transition: { duration: 0.3 },
+        children: Spinner
+      },
+      "loading"
+    )
+  ] }) });
 };
 
 export { Chain as default };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/components/Common/Chain/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../../src/components/Common/Chain/index.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { supportedChains } from \"@daimo/pay-common\";\nimport { AnimatePresence } from \"framer-motion\";\nimport { chainToLogo, UnknownChain } from \"../../../assets/chains\";\nimport { useChainIsSupported } from \"../../../hooks/useChainIsSupported\";\nimport useIsMounted from \"../../../hooks/useIsMounted\";\nimport {\n  ChainContainer,\n  LoadingContainer,\n  LogoContainer,\n  Unsupported,\n} from \"./styles\";\n\nconst Spinner = (\n  <svg\n    aria-hidden=\"true\"\n    width=\"36\"\n    height=\"36\"\n    viewBox=\"0 0 36 36\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n      d=\"M11.3592 30.1654C10.0472 29.4491 8.85718 28.524 7.83713 27.424C6.81708 26.324 5.98425 25.0677 5.36889 23.7054C5.20157 23.335 5.05033 22.9567 4.91578 22.5717C4.51465 21.4237 4.26735 20.2308 4.17794 19.0239C4.16599 18.8626 4.13894 18.7041 4.09809 18.5507C3.85023 17.6197 3.09399 16.8738 2.11531 16.7999C0.975331 16.7138 -0.0310983 17.5702 0.0141657 18.7125C0.0223289 18.9185 0.0340286 19.1243 0.049253 19.3298C0.165374 20.8971 0.486545 22.4464 1.00749 23.9373C1.10424 24.2142 1.20764 24.4884 1.31755 24.7596C2.13617 26.7799 3.31595 28.6371 4.80146 30.239C6.28696 31.841 8.04998 33.1573 10.0029 34.1258C10.2651 34.2558 10.5307 34.3796 10.7995 34.4969C12.247 35.1287 13.7676 35.5656 15.3217 35.7995C15.5255 35.8301 15.7298 35.8573 15.9346 35.881C17.0703 36.0122 18.0001 35.0731 18.0001 33.9299C18.0001 32.9484 17.3133 32.1381 16.4036 31.8208C16.2537 31.7685 16.0977 31.7296 15.9377 31.7056C14.7411 31.5255 13.5702 31.1891 12.4556 30.7026C12.0818 30.5394 11.716 30.3601 11.3592 30.1654Z\"\n      fill=\"url(#paint0_linear_1288_1870)\"\n    />\n\n    <defs>\n      <linearGradient\n        id=\"paint0_linear_1288_1870\"\n        x1=\"2\"\n        y1=\"19.4884\"\n        x2=\"16.8752\"\n        y2=\"33.7485\"\n        gradientUnits=\"userSpaceOnUse\"\n      >\n        <stop\n          stopColor=\"var(--ck-connectbutton-balance-color,currentColor)\"\n          stopOpacity=\"0.7\"\n        />\n        <stop\n          offset=\"1\"\n          stopColor=\"var(--ck-connectbutton-balance-color,currentColor)\"\n          stopOpacity=\"0\"\n        />\n      </linearGradient>\n    </defs>\n  </svg>\n);\n\n/** Icon for an EVM chain, given chain ID. No ID shows a loading spinner. */\nconst Chain: React.FC<{\n  id?: number;\n  unsupported?: boolean;\n  radius?: number | string;\n  size?: number | string;\n}> = ({\n  id,\n  unsupported: controlledUnsupported,\n  radius = \"50%\",\n  size = 24,\n}) => {\n  const isChainSupported = useChainIsSupported(id);\n  const unsupported = controlledUnsupported ?? !isChainSupported;\n\n  const chain = supportedChains.find((c) => c.chainId === id);\n  const isMounted = useIsMounted();\n  if (!isMounted)\n    return (\n      <div\n        style={{\n          width: size,\n          height: size,\n        }}\n      />\n    );\n\n  return (\n    <ChainContainer size={size} radius={radius}>\n      <AnimatePresence initial={false}>\n        {unsupported && (\n          <Unsupported\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n          >\n            <svg\n              width=\"13\"\n              height=\"12\"\n              viewBox=\"0 0 13 12\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M2.61317 11.2501H9.46246C10.6009 11.2501 11.3256 10.3506 11.3256 9.3549C11.3256 9.05145 11.255 8.73244 11.0881 8.43303L7.65903 2.14708C7.659 2.14702 7.65897 2.14696 7.65893 2.1469C7.65889 2.14682 7.65884 2.14673 7.65879 2.14664C7.31045 1.50746 6.6741 1.17871 6.04 1.17871C5.41478 1.17871 4.763 1.50043 4.41518 2.14968L0.993416 8.43476C0.828865 8.72426 0.75 9.04297 0.75 9.3549C0.75 10.3506 1.47471 11.2501 2.61317 11.2501Z\"\n                fill=\"currentColor\"\n                stroke=\"var(--ck-body-background, #fff)\"\n                strokeWidth=\"1.5\"\n              />\n              <path\n                d=\"M6.03258 7.43916C5.77502 7.43916 5.63096 7.29153 5.62223 7.02311L5.55675 4.96973C5.54802 4.69684 5.74446 4.5 6.02821 4.5C6.3076 4.5 6.51277 4.70131 6.50404 4.9742L6.43856 7.01864C6.42546 7.29153 6.2814 7.43916 6.03258 7.43916ZM6.03258 9.11676C5.7401 9.11676 5.5 8.9065 5.5 8.60677C5.5 8.30704 5.7401 8.09678 6.03258 8.09678C6.32506 8.09678 6.56515 8.30256 6.56515 8.60677C6.56515 8.91097 6.32069 9.11676 6.03258 9.11676Z\"\n                fill=\"white\"\n              />\n            </svg>\n          </Unsupported>\n        )}\n        {id ? (\n          <LogoContainer\n            key={`${chain?.chainId}-${chain?.name}-${id}`}\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n            transition={{ duration: 0.3 }}\n          >\n            {chain?.chainId ? chainToLogo[chain.chainId] : <UnknownChain />}\n          </LogoContainer>\n        ) : (\n          <LoadingContainer\n            key=\"loading\"\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n            transition={{ duration: 0.3 }}\n          >\n            {Spinner}\n          </LoadingContainer>\n        )}\n      </AnimatePresence>\n    </ChainContainer>\n  );\n};\n\nexport default Chain;\n"],"names":[],"mappings":"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"}

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

@@ -2,23 +2,19 @@ import { motion } from 'framer-motion';
 import { css, keyframes } from 'styled-components';
 import styled from '../../../styles/styled/index.js';
 
-const ChainContainer = styled.div `
+const ChainContainer = styled.div`
   --bg: transparent;
   --color: #333;
-  ${(props) => typeof props.size === "string"
-    ? css `
+  ${(props) => typeof props.size === "string" ? css`
           --width: ${props.size};
           --height: ${props.size};
-        `
-    : css `
+        ` : css`
           --width: ${props.size >= 0 ? `${props.size}px` : "24px"};
           --height: ${props.size >= 0 ? `${props.size}px` : "24px"};
         `};
-  ${(props) => typeof props.radius === "string"
-    ? css `
+  ${(props) => typeof props.radius === "string" ? css`
           --radius: ${props.radius};
-        `
-    : css `
+        ` : css`
           --radius: ${props.radius >= 0 ? `${props.radius}px` : "24px"};
         `};
   display: block;
@@ -42,7 +38,7 @@ const ChainContainer = styled.div `
     justify-content: center;
   }
 `;
-const LogoContainer = styled(motion.div) `
+const LogoContainer = styled(motion.div)`
   display: block;
   position: absolute;
   inset: 0;
@@ -58,11 +54,11 @@ const LogoContainer = styled(motion.div) `
     height: auto;
   }
 `;
-const Spin = keyframes `
+const Spin = keyframes`
   0%{ transform: rotate(0deg); }
   100%{ transform: rotate(360deg); }
 `;
-const LoadingContainer = styled(motion.div) `
+const LoadingContainer = styled(motion.div)`
   position: absolute;
   inset: 0;
   animation: ${Spin} 1s linear infinite;
@@ -72,7 +68,7 @@ const LoadingContainer = styled(motion.div) `
     inset: 0;
   }
 `;
-const Unsupported = styled(motion.div) `
+const Unsupported = styled(motion.div)`
   z-index: 2;
   position: absolute;
   top: 0;

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../../src/components/Common/Chain/styles.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;AASa,MAAA,cAAc,GAAG,MAAM,CAAC,GAAG,CAAqB,CAAA;;;IAGzD,CAAC,KAAK,KACN,OAAO,KAAK,CAAC,IAAI,KAAK,QAAQ;MAC1B,GAAG,CAAA,CAAA;AACU,mBAAA,EAAA,KAAK,CAAC,IAAI,CAAA;AACT,oBAAA,EAAA,KAAK,CAAC,IAAI,CAAA;AACvB,QAAA,CAAA;MACD,GAAG,CAAA,CAAA;AACU,mBAAA,EAAA,KAAK,CAAC,IAAI,IAAI,CAAC,GAAG,CAAG,EAAA,KAAK,CAAC,IAAI,CAAA,EAAA,CAAI,GAAG,MAAM,CAAA;AAC3C,oBAAA,EAAA,KAAK,CAAC,IAAI,IAAI,CAAC,GAAG,CAAG,EAAA,KAAK,CAAC,IAAI,CAAA,EAAA,CAAI,GAAG,MAAM,CAAA;AACzD,QAAA,CAAA,CAAA;IACL,CAAC,KAAK,KACN,OAAO,KAAK,CAAC,MAAM,KAAK,QAAQ;MAC5B,GAAG,CAAA,CAAA;AACW,oBAAA,EAAA,KAAK,CAAC,MAAM,CAAA;AACzB,QAAA,CAAA;MACD,GAAG,CAAA,CAAA;AACW,oBAAA,EAAA,KAAK,CAAC,MAAM,IAAI,CAAC,GAAG,CAAG,EAAA,KAAK,CAAC,MAAM,CAAA,EAAA,CAAI,GAAG,MAAM,CAAA;AAC7D,QAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;EAqBP;AAEW,MAAA,aAAa,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA,CAAA;;;;;;;;;;;;;;;EAe7C;AAEF,MAAM,IAAI,GAAG,SAAS,CAAA,CAAA;;;CAGrB,CAAC;AACW,MAAA,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA,CAAA;;;eAGnC,IAAI,CAAA;;;;;;EAMjB;AAEW,MAAA,WAAW,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"styles.js","sources":["../../../../../src/components/Common/Chain/styles.ts"],"sourcesContent":["import { motion } from \"framer-motion\";\nimport { css, keyframes } from \"styled-components\";\nimport styled from \"./../../../styles/styled\";\n\ntype ChainContainerProps = {\n  size?: number | string;\n  radius?: number | string;\n};\n\nexport const ChainContainer = styled.div<ChainContainerProps>`\n  --bg: transparent;\n  --color: #333;\n  ${(props) =>\n    typeof props.size === \"string\"\n      ? css`\n          --width: ${props.size};\n          --height: ${props.size};\n        `\n      : css`\n          --width: ${props.size >= 0 ? `${props.size}px` : \"24px\"};\n          --height: ${props.size >= 0 ? `${props.size}px` : \"24px\"};\n        `};\n  ${(props) =>\n    typeof props.radius === \"string\"\n      ? css`\n          --radius: ${props.radius};\n        `\n      : css`\n          --radius: ${props.radius >= 0 ? `${props.radius}px` : \"24px\"};\n        `};\n  display: block;\n  position: relative;\n  width: var(--width);\n  height: var(--height);\n  min-width: var(--width);\n  min-height: var(--height);\n  border-radius: var(--radius);\n  background: var(--ck-body-background-secondary);\n  pointer-events: none;\n  user-select: none;\n  svg {\n    display: block;\n    width: 100%;\n    height: auto;\n  }\n  > div {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n`;\n\nexport const LogoContainer = styled(motion.div)`\n  display: block;\n  position: absolute;\n  inset: 0;\n  overflow: hidden;\n  border-radius: inherit;\n  user-select: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  svg {\n    display: block;\n    width: 100%;\n    height: auto;\n  }\n`;\n\nconst Spin = keyframes`\n  0%{ transform: rotate(0deg); }\n  100%{ transform: rotate(360deg); }\n`;\nexport const LoadingContainer = styled(motion.div)`\n  position: absolute;\n  inset: 0;\n  animation: ${Spin} 1s linear infinite;\n  svg {\n    display: block;\n    position: absolute;\n    inset: 0;\n  }\n`;\n\nexport const Unsupported = styled(motion.div)`\n  z-index: 2;\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 40%;\n  height: 40%;\n  min-width: 13px;\n  min-height: 13px;\n  color: var(--ck-body-color-danger, red);\n  svg {\n    display: block;\n    position: relative;\n    top: -30%;\n    right: -30%;\n  }\n`;\n"],"names":[],"mappings":";;;;AASO,MAAM,iBAAiB,MAAO,CAAA,GAAA,CAAA;AAAA;AAAA;AAAA,EAAA,EAGjC,CAAC,KAAA,KACD,OAAO,KAAA,CAAM,SAAS,QAClB,GAAA,GAAA,CAAA;AAAA,mBAAA,EACa,MAAM,IAAI,CAAA;AAAA,oBAAA,EACT,MAAM,IAAI,CAAA;AAAA,QAExB,CAAA,GAAA,GAAA,CAAA;AAAA,mBAAA,EACa,MAAM,IAAQ,IAAA,CAAA,GAAI,GAAG,KAAM,CAAA,IAAI,OAAO,MAAM,CAAA;AAAA,oBAAA,EAC3C,MAAM,IAAQ,IAAA,CAAA,GAAI,GAAG,KAAM,CAAA,IAAI,OAAO,MAAM,CAAA;AAAA,QACzD,CAAA,CAAA;AAAA,EAAA,EACL,CAAC,KAAA,KACD,OAAO,KAAA,CAAM,WAAW,QACpB,GAAA,GAAA,CAAA;AAAA,oBAAA,EACc,MAAM,MAAM,CAAA;AAAA,QAE1B,CAAA,GAAA,GAAA,CAAA;AAAA,oBAAA,EACc,MAAM,MAAU,IAAA,CAAA,GAAI,GAAG,KAAM,CAAA,MAAM,OAAO,MAAM,CAAA;AAAA,QAC7D,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAuBI,MAAA,aAAA,GAAgB,MAAO,CAAA,MAAA,CAAO,GAAG,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAiB9C,MAAM,IAAO,GAAA,SAAA,CAAA;AAAA;AAAA;AAAA,CAAA,CAAA;AAIA,MAAA,gBAAA,GAAmB,MAAO,CAAA,MAAA,CAAO,GAAG,CAAA,CAAA;AAAA;AAAA;AAAA,aAAA,EAGlC,IAAI,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAQN,MAAA,WAAA,GAAc,MAAO,CAAA,MAAA,CAAO,GAAG,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;"}