@multiplatform.one/web3 5.1.0 → 6.0.1

package/src/connectkit/components/ConnectButton/index.tsx

@@ -1,34 +1,36 @@
-import React from 'react';
-import { useAccount, useEnsName } from 'wagmi';
-import { truncateENSAddress, truncateEthAddress } from './../../utils';
-import useIsMounted from '../../hooks/useIsMounted';
-
+import React from "react";
+import { useAccount, useEnsName } from "wagmi";
 import {
-  IconContainer,
-  TextContainer,
-  UnsupportedNetworkContainer,
-} from './styles';
-import { routes, useContext } from '../ConnectKit';
-import { useModal } from '../../hooks/useModal';
-
-import Avatar from '../Common/Avatar';
-import { AnimatePresence, Variants, motion } from 'framer-motion';
-import { CustomTheme, Mode, Theme } from '../../types';
-import { Balance } from '../BalanceButton';
-import ThemedButton, { ThemeContainer } from '../Common/ThemedButton';
-import { ResetContainer } from '../../styles';
-import { AuthIcon } from '../../assets/icons';
-import { useSIWE } from '../../siwe';
-import useLocales from '../../hooks/useLocales';
-import { Chain } from 'viem';
-import { useChainIsSupported } from '../../hooks/useChainIsSupported';
-import { useEnsFallbackConfig } from '../../hooks/useEnsFallbackConfig';
+  truncateENSAddress,
+  truncateEthAddress,
+  useIsMounted,
+  routes,
+  useContext,
+  useModal,
+  CustomTheme,
+  Mode,
+  Theme,
+  ThemedButton,
+  ThemeContainer,
+  ResetContainer,
+  AuthIcon,
+  useLocales,
+} from "@multiplatform.one/connectkit";
+
+import { IconContainer, TextContainer, UnsupportedNetworkContainer } from "./styles";
+import Avatar from "../Common/Avatar";
+import { AnimatePresence, Variants, motion } from "framer-motion";
+import { Balance } from "../BalanceButton";
+import { useSIWE } from "../../siwe";
+import { Chain } from "viem";
+import { useChainIsSupported } from "../../hooks/useChainIsSupported";
+import { useEnsFallbackConfig } from "../../hooks/useEnsFallbackConfig";
 
 const contentVariants: Variants = {
   initial: {
     zIndex: 2,
     opacity: 0,
-    x: '-100%',
+    x: "-100%",
   },
   animate: {
     opacity: 1,
@@ -41,9 +43,9 @@ const contentVariants: Variants = {
   exit: {
     zIndex: 1,
     opacity: 0,
-    x: '-100%',
-    pointerEvents: 'none',
-    position: 'absolute',
+    x: "-100%",
+    pointerEvents: "none",
+    position: "absolute",
     transition: {
       duration: 0.4,
       ease: [0.25, 1, 0.5, 1],
@@ -55,7 +57,7 @@ const addressVariants: Variants = {
   initial: {
     zIndex: 2,
     opacity: 0,
-    x: '100%',
+    x: "100%",
   },
   animate: {
     x: 0.2,
@@ -67,10 +69,10 @@ const addressVariants: Variants = {
   },
   exit: {
     zIndex: 1,
-    x: '100%',
+    x: "100%",
     opacity: 0,
-    pointerEvents: 'none',
-    position: 'absolute',
+    pointerEvents: "none",
+    position: "absolute",
     transition: {
       duration: 0.4,
       ease: [0.25, 1, 0.5, 1],
@@ -90,7 +92,7 @@ const textVariants: Variants = {
     },
   },
   exit: {
-    position: 'absolute',
+    position: "absolute",
     opacity: 0,
     transition: {
       duration: 0.3,
@@ -117,9 +119,7 @@ type ConnectButtonRendererProps = {
   }) => React.ReactNode;
 };
 
-const ConnectButtonRenderer: React.FC<ConnectButtonRendererProps> = ({
-  children,
-}) => {
+const ConnectButtonRenderer: React.FC<ConnectButtonRendererProps> = ({ children }) => {
   const isMounted = useIsMounted();
   const context = useContext();
   const { open, setOpen } = useModal();
@@ -163,7 +163,7 @@ const ConnectButtonRenderer: React.FC<ConnectButtonRendererProps> = ({
   );
 };
 
-ConnectButtonRenderer.displayName = 'ConnectKitButton.Custom';
+ConnectButtonRenderer.displayName = "ConnectKitButton.Custom";
 
 function ConnectKitButtonInner({
   label,
@@ -194,9 +194,9 @@ function ConnectKitButtonInner({
       {address ? (
         <TextContainer
           key="connectedText"
-          initial={'initial'}
-          animate={'animate'}
-          exit={'exit'}
+          initial={"initial"}
+          animate={"animate"}
+          exit={"exit"}
           variants={addressVariants}
           style={{
             height: 40,
@@ -210,7 +210,7 @@ function ConnectKitButtonInner({
                   <motion.div
                     style={{
                       zIndex: 2,
-                      position: 'absolute',
+                      position: "absolute",
                       bottom: 0,
                       right: 0,
                     }}
@@ -248,7 +248,7 @@ function ConnectKitButtonInner({
 
           <div
             style={{
-              position: 'relative',
+              position: "relative",
               paddingRight: showAvatar ? 1 : 0,
             }}
           >
@@ -256,12 +256,12 @@ function ConnectKitButtonInner({
               {ensName ? (
                 <TextContainer
                   key="ckEnsName"
-                  initial={'initial'}
-                  animate={'animate'}
-                  exit={'exit'}
+                  initial={"initial"}
+                  animate={"animate"}
+                  exit={"exit"}
                   variants={textVariants}
                   style={{
-                    position: ensName ? 'relative' : 'absolute',
+                    position: ensName ? "relative" : "absolute",
                   }}
                 >
                   {context.options?.truncateLongENSAddress
@@ -271,15 +271,15 @@ function ConnectKitButtonInner({
               ) : (
                 <TextContainer
                   key="ckTruncatedAddress"
-                  initial={'initial'}
-                  animate={'animate'}
-                  exit={'exit'}
+                  initial={"initial"}
+                  animate={"animate"}
+                  exit={"exit"}
                   variants={textVariants}
                   style={{
-                    position: ensName ? 'absolute' : 'relative',
+                    position: ensName ? "absolute" : "relative",
                   }}
                 >
-                  {truncateEthAddress(address, separator)}{' '}
+                  {truncateEthAddress(address, separator)}{" "}
                 </TextContainer>
               )}
             </AnimatePresence>
@@ -288,9 +288,9 @@ function ConnectKitButtonInner({
       ) : (
         <TextContainer
           key="connectWalletText"
-          initial={'initial'}
-          animate={'animate'}
-          exit={'exit'}
+          initial={"initial"}
+          animate={"animate"}
+          exit={"exit"}
           variants={contentVariants}
           style={{
             height: 40,
@@ -345,10 +345,8 @@ export function ConnectKitButton({
     context.setRoute(isConnected ? routes.PROFILE : routes.CONNECTORS);
   }
 
-  const separator = ['web95', 'rounded', 'minimal'].includes(
-    theme ?? context.theme ?? ''
-  )
-    ? '....'
+  const separator = ["web95", "rounded", "minimal"].includes(theme ?? context.theme ?? "")
+    ? "...."
     : undefined;
 
   if (!isMounted) return null;
@@ -375,17 +373,17 @@ export function ConnectKitButton({
           <AnimatePresence initial={false}>
             {willShowBalance && (
               <motion.div
-                key={'balance'}
+                key={"balance"}
                 initial={{
                   opacity: 0,
-                  x: '100%',
+                  x: "100%",
                   width: 0,
                   marginRight: 0,
                 }}
                 animate={{
                   opacity: 1,
                   x: 0,
-                  width: 'auto',
+                  width: "auto",
                   marginRight: -24,
                   transition: {
                     duration: 0.4,
@@ -394,7 +392,7 @@ export function ConnectKitButton({
                 }}
                 exit={{
                   opacity: 0,
-                  x: '100%',
+                  x: "100%",
                   width: 0,
                   marginRight: 0,
                   transition: {
@@ -404,11 +402,11 @@ export function ConnectKitButton({
                 }}
               >
                 <ThemedButton
-                  variant={'secondary'}
+                  variant={"secondary"}
                   theme={theme ?? context.theme}
                   mode={mode ?? context.mode}
                   customTheme={customTheme ?? context.customTheme}
-                  style={{ overflow: 'hidden' }}
+                  style={{ overflow: "hidden" }}
                 >
                   <motion.div style={{ paddingRight: 24 }}>
                     <Balance hideSymbol />
@@ -426,25 +424,19 @@ export function ConnectKitButton({
             shouldShowBalance &&
             showBalance &&
             address &&
-            (theme === 'retro' || context.theme === 'retro')
+            (theme === "retro" || context.theme === "retro")
               ? {
                   /** Special fix for the retro theme... not happy about this one */
-                  boxShadow:
-                    'var(--ck-connectbutton-balance-connectbutton-box-shadow)',
-                  borderRadius:
-                    'var(--ck-connectbutton-balance-connectbutton-border-radius)',
-                  overflow: 'hidden',
+                  boxShadow: "var(--ck-connectbutton-balance-connectbutton-box-shadow)",
+                  borderRadius: "var(--ck-connectbutton-balance-connectbutton-border-radius)",
+                  overflow: "hidden",
                 }
               : {
-                  overflow: 'hidden',
+                  overflow: "hidden",
                 }
           }
         >
-          <ConnectKitButtonInner
-            separator={separator}
-            showAvatar={showAvatar}
-            label={label}
-          />
+          <ConnectKitButtonInner separator={separator} showAvatar={showAvatar} label={label} />
         </ThemedButton>
       </ThemeContainer>
     </ResetContainer>

package/src/connectkit/components/ConnectButton/styles.ts

@@ -1,5 +1,5 @@
-import { motion } from 'framer-motion';
-import styled from './../../styles/styled';
+import { motion } from "framer-motion";
+import { styled } from "@multiplatform.one/connectkit";
 
 export const TextContainer = styled(motion.div)`
   top: 0;

package/src/connectkit/components/ConnectModal/ConnectUsing.tsx

@@ -1,18 +1,15 @@
-import { AnimatePresence, motion } from 'framer-motion';
-import { useEffect, useState } from 'react';
+import { AnimatePresence, motion } from "framer-motion";
+import { useEffect, useState } from "react";
 
-import { useContext } from '../ConnectKit';
-import { useWallet } from '../../wallets/useWallets';
+import { useContext, contentVariants, Alert } from "@multiplatform.one/connectkit";
+import { useWallet } from "../../wallets/useWallets";
 
-import ConnectWithInjector from './ConnectWithInjector';
-import ConnectWithQRCode from './ConnectWithQRCode';
-
-import { contentVariants } from '../Common/Modal';
-import Alert from '../Common/Alert';
+import ConnectWithInjector from "./ConnectWithInjector";
+import ConnectWithQRCode from "./ConnectWithQRCode";
 
 const states = {
-  QRCODE: 'qrcode',
-  INJECTOR: 'injector',
+  QRCODE: "qrcode",
+  INJECTOR: "injector",
 };
 
 const ConnectUsing = () => {
@@ -22,13 +19,11 @@ const ConnectUsing = () => {
   // If cannot be scanned, display injector flow, which if extension is not installed will show CTA to install it.
   // siww non-EVM wallets are always injected/extension (no WalletConnect URI) → never QR.
   const isQrCode =
-    (wallet?.ecosystem ?? 'evm') === 'evm' &&
+    (wallet?.ecosystem ?? "evm") === "evm" &&
     !wallet?.isInstalled &&
     wallet?.getWalletConnectDeeplink;
 
-  const [status, setStatus] = useState(
-    isQrCode ? states.QRCODE : states.INJECTOR
-  );
+  const [status, setStatus] = useState(isQrCode ? states.QRCODE : states.INJECTOR);
 
   useEffect(() => {
     // if no provider, change to qrcode
@@ -39,8 +34,7 @@ const ConnectUsing = () => {
         setTimeout(context.triggerResize, 10); // delay required here for modal to resize
       }
     };
-    if (status === states.INJECTOR && (wallet?.ecosystem ?? 'evm') === 'evm')
-      checkProvider();
+    if (status === states.INJECTOR && (wallet?.ecosystem ?? "evm") === "evm") checkProvider();
   }, []);
 
   if (!wallet) return <Alert>Connector not found {context.connector.id}</Alert>;
@@ -50,9 +44,9 @@ const ConnectUsing = () => {
       {status === states.QRCODE && (
         <motion.div
           key={states.QRCODE}
-          initial={'initial'}
-          animate={'animate'}
-          exit={'exit'}
+          initial={"initial"}
+          animate={"animate"}
+          exit={"exit"}
           variants={contentVariants}
         >
           <ConnectWithQRCode
@@ -67,9 +61,9 @@ const ConnectUsing = () => {
       {status === states.INJECTOR && (
         <motion.div
           key={states.INJECTOR}
-          initial={'initial'}
-          animate={'animate'}
-          exit={'exit'}
+          initial={"initial"}
+          animate={"animate"}
+          exit={"exit"}
           variants={contentVariants}
         >
           <ConnectWithInjector

package/src/connectkit/components/ConnectModal/ConnectWithInjector/CircleSpinner/index.tsx

@@ -1,13 +1,7 @@
-import {
-  LogoContainer,
-  Logo,
-  Spinner,
-  SpinnerContainer,
-  ExpiringSpinner,
-} from './styles';
+import { LogoContainer, Logo, Spinner, SpinnerContainer, ExpiringSpinner } from "./styles";
 
-import { AnimatePresence } from 'framer-motion';
-import React from 'react';
+import { AnimatePresence } from "framer-motion";
+import React from "react";
 
 const CircleSpinner = ({
   logo,
@@ -23,9 +17,7 @@ const CircleSpinner = ({
   countdown?: boolean;
 }) => {
   return (
-    <LogoContainer
-      transition={{ duration: 0.5, ease: [0.175, 0.885, 0.32, 0.98] }}
-    >
+    <LogoContainer transition={{ duration: 0.5, ease: [0.175, 0.885, 0.32, 0.98] }}>
       <Logo
         $small={!unavailable && smallLogo}
         style={unavailable ? { borderRadius: 0 } : undefined}
@@ -71,11 +63,7 @@ const CircleSpinner = ({
                     gradientUnits="userSpaceOnUse"
                   >
                     <stop stopColor="var(--ck-spinner-color)" />
-                    <stop
-                      offset="1"
-                      stopColor="var(--ck-spinner-color)"
-                      stopOpacity="0"
-                    />
+                    <stop offset="1" stopColor="var(--ck-spinner-color)" stopOpacity="0" />
                   </linearGradient>
                 </defs>
               </svg>

package/src/connectkit/components/ConnectModal/ConnectWithInjector/CircleSpinner/styles.ts

@@ -1,6 +1,6 @@
-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 { motion } from "framer-motion";
 
 export const LogoContainer = styled(motion.div)`
   z-index: 4;
@@ -59,7 +59,7 @@ export const ExpiringSpinner = styled(motion.div)`
     overflow: hidden;
     &:before {
       position: absolute;
-      content: '';
+      content: "";
       inset: 0;
       background: var(--ck-spinner-color);
       transform-origin: 0% 50%;
@@ -75,7 +75,7 @@ export const ExpiringSpinner = styled(motion.div)`
     overflow: hidden;
     &:before {
       position: absolute;
-      content: '';
+      content: "";
       inset: 0;
       background: var(--ck-spinner-color);
       transform-origin: 100% 50%;

package/src/connectkit/components/ConnectModal/ConnectWithInjector/SquircleSpinner/index.tsx

@@ -1,5 +1,5 @@
-import { LogoContainer, Logo, Spinner, SpinnerContainer } from './styles';
-import { AnimatePresence } from 'framer-motion';
+import { LogoContainer, Logo, Spinner, SpinnerContainer } from "./styles";
+import { AnimatePresence } from "framer-motion";
 
 const SquircleSpinner = ({
   logo,
@@ -9,9 +9,7 @@ const SquircleSpinner = ({
   connecting?: boolean;
 }) => {
   return (
-    <LogoContainer
-      transition={{ duration: 0.5, ease: [0.175, 0.885, 0.32, 0.98] }}
-    >
+    <LogoContainer transition={{ duration: 0.5, ease: [0.175, 0.885, 0.32, 0.98] }}>
       <Logo>{logo}</Logo>
       <SpinnerContainer>
         <AnimatePresence>
@@ -30,13 +28,7 @@ const SquircleSpinner = ({
           )}
         </AnimatePresence>
       </SpinnerContainer>
-      <svg
-        aria-hidden="true"
-        width="102"
-        height="102"
-        viewBox="0 0 102 102"
-        fill="none"
-      >
+      <svg aria-hidden="true" width="102" height="102" viewBox="0 0 102 102" fill="none">
         <rect
           x="7.57895"
           y="7.57895"

package/src/connectkit/components/ConnectModal/ConnectWithInjector/SquircleSpinner/styles.ts

@@ -1,5 +1,5 @@
-import styled from './../../../../styles/styled';
-import { motion } from 'framer-motion';
+import { styled } from "@multiplatform.one/connectkit";
+import { motion } from "framer-motion";
 
 export const LogoContainer = styled(motion.div)`
   z-index: 4;
@@ -39,7 +39,7 @@ export const Spinner = styled(motion.div)`
   position: absolute;
   inset: -25%;
   &:before {
-    content: '';
+    content: "";
     position: absolute;
     inset: 0;
     background: conic-gradient(