@multiplatform.one/connectkit 6.0.0

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

@@ -0,0 +1,103 @@
+import React, { useEffect, useRef } from "react";
+import { MoreIndicator, ScrollAreaContainer, ScrollContainer } from "./styles";
+import useIsMobile from "../../../hooks/useIsMobile";
+
+const ArrowDown = () => (
+  <svg width="11" height="12" viewBox="0 0 11 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M5.49438 1L5.49438 11M5.49438 11L9.5 7M5.49438 11L1.5 7"
+      stroke="currentColor"
+      strokeWidth="1.75"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+export const ScrollArea = ({
+  children,
+  height,
+  backgroundColor,
+  mobileDirection,
+}: {
+  children: React.ReactNode;
+  height?: number;
+  backgroundColor?: string;
+  mobileDirection?: "horizontal" | "vertical";
+}) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const moreRef = useRef<HTMLDivElement>(null);
+
+  const isMobile = useIsMobile();
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+
+    // if ref is not scrollable, hide the more indicator
+    if (el.scrollHeight > el.clientHeight) {
+      if (moreRef.current) {
+        moreRef.current.classList.remove("hide");
+      }
+    }
+
+    const handleScroll = (e: any) => {
+      const { scrollTop, scrollHeight, clientHeight, scrollLeft, scrollWidth, clientWidth } =
+        e.target;
+
+      if (moreRef.current) {
+        if (scrollTop > 0) {
+          moreRef.current.classList.add("hide");
+        }
+      }
+
+      if (scrollTop === 0 && scrollLeft === 0) {
+        el.classList.add("scroll-start");
+      } else {
+        el.classList.remove("scroll-start");
+      }
+
+      if (scrollHeight - scrollTop === clientHeight && scrollWidth - scrollLeft === clientWidth) {
+        el.classList.add("scroll-end");
+      } else {
+        el.classList.remove("scroll-end");
+      }
+    };
+
+    el.addEventListener("scroll", handleScroll);
+    handleScroll({ target: el });
+
+    return () => {
+      el.removeEventListener("scroll", handleScroll);
+    };
+  }, [ref.current]);
+
+  return (
+    <ScrollContainer>
+      <ScrollAreaContainer
+        ref={ref}
+        $mobile={isMobile}
+        $height={height}
+        $backgroundColor={backgroundColor}
+        $mobileDirection={mobileDirection}
+      >
+        {children}
+      </ScrollAreaContainer>
+      <MoreIndicator
+        ref={moreRef}
+        className="hide"
+        onClick={() => {
+          if (ref.current) {
+            ref.current.scrollTo({
+              top: ref.current.scrollHeight,
+              behavior: "smooth",
+            });
+          }
+        }}
+      >
+        <span>
+          <ArrowDown /> More Available
+        </span>
+      </MoreIndicator>
+    </ScrollContainer>
+  );
+};

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

@@ -0,0 +1,166 @@
+import { css, keyframes } from "styled-components";
+import styled from "../../../styles/styled";
+
+export const ScrollContainer = styled.div`
+  position: relative;
+`;
+const fadeIn = keyframes`
+0%{ opacity:0; }
+100%{ opacity:1; }
+`;
+
+export const MoreIndicator = styled.div`
+  z-index: 9;
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0.75rem;
+  display: flex;
+  justify-content: center;
+
+  transition: opacity 300ms ease;
+
+  span {
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.25rem;
+    padding: 0.3075rem 0.9375rem 0.375rem;
+    border-radius: 6rem;
+    background: var(--ck-tooltip-background);
+    color: var(--ck-tooltip-color);
+    font-weight: 500;
+    font-size: 0.8125rem;
+    letter-spacing: -0.01rem;
+    box-shadow: var(--ck-tooltip-shadow);
+    animation: ${fadeIn} 300ms ease 1000ms both;
+
+    transition: transform 100ms ease;
+
+    &:hover {
+      transform: scale(1.02);
+    }
+    &:active {
+      transform: scale(0.98);
+    }
+    svg {
+      display: block;
+      transform: translateX(-0.1875rem);
+    }
+  }
+
+  &.hide {
+    opacity: 0;
+    pointer-events: none;
+  }
+`;
+
+export const ScrollAreaContainer = styled.div<{
+  $mobile?: boolean;
+  $height?: number;
+  $backgroundColor?: string;
+}>`
+  --bg: ${({ $backgroundColor }) => $backgroundColor || "var(--ck-body-background)"};
+  --fade-height: 1px;
+  position: relative;
+  z-index: 1;
+
+  ${({ $mobile, $height, $mobileDirection }) =>
+    $mobile && $mobileDirection === "horizontal"
+      ? css`
+          overflow-x: scroll;
+          margin: 0 -24px;
+          padding: 0 24px;
+
+          &:before,
+          &:after {
+            pointer-events: none;
+            z-index: 10;
+            content: "";
+            display: block;
+            position: sticky;
+            top: 0;
+            bottom: 0;
+            width: var(--fade-height);
+            background: var(--ck-body-divider-secondary, var(--ck-body-divider));
+            box-shadow: var(--ck-body-divider-box-shadow);
+            transition: opacity 300ms ease;
+          }
+          &:before {
+            left: 0;
+          }
+          &:after {
+            right: 0;
+          }
+
+          &.scroll-start {
+            &:before {
+              opacity: 0;
+            }
+          }
+
+          &.scroll-end {
+            &:after {
+              opacity: 0;
+            }
+          }
+        `
+      : css`
+          max-height: ${$height ? `${$height}px` : "310px"};
+          overflow-y: scroll;
+          padding: 0 10px;
+          margin: calc(var(--fade-height) * -1) -16px 0 -10px;
+
+          &:before,
+          &:after {
+            pointer-events: none;
+            z-index: 10;
+            content: "";
+            display: block;
+            position: sticky;
+            left: 0;
+            right: 0;
+            height: var(--fade-height);
+            background: var(--ck-body-divider-secondary, var(--ck-body-divider));
+            box-shadow: var(--ck-body-divider-box-shadow);
+            transition: opacity 300ms ease;
+          }
+          &:before {
+            top: 0;
+          }
+          &:after {
+            bottom: 0;
+          }
+
+          &.scroll-start {
+            &:before {
+              opacity: 0;
+            }
+          }
+
+          &.scroll-end {
+            &:after {
+              opacity: 0;
+            }
+          }
+        `}
+
+  &::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0);
+    border-radius: 100px;
+  }
+  &:hover::-webkit-scrollbar-thumb {
+    background: var(--ck-body-color-muted);
+  }
+  &::-webkit-scrollbar-thumb:hover {
+    background: var(--ck-body-color-muted-hover);
+  }
+`;

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

@@ -0,0 +1,38 @@
+import { SpinnerContainer } from "./styles";
+
+const transition = {
+  duration: 0.4,
+  ease: [0.175, 0.885, 0.32, 0.98],
+};
+
+export const Spinner = () => (
+  <SpinnerContainer
+    initial={{ opacity: 0, rotate: 180 }}
+    animate={{
+      opacity: 1,
+      rotate: 0,
+    }}
+    exit={{
+      position: "absolute",
+      opacity: 0,
+      rotate: -180,
+      transition: {
+        ...transition,
+      },
+    }}
+    transition={{
+      ...transition,
+      delay: 0.2,
+    }}
+  >
+    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <circle cx="9" cy="9" r="7" stroke="currentColor" strokeOpacity="0.1" strokeWidth="2.5" />
+      <path
+        d="M16 9C16 5.13401 12.866 2 9 2"
+        stroke="currentColor"
+        strokeWidth="2.5"
+        strokeLinecap="round"
+      />
+    </svg>
+  </SpinnerContainer>
+);

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

@@ -0,0 +1,19 @@
+import { motion } from "framer-motion";
+import styled from "./../../../styles/styled";
+import { keyframes } from "styled-components";
+
+const Spin = keyframes`
+  0%{ transform: rotate(0deg); }
+  100%{ transform: rotate(360deg); }
+`;
+export const SpinnerContainer = styled(motion.div)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: ${Spin} 1s linear infinite;
+  svg {
+    display: block;
+    position: relative;
+    animation: ${Spin} 1s ease-in-out infinite;
+  }
+`;

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

@@ -0,0 +1,62 @@
+import React from "react";
+
+import { ThemeContainer, Container } from "./styles";
+
+import { All } from "./../../../types";
+import useMeasure from "react-use-measure";
+
+type ThemedButtonProps = {
+  children?: React.ReactNode;
+  variant?: "primary" | "secondary" | "tertiary";
+  autoSize?: boolean;
+  duration?: number;
+  style?: React.CSSProperties;
+  onClick?: () => void;
+};
+
+export const PlaceholderButton = () => {
+  return <div style={{ height: 40 }} />;
+};
+
+const ThemedButton: React.FC<ThemedButtonProps & All> = ({
+  children,
+  variant = "primary",
+  autoSize = true,
+  duration = 0.3,
+  style,
+}) => {
+  const [contentRef, bounds] = useMeasure();
+  return (
+    <Container
+      className={variant}
+      initial={false}
+      animate={
+        autoSize
+          ? {
+              width: bounds.width > 10 ? bounds.width : "auto",
+            }
+          : undefined
+      }
+      transition={{
+        duration: duration,
+        ease: [0.25, 1, 0.5, 1],
+        delay: 0.01,
+      }}
+      style={style}
+    >
+      <div
+        ref={contentRef}
+        style={{
+          whiteSpace: "nowrap",
+          width: "fit-content",
+          position: "relative",
+          padding: "0 12px",
+        }}
+      >
+        {children}
+      </div>
+    </Container>
+  );
+};
+export default ThemedButton;
+export { ThemeContainer };

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

@@ -0,0 +1,113 @@
+import { motion } from "framer-motion";
+import styled from "./../../../styles/styled";
+
+export const Container = styled(motion.div)<{
+  $variant?: string;
+}>`
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  position: relative;
+  height: 40px;
+  padding: 0;
+  line-height: 0;
+  letter-spacing: -0.2px;
+  font-size: var(--ck-connectbutton-font-size, 16px);
+  font-weight: var(--ck-connectbutton-font-weight, 500);
+  text-align: center;
+  transition: 100ms ease;
+  transition-property: color, background, box-shadow, border-radius;
+
+  color: var(--color);
+  background: var(--background);
+  box-shadow: var(--box-shadow);
+  border-radius: var(--border-radius);
+
+  &.primary {
+    --color: var(--ck-connectbutton-color);
+    --background: var(--ck-connectbutton-background);
+    --box-shadow: var(--ck-connectbutton-box-shadow);
+    --border-radius: var(--ck-connectbutton-border-radius, 12px);
+
+    --hover-color: var(--ck-connectbutton-hover-color, var(--color));
+    --hover-background: var(--ck-connectbutton-hover-background, var(--background));
+    --hover-box-shadow: var(--ck-connectbutton-hover-box-shadow, var(--box-shadow));
+    --hover-border-radius: var(--ck-connectbutton-hover-border-radius, var(--border-radius));
+
+    --active-color: var(--ck-connectbutton-active-color, var(--hover-color));
+    --active-background: var(--ck-connectbutton-active-background, var(--hover-background));
+    --active-box-shadow: var(--ck-connectbutton-active-box-shadow, var(--hover-box-shadow));
+    --active-border-radius: var(
+      --ck-connectbutton-active-border-radius,
+      var(--hover-border-radius)
+    );
+  }
+  &.secondary {
+    --color: var(--ck-connectbutton-balance-color);
+    --background: var(--ck-connectbutton-balance-background);
+    --box-shadow: var(--ck-connectbutton-balance-box-shadow);
+    --border-radius: var(
+      --ck-connectbutton-balance-border-radius,
+      var(--ck-connectbutton-border-radius, 12px)
+    );
+
+    --hover-color: var(--ck-connectbutton-balance-hover-color, var(--color));
+    --hover-background: var(--ck-connectbutton-balance-hover-background, var(--background));
+    --hover-box-shadow: var(--ck-connectbutton-balance-hover-box-shadow, var(--box-shadow));
+    --hover-border-radius: var(
+      --ck-connectbutton-balance-hover-border-radius,
+      var(--border-radius)
+    );
+
+    --active-color: var(--ck-connectbutton-balance-active-color, var(--hover-color));
+    --active-background: var(--ck-connectbutton-balance-active-background, var(--hover-background));
+    --active-box-shadow: var(--ck-connectbutton-balance-active-box-shadow, var(--hover-box-shadow));
+    --active-border-radius: var(
+      --ck-connectbutton-balance-active-border-radius,
+      var(--hover-border-radius)
+    );
+  }
+`;
+
+export const ThemeContainer = styled.button`
+  all: initial;
+  appearance: none;
+  user-select: none;
+  position: relative;
+  padding: 0;
+  margin: 0;
+  background: none;
+  border-radius: var(--ck-border-radius);
+
+  &:disabled {
+    pointer-events: none;
+    opacity: 0.3;
+  }
+
+  display: flex;
+  flex-wrap: nowrap;
+  background: none;
+  cursor: pointer;
+  * {
+    cursor: pointer;
+  }
+  &:hover {
+    ${Container} {
+      color: var(--hover-color, var(--color));
+      background: var(--hover-background, var(--background));
+      box-shadow: var(--hover-box-shadow, var(--box-shadow));
+      border-radius: var(--hover-border-radius, var(--border-radius));
+    }
+  }
+  &:active {
+    ${Container} {
+      color: var(--active-color, var(--hover-color, var(--color)));
+      background: var(--active-background, var(--hover-background, var(--background)));
+      box-shadow: var(--active-box-shadow, var(--hover-box-shadow, var(--box-shadow)));
+      border-radius: var(--active-border-radius, var(--hover-border-radius, var(--border-radius)));
+    }
+  }
+  &:focus-visible {
+    outline: 2px solid var(--ck-aave-brand);
+  }
+`;

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

@@ -0,0 +1,148 @@
+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;