import { PopupHeader } from "@/components/Popup"; import { TouchMoveDistance, useTouchMoveDistance, } from "@/hooks/useTouchMoveDistance"; import clsx from "clsx"; import React, { FC, forwardRef, memo, useCallback, useEffect, useRef, useState, } from "react"; import ArrowUp from "../../../assets/images/arrow_up.svg"; import ArrowUpWide from "../../../assets/images/arrow_up_wide.svg"; import Popup from "../../Popup/Popup"; import { WalletItemProps } from "../type"; import { cn } from "../utils"; import { isMobileDevice } from "../utils/device"; import InputSearch from "./InputSearch"; import WalletItem from "./WalletItem"; import "./WalletSelector.css"; import { FULLSCREEN_POSITION, SECOND_LEVEL_POSITION, useScrollState, } from "./hooks/useScrollState"; import Divider from "./Divider"; import ArrowRight from '../../../assets/images/arrow_up_wide_line.svg' interface PropsType { className?: string; grid?: boolean; style?: React.CSSProperties; walletList: WalletItemProps[]; handleClick: (item: WalletItemProps, index: number) => void; loadingIconKey?: string; socialsFirst?: boolean } const WalletListComp = ( { className, grid, style, walletList, handleClick, loadingIconKey, }: PropsType, ref: any, ) => { const oneLine = walletList.length <= 4; if (oneLine && !grid) return (
{walletList.map((option, index) => { return ( { handleClick(option, index); }} isLoading={loadingIconKey === option.key} /> ); })}
); return (
{walletList.map((option, index) => { return ( { handleClick(option, index); }} isLoading={loadingIconKey === option.key} /> ); })}
); }; export const WalletList = forwardRef(WalletListComp); const WalletSelector: FC = ({ walletList, handleClick, loadingIconKey, socialsFirst }) => { const [opened, setOpened] = useState(false); const [fullScreen, setFullScreen] = useState(false); const [keyWord, setKeyWord] = useState(""); const firstWalletList = walletList.slice(0, 4); const isMobile = isMobileDevice(); const walletListRef = useRef(null); const ref = useRef(null); const filterWalletList = walletList.filter((item) => item.name.toLowerCase().startsWith(keyWord.toLowerCase()), ); const showHeader = walletList.length > 4; const canFullScreen = walletList.length > 8; const onClose = useCallback(() => { setOpened(false); if (fullScreen) setFullScreen(false); if (walletListRef?.current) walletListRef.current.scrollTop = 0; }, [fullScreen]); const { scrollToFullScreen, scrollToSecondLevel } = useScrollState( ref, { fullScreen, canFullScreen }, { setFullScreen, onClose, }, ); const onOpen = useCallback(() => { setOpened(true); }, []); useEffect(() => { if (opened) { socialsFirst && scrollToSecondLevel(); } }, [opened, scrollToSecondLevel, socialsFirst]); const headerRef = useRef(null); const handleContainerTouchEnd = useCallback( (touchMoveDistance: TouchMoveDistance) => { const canUnfold = walletList.length > 4; if (canUnfold && touchMoveDistance.y < -1) onOpen(); }, [onOpen, walletList.length], ); useTouchMoveDistance(headerRef, { enable: isMobile, handleTouchEnd: handleContainerTouchEnd, }); return (
{socialsFirst && showHeader && (
{ onOpen(); }} /> )}
{!socialsFirst ? ( Other wallets } /> ) : null} ) : (
{ if (!canFullScreen) { onClose(); } else { scrollToFullScreen(); } }} /> ) } bodyClassName={ socialsFirst ? "uikit-popup-enable-scroll" : "sm:uikit-m-auto sm:uikit-w-auto sm:uikit-animate-none sm:uikit-min-w-[375px]" } bodyStyle={{ top: !socialsFirst ? "0px" : canFullScreen ? `${FULLSCREEN_POSITION}px` : `${SECOND_LEVEL_POSITION}px`, height: canFullScreen || !socialsFirst ? "100%" : "364px", }} > {fullScreen || !socialsFirst ? ( <> setKeyWord(kw)} /> {filterWalletList.length > 0 ? ( ) : ( )} ) : ( <>
Select your wallet
)}
{opened && !fullScreen &&
}
); }; export const Empty = () => { return (
No Wallet found
); }; export function WalletIcon(props: React.SVGProps) { return ( ); } const Header = ({ className, allLen, renderLen, onClick, }: { className?: string; allLen: number; renderLen: number; onClick?: (needFold?: boolean) => void; }) => { const diff = Math.ceil((allLen - renderLen) / 4); const isMobile = isMobileDevice(); if (isMobile) return ; const needDoubleUnfold = renderLen <= 4 && diff >= 2; const needFold = allLen > 4 && allLen <= 8 && renderLen === 8; return (
{ onClick?.(needFold); }} > {needDoubleUnfold ? ( ) : ( )}
); }; const Rounded = ({ onClick }: { onClick?: () => void }) => { return (
{ onClick?.(); }} className="uikit-py-2 uikit-flex uikit-items-center uikit-justify-center" >
); }; export const Footer = () => { return (
Powered by
); }; export default memo(WalletSelector); const PowerBy = ( props: React.SVGProps & { className?: string }, ) => { return ( ); };