@multiplatform.one/web3 5.1.0 → 6.0.0

package/src/connectkit/components/Pages/Connectors/index.tsx

@@ -1,29 +1,23 @@
-import React from 'react';
-import { useContext, routes } from '../../ConnectKit';
-
-import {
-  LearnMoreContainer,
-  LearnMoreButton,
-  InfoBox,
-  InfoBoxButtons,
-  Container,
-} from './styles';
+import React from "react";
 import {
+  useContext,
+  routes,
   PageContent,
   Disclaimer,
   ModalContent,
   ModalH1,
   ModalBody,
-} from '../../Common/Modal/styles';
-import WalletIcon from '../../../assets/wallet';
+  WalletIcon,
+  useLocales,
+  useIsMobile,
+  Button,
+  OrDivider,
+  ContinueWithAaveButton,
+} from "@multiplatform.one/connectkit";
 
-import useLocales from '../../../hooks/useLocales';
-import ConnectorList from '../../Common/ConnectorList';
-import useIsMobile from '../../../hooks/useIsMobile';
-import Button from '../../Common/Button';
-import { useAaveAccountConnector } from '../../../hooks/useConnectors';
-import { OrDivider } from '../../Common/Modal';
-import { ContinueWithAaveButton } from '../../Common/ContinueWithAaveButton';
+import { LearnMoreContainer, LearnMoreButton, InfoBox, InfoBoxButtons, Container } from "./styles";
+import ConnectorList from "../../Common/ConnectorList";
+import { useAaveAccountConnector } from "../../../hooks/useConnectors";
 
 const Wallets: React.FC = () => {
   const context = useContext();
@@ -56,22 +50,19 @@ const Wallets: React.FC = () => {
           {isMobile ? (
             <>
               <InfoBox>
-                <ModalContent style={{ padding: 0, textAlign: 'left' }}>
+                <ModalContent style={{ padding: 0, textAlign: "left" }}>
                   <ModalH1 $small>{locales.connectorsScreen_h1}</ModalH1>
                   <ModalBody>{locales.connectorsScreen_p}</ModalBody>
                 </ModalContent>
                 <InfoBoxButtons>
                   {!context.options?.hideQuestionMarkCTA && (
-                    <Button
-                      variant={'tertiary'}
-                      onClick={() => context.setRoute(routes.ABOUT)}
-                    >
+                    <Button variant={"tertiary"} onClick={() => context.setRoute(routes.ABOUT)}>
                       {locales.learnMore}
                     </Button>
                   )}
                   {!context.options?.hideNoWalletCTA && (
                     <Button
-                      variant={'tertiary'}
+                      variant={"tertiary"}
                       onClick={() => context.setRoute(routes.ONBOARDING)}
                     >
                       {locales.getWallet}
@@ -84,9 +75,7 @@ const Wallets: React.FC = () => {
             <>
               {!context.options?.hideNoWalletCTA && (
                 <LearnMoreContainer>
-                  <LearnMoreButton
-                    onClick={() => context.setRoute(routes.ONBOARDING)}
-                  >
+                  <LearnMoreButton onClick={() => context.setRoute(routes.ONBOARDING)}>
                     <WalletIcon /> {locales.connectorsScreen_newcomer}
                   </LearnMoreButton>
                 </LearnMoreContainer>
@@ -94,7 +83,7 @@ const Wallets: React.FC = () => {
             </>
           )}
           {context.options?.disclaimer && (
-            <Disclaimer style={{ visibility: 'hidden', pointerEvents: 'none' }}>
+            <Disclaimer style={{ visibility: "hidden", pointerEvents: "none" }}>
               <div>{context.options?.disclaimer}</div>
             </Disclaimer>
           )}

package/src/connectkit/components/Pages/Connectors/styles.ts

@@ -1,8 +1,7 @@
-import styled from './../../../styles/styled';
-import { keyframes } from 'styled-components';
+import { styled, ModalBody } from "@multiplatform.one/connectkit";
+import { keyframes } from "styled-components";
 
-import { motion } from 'framer-motion';
-import { ModalBody } from '../../Common/Modal/styles';
+import { motion } from "framer-motion";
 
 const Shimmer = keyframes`
   0%{ transform: translate(-100%) rotate(-45deg); }
@@ -54,7 +53,9 @@ export const LearnMoreButton = styled(motion.button)`
   line-height: 18px;
   font-weight: 500;
   /* will-change: transform; */
-  transition: color 200ms ease, transform 100ms ease;
+  transition:
+    color 200ms ease,
+    transform 100ms ease;
   svg {
     transition: all 100ms ease-out;
     display: block;
@@ -128,38 +129,17 @@ export const ConnectorButton = styled(motion.button)`
   --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)
-  );
+  --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-border-radius: var(
-    --ck-primary-button-active-border-radius,
-    var(--hover-border-radius)
-  );
+  --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));
 
   color: var(--color);
   background: var(--background);
@@ -218,7 +198,7 @@ export const ConnectorRecentlyUsed = styled(motion.span)`
   }
   &:before {
     z-index: 1;
-    content: '';
+    content: "";
     position: absolute;
     inset: 0;
     opacity: 0.4;
@@ -227,7 +207,7 @@ export const ConnectorRecentlyUsed = styled(motion.span)`
   }
   &:after {
     z-index: 2;
-    content: '';
+    content: "";
     position: absolute;
     inset: -10%;
     top: -110%;

package/src/connectkit/components/Pages/DownloadApp/index.tsx

@@ -1,16 +1,14 @@
-import React from 'react';
+import React from "react";
 
 import {
   PageContent,
   ModalBody,
   ModalContent,
-} from '../../Common/Modal/styles';
-
-import CustomQRCode from '../../Common/CustomQRCode';
-
-import useLocales from '../../../hooks/useLocales';
-import { useContext } from '../../ConnectKit';
-import { useWallet } from '../../../wallets/useWallets';
+  CustomQRCode,
+  useLocales,
+  useContext,
+} from "@multiplatform.one/connectkit";
+import { useWallet } from "../../../wallets/useWallets";
 
 const DownloadApp = () => {
   const context = useContext();
@@ -32,17 +30,15 @@ const DownloadApp = () => {
     downloads.ios && downloads.android
       ? locales.downloadAppScreen_iosAndroid
       : downloads.ios
-      ? locales.downloadAppScreen_ios
-      : locales.downloadAppScreen_android;
+        ? locales.downloadAppScreen_ios
+        : locales.downloadAppScreen_android;
 
   return (
     <PageContent>
       <ModalContent style={{ paddingBottom: 4, gap: 14 }}>
         {downloads.redirect && <CustomQRCode value={downloads.redirect} />}
         {!downloads.redirect && <>No download link available</>}
-        <ModalBody
-          style={{ fontSize: 15, lineHeight: '20px', padding: '0 12px' }}
-        >
+        <ModalBody style={{ fontSize: 15, lineHeight: "20px", padding: "0 12px" }}>
           {bodycopy}
         </ModalBody>
       </ModalContent>

package/src/connectkit/components/Pages/MobileConnectors/index.tsx

@@ -1,35 +1,22 @@
-import React from 'react';
-import {
-  Container,
-  WalletList,
-  WalletItem,
-  WalletIcon,
-  WalletLabel,
-} from './styles';
-
-import { PageContent, ModalContent } from '../../Common/Modal/styles';
+import React from "react";
+import { Container, WalletList, WalletItem, WalletIcon, WalletLabel } from "./styles";
 
-import { useContext } from '../../ConnectKit';
-import { useWalletConnectModal } from '../../../hooks/useWalletConnectModal';
-import CopyToClipboard from '../../Common/CopyToClipboard';
-import useLocales from '../../../hooks/useLocales';
-import { Spinner } from '../../Common/Spinner';
-import { ScrollArea } from '../../Common/ScrollArea';
-import { useWeb3 } from '../../contexts/web3';
-import { useWallets } from '../../../wallets/useWallets';
 import {
-  WalletConfigProps,
-  walletConfigs,
-} from '../../../wallets/walletConfigs';
+  PageContent,
+  ModalContent,
+  useContext,
+  CopyToClipboard,
+  useLocales,
+  Spinner,
+  ScrollArea,
+} from "@multiplatform.one/connectkit";
+import { useWalletConnectModal } from "../../../hooks/useWalletConnectModal";
+import { useWeb3 } from "../../contexts/web3";
+import { useWallets } from "../../../wallets/useWallets";
+import { WalletConfigProps, walletConfigs } from "../../../wallets/walletConfigs";
 
 const MoreIcon = (
-  <svg
-    width="60"
-    height="60"
-    viewBox="0 0 60 60"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+  <svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M30 42V19M19 30.5H42"
       stroke="var(--ck-body-color-muted)"
@@ -81,14 +68,11 @@ const MobileConnectors: React.FC = () => {
                     const nameA = walletA.name ?? walletA.shortName ?? a;
                     const nameB = walletB.name ?? walletB.shortName ?? b;
                     return nameA.localeCompare(nameB);
-                  }
+                  },
                 )
                 .filter(
                   (walletId) =>
-                    !(
-                      walletId === 'coinbaseWallet' ||
-                      walletId === 'com.coinbase.wallet'
-                    )
+                    !(walletId === "coinbaseWallet" || walletId === "com.coinbase.wallet"),
                 )
                 .map((walletId, i) => {
                   const wallet = walletConfigs[walletId];
@@ -101,30 +85,26 @@ const MobileConnectors: React.FC = () => {
                         animationDelay: `${i * 50}ms`,
                       }}
                     >
-                      <WalletIcon $outline={true}>
-                        {iconConnector ?? icon}
-                      </WalletIcon>
+                      <WalletIcon $outline={true}>{iconConnector ?? icon}</WalletIcon>
                       <WalletLabel>{shortName ?? name}</WalletLabel>
                     </WalletItem>
                   );
                 })}
               <WalletItem onClick={openW3M} $waiting={isOpenW3M}>
-                <WalletIcon
-                  style={{ background: 'var(--ck-body-background-secondary)' }}
-                >
+                <WalletIcon style={{ background: "var(--ck-body-background-secondary)" }}>
                   {isOpenW3M ? (
                     <div
                       style={{
-                        position: 'absolute',
+                        position: "absolute",
                         inset: 0,
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
                       }}
                     >
                       <div
                         style={{
-                          width: '50%',
+                          width: "50%",
                         }}
                       >
                         <Spinner />
@@ -139,12 +119,12 @@ const MobileConnectors: React.FC = () => {
             </WalletList>
           </ScrollArea>
         </ModalContent>
-        {context.options?.walletConnectCTA !== 'modal' && (
+        {context.options?.walletConnectCTA !== "modal" && (
           <div
             style={{
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
               gap: 14,
               paddingTop: 8,
             }}

package/src/connectkit/components/Pages/MobileConnectors/styles.ts

@@ -1,5 +1,5 @@
-import { css, keyframes } from 'styled-components';
-import styled from './../../../styles/styled';
+import { css, keyframes } from "styled-components";
+import { styled } from "@multiplatform.one/connectkit";
 
 export const WalletItem = styled.div<{ $waiting?: boolean }>`
   text-align: center;

package/src/connectkit/components/Pages/Onboarding/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 import {
   Graphic,
   LogoGroup,
@@ -9,27 +9,25 @@ import {
   LogoGraphic,
   GraphicBackground,
   RotateWrapper,
-} from './styles';
+} from "./styles";
 
 import {
   PageContent,
   ModalBody,
   ModalContent,
   ModalH1,
-} from '../../Common/Modal/styles';
-import Logos from '../../../assets/logos';
-import wave from '../../../assets/wave';
-
-import Button from '../../Common/Button';
-import useLocales from '../../../hooks/useLocales';
-import { useContext } from '../../ConnectKit';
+  Logos,
+  wave,
+  Button,
+  useLocales,
+  useContext,
+} from "@multiplatform.one/connectkit";
 
 const Introduction: React.FC = () => {
   const context = useContext();
   const locales = useLocales({});
 
-  const ctaUrl =
-    context.options?.walletOnboardingUrl ?? locales.onboardingScreen_ctaUrl;
+  const ctaUrl = context.options?.walletOnboardingUrl ?? locales.onboardingScreen_ctaUrl;
   return (
     <PageContent>
       <Graphic>

package/src/connectkit/components/Pages/Onboarding/styles.ts

@@ -1,7 +1,7 @@
-import { keyframes } from 'styled-components';
-import styled from './../../../styles/styled';
-import { motion } from 'framer-motion';
-import defaultTheme from '../../../constants/defaultTheme';
+import { keyframes } from "styled-components";
+import { styled } from "@multiplatform.one/connectkit";
+import { motion } from "framer-motion";
+import { defaultTheme } from "@multiplatform.one/connectkit";
 
 export const Graphic = styled(motion.div)`
   position: relative;
@@ -38,7 +38,7 @@ export const GraphicBackground = styled(motion.div)`
   top: -2px;
   overflow: hidden;
   &:before {
-    content: '';
+    content: "";
     position: absolute;
     inset: 0;
     background: var(--ck-body-background);
@@ -85,7 +85,9 @@ export const LogoGraphic = styled(motion.div)`
   height: 58px;
   width: 58px;
   border-radius: 13.84px;
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 2px 20px 0 rgba(0, 0, 0, 0.03);
+  box-shadow:
+    0 0 0 1px rgba(0, 0, 0, 0.05),
+    0 2px 20px 0 rgba(0, 0, 0, 0.03);
 
   svg {
     display: block;
@@ -118,23 +120,78 @@ export const Logo = styled(motion.div)`
   inset: 0;
 
   animation: ${logoIn} 750ms cubic-bezier(0.19, 1, 0.22, 1) both;
-  &:nth-child(1){ z-index:2; animation-delay:0ms;  }
-  &:nth-child(2){ z-index:1; animation-delay:60ms; }
-  &:nth-child(3){ z-index:1; animation-delay:30ms; }
-  &:nth-child(4){ z-index:1; animation-delay:90ms; }
-  &:nth-child(5){ z-index:1; animation-delay:120ms;}
+  &:nth-child(1) {
+    z-index: 2;
+    animation-delay: 0ms;
+  }
+  &:nth-child(2) {
+    z-index: 1;
+    animation-delay: 60ms;
+  }
+  &:nth-child(3) {
+    z-index: 1;
+    animation-delay: 30ms;
+  }
+  &:nth-child(4) {
+    z-index: 1;
+    animation-delay: 90ms;
+  }
+  &:nth-child(5) {
+    z-index: 1;
+    animation-delay: 120ms;
+  }
 
-  &:nth-child(1){ ${RotateWrapper}{ animation-delay:0ms; } }
-  &:nth-child(2){ ${RotateWrapper}{ animation-delay:-600ms; } }
-  &:nth-child(3){ ${RotateWrapper}{ animation-delay:-1200ms; } }
-  &:nth-child(4){ ${RotateWrapper}{ animation-delay:-1800ms; } }
-  &:nth-child(5){ ${RotateWrapper}{ animation-delay:-2400ms; } }
+  &:nth-child(1) {
+    ${RotateWrapper} {
+      animation-delay: 0ms;
+    }
+  }
+  &:nth-child(2) {
+    ${RotateWrapper} {
+      animation-delay: -600ms;
+    }
+  }
+  &:nth-child(3) {
+    ${RotateWrapper} {
+      animation-delay: -1200ms;
+    }
+  }
+  &:nth-child(4) {
+    ${RotateWrapper} {
+      animation-delay: -1800ms;
+    }
+  }
+  &:nth-child(5) {
+    ${RotateWrapper} {
+      animation-delay: -2400ms;
+    }
+  }
 
-  &:nth-child(1){ ${FloatWrapper}{ animation-delay:-200ms; } }
-  &:nth-child(2){ ${FloatWrapper}{ animation-delay:-600ms; } }
-  &:nth-child(3){ ${FloatWrapper}{ animation-delay:-800ms; } }
-  &:nth-child(4){ ${FloatWrapper}{ animation-delay:-300ms; } }
-  &:nth-child(5){ ${FloatWrapper}{ animation-delay:-3200ms; } }
+  &:nth-child(1) {
+    ${FloatWrapper} {
+      animation-delay: -200ms;
+    }
+  }
+  &:nth-child(2) {
+    ${FloatWrapper} {
+      animation-delay: -600ms;
+    }
+  }
+  &:nth-child(3) {
+    ${FloatWrapper} {
+      animation-delay: -800ms;
+    }
+  }
+  &:nth-child(4) {
+    ${FloatWrapper} {
+      animation-delay: -300ms;
+    }
+  }
+  &:nth-child(5) {
+    ${FloatWrapper} {
+      animation-delay: -3200ms;
+    }
+  }
 
   @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
     animation: none !important;

package/src/connectkit/components/Pages/Profile/index.tsx

@@ -1,11 +1,20 @@
-import React, { useEffect, useState } from 'react';
-import { useContext } from '../../ConnectKit';
+import React, { useEffect, useState } from "react";
 import {
+  useContext,
   isAaveAccountConnector,
   isSafeConnector,
   nFormatter,
   truncateEthAddress,
-} from '../../../utils';
+  PageContent,
+  ModalBody,
+  ModalContent,
+  ModalH1,
+  Button,
+  CopyToClipboard,
+  DisconnectIcon,
+  useThemeContext,
+  useLocales,
+} from "@multiplatform.one/connectkit";
 
 import {
   useConnect,
@@ -14,8 +23,8 @@ import {
   useEnsName,
   useBalance,
   useConnectorClient,
-} from 'wagmi';
-import { formatUnits } from 'viem';
+} from "wagmi";
+import { formatUnits } from "viem";
 
 import {
   AvatarContainer,
@@ -24,24 +33,13 @@ import {
   BalanceContainer,
   LoadingBalance,
   Balance,
-} from './styles';
+} from "./styles";
 
-import {
-  PageContent,
-  ModalBody,
-  ModalContent,
-  ModalH1,
-} from '../../Common/Modal/styles';
-import Button from '../../Common/Button';
-import Avatar from '../../Common/Avatar';
-import ChainSelector from '../../Common/ChainSelect';
-
-import { DisconnectIcon } from '../../../assets/icons';
-import CopyToClipboard from '../../Common/CopyToClipboard';
-import { AnimatePresence } from 'framer-motion';
-import { useThemeContext } from '../../ConnectKitThemeProvider/ConnectKitThemeProvider';
-import useLocales from '../../../hooks/useLocales';
-import { useEnsFallbackConfig } from '../../../hooks/useEnsFallbackConfig';
+import Avatar from "../../Common/Avatar";
+import ChainSelector from "../../Common/ChainSelect";
+
+import { AnimatePresence } from "framer-motion";
+import { useEnsFallbackConfig } from "../../../hooks/useEnsFallbackConfig";
 
 const Profile: React.FC<{ closeModal?: () => void }> = ({ closeModal }) => {
   const context = useContext();
@@ -93,10 +91,10 @@ const Profile: React.FC<{ closeModal?: () => void }> = ({ closeModal }) => {
     };
   }, [shouldDisconnect, disconnect, reset]);
 
-  const separator = ['web95', 'rounded', 'minimal'].includes(
-    themeContext.theme ?? context.theme ?? ''
+  const separator = ["web95", "rounded", "minimal"].includes(
+    themeContext.theme ?? context.theme ?? "",
   )
-    ? '....'
+    ? "...."
     : undefined;
   return (
     <PageContent>
@@ -153,17 +151,17 @@ const Profile: React.FC<{ closeModal?: () => void }> = ({ closeModal }) => {
             onClick={async () => {
               try {
                 await connectorClient?.request<{
-                  Method: 'aave_switchAccounts';
+                  Method: "aave_switchAccounts";
                   Parameters: [];
                   ReturnType: { message: string; success: boolean };
                 }>({
-                  method: 'aave_switchAccounts',
+                  method: "aave_switchAccounts",
                   params: [],
                 });
               } catch (error) {
                 context.log(
-                  'rpc method aave_switchAccounts is not implemented in this connector',
-                  error
+                  "rpc method aave_switchAccounts is not implemented in this connector",
+                  error,
                 );
               }
             }}

package/src/connectkit/components/Pages/Profile/styles.ts

@@ -1,7 +1,7 @@
-import { keyframes } from 'styled-components';
-import styled from './../../../styles/styled';
-import { motion } from 'framer-motion';
-import defaultTheme from '../../../constants/defaultTheme';
+import { keyframes } from "styled-components";
+import { styled } from "@multiplatform.one/connectkit";
+import { motion } from "framer-motion";
+import { defaultTheme } from "@multiplatform.one/connectkit";
 
 export const AvatarContainer = styled(motion.div)`
   padding: 18px 0 20px;
@@ -40,7 +40,7 @@ export const LoadingBalance = styled(motion.div)`
   inset: 0;
   &:before {
     z-index: 4;
-    content: '';
+    content: "";
     position: absolute;
     inset: 0;
     background-image: linear-gradient(