@multiplatform.one/web3 5.0.27

package/dist/esm/connectkit/components/Common/ChainSelectList/index.native.js

@@ -0,0 +1,258 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { useAccount, useSwitchChain } from "wagmi";
+import { chainConfigs } from "../../../constants/chainConfigs.native.js";
+import { SwitchNetworksContainer, ChainButton, ChainButtonContainer, ChainButtonBg, ChainButtonStatus, ChainButtons, ChainIcon, ChainLogoContainer, ChainLogoSpinner } from "./styles.native.js";
+import Alert from "../Alert/index.native.js";
+import { AnimatePresence, motion } from "framer-motion";
+import { isCoinbaseWalletConnector, isMobile } from "../../../utils/index.native.js";
+import ChainIcons from "../../../assets/chains.native.js";
+import useLocales from "../../../hooks/useLocales.native.js";
+import { useContext } from "../../ConnectKit.native.js";
+var 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"
+      })]
+    })
+  })]
+});
+var ChainSelectList = function ChainSelectList2(param) {
+  var {
+    variant
+  } = param;
+  var {
+    connector,
+    chain
+  } = useAccount();
+  var {
+    chains,
+    isPending,
+    switchChain,
+    error
+  } = useSwitchChain();
+  var [pendingChainId, setPendingChainId] = useState(void 0);
+  var locales = useLocales({});
+  var mobile = isMobile();
+  var isError = (error === null || error === void 0 ? void 0 : error["code"]) === 4902;
+  var disabled = isError || !switchChain;
+  var handleSwitchNetwork = function handleSwitchNetwork2(chainId) {
+    if (switchChain) {
+      setPendingChainId(chainId);
+      switchChain({
+        chainId
+      });
+    }
+  };
+  var {
+    triggerResize
+  } = useContext();
+  return /* @__PURE__ */_jsxs(SwitchNetworksContainer, {
+    style: {
+      marginBottom: switchChain !== void 0 ? -8 : 0
+    },
+    children: [/* @__PURE__ */_jsx(ChainButtonContainer, {
+      children: /* @__PURE__ */_jsx(ChainButtons, {
+        children: chains.map(function (x) {
+          var _ch_logo;
+          var c = chainConfigs.find(function (ch2) {
+            return ch2.id === x.id;
+          });
+          var ch = {
+            ...c,
+            ...x
+          };
+          return /* @__PURE__ */_jsxs(ChainButton, {
+            $variant: variant,
+            disabled: disabled || ch.id === (chain === null || chain === void 0 ? void 0 : chain.id) || isPending && pendingChainId === ch.id,
+            onClick: function onClick() {
+              return handleSwitchNetwork === null || handleSwitchNetwork === void 0 ? void 0 : handleSwitchNetwork(ch.id);
+            },
+            style: {
+              opacity: disabled && ch.id !== (chain === null || chain === void 0 ? void 0 : chain.id) ? 0.4 : void 0
+            },
+            children: [/* @__PURE__ */_jsxs("span", {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "flex-start",
+                gap: 12,
+                color: ch.id === (chain === null || chain === void 0 ? void 0 : 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 && isCoinbaseWalletConnector(connector === null || connector === void 0 ? void 0 : connector.id) && isPending && pendingChainId === ch.id ? {
+                      opacity: [1, 0],
+                      transition: {
+                        delay: 4,
+                        duration: 3
+                      }
+                    } : {
+                      opacity: 1
+                    },
+                    children: Spinner
+                  }, `${ch === null || ch === void 0 ? void 0 : ch.id}-${ch === null || ch === void 0 ? void 0 : ch.name}`)
+                }), /* @__PURE__ */_jsx(ChainIcon, {
+                  children: (_ch_logo = ch.logo) !== null && _ch_logo !== void 0 ? _ch_logo : /* @__PURE__ */_jsx(ChainIcons.UnknownChain, {})
+                })]
+              }), ch.name]
+            }), variant !== "secondary" && /* @__PURE__ */_jsx(ChainButtonStatus, {
+              children: /* @__PURE__ */_jsxs(AnimatePresence, {
+                initial: false,
+                mode: "wait",
+                children: [ch.id === (chain === null || chain === void 0 ? void 0 : 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 && isCoinbaseWalletConnector(connector === null || connector === void 0 ? void 0 : 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 === null || chain === void 0 ? void 0 : chain.id) ? 1 : 0
+              },
+              transition: {
+                duration: 0.3,
+                ease: "easeOut"
+              }
+            }) :
+            //hover === ch.name && (
+            ch.id === (chain === null || chain === void 0 ? void 0 : chain.id) && /* @__PURE__ */_jsx(ChainButtonBg, {
+              layoutId: "activeChain",
+              layout: "position",
+              transition: {
+                duration: 0.3,
+                ease: "easeOut"
+              }
+            })]
+          }, `${ch === null || ch === void 0 ? void 0 : ch.id}-${ch === null || ch === void 0 ? void 0 : 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]
+          })
+        })
+      })
+    })]
+  });
+};
+var ChainSelectList_default = ChainSelectList;
+export { ChainSelectList_default as default };
+//# sourceMappingURL=index.native.js.map

package/dist/esm/connectkit/components/Common/ChainSelectList/index.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","useState","useAccount","useSwitchChain","chainConfigs","SwitchNetworksContainer","ChainButton","ChainButtonContainer","ChainButtonBg","ChainButtonStatus","ChainButtons","ChainIcon","ChainLogoContainer","ChainLogoSpinner","Alert","AnimatePresence","motion","isCoinbaseWalletConnector","isMobile","ChainIcons","useLocales","useContext","Spinner","width","height","viewBox","fill","xmlns","children","fillRule","clipRule","d","id","x1","y1","x2","y2","gradientUnits","stopColor","offset","stopOpacity","ChainSelectList","ChainSelectList2","param","variant","connector","chain","chains","isPending","switchChain","error","pendingChainId","setPendingChainId","locales","mobile","isError","disabled","handleSwitchNetwork","handleSwitchNetwork2","chainId","triggerResize","style","marginBottom","map","x","_ch_logo","c","find","ch2","ch","$variant","onClick","opacity","display","alignItems","justifyContent","gap","color","initial","animate","transition","ease","duration","delay","div","name","logo","UnknownChain","mode","span","position","exit","connected","approveInWallet","layoutId","layout"],"sources":["../../../../../../src/connectkit/components/Common/ChainSelectList/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/connectkit/components/Common/ChainSelectList/styles.mjs

@@ -0,0 +1,221 @@
+import { motion } from "framer-motion";
+import styled from "./../../../styles/styled/index.mjs";
+import { css } from "styled-components";
+import defaultTheme from "../../../constants/defaultTheme.mjs";
+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.mjs.map

package/dist/esm/connectkit/components/Common/ChainSelectList/styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["motion","styled","css","defaultTheme","SwitchNetworksContainer","div","mobileWidth","ChainIcon","props","$empty","ChainLogoContainer","ChainLogoSpinner","ChainButtonContainer","ChainButtons","ChainButton","button","$variant","ChainButtonStatus","ChainButtonBg"],"sources":["../../../../../../src/connectkit/components/Common/ChainSelectList/styles.ts"],"sourcesContent":[null],"mappings":"AAAA,SAASA,MAAA,QAAc;AACvB,OAAOC,MAAA,MAAY;AACnB,SAASC,GAAA,QAAW;AAEpB,OAAOC,YAAA,MAAkB;AAElB,MAAMC,uBAAA,GAA0BH,MAAA,CAAOI,GAAA;AAAA;AAAA;AAAA;AAAA,uCAIPF,YAAA,CAAaG,WAAW;AAAA;AAAA;AAAA;AAKxD,MAAMC,SAAA,GAAYN,MAAA,CAAOD,MAAA,CAAOK,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAkBrCG,KAAA,IACDA,KAAA,CAAMC,MAAA,IACNP,GAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAUC;AAAA,uCACkCC,YAAA,CAAaG,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAMxD,MAAMI,kBAAA,GAAqBT,MAAA,CAAOD,MAAA,CAAOK,GAAG;AAAA;AAAA;AAG5C,MAAMM,gBAAA,GAAmBV,MAAA,CAAOD,MAAA,CAAOK,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqB1C,MAAMO,oBAAA,GAAuBX,MAAA,CAAOI,GAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcpC,MAAMQ,YAAA,GAAeZ,MAAA,CAAOD,MAAA,CAAOK,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uCAYNF,YAAA,CAAaG,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAMxD,MAAMQ,WAAA,GAAcb,MAAA,CAAOD,MAAA,CAAOe,MAAM;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,uCA4CRZ,YAAA,CAAaG,WAAW;AAAA;AAAA;AAAA;AAAA,uCAIxBH,YAAA,CAAaG,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAqB1DE,KAAA,IACDA,KAAA,CAAMQ,QAAA,KAAa,eACnBd,GAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAYC;AAAA;AAEE,MAAMe,iBAAA,GAAoBhB,MAAA,CAAOD,MAAA,CAAOK,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uCAkBXF,YAAA,CAAaG,WAAW;AAAA;AAAA;AAAA;AAAA;AAKxD,MAAMY,aAAA,GAAgBjB,MAAA,CAAOD,MAAA,CAAOK,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uCAQPF,YAAA,CAAaG,WAAW;AAAA;AAAA;AAAA","ignoreList":[]}