@daimo/pay 1.19.9 → 1.19.11

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

@@ -1,90 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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/src/components/Common/ChainSelectList/index.js

@@ -1,250 +0,0 @@
-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/src/components/Common/ChainSelectList/index.js.map

@@ -1 +0,0 @@
-{"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/src/components/Common/ChainSelectList/styles.js

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

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