@multiplatform.one/web3 5.1.0 → 6.0.0

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

@@ -1,5 +1,5 @@
-import React, { useEffect, useState } from 'react';
-import { AnimatePresence, Variants } from 'framer-motion';
+import React, { useEffect, useState } from "react";
+import { AnimatePresence, Variants } from "framer-motion";
 import {
   Container,
   ConnectingContainer,
@@ -7,7 +7,7 @@ import {
   RetryButton,
   RetryIconContainer,
   Content,
-} from './styles';
+} from "./styles";
 
 import {
   PageContent,
@@ -16,42 +16,44 @@ import {
   ModalH1,
   ModalContentContainer,
   ModalContent,
-} from '../../Common/Modal/styles';
-import Button from '../../Common/Button';
-import Tooltip from '../../Common/Tooltip';
-import Alert from '../../Common/Alert';
+  Button,
+  Tooltip,
+  Alert,
+  RetryIconCircle,
+  BrowserIcon,
+  AlertIcon,
+  TickIcon,
+  detectBrowser,
+  isWalletConnectConnector,
+  useLocales,
+  useContext,
+} from "@multiplatform.one/connectkit";
 
-import SquircleSpinner from './SquircleSpinner';
+import SquircleSpinner from "./SquircleSpinner";
 
-import { RetryIconCircle } from '../../../assets/icons';
-import BrowserIcon from '../../Common/BrowserIcon';
-import { AlertIcon, TickIcon } from '../../../assets/icons';
-import { detectBrowser, isWalletConnectConnector } from '../../../utils';
-import useLocales from '../../../hooks/useLocales';
-import { useConnect } from '../../../hooks/useConnect';
-import { useContext } from '../../ConnectKit';
-import { useWallet } from '../../../wallets/useWallets';
-import CircleSpinner from './CircleSpinner';
+import { useConnect } from "../../../hooks/useConnect";
+import { useWallet } from "../../../wallets/useWallets";
+import CircleSpinner from "./CircleSpinner";
 
 export const states = {
-  CONNECTED: 'connected',
-  CONNECTING: 'connecting',
-  EXPIRING: 'expiring',
-  FAILED: 'failed',
-  REJECTED: 'rejected',
-  NOTCONNECTED: 'notconnected',
-  UNAVAILABLE: 'unavailable',
+  CONNECTED: "connected",
+  CONNECTING: "connecting",
+  EXPIRING: "expiring",
+  FAILED: "failed",
+  REJECTED: "rejected",
+  NOTCONNECTED: "notconnected",
+  UNAVAILABLE: "unavailable",
 };
 
 const contentVariants: Variants = {
   initial: {
-    willChange: 'transform,opacity',
-    position: 'relative',
+    willChange: "transform,opacity",
+    position: "relative",
     opacity: 0,
     scale: 0.95,
   },
   animate: {
-    position: 'relative',
+    position: "relative",
     opacity: 1,
     scale: 1,
     transition: {
@@ -62,7 +64,7 @@ const contentVariants: Variants = {
     },
   },
   exit: {
-    position: 'absolute',
+    position: "absolute",
     opacity: 0,
     scale: 0.95,
     transition: {
@@ -109,7 +111,7 @@ const ConnectWithInjector: React.FC<{
             // Sometimes the error doesn't respond with a code
             if (error.message) {
               switch (error.message) {
-                case 'User rejected request':
+                case "User rejected request":
                   setStatus(states.REJECTED);
                   break;
                 default:
@@ -133,7 +135,7 @@ const ConnectWithInjector: React.FC<{
     name: wallet?.name,
     shortName: wallet?.shortName ?? wallet?.name,
     icon: wallet?.iconConnector ?? wallet?.icon,
-    iconShape: wallet?.iconShape ?? 'circle',
+    iconShape: wallet?.iconShape ?? "circle",
     iconShouldShrink: wallet?.iconShouldShrink,
   };
 
@@ -157,17 +159,13 @@ const ConnectWithInjector: React.FC<{
     : undefined;
 
   const [status, setStatus] = useState(
-    forceState
-      ? forceState
-      : !wallet?.isInstalled
-      ? states.UNAVAILABLE
-      : states.CONNECTING
+    forceState ? forceState : !wallet?.isInstalled ? states.UNAVAILABLE : states.CONNECTING,
   );
 
   const locales = useLocales({
     CONNECTORNAME: walletInfo.name,
     CONNECTORSHORTNAME: walletInfo.shortName ?? walletInfo.name,
-    SUGGESTEDEXTENSIONBROWSER: suggestedExtension?.label ?? 'your browser',
+    SUGGESTEDEXTENSIONBROWSER: suggestedExtension?.label ?? "your browser",
   });
 
   const runConnect = async () => {
@@ -217,9 +215,7 @@ const ConnectWithInjector: React.FC<{
         <Container>
           <ModalHeading>Invalid State</ModalHeading>
           <ModalContent>
-            <Alert>
-              No connectors match the id given. This state should never happen.
-            </Alert>
+            <Alert>No connectors match the id given. This state should never happen.</Alert>
           </ModalContent>
         </Container>
       </PageContent>
@@ -234,8 +230,7 @@ const ConnectWithInjector: React.FC<{
           <ModalHeading>Invalid State</ModalHeading>
           <ModalContent>
             <Alert>
-              WalletConnect does not have an injection flow. This state should
-              never happen.
+              WalletConnect does not have an injection flow. This state should never happen.
             </Alert>
           </ModalContent>
         </Container>
@@ -249,7 +244,7 @@ const ConnectWithInjector: React.FC<{
         <ConnectingContainer>
           <ConnectingAnimation
             $shake={status === states.FAILED || status === states.REJECTED}
-            $circle={walletInfo.iconShape === 'circle'}
+            $circle={walletInfo.iconShape === "circle"}
           >
             <AnimatePresence>
               {(status === states.FAILED || status === states.REJECTED) && (
@@ -277,15 +272,15 @@ const ConnectWithInjector: React.FC<{
                 </RetryButton>
               )}
             </AnimatePresence>
-            {walletInfo.iconShape === 'circle' ? (
+            {walletInfo.iconShape === "circle" ? (
               <CircleSpinner
                 logo={
                   status === states.UNAVAILABLE ? (
                     <div
                       style={{
-                        transform: 'scale(1.14)',
-                        position: 'relative',
-                        width: '100%',
+                        transform: "scale(1.14)",
+                        position: "relative",
+                        width: "100%",
                       }}
                     >
                       {walletInfo.icon}
@@ -304,9 +299,9 @@ const ConnectWithInjector: React.FC<{
                   status === states.UNAVAILABLE ? (
                     <div
                       style={{
-                        transform: 'scale(1.14)',
-                        position: 'relative',
-                        width: '100%',
+                        transform: "scale(1.14)",
+                        position: "relative",
+                        width: "100%",
                       }}
                     >
                       {walletInfo.icon}
@@ -327,9 +322,9 @@ const ConnectWithInjector: React.FC<{
             {status === states.FAILED && (
               <Content
                 key={states.FAILED}
-                initial={'initial'}
-                animate={'animate'}
-                exit={'exit'}
+                initial={"initial"}
+                animate={"animate"}
+                exit={"exit"}
                 variants={contentVariants}
               >
                 <ModalContent>
@@ -341,7 +336,7 @@ const ConnectWithInjector: React.FC<{
                 </ModalContent>
 
                 {/* Reason: Coinbase Wallet does not expose a QRURI when extension is installed */}
-                {/* 
+                {/*
                 {wallet?.getWalletConnectDeeplink &&
                   wallet.id !== 'coinbaseWalletSDK' && (
                     <>
@@ -360,9 +355,9 @@ const ConnectWithInjector: React.FC<{
             {status === states.REJECTED && (
               <Content
                 key={states.REJECTED}
-                initial={'initial'}
-                animate={'animate'}
-                exit={'exit'}
+                initial={"initial"}
+                animate={"animate"}
+                exit={"exit"}
                 variants={contentVariants}
               >
                 <ModalContent>
@@ -371,7 +366,7 @@ const ConnectWithInjector: React.FC<{
                 </ModalContent>
 
                 {/* Reason: Coinbase Wallet does not expose a QRURI when extension is installed */}
-                {/* 
+                {/*
                 {wallet?.getWalletConnectDeeplink &&
                   wallet.id !== 'coinbaseWalletSDK' && (
                     <>
@@ -390,9 +385,9 @@ const ConnectWithInjector: React.FC<{
             {(status === states.CONNECTING || status === states.EXPIRING) && (
               <Content
                 key={states.CONNECTING}
-                initial={'initial'}
-                animate={'animate'}
-                exit={'exit'}
+                initial={"initial"}
+                animate={"animate"}
+                exit={"exit"}
                 variants={contentVariants}
               >
                 <ModalContent
@@ -401,12 +396,12 @@ const ConnectWithInjector: React.FC<{
                   }}
                 >
                   <ModalH1>
-                    {wallet.connector.id === 'injected'
+                    {wallet.connector.id === "injected"
                       ? locales.injectionScreen_connecting_injected_h1
                       : locales.injectionScreen_connecting_h1}
                   </ModalH1>
                   <ModalBody>
-                    {wallet.connector.id === 'injected'
+                    {wallet.connector.id === "injected"
                       ? locales.injectionScreen_connecting_injected_p
                       : locales.injectionScreen_connecting_p}
                   </ModalBody>
@@ -416,9 +411,9 @@ const ConnectWithInjector: React.FC<{
             {status === states.CONNECTED && (
               <Content
                 key={states.CONNECTED}
-                initial={'initial'}
-                animate={'animate'}
-                exit={'exit'}
+                initial={"initial"}
+                animate={"animate"}
+                exit={"exit"}
                 variants={contentVariants}
               >
                 <ModalContent>
@@ -432,44 +427,36 @@ const ConnectWithInjector: React.FC<{
             {status === states.NOTCONNECTED && (
               <Content
                 key={states.NOTCONNECTED}
-                initial={'initial'}
-                animate={'animate'}
-                exit={'exit'}
+                initial={"initial"}
+                animate={"animate"}
+                exit={"exit"}
                 variants={contentVariants}
               >
                 <ModalContent>
                   <ModalH1>{locales.injectionScreen_notconnected_h1}</ModalH1>
-                  <ModalBody>
-                    {locales.injectionScreen_notconnected_p}
-                  </ModalBody>
+                  <ModalBody>{locales.injectionScreen_notconnected_p}</ModalBody>
                 </ModalContent>
               </Content>
             )}
             {status === states.UNAVAILABLE && (
               <Content
                 key={states.UNAVAILABLE}
-                initial={'initial'}
-                animate={'animate'}
-                exit={'exit'}
+                initial={"initial"}
+                animate={"animate"}
+                exit={"exit"}
                 variants={contentVariants}
               >
                 {!extensionUrl ? (
                   <>
                     <ModalContent style={{ paddingBottom: 12 }}>
-                      <ModalH1>
-                        {locales.injectionScreen_unavailable_h1}
-                      </ModalH1>
-                      <ModalBody>
-                        {locales.injectionScreen_unavailable_p}
-                      </ModalBody>
+                      <ModalH1>{locales.injectionScreen_unavailable_h1}</ModalH1>
+                      <ModalBody>{locales.injectionScreen_unavailable_p}</ModalBody>
                     </ModalContent>
 
                     {!wallet.isInstalled && suggestedExtension && (
                       <Button
                         href={suggestedExtension?.url}
-                        icon={
-                          <BrowserIcon browser={suggestedExtension?.name} />
-                        }
+                        icon={<BrowserIcon browser={suggestedExtension?.name} />}
                       >
                         Install on {suggestedExtension?.label}
                       </Button>

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

@@ -1,8 +1,6 @@
-import styled from './../../../styles/styled';
-import { css, keyframes } from 'styled-components';
-import { motion } from 'framer-motion';
-
-import { ModalContent } from '../../Common/Modal/styles';
+import { styled, ModalContent } from "@multiplatform.one/connectkit";
+import { css, keyframes } from "styled-components";
+import { motion } from "framer-motion";
 
 export const Content = styled(motion.div)`
   display: flex;
@@ -52,7 +50,7 @@ export const ConnectingAnimation = styled(motion.div)<{
   position: relative;
   --spinner-error-opacity: 0;
   &:before {
-    content: '';
+    content: "";
     position: absolute;
     inset: 1px;
     opacity: 0;
@@ -99,7 +97,7 @@ export const RetryButton = styled(motion.button)`
 
   &:before {
     z-index: 3;
-    content: '';
+    content: "";
     position: absolute;
     inset: 0;
     opacity: 0;
@@ -117,15 +115,11 @@ export const RetryIconContainer = styled(motion.div)`
 
   &:before {
     z-index: 1;
-    content: '';
+    content: "";
     position: absolute;
     inset: 3px;
     border-radius: 16px;
-    background: conic-gradient(
-      from 90deg,
-      currentColor 10%,
-      var(--ck-body-color) 80%
-    );
+    background: conic-gradient(from 90deg, currentColor 10%, var(--ck-body-color) 80%);
   }
 
   svg {

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

@@ -1,26 +1,25 @@
-import React from 'react';
-import { routes, useContext } from '../ConnectKit';
-
-import { useWalletConnectModal } from '../../hooks/useWalletConnectModal';
-
+import React from "react";
 import {
+  routes,
+  useContext,
   detectBrowser,
   isAaveAccountConnector,
   isWalletConnectConnector,
-} from '../../utils';
-
-import { PageContent, ModalContent } from '../Common/Modal/styles';
-import { OrDivider } from '../Common/Modal';
-
-import CustomQRCode from '../Common/CustomQRCode';
-import Button from '../Common/Button';
-import ScanIconWithLogos from '../../assets/ScanIconWithLogos';
-import { ExternalLinkIcon } from '../../assets/icons';
-import CopyToClipboard from '../Common/CopyToClipboard';
-import useLocales from '../../hooks/useLocales';
-
-import { useWallet } from '../../wallets/useWallets';
-import { useWeb3 } from '../contexts/web3';
+  PageContent,
+  ModalContent,
+  OrDivider,
+  CustomQRCode,
+  Button,
+  ScanIconWithLogos,
+  ExternalLinkIcon,
+  CopyToClipboard,
+  useLocales,
+} from "@multiplatform.one/connectkit";
+
+import { useWalletConnectModal } from "../../hooks/useWalletConnectModal";
+
+import { useWallet } from "../../wallets/useWallets";
+import { useWeb3 } from "../contexts/web3";
 
 const ConnectWithQRCode: React.FC<{
   switchConnectMethod: (id?: string) => void;
@@ -37,9 +36,7 @@ const ConnectWithQRCode: React.FC<{
   } = useWeb3();
 
   const wcUri = getUri(id);
-  const uri = wcUri
-    ? wallet?.getWalletConnectDeeplink?.(wcUri) ?? wcUri
-    : undefined;
+  const uri = wcUri ? (wallet?.getWalletConnectDeeplink?.(wcUri) ?? wcUri) : undefined;
 
   const locales = useLocales({
     CONNECTORNAME: wallet?.name,
@@ -102,27 +99,27 @@ const ConnectWithQRCode: React.FC<{
       {showAdditionalOptions && ( // for walletConnect
         <div
           style={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
             gap: 14,
           }}
         >
-          {context.options?.walletConnectCTA !== 'modal' && (
+          {context.options?.walletConnectCTA !== "modal" && (
             <CopyToClipboard variant="button" string={uri}>
-              {context.options?.walletConnectCTA === 'link'
+              {context.options?.walletConnectCTA === "link"
                 ? locales.copyToClipboard
                 : locales.copyCode}
             </CopyToClipboard>
           )}
-          {context.options?.walletConnectCTA !== 'link' && (
+          {context.options?.walletConnectCTA !== "link" && (
             <Button
               icon={<ExternalLinkIcon />}
               onClick={openW3M}
               disabled={isOpenW3M}
               waiting={isOpenW3M}
             >
-              {context.options?.walletConnectCTA === 'modal'
+              {context.options?.walletConnectCTA === "modal"
                 ? locales.useWalletConnectModal
                 : locales.useModal}
             </Button>
@@ -133,9 +130,7 @@ const ConnectWithQRCode: React.FC<{
       {isAaveAccountConnector(wallet.id) && (
         <>
           <OrDivider />
-          <Button onClick={() => switchConnectMethod(id)}>
-            {locales.loginWithEmailOrPhone}
-          </Button>
+          <Button onClick={() => switchConnectMethod(id)}>{locales.loginWithEmailOrPhone}</Button>
         </>
       )}
       {/*