@multiplatform.one/web3 5.1.0 → 6.0.1

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

@@ -1,51 +0,0 @@
-import {
-  ButtonContainer,
-  InnerContainer,
-  IconContainer,
-  ButtonContainerInner,
-} from './styles';
-import FitText from '../FitText';
-import useLocales from '../../../hooks/useLocales';
-
-const Logo = () => (
-  <svg
-    width="27"
-    height="15"
-    viewBox="0 0 27 15"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M9.85405 13.9979C11.3617 13.9979 12.5838 12.7757 12.5838 11.2681C12.5838 9.76047 11.3617 8.5383 9.85405 8.5383C8.34643 8.5383 7.12427 9.76047 7.12427 11.2681C7.12427 12.7757 8.34643 13.9979 9.85405 13.9979Z"
-      fill="currentColor"
-    />
-    <path
-      d="M16.8534 13.9979C18.3611 13.9979 19.5832 12.7757 19.5832 11.2681C19.5832 9.76047 18.3611 8.5383 16.8534 8.5383C15.3458 8.5383 14.1237 9.76047 14.1237 11.2681C14.1237 12.7757 15.3458 13.9979 16.8534 13.9979Z"
-      fill="currentColor"
-    />
-    <path
-      d="M13.4193 0C6.00734 0 -0.00193968 6.12375 4.69662e-07 13.6754H3.42824C3.42824 8.01604 7.866 3.42759 13.4193 3.42759C18.9727 3.42759 23.4104 8.01604 23.4104 13.6754H26.8387C26.84 6.12375 20.8307 0 13.4193 0Z"
-      fill="currentColor"
-    />
-  </svg>
-);
-
-export const ContinueWithAaveButton = ({
-  onClick,
-}: {
-  onClick: () => void;
-}) => {
-  const locales = useLocales();
-  return (
-    <ButtonContainer onClick={onClick}>
-      <ButtonContainerInner>
-        <IconContainer>
-          <Logo />
-        </IconContainer>
-        <InnerContainer>
-          <FitText>{locales.continueWithAave}</FitText>
-        </InnerContainer>
-      </ButtonContainerInner>
-    </ButtonContainer>
-  );
-};

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

@@ -1,80 +0,0 @@
-import { motion } from 'framer-motion';
-import styled from '../../../styles/styled';
-
-export const ButtonContainerInner = styled(motion.div)`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  inset: 0;
-  height: 100%;
-`;
-export const ButtonContainer = styled.button`
-  --color: #ffffff;
-  --background: var(--ck-aave-brand);
-  --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-aave-brand);
-  --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));
-
-  appearance: none;
-  cursor: pointer;
-  user-select: none;
-  min-width: fit-content;
-  width: 100%;
-  display: block;
-  text-align: center;
-  height: 48px;
-  margin: 18px 0 2px;
-  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;
-
-  &:hover {
-    background: var(--hover-background);
-  }
-`;
-
-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;
-`;
-
-export const IconContainer = styled.div`
-  position: relative;
-  display: inline-block;
-  vertical-align: middle;
-  max-width: 27px;
-  max-height: 27px;
-  margin: 0 8px 0 0;
-  svg {
-    display: block;
-    position: relative;
-    max-width: 100%;
-    height: auto;
-  }
-`;

package/src/connectkit/components/Common/CopyToClipboard/CopyToClipboardIcon.tsx

@@ -1,83 +0,0 @@
-import { css } from 'styled-components';
-import styled from './../../../styles/styled';
-import { motion } from 'framer-motion';
-
-import { CopyToClipboardIcon as Icon } from '../../../assets/icons';
-
-const IconContainer = styled(motion.div)<{ $clipboard?: boolean }>`
-  transition: all 220ms cubic-bezier(0.175, 0.885, 0.32, 1.1);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 16px;
-  svg {
-    display: block;
-  }
-  svg,
-  svg path,
-  svg rect {
-    transition: inherit;
-  }
-  svg path:first-child {
-    transform-origin: 50% 50%;
-    fill: var(--bg);
-    stroke: var(--color);
-  }
-  svg rect {
-    transform-origin: 53% 63%;
-    fill: var(--bg);
-    stroke: var(--color);
-  }
-  svg path:last-child {
-    opacity: 0;
-    stroke: var(--bg);
-    transform: translate(11.75px, 10px) rotate(90deg) scale(0.6);
-  }
-  ${(props) =>
-    props.$clipboard
-      ? css`
-          --color: var(--ck-focus-color) !important;
-          --bg: var(--ck-body-background);
-          svg {
-            transition-delay: 0ms;
-            path:first-child {
-              opacity: 0;
-              transform: rotate(-90deg) scale(0.2);
-            }
-            rect {
-              rx: 10px;
-              fill: var(--color);
-              transform: rotate(-90deg) scale(1.45);
-            }
-            path:last-child {
-              transition-delay: 100ms;
-              opacity: 1;
-              transform: translate(7.75px, 9.5px);
-            }
-          }
-        `
-      : css`
-          &:hover {
-          }
-          &:hover:active {
-          }
-        `}
-`;
-
-const CopyToClipboardIcon = ({
-  copied,
-  small,
-}: {
-  copied?: boolean;
-  small?: boolean;
-}) => (
-  <IconContainer $clipboard={copied}>
-    <Icon
-      style={{
-        transform: small ? 'scale(1)' : 'translateX(3px) scale(1.5)',
-        opacity: small || copied ? 1 : 0.3,
-      }}
-    />
-  </IconContainer>
-);
-export default CopyToClipboardIcon;

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

@@ -1,94 +0,0 @@
-import React, { useState } from 'react';
-import styled from './../../../styles/styled';
-import { css } from 'styled-components';
-
-import CopyToClipboardIcon from './CopyToClipboardIcon';
-import Button from '../Button';
-
-const Container = styled.div<{ $disabled?: boolean }>`
-  --color: var(--ck-copytoclipboard-stroke);
-  --bg: var(--ck-body-background);
-  transition: all 220ms cubic-bezier(0.175, 0.885, 0.32, 1.1);
-
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-
-  ${(props) =>
-    props.$disabled
-      ? css`
-          cursor: not-allowed;
-          opacity: 0.4;
-        `
-      : css`
-          &:hover {
-            --color: var(--ck-body-color-muted);
-          }
-        `}
-`;
-const OffsetContainer = styled.div`
-  display: block;
-  position: relative;
-  transition: inherit;
-  svg {
-    position: absolute;
-    left: 100%;
-    display: block;
-    top: -1px;
-    margin: 0;
-    margin-left: 4px;
-  }
-`;
-
-const CopyToClipboard: React.FC<{
-  string?: string;
-  children?: React.ReactNode;
-  variant?: 'button';
-}> = ({ string, children, variant }) => {
-  const [clipboard, setClipboard] = useState(false);
-
-  let timeout: any;
-  const onCopy = () => {
-    if (!string) return;
-    const str = string.trim();
-    if (navigator.clipboard) {
-      navigator.clipboard.writeText(str);
-    } else {
-      // Fallback copy to clipboard if necessary
-      /*
-      const el = document.createElement('textarea');
-      el.value = str;
-      document.body.appendChild(el);
-      el.select();
-      document.execCommand('copy');
-      document.body.removeChild(el);
-      */
-    }
-    setClipboard(true);
-    clearTimeout(timeout);
-    timeout = setTimeout(() => setClipboard(false), 1000);
-  };
-
-  if (variant === 'button')
-    return (
-      <Button
-        disabled={!string}
-        onClick={onCopy}
-        icon={<CopyToClipboardIcon copied={clipboard} />}
-      >
-        {children}
-      </Button>
-    );
-
-  return (
-    <Container onClick={onCopy} $disabled={!string}>
-      <OffsetContainer>
-        {children}
-        <CopyToClipboardIcon copied={clipboard} small />
-      </OffsetContainer>
-    </Container>
-  );
-};
-
-export default CopyToClipboard;

package/src/connectkit/components/Common/CustomQRCode/QRCode.tsx

@@ -1,160 +0,0 @@
-import QRCodeUtil from 'qrcode';
-import React, { ReactElement, useMemo } from 'react';
-
-const generateMatrix = (
-  value: string,
-  errorCorrectionLevel: QRCodeUtil.QRCodeErrorCorrectionLevel
-) => {
-  const arr = Array.prototype.slice.call(
-    QRCodeUtil.create(value, { errorCorrectionLevel }).modules.data,
-    0
-  );
-  const sqrt = Math.sqrt(arr.length);
-  return arr.reduce(
-    (rows, key, index) =>
-      (index % sqrt === 0
-        ? rows.push([key])
-        : rows[rows.length - 1].push(key)) && rows,
-    []
-  );
-};
-
-type Props = {
-  ecl?: QRCodeUtil.QRCodeErrorCorrectionLevel;
-  size?: number;
-  uri: string;
-  clearArea?: boolean;
-  image?: React.ReactNode;
-  imageBackground?: string;
-};
-
-export function QRCode({
-  ecl = 'M',
-  size: sizeProp = 200,
-  uri,
-  clearArea = false,
-  image,
-  imageBackground = 'transparent',
-}: Props) {
-  const logoSize = clearArea ? 76 : 0;
-  const size = sizeProp - 10 * 2;
-
-  const dots = useMemo(() => {
-    const dots: ReactElement[] = [];
-    const matrix = generateMatrix(uri, ecl);
-    const cellSize = size / matrix.length;
-    let qrList = [
-      { x: 0, y: 0 },
-      { x: 1, y: 0 },
-      { x: 0, y: 1 },
-    ];
-
-    qrList.forEach(({ x, y }) => {
-      const x1 = (matrix.length - 7) * cellSize * x;
-      const y1 = (matrix.length - 7) * cellSize * y;
-      for (let i = 0; i < 3; i++) {
-        dots.push(
-          <rect
-            key={`${i}-${x}-${y}`}
-            fill={
-              i % 2 !== 0
-                ? 'var(--ck-qr-background, var(--ck-body-background))'
-                : 'var(--ck-qr-dot-color)'
-            }
-            rx={(i - 2) * -5 + (i === 0 ? 2 : 3)}
-            ry={(i - 2) * -5 + (i === 0 ? 2 : 3)}
-            width={cellSize * (7 - i * 2)}
-            height={cellSize * (7 - i * 2)}
-            x={x1 + cellSize * i}
-            y={y1 + cellSize * i}
-          />
-        );
-      }
-    });
-
-    if (image) {
-      const x1 = (matrix.length - 7) * cellSize * 1;
-      const y1 = (matrix.length - 7) * cellSize * 1;
-      dots.push(
-        <>
-          <rect
-            fill={imageBackground}
-            rx={(0 - 2) * -5 + 2}
-            ry={(0 - 2) * -5 + 2}
-            width={cellSize * (7 - 0 * 2)}
-            height={cellSize * (7 - 0 * 2)}
-            x={x1 + cellSize * 0}
-            y={y1 + cellSize * 0}
-          />
-          <foreignObject
-            width={cellSize * (7 - 0 * 2)}
-            height={cellSize * (7 - 0 * 2)}
-            x={x1 + cellSize * 0}
-            y={y1 + cellSize * 0}
-          >
-            <div style={{ borderRadius: (0 - 2) * -5 + 2, overflow: 'hidden' }}>
-              {image}
-            </div>
-          </foreignObject>
-        </>
-      );
-    }
-
-    const clearArenaSize = Math.floor((logoSize + 25) / cellSize);
-    const matrixMiddleStart = matrix.length / 2 - clearArenaSize / 2;
-    const matrixMiddleEnd = matrix.length / 2 + clearArenaSize / 2 - 1;
-
-    matrix.forEach((row: QRCodeUtil.QRCode[], i: number) => {
-      row.forEach((_: any, j: number) => {
-        if (matrix[i][j]) {
-          // Do not render dots under position squares
-          if (
-            !(
-              (i < 7 && j < 7) ||
-              (i > matrix.length - 8 && j < 7) ||
-              (i < 7 && j > matrix.length - 8)
-            )
-          ) {
-            //if (image && i > matrix.length - 9 && j > matrix.length - 9) return;
-            if (
-              image ||
-              !(
-                i > matrixMiddleStart &&
-                i < matrixMiddleEnd &&
-                j > matrixMiddleStart &&
-                j < matrixMiddleEnd
-              )
-            ) {
-              dots.push(
-                <circle
-                  key={`circle-${i}-${j}`}
-                  cx={i * cellSize + cellSize / 2}
-                  cy={j * cellSize + cellSize / 2}
-                  fill="var(--ck-qr-dot-color)"
-                  r={cellSize / 3}
-                />
-              );
-            }
-          }
-        }
-      });
-    });
-
-    return dots;
-  }, [ecl, size, uri]);
-
-  return (
-    <svg
-      height={size}
-      width={size}
-      viewBox={`0 0 ${size} ${size}`}
-      style={{
-        width: size,
-        height: size,
-      }}
-    >
-      <rect fill="transparent" height={size} width={size} />
-      {dots}
-    </svg>
-  );
-}

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

@@ -1,91 +0,0 @@
-import { CustomQRCodeProps } from './types';
-import {
-  QRCodeContainer,
-  LogoContainer,
-  LogoIcon,
-  QRPlaceholder,
-  QRCodeContent,
-} from './styles';
-
-import Tooltip from '../Tooltip';
-import { AnimatePresence, motion } from 'framer-motion';
-
-import { QRCode } from './QRCode';
-import useWindowSize from '../../../hooks/useWindowSize';
-
-function CustomQRCode({
-  value,
-  image,
-  imageBackground,
-  imagePosition = 'center',
-  tooltipMessage,
-}: CustomQRCodeProps) {
-  const windowSize = useWindowSize();
-
-  const Logo =
-    windowSize.width > 920 && tooltipMessage ? (
-      <Tooltip xOffset={139} yOffset={5} delay={0.1} message={tooltipMessage}>
-        {image}
-      </Tooltip>
-    ) : (
-      image
-    );
-
-  return (
-    <QRCodeContainer>
-      <QRCodeContent>
-        {image && (
-          <LogoContainer>
-            <LogoIcon
-              $wcLogo={imagePosition !== 'center'}
-              style={{
-                background:
-                  imagePosition === 'center' ? imageBackground : undefined,
-              }}
-            >
-              {Logo}
-            </LogoIcon>
-          </LogoContainer>
-        )}
-
-        <AnimatePresence initial={false}>
-          {value ? (
-            <motion.div
-              key={value}
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              exit={{ opacity: 0, position: 'absolute', inset: [0, 0] }}
-              transition={{
-                duration: 0.2,
-              }}
-            >
-              <QRCode
-                uri={value}
-                size={288}
-                ecl="M"
-                clearArea={!!(imagePosition === 'center' && image)}
-              />
-            </motion.div>
-          ) : (
-            <QRPlaceholder
-              initial={{ opacity: 0.1 }}
-              animate={{ opacity: 0.1 }}
-              exit={{ opacity: 0, position: 'absolute', inset: [0, 0] }}
-              transition={{
-                duration: 0.2,
-              }}
-            >
-              <span />
-              <span />
-              <span />
-              <div />
-            </QRPlaceholder>
-          )}
-        </AnimatePresence>
-      </QRCodeContent>
-    </QRCodeContainer>
-  );
-}
-CustomQRCode.displayName = 'CustomQRCode';
-
-export default CustomQRCode;

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

@@ -1,154 +0,0 @@
-import { motion } from 'framer-motion';
-import styled from './../../../styles/styled';
-import { css, keyframes } from 'styled-components';
-
-export const QRCodeContainer = styled(motion.div)`
-  z-index: 3;
-  position: relative;
-  overflow: hidden;
-  height: 0;
-  padding-bottom: 100% !important;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 1px 0 2px;
-  border-radius: var(--ck-qr-border-radius, 24px);
-  background: var(--ck-qr-background, transparent);
-  box-shadow: 0 0 0 1px var(--ck-qr-border-color);
-  backface-visibility: hidden;
-  svg {
-    display: block;
-    max-width: 100%;
-    width: 100%;
-    height: auto;
-  }
-`;
-export const QRCodeContent = styled(motion.div)`
-  position: absolute;
-  inset: 13px;
-  svg {
-    width: 100% !important;
-    height: auto !important;
-  }
-`;
-export const PlaceholderKeyframes = keyframes`
-  0%{ background-position: 100% 0; }
-  100%{ background-position: -100% 0; }
-`;
-export const QRPlaceholder = styled(motion.div)`
-  --color: var(--ck-qr-dot-color);
-  --bg: var(--ck-qr-background, var(--ck-body-background));
-
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  > div {
-    z-index: 4;
-    position: relative;
-    width: 28%;
-    height: 28%;
-    border-radius: 20px;
-    background: var(--bg);
-    box-shadow: 0 0 0 7px var(--bg);
-  }
-  > span {
-    z-index: 4;
-    position: absolute;
-    background: var(--color);
-    border-radius: 12px;
-    width: 13.25%;
-    height: 13.25%;
-    box-shadow: 0 0 0 4px var(--bg);
-    &:before {
-      content: '';
-      position: absolute;
-      inset: 9px;
-      border-radius: 3px;
-      box-shadow: 0 0 0 4px var(--bg);
-    }
-    &:nth-child(1) {
-      top: 0;
-      left: 0;
-    }
-    &:nth-child(2) {
-      top: 0;
-      right: 0;
-    }
-    &:nth-child(3) {
-      bottom: 0;
-      left: 0;
-    }
-  }
-  &:before {
-    z-index: 3;
-    content: '';
-    position: absolute;
-    inset: 0;
-    background: repeat;
-    background-size: 1.888% 1.888%;
-    background-image: radial-gradient(var(--color) 41%, transparent 41%);
-  }
-  &:after {
-    z-index: 5;
-    content: '';
-    position: absolute;
-    inset: 0;
-    transform: scale(1.5) rotate(45deg);
-    background-image: linear-gradient(
-      90deg,
-      rgba(255, 255, 255, 0) 50%,
-      rgba(255, 255, 255, 1),
-      rgba(255, 255, 255, 0)
-    );
-    background-size: 200% 100%;
-    animation: ${PlaceholderKeyframes} 1000ms linear infinite both;
-  }
-`;
-
-export const LogoContainer = styled(motion.div)`
-  z-index: 6;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  transform: translateY(50%) scale(0.9999); // Shifting fix
-`;
-export const LogoIcon = styled(motion.div)<{ $wcLogo?: boolean }>`
-  z-index: 6;
-  position: absolute;
-  left: 50%;
-  overflow: hidden;
-
-  transform: translate(-50%, -50%) scale(0.9999); // Shifting fix
-
-  svg {
-    display: block;
-    position: relative;
-    width: 100%;
-    height: 100%;
-  }
-
-  ${(props) =>
-    props.$wcLogo
-      ? css`
-          width: 29%;
-          height: 20.5%;
-        `
-      : css`
-          width: 28%;
-          height: 28%;
-          border-radius: 17px;
-          &:before {
-            pointer-events: none;
-            z-index: 2;
-            content: '';
-            position: absolute;
-            inset: 0;
-            border-radius: inherit;
-            box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.02);
-          }
-        `}
-`;