@multiplatform.one/web3 5.0.27

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

@@ -0,0 +1,188 @@
+import React, { useEffect, useState } from 'react';
+import { routes, useContext } from './../../ConnectKit';
+
+import { flattenChildren, isMobile } from './../../../utils';
+
+import defaultTheme from './../../../constants/defaultTheme';
+
+import styled from './../../../styles/styled';
+import { css } from 'styled-components';
+import { motion } from 'framer-motion';
+
+import Tooltip from '../Tooltip';
+import ChainSelectDropdown from '../ChainSelectDropdown';
+import Chain from '../Chain';
+import useLocales from '../../../hooks/useLocales';
+
+import { useAccount, useSwitchChain } from 'wagmi';
+
+const Container = styled(motion.div)``;
+
+const SwitchChainButton = styled(motion.button)`
+  --color: var(
+    --ck-dropdown-button-color,
+    var(--ck-button-primary-color, var(--ck-body-color))
+  );
+  --background: var(
+    --ck-dropdown-button-background,
+    var(--ck-secondary-button-background, var(--ck-body-background-secondary))
+  );
+  --box-shadow: var(
+    --ck-dropdown-button-box-shadow,
+    var(
+      --ck-secondary-button-box-shadow,
+      var(--ck-button-primary-box-shadow),
+      none
+    )
+  );
+
+  --hover-color: var(--ck-dropdown-button-hover-color, var(--color));
+  --hover-background: var(
+    --ck-dropdown-button-hover-background,
+    var(--background)
+  );
+  --hover-box-shadow: var(
+    --ck-dropdown-button-hover-box-shadow,
+    var(--box-shadow)
+  );
+
+  --active-color: var(--ck-dropdown-button-active-color, var(--hover-color));
+  --active-background: var(
+    --ck-dropdown-button-active-background,
+    var(--hover-background)
+  );
+  --active-box-shadow: var(
+    --ck-dropdown-button-active-box-shadow,
+    var(--hover-box-shadow)
+  );
+
+  appearance: none;
+  user-select: none;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-radius: 15px;
+  width: 52px;
+  height: 30px;
+  padding: 2px 6px 2px 3px;
+  font-size: 16px;
+  line-height: 19px;
+  font-weight: 500;
+  text-decoration: none;
+  white-space: nowrap;
+  transform: translateZ(0px);
+
+  transition: 100ms ease;
+  transition-property: transform, background-color, box-shadow, color;
+
+  color: var(--color);
+  background: var(--background);
+  box-shadow: var(--box-shadow);
+
+  svg {
+    position: relative;
+    display: block;
+  }
+
+  ${(props) =>
+    props.disabled
+      ? css`
+          width: auto;
+          padding: 3px;
+          position: relative;
+          left: -22px;
+        `
+      : css`
+          cursor: pointer;
+
+          @media only screen and (min-width: ${defaultTheme.mobileWidth +
+            1}px) {
+            &:hover,
+            &:focus-visible {
+              color: var(--hover-color);
+              background: var(--hover-background);
+              box-shadow: var(--hover-box-shadow);
+            }
+            &:active {
+              color: var(--active-color);
+              background: var(--active-background);
+              box-shadow: var(--active-box-shadow);
+            }
+          }
+        `}
+`;
+
+const ChevronDown = ({ ...props }) => (
+  <svg
+    aria-hidden="true"
+    width="11"
+    height="6"
+    viewBox="0 0 11 6"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M1.5 1L5.5 5L9.5 1"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+const ChainSelector: React.FC = () => {
+  const context = useContext();
+  const [isOpen, setIsOpen] = useState(false);
+  const { chain } = useAccount();
+  const { chains } = useSwitchChain();
+
+  const locales = useLocales({
+    CHAIN: chain?.name,
+  });
+
+  const mobile = isMobile() || window?.innerWidth < defaultTheme.mobileWidth;
+
+  useEffect(() => {
+    if (!context.open) setIsOpen(false);
+  }, [context.open]);
+
+  const disabled = chains.length <= 1;
+
+  return (
+    <>
+      <Container>
+        <ChainSelectDropdown
+          offsetX={-12}
+          open={!mobile && isOpen}
+          onClose={() => setIsOpen(false)}
+        >
+          <SwitchChainButton
+            aria-label={flattenChildren(locales.switchNetworks).toString()}
+            disabled={disabled}
+            onClick={() => {
+              if (mobile) {
+                context.setRoute(routes.SWITCHNETWORKS);
+              } else {
+                setIsOpen(!isOpen);
+              }
+            }}
+          >
+            {disabled ? (
+              <Tooltip message={locales.chainNetwork} xOffset={-6} delay={0.01}>
+                <Chain id={chain?.id} />
+              </Tooltip>
+            ) : (
+              <Chain id={chain?.id} />
+            )}
+            {!disabled && <ChevronDown style={{ top: 1, left: -3 }} />}
+          </SwitchChainButton>
+        </ChainSelectDropdown>
+      </Container>
+    </>
+  );
+};
+
+export default ChainSelector;

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

@@ -0,0 +1,230 @@
+import React, {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react';
+import { useContext } from './../../ConnectKit';
+
+import useMeasure from 'react-use-measure';
+
+import ChainSelectList from './../ChainSelectList';
+
+import Portal from './../Portal';
+import { ResetContainer } from './../../../styles';
+import {
+  DropdownWindow,
+  DropdownOverlay,
+  DropdownContainer,
+  DropdownHeading,
+} from './styles';
+
+import { AnimatePresence } from 'framer-motion';
+import { useThemeContext } from './../../ConnectKitThemeProvider/ConnectKitThemeProvider';
+import FocusTrap from './../../../hooks/useFocusTrap';
+import useLockBodyScroll from './../../../hooks/useLockBodyScroll';
+import useLocales from '../../../hooks/useLocales';
+
+const ChainSelectDropdown: React.FC<{
+  children?: React.ReactNode;
+  open: boolean;
+  onClose: () => void;
+  offsetX?: number;
+  offsetY?: number;
+}> = ({ children, open, onClose, offsetX = 0, offsetY = 8 }) => {
+  const context = useContext();
+  const themeContext = useThemeContext();
+
+  const locales = useLocales();
+
+  const [offset, setOffset] = useState({ x: 0, y: 0 });
+
+  useLockBodyScroll(open);
+
+  const contentRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const listener = (e: KeyboardEvent) => {
+      if (!open) return;
+      if (e.key === 'Escape') onClose();
+
+      if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+        if (!contentRef.current) return;
+        e.preventDefault();
+
+        const focusableEls: any = contentRef.current?.querySelectorAll(`
+            a[href]:not(:disabled),
+            button:not(:disabled),
+            textarea:not(:disabled),
+            input[type="text"]:not(:disabled),
+            input[type="radio"]:not(:disabled),
+            input[type="checkbox"]:not(:disabled),
+            select:not(:disabled)
+          `),
+          firstFocusableEl: any = focusableEls[0],
+          lastFocusableEl: any = focusableEls[focusableEls.length - 1];
+
+        if (e.key === 'ArrowUp') {
+          if (document.activeElement === firstFocusableEl) {
+            lastFocusableEl.focus();
+          } else {
+            let focusItem: any = document?.activeElement?.previousSibling;
+            if (!focusItem) focusItem = lastFocusableEl;
+            while (focusItem.disabled) focusItem = focusItem.previousSibling;
+            focusItem.focus();
+          }
+        } else {
+          if (document.activeElement === lastFocusableEl) {
+            firstFocusableEl.focus();
+          } else {
+            let focusItem: any = document?.activeElement?.nextSibling;
+            if (!focusItem) focusItem = firstFocusableEl;
+            while (focusItem.disabled) focusItem = focusItem.nextSibling;
+            focusItem.focus();
+          }
+        }
+      }
+    };
+    document.addEventListener('keydown', listener);
+    return () => {
+      document.removeEventListener('keydown', listener);
+    };
+  }, [open]);
+
+  const targetRef = useRef<any>(null);
+  const innerRef = useCallback(
+    (node: any) => {
+      if (!node) return;
+      targetRef.current = node;
+      refresh();
+    },
+    [open]
+  );
+  const [ref, bounds] = useMeasure({
+    debounce: 120, // waits until modal transition has finished before measuring
+    offsetSize: true,
+    scroll: true,
+  });
+
+  const refresh = () => {
+    if (
+      !targetRef.current ||
+      bounds.top +
+        bounds.bottom +
+        bounds.left +
+        bounds.right +
+        bounds.height +
+        bounds.width ===
+        0
+    ) {
+      return;
+    }
+
+    let x = bounds.left + offsetX;
+    let y = bounds.top + bounds.height + offsetY;
+
+    targetRef.current.style.left = `${x}px`;
+    targetRef.current.style.top = `${y}px`;
+
+    /*
+    const contentRect = targetRef.current.getBoundingClientRect();
+
+    const w = contentRect.width;
+    const h = contentRect.height;
+
+    if (x + w > window.innerWidth) {
+      x = bounds.left + bounds.width - contentRect.width - offsetX;
+    }
+    if (y + h > window.innerHeight - 24) {
+      y = bounds.top - contentRect.height - offsetY;
+    }
+
+    setOffset({
+      x: x,
+      y: y,
+    });
+    */
+  };
+
+  const useIsomorphicLayoutEffect =
+    typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+  useIsomorphicLayoutEffect(refresh, [targetRef.current, bounds, open]);
+
+  useEffect(refresh, [open, targetRef.current]);
+
+  const onScroll = onClose;
+  const onResize = onClose;
+  useEffect(() => {
+    refresh();
+    window.addEventListener('scroll', onScroll);
+    window.addEventListener('resize', onResize);
+    return () => {
+      window.removeEventListener('scroll', onScroll);
+      window.removeEventListener('resize', onResize);
+    };
+  }, []);
+
+  return (
+    <>
+      <div ref={ref}>{children}</div>
+      <AnimatePresence>
+        {open && (
+          <Portal>
+            <ResetContainer
+              $useTheme={themeContext.theme ?? context.theme}
+              $useMode={themeContext.mode ?? context.mode}
+              $customTheme={themeContext.customTheme ?? context.customTheme}
+            >
+              <FocusTrap>
+                <DropdownWindow ref={contentRef}>
+                  <DropdownOverlay onClick={onClose} />
+                  <DropdownContainer
+                    ref={innerRef}
+                    style={{
+                      left: offset.x,
+                      top: offset.y,
+                    }}
+                    initial={'collapsed'}
+                    animate={'open'}
+                    exit={'collapsed'}
+                    variants={{
+                      collapsed: {
+                        transformOrigin: '0 0',
+                        opacity: 0,
+                        scale: 0.96,
+                        z: 0.01,
+                        y: -4,
+                        x: 0,
+                        transition: {
+                          duration: 0.1,
+                        },
+                      },
+                      open: {
+                        transformOrigin: '0 0',
+                        willChange: 'opacity,transform',
+                        opacity: 1,
+                        scale: 1,
+                        z: 0.01,
+                        y: 0,
+                        x: 0,
+                        transition: {
+                          ease: [0.76, 0, 0.24, 1],
+                          duration: 0.15,
+                        },
+                      },
+                    }}
+                  >
+                    <DropdownHeading>{locales.switchNetworks}</DropdownHeading>
+                    <ChainSelectList />
+                  </DropdownContainer>
+                </DropdownWindow>
+              </FocusTrap>
+            </ResetContainer>
+          </Portal>
+        )}
+      </AnimatePresence>
+    </>
+  );
+};
+
+export default ChainSelectDropdown;

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

@@ -0,0 +1,44 @@
+import styled from './../../../styles/styled';
+import { motion } from 'framer-motion';
+
+export const DropdownWindow = styled(motion.div)`
+  z-index: 2147483647;
+  position: fixed;
+  inset: 0;
+`;
+export const DropdownOverlay = styled(motion.div)`
+  position: absolute;
+  inset: 0;
+`;
+export const DropdownContainer = styled(motion.div)`
+  --shadow: 0px 2px 15px rgba(0, 0, 0, 0.15);
+  --background: var(--ck-dropdown-background, var(--ck-tooltip-background));
+  --border-radius: var(
+    --ck-dropdown-border-radius,
+    var(--ck-tooltip-border-radius, 12px)
+  );
+
+  pointer-events: auto;
+  z-index: 2147483647;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  max-width: fit-content;
+  padding: 14px 16px 16px;
+  color: var(--ck-dropdown-color, var(--ck-tooltip-color));
+  background: var(--background);
+  box-shadow: var(
+    --ck-dropdown-box-shadow,
+    var(--ck-tooltip-shadow, var(--shadow))
+  );
+  border-radius: var(--border-radius);
+`;
+export const DropdownHeading = styled(motion.div)`
+  padding: 0 0 6px;
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 400;
+  user-select: none;
+  color: var(--ck-dropdown-color, var(--ck-tooltip-color));
+`;