@multiplatform.one/web3 5.0.27

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

@@ -0,0 +1,154 @@
+import React from 'react';
+import { ButtonProps } from './types';
+import {
+  ButtonContainer,
+  InnerContainer,
+  IconContainer,
+  Arrow,
+  ArrowLine,
+  ArrowChevron,
+  DownloadArrow,
+  DownloadArrowInner,
+  ButtonContainerInner,
+  SpinnerContainer,
+} from './styles';
+import { AnimatePresence } from 'framer-motion';
+import { flattenChildren } from '../../../utils';
+import FitText from '../FitText';
+import { Spinner } from '../Spinner';
+
+const transition = {
+  duration: 0.4,
+  ease: [0.175, 0.885, 0.32, 0.98],
+};
+
+const Button: React.FC<ButtonProps> = ({
+  children,
+  variant = 'secondary', // unique aspect to how we're handling buttons
+  disabled,
+  icon,
+  iconPosition = 'left',
+  roundedIcon,
+  waiting,
+  arrow,
+  download,
+  href,
+  style,
+  onClick,
+}) => {
+  const key =
+    typeof children === 'string'
+      ? children
+      : flattenChildren(children).join(''); // Need to generate a string for the key so we can automatically animate between content
+
+  const hrefUrl =
+    href && (typeof href === 'string' ? href : flattenChildren(href).join('')); // Need to have a flat string for the href
+
+  return (
+    <ButtonContainer
+      as={href ? 'a' : undefined}
+      onClick={(event: any) => {
+        if (!disabled && onClick) onClick(event);
+      }}
+      href={hrefUrl}
+      target={href && '_blank'}
+      rel={href && 'noopener noreferrer'}
+      disabled={disabled}
+      $variant={variant}
+      style={style}
+    >
+      <AnimatePresence initial={false}>
+        <ButtonContainerInner
+          key={key}
+          initial={{ opacity: 0, y: -10 }}
+          animate={{
+            opacity: 1,
+            y: -1,
+          }}
+          exit={{
+            position: 'absolute',
+            opacity: 0,
+            y: 10,
+            transition: {
+              ...transition,
+            },
+          }}
+          transition={{
+            ...transition,
+            delay: 0.2,
+          }}
+        >
+          {icon && iconPosition === 'left' && (
+            <IconContainer $rounded={roundedIcon}>{icon}</IconContainer>
+          )}
+          {download && (
+            <DownloadArrow>
+              <DownloadArrowInner>
+                <Arrow
+                  width="13"
+                  height="12"
+                  viewBox="0 0 13 12"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <ArrowLine
+                    stroke="currentColor"
+                    x1="1"
+                    y1="6"
+                    x2="12"
+                    y2="6"
+                    strokeWidth="var(--stroke-width)"
+                    strokeLinecap="round"
+                  />
+                  <ArrowChevron
+                    stroke="currentColor"
+                    d="M7.51431 1.5L11.757 5.74264M7.5 10.4858L11.7426 6.24314"
+                    strokeWidth="var(--stroke-width)"
+                    strokeLinecap="round"
+                  />
+                </Arrow>
+              </DownloadArrowInner>
+            </DownloadArrow>
+          )}
+          <InnerContainer style={{ paddingLeft: arrow ? 6 : 0 }}>
+            <FitText>{children}</FitText>
+          </InnerContainer>
+          {icon && iconPosition === 'right' && (
+            <IconContainer $rounded={roundedIcon}>{icon}</IconContainer>
+          )}
+          {arrow && (
+            <Arrow
+              width="13"
+              height="12"
+              viewBox="0 0 13 12"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <ArrowLine
+                stroke="currentColor"
+                x1="1"
+                y1="6"
+                x2="12"
+                y2="6"
+                strokeWidth="2"
+                strokeLinecap="round"
+              />
+              <ArrowChevron
+                stroke="currentColor"
+                d="M7.51431 1.5L11.757 5.74264M7.5 10.4858L11.7426 6.24314"
+                strokeWidth="2"
+                strokeLinecap="round"
+              />
+            </Arrow>
+          )}
+        </ButtonContainerInner>
+        {waiting && (
+          <SpinnerContainer>
+            <Spinner />
+          </SpinnerContainer>
+        )}
+      </AnimatePresence>
+    </ButtonContainer>
+  );
+};
+export default Button;

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

@@ -0,0 +1,296 @@
+import { motion } from 'framer-motion';
+import styled from './../../../styles/styled';
+import { css } from 'styled-components';
+import defaultTheme from '../../../constants/defaultTheme';
+
+export const SpinnerContainer = styled(motion.div)`
+  position: absolute;
+  right: 16px;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+export const Arrow = styled.svg`
+  --x: -3px;
+  --stroke-width: 2;
+  position: relative;
+  top: 1px;
+  left: -0.5px;
+  display: inline-block;
+  vertical-align: middle;
+  margin-left: 9px;
+  margin-right: 1px;
+  transition: all 100ms ease;
+  transform: translateX(var(--x, -3px));
+  color: currentColor;
+  opacity: 0.4;
+`;
+export const ArrowChevron = styled.path``;
+export const ArrowLine = styled.line`
+  transition: inherit;
+  transition-property: transform;
+  transform-origin: 90% 50%;
+  transform: scaleX(0.1);
+`;
+export const DownloadArrow = styled.div`
+  display: inline-block;
+  vertical-align: middle;
+  position: relative;
+  margin-right: 6px;
+  color: currentColor;
+`;
+export const DownloadArrowInner = styled.div`
+  transform: rotate(90deg);
+  ${Arrow} {
+    margin: 0 auto;
+  }
+`;
+
+export const ButtonContainerInner = styled(motion.div)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  inset: 0;
+  height: 100%;
+`;
+export const ButtonContainer = styled.button<{
+  disabled?: boolean;
+  $variant?: 'primary' | 'secondary' | 'tertiary';
+}>`
+
+  ${({ disabled }) =>
+    disabled &&
+    css`
+      cursor: not-allowed;
+      pointer-events: none;
+      ${InnerContainer} {
+        opacity: 0.4;
+      }
+    `}
+
+  ${({ $variant }) => {
+    if ($variant === 'primary') {
+      return css`
+        --color: var(--ck-primary-button-color, var(--ck-body-color));
+        --background: var(
+          --ck-primary-button-background,
+          var(--ck-body-background-primary)
+        );
+        --box-shadow: var(--ck-primary-button-box-shadow);
+        --border-radius: var(--ck-primary-button-border-radius);
+        --font-weight: var(--ck-primary-button-font-weight, 500);
+
+        --hover-color: var(--ck-button-primary-hover-color, var(--color));
+        --hover-background: var(
+          --ck-primary-button-hover-background,
+          var(--background)
+        );
+        --hover-box-shadow: var(
+          --ck-primary-button-hover-box-shadow,
+          var(--box-shadow)
+        );
+        --hover-border-radius: var(
+          --ck-primary-button-hover-border-radius,
+          var(--border-radius)
+        );
+        --hover-font-weight: var(
+          --ck-primary-button-font-weight,
+          var(--font-weight)
+        );
+      `;
+    } else if ($variant === 'secondary') {
+      return css`
+        --color: var(--ck-secondary-button-color, var(--ck-body-color));
+        --background: var(
+          --ck-secondary-button-background,
+          var(--ck-body-background-secondary)
+        );
+        --box-shadow: var(--ck-secondary-button-box-shadow);
+        --border-radius: var(--ck-secondary-button-border-radius);
+        --font-weight: var(--ck-secondary-button-font-weight, 500);
+
+        --hover-color: var(--ck-secondary-button-hover-color, var(--color));
+        --hover-background: var(
+          --ck-secondary-button-hover-background,
+          var(--background)
+        );
+        --hover-box-shadow: var(
+          --ck-secondary-button-hover-box-shadow,
+          var(--box-shadow)
+        );
+        --hover-border-radius: var(
+          --ck-secondary-button-hover-border-radius,
+          var(--border-radius)
+        );
+        --hover-font-weight: var(
+          --ck-secondary-button-font-weight,
+          var(--font-weight)
+        );
+      `;
+    } else if ($variant === 'tertiary') {
+      return css`
+        --color: var(
+          --ck-tertiary-button-color,
+          var(--ck-secondary-button-color)
+        );
+        --background: var(
+          --ck-tertiary-button-background,
+          var(--ck-secondary-button-background)
+        );
+        --box-shadow: var(
+          --ck-tertiary-button-box-shadow,
+          var(--ck-secondary-button-box-shadow)
+        );
+        --border-radius: var(
+          --ck-tertiary-button-border-radius,
+          var(--ck-secondary-button-border-radius)
+        );
+        --font-weight: var(
+          --ck-tertiary-button-font-weight,
+          var(--ck-secondary-button-font-weight)
+        );
+
+        --hover-color: var(
+          --button-tertiary-hover-color,
+          var(--ck-tertiary-button-color)
+        );
+        --hover-background: var(
+          --ck-tertiary-button-hover-background,
+          var(--ck-tertiary-button-background)
+        );
+        --hover-box-shadow: var(
+          --ck-tertiary-button-hover-box-shadow,
+          var(--ck-tertiary-button-box-shadow)
+        );
+        --hover-border-radius: var(
+          --ck-tertiary-button-hover-border-radius,
+          var(--ck-tertiary-button-border-radius, var(--border-radius))
+        );
+        --hover-font-weight: var(
+          --ck-tertiary-button-font-weight,
+          var(--ck-secondary-button-font-weight)
+        );
+      `;
+    }
+  }}
+
+  appearance: none;
+  cursor: pointer;
+  user-select: none;
+  min-width: fit-content;
+  width: 100%;
+  display:block;
+  text-align: center;
+  height: 48px;
+  margin: 12px 0 0;
+  line-height: 48px;
+  padding: 0 4px;
+  font-size: 16px;
+  font-weight: var(--font-weight,500);
+  text-decoration: none;
+  white-space: nowrap;
+  transition: 100ms ease;
+  transition-property: box-shadow, background-color;
+  color: var(--color);
+  background: var(--background);
+  border-radius: var(--border-radius);
+  box-shadow: var(--box-shadow);
+  will-change: transform, box-shadow, background-color, color;
+
+  ${DownloadArrow} {
+    ${Arrow} {
+      transform: translateX(0);
+      ${ArrowLine} {
+        transform: none;
+      }
+      ${ArrowChevron} {
+      }
+    }
+  }
+}
+
+  @media only screen and (min-width: ${defaultTheme.mobileWidth + 1}px) {
+    &:hover,
+    &:focus-visible {
+      color: var(--ck-accent-text-color, var(--hover-color));
+      background: var(--ck-accent-color, var(--hover-background));
+      border-radius: var(--hover-border-radius);
+      box-shadow: var(--hover-box-shadow);
+
+      ${Arrow} {
+        transform: translateX(0);
+        ${ArrowLine} {
+          transform: none;
+        }
+        ${ArrowChevron} {
+        }
+      }
+      ${DownloadArrow} {
+        ${Arrow} {
+          transform: translateX(var(--x));
+          ${ArrowLine} {
+            transform: scaleX(0.1);
+          }
+          ${ArrowChevron} {
+          }
+        }
+      }
+    }
+    &:active {
+      box-shadow: var(--ck-secondary-button-active-box-shadow, var(--hover-box-shadow));
+    }
+  }
+  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
+    transition: transform 100ms ease;
+    transform: scale(1);
+    font-size: 17px;
+    &:active {
+    }
+  }
+`;
+
+export const InnerContainer = styled.div`
+  transform: translateZ(0); // Shifting fix
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  max-width: calc(100% - 42px);
+  transition: opacity 300ms ease;
+  /*
+  overflow: hidden;
+  text-overflow: ellipsis;
+  */
+`;
+
+export const IconContainer = styled(motion.div)<{ $rounded?: boolean }>`
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  max-width: 20px;
+  max-height: 20px;
+  margin: 0 10px;
+  &:first-child {
+    margin-left: 0;
+  }
+  &:last-child {
+    margin-right: 0;
+  }
+  ${(props) => {
+    return (
+      props.$rounded &&
+      css`
+        overflow: hidden;
+        border-radius: 5px;
+      `
+    );
+  }}
+  svg {
+    display: block;
+    position: relative;
+    max-width: 100%;
+    height: auto;
+  }
+`;

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

@@ -0,0 +1,16 @@
+import React from 'react';
+
+export type ButtonProps = {
+  children?: React.ReactNode;
+  variant?: 'primary' | 'secondary' | 'tertiary';
+  disabled?: boolean;
+  icon?: React.ReactNode;
+  iconPosition?: 'left' | 'right';
+  roundedIcon?: boolean;
+  waiting?: boolean;
+  arrow?: boolean;
+  download?: boolean;
+  href?: string;
+  style?: React.CSSProperties;
+  onClick?: (e: any) => void;
+};

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

@@ -0,0 +1,135 @@
+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';
+
+const Spinner = (
+  <svg
+    aria-hidden="true"
+    width="36"
+    height="36"
+    viewBox="0 0 36 36"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M11.3592 30.1654C10.0472 29.4491 8.85718 28.524 7.83713 27.424C6.81708 26.324 5.98425 25.0677 5.36889 23.7054C5.20157 23.335 5.05033 22.9567 4.91578 22.5717C4.51465 21.4237 4.26735 20.2308 4.17794 19.0239C4.16599 18.8626 4.13894 18.7041 4.09809 18.5507C3.85023 17.6197 3.09399 16.8738 2.11531 16.7999C0.975331 16.7138 -0.0310983 17.5702 0.0141657 18.7125C0.0223289 18.9185 0.0340286 19.1243 0.049253 19.3298C0.165374 20.8971 0.486545 22.4464 1.00749 23.9373C1.10424 24.2142 1.20764 24.4884 1.31755 24.7596C2.13617 26.7799 3.31595 28.6371 4.80146 30.239C6.28696 31.841 8.04998 33.1573 10.0029 34.1258C10.2651 34.2558 10.5307 34.3796 10.7995 34.4969C12.247 35.1287 13.7676 35.5656 15.3217 35.7995C15.5255 35.8301 15.7298 35.8573 15.9346 35.881C17.0703 36.0122 18.0001 35.0731 18.0001 33.9299C18.0001 32.9484 17.3133 32.1381 16.4036 31.8208C16.2537 31.7685 16.0977 31.7296 15.9377 31.7056C14.7411 31.5255 13.5702 31.1891 12.4556 30.7026C12.0818 30.5394 11.716 30.3601 11.3592 30.1654Z"
+      fill="url(#paint0_linear_1288_1870)"
+    />
+
+    <defs>
+      <linearGradient
+        id="paint0_linear_1288_1870"
+        x1="2"
+        y1="19.4884"
+        x2="16.8752"
+        y2="33.7485"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop
+          stopColor="var(--ck-connectbutton-balance-color,currentColor)"
+          stopOpacity="0.7"
+        />
+        <stop
+          offset="1"
+          stopColor="var(--ck-connectbutton-balance-color,currentColor)"
+          stopOpacity="0"
+        />
+      </linearGradient>
+    </defs>
+  </svg>
+);
+
+const Chain: React.FC<{
+  id?: number;
+  unsupported?: boolean;
+  radius?: number | string;
+  size?: number | string;
+}> = ({
+  id,
+  unsupported: controlledUnsupported,
+  radius = '50%',
+  size = 24,
+}) => {
+  const isChainSupported = useChainIsSupported(id);
+  const unsupported = controlledUnsupported ?? !isChainSupported;
+
+  const chain = chainConfigs.find((c) => c.id === id);
+  const isMounted = useIsMounted();
+  if (!isMounted)
+    return (
+      <div
+        style={{
+          width: size,
+          height: size,
+        }}
+      />
+    );
+
+  return (
+    <ChainContainer size={size} radius={radius}>
+      <AnimatePresence initial={false}>
+        {unsupported && (
+          <Unsupported
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+          >
+            <svg
+              width="13"
+              height="12"
+              viewBox="0 0 13 12"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M2.61317 11.2501H9.46246C10.6009 11.2501 11.3256 10.3506 11.3256 9.3549C11.3256 9.05145 11.255 8.73244 11.0881 8.43303L7.65903 2.14708C7.659 2.14702 7.65897 2.14696 7.65893 2.1469C7.65889 2.14682 7.65884 2.14673 7.65879 2.14664C7.31045 1.50746 6.6741 1.17871 6.04 1.17871C5.41478 1.17871 4.763 1.50043 4.41518 2.14968L0.993416 8.43476C0.828865 8.72426 0.75 9.04297 0.75 9.3549C0.75 10.3506 1.47471 11.2501 2.61317 11.2501Z"
+                fill="currentColor"
+                stroke="var(--ck-body-background, #fff)"
+                strokeWidth="1.5"
+              />
+              <path
+                d="M6.03258 7.43916C5.77502 7.43916 5.63096 7.29153 5.62223 7.02311L5.55675 4.96973C5.54802 4.69684 5.74446 4.5 6.02821 4.5C6.3076 4.5 6.51277 4.70131 6.50404 4.9742L6.43856 7.01864C6.42546 7.29153 6.2814 7.43916 6.03258 7.43916ZM6.03258 9.11676C5.7401 9.11676 5.5 8.9065 5.5 8.60677C5.5 8.30704 5.7401 8.09678 6.03258 8.09678C6.32506 8.09678 6.56515 8.30256 6.56515 8.60677C6.56515 8.91097 6.32069 9.11676 6.03258 9.11676Z"
+                fill="white"
+              />
+            </svg>
+          </Unsupported>
+        )}
+        {id ? (
+          <LogoContainer
+            key={`${chain?.id}-${chain?.name}-${id}`}
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.3 }}
+          >
+            {chain?.logo ?? <Chains.UnknownChain />}
+          </LogoContainer>
+        ) : (
+          <LoadingContainer
+            key="loading"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.3 }}
+          >
+            {Spinner}
+          </LoadingContainer>
+        )}
+      </AnimatePresence>
+    </ChainContainer>
+  );
+};
+
+export default Chain;

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

@@ -0,0 +1,101 @@
+import { motion } from 'framer-motion';
+import styled from './../../../styles/styled';
+import { css, keyframes } from 'styled-components';
+
+type ChainContainerProps = {
+  size?: number | string;
+  radius?: number | string;
+};
+
+export const ChainContainer = styled.div<ChainContainerProps>`
+  --bg: transparent;
+  --color: #333;
+  ${(props) =>
+    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'};
+        `};
+  ${(props) =>
+    typeof props.radius === 'string'
+      ? css`
+          --radius: ${props.radius};
+        `
+      : css`
+          --radius: ${props.radius >= 0 ? `${props.radius}px` : '24px'};
+        `};
+  display: block;
+  position: relative;
+  width: var(--width);
+  height: var(--height);
+  min-width: var(--width);
+  min-height: var(--height);
+  border-radius: var(--radius);
+  background: var(--ck-body-background-secondary);
+  pointer-events: none;
+  user-select: none;
+  svg {
+    display: block;
+    width: 100%;
+    height: auto;
+  }
+  > div {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+`;
+
+export const LogoContainer = styled(motion.div)`
+  display: block;
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  border-radius: inherit;
+  user-select: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  svg {
+    display: block;
+    width: 100%;
+    height: auto;
+  }
+`;
+
+const Spin = keyframes`
+  0%{ transform: rotate(0deg); }
+  100%{ transform: rotate(360deg); }
+`;
+export const LoadingContainer = styled(motion.div)`
+  position: absolute;
+  inset: 0;
+  animation: ${Spin} 1s linear infinite;
+  svg {
+    display: block;
+    position: absolute;
+    inset: 0;
+  }
+`;
+
+export const Unsupported = styled(motion.div)`
+  z-index: 2;
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 40%;
+  height: 40%;
+  min-width: 13px;
+  min-height: 13px;
+  color: var(--ck-body-color-danger, red);
+  svg {
+    display: block;
+    position: relative;
+    top: -30%;
+    right: -30%;
+  }
+`;