@multiplatform.one/connectkit 6.0.0

package/src/assets/wallet.tsx

@@ -0,0 +1,26 @@
+export default ({ ...props }) => {
+  return (
+    <svg
+      aria-hidden="true"
+      width="20"
+      height="19"
+      viewBox="0 0 20 19"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M1.57568 4.60616C1.57568 2.69827 3.12234 1.15161 5.03023 1.15161H15.3939C17.3018 1.15161 18.8484 2.69826 18.8484 4.60616V10.3637C18.8484 12.2716 17.3018 13.8183 15.3939 13.8183H5.03023C3.12234 13.8183 1.57568 12.2716 1.57568 10.3637V4.60616Z"
+        stroke="currentColor"
+        strokeWidth="2"
+      />
+      <path
+        d="M1 4.79293C1 2.435 3.31004 0.770014 5.54697 1.51566L12.4561 3.81869C13.8667 4.2889 14.8182 5.60901 14.8182 7.09596V13.6313C14.8182 15.9892 12.5081 17.6542 10.2712 16.9086L3.36212 14.6056C1.95149 14.1353 1 12.8152 1 11.3283V4.79293Z"
+        fill="var(--ck-body-background)"
+        stroke="currentColor"
+        strokeWidth="2"
+      />
+      <circle cx="10.3863" cy="10.1894" r="1.32574" fill="currentColor" />
+    </svg>
+  );
+};

package/src/assets/wave.tsx

@@ -0,0 +1,34 @@
+export default (
+  <svg
+    aria-hidden="true"
+    width="298"
+    height="188"
+    viewBox="0 0 298 188"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M1 55.2757L21.6438 46.0285C55.5896 30.8228 94.4104 30.8228 128.356 46.0286L169.644 64.5229C203.59 79.7287 242.41 79.7286 276.356 64.5229L297 55.2757M1 44.2118L21.6438 34.9646C55.5896 19.7589 94.4104 19.7589 128.356 34.9646L169.644 53.459C203.59 68.6647 242.41 68.6647 276.356 53.459L297 44.2118M1 33.1477L21.6438 23.9005C55.5896 8.69479 94.4104 8.69479 128.356 23.9005L169.644 42.3949C203.59 57.6006 242.41 57.6006 276.356 42.3949L297 33.1477M1 22.1477L21.6438 12.9005C55.5896 -2.30521 94.4104 -2.30521 128.356 12.9005L169.644 31.3949C203.59 46.6006 242.41 46.6006 276.356 31.3949L297 22.1477M1 66.3398L21.6438 57.0926C55.5896 41.8869 94.4104 41.8869 128.356 57.0926L169.644 75.587C203.59 90.7927 242.41 90.7927 276.356 75.587L297 66.3398M1 77.404L21.6438 68.1568C55.5896 52.9511 94.4104 52.9511 128.356 68.1569L169.644 86.6512C203.59 101.857 242.41 101.857 276.356 86.6512L297 77.404M1 88.4681L21.6438 79.2209C55.5896 64.0152 94.4104 64.0152 128.356 79.2209L169.644 97.7153C203.59 112.921 242.41 112.921 276.356 97.7153L297 88.4681M1 121.66L21.6438 112.413C55.5896 97.2075 94.4104 97.2075 128.356 112.413L169.644 130.908C203.59 146.113 242.41 146.113 276.356 130.908L297 121.66M1 110.596L21.6438 101.349C55.5896 86.1433 94.4104 86.1433 128.356 101.349L169.644 119.843C203.59 135.049 242.41 135.049 276.356 119.843L297 110.596M1 99.5321L21.6438 90.2849C55.5896 75.0792 94.4104 75.0792 128.356 90.2849L169.644 108.779C203.59 123.985 242.41 123.985 276.356 108.779L297 99.5321M1 132.724L21.6438 123.477C55.5896 108.271 94.4104 108.271 128.356 123.477L169.644 141.971C203.59 157.177 242.41 157.177 276.356 141.971L297 132.724M1 143.788L21.6438 134.541C55.5896 119.336 94.4104 119.336 128.356 134.541L169.644 153.036C203.59 168.241 242.41 168.241 276.356 153.036L297 143.788M1 154.853L21.6438 145.605C55.5896 130.4 94.4104 130.4 128.356 145.605L169.644 164.1C203.59 179.305 242.41 179.305 276.356 164.1L297 154.853M1 165.853L21.6438 156.605C55.5896 141.4 94.4104 141.4 128.356 156.605L169.644 175.1C203.59 190.305 242.41 190.305 276.356 175.1L297 165.853"
+      stroke="url(#paint0_linear_1094_2077)"
+      strokeOpacity="0.9"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <defs>
+      <linearGradient
+        id="paint0_linear_1094_2077"
+        x1="1"
+        y1="112.587"
+        x2="297.034"
+        y2="79.6111"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="var(--ck-graphic-wave-stop-01)" />
+        <stop stopColor="var(--ck-graphic-wave-stop-02)" offset="0.239583" />
+        <stop stopColor="var(--ck-graphic-wave-stop-03)" offset="0.515625" />
+        <stop stopColor="var(--ck-graphic-wave-stop-04)" offset="0.739583" />
+        <stop stopColor="var(--ck-graphic-wave-stop-05)" offset="1" />
+      </linearGradient>
+    </defs>
+  </svg>
+);

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

@@ -0,0 +1,14 @@
+import { AlertProps } from "./types";
+import { AlertContainer, IconContainer } from "./styles";
+
+const Alert = ({ children, error, icon }: AlertProps) => {
+  return (
+    <AlertContainer $error={error}>
+      {icon && <IconContainer>{icon}</IconContainer>}
+      <div>{children}</div>
+    </AlertContainer>
+  );
+};
+Alert.displayName = "Alert";
+
+export default Alert;

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

@@ -0,0 +1,53 @@
+import styled from "./../../../styles/styled";
+import { motion } from "framer-motion";
+import defaultTheme from "../../../constants/defaultTheme";
+import { css } from "styled-components";
+
+export const AlertContainer = styled(motion.div)<{ $error?: boolean }>`
+  display: flex;
+  gap: 8px;
+  position: relative;
+  border-radius: 9px;
+  margin: 0 auto;
+  padding: 10px;
+  text-align: left;
+  font-size: 14px;
+  line-height: 17px;
+  font-weight: 400;
+  max-width: 260px;
+  min-width: 100%;
+
+  border-radius: var(--ck-alert-border-radius, 12px);
+  color: var(--ck-alert-color, var(--ck-body-color-muted));
+  background: var(--ck-alert-background, var(--ck-body-background-secondary));
+  box-shadow: var(--ck-alert-box-shadow, var(--ck-body-box-shadow));
+
+  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
+    padding: 16px;
+    font-size: 16px;
+    line-height: 21px;
+    border-radius: 24px;
+    text-align: center;
+  }
+
+  ${($error) => {
+    if ($error)
+      return css`
+        color: #fff;
+        background: var(--ck-body-color-danger, red);
+      `;
+  }}
+`;
+
+export const IconContainer = styled(motion.div)`
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  svg {
+    display: block;
+    width: 100%;
+    height: auto;
+  }
+`;

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

@@ -0,0 +1,5 @@
+export type AlertProps = {
+  children?: React.ReactNode;
+  icon?: React.ReactNode;
+  error?: boolean;
+};

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

@@ -0,0 +1,34 @@
+import React from "react";
+
+import { BrowserIconProps } from "./types";
+import { BrowserIconContainer } from "./styles";
+
+import { detectBrowser } from "../../../utils";
+import browsers from "../../../assets/browsers";
+
+const BrowserIcon = React.forwardRef(
+  ({ browser }: BrowserIconProps, ref: React.Ref<HTMLElement>) => {
+    const currentBrowser = browser ?? detectBrowser();
+
+    let icon;
+    switch (currentBrowser) {
+      case "chrome":
+        icon = browsers.Chrome;
+        break;
+      case "firefox":
+        icon = browsers.FireFox;
+        break;
+      case "edge":
+        icon = browsers.Edge;
+        break;
+      case "brave":
+        //   icon = browsers.Brave;
+        break;
+    }
+    if (!icon) return <></>;
+    return <BrowserIconContainer>{icon}</BrowserIconContainer>;
+  },
+);
+BrowserIcon.displayName = "BrowserIcon";
+
+export default BrowserIcon;

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

@@ -0,0 +1,17 @@
+import { motion } from "framer-motion";
+import styled from "./../../../styles/styled";
+
+export const BrowserIconContainer = styled(motion.div)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  max-width: 32px;
+  max-height: 32px;
+  width: 100%;
+  height: 100%;
+  svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+`;

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

@@ -0,0 +1,3 @@
+export type BrowserIconProps = {
+  browser?: string; // empty string will display current browser
+};

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

@@ -0,0 +1,153 @@
+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}
+      // Never submit a surrounding <form> (e.g. when the modal/buttons are rendered
+      // inside a host login form). Anchors don't take a type.
+      type={href ? undefined : "button"}
+      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/components/Common/Button/styles.ts

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

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