@multiplatform.one/web3 5.0.28 → 6.0.0

package/src/connectkit/components/Common/ChainSelectList/index.tsx

@@ -1,6 +1,6 @@
-import { useState } from 'react';
-import { useAccount, useSwitchChain } from 'wagmi';
-import { chainConfigs } from '../../../constants/chainConfigs';
+import { useState } from "react";
+import { useAccount, useSwitchChain } from "wagmi";
+import { chainConfigs } from "../../../constants/chainConfigs";
 
 import {
   SwitchNetworksContainer,
@@ -12,15 +12,18 @@ import {
   ChainIcon,
   ChainLogoContainer,
   ChainLogoSpinner,
-} from './styles';
-import Alert from '../Alert';
+} from "./styles";
+import {
+  Alert,
+  isCoinbaseWalletConnector,
+  isMobile,
+  useLocales,
+  useContext,
+} from "@multiplatform.one/connectkit";
 
-import { AnimatePresence, motion } from 'framer-motion';
-import { isCoinbaseWalletConnector, isMobile } from '../../../utils';
+import { AnimatePresence, motion } from "framer-motion";
 
-import ChainIcons from '../../../assets/chains';
-import useLocales from '../../../hooks/useLocales';
-import { useContext } from '../../ConnectKit';
+import ChainIcons from "../../../assets/chains";
 
 const Spinner = (
   <svg
@@ -53,21 +56,15 @@ const Spinner = (
   </svg>
 );
 
-const ChainSelectList = ({
-  variant,
-}: {
-  variant?: 'primary' | 'secondary';
-}) => {
+const ChainSelectList = ({ variant }: { variant?: "primary" | "secondary" }) => {
   const { connector, chain } = useAccount();
   const { chains, isPending, switchChain, error } = useSwitchChain();
-  const [pendingChainId, setPendingChainId] = useState<number | undefined>(
-    undefined
-  );
+  const [pendingChainId, setPendingChainId] = useState<number | undefined>(undefined);
 
   const locales = useLocales({});
   const mobile = isMobile();
 
-  const isError = error?.['code'] === 4902; // Wallet cannot switch networks
+  const isError = error?.["code"] === 4902; // Wallet cannot switch networks
   const disabled = isError || !switchChain;
 
   const handleSwitchNetwork = (chainId: number) => {
@@ -80,9 +77,7 @@ const ChainSelectList = ({
   const { triggerResize } = useContext();
 
   return (
-    <SwitchNetworksContainer
-      style={{ marginBottom: switchChain !== undefined ? -8 : 0 }}
-    >
+    <SwitchNetworksContainer style={{ marginBottom: switchChain !== undefined ? -8 : 0 }}>
       <ChainButtonContainer>
         <ChainButtons>
           {chains.map((x) => {
@@ -93,9 +88,7 @@ const ChainSelectList = ({
                 key={`${ch?.id}-${ch?.name}`}
                 $variant={variant}
                 disabled={
-                  disabled ||
-                  ch.id === chain?.id ||
-                  (isPending && pendingChainId === ch.id)
+                  disabled || ch.id === chain?.id || (isPending && pendingChainId === ch.id)
                 }
                 onClick={() => handleSwitchNetwork?.(ch.id)}
                 style={{
@@ -104,14 +97,12 @@ const ChainSelectList = ({
               >
                 <span
                   style={{
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'flex-start',
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "flex-start",
                     gap: 12,
                     color:
-                      ch.id === chain?.id
-                        ? 'var(--ck-dropdown-active-color, inherit)'
-                        : 'inherit',
+                      ch.id === chain?.id ? "var(--ck-dropdown-active-color, inherit)" : "inherit",
                   }}
                 >
                   <ChainLogoContainer>
@@ -145,23 +136,20 @@ const ChainSelectList = ({
                         {Spinner}
                       </motion.div>
                     </ChainLogoSpinner>
-                    <ChainIcon>
-                      {ch.logo ?? <ChainIcons.UnknownChain />}
-                    </ChainIcon>
+                    <ChainIcon>{ch.logo ?? <ChainIcons.UnknownChain />}</ChainIcon>
                   </ChainLogoContainer>
                   {ch.name}
                 </span>
-                {variant !== 'secondary' && (
+                {variant !== "secondary" && (
                   <ChainButtonStatus>
                     <AnimatePresence initial={false} mode="wait">
                       {ch.id === chain?.id && (
                         <motion.span
-                          key={'connectedText'}
+                          key={"connectedText"}
                           style={{
-                            color:
-                              'var(--ck-dropdown-active-color, var(--ck-focus-color))',
-                            display: 'block',
-                            position: 'relative',
+                            color: "var(--ck-dropdown-active-color, var(--ck-focus-color))",
+                            display: "block",
+                            position: "relative",
                           }}
                           initial={{ opacity: 0, x: -4 }}
                           animate={{ opacity: 1, x: 0 }}
@@ -181,11 +169,11 @@ const ChainSelectList = ({
                       )}
                       {isPending && pendingChainId === ch.id && (
                         <motion.span
-                          key={'approveText'}
+                          key={"approveText"}
                           style={{
-                            color: 'var(--ck-dropdown-pending-color, inherit)',
-                            display: 'block',
-                            position: 'relative',
+                            color: "var(--ck-dropdown-pending-color, inherit)",
+                            display: "block",
+                            position: "relative",
                           }}
                           initial={{
                             opacity: 0,
@@ -216,7 +204,7 @@ const ChainSelectList = ({
                     </AnimatePresence>
                   </ChainButtonStatus>
                 )}
-                {variant === 'secondary' ? (
+                {variant === "secondary" ? (
                   <ChainButtonBg
                     initial={false}
                     animate={{
@@ -224,7 +212,7 @@ const ChainSelectList = ({
                     }}
                     transition={{
                       duration: 0.3,
-                      ease: 'easeOut',
+                      ease: "easeOut",
                     }}
                   />
                 ) : (
@@ -235,7 +223,7 @@ const ChainSelectList = ({
                       layout="position"
                       transition={{
                         duration: 0.3,
-                        ease: 'easeOut',
+                        ease: "easeOut",
                       }}
                     />
                   )
@@ -260,7 +248,7 @@ const ChainSelectList = ({
           >
             <div style={{ paddingTop: 10, paddingBottom: 8 }}>
               <Alert>
-                {locales.warnings_walletSwitchingUnsupported}{' '}
+                {locales.warnings_walletSwitchingUnsupported}{" "}
                 {locales.warnings_walletSwitchingUnsupportedResolve}
               </Alert>
             </div>

package/src/connectkit/components/Common/ChainSelectList/styles.ts

@@ -1,8 +1,8 @@
-import { motion } from 'framer-motion';
-import styled from './../../../styles/styled';
-import { css } from 'styled-components';
+import { motion } from "framer-motion";
+import { styled } from "@multiplatform.one/connectkit";
+import { css } from "styled-components";
 
-import defaultTheme from '../../../constants/defaultTheme';
+import { defaultTheme } from "@multiplatform.one/connectkit";
 
 export const SwitchNetworksContainer = styled.div`
   display: flex;
@@ -38,7 +38,7 @@ export const ChainIcon = styled(motion.div)<{ $empty?: boolean }>`
       align-items: center;
       justify-content: center;
       &:before {
-        content: '?';
+        content: "?";
         color: var(--ck-body-color-muted);
         font-weight: bold;
         font-family: var(--ck-font-family);
@@ -80,11 +80,12 @@ export const ChainButtonContainer = styled.div`
   &:after {
     border-radius: var(--border-radius, 0);
     z-index: 2;
-    content: '';
+    content: "";
     pointer-events: none;
     position: absolute;
     inset: 0 2px;
-    box-shadow: inset 0 16px 8px -12px var(--background, var(--ck-body-background)),
+    box-shadow:
+      inset 0 16px 8px -12px var(--background, var(--ck-body-background)),
       inset 0 -16px 8px -12px var(--background, var(--ck-body-background));
   }
 `;
@@ -107,7 +108,7 @@ export const ChainButtons = styled(motion.div)`
   }
 `;
 export const ChainButton = styled(motion.button)<{
-  $variant?: 'primary' | 'secondary';
+  $variant?: "primary" | "secondary";
 }>`
   appearance: none;
   cursor: pointer;
@@ -128,10 +129,12 @@ export const ChainButton = styled(motion.button)<{
   color: var(--ck-body-color);
   background: none;
   white-space: nowrap;
-  transition: transform 100ms ease, background-color 100ms ease;
+  transition:
+    transform 100ms ease,
+    background-color 100ms ease;
   transform: translateZ(0px);
   &:before {
-    content: '';
+    content: "";
     background: currentColor;
     position: absolute;
     z-index: -1;
@@ -141,7 +144,7 @@ export const ChainButton = styled(motion.button)<{
     transition: opacity 180ms ease;
   }
   &:after {
-    content: '';
+    content: "";
     position: absolute;
     z-index: -1;
     inset: 0 var(--ck-dropdown-active-inset, -8px);
@@ -176,7 +179,7 @@ export const ChainButton = styled(motion.button)<{
     }
   }
   ${(props) =>
-    props.$variant === 'secondary' &&
+    props.$variant === "secondary" &&
     css`
       padding: 12px 4px;
       margin: 0 0 8px;

package/src/connectkit/components/Common/ConnectorList/index.tsx

@@ -1,5 +1,15 @@
-import React, { useState } from 'react';
-import { useContext, routes } from '../../ConnectKit';
+import React, { useState } from "react";
+import {
+  useContext,
+  routes,
+  useIsMobile,
+  ScrollArea,
+  Alert,
+  detectBrowser,
+  isCoinbaseWalletConnector,
+  isPortoConnector,
+  isWalletConnectConnector,
+} from "@multiplatform.one/connectkit";
 
 import {
   ConnectorsContainer,
@@ -7,33 +17,22 @@ import {
   ConnectorLabel,
   ConnectorIcon,
   RecentlyUsedTag,
-} from './styles';
+} from "./styles";
 
-import { useWeb3 } from '../../contexts/web3';
-
-import useIsMobile from '../../../hooks/useIsMobile';
-import { ScrollArea } from '../../Common/ScrollArea';
-import Alert from '../Alert';
-
-import { WalletProps, useWallets } from '../../../wallets/useWallets';
-import {
-  detectBrowser,
-  isCoinbaseWalletConnector,
-  isPortoConnector,
-  isWalletConnectConnector,
-} from '../../../utils';
-import { useLastConnector } from '../../../hooks/useLastConnector';
-import { useConnect } from '../../../hooks/useConnect';
-import { useAaveAccountConnector } from '../../../hooks/useConnectors';
+import { useWeb3 } from "../../contexts/web3";
+import { WalletProps, useWallets } from "../../../wallets/useWallets";
+import { useLastConnector } from "../../../hooks/useLastConnector";
+import { useConnect } from "../../../hooks/useConnect";
+import { useAaveAccountConnector } from "../../../hooks/useConnectors";
 
 // Multi-chain wallets (e.g. Phantom on EVM + Solana) expose a separate connector
 // per chain. Rather than list "Phantom" several times, group by brand name and let
 // the user pick the chain in an inline sub-step.
 const CHAIN_LABEL: Record<string, string> = {
-  evm: 'Ethereum',
-  solana: 'Solana',
-  sui: 'Sui',
-  bitcoin: 'Bitcoin',
+  evm: "Ethereum",
+  solana: "Solana",
+  sui: "Sui",
+  bitcoin: "Bitcoin",
 };
 
 type WalletGroup = {
@@ -51,20 +50,14 @@ const ConnectorList = () => {
   const aaveAccountConnector = useAaveAccountConnector();
   const [expanded, setExpanded] = useState<string | null>(null);
 
-  const filteredWallets = wallets.filter(
-    (wallet) => wallet.id !== aaveAccountConnector?.id
-  );
+  const filteredWallets = wallets.filter((wallet) => wallet.id !== aaveAccountConnector?.id);
 
   const walletsToDisplay =
-    context.options?.hideRecentBadge || lastConnectorId === 'walletConnect' // do not hoist walletconnect to top of list
+    context.options?.hideRecentBadge || lastConnectorId === "walletConnect" // do not hoist walletconnect to top of list
       ? filteredWallets
       : [
-          ...filteredWallets.filter(
-            (wallet) => lastConnectorId === wallet.connector.id
-          ),
-          ...filteredWallets.filter(
-            (wallet) => lastConnectorId !== wallet.connector.id
-          ),
+          ...filteredWallets.filter((wallet) => lastConnectorId === wallet.connector.id),
+          ...filteredWallets.filter((wallet) => lastConnectorId !== wallet.connector.id),
         ];
 
   // Group by brand name (first-seen order preserved).
@@ -79,33 +72,25 @@ const ConnectorList = () => {
       groups.push(group);
     }
     group.members.push(wallet);
-    if (
-      wallet.connector.id === lastConnectorId ||
-      wallet.id === lastConnectorId
-    ) {
+    if (wallet.connector.id === lastConnectorId || wallet.id === lastConnectorId) {
       group.isRecent = true;
     }
   }
 
   if (groups.length === 0) {
     return (
-      <ScrollArea mobileDirection={'horizontal'}>
+      <ScrollArea mobileDirection={"horizontal"}>
         <Alert error>No connectors found in ConnectKit config.</Alert>
       </ScrollArea>
     );
   }
 
   // Expanded chain picker for a multi-chain wallet.
-  const expandedGroup = expanded
-    ? groups.find((g) => g.name === expanded)
-    : null;
+  const expandedGroup = expanded ? groups.find((g) => g.name === expanded) : null;
   if (expandedGroup && expandedGroup.members.length > 1) {
     return (
-      <ScrollArea mobileDirection={'horizontal'}>
-        <ConnectorsContainer
-          $mobile={isMobile}
-          $totalResults={expandedGroup.members.length + 1}
-        >
+      <ScrollArea mobileDirection={"horizontal"}>
+        <ConnectorsContainer $mobile={isMobile} $totalResults={expandedGroup.members.length + 1}>
           <ConnectorButton type="button" onClick={() => setExpanded(null)}>
             <ConnectorIcon>‹</ConnectorIcon>
             <ConnectorLabel>{expandedGroup.name} — pick a chain</ConnectorLabel>
@@ -123,7 +108,7 @@ const ConnectorList = () => {
   }
 
   return (
-    <ScrollArea mobileDirection={'horizontal'}>
+    <ScrollArea mobileDirection={"horizontal"}>
       <ConnectorsContainer $mobile={isMobile} $totalResults={groups.length}>
         {groups.map((group) =>
           group.members.length === 1 ? (
@@ -139,7 +124,7 @@ const ConnectorList = () => {
               isRecent={group.isRecent}
               onExpand={() => setExpanded(group.name)}
             />
-          )
+          ),
         )}
       </ConnectorsContainer>
     </ScrollArea>
@@ -166,10 +151,7 @@ const GroupItem = ({
       disabled={context.route !== routes.CONNECTORS}
       onClick={onExpand}
     >
-      <ConnectorIcon
-        data-small={rep.iconShouldShrink}
-        data-shape={rep.iconShape}
-      >
+      <ConnectorIcon data-small={rep.iconShouldShrink} data-shape={rep.iconShape}>
         {rep.iconConnector ?? rep.icon}
       </ConnectorIcon>
       <ConnectorLabel>
@@ -203,24 +185,22 @@ const ConnectorItem = ({
   const { connect } = useConnect();
 
   let deeplink =
-    (!wallet.isInstalled && isMobile) ||
-    (wallet.shouldDeeplinkDesktop && !isMobile)
-      ? wallet.getWalletConnectDeeplink?.(uri ?? '')
+    (!wallet.isInstalled && isMobile) || (wallet.shouldDeeplinkDesktop && !isMobile)
+      ? wallet.getWalletConnectDeeplink?.(uri ?? "")
       : undefined;
 
   const redirectToMoreWallets = isMobile && isWalletConnectConnector(wallet.id);
   // Safari requires opening popup on user gesture, so we connect immediately here
   const shouldConnectImmediately =
-    (detectBrowser() === 'safari' || detectBrowser() === 'ios') &&
-    (isCoinbaseWalletConnector(wallet.connector.id) ||
-      isPortoConnector(wallet.connector.id));
+    (detectBrowser() === "safari" || detectBrowser() === "ios") &&
+    (isCoinbaseWalletConnector(wallet.connector.id) || isPortoConnector(wallet.connector.id));
 
   if (redirectToMoreWallets || shouldConnectImmediately) deeplink = undefined; // mobile redirects to more wallets page
 
   return (
     <ConnectorButton
       type="button"
-      as={deeplink ? 'a' : undefined}
+      as={deeplink ? "a" : undefined}
       href={deeplink ? deeplink : undefined}
       disabled={context.route !== routes.CONNECTORS}
       onClick={
@@ -247,8 +227,7 @@ const ConnectorItem = ({
         {wallet.iconConnector ?? wallet.icon}
       </ConnectorIcon>
       <ConnectorLabel>
-        {labelOverride ??
-          (isMobile ? wallet.shortName ?? wallet.name : wallet.name)}
+        {labelOverride ?? (isMobile ? (wallet.shortName ?? wallet.name) : wallet.name)}
         {!context.options?.hideRecentBadge && isRecent && (
           <RecentlyUsedTag>
             <span>Recent</span>

package/src/connectkit/components/Common/ConnectorList/styles.ts

@@ -1,7 +1,7 @@
-import styled from '../../../styles/styled';
-import { css, keyframes } from 'styled-components';
+import { styled } from "@multiplatform.one/connectkit";
+import { css, keyframes } from "styled-components";
 
-import { motion } from 'framer-motion';
+import { motion } from "framer-motion";
 
 const Shimmer = keyframes`
   0%{ transform: translate(-100%) rotate(-45deg); }
@@ -41,42 +41,18 @@ const styles = {
       --fallback-border-radius: var(--ck-primary-button-border-radius);
 
       --color: var(--ck-primary-button-color, var(--fallback-color));
-      --background: var(
-        --ck-primary-button-background,
-        var(--fallback-background)
-      );
-      --box-shadow: var(
-        --ck-primary-button-box-shadow,
-        var(--fallback-box-shadow)
-      );
-      --border-radius: var(
-        --ck-primary-button-border-radius,
-        var(--fallback-border-radius)
-      );
+      --background: var(--ck-primary-button-background, var(--fallback-background));
+      --box-shadow: var(--ck-primary-button-box-shadow, var(--fallback-box-shadow));
+      --border-radius: var(--ck-primary-button-border-radius, var(--fallback-border-radius));
 
       --hover-color: var(--ck-primary-button-hover-color, var(--color));
-      --hover-background: var(
-        --ck-primary-button-hover-background,
-        var(--background)
-      );
-      --hover-box-shadow: var(
-        --ck-primary-button-hover-box-shadow,
-        var(--box-shadow)
-      );
-      --hover-border-radius: var(
-        --ck-primary-button-hover-border-radius,
-        var(--border-radius)
-      );
+      --hover-background: var(--ck-primary-button-hover-background, var(--background));
+      --hover-box-shadow: var(--ck-primary-button-hover-box-shadow, var(--box-shadow));
+      --hover-border-radius: var(--ck-primary-button-hover-border-radius, var(--border-radius));
 
       --active-color: var(--ck-primary-button-active-color, var(--hover-color));
-      --active-background: var(
-        --ck-primary-button-active-background,
-        var(--hover-background)
-      );
-      --active-box-shadow: var(
-        --ck-primary-button-active-box-shadow,
-        var(--hover-box-shadow)
-      );
+      --active-background: var(--ck-primary-button-active-background, var(--hover-background));
+      --active-box-shadow: var(--ck-primary-button-active-box-shadow, var(--hover-box-shadow));
       --active-border-radius: var(
         --ck-primary-button-active-border-radius,
         var(--hover-border-radius)
@@ -145,13 +121,13 @@ const styles = {
         height: 100%;
       }
 
-      &[data-shape='squircle'] {
+      &[data-shape="squircle"] {
         border-radius: 22.5%;
       }
-      &[data-shape='circle'] {
+      &[data-shape="circle"] {
         border-radius: 100%;
       }
-      &[data-shape='square'] {
+      &[data-shape="square"] {
         border-radius: 0;
       }
     `,
@@ -188,17 +164,17 @@ const styles = {
         width: 100%;
         height: auto;
       }
-      &[data-small='true'] {
+      &[data-small="true"] {
         svg,
         img {
           transform: scale(0.8);
         }
       }
 
-      &[data-shape='squircle'] {
+      &[data-shape="squircle"] {
         border-radius: 22.5%;
         &:before {
-          content: '';
+          content: "";
           z-index: -1;
           position: absolute;
           inset: 0;
@@ -206,14 +182,14 @@ const styles = {
           box-shadow: inset 0 0 0 1px var(--ck-body-background-tertiary);
         }
       }
-      &[data-shape='circle'] {
+      &[data-shape="circle"] {
         border-radius: 100%;
       }
-      &[data-shape='square'] {
+      &[data-shape="square"] {
         border-radius: 0;
       }
 
-      &[data-background='true'] {
+      &[data-background="true"] {
         border-radius: 22.5%;
         background: var(--ck-body-background-tertiary);
         padding: 8%;
@@ -243,7 +219,7 @@ export const RecentlyUsedTag = styled(motion.span)`
   }
   &:before {
     z-index: 1;
-    content: '';
+    content: "";
     position: absolute;
     inset: 0;
     opacity: 0.4;
@@ -252,7 +228,7 @@ export const RecentlyUsedTag = styled(motion.span)`
   }
   &:after {
     z-index: 2;
-    content: '';
+    content: "";
     position: absolute;
     inset: -10%;
     top: -110%;