@daimo/pay 1.19.2 → 1.19.4

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

@@ -0,0 +1,90 @@
+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/connectkit/src/components/Common/Chain/styles.js.map

@@ -0,0 +1 @@
+{"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;;;;"}

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

@@ -0,0 +1,250 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { supportedChains } from '@daimo/pay-common';
+import { useState } from 'react';
+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, 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 = /* @__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)"
+        }
+      ),
+      /* @__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,
+                        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 };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"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":";;;;;;;;;;;;AAwBA,MAAM,OACJ,mBAAA,IAAA;AAAA,EAAC,KAAA;AAAA,EAAA;AAAA,IACC,aAAY,EAAA,MAAA;AAAA,IACZ,KAAM,EAAA,IAAA;AAAA,IACN,MAAO,EAAA,IAAA;AAAA,IACP,OAAQ,EAAA,WAAA;AAAA,IACR,IAAK,EAAA,MAAA;AAAA,IACL,KAAM,EAAA,4BAAA;AAAA,IAEN,QAAA,EAAA;AAAA,sBAAA,GAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,QAAS,EAAA,SAAA;AAAA,UACT,QAAS,EAAA,SAAA;AAAA,UACT,CAAE,EAAA,oKAAA;AAAA,UACF,IAAK,EAAA,gCAAA;AAAA,SAAA;AAAA,OACP;AAAA,0BACC,MACC,EAAA,EAAA,QAAA,kBAAA,IAAA;AAAA,QAAC,gBAAA;AAAA,QAAA;AAAA,UACC,EAAG,EAAA,0BAAA;AAAA,UACH,EAAG,EAAA,GAAA;AAAA,UACH,EAAG,EAAA,SAAA;AAAA,UACH,EAAG,EAAA,SAAA;AAAA,UACH,EAAG,EAAA,SAAA;AAAA,UACH,aAAc,EAAA,gBAAA;AAAA,UAEd,QAAA,EAAA;AAAA,4BAAC,GAAA,CAAA,MAAA,EAAA,EAAK,WAAU,yBAA0B,EAAA,CAAA;AAAA,gCACzC,MAAK,EAAA,EAAA,MAAA,EAAO,KAAI,SAAU,EAAA,yBAAA,EAA0B,aAAY,GAAI,EAAA,CAAA;AAAA,WAAA;AAAA,SAAA;AAAA,OAEzE,EAAA,CAAA;AAAA,KAAA;AAAA,GAAA;AACF,CAAA,CAAA;AAGF,MAAM,kBAAkB,CAAC;AAAA,EACvB,OAAA;AACF,CAEM,KAAA;AACJ,EAAA,MAAM,EAAE,SAAA,EAAW,KAAM,EAAA,GAAI,UAAW,EAAA,CAAA;AACxC,EAAA,MAAM,EAAE,MAAQ,EAAA,SAAA,EAAW,WAAa,EAAA,KAAA,KAAU,cAAe,EAAA,CAAA;AACjE,EAAM,MAAA,CAAC,cAAgB,EAAA,iBAAiB,CAAI,GAAA,QAAA;AAAA,IAC1C,KAAA,CAAA;AAAA,GACF,CAAA;AAEA,EAAM,MAAA,OAAA,GAAU,UAAW,CAAA,EAAE,CAAA,CAAA;AAC7B,EAAA,MAAM,SAAS,QAAS,EAAA,CAAA;AAExB,EAAM,MAAA,OAAA,GAAU,KAAQ,GAAA,MAAM,CAAM,KAAA,IAAA,CAAA;AACpC,EAAM,MAAA,QAAA,GAAW,WAAW,CAAC,WAAA,CAAA;AAE7B,EAAM,MAAA,mBAAA,GAAsB,CAAC,OAAoB,KAAA;AAC/C,IAAA,IAAI,WAAa,EAAA;AACf,MAAA,iBAAA,CAAkB,OAAO,CAAA,CAAA;AACzB,MAAY,WAAA,CAAA,EAAE,SAAS,CAAA,CAAA;AAAA,KACzB;AAAA,GACF,CAAA;AAEA,EAAM,MAAA,EAAE,aAAc,EAAA,GAAI,aAAc,EAAA,CAAA;AAExC,EACE,uBAAA,IAAA;AAAA,IAAC,uBAAA;AAAA,IAAA;AAAA,MACC,OAAO,EAAE,YAAA,EAAc,WAAgB,KAAA,KAAA,CAAA,GAAY,KAAK,CAAE,EAAA;AAAA,MAE1D,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,wBACC,QAAC,kBAAA,GAAA,CAAA,YAAA,EAAA,EACE,QAAO,EAAA,MAAA,CAAA,GAAA,CAAI,CAAC,CAAM,KAAA;AACjB,UAAM,MAAA,CAAA,GAAI,gBAAgB,IAAK,CAAA,CAACA,QAAOA,GAAG,CAAA,OAAA,KAAY,EAAE,EAAE,CAAA,CAAA;AAC1D,UAAA,MAAM,EAAK,GAAA,EAAE,GAAG,CAAA,EAAG,GAAG,CAAE,EAAA,CAAA;AACxB,UACE,uBAAA,IAAA;AAAA,YAAC,WAAA;AAAA,YAAA;AAAA,cAEC,QAAU,EAAA,OAAA;AAAA,cACV,QAAA,EACE,YACA,EAAG,CAAA,EAAA,KAAO,OAAO,EAChB,IAAA,SAAA,IAAa,mBAAmB,EAAG,CAAA,EAAA;AAAA,cAEtC,OAAS,EAAA,MAAM,mBAAsB,GAAA,EAAA,CAAG,EAAE,CAAA;AAAA,cAC1C,KAAO,EAAA;AAAA,gBACL,SAAS,QAAY,IAAA,EAAA,CAAG,EAAO,KAAA,KAAA,EAAO,KAAK,GAAM,GAAA,KAAA,CAAA;AAAA,eACnD;AAAA,cAEA,QAAA,EAAA;AAAA,gCAAA,IAAA;AAAA,kBAAC,MAAA;AAAA,kBAAA;AAAA,oBACC,KAAO,EAAA;AAAA,sBACL,OAAS,EAAA,MAAA;AAAA,sBACT,UAAY,EAAA,QAAA;AAAA,sBACZ,cAAgB,EAAA,YAAA;AAAA,sBAChB,GAAK,EAAA,EAAA;AAAA,sBACL,KACE,EAAA,EAAA,CAAG,EAAO,KAAA,KAAA,EAAO,KACb,0CACA,GAAA,SAAA;AAAA,qBACR;AAAA,oBAEA,QAAA,EAAA;AAAA,sCAAA,IAAA,CAAC,kBACC,EAAA,EAAA,QAAA,EAAA;AAAA,wCAAA,GAAA;AAAA,0BAAC,gBAAA;AAAA,0BAAA;AAAA,4BACC,OAAA,EAAS,EAAE,OAAA,EAAS,CAAE,EAAA;AAAA,4BACtB,OAAS,EAAA;AAAA,8BACP,OAAS,EAAA,SAAA,IAAa,cAAmB,KAAA,EAAA,CAAG,KAAK,CAAI,GAAA,CAAA;AAAA,6BACvD;AAAA,4BACA,UAAY,EAAA;AAAA,8BACV,IAAM,EAAA,CAAC,IAAM,EAAA,CAAA,EAAG,MAAM,CAAC,CAAA;AAAA,8BACvB,QAAU,EAAA,IAAA;AAAA,8BACV,KAAO,EAAA,GAAA;AAAA,6BACT;AAAA,4BAEA,QAAA,kBAAA,GAAA;AAAA,8BAAC,MAAO,CAAA,GAAA;AAAA,8BAAP;AAAA,gCAEC,OAAA;AAAA;AAAA,kCAEE,MAAA,IACA,uBAAuB,SAAW,EAAA,EAAE,KACpC,SACA,IAAA,cAAA,KAAmB,GAAG,EAClB,GAAA;AAAA,oCACE,OAAA,EAAS,CAAC,CAAA,EAAG,CAAC,CAAA;AAAA,oCAEd,UAAY,EAAA,EAAE,KAAO,EAAA,CAAA,EAAG,UAAU,CAAE,EAAA;AAAA,mCACtC,GACA,EAAE,OAAA,EAAS,CAAE,EAAA;AAAA,iCAAA;AAAA,gCAGlB,QAAA,EAAA,OAAA;AAAA,+BAAA;AAAA,8BAfI,CAAG,EAAA,EAAA,EAAI,EAAE,CAAA,CAAA,EAAI,IAAI,IAAI,CAAA,CAAA;AAAA,6BAgB5B;AAAA,2BAAA;AAAA,yBACF;AAAA,wCACA,GAAA,CAAC,SACE,EAAA,EAAA,QAAA,EAAA,EAAA,CAAG,OAAU,GAAA,WAAA,CAAY,GAAG,OAAO,CAAA,mBAAK,GAAA,CAAA,YAAA,EAAA,EAAa,CACxD,EAAA,CAAA;AAAA,uBACF,EAAA,CAAA;AAAA,sBACC,EAAG,CAAA,IAAA;AAAA,qBAAA;AAAA,mBAAA;AAAA,iBACN;AAAA,gBACC,OAAA,KAAY,+BACV,GAAA,CAAA,iBAAA,EAAA,EACC,+BAAC,eAAgB,EAAA,EAAA,OAAA,EAAS,KAAO,EAAA,IAAA,EAAK,MACnC,EAAA,QAAA,EAAA;AAAA,kBAAG,EAAA,CAAA,EAAA,KAAO,OAAO,EAChB,oBAAA,GAAA;AAAA,oBAAC,MAAO,CAAA,IAAA;AAAA,oBAAP;AAAA,sBAEC,KAAO,EAAA;AAAA,wBACL,KACE,EAAA,wDAAA;AAAA,wBACF,OAAS,EAAA,OAAA;AAAA,wBACT,QAAU,EAAA,UAAA;AAAA,uBACZ;AAAA,sBACA,OAAS,EAAA,EAAE,OAAS,EAAA,CAAA,EAAG,GAAG,CAAG,CAAA,EAAA;AAAA,sBAC7B,OAAS,EAAA,EAAE,OAAS,EAAA,CAAA,EAAG,GAAG,CAAE,EAAA;AAAA,sBAC5B,IAAM,EAAA;AAAA,wBACJ,OAAS,EAAA,CAAA;AAAA,wBACT,CAAG,EAAA,CAAA;AAAA,wBACH,UAAY,EAAA,EAAE,QAAU,EAAA,GAAA,EAAK,OAAO,CAAE,EAAA;AAAA,uBACxC;AAAA,sBACA,UAAY,EAAA;AAAA,wBACV,IAAM,EAAA,CAAC,IAAM,EAAA,CAAA,EAAG,MAAM,CAAC,CAAA;AAAA,wBACvB,QAAU,EAAA,GAAA;AAAA,wBACV,KAAO,EAAA,GAAA;AAAA,uBACT;AAAA,sBAEC,QAAQ,EAAA,OAAA,CAAA,SAAA;AAAA,qBAAA;AAAA,oBApBJ,eAAA;AAAA,mBAqBP;AAAA,kBAED,SAAA,IAAa,cAAmB,KAAA,EAAA,CAAG,EAClC,oBAAA,GAAA;AAAA,oBAAC,MAAO,CAAA,IAAA;AAAA,oBAAP;AAAA,sBAEC,KAAO,EAAA;AAAA,wBACL,KAAO,EAAA,2CAAA;AAAA,wBACP,OAAS,EAAA,OAAA;AAAA,wBACT,QAAU,EAAA,UAAA;AAAA,uBACZ;AAAA,sBACA,OAAS,EAAA;AAAA,wBACP,OAAS,EAAA,CAAA;AAAA,wBACT,CAAG,EAAA,CAAA,CAAA;AAAA,uBACL;AAAA,sBACA,OAAS,EAAA,EAAE,OAAS,EAAA,CAAA,EAAG,GAAG,CAAE,EAAA;AAAA,sBAC5B,IAAM,EAAA,EAAE,OAAS,EAAA,CAAA,EAAG,GAAG,CAAE,EAAA;AAAA,sBACzB,UAAY,EAAA;AAAA,wBACV,IAAM,EAAA,CAAC,IAAM,EAAA,CAAA,EAAG,MAAM,CAAC,CAAA;AAAA,wBACvB,QAAU,EAAA,GAAA;AAAA,wBACV,KAAO,EAAA,GAAA;AAAA,uBACT;AAAA,sBAEA,QAAA,kBAAA,GAAA;AAAA,wBAAC,MAAO,CAAA,IAAA;AAAA,wBAAP;AAAA,0BACC,OAAA;AAAA;AAAA,4BAEE,MACA,IAAA,sBAAA,CAAuB,SAAW,EAAA,EAAE,CAAK,IAAA;AAAA,8BACvC,OAAA,EAAS,CAAC,CAAA,EAAG,CAAC,CAAA;AAAA,8BACd,UAAY,EAAA,EAAE,KAAO,EAAA,CAAA,EAAG,UAAU,CAAE,EAAA;AAAA,6BACtC;AAAA,2BAAA;AAAA,0BAGD,QAAQ,EAAA,OAAA,CAAA,eAAA;AAAA,yBAAA;AAAA,uBACX;AAAA,qBAAA;AAAA,oBA7BK,aAAA;AAAA,mBA8BP;AAAA,iBAAA,EAEJ,CACF,EAAA,CAAA;AAAA,gBAED,YAAY,WACX,mBAAA,GAAA;AAAA,kBAAC,aAAA;AAAA,kBAAA;AAAA,oBACC,OAAS,EAAA,KAAA;AAAA,oBACT,OAAS,EAAA;AAAA,sBACP,OAAS,EAAA,EAAA,CAAG,EAAO,KAAA,KAAA,EAAO,KAAK,CAAI,GAAA,CAAA;AAAA,qBACrC;AAAA,oBACA,UAAY,EAAA;AAAA,sBACV,QAAU,EAAA,GAAA;AAAA,sBACV,IAAM,EAAA,SAAA;AAAA,qBACR;AAAA,mBAAA;AAAA,iBACF;AAAA;AAAA,kBAGA,EAAA,CAAG,EAAO,KAAA,KAAA,EAAO,EACf,oBAAA,GAAA;AAAA,oBAAC,aAAA;AAAA,oBAAA;AAAA,sBACC,QAAS,EAAA,aAAA;AAAA,sBACT,MAAO,EAAA,UAAA;AAAA,sBACP,UAAY,EAAA;AAAA,wBACV,QAAU,EAAA,GAAA;AAAA,wBACV,IAAM,EAAA,SAAA;AAAA,uBACR;AAAA,qBAAA;AAAA,mBACF;AAAA,iBAAA;AAAA,eAAA;AAAA,aAAA;AAAA,YAnJC,CAAG,EAAA,EAAA,EAAI,EAAE,CAAA,CAAA,EAAI,IAAI,IAAI,CAAA,CAAA;AAAA,WAsJ5B,CAAA;AAAA,SAEH,GACH,CACF,EAAA,CAAA;AAAA,wBACA,GAAA,CAAC,mBACE,QACC,EAAA,OAAA,oBAAA,GAAA;AAAA,UAAC,MAAO,CAAA,GAAA;AAAA,UAAP;AAAA,YACC,OAAA,EAAS,EAAE,OAAA,EAAS,CAAE,EAAA;AAAA,YACtB,OAAA,EAAS,EAAE,OAAA,EAAS,CAAE,EAAA;AAAA,YACtB,IAAA,EAAM,EAAE,OAAA,EAAS,CAAE,EAAA;AAAA,YACnB,UAAY,EAAA;AAAA,cACV,IAAM,EAAA,CAAC,IAAM,EAAA,CAAA,EAAG,MAAM,CAAC,CAAA;AAAA,cACvB,QAAU,EAAA,GAAA;AAAA,aACZ;AAAA,YACA,gBAAkB,EAAA,aAAA;AAAA,YAClB,mBAAqB,EAAA,aAAA;AAAA,YAErB,QAAA,kBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,KAAA,EAAO,EAAE,UAAA,EAAY,IAAI,aAAe,EAAA,CAAA,EAC3C,EAAA,QAAA,kBAAA,IAAA,CAAC,KACE,EAAA,EAAA,QAAA,EAAA;AAAA,cAAQ,OAAA,CAAA,mCAAA;AAAA,cAAqC,GAAA;AAAA,cAC7C,OAAQ,CAAA,0CAAA;AAAA,aAAA,EACX,CACF,EAAA,CAAA;AAAA,WAAA;AAAA,SAGN,EAAA,CAAA;AAAA,OAAA;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ;;;;"}

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

@@ -0,0 +1,226 @@
+import { motion } from 'framer-motion';
+import { css } from 'styled-components';
+import styled from '../../../styles/styled/index.js';
+import defaultTheme from '../../../constants/defaultTheme.js';
+
+const SwitchNetworksContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
+    flex-direction: column-reverse;
+  }
+`;
+const ChainIcon = styled(motion.div)`
+  display: block;
+  position: relative;
+  border-radius: 12px;
+  overflow: hidden;
+  width: 24px;
+  height: 24px;
+  min-width: 24px;
+  min-height: 24px;
+  background: var(--ck-body-background);
+  svg {
+    border-radius: inherit;
+    display: block;
+    position: relative;
+    transform: translate3d(0, 0, 0);
+    width: 100%;
+    height: auto;
+  }
+  ${(props) => props.$empty && css`
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      &:before {
+        content: "?";
+        color: var(--ck-body-color-muted);
+        font-weight: bold;
+        font-family: var(--ck-font-family);
+      }
+    `}
+  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
+    border-radius: 16px;
+    width: 32px;
+    height: 32px;
+  }
+`;
+const ChainLogoContainer = styled(motion.div)`
+  position: relative;
+`;
+const ChainLogoSpinner = styled(motion.div)`
+  position: absolute;
+  inset: -6px;
+  animation: rotateSpinner 1200ms linear infinite;
+  pointer-events: none;
+  svg {
+    display: block;
+    position: relative;
+    transform: translate3d(0, 0, 0);
+    width: 100%;
+    height: auto;
+  }
+  @keyframes rotateSpinner {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+`;
+const ChainButtonContainer = styled.div`
+  position: relative;
+  margin: -8px -8px;
+  &:after {
+    border-radius: var(--border-radius, 0);
+    z-index: 2;
+    content: "";
+    pointer-events: none;
+    position: absolute;
+    inset: 0 2px;
+    box-shadow:
+      inset 0 16px 8px -12px var(--background, var(--ck-body-background)),
+      inset 0 -16px 8px -12px var(--background, var(--ck-body-background));
+  }
+`;
+const ChainButtons = styled(motion.div)`
+  padding: 8px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  max-height: 242px;
+
+  -ms-overflow-style: none; /* Internet Explorer 10+ */
+  scrollbar-width: none; /* Firefox */
+  &::-webkit-scrollbar {
+    display: none; /* Safari and Chrome */
+  }
+
+  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
+    padding: 8px 14px;
+    margin: 2px -2px 0;
+    max-height: 60vh;
+  }
+`;
+const ChainButton = styled(motion.button)`
+  appearance: none;
+  cursor: pointer;
+  user-select: none;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  border-radius: 11px;
+  margin: 0 0 1px;
+  padding: 8px 0;
+  padding-right: 154px;
+  font-size: 15px;
+  line-height: 18px;
+  font-weight: 500;
+  text-decoration: none;
+  color: var(--ck-body-color);
+  background: none;
+  white-space: nowrap;
+  transition:
+    transform 100ms ease,
+    background-color 100ms ease;
+  transform: translateZ(0px);
+  &:before {
+    content: "";
+    background: currentColor;
+    position: absolute;
+    z-index: -1;
+    inset: 0 var(--ck-dropdown-active-inset, -8px);
+    border-radius: var(--ck-dropdown-active-border-radius, 12px);
+    opacity: 0;
+    transition: opacity 180ms ease;
+  }
+  &:after {
+    content: "";
+    position: absolute;
+    z-index: -1;
+    inset: 0 var(--ck-dropdown-active-inset, -8px);
+    border-radius: 12px;
+    opacity: 0;
+    transition: opacity 180ms ease;
+    outline: 2px solid var(--ck-focus-color);
+  }
+  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
+    font-size: 17px;
+    padding: 8px 0;
+  }
+  @media only screen and (min-width: ${defaultTheme.mobileWidth}px) {
+    &:hover {
+      &:before {
+        transition-duration: 80ms;
+        opacity: 0.05;
+      }
+    }
+  }
+  &:active {
+    transform: scale(0.99) translateZ(0px);
+  }
+  &:disabled {
+    //opacity: 0.4;
+    pointer-events: none;
+  }
+  &:focus-visible {
+    outline: none !important;
+    &:after {
+      opacity: 1;
+    }
+  }
+  ${(props) => props.$variant === "secondary" && css`
+      padding: 12px 4px;
+      margin: 0 0 8px;
+      &:last-child {
+        margin-bottom: 0;
+      }
+      &:before {
+        opacity: 0.05;
+      }
+      &:hover:before {
+        opacity: 0.1;
+      }
+    `}
+`;
+const ChainButtonStatus = styled(motion.div)`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  color: var(--ck-body-color-muted);
+  font-size: 15px;
+  line-height: 18px;
+  font-weight: 500;
+  padding-right: 4px;
+  span {
+    display: block;
+    position: relative;
+  }
+  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
+    font-size: 17px;
+    padding: 0;
+  }
+`;
+const ChainButtonBg = styled(motion.div)`
+  position: absolute;
+  z-index: -1;
+  inset: 0 var(--ck-dropdown-active-inset, -8px);
+  background: var(--ck-dropdown-active-background, rgba(26, 136, 248, 0.1));
+  box-shadow var(--ck-dropdown-active-box-shadow);
+  border-radius: var(--ck-dropdown-active-border-radius, 12px);
+  
+  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
+    inset: 0 var(--ck-dropdown-active-inset, -8px);
+  }
+`;
+
+export { ChainButton, ChainButtonBg, ChainButtonContainer, ChainButtonStatus, ChainButtons, ChainIcon, ChainLogoContainer, ChainLogoSpinner, SwitchNetworksContainer };
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"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;;;;"}