@multiplatform.one/web3 5.0.28 → 6.0.0

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

@@ -1,27 +1,31 @@
-import { useEffect, useRef, useState } from 'react';
-import { useAccount } from 'wagmi';
-import { routes, useContext } from '../ConnectKit';
-import { CustomTheme, Languages, Theme, Mode } from '../../types';
-import Modal from '../Common/Modal';
-
-import Onboarding from '../Pages/Onboarding';
-import About from '../Pages/About';
-import Connectors from '../Pages/Connectors';
-import ConnectUsing from './ConnectUsing';
-import DownloadApp from '../Pages/DownloadApp';
-import Profile from '../Pages/Profile';
-import SwitchNetworks from '../Pages/SwitchNetworks';
-import MobileConnectors from '../Pages/MobileConnectors';
-import SignInWithEthereum from '../Pages/SignInWithEthereum';
-
-import { ConnectKitButton } from '../ConnectButton';
-import { getAppName } from '../../defaultConfig';
-import { ConnectKitThemeProvider } from '../ConnectKitThemeProvider/ConnectKitThemeProvider';
-
-import styled from './../../styles/styled';
-import { keyframes } from 'styled-components';
-import { Web3ContextProvider } from '../contexts/web3';
-import { useChainIsSupported } from '../../hooks/useChainIsSupported';
+import { useEffect, useRef, useState } from "react";
+import { useAccount } from "wagmi";
+import {
+  routes,
+  useContext,
+  CustomTheme,
+  Languages,
+  Theme,
+  Mode,
+  Modal,
+} from "@multiplatform.one/connectkit";
+
+import Onboarding from "../Pages/Onboarding";
+import About from "../Pages/About";
+import Connectors from "../Pages/Connectors";
+import ConnectUsing from "./ConnectUsing";
+import DownloadApp from "../Pages/DownloadApp";
+import Profile from "../Pages/Profile";
+import SwitchNetworks from "../Pages/SwitchNetworks";
+import MobileConnectors from "../Pages/MobileConnectors";
+import SignInWithEthereum from "../Pages/SignInWithEthereum";
+
+import { ConnectKitButton } from "../ConnectButton";
+import { getAppName } from "../../defaultConfig";
+import { ConnectKitThemeProvider, styled, useModalState } from "@multiplatform.one/connectkit";
+import { keyframes } from "styled-components";
+import { Web3ContextProvider } from "../contexts/web3";
+import { useChainIsSupported } from "../../hooks/useChainIsSupported";
 
 const dist = 8;
 const shake = keyframes`
@@ -49,7 +53,9 @@ const Cursor = styled.div`
   height: 32px;
   border-radius: 50%;
   background: rgba(0, 0, 0, 0.5);
-  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4), 0 4px 6px rgba(0, 0, 0, 0.1);
+  box-shadow:
+    0 0 0 2px rgba(255, 255, 255, 0.4),
+    0 4px 6px rgba(0, 0, 0, 0.1);
   opacity: 0;
   &.play {
     animation: ${cursorIn} 1300ms 200ms cubic-bezier(0.16, 1, 0.6, 1) both;
@@ -73,7 +79,7 @@ const ButtonContainer = styled.div`
   justify-content: center;
   &:before {
     z-index: 9;
-    content: '';
+    content: "";
     position: absolute;
     inset: 0;
   }
@@ -90,30 +96,25 @@ const ConnectModal: React.FC<{
   open?: boolean;
   onClose?: () => void;
 }> = ({
-  theme = 'auto',
+  theme = "auto",
   customTheme = customThemeDefault,
-  lang = 'en-US',
-  mode = 'auto',
+  lang = "en-US",
+  mode = "auto",
   inline = false,
   open,
   onClose,
 }) => {
   const context = useContext();
+  const modalState = useModalState();
 
   const { isConnected, chain } = useAccount();
   const chainIsSupported = useChainIsSupported(chain?.id);
 
   //if chain is unsupported we enforce a "switch chain" prompt
-  const closeable = !(
-    context.options?.enforceSupportedChains &&
-    isConnected &&
-    !chainIsSupported
-  );
+  const closeable = !(context.options?.enforceSupportedChains && isConnected && !chainIsSupported);
 
   const showBackButton =
-    closeable &&
-    context.route !== routes.CONNECTORS &&
-    context.route !== routes.PROFILE;
+    closeable && context.route !== routes.CONNECTORS && context.route !== routes.PROFILE;
 
   const showInfoButton = closeable && context.route !== routes.PROFILE;
 
@@ -146,23 +147,21 @@ const ConnectModal: React.FC<{
   const [isOpen, setIsOpen] = useState<boolean>(open ?? false);
 
   useEffect(() => {
-    if (open)
-      context.setRoute(isConnected ? routes.PROFILE : routes.CONNECTORS);
+    if (open) context.setRoute(isConnected ? routes.PROFILE : routes.CONNECTORS);
     setIsOpen(open ?? false);
   }, [open]);
 
   useEffect(() => {
-    if (isOpen)
-      context.setRoute(isConnected ? routes.PROFILE : routes.CONNECTORS);
+    if (isOpen) context.setRoute(isConnected ? routes.PROFILE : routes.CONNECTORS);
   }, [isOpen]);
 
   useEffect(() => {
     if (!isOpen && inline) {
       if (onClose) {
         if (cursorRef.current) {
-          cursorRef.current.classList.remove('play');
+          cursorRef.current.classList.remove("play");
           void cursorRef.current.offsetWidth;
-          cursorRef.current.classList.add('play');
+          cursorRef.current.classList.add("play");
         }
         setTimeout(() => {
           setIsOpen(true);
@@ -183,23 +182,17 @@ const ConnectModal: React.FC<{
     } else {
       if (ref.current) {
         // reset animation
-        ref.current.classList.remove('shake');
+        ref.current.classList.remove("shake");
         void ref.current.offsetWidth;
-        ref.current.classList.add('shake');
+        ref.current.classList.add("shake");
       }
     }
   };
 
   useEffect(() => {
     if (isConnected) {
-      if (
-        context.route !== routes.PROFILE ||
-        context.route !== routes.SIGNINWITHETHEREUM
-      ) {
-        if (
-          context.signInWithEthereum &&
-          !context.options?.disableSiweRedirect
-        ) {
+      if (context.route !== routes.PROFILE || context.route !== routes.SIGNINWITHETHEREUM) {
+        if (modalState.signInWithEthereum && !context.options?.disableSiweRedirect) {
           context.setRoute(routes.SIGNINWITHETHEREUM);
         } else {
           onModalClose(); // Hide on connect
@@ -215,9 +208,9 @@ const ConnectModal: React.FC<{
     const appName = getAppName();
     if (!appName || (!open && !inline)) return;
 
-    const title = document.createElement('meta');
-    title.setAttribute('property', 'og:title');
-    title.setAttribute('content', appName);
+    const title = document.createElement("meta");
+    title.setAttribute("property", "og:title");
+    title.setAttribute("content", appName);
     document.head.prepend(title);
 
     return () => {
@@ -227,21 +220,13 @@ const ConnectModal: React.FC<{
 
   return (
     <Web3ContextProvider enabled={isOpen}>
-      <ConnectKitThemeProvider
-        theme={theme}
-        customTheme={customTheme}
-        mode={mode}
-      >
+      <ConnectKitThemeProvider theme={theme} customTheme={customTheme} mode={mode}>
         <Container ref={ref}>
           {inline && onClose && (
             <>
               <Cursor ref={cursorRef} />
               <ButtonContainer>
-                <ConnectKitButton
-                  customTheme={customTheme}
-                  theme={theme}
-                  mode={mode}
-                />
+                <ConnectKitButton customTheme={customTheme} theme={theme} mode={mode} />
               </ButtonContainer>
             </>
           )}
@@ -252,9 +237,7 @@ const ConnectModal: React.FC<{
             open={isOpen}
             pages={pages}
             pageId={context.route}
-            onInfo={
-              showInfoButton ? () => context.setRoute(routes.ABOUT) : undefined
-            }
+            onInfo={showInfoButton ? () => context.setRoute(routes.ABOUT) : undefined}
             onBack={showBackButton ? onBack : undefined}
           />
         </Container>

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

@@ -1,33 +1,28 @@
-import React, { useState } from 'react';
-import { All } from './../../types';
+import React, { useState } from "react";
+import {
+  All,
+  useIsMounted,
+  DynamicContainer,
+  ThemedButton,
+  ConnectKitThemeProvider,
+  styled,
+} from "@multiplatform.one/connectkit";
 
-import { AnimatePresence } from 'framer-motion';
+import { AnimatePresence, motion } from "framer-motion";
 
-import { useAccount } from 'wagmi';
-import useIsMounted from '../../hooks/useIsMounted';
+import { useAccount } from "wagmi";
 
-import Chain from '../Common/Chain';
-import DynamicContainer from '../Common/DynamicContainer';
-import { chainConfigs } from '../../constants/chainConfigs';
-import ThemedButton from '../Common/ThemedButton';
-import ChainSelectDropdown from '../Common/ChainSelectDropdown';
-import { ConnectKitThemeProvider } from '../ConnectKitThemeProvider/ConnectKitThemeProvider';
-import { motion } from 'framer-motion';
-import styled from './../../styles/styled';
-import { useContext } from '../ConnectKit';
+import Chain from "../Common/Chain";
+import { chainConfigs } from "../../constants/chainConfigs";
+import ChainSelectDropdown from "../Common/ChainSelectDropdown";
+import { useContext } from "@multiplatform.one/connectkit";
 
 const Container = styled(motion.div)`
   position: relative;
 `;
 
 const ArrowIcon = (
-  <svg
-    width="10"
-    height="7"
-    viewBox="0 0 10 7"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+  <svg width="10" height="7" viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       fillRule="evenodd"
       clipRule="evenodd"
@@ -71,7 +66,7 @@ const NetworkButton: React.FC<NetworkButtonProps & All> = ({
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             exit={{ opacity: 0 }}
-            transition={{ duration: 0.2, ease: 'linear' }}
+            transition={{ duration: 0.2, ease: "linear" }}
           >
             <ChainSelectDropdown open={open} onClose={() => setOpen(false)}>
               <ThemedButton
@@ -82,10 +77,10 @@ const NetworkButton: React.FC<NetworkButtonProps & All> = ({
               >
                 <div
                   style={{
-                    display: 'flex',
+                    display: "flex",
                     gap: 8,
-                    alignItems: 'center',
-                    justifyContent: 'center',
+                    alignItems: "center",
+                    justifyContent: "center",
                   }}
                 >
                   {!hideIcon && (
@@ -102,9 +97,7 @@ const NetworkButton: React.FC<NetworkButtonProps & All> = ({
                       </div>
                     )}
                   </AnimatePresence>
-                  <div style={{ minWidth: 10, transform: 'translateY(1px)' }}>
-                    {ArrowIcon}
-                  </div>
+                  <div style={{ minWidth: 10, transform: "translateY(1px)" }}>{ArrowIcon}</div>
                 </div>
               </ThemedButton>
             </ChainSelectDropdown>