@multiplatform.one/web3 5.0.27

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

@@ -0,0 +1,155 @@
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { useContext } from '../../ConnectKit';
+import useMeasure from 'react-use-measure';
+
+import { TooltipProps, TooltipSizeProps } from './types';
+import { TooltipWindow, TooltipContainer, TooltipTail } from './styles';
+
+import { AnimatePresence, motion } from 'framer-motion';
+import { ResetContainer } from '../../../styles';
+import Portal from '../Portal';
+import { useThemeContext } from '../../ConnectKitThemeProvider/ConnectKitThemeProvider';
+
+const Tooltip: React.FC<TooltipProps> = ({
+  children,
+  message,
+  open,
+  xOffset = 0,
+  yOffset = 0,
+  delay,
+}) => {
+  const context = useContext();
+  const themeContext = useThemeContext();
+
+  if (context.options?.hideTooltips) return <>{children}</>;
+
+  const [isOpen, setIsOpen] = useState(false);
+  const [outOfBounds, setOutOfBounds] = useState(false);
+  const [size, setSize] = useState<TooltipSizeProps>('small');
+
+  const [ready, setReady] = useState(false);
+
+  const [currentRoute] = useState(context.route);
+
+  const targetRef = useRef<any>(null);
+  const [ref, bounds] = useMeasure({
+    debounce: !ready ? 220 : 0, // fix alignment initial state
+    offsetSize: true,
+    scroll: true,
+  });
+
+  const checkBounds = () => {
+    let flag = false;
+    const x = xOffset + bounds.left + bounds.width;
+    const y = yOffset + bounds.top + bounds.height * 0.5;
+    if (x > window.innerWidth || x < 0 || y > window.innerHeight || y < 0) {
+      flag = true;
+    }
+    return flag;
+  };
+
+  const useIsomorphicLayoutEffect =
+    typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+
+  const refreshLayout = () => {
+    if (
+      !targetRef.current ||
+      bounds.top +
+        bounds.bottom +
+        bounds.left +
+        bounds.right +
+        bounds.height +
+        bounds.width ===
+        0
+    )
+      return;
+    const x = xOffset + bounds.left + bounds.width;
+    const y = yOffset + bounds.top + bounds.height * 0.5;
+    if (!ready && x !== 0 && y !== 0) setReady(true);
+    targetRef.current.style.left = `${x}px`;
+    targetRef.current.style.top = `${y}px`;
+    setSize(targetRef.current.offsetHeight <= 40 ? 'small' : 'large');
+    setOutOfBounds(checkBounds());
+  };
+  useIsomorphicLayoutEffect(refreshLayout, [bounds, open, isOpen]);
+
+  useEffect(() => {
+    if (!context.open) setIsOpen(false);
+  }, [context.open]);
+
+  useEffect(() => {
+    setIsOpen(!!open);
+  }, [open]);
+
+  return (
+    <>
+      <motion.div
+        ref={ref}
+        style={
+          open === undefined
+            ? {
+                cursor: 'help',
+              }
+            : {}
+        }
+        onHoverStart={() => setIsOpen(true)}
+        onHoverEnd={() => setIsOpen(false)}
+        onClick={() => setIsOpen(false)}
+      >
+        {children}
+      </motion.div>
+      <Portal>
+        <AnimatePresence>
+          {currentRoute === context.route && !outOfBounds && isOpen && (
+            <ResetContainer
+              $useTheme={themeContext.theme}
+              $useMode={themeContext.mode}
+              $customTheme={themeContext.customTheme}
+            >
+              <TooltipWindow>
+                <TooltipContainer
+                  role="tooltip"
+                  $size={size}
+                  ref={targetRef}
+                  initial={'collapsed'}
+                  animate={ready ? 'open' : {}}
+                  exit={'collapsed'}
+                  variants={{
+                    collapsed: {
+                      transformOrigin: '20px 50%',
+                      opacity: 0,
+                      scale: 0.9,
+                      z: 0.01,
+                      y: '-50%',
+                      x: 20,
+                      transition: {
+                        duration: 0.1,
+                      },
+                    },
+                    open: {
+                      willChange: 'opacity,transform',
+                      opacity: 1,
+                      scale: 1,
+                      z: 0.01,
+                      y: '-50%',
+                      x: 20,
+                      transition: {
+                        ease: [0.76, 0, 0.24, 1],
+                        duration: 0.15,
+                        delay: delay ? delay : 0.5,
+                      },
+                    },
+                  }}
+                >
+                  {message}
+                  <TooltipTail $size={size} />
+                </TooltipContainer>
+              </TooltipWindow>
+            </ResetContainer>
+          )}
+        </AnimatePresence>
+      </Portal>
+    </>
+  );
+};
+export default Tooltip;

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

@@ -0,0 +1,80 @@
+import { motion } from 'framer-motion';
+import styled from './../../../styles/styled';
+import { TooltipSizeProps } from './types';
+
+export const TooltipWindow = styled(motion.div)`
+  z-index: 2147483647;
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+`;
+export const TooltipContainer = styled(motion.div)<{ $size: TooltipSizeProps }>`
+  --shadow: var(--ck-tooltip-shadow);
+  z-index: 2147483647;
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  gap: 8px;
+  width: fit-content;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(
+    --ck-tooltip-border-radius,
+    ${(props) => (props.$size === 'small' ? 11 : 14)}px
+  );
+  border-radius: ;
+  padding: 10px 16px 10px 12px;
+  font-size: 14px;
+  line-height: 19px;
+  font-weight: 500;
+  letter-spacing: -0.1px;
+  color: var(--ck-tooltip-color);
+  background: var(--ck-tooltip-background);
+  box-shadow: var(--shadow);
+  > span {
+    z-index: 3;
+    position: relative;
+  }
+  > div {
+    margin: -4px 0; // offset for icon
+  }
+  strong {
+    color: var(--ck-spinner-color);
+  }
+
+  .ck-tt-logo {
+    display: inline-block;
+    vertical-align: text-bottom;
+    height: 1em;
+    width: 1.25em;
+    svg {
+      display: block;
+      height: 100%;
+      transform: translate(0.5px, -1px) scale(1.75);
+    }
+  }
+`;
+
+export const TooltipTail = styled(motion.div)<{ $size: TooltipSizeProps }>`
+  z-index: 2;
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: ${(props) => (props.$size === 'small' ? 14 : 18)}px;
+  right: 100%;
+  top: 0;
+  bottom: 0;
+  overflow: hidden;
+  &:before {
+    content: '';
+    position: absolute;
+    box-shadow: var(--shadow);
+    width: ${(props) => (props.$size === 'small' ? 14 : 18)}px;
+    height: ${(props) => (props.$size === 'small' ? 14 : 18)}px;
+    transform: translate(75%, 0) rotate(45deg);
+    background: var(--ck-tooltip-background);
+    border-radius: ${(props) => (props.$size === 'small' ? 2 : 3)}px 0 0 0;
+  }
+`;

package/src/connectkit/components/Common/Tooltip/types.ts

@@ -0,0 +1,10 @@
+export type TooltipSizeProps = 'small' | 'large';
+
+export type TooltipProps = {
+  message?: string | React.ReactNode;
+  children?: React.ReactNode;
+  open?: boolean;
+  xOffset?: number;
+  yOffset?: number;
+  delay?: number;
+};

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

@@ -0,0 +1,454 @@
+import React from 'react';
+import { useAccount, useEnsName } from 'wagmi';
+import { truncateENSAddress, truncateEthAddress } from './../../utils';
+import useIsMounted from '../../hooks/useIsMounted';
+
+import {
+  IconContainer,
+  TextContainer,
+  UnsupportedNetworkContainer,
+} from './styles';
+import { routes, useContext } from '../ConnectKit';
+import { useModal } from '../../hooks/useModal';
+
+import Avatar from '../Common/Avatar';
+import { AnimatePresence, Variants, motion } from 'framer-motion';
+import { CustomTheme, Mode, Theme } from '../../types';
+import { Balance } from '../BalanceButton';
+import ThemedButton, { ThemeContainer } from '../Common/ThemedButton';
+import { ResetContainer } from '../../styles';
+import { AuthIcon } from '../../assets/icons';
+import { useSIWE } from '../../siwe';
+import useLocales from '../../hooks/useLocales';
+import { Chain } from 'viem';
+import { useChainIsSupported } from '../../hooks/useChainIsSupported';
+import { useEnsFallbackConfig } from '../../hooks/useEnsFallbackConfig';
+
+const contentVariants: Variants = {
+  initial: {
+    zIndex: 2,
+    opacity: 0,
+    x: '-100%',
+  },
+  animate: {
+    opacity: 1,
+    x: 0.1,
+    transition: {
+      duration: 0.4,
+      ease: [0.25, 1, 0.5, 1],
+    },
+  },
+  exit: {
+    zIndex: 1,
+    opacity: 0,
+    x: '-100%',
+    pointerEvents: 'none',
+    position: 'absolute',
+    transition: {
+      duration: 0.4,
+      ease: [0.25, 1, 0.5, 1],
+    },
+  },
+};
+
+const addressVariants: Variants = {
+  initial: {
+    zIndex: 2,
+    opacity: 0,
+    x: '100%',
+  },
+  animate: {
+    x: 0.2,
+    opacity: 1,
+    transition: {
+      duration: 0.4,
+      ease: [0.25, 1, 0.5, 1],
+    },
+  },
+  exit: {
+    zIndex: 1,
+    x: '100%',
+    opacity: 0,
+    pointerEvents: 'none',
+    position: 'absolute',
+    transition: {
+      duration: 0.4,
+      ease: [0.25, 1, 0.5, 1],
+    },
+  },
+};
+
+const textVariants: Variants = {
+  initial: {
+    opacity: 0,
+  },
+  animate: {
+    opacity: 1,
+    transition: {
+      duration: 0.3,
+      ease: [0.25, 1, 0.5, 1],
+    },
+  },
+  exit: {
+    position: 'absolute',
+    opacity: 0,
+    transition: {
+      duration: 0.3,
+      ease: [0.25, 1, 0.5, 1],
+    },
+  },
+};
+
+type Hash = `0x${string}`;
+
+type ConnectButtonRendererProps = {
+  children?: (renderProps: {
+    show?: () => void;
+    hide?: () => void;
+    chain?: Chain & {
+      unsupported?: boolean;
+    };
+    unsupported: boolean;
+    isConnected: boolean;
+    isConnecting: boolean;
+    address?: Hash;
+    truncatedAddress?: string;
+    ensName?: string;
+  }) => React.ReactNode;
+};
+
+const ConnectButtonRenderer: React.FC<ConnectButtonRendererProps> = ({
+  children,
+}) => {
+  const isMounted = useIsMounted();
+  const context = useContext();
+  const { open, setOpen } = useModal();
+
+  const { address, isConnected, chain } = useAccount();
+  const isChainSupported = useChainIsSupported(chain?.id);
+
+  const ensFallbackConfig = useEnsFallbackConfig();
+  const { data: ensName } = useEnsName({
+    chainId: 1,
+    address: address,
+    config: ensFallbackConfig,
+  });
+
+  function hide() {
+    setOpen(false);
+  }
+
+  function show() {
+    setOpen(true);
+    context.setRoute(isConnected ? routes.PROFILE : routes.CONNECTORS);
+  }
+
+  if (!children) return null;
+  if (!isMounted) return null;
+
+  return (
+    <>
+      {children({
+        show,
+        hide,
+        chain: chain,
+        unsupported: !isChainSupported,
+        isConnected: !!address,
+        isConnecting: open, // Using `open` to determine if connecting as wagmi isConnecting only is set to true when an active connector is awaiting connection
+        address: address,
+        truncatedAddress: address ? truncateEthAddress(address) : undefined,
+        ensName: ensName?.toString(),
+      })}
+    </>
+  );
+};
+
+ConnectButtonRenderer.displayName = 'ConnectKitButton.Custom';
+
+function ConnectKitButtonInner({
+  label,
+  showAvatar,
+  separator,
+}: {
+  label?: string;
+  showAvatar?: boolean;
+  separator?: string;
+}) {
+  const locales = useLocales({});
+  const context = useContext();
+  const { isSignedIn } = useSIWE();
+
+  const { address, chain } = useAccount();
+  const isChainSupported = useChainIsSupported(chain?.id);
+
+  const ensFallbackConfig = useEnsFallbackConfig();
+  const { data: ensName } = useEnsName({
+    chainId: 1,
+    address: address,
+    config: ensFallbackConfig,
+  });
+  const defaultLabel = locales.connectWallet;
+
+  return (
+    <AnimatePresence initial={false}>
+      {address ? (
+        <TextContainer
+          key="connectedText"
+          initial={'initial'}
+          animate={'animate'}
+          exit={'exit'}
+          variants={addressVariants}
+          style={{
+            height: 40,
+            //padding: !showAvatar ? '0 5px' : undefined,
+          }}
+        >
+          {showAvatar && (
+            <IconContainer>
+              <AnimatePresence initial={false}>
+                {isSignedIn && (
+                  <motion.div
+                    style={{
+                      zIndex: 2,
+                      position: 'absolute',
+                      bottom: 0,
+                      right: 0,
+                    }}
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    exit={{ opacity: 0 }}
+                  >
+                    <AuthIcon />
+                  </motion.div>
+                )}
+                {!isChainSupported && (
+                  <UnsupportedNetworkContainer
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    exit={{ opacity: 0 }}
+                  >
+                    <svg
+                      width="14"
+                      height="14"
+                      viewBox="0 0 14 14"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M1.68831 13.5H12.0764C13.1026 13.5 13.7647 12.7197 13.7647 11.763C13.7647 11.4781 13.6985 11.1863 13.5462 10.9149L8.34225 1.37526C8.02445 0.791754 7.45505 0.5 6.88566 0.5C6.31627 0.5 5.73364 0.791754 5.42246 1.37526L0.225108 10.9217C0.0728291 11.1863 0 11.4781 0 11.763C0 12.7197 0.662083 13.5 1.68831 13.5ZM6.88566 8.8048C6.49503 8.8048 6.27655 8.5809 6.26331 8.1738L6.16399 5.0595C6.15075 4.64562 6.44869 4.34708 6.87904 4.34708C7.30278 4.34708 7.61396 4.6524 7.60071 5.06628L7.5014 8.16701C7.48154 8.5809 7.26305 8.8048 6.88566 8.8048ZM6.88566 11.3492C6.44207 11.3492 6.07792 11.0303 6.07792 10.5757C6.07792 10.1211 6.44207 9.80219 6.88566 9.80219C7.32926 9.80219 7.69341 10.1143 7.69341 10.5757C7.69341 11.0371 7.32264 11.3492 6.88566 11.3492Z"
+                        fill="currentColor"
+                      />
+                    </svg>
+                  </UnsupportedNetworkContainer>
+                )}
+              </AnimatePresence>
+              <Avatar size={24} address={address} />
+            </IconContainer>
+          )}
+
+          <div
+            style={{
+              position: 'relative',
+              paddingRight: showAvatar ? 1 : 0,
+            }}
+          >
+            <AnimatePresence initial={false}>
+              {ensName ? (
+                <TextContainer
+                  key="ckEnsName"
+                  initial={'initial'}
+                  animate={'animate'}
+                  exit={'exit'}
+                  variants={textVariants}
+                  style={{
+                    position: ensName ? 'relative' : 'absolute',
+                  }}
+                >
+                  {context.options?.truncateLongENSAddress
+                    ? truncateENSAddress(ensName, 20)
+                    : ensName}
+                </TextContainer>
+              ) : (
+                <TextContainer
+                  key="ckTruncatedAddress"
+                  initial={'initial'}
+                  animate={'animate'}
+                  exit={'exit'}
+                  variants={textVariants}
+                  style={{
+                    position: ensName ? 'absolute' : 'relative',
+                  }}
+                >
+                  {truncateEthAddress(address, separator)}{' '}
+                </TextContainer>
+              )}
+            </AnimatePresence>
+          </div>
+        </TextContainer>
+      ) : (
+        <TextContainer
+          key="connectWalletText"
+          initial={'initial'}
+          animate={'animate'}
+          exit={'exit'}
+          variants={contentVariants}
+          style={{
+            height: 40,
+            //padding: '0 5px',
+          }}
+        >
+          {label ? label : defaultLabel}
+        </TextContainer>
+      )}
+    </AnimatePresence>
+  );
+}
+
+type ConnectKitButtonProps = {
+  // Options
+  label?: string;
+  showBalance?: boolean;
+  showAvatar?: boolean;
+
+  // Theming
+  theme?: Theme;
+  mode?: Mode;
+  customTheme?: CustomTheme;
+
+  // Events
+  onClick?: (open: () => void) => void;
+};
+
+export function ConnectKitButton({
+  // Options
+  label,
+  showBalance = false,
+  showAvatar = true,
+
+  // Theming
+  theme,
+  mode,
+  customTheme,
+
+  // Events
+  onClick,
+}: ConnectKitButtonProps) {
+  const isMounted = useIsMounted();
+
+  const context = useContext();
+
+  const { isConnected, address, chain } = useAccount();
+  const chainIsSupported = useChainIsSupported(chain?.id);
+
+  function show() {
+    context.setOpen(true);
+    context.setRoute(isConnected ? routes.PROFILE : routes.CONNECTORS);
+  }
+
+  const separator = ['web95', 'rounded', 'minimal'].includes(
+    theme ?? context.theme ?? ''
+  )
+    ? '....'
+    : undefined;
+
+  if (!isMounted) return null;
+
+  const shouldShowBalance = showBalance && chainIsSupported;
+  const willShowBalance = address && shouldShowBalance;
+
+  return (
+    <ResetContainer
+      $useTheme={theme ?? context.theme}
+      $useMode={mode ?? context.mode}
+      $customTheme={customTheme ?? context.customTheme}
+    >
+      <ThemeContainer
+        onClick={() => {
+          if (onClick) {
+            onClick(show);
+          } else {
+            show();
+          }
+        }}
+      >
+        {shouldShowBalance && (
+          <AnimatePresence initial={false}>
+            {willShowBalance && (
+              <motion.div
+                key={'balance'}
+                initial={{
+                  opacity: 0,
+                  x: '100%',
+                  width: 0,
+                  marginRight: 0,
+                }}
+                animate={{
+                  opacity: 1,
+                  x: 0,
+                  width: 'auto',
+                  marginRight: -24,
+                  transition: {
+                    duration: 0.4,
+                    ease: [0.25, 1, 0.5, 1],
+                  },
+                }}
+                exit={{
+                  opacity: 0,
+                  x: '100%',
+                  width: 0,
+                  marginRight: 0,
+                  transition: {
+                    duration: 0.4,
+                    ease: [0.25, 1, 0.5, 1],
+                  },
+                }}
+              >
+                <ThemedButton
+                  variant={'secondary'}
+                  theme={theme ?? context.theme}
+                  mode={mode ?? context.mode}
+                  customTheme={customTheme ?? context.customTheme}
+                  style={{ overflow: 'hidden' }}
+                >
+                  <motion.div style={{ paddingRight: 24 }}>
+                    <Balance hideSymbol />
+                  </motion.div>
+                </ThemedButton>
+              </motion.div>
+            )}
+          </AnimatePresence>
+        )}
+        <ThemedButton
+          theme={theme ?? context.theme}
+          mode={mode ?? context.mode}
+          customTheme={customTheme ?? context.customTheme}
+          style={
+            shouldShowBalance &&
+            showBalance &&
+            address &&
+            (theme === 'retro' || context.theme === 'retro')
+              ? {
+                  /** Special fix for the retro theme... not happy about this one */
+                  boxShadow:
+                    'var(--ck-connectbutton-balance-connectbutton-box-shadow)',
+                  borderRadius:
+                    'var(--ck-connectbutton-balance-connectbutton-border-radius)',
+                  overflow: 'hidden',
+                }
+              : {
+                  overflow: 'hidden',
+                }
+          }
+        >
+          <ConnectKitButtonInner
+            separator={separator}
+            showAvatar={showAvatar}
+            label={label}
+          />
+        </ThemedButton>
+      </ThemeContainer>
+    </ResetContainer>
+  );
+}
+
+ConnectKitButton.Custom = ConnectButtonRenderer;