@multiplatform.one/web3 5.1.0 → 6.0.0

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

@@ -1,118 +0,0 @@
-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/connectkit/components/Common/ScrollArea/styles.ts

@@ -1,173 +0,0 @@
-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/connectkit/components/Common/Spinner/index.tsx

@@ -1,51 +0,0 @@
-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/connectkit/components/Common/Spinner/styles.ts

@@ -1,19 +0,0 @@
-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/connectkit/components/Common/ThemedButton/index.tsx

@@ -1,62 +0,0 @@
-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/connectkit/components/Common/ThemedButton/styles.ts

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