@multiplatform.one/connectkit 6.0.0

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

@@ -0,0 +1,74 @@
+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/components/Common/CopyToClipboard/CopyToClipboardIcon.tsx

@@ -0,0 +1,77 @@
+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/components/Common/CopyToClipboard/index.tsx

@@ -0,0 +1,90 @@
+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/components/Common/CustomQRCode/QRCode.tsx

@@ -0,0 +1,156 @@
+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/components/Common/CustomQRCode/index.tsx

@@ -0,0 +1,84 @@
+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/components/Common/CustomQRCode/styles.ts

@@ -0,0 +1,154 @@
+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);
+          }
+        `}
+`;

package/src/components/Common/CustomQRCode/types.ts

@@ -0,0 +1,9 @@
+import React from "react";
+
+export type CustomQRCodeProps = {
+  value?: string;
+  image?: React.ReactNode;
+  imageBackground?: string;
+  imagePosition?: "center" | "bottom right";
+  tooltipMessage?: React.ReactNode | string;
+};

package/src/components/Common/DynamicContainer/index.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { motion } from "framer-motion";
+
+type DynamicContainerProps = { id: string; children?: React.ReactNode };
+
+const DynamicContainer: React.FC<DynamicContainerProps> = ({ id, children }) => {
+  return (
+    <div style={{ position: "relative" }}>
+      <motion.div
+        key={id}
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        exit={{ opacity: 0, position: "absolute", top: 0, left: 0 }}
+        transition={{ duration: 0.3 }}
+      >
+        {children}
+      </motion.div>
+    </div>
+  );
+};
+export default DynamicContainer;

package/src/components/Common/FitText/index.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import useFitText from "../../../hooks/useFitText";
+
+const FitText = ({ children }: { children: React.ReactNode }) => {
+  const [ready, setReady] = React.useState(false);
+  const { fontSize, ref: textRef } = useFitText({
+    logLevel: "none",
+    maxFontSize: 100,
+    minFontSize: 70,
+    onStart: () => setReady(true),
+    onFinish: () => setReady(true),
+  });
+  return (
+    <div
+      ref={textRef}
+      style={{
+        visibility: ready ? "visible" : "hidden",
+        fontSize: `${fontSize}%`,
+        maxHeight: "100%",
+        maxWidth: "100%",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+      }}
+    >
+      {children}
+    </div>
+  );
+};
+FitText.displayName = "FitText";
+
+export default FitText;