@daimo/pay 1.16.0 → 1.16.1

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

@@ -5,102 +5,245 @@ import { useAccount, useSwitchChain } from 'wagmi';
 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 { isMobile, isBaseAccountConnector } from '../../../utils/index.js';
 import { chainToLogo, UnknownChain } from '../../../assets/chains.js';
 import useLocales from '../../../hooks/useLocales.js';
 import { usePayContext } from '../../../hooks/usePayContext.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 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: "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)"
         }
-    };
-    const { triggerResize } = usePayContext();
-    return (jsxs(SwitchNetworksContainer, { style: { marginBottom: switchChain !== undefined ? -8 : 0 }, children: [jsx(ChainButtonContainer, { children: jsx(ChainButtons, { children: chains.map((x) => {
-                        const c = supportedChains.find((ch) => ch.chainId === 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.chainId ? chainToLogo[ch.chainId] : jsx(UnknownChain, {}) })] }), ch.name] }), variant !== "secondary" && (jsx(ChainButtonStatus, { children: jsxs(AnimatePresence, { initial: false, mode: "wait", 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: {
+      ),
+      /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
+        "linearGradient",
+        {
+          id: "paint0_linear_1288_18701",
+          x1: "2",
+          y1: "19.4884",
+          x2: "16.8752",
+          y2: "33.7485",
+          gradientUnits: "userSpaceOnUse",
+          children: [
+            /* @__PURE__ */ jsx("stop", { stopColor: "var(--ck-spinner-color)" }),
+            /* @__PURE__ */ 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(
+    void 0
+  );
+  const locales = useLocales({});
+  const mobile = isMobile();
+  const isError = error?.["code"] === 4902;
+  const disabled = isError || !switchChain;
+  const handleSwitchNetwork = (chainId) => {
+    if (switchChain) {
+      setPendingChainId(chainId);
+      switchChain({ chainId });
+    }
+  };
+  const { triggerResize } = usePayContext();
+  return /* @__PURE__ */ jsxs(
+    SwitchNetworksContainer,
+    {
+      style: { marginBottom: switchChain !== void 0 ? -8 : 0 },
+      children: [
+        /* @__PURE__ */ jsx(ChainButtonContainer, { children: /* @__PURE__ */ jsx(ChainButtons, { children: chains.map((x) => {
+          const c = supportedChains.find((ch2) => ch2.chainId === x.id);
+          const ch = { ...c, ...x };
+          return /* @__PURE__ */ 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 : void 0
+              },
+              children: [
+                /* @__PURE__ */ 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: [
+                      /* @__PURE__ */ jsxs(ChainLogoContainer, { children: [
+                        /* @__PURE__ */ 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: /* @__PURE__ */ jsx(
+                              motion.div,
+                              {
+                                animate: (
+                                  // UI fix for Coinbase Wallet on mobile does not remove isPending on rejection event
+                                  mobile && isBaseAccountConnector(connector?.id) && isPending && pendingChainId === ch.id ? {
+                                    opacity: [1, 0],
+                                    transition: { delay: 4, duration: 3 }
+                                  } : { opacity: 1 }
+                                ),
+                                children: Spinner
+                              },
+                              `${ch?.id}-${ch?.name}`
+                            )
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(ChainIcon, { children: ch.chainId ? chainToLogo[ch.chainId] : /* @__PURE__ */ jsx(UnknownChain, {}) })
+                      ] }),
+                      ch.name
+                    ]
+                  }
+                ),
+                variant !== "secondary" && /* @__PURE__ */ jsx(ChainButtonStatus, { children: /* @__PURE__ */ jsxs(AnimatePresence, { initial: false, mode: "wait", children: [
+                  ch.id === chain?.id && /* @__PURE__ */ 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 && /* @__PURE__ */ 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,
-                    }, onAnimationStart: triggerResize, onAnimationComplete: triggerResize, children: jsx("div", { style: { paddingTop: 10, paddingBottom: 8 }, children: jsxs(Alert, { children: [locales.warnings_walletSwitchingUnsupported, " ", locales.warnings_walletSwitchingUnsupportedResolve] }) }) })) })] }));
+                        delay: 0.1
+                      },
+                      children: /* @__PURE__ */ jsx(
+                        motion.span,
+                        {
+                          animate: (
+                            // UI fix for Coinbase Wallet on mobile does not remove isLoading on rejection event
+                            mobile && isBaseAccountConnector(connector?.id) && {
+                              opacity: [1, 0],
+                              transition: { delay: 4, duration: 4 }
+                            }
+                          ),
+                          children: locales.approveInWallet
+                        }
+                      )
+                    },
+                    "approveText"
+                  )
+                ] }) }),
+                variant === "secondary" ? /* @__PURE__ */ 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 && /* @__PURE__ */ jsx(
+                    ChainButtonBg,
+                    {
+                      layoutId: "activeChain",
+                      layout: "position",
+                      transition: {
+                        duration: 0.3,
+                        ease: "easeOut"
+                      }
+                    }
+                  )
+                )
+              ]
+            },
+            `${ch?.id}-${ch?.name}`
+          );
+        }) }) }),
+        /* @__PURE__ */ jsx(AnimatePresence, { children: isError && /* @__PURE__ */ 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: /* @__PURE__ */ jsx("div", { style: { paddingTop: 10, paddingBottom: 8 }, children: /* @__PURE__ */ jsxs(Alert, { children: [
+              locales.warnings_walletSwitchingUnsupported,
+              " ",
+              locales.warnings_walletSwitchingUnsupportedResolve
+            ] }) })
+          }
+        ) })
+      ]
+    }
+  );
 };
 
 export { ChainSelectList as default };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/components/Common/ChainSelectList/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../../src/components/Common/ChainSelectList/index.tsx"],"sourcesContent":["import { supportedChains } from \"@daimo/pay-common\";\nimport { useState } from \"react\";\nimport { useAccount, useSwitchChain } from \"wagmi\";\n\nimport Alert from \"../Alert\";\nimport {\n  ChainButton,\n  ChainButtonBg,\n  ChainButtonContainer,\n  ChainButtons,\n  ChainButtonStatus,\n  ChainIcon,\n  ChainLogoContainer,\n  ChainLogoSpinner,\n  SwitchNetworksContainer,\n} from \"./styles\";\n\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport { isBaseAccountConnector, isMobile } from \"../../../utils\";\n\nimport { chainToLogo, UnknownChain } from \"../../../assets/chains\";\nimport useLocales from \"../../../hooks/useLocales\";\nimport { usePayContext } from \"../../../hooks/usePayContext\";\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=\"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\"\n      fill=\"url(#paint0_linear_1288_18701)\"\n    />\n    <defs>\n      <linearGradient\n        id=\"paint0_linear_1288_18701\"\n        x1=\"2\"\n        y1=\"19.4884\"\n        x2=\"16.8752\"\n        y2=\"33.7485\"\n        gradientUnits=\"userSpaceOnUse\"\n      >\n        <stop stopColor=\"var(--ck-spinner-color)\" />\n        <stop offset=\"1\" stopColor=\"var(--ck-spinner-color)\" stopOpacity=\"0\" />\n      </linearGradient>\n    </defs>\n  </svg>\n);\n\nconst ChainSelectList = ({\n  variant,\n}: {\n  variant?: \"primary\" | \"secondary\";\n}) => {\n  const { connector, chain } = useAccount();\n  const { chains, isPending, switchChain, error } = useSwitchChain();\n  const [pendingChainId, setPendingChainId] = useState<number | undefined>(\n    undefined,\n  );\n\n  const locales = useLocales({});\n  const mobile = isMobile();\n\n  const isError = error?.[\"code\"] === 4902; // Wallet cannot switch networks\n  const disabled = isError || !switchChain;\n\n  const handleSwitchNetwork = (chainId: number) => {\n    if (switchChain) {\n      setPendingChainId(chainId);\n      switchChain({ chainId });\n    }\n  };\n\n  const { triggerResize } = usePayContext();\n\n  return (\n    <SwitchNetworksContainer\n      style={{ marginBottom: switchChain !== undefined ? -8 : 0 }}\n    >\n      <ChainButtonContainer>\n        <ChainButtons>\n          {chains.map((x) => {\n            const c = supportedChains.find((ch) => ch.chainId === x.id);\n            const ch = { ...c, ...x };\n            return (\n              <ChainButton\n                key={`${ch?.id}-${ch?.name}`}\n                $variant={variant}\n                disabled={\n                  disabled ||\n                  ch.id === chain?.id ||\n                  (isPending && pendingChainId === ch.id)\n                }\n                onClick={() => handleSwitchNetwork?.(ch.id)}\n                style={{\n                  opacity: disabled && ch.id !== chain?.id ? 0.4 : undefined,\n                }}\n              >\n                <span\n                  style={{\n                    display: \"flex\",\n                    alignItems: \"center\",\n                    justifyContent: \"flex-start\",\n                    gap: 12,\n                    color:\n                      ch.id === chain?.id\n                        ? \"var(--ck-dropdown-active-color, inherit)\"\n                        : \"inherit\",\n                  }}\n                >\n                  <ChainLogoContainer>\n                    <ChainLogoSpinner\n                      initial={{ opacity: 0 }}\n                      animate={{\n                        opacity: isPending && pendingChainId === ch.id ? 1 : 0,\n                      }}\n                      transition={{\n                        ease: [0.76, 0, 0.24, 1],\n                        duration: 0.15,\n                        delay: 0.1,\n                      }}\n                    >\n                      <motion.div\n                        key={`${ch?.id}-${ch?.name}`}\n                        animate={\n                          // UI fix for Coinbase Wallet on mobile does not remove isPending on rejection event\n                          mobile &&\n                          isBaseAccountConnector(connector?.id) &&\n                          isPending &&\n                          pendingChainId === ch.id\n                            ? {\n                                opacity: [1, 0],\n\n                                transition: { delay: 4, duration: 3 },\n                              }\n                            : { opacity: 1 }\n                        }\n                      >\n                        {Spinner}\n                      </motion.div>\n                    </ChainLogoSpinner>\n                    <ChainIcon>\n                      {ch.chainId ? chainToLogo[ch.chainId] : <UnknownChain />}\n                    </ChainIcon>\n                  </ChainLogoContainer>\n                  {ch.name}\n                </span>\n                {variant !== \"secondary\" && (\n                  <ChainButtonStatus>\n                    <AnimatePresence initial={false} mode=\"wait\">\n                      {ch.id === chain?.id && (\n                        <motion.span\n                          key={\"connectedText\"}\n                          style={{\n                            color:\n                              \"var(--ck-dropdown-active-color, var(--ck-focus-color))\",\n                            display: \"block\",\n                            position: \"relative\",\n                          }}\n                          initial={{ opacity: 0, x: -4 }}\n                          animate={{ opacity: 1, x: 0 }}\n                          exit={{\n                            opacity: 0,\n                            x: 4,\n                            transition: { duration: 0.1, delay: 0 },\n                          }}\n                          transition={{\n                            ease: [0.76, 0, 0.24, 1],\n                            duration: 0.3,\n                            delay: 0.2,\n                          }}\n                        >\n                          {locales.connected}\n                        </motion.span>\n                      )}\n                      {isPending && pendingChainId === ch.id && (\n                        <motion.span\n                          key={\"approveText\"}\n                          style={{\n                            color: \"var(--ck-dropdown-pending-color, inherit)\",\n                            display: \"block\",\n                            position: \"relative\",\n                          }}\n                          initial={{\n                            opacity: 0,\n                            x: -4,\n                          }}\n                          animate={{ opacity: 1, x: 0 }}\n                          exit={{ opacity: 0, x: 4 }}\n                          transition={{\n                            ease: [0.76, 0, 0.24, 1],\n                            duration: 0.3,\n                            delay: 0.1,\n                          }}\n                        >\n                          <motion.span\n                            animate={\n                              // UI fix for Coinbase Wallet on mobile does not remove isLoading on rejection event\n                              mobile &&\n                              isBaseAccountConnector(connector?.id) && {\n                                opacity: [1, 0],\n                                transition: { delay: 4, duration: 4 },\n                              }\n                            }\n                          >\n                            {locales.approveInWallet}\n                          </motion.span>\n                        </motion.span>\n                      )}\n                    </AnimatePresence>\n                  </ChainButtonStatus>\n                )}\n                {variant === \"secondary\" ? (\n                  <ChainButtonBg\n                    initial={false}\n                    animate={{\n                      opacity: ch.id === chain?.id ? 1 : 0,\n                    }}\n                    transition={{\n                      duration: 0.3,\n                      ease: \"easeOut\",\n                    }}\n                  />\n                ) : (\n                  //hover === ch.name && (\n                  ch.id === chain?.id && (\n                    <ChainButtonBg\n                      layoutId=\"activeChain\"\n                      layout=\"position\"\n                      transition={{\n                        duration: 0.3,\n                        ease: \"easeOut\",\n                      }}\n                    />\n                  )\n                )}\n              </ChainButton>\n            );\n          })}\n        </ChainButtons>\n      </ChainButtonContainer>\n      <AnimatePresence>\n        {isError && (\n          <motion.div\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n            transition={{\n              ease: [0.76, 0, 0.24, 1],\n              duration: 0.3,\n            }}\n            onAnimationStart={triggerResize}\n            onAnimationComplete={triggerResize}\n          >\n            <div style={{ paddingTop: 10, paddingBottom: 8 }}>\n              <Alert>\n                {locales.warnings_walletSwitchingUnsupported}{\" \"}\n                {locales.warnings_walletSwitchingUnsupportedResolve}\n              </Alert>\n            </div>\n          </motion.div>\n        )}\n      </AnimatePresence>\n    </SwitchNetworksContainer>\n  );\n};\n\nexport default ChainSelectList;\n"],"names":["ch"],"mappings":"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"}

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

@@ -3,7 +3,7 @@ import { css } from 'styled-components';
 import styled from '../../../styles/styled/index.js';
 import defaultTheme from '../../../constants/defaultTheme.js';
 
-const SwitchNetworksContainer = styled.div `
+const SwitchNetworksContainer = styled.div`
   display: flex;
   flex-direction: column;
 
@@ -11,7 +11,7 @@ const SwitchNetworksContainer = styled.div `
     flex-direction: column-reverse;
   }
 `;
-const ChainIcon = styled(motion.div) `
+const ChainIcon = styled(motion.div)`
   display: block;
   position: relative;
   border-radius: 12px;
@@ -29,8 +29,7 @@ const ChainIcon = styled(motion.div) `
     width: 100%;
     height: auto;
   }
-  ${(props) => props.$empty &&
-    css `
+  ${(props) => props.$empty && css`
       display: flex;
       align-items: center;
       justify-content: center;
@@ -47,10 +46,10 @@ const ChainIcon = styled(motion.div) `
     height: 32px;
   }
 `;
-const ChainLogoContainer = styled(motion.div) `
+const ChainLogoContainer = styled(motion.div)`
   position: relative;
 `;
-const ChainLogoSpinner = styled(motion.div) `
+const ChainLogoSpinner = styled(motion.div)`
   position: absolute;
   inset: -6px;
   animation: rotateSpinner 1200ms linear infinite;
@@ -71,7 +70,7 @@ const ChainLogoSpinner = styled(motion.div) `
     }
   }
 `;
-const ChainButtonContainer = styled.div `
+const ChainButtonContainer = styled.div`
   position: relative;
   margin: -8px -8px;
   &:after {
@@ -86,7 +85,7 @@ const ChainButtonContainer = styled.div `
       inset 0 -16px 8px -12px var(--background, var(--ck-body-background));
   }
 `;
-const ChainButtons = styled(motion.div) `
+const ChainButtons = styled(motion.div)`
   padding: 8px;
   overflow-x: hidden;
   overflow-y: auto;
@@ -104,7 +103,7 @@ const ChainButtons = styled(motion.div) `
     max-height: 60vh;
   }
 `;
-const ChainButton = styled(motion.button) `
+const ChainButton = styled(motion.button)`
   appearance: none;
   cursor: pointer;
   user-select: none;
@@ -173,8 +172,7 @@ const ChainButton = styled(motion.button) `
       opacity: 1;
     }
   }
-  ${(props) => props.$variant === "secondary" &&
-    css `
+  ${(props) => props.$variant === "secondary" && css`
       padding: 12px 4px;
       margin: 0 0 8px;
       &:last-child {
@@ -188,7 +186,7 @@ const ChainButton = styled(motion.button) `
       }
     `}
 `;
-const ChainButtonStatus = styled(motion.div) `
+const ChainButtonStatus = styled(motion.div)`
   position: absolute;
   top: 0;
   bottom: 0;
@@ -211,7 +209,7 @@ const ChainButtonStatus = styled(motion.div) `
     padding: 0;
   }
 `;
-const ChainButtonBg = styled(motion.div) `
+const ChainButtonBg = styled(motion.div)`
   position: absolute;
   z-index: -1;
   inset: 0 var(--ck-dropdown-active-inset, -8px);

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../../src/components/Common/ChainSelectList/styles.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAMa,MAAA,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAA,CAAA;;;;AAIV,qCAAA,EAAA,YAAY,CAAC,WAAW,CAAA;;;EAG7D;AAEW,MAAA,SAAS,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAsB,CAAA;;;;;;;;;;;;;;;;;;AAkB7D,EAAA,EAAA,CAAC,KAAK,KACN,KAAK,CAAC,MAAM;AACZ,IAAA,GAAG,CAAA,CAAA;;;;;;;;;;AAUF,IAAA,CAAA,CAAA;AACkC,qCAAA,EAAA,YAAY,CAAC,WAAW,CAAA;;;;;EAK7D;AACW,MAAA,kBAAkB,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA,CAAA;;EAElD;AACW,MAAA,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;EAoBhD;AACW,MAAA,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA,CAAA;;;;;;;;;;;;;;EAc5C;AACW,MAAA,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA,CAAA;;;;;;;;;;;;AAYP,qCAAA,EAAA,YAAY,CAAC,WAAW,CAAA;;;;;EAK7D;AACW,MAAA,WAAW,GAAG,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,CAE9C,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CqC,qCAAA,EAAA,YAAY,CAAC,WAAW,CAAA;;;;AAIxB,qCAAA,EAAA,YAAY,CAAC,WAAW,CAAA;;;;;;;;;;;;;;;;;;;;;IAqB3D,CAAC,KAAK,KACN,KAAK,CAAC,QAAQ,KAAK,WAAW;AAC9B,IAAA,GAAG,CAAA,CAAA;;;;;;;;;;;;AAYF,IAAA,CAAA,CAAA;EACH;AACW,MAAA,iBAAiB,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA,CAAA;;;;;;;;;;;;;;;;;;AAkBZ,qCAAA,EAAA,YAAY,CAAC,WAAW,CAAA;;;;EAI7D;AACW,MAAA,aAAa,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA,CAAA;;;;;;;;AAQR,qCAAA,EAAA,YAAY,CAAC,WAAW,CAAA;;;;;;;"}
+{"version":3,"file":"styles.js","sources":["../../../../../src/components/Common/ChainSelectList/styles.ts"],"sourcesContent":["import { motion } from \"framer-motion\";\nimport { css } from \"styled-components\";\nimport styled from \"./../../../styles/styled\";\n\nimport defaultTheme from \"../../../constants/defaultTheme\";\n\nexport const SwitchNetworksContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n\n  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {\n    flex-direction: column-reverse;\n  }\n`;\n\nexport const ChainIcon = styled(motion.div)<{ $empty?: boolean }>`\n  display: block;\n  position: relative;\n  border-radius: 12px;\n  overflow: hidden;\n  width: 24px;\n  height: 24px;\n  min-width: 24px;\n  min-height: 24px;\n  background: var(--ck-body-background);\n  svg {\n    border-radius: inherit;\n    display: block;\n    position: relative;\n    transform: translate3d(0, 0, 0);\n    width: 100%;\n    height: auto;\n  }\n  ${(props) =>\n    props.$empty &&\n    css`\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      &:before {\n        content: \"?\";\n        color: var(--ck-body-color-muted);\n        font-weight: bold;\n        font-family: var(--ck-font-family);\n      }\n    `}\n  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {\n    border-radius: 16px;\n    width: 32px;\n    height: 32px;\n  }\n`;\nexport const ChainLogoContainer = styled(motion.div)`\n  position: relative;\n`;\nexport const ChainLogoSpinner = styled(motion.div)`\n  position: absolute;\n  inset: -6px;\n  animation: rotateSpinner 1200ms linear infinite;\n  pointer-events: none;\n  svg {\n    display: block;\n    position: relative;\n    transform: translate3d(0, 0, 0);\n    width: 100%;\n    height: auto;\n  }\n  @keyframes rotateSpinner {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n`;\nexport const ChainButtonContainer = styled.div`\n  position: relative;\n  margin: -8px -8px;\n  &:after {\n    border-radius: var(--border-radius, 0);\n    z-index: 2;\n    content: \"\";\n    pointer-events: none;\n    position: absolute;\n    inset: 0 2px;\n    box-shadow:\n      inset 0 16px 8px -12px var(--background, var(--ck-body-background)),\n      inset 0 -16px 8px -12px var(--background, var(--ck-body-background));\n  }\n`;\nexport const ChainButtons = styled(motion.div)`\n  padding: 8px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  max-height: 242px;\n\n  -ms-overflow-style: none; /* Internet Explorer 10+ */\n  scrollbar-width: none; /* Firefox */\n  &::-webkit-scrollbar {\n    display: none; /* Safari and Chrome */\n  }\n\n  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {\n    padding: 8px 14px;\n    margin: 2px -2px 0;\n    max-height: 60vh;\n  }\n`;\nexport const ChainButton = styled(motion.button)<{\n  $variant?: \"primary\" | \"secondary\";\n}>`\n  appearance: none;\n  cursor: pointer;\n  user-select: none;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  border-radius: 11px;\n  margin: 0 0 1px;\n  padding: 8px 0;\n  padding-right: 154px;\n  font-size: 15px;\n  line-height: 18px;\n  font-weight: 500;\n  text-decoration: none;\n  color: var(--ck-body-color);\n  background: none;\n  white-space: nowrap;\n  transition:\n    transform 100ms ease,\n    background-color 100ms ease;\n  transform: translateZ(0px);\n  &:before {\n    content: \"\";\n    background: currentColor;\n    position: absolute;\n    z-index: -1;\n    inset: 0 var(--ck-dropdown-active-inset, -8px);\n    border-radius: var(--ck-dropdown-active-border-radius, 12px);\n    opacity: 0;\n    transition: opacity 180ms ease;\n  }\n  &:after {\n    content: \"\";\n    position: absolute;\n    z-index: -1;\n    inset: 0 var(--ck-dropdown-active-inset, -8px);\n    border-radius: 12px;\n    opacity: 0;\n    transition: opacity 180ms ease;\n    outline: 2px solid var(--ck-focus-color);\n  }\n  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {\n    font-size: 17px;\n    padding: 8px 0;\n  }\n  @media only screen and (min-width: ${defaultTheme.mobileWidth}px) {\n    &:hover {\n      &:before {\n        transition-duration: 80ms;\n        opacity: 0.05;\n      }\n    }\n  }\n  &:active {\n    transform: scale(0.99) translateZ(0px);\n  }\n  &:disabled {\n    //opacity: 0.4;\n    pointer-events: none;\n  }\n  &:focus-visible {\n    outline: none !important;\n    &:after {\n      opacity: 1;\n    }\n  }\n  ${(props) =>\n    props.$variant === \"secondary\" &&\n    css`\n      padding: 12px 4px;\n      margin: 0 0 8px;\n      &:last-child {\n        margin-bottom: 0;\n      }\n      &:before {\n        opacity: 0.05;\n      }\n      &:hover:before {\n        opacity: 0.1;\n      }\n    `}\n`;\nexport const ChainButtonStatus = styled(motion.div)`\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  right: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  color: var(--ck-body-color-muted);\n  font-size: 15px;\n  line-height: 18px;\n  font-weight: 500;\n  padding-right: 4px;\n  span {\n    display: block;\n    position: relative;\n  }\n  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {\n    font-size: 17px;\n    padding: 0;\n  }\n`;\nexport const ChainButtonBg = styled(motion.div)`\n  position: absolute;\n  z-index: -1;\n  inset: 0 var(--ck-dropdown-active-inset, -8px);\n  background: var(--ck-dropdown-active-background, rgba(26, 136, 248, 0.1));\n  box-shadow var(--ck-dropdown-active-box-shadow);\n  border-radius: var(--ck-dropdown-active-border-radius, 12px);\n  \n  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {\n    inset: 0 var(--ck-dropdown-active-inset, -8px);\n  }\n`;\n"],"names":[],"mappings":";;;;;AAMO,MAAM,0BAA0B,MAAO,CAAA,GAAA,CAAA;AAAA;AAAA;AAAA;AAAA,qCAAA,EAIP,aAAa,WAAW,CAAA;AAAA;AAAA;AAAA,EAAA;AAKlD,MAAA,SAAA,GAAY,MAAO,CAAA,MAAA,CAAO,GAAG,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAkBtC,EAAA,CAAC,KACD,KAAA,KAAA,CAAM,MACN,IAAA,GAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUC,CAAA,CAAA;AAAA,qCAAA,EACkC,aAAa,WAAW,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAMlD,MAAA,kBAAA,GAAqB,MAAO,CAAA,MAAA,CAAO,GAAG,CAAA,CAAA;AAAA;AAAA,EAAA;AAGtC,MAAA,gBAAA,GAAmB,MAAO,CAAA,MAAA,CAAO,GAAG,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAqB1C,MAAM,uBAAuB,MAAO,CAAA,GAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAe9B,MAAA,YAAA,GAAe,MAAO,CAAA,MAAA,CAAO,GAAG,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qCAAA,EAYN,aAAa,WAAW,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAMlD,MAAA,WAAA,GAAc,MAAO,CAAA,MAAA,CAAO,MAAM,CAAA,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,qCAAA,EA8CR,aAAa,WAAW,CAAA;AAAA;AAAA;AAAA;AAAA,qCAAA,EAIxB,aAAa,WAAW,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA,EAqB3D,CAAC,KAAA,KACD,KAAM,CAAA,QAAA,KAAa,WACnB,IAAA,GAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAYC,CAAA,CAAA;AAAA,EAAA;AAEQ,MAAA,iBAAA,GAAoB,MAAO,CAAA,MAAA,CAAO,GAAG,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qCAAA,EAkBX,aAAa,WAAW,CAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAKlD,MAAA,aAAA,GAAgB,MAAO,CAAA,MAAA,CAAO,GAAG,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qCAAA,EAQP,aAAa,WAAW,CAAA;AAAA;AAAA;AAAA;;;;"}