@multiplatform.one/web3 5.0.27

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

@@ -0,0 +1,170 @@
+import { keyframes } from 'styled-components';
+import styled from './../../../styles/styled';
+import { motion } from 'framer-motion';
+import defaultTheme from '../../../constants/defaultTheme';
+
+export const Graphic = styled(motion.div)`
+  position: relative;
+  margin: 16px auto 20px;
+  height: 190px;
+  max-width: 295px;
+  pointer-events: none;
+  user-select: none;
+  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
+    height: 200px;
+    max-width: 100%;
+    margin-bottom: 32px;
+  }
+`;
+export const LogoGroup = styled(motion.div)`
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+`;
+const graphicIn = keyframes`
+  0%{
+    opacity:0;
+    transform:scale(0.9);
+  }
+  100%{
+    opacity:1;
+    transform:none;
+  }
+`;
+export const GraphicBackground = styled(motion.div)`
+  z-index: 1;
+  position: absolute;
+  inset: 0;
+  top: -2px;
+  overflow: hidden;
+  &:before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: var(--ck-body-background);
+    background: radial-gradient(
+      closest-side,
+      var(--ck-body-background-transparent, transparent) 18.75%,
+      var(--ck-body-background) 100%
+    );
+    background-size: 100%;
+  }
+  svg {
+    display: block;
+    width: 100%;
+    height: auto;
+  }
+  animation: ${graphicIn} 1000ms 100ms ease both;
+  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
+    animation: none;
+  }
+`;
+
+const logoIn = keyframes`
+  0%{
+    opacity:0;
+    transform:scale(0) translateY(40%);
+  }
+  100%{
+    opacity:1;
+    transform:none;
+  }
+`;
+export const LogoPosition = styled(motion.div)`
+  position: absolute;
+  inset: 0;
+  animation: cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite both;
+  animation-delay: inherit;
+`;
+export const LogoInner = styled(motion.div)`
+  position: absolute;
+`;
+export const LogoGraphic = styled(motion.div)`
+  position: relative;
+  overflow: hidden;
+  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);
+
+  svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+`;
+const float = keyframes`
+  0%,100%{ transform:none; }
+  50%{ transform: translateY(-10%) }
+`;
+export const FloatWrapper = styled(motion.div)`
+  position: relative;
+  animation: cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite both;
+  animation-name: ${float};
+  animation-duration: 3600ms;
+`;
+const rotate = keyframes`
+  0%,100%{ transform:rotate(-3deg); }
+  50%{ transform:rotate(3deg); }
+`;
+export const RotateWrapper = styled(motion.div)`
+  position: relative;
+  animation: cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite both;
+  animation-name: ${rotate};
+  animation-duration: 3200ms;
+`;
+export const Logo = styled(motion.div)`
+  position: absolute;
+  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){ ${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; } }
+
+  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
+    animation: none !important;
+    ${RotateWrapper},${FloatWrapper} {
+      animation: none !important;
+    }
+  }
+
+  ${LogoInner} {
+    transform: translate(-50%, -50%);
+  }
+
+  &:nth-child(1) ${LogoPosition} {
+    transform: translate(50%, 50%);
+    ${LogoGraphic} {
+      border-radius: 17.2px;
+      width: 72px;
+      height: 72px;
+    }
+  }
+  &:nth-child(2) ${LogoPosition} {
+    transform: translate(21%, 21.5%);
+  }
+  &:nth-child(3) ${LogoPosition} {
+    transform: translate(78%, 14%);
+  }
+  &:nth-child(4) ${LogoPosition} {
+    transform: translate(22.5%, 76%);
+  }
+  &:nth-child(5) ${LogoPosition} {
+    transform: translate(76%, 80%);
+  }
+`;

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

@@ -0,0 +1,187 @@
+import React, { useEffect, useState } from 'react';
+import { useContext } from '../../ConnectKit';
+import {
+  isAaveAccountConnector,
+  isSafeConnector,
+  nFormatter,
+  truncateEthAddress,
+} from '../../../utils';
+
+import {
+  useConnect,
+  useDisconnect,
+  useAccount,
+  useEnsName,
+  useBalance,
+  useConnectorClient,
+} from 'wagmi';
+import { formatUnits } from 'viem';
+
+import {
+  AvatarContainer,
+  AvatarInner,
+  ChainSelectorContainer,
+  BalanceContainer,
+  LoadingBalance,
+  Balance,
+} 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';
+
+const Profile: React.FC<{ closeModal?: () => void }> = ({ closeModal }) => {
+  const context = useContext();
+  const themeContext = useThemeContext();
+
+  const locales = useLocales();
+
+  const { reset } = useConnect();
+  const { disconnect } = useDisconnect();
+
+  const { address, isConnected, connector, chain } = useAccount();
+  const isAaveAccount = isAaveAccountConnector(connector?.id);
+  const { data: connectorClient } = useConnectorClient({
+    connector,
+  });
+
+  const ensFallbackConfig = useEnsFallbackConfig();
+  const { data: ensName } = useEnsName({
+    chainId: 1,
+    address: address,
+    config: ensFallbackConfig,
+  });
+  const { data: rawBalance } = useBalance({
+    address,
+    //watch: true,
+  });
+  const balance = rawBalance
+    ? { ...rawBalance, formatted: formatUnits(rawBalance.value, rawBalance.decimals) }
+    : undefined;
+
+  const [shouldDisconnect, setShouldDisconnect] = useState(false);
+
+  useEffect(() => {
+    if (!isConnected) context.setOpen(false);
+  }, [isConnected]);
+
+  useEffect(() => {
+    if (!shouldDisconnect) return;
+
+    // Close before disconnecting to avoid layout shifting while modal is still open
+    if (closeModal) {
+      closeModal();
+    } else {
+      context.setOpen(false);
+    }
+    return () => {
+      disconnect();
+      reset();
+    };
+  }, [shouldDisconnect, disconnect, reset]);
+
+  const separator = ['web95', 'rounded', 'minimal'].includes(
+    themeContext.theme ?? context.theme ?? ''
+  )
+    ? '....'
+    : undefined;
+  return (
+    <PageContent>
+      <ModalContent style={{ paddingBottom: 22, gap: 6 }}>
+        <AvatarContainer>
+          <AvatarInner>
+            <ChainSelectorContainer>
+              <ChainSelector />
+            </ChainSelectorContainer>
+            <Avatar address={address} />
+          </AvatarInner>
+        </AvatarContainer>
+        <ModalH1>
+          <CopyToClipboard string={address}>
+            {ensName ?? truncateEthAddress(address, separator)}
+          </CopyToClipboard>
+        </ModalH1>
+        {context?.options?.hideBalance ? null : (
+          <ModalBody>
+            <BalanceContainer>
+              <AnimatePresence mode="wait" initial={false}>
+                {balance && (
+                  <Balance
+                    key={`chain-${chain?.id}`}
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    exit={{ opacity: 0 }}
+                    transition={{ duration: 0.2 }}
+                  >
+                    {nFormatter(Number(balance?.formatted))}
+                    {` `}
+                    {balance?.symbol}
+                  </Balance>
+                )}
+                {!balance && (
+                  <LoadingBalance
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    exit={{ opacity: 0 }}
+                    transition={{ duration: 0.2 }}
+                  >
+                    &nbsp;
+                  </LoadingBalance>
+                )}
+              </AnimatePresence>
+            </BalanceContainer>
+          </ModalBody>
+        )}
+      </ModalContent>
+
+      {isAaveAccount && (
+        <>
+          <Button
+            onClick={async () => {
+              try {
+                await connectorClient?.request<{
+                  Method: 'aave_switchAccounts';
+                  Parameters: [];
+                  ReturnType: { message: string; success: boolean };
+                }>({
+                  method: 'aave_switchAccounts',
+                  params: [],
+                });
+              } catch (error) {
+                context.log(
+                  'rpc method aave_switchAccounts is not implemented in this connector',
+                  error
+                );
+              }
+            }}
+          >
+            {locales.switchWallets}
+          </Button>
+        </>
+      )}
+      {!isSafeConnector(connector?.id) && (
+        <Button
+          onClick={() => setShouldDisconnect(true)}
+          icon={isAaveAccount ? undefined : <DisconnectIcon />}
+        >
+          {locales.disconnect}
+        </Button>
+      )}
+    </PageContent>
+  );
+};
+
+export default Profile;

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

@@ -0,0 +1,56 @@
+import { keyframes } from 'styled-components';
+import styled from './../../../styles/styled';
+import { motion } from 'framer-motion';
+import defaultTheme from '../../../constants/defaultTheme';
+
+export const AvatarContainer = styled(motion.div)`
+  padding: 18px 0 20px;
+  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
+    padding: 16px 0 20px;
+  }
+`;
+export const AvatarInner = styled(motion.div)`
+  position: relative;
+  display: inline-block;
+`;
+export const ChainSelectorContainer = styled(motion.div)`
+  z-index: 3;
+  position: absolute;
+  bottom: 0px;
+  right: -16px;
+`;
+
+export const BalanceContainer = styled(motion.div)`
+  position: relative;
+`;
+export const Balance = styled(motion.div)`
+  position: relative;
+`;
+const PlaceholderKeyframes = keyframes`
+  0%{ background-position: 100% 0; }
+  100%{ background-position: -100% 0; }
+`;
+export const LoadingBalance = styled(motion.div)`
+  width: 25%;
+  margin: 0 auto;
+  position: relative;
+  overflow: hidden;
+  border-radius: 10px;
+  background: var(--ck-body-background-secondary);
+  inset: 0;
+  &:before {
+    z-index: 4;
+    content: '';
+    position: absolute;
+    inset: 0;
+    background-image: linear-gradient(
+      90deg,
+      var(--ck-body-background-transparent) 50%,
+      var(--ck-body-background),
+      var(--ck-body-background-transparent)
+    );
+    opacity: 0.75;
+    background-size: 200% 100%;
+    animation: ${PlaceholderKeyframes} 1000ms linear infinite both;
+  }
+`;

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

@@ -0,0 +1,242 @@
+import React, { useEffect, useState } from 'react';
+
+import { useContext } from '../../ConnectKit';
+
+import {
+  PageContent,
+  ModalBody,
+  ModalContent,
+} from '../../Common/Modal/styles';
+import {
+  StatusGraphic,
+  LogoContainer,
+  StatusIcon,
+  StatusGraphicBgSvg,
+  ContentContainer,
+} from './styles';
+
+import { useAccount } from 'wagmi';
+import { SIWEButton } from '../../Standard/SIWE';
+import { useSIWE } from '../../../siwe';
+
+import { TickIcon } from '../../../assets/icons';
+import Chains from '../../../assets/chains';
+import Avatar from '../../Common/Avatar';
+import { getAppIcon } from '../../../defaultConfig';
+
+import { AnimatePresence, motion } from 'framer-motion';
+import LazyImage from '../../Common/LazyImage';
+import { isMobile, flattenChildren } from '../../../utils';
+import useLocales from '../../../hooks/useLocales';
+import FitText from '../../Common/FitText';
+
+const transition = { duration: 0.2, ease: [0.26, 0.08, 0.25, 1] };
+const copyTransition = { duration: 0.16, ease: [0.26, 0.08, 0.25, 1] };
+
+const SignInWithEthereum: React.FC = () => {
+  const context = useContext();
+  const { isSignedIn } = useSIWE();
+  const mobile = isMobile();
+
+  const [status, setStatus] = useState<'signedOut' | 'signedIn'>(
+    isSignedIn ? 'signedIn' : 'signedOut'
+  );
+
+  const locales = useLocales({});
+  const copy =
+    status === 'signedIn'
+      ? {
+          heading: locales.signInWithEthereumScreen_signedIn_heading,
+          h1: locales.signInWithEthereumScreen_signedIn_h1,
+          p: locales.signInWithEthereumScreen_signedIn_p,
+          button: locales.signInWithEthereumScreen_signedIn_button,
+        }
+      : {
+          heading: locales.signInWithEthereumScreen_signedOut_heading,
+          h1: locales.signInWithEthereumScreen_signedOut_h1,
+          p: locales.signInWithEthereumScreen_signedOut_p,
+          button: locales.signInWithEthereumScreen_signedOut_button,
+        };
+
+  useEffect(() => {
+    if (isSignedIn) setStatus('signedIn');
+  }, []);
+
+  useEffect(() => {
+    if (!isSignedIn) setStatus('signedOut');
+  }, [isSignedIn]);
+
+  const { address } = useAccount();
+
+  // We use the favicon for the dApp logo because that's how the connectors do it
+  // TODO: Allow for dev customisation
+  const getFavicons = () => {
+    const favicons: { svg: string | null; default: string | null } = {
+      svg: null,
+      default: null,
+    };
+    const nodeList: HTMLCollectionOf<HTMLLinkElement> =
+      document.getElementsByTagName('link');
+    Array.from(nodeList).forEach((node) => {
+      if (
+        (node.getAttribute('rel') === 'icon' ||
+          node.getAttribute('rel') === 'shortcut icon') &&
+        node.getAttribute('href')
+      ) {
+        if (node.getAttribute('type') === 'image/svg+xml') {
+          favicons.svg = node.getAttribute('href');
+        } else {
+          favicons.default = node.getAttribute('href');
+        }
+      }
+    });
+    return favicons;
+  };
+  const favicons = getFavicons();
+  const favicon = getAppIcon() ?? favicons.svg ?? favicons.default;
+
+  return (
+    <PageContent style={{ width: 278 }}>
+      <ModalContent style={{ padding: 0, marginTop: -10 }}>
+        <ContentContainer>
+          <AnimatePresence mode="wait">
+            <motion.div
+              key={flattenChildren(copy.h1).toString()}
+              initial={mobile ? false : { opacity: 0, scale: 0.94 }}
+              animate={{ opacity: 1, scale: 1 }}
+              exit={{ opacity: 0, scale: 0.94 }}
+              transition={copyTransition}
+            >
+              <ModalBody style={{ height: 42 }}>
+                <FitText>{copy.h1}</FitText>
+              </ModalBody>
+            </motion.div>
+          </AnimatePresence>
+        </ContentContainer>
+        <StatusGraphic $connected={isSignedIn} key="status">
+          <div style={{ position: 'absolute', inset: 0 }}>
+            <StatusGraphicBgSvg
+              width="262"
+              height="134"
+              viewBox="0 0 262 134"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <motion.rect
+                x="0"
+                y="0"
+                rx="12"
+                width="262"
+                height="134"
+                strokeDasharray="3 3"
+                animate={{
+                  strokeDashoffset: [0, -6],
+                }}
+                transition={{
+                  duration: 0.4,
+                  ease: 'linear',
+                  repeat: Infinity,
+                }}
+              />
+            </StatusGraphicBgSvg>
+          </div>
+
+          <motion.div
+            key="avatarImage"
+            initial={
+              mobile
+                ? false
+                : {
+                    opacity: 0,
+                    x: 50,
+                    scale: 0.8,
+                  }
+            }
+            animate={{
+              opacity: 1,
+              x: 0,
+              scale: 1,
+            }}
+            transition={transition}
+          >
+            <LogoContainer>
+              <Avatar address={address} size={64} />
+            </LogoContainer>
+          </motion.div>
+          <motion.div
+            key="tickIcon"
+            initial={
+              mobile
+                ? false
+                : {
+                    scale: 0.6,
+                  }
+            }
+            animate={{
+              scale: 1,
+            }}
+            transition={{
+              ...transition,
+            }}
+          >
+            <StatusIcon>
+              <TickIcon />
+            </StatusIcon>
+          </motion.div>
+          <motion.div
+            key="appLogo"
+            initial={
+              mobile
+                ? false
+                : {
+                    opacity: 0,
+                    x: -40,
+                    scale: 0.8,
+                  }
+            }
+            animate={{
+              opacity: 1,
+              x: 0,
+              scale: 1,
+            }}
+            transition={{
+              ...transition,
+            }}
+          >
+            <LogoContainer>
+              {favicon ? (
+                <LazyImage src={favicon} alt={'app'} />
+              ) : (
+                <Chains.UnknownChain />
+              )}
+            </LogoContainer>
+          </motion.div>
+        </StatusGraphic>
+        <AnimatePresence mode="wait">
+          <motion.div
+            key={flattenChildren(copy.p).toString()}
+            style={{ paddingBottom: mobile ? 24 : 12 }}
+            initial={mobile ? false : { opacity: 0, scale: 0.94 }}
+            animate={{ opacity: 1, scale: 1 }}
+            exit={{ opacity: 0, scale: 0.94 }}
+            transition={copyTransition}
+          >
+            <ModalBody style={{ height: 42, marginTop: -1, marginBottom: -3 }}>
+              <FitText>{copy.p}</FitText>
+            </ModalBody>
+          </motion.div>
+        </AnimatePresence>
+        <SIWEButton
+          showSignOutButton={status === 'signedIn'}
+          onSignIn={() => {
+            setTimeout(() => {
+              context.setOpen(false);
+            }, 1000);
+          }}
+        />
+      </ModalContent>
+    </PageContent>
+  );
+};
+
+export default SignInWithEthereum;