@daimo/pay 0.3.21 → 1.0.0

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

@@ -0,0 +1,28 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import React from 'react';
+import { BrowserIconContainer } from './styles.js';
+import browsers from '../../../assets/browsers.js';
+import { detectBrowser } from '../../../utils/index.js';
+
+const BrowserIcon = React.forwardRef(({ browser }, ref) => {
+    const currentBrowser = browser ?? detectBrowser();
+    let icon;
+    switch (currentBrowser) {
+        case "chrome":
+            icon = browsers.Chrome;
+            break;
+        case "firefox":
+            icon = browsers.FireFox;
+            break;
+        case "edge":
+            icon = browsers.Edge;
+            break;
+    }
+    if (!icon)
+        return jsx(Fragment, {});
+    return jsx(BrowserIconContainer, { children: icon });
+});
+BrowserIcon.displayName = "BrowserIcon";
+
+export { BrowserIcon as default };
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,20 @@
+import { motion } from 'framer-motion';
+import styled from '../../../styles/styled/index.js';
+
+const BrowserIconContainer = styled(motion.div) `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  max-width: 32px;
+  max-height: 32px;
+  width: 100%;
+  height: 100%;
+  svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+`;
+
+export { BrowserIconContainer };
+//# sourceMappingURL=styles.js.map

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

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

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

@@ -0,0 +1,38 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { AnimatePresence } from 'framer-motion';
+import { flattenChildren } from '../../../utils/index.js';
+import FitText from '../FitText/index.js';
+import { Spinner } from '../Spinner/index.js';
+import { ButtonContainer, ButtonContainerInner, IconContainer, DownloadArrow, DownloadArrowInner, Arrow, ArrowLine, ArrowChevron, InnerContainer, SpinnerContainer } from './styles.js';
+
+const transition = {
+    duration: 0.4,
+    ease: [0.175, 0.885, 0.32, 0.98],
+};
+const Button = ({ children, variant = "secondary", // unique aspect to how we're handling buttons
+disabled, icon, iconPosition = "left", roundedIcon, waiting, arrow, download, href, style, onClick, }) => {
+    const key = typeof children === "string"
+        ? children
+        : flattenChildren(children).join(""); // Need to generate a string for the key so we can automatically animate between content
+    const hrefUrl = typeof href === "string" ? href : flattenChildren(href).join(""); // Need to have a flat string for the href
+    return (jsx(ButtonContainer, { as: href ? "a" : undefined, onClick: (event) => {
+            if (!disabled && onClick)
+                onClick(event);
+        }, href: hrefUrl, target: href && "_blank", rel: href && "noopener noreferrer", disabled: disabled, "$variant": variant, style: style, children: jsxs(AnimatePresence, { initial: false, children: [jsxs(ButtonContainerInner, { initial: { opacity: 0, y: -10 }, animate: {
+                        opacity: 1,
+                        y: -1,
+                    }, exit: {
+                        position: "absolute",
+                        opacity: 0,
+                        y: 10,
+                        transition: {
+                            ...transition,
+                        },
+                    }, transition: {
+                        ...transition,
+                        delay: 0.2,
+                    }, children: [icon && iconPosition === "left" && (jsx(IconContainer, { "$rounded": roundedIcon, children: icon })), download && (jsx(DownloadArrow, { children: jsx(DownloadArrowInner, { children: jsxs(Arrow, { width: "13", height: "12", viewBox: "0 0 13 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx(ArrowLine, { stroke: "currentColor", x1: "1", y1: "6", x2: "12", y2: "6", strokeWidth: "var(--stroke-width)", strokeLinecap: "round" }), jsx(ArrowChevron, { stroke: "currentColor", d: "M7.51431 1.5L11.757 5.74264M7.5 10.4858L11.7426 6.24314", strokeWidth: "var(--stroke-width)", strokeLinecap: "round" })] }) }) })), jsx(InnerContainer, { style: { paddingLeft: arrow ? 6 : 0 }, children: jsx(FitText, { children: children }) }), icon && iconPosition === "right" && (jsx(IconContainer, { "$rounded": roundedIcon, children: icon })), arrow && (jsxs(Arrow, { width: "13", height: "12", viewBox: "0 0 13 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx(ArrowLine, { stroke: "currentColor", x1: "1", y1: "6", x2: "12", y2: "6", strokeWidth: "2", strokeLinecap: "round" }), jsx(ArrowChevron, { stroke: "currentColor", d: "M7.51431 1.5L11.757 5.74264M7.5 10.4858L11.7426 6.24314", strokeWidth: "2", strokeLinecap: "round" })] }))] }, key), waiting && (jsx(SpinnerContainer, { children: jsx(Spinner, {}) }))] }) }));
+};
+
+export { Button as default };
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,291 @@
+import { motion } from 'framer-motion';
+import { css } from 'styled-components';
+import defaultTheme from '../../../constants/defaultTheme.js';
+import styled from '../../../styles/styled/index.js';
+
+const SpinnerContainer = styled(motion.div) `
+  position: absolute;
+  right: 16px;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const Arrow = styled.svg `
+  --x: -3px;
+  --stroke-width: 2;
+  position: relative;
+  top: 1px;
+  left: -0.5px;
+  display: inline-block;
+  vertical-align: middle;
+  margin-left: 9px;
+  margin-right: 1px;
+  transition: all 100ms ease;
+  transform: translateX(var(--x, -3px));
+  color: currentColor;
+  opacity: 0.4;
+`;
+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 `
+  display: inline-block;
+  vertical-align: middle;
+  position: relative;
+  margin-right: 6px;
+  color: currentColor;
+`;
+const DownloadArrowInner = styled.div `
+  transform: rotate(90deg);
+  ${Arrow} {
+    margin: 0 auto;
+  }
+`;
+const ButtonContainerInner = styled(motion.div) `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  inset: 0;
+  height: 100%;
+`;
+const ButtonContainer = styled.button `
+
+  ${({ disabled }) => disabled &&
+    css `
+      cursor: not-allowed;
+      pointer-events: none;
+      ${InnerContainer} {
+        opacity: 0.4;
+      }
+    `}
+
+  ${({ $variant }) => {
+    if ($variant === "primary") {
+        return css `
+        --color: var(--ck-primary-button-color, var(--ck-body-color));
+        --background: var(
+          --ck-primary-button-background,
+          var(--ck-body-background-primary)
+        );
+        --box-shadow: var(--ck-primary-button-box-shadow);
+        --border-radius: var(--ck-primary-button-border-radius);
+        --font-weight: var(--ck-primary-button-font-weight, 500);
+
+        --hover-color: var(--ck-button-primary-hover-color, var(--color));
+        --hover-background: var(
+          --ck-primary-button-hover-background,
+          var(--background)
+        );
+        --hover-box-shadow: var(
+          --ck-primary-button-hover-box-shadow,
+          var(--box-shadow)
+        );
+        --hover-border-radius: var(
+          --ck-primary-button-hover-border-radius,
+          var(--border-radius)
+        );
+        --hover-font-weight: var(
+          --ck-primary-button-font-weight,
+          var(--font-weight)
+        );
+      `;
+    }
+    else if ($variant === "secondary") {
+        return css `
+        --color: var(--ck-secondary-button-color, var(--ck-body-color));
+        --background: var(
+          --ck-secondary-button-background,
+          var(--ck-body-background-secondary)
+        );
+        --box-shadow: var(--ck-secondary-button-box-shadow);
+        --border-radius: var(--ck-secondary-button-border-radius);
+        --font-weight: var(--ck-secondary-button-font-weight, 500);
+
+        --hover-color: var(--ck-secondary-button-hover-color, var(--color));
+        --hover-background: var(
+          --ck-secondary-button-hover-background,
+          var(--background)
+        );
+        --hover-box-shadow: var(
+          --ck-secondary-button-hover-box-shadow,
+          var(--box-shadow)
+        );
+        --hover-border-radius: var(
+          --ck-secondary-button-hover-border-radius,
+          var(--border-radius)
+        );
+        --hover-font-weight: var(
+          --ck-secondary-button-font-weight,
+          var(--font-weight)
+        );
+      `;
+    }
+    else if ($variant === "tertiary") {
+        return css `
+        --color: var(
+          --ck-tertiary-button-color,
+          var(--ck-secondary-button-color)
+        );
+        --background: var(
+          --ck-tertiary-button-background,
+          var(--ck-secondary-button-background)
+        );
+        --box-shadow: var(
+          --ck-tertiary-button-box-shadow,
+          var(--ck-secondary-button-box-shadow)
+        );
+        --border-radius: var(
+          --ck-tertiary-button-border-radius,
+          var(--ck-secondary-button-border-radius)
+        );
+        --font-weight: var(
+          --ck-tertiary-button-font-weight,
+          var(--ck-secondary-button-font-weight)
+        );
+
+        --hover-color: var(
+          --button-tertiary-hover-color,
+          var(--ck-tertiary-button-color)
+        );
+        --hover-background: var(
+          --ck-tertiary-button-hover-background,
+          var(--ck-tertiary-button-background)
+        );
+        --hover-box-shadow: var(
+          --ck-tertiary-button-hover-box-shadow,
+          var(--ck-tertiary-button-box-shadow)
+        );
+        --hover-border-radius: var(
+          --ck-tertiary-button-hover-border-radius,
+          var(--ck-tertiary-button-border-radius, var(--border-radius))
+        );
+        --hover-font-weight: var(
+          --ck-tertiary-button-font-weight,
+          var(--ck-secondary-button-font-weight)
+        );
+      `;
+    }
+}}
+
+  appearance: none;
+  cursor: pointer;
+  user-select: none;
+  min-width: fit-content;
+  width: 100%;
+  display:block;
+  text-align: center;
+  height: 48px;
+  margin: 12px 0 0;
+  line-height: 48px;
+  padding: 0 4px;
+  font-size: 16px;
+  font-weight: var(--font-weight,500);
+  text-decoration: none;
+  white-space: nowrap;
+  transition: 100ms ease;
+  transition-property: box-shadow, background-color;
+  color: var(--color);
+  background: var(--background);
+  border-radius: var(--border-radius);
+  box-shadow: var(--box-shadow);
+  will-change: transform, box-shadow, background-color, color;
+
+  ${DownloadArrow} {
+    ${Arrow} {
+      transform: translateX(0);
+      ${ArrowLine} {
+        transform: none;
+      }
+      ${ArrowChevron} {
+      }
+    }
+  }
+}
+
+  @media only screen and (min-width: ${defaultTheme.mobileWidth + 1}px) {
+    &:hover,
+    &:focus-visible {
+      color: var(--ck-accent-text-color, var(--hover-color));
+      background: var(--ck-accent-color, var(--hover-background));
+      border-radius: var(--hover-border-radius);
+      box-shadow: var(--hover-box-shadow);
+
+      ${Arrow} {
+        transform: translateX(0);
+        ${ArrowLine} {
+          transform: none;
+        }
+        ${ArrowChevron} {
+        }
+      }
+      ${DownloadArrow} {
+        ${Arrow} {
+          transform: translateX(var(--x));
+          ${ArrowLine} {
+            transform: scaleX(0.1);
+          }
+          ${ArrowChevron} {
+          }
+        }
+      }
+    }
+    &:active {
+      box-shadow: var(--ck-secondary-button-active-box-shadow, var(--hover-box-shadow));
+    }
+  }
+  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
+    transition: transform 100ms ease;
+    transform: scale(1);
+    font-size: 17px;
+    &:active {
+    }
+  }
+`;
+const InnerContainer = styled.div `
+  transform: translateZ(0); // Shifting fix
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  max-width: calc(100% - 42px);
+  transition: opacity 300ms ease;
+  /*
+  overflow: hidden;
+  text-overflow: ellipsis;
+  */
+`;
+const IconContainer = styled(motion.div) `
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  max-width: 20px;
+  max-height: 20px;
+  margin: 0 10px;
+  &:first-child {
+    margin-left: 0;
+  }
+  &:last-child {
+    margin-right: 0;
+  }
+  ${(props) => {
+    return (props.$rounded &&
+        css `
+        overflow: hidden;
+        border-radius: 5px;
+      `);
+}}
+  svg {
+    display: block;
+    position: relative;
+    max-width: 100%;
+    height: auto;
+  }
+`;
+
+export { Arrow, ArrowChevron, ArrowLine, ButtonContainer, ButtonContainerInner, DownloadArrow, DownloadArrowInner, IconContainer, InnerContainer, SpinnerContainer };
+//# sourceMappingURL=styles.js.map

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

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

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

@@ -0,0 +1,25 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { AnimatePresence } from 'framer-motion';
+import Chains from '../../../assets/chains.js';
+import { chainConfigs } from '../../../constants/chainConfigs.js';
+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 = chainConfigs.find((c) => c.id === 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?.logo ?? jsx(Chains.UnknownChain, {}) }, `${chain?.id}-${chain?.name}-${id}`)) : (jsx(LoadingContainer, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.3 }, children: Spinner }, "loading"))] }) }));
+};
+
+export { Chain as default };
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,94 @@
+import { motion } from 'framer-motion';
+import { css, keyframes } from 'styled-components';
+import styled from '../../../styles/styled/index.js';
+
+const ChainContainer = styled.div `
+  --bg: transparent;
+  --color: #333;
+  ${(props) => typeof props.size === "string"
+    ? css `
+          --width: ${props.size};
+          --height: ${props.size};
+        `
+    : css `
+          --width: ${props.size >= 0 ? `${props.size}px` : "24px"};
+          --height: ${props.size >= 0 ? `${props.size}px` : "24px"};
+        `};
+  ${(props) => typeof props.radius === "string"
+    ? css `
+          --radius: ${props.radius};
+        `
+    : css `
+          --radius: ${props.radius >= 0 ? `${props.radius}px` : "24px"};
+        `};
+  display: block;
+  position: relative;
+  width: var(--width);
+  height: var(--height);
+  min-width: var(--width);
+  min-height: var(--height);
+  border-radius: var(--radius);
+  background: var(--ck-body-background-secondary);
+  pointer-events: none;
+  user-select: none;
+  svg {
+    display: block;
+    width: 100%;
+    height: auto;
+  }
+  > div {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+`;
+const LogoContainer = styled(motion.div) `
+  display: block;
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  border-radius: inherit;
+  user-select: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  svg {
+    display: block;
+    width: 100%;
+    height: auto;
+  }
+`;
+const Spin = keyframes `
+  0%{ transform: rotate(0deg); }
+  100%{ transform: rotate(360deg); }
+`;
+const LoadingContainer = styled(motion.div) `
+  position: absolute;
+  inset: 0;
+  animation: ${Spin} 1s linear infinite;
+  svg {
+    display: block;
+    position: absolute;
+    inset: 0;
+  }
+`;
+const Unsupported = styled(motion.div) `
+  z-index: 2;
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 40%;
+  height: 40%;
+  min-width: 13px;
+  min-height: 13px;
+  color: var(--ck-body-color-danger, red);
+  svg {
+    display: block;
+    position: relative;
+    top: -30%;
+    right: -30%;
+  }
+`;
+
+export { ChainContainer, LoadingContainer, LogoContainer, Unsupported };
+//# sourceMappingURL=styles.js.map

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

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

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

@@ -0,0 +1,107 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { useAccount, useSwitchChain } from 'wagmi';
+import { chainConfigs } from '../../../constants/chainConfigs.js';
+import Alert from '../Alert/index.js';
+import { SwitchNetworksContainer, ChainButtonContainer, ChainButtons, ChainButton, ChainLogoContainer, ChainLogoSpinner, ChainIcon, ChainButtonStatus, ChainButtonBg } from './styles.js';
+import { motion, AnimatePresence } from 'framer-motion';
+import { isMobile, isCoinbaseWalletConnector } from '../../../utils/index.js';
+import Chains from '../../../assets/chains.js';
+import useLocales from '../../../hooks/useLocales.js';
+import { usePayContext } from '../../DaimoPay.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: "M2 16.75C2.69036 16.75 3.25 17.3096 3.25 18V19C3.25 26.5939 9.40609 32.75 17 32.75V35.25C8.02537 35.25 0.75 27.9746 0.75 19V18C0.75 17.3096 1.30964 16.75 2 16.75Z", fill: "url(#paint0_linear_1288_18701)" }), jsx("defs", { children: jsxs("linearGradient", { id: "paint0_linear_1288_18701", x1: "2", y1: "19.4884", x2: "16.8752", y2: "33.7485", gradientUnits: "userSpaceOnUse", children: [jsx("stop", { stopColor: "var(--ck-spinner-color)" }), jsx("stop", { offset: "1", stopColor: "var(--ck-spinner-color)", stopOpacity: "0" })] }) })] }));
+const ChainSelectList = ({ variant, }) => {
+    const { connector, chain } = useAccount();
+    const { chains, isPending, switchChain, error } = useSwitchChain();
+    const [pendingChainId, setPendingChainId] = useState(undefined);
+    const locales = useLocales({});
+    const mobile = isMobile();
+    const isError = error?.["code"] === 4902; // Wallet cannot switch networks
+    const disabled = isError || !switchChain;
+    const handleSwitchNetwork = (chainId) => {
+        if (switchChain) {
+            setPendingChainId(chainId);
+            switchChain({ chainId });
+        }
+    };
+    const { triggerResize } = usePayContext();
+    return (jsxs(SwitchNetworksContainer, { style: { marginBottom: switchChain !== undefined ? -8 : 0 }, children: [jsx(ChainButtonContainer, { children: jsx(ChainButtons, { children: chains.map((x) => {
+                        const c = chainConfigs.find((ch) => ch.id === x.id);
+                        const ch = { ...c, ...x };
+                        return (jsxs(ChainButton, { "$variant": variant, disabled: disabled ||
+                                ch.id === chain?.id ||
+                                (isPending && pendingChainId === ch.id), onClick: () => handleSwitchNetwork?.(ch.id), style: {
+                                opacity: disabled && ch.id !== chain?.id ? 0.4 : undefined,
+                            }, children: [jsxs("span", { style: {
+                                        display: "flex",
+                                        alignItems: "center",
+                                        justifyContent: "flex-start",
+                                        gap: 12,
+                                        color: ch.id === chain?.id
+                                            ? "var(--ck-dropdown-active-color, inherit)"
+                                            : "inherit",
+                                    }, children: [jsxs(ChainLogoContainer, { children: [jsx(ChainLogoSpinner, { initial: { opacity: 0 }, animate: {
+                                                        opacity: isPending && pendingChainId === ch.id ? 1 : 0,
+                                                    }, transition: {
+                                                        ease: [0.76, 0, 0.24, 1],
+                                                        duration: 0.15,
+                                                        delay: 0.1,
+                                                    }, children: jsx(motion.div, { animate: 
+                                                        // UI fix for Coinbase Wallet on mobile does not remove isPending on rejection event
+                                                        mobile &&
+                                                            isCoinbaseWalletConnector(connector?.id) &&
+                                                            isPending &&
+                                                            pendingChainId === ch.id
+                                                            ? {
+                                                                opacity: [1, 0],
+                                                                transition: { delay: 4, duration: 3 },
+                                                            }
+                                                            : { opacity: 1 }, children: Spinner }, `${ch?.id}-${ch?.name}`) }), jsx(ChainIcon, { children: ch.logo ?? jsx(Chains.UnknownChain, {}) })] }), ch.name] }), variant !== "secondary" && (jsx(ChainButtonStatus, { children: jsxs(AnimatePresence, { initial: false, exitBeforeEnter: true, children: [ch.id === chain?.id && (jsx(motion.span, { style: {
+                                                    color: "var(--ck-dropdown-active-color, var(--ck-focus-color))",
+                                                    display: "block",
+                                                    position: "relative",
+                                                }, initial: { opacity: 0, x: -4 }, animate: { opacity: 1, x: 0 }, exit: {
+                                                    opacity: 0,
+                                                    x: 4,
+                                                    transition: { duration: 0.1, delay: 0 },
+                                                }, transition: {
+                                                    ease: [0.76, 0, 0.24, 1],
+                                                    duration: 0.3,
+                                                    delay: 0.2,
+                                                }, children: locales.connected }, "connectedText")), isPending && pendingChainId === ch.id && (jsx(motion.span, { style: {
+                                                    color: "var(--ck-dropdown-pending-color, inherit)",
+                                                    display: "block",
+                                                    position: "relative",
+                                                }, initial: {
+                                                    opacity: 0,
+                                                    x: -4,
+                                                }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: 4 }, transition: {
+                                                    ease: [0.76, 0, 0.24, 1],
+                                                    duration: 0.3,
+                                                    delay: 0.1,
+                                                }, children: jsx(motion.span, { animate: 
+                                                    // UI fix for Coinbase Wallet on mobile does not remove isLoading on rejection event
+                                                    mobile &&
+                                                        isCoinbaseWalletConnector(connector?.id) && {
+                                                        opacity: [1, 0],
+                                                        transition: { delay: 4, duration: 4 },
+                                                    }, children: locales.approveInWallet }) }, "approveText"))] }) })), variant === "secondary" ? (jsx(ChainButtonBg, { initial: false, animate: {
+                                        opacity: ch.id === chain?.id ? 1 : 0,
+                                    }, transition: {
+                                        duration: 0.3,
+                                        ease: "easeOut",
+                                    } })) : (
+                                //hover === ch.name && (
+                                ch.id === chain?.id && (jsx(ChainButtonBg, { layoutId: "activeChain", layout: "position", transition: {
+                                        duration: 0.3,
+                                        ease: "easeOut",
+                                    } })))] }, `${ch?.id}-${ch?.name}`));
+                    }) }) }), jsx(AnimatePresence, { children: isError && (jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: {
+                        ease: [0.76, 0, 0.24, 1],
+                        duration: 0.3,
+                    }, onAnimationStart: triggerResize, onAnimationComplete: triggerResize, children: jsx("div", { style: { paddingTop: 10, paddingBottom: 8 }, children: jsxs(Alert, { children: [locales.warnings_walletSwitchingUnsupported, " ", locales.warnings_walletSwitchingUnsupportedResolve] }) }) })) })] }));
+};
+
+export { ChainSelectList as default };
+//# sourceMappingURL=index.js.map

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

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