@multiplatform.one/web3 5.0.28 → 6.0.0

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

@@ -1,13 +1,11 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef } from "react";
 
-import { EnsAvatar, ImageContainer } from './styles';
+import { EnsAvatar, ImageContainer } from "./styles";
 
-import { useEnsName, useEnsAvatar, useEnsAddress } from 'wagmi';
-import { normalize } from 'viem/ens';
-import { ResetContainer } from '../../../styles';
-import { useContext } from '../../ConnectKit';
-import useIsMounted from '../../../hooks/useIsMounted';
-import { useEnsFallbackConfig } from '../../../hooks/useEnsFallbackConfig';
+import { useEnsName, useEnsAvatar, useEnsAddress } from "wagmi";
+import { normalize } from "viem/ens";
+import { ResetContainer, useContext, useIsMounted } from "@multiplatform.one/connectkit";
+import { useEnsFallbackConfig } from "../../../hooks/useEnsFallbackConfig";
 
 type Hash = `0x${string}`;
 
@@ -44,7 +42,7 @@ const Avatar: React.FC<{
   });
   const { data: ensAvatar } = useEnsAvatar({
     chainId: 1,
-    name: normalize(ensName ?? ''),
+    name: normalize(ensName ?? ""),
     config: ensFallbackConfig,
   });
 
@@ -55,19 +53,12 @@ const Avatar: React.FC<{
   };
 
   useEffect(() => {
-    if (
-      !(
-        imageRef.current &&
-        imageRef.current.complete &&
-        imageRef.current.naturalHeight !== 0
-      )
-    ) {
+    if (!(imageRef.current && imageRef.current.complete && imageRef.current.naturalHeight !== 0)) {
       setLoaded(false);
     }
   }, [ensAvatar]);
 
-  if (!isMounted)
-    return <div style={{ width: size, height: size, borderRadius: radius }} />;
+  if (!isMounted) return <div style={{ width: size, height: size, borderRadius: radius }} />;
 
   if (context.options?.customAvatar)
     return (
@@ -76,27 +67,29 @@ const Avatar: React.FC<{
           width: size,
           height: size,
           borderRadius: radius,
-          overflow: 'hidden',
+          overflow: "hidden",
         }}
       >
-        {context.options?.customAvatar({
-          address: address ?? ens?.address,
-          ensName: name ?? ens?.name,
-          ensImage: ens?.avatar,
-          size,
-          radius,
-        }) as React.ReactNode}
+        {
+          context.options?.customAvatar({
+            address: address ?? ens?.address,
+            ensName: name ?? ens?.name,
+            ensImage: ens?.avatar,
+            size,
+            radius,
+          }) as React.ReactNode
+        }
       </div>
     );
 
   if (!ens.name || !ens.avatar)
     return (
-      <ResetContainer style={{ pointerEvents: 'none' }}>
+      <ResetContainer style={{ pointerEvents: "none" }}>
         <EnsAvatar $size={size} $seed={ens.address} $radius={radius} />
       </ResetContainer>
     );
   return (
-    <ResetContainer style={{ pointerEvents: 'none' }}>
+    <ResetContainer style={{ pointerEvents: "none" }}>
       <EnsAvatar $size={size} $seed={ens.address} $radius={radius}>
         <ImageContainer
           ref={imageRef}

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

@@ -1,11 +1,11 @@
-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";
 
 function addressToNumber(address: string) {
   return (
     (address
-      .split('')
+      .split("")
       .map((l) => l.charCodeAt(0))
       .reduce((a, b) => a + b) %
       100) /
@@ -29,7 +29,7 @@ export const EnsAvatar = styled(motion.div)<{
   height: ${(props) => `${props.$size}px`};
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
   &:before {
-    content: '';
+    content: "";
     z-index: 1;
     position: absolute;
     inset: 0;

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

@@ -1,16 +1,11 @@
-import React from 'react';
+import React from "react";
 
-import {
-  ChainContainer,
-  LoadingContainer,
-  LogoContainer,
-  Unsupported,
-} from './styles';
-import { AnimatePresence } from 'framer-motion';
-import { chainConfigs } from '../../../constants/chainConfigs';
-import Chains from '../../../assets/chains';
-import useIsMounted from '../../../hooks/useIsMounted';
-import { useChainIsSupported } from '../../../hooks/useChainIsSupported';
+import { ChainContainer, LoadingContainer, LogoContainer, Unsupported } from "./styles";
+import { AnimatePresence } from "framer-motion";
+import { chainConfigs } from "../../../constants/chainConfigs";
+import Chains from "../../../assets/chains";
+import { useIsMounted } from "@multiplatform.one/connectkit";
+import { useChainIsSupported } from "../../../hooks/useChainIsSupported";
 
 const Spinner = (
   <svg
@@ -37,10 +32,7 @@ const Spinner = (
         y2="33.7485"
         gradientUnits="userSpaceOnUse"
       >
-        <stop
-          stopColor="var(--ck-connectbutton-balance-color,currentColor)"
-          stopOpacity="0.7"
-        />
+        <stop stopColor="var(--ck-connectbutton-balance-color,currentColor)" stopOpacity="0.7" />
         <stop
           offset="1"
           stopColor="var(--ck-connectbutton-balance-color,currentColor)"
@@ -56,12 +48,7 @@ const Chain: React.FC<{
   unsupported?: boolean;
   radius?: number | string;
   size?: number | string;
-}> = ({
-  id,
-  unsupported: controlledUnsupported,
-  radius = '50%',
-  size = 24,
-}) => {
+}> = ({ id, unsupported: controlledUnsupported, radius = "50%", size = 24 }) => {
   const isChainSupported = useChainIsSupported(id);
   const unsupported = controlledUnsupported ?? !isChainSupported;
 
@@ -81,11 +68,7 @@ const Chain: React.FC<{
     <ChainContainer size={size} radius={radius}>
       <AnimatePresence initial={false}>
         {unsupported && (
-          <Unsupported
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-          >
+          <Unsupported initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}>
             <svg
               width="13"
               height="12"

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

@@ -1,6 +1,6 @@
-import { motion } from 'framer-motion';
-import styled from './../../../styles/styled';
-import { css, keyframes } from 'styled-components';
+import { motion } from "framer-motion";
+import { styled } from "@multiplatform.one/connectkit";
+import { css, keyframes } from "styled-components";
 
 type ChainContainerProps = {
   size?: number | string;
@@ -11,22 +11,22 @@ export const ChainContainer = styled.div<ChainContainerProps>`
   --bg: transparent;
   --color: #333;
   ${(props) =>
-    typeof props.size === 'string'
+    typeof props.size === "string"
       ? css`
           --width: ${props.size};
           --height: ${props.size};
         `
       : css`
-          --width: ${props.size >= 0 ? `${props.size}px` : '24px'};
-          --height: ${props.size >= 0 ? `${props.size}px` : '24px'};
+          --width: ${props.size >= 0 ? `${props.size}px` : "24px"};
+          --height: ${props.size >= 0 ? `${props.size}px` : "24px"};
         `};
   ${(props) =>
-    typeof props.radius === 'string'
+    typeof props.radius === "string"
       ? css`
           --radius: ${props.radius};
         `
       : css`
-          --radius: ${props.radius >= 0 ? `${props.radius}px` : '24px'};
+          --radius: ${props.radius >= 0 ? `${props.radius}px` : "24px"};
         `};
   display: block;
   position: relative;

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

@@ -1,60 +1,42 @@
-import React, { useEffect, useState } from 'react';
-import { routes, useContext } from './../../ConnectKit';
-
-import { flattenChildren, isMobile } from './../../../utils';
-
-import defaultTheme from './../../../constants/defaultTheme';
-
-import styled from './../../../styles/styled';
-import { css } from 'styled-components';
-import { motion } from 'framer-motion';
-
-import Tooltip from '../Tooltip';
-import ChainSelectDropdown from '../ChainSelectDropdown';
-import Chain from '../Chain';
-import useLocales from '../../../hooks/useLocales';
-
-import { useAccount, useSwitchChain } from 'wagmi';
+import React, { useEffect, useState } from "react";
+import {
+  routes,
+  useContext,
+  flattenChildren,
+  isMobile,
+  defaultTheme,
+  styled,
+  Tooltip,
+  useLocales,
+} from "@multiplatform.one/connectkit";
+import { css } from "styled-components";
+import { motion } from "framer-motion";
+
+import ChainSelectDropdown from "../ChainSelectDropdown";
+import Chain from "../Chain";
+
+import { useAccount, useSwitchChain } from "wagmi";
 
 const Container = styled(motion.div)``;
 
 const SwitchChainButton = styled(motion.button)`
-  --color: var(
-    --ck-dropdown-button-color,
-    var(--ck-button-primary-color, var(--ck-body-color))
-  );
+  --color: var(--ck-dropdown-button-color, var(--ck-button-primary-color, var(--ck-body-color)));
   --background: var(
     --ck-dropdown-button-background,
     var(--ck-secondary-button-background, var(--ck-body-background-secondary))
   );
   --box-shadow: var(
     --ck-dropdown-button-box-shadow,
-    var(
-      --ck-secondary-button-box-shadow,
-      var(--ck-button-primary-box-shadow),
-      none
-    )
+    var(--ck-secondary-button-box-shadow, var(--ck-button-primary-box-shadow), none)
   );
 
   --hover-color: var(--ck-dropdown-button-hover-color, var(--color));
-  --hover-background: var(
-    --ck-dropdown-button-hover-background,
-    var(--background)
-  );
-  --hover-box-shadow: var(
-    --ck-dropdown-button-hover-box-shadow,
-    var(--box-shadow)
-  );
+  --hover-background: var(--ck-dropdown-button-hover-background, var(--background));
+  --hover-box-shadow: var(--ck-dropdown-button-hover-box-shadow, var(--box-shadow));
 
   --active-color: var(--ck-dropdown-button-active-color, var(--hover-color));
-  --active-background: var(
-    --ck-dropdown-button-active-background,
-    var(--hover-background)
-  );
-  --active-box-shadow: var(
-    --ck-dropdown-button-active-box-shadow,
-    var(--hover-box-shadow)
-  );
+  --active-background: var(--ck-dropdown-button-active-background, var(--hover-background));
+  --active-box-shadow: var(--ck-dropdown-button-active-box-shadow, var(--hover-box-shadow));
 
   appearance: none;
   user-select: none;
@@ -96,8 +78,7 @@ const SwitchChainButton = styled(motion.button)`
       : css`
           cursor: pointer;
 
-          @media only screen and (min-width: ${defaultTheme.mobileWidth +
-            1}px) {
+          @media only screen and (min-width: ${defaultTheme.mobileWidth + 1}px) {
             &:hover,
             &:focus-visible {
               color: var(--hover-color);

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

@@ -1,30 +1,21 @@
-import React, {
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useRef,
-  useState,
-} from 'react';
-import { useContext } from './../../ConnectKit';
+import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import {
+  useContext,
+  Portal,
+  ResetContainer,
+  useThemeContext,
+  FocusTrap,
+  useLockBodyScroll,
+  useLocales,
+} from "@multiplatform.one/connectkit";
 
-import useMeasure from 'react-use-measure';
+import useMeasure from "react-use-measure";
 
-import ChainSelectList from './../ChainSelectList';
+import ChainSelectList from "./../ChainSelectList";
 
-import Portal from './../Portal';
-import { ResetContainer } from './../../../styles';
-import {
-  DropdownWindow,
-  DropdownOverlay,
-  DropdownContainer,
-  DropdownHeading,
-} from './styles';
-
-import { AnimatePresence } from 'framer-motion';
-import { useThemeContext } from './../../ConnectKitThemeProvider/ConnectKitThemeProvider';
-import FocusTrap from './../../../hooks/useFocusTrap';
-import useLockBodyScroll from './../../../hooks/useLockBodyScroll';
-import useLocales from '../../../hooks/useLocales';
+import { DropdownWindow, DropdownOverlay, DropdownContainer, DropdownHeading } from "./styles";
+
+import { AnimatePresence } from "framer-motion";
 
 const ChainSelectDropdown: React.FC<{
   children?: React.ReactNode;
@@ -46,9 +37,9 @@ const ChainSelectDropdown: React.FC<{
   useEffect(() => {
     const listener = (e: KeyboardEvent) => {
       if (!open) return;
-      if (e.key === 'Escape') onClose();
+      if (e.key === "Escape") onClose();
 
-      if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+      if (e.key === "ArrowDown" || e.key === "ArrowUp") {
         if (!contentRef.current) return;
         e.preventDefault();
 
@@ -64,7 +55,7 @@ const ChainSelectDropdown: React.FC<{
           firstFocusableEl: any = focusableEls[0],
           lastFocusableEl: any = focusableEls[focusableEls.length - 1];
 
-        if (e.key === 'ArrowUp') {
+        if (e.key === "ArrowUp") {
           if (document.activeElement === firstFocusableEl) {
             lastFocusableEl.focus();
           } else {
@@ -85,9 +76,9 @@ const ChainSelectDropdown: React.FC<{
         }
       }
     };
-    document.addEventListener('keydown', listener);
+    document.addEventListener("keydown", listener);
     return () => {
-      document.removeEventListener('keydown', listener);
+      document.removeEventListener("keydown", listener);
     };
   }, [open]);
 
@@ -98,7 +89,7 @@ const ChainSelectDropdown: React.FC<{
       targetRef.current = node;
       refresh();
     },
-    [open]
+    [open],
   );
   const [ref, bounds] = useMeasure({
     debounce: 120, // waits until modal transition has finished before measuring
@@ -109,13 +100,7 @@ const ChainSelectDropdown: React.FC<{
   const refresh = () => {
     if (
       !targetRef.current ||
-      bounds.top +
-        bounds.bottom +
-        bounds.left +
-        bounds.right +
-        bounds.height +
-        bounds.width ===
-        0
+      bounds.top + bounds.bottom + bounds.left + bounds.right + bounds.height + bounds.width === 0
     ) {
       return;
     }
@@ -146,8 +131,7 @@ const ChainSelectDropdown: React.FC<{
     */
   };
 
-  const useIsomorphicLayoutEffect =
-    typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+  const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
   useIsomorphicLayoutEffect(refresh, [targetRef.current, bounds, open]);
 
   useEffect(refresh, [open, targetRef.current]);
@@ -156,11 +140,11 @@ const ChainSelectDropdown: React.FC<{
   const onResize = onClose;
   useEffect(() => {
     refresh();
-    window.addEventListener('scroll', onScroll);
-    window.addEventListener('resize', onResize);
+    window.addEventListener("scroll", onScroll);
+    window.addEventListener("resize", onResize);
     return () => {
-      window.removeEventListener('scroll', onScroll);
-      window.removeEventListener('resize', onResize);
+      window.removeEventListener("scroll", onScroll);
+      window.removeEventListener("resize", onResize);
     };
   }, []);
 
@@ -184,12 +168,12 @@ const ChainSelectDropdown: React.FC<{
                       left: offset.x,
                       top: offset.y,
                     }}
-                    initial={'collapsed'}
-                    animate={'open'}
-                    exit={'collapsed'}
+                    initial={"collapsed"}
+                    animate={"open"}
+                    exit={"collapsed"}
                     variants={{
                       collapsed: {
-                        transformOrigin: '0 0',
+                        transformOrigin: "0 0",
                         opacity: 0,
                         scale: 0.96,
                         z: 0.01,
@@ -200,8 +184,8 @@ const ChainSelectDropdown: React.FC<{
                         },
                       },
                       open: {
-                        transformOrigin: '0 0',
-                        willChange: 'opacity,transform',
+                        transformOrigin: "0 0",
+                        willChange: "opacity,transform",
                         opacity: 1,
                         scale: 1,
                         z: 0.01,

package/src/connectkit/components/Common/ChainSelectDropdown/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 DropdownWindow = styled(motion.div)`
   z-index: 2147483647;
@@ -13,10 +13,7 @@ export const DropdownOverlay = styled(motion.div)`
 export const DropdownContainer = styled(motion.div)`
   --shadow: 0px 2px 15px rgba(0, 0, 0, 0.15);
   --background: var(--ck-dropdown-background, var(--ck-tooltip-background));
-  --border-radius: var(
-    --ck-dropdown-border-radius,
-    var(--ck-tooltip-border-radius, 12px)
-  );
+  --border-radius: var(--ck-dropdown-border-radius, var(--ck-tooltip-border-radius, 12px));
 
   pointer-events: auto;
   z-index: 2147483647;
@@ -28,10 +25,7 @@ export const DropdownContainer = styled(motion.div)`
   padding: 14px 16px 16px;
   color: var(--ck-dropdown-color, var(--ck-tooltip-color));
   background: var(--background);
-  box-shadow: var(
-    --ck-dropdown-box-shadow,
-    var(--ck-tooltip-shadow, var(--shadow))
-  );
+  box-shadow: var(--ck-dropdown-box-shadow, var(--ck-tooltip-shadow, var(--shadow)));
   border-radius: var(--border-radius);
 `;
 export const DropdownHeading = styled(motion.div)`