@web3jskit/walletkit 0.0.1

package/src/components/GetWallet/index.tsx

@@ -0,0 +1,88 @@
+import { useTranslation } from 'react-i18next';
+import { useMemo, useState } from 'react';
+import ModalHeader from '../Header/ModalHeader';
+import GetWalletContainer from './style';
+import { chromeIcon } from '../../assets/svg/dataBase';
+import MetamaskQrCode from '../SVGs/metamaskQrCode';
+import { phantomQrCode, tronLinkQrCode } from '../../assets/svg/dataBase';
+
+interface GetWalletProps {
+	wallet: any;
+	onBack?: () => void;
+}
+
+const downloadConfig = {
+	MetaMask: {
+		extension: 'https://chromewebstore.google.com/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn',
+		qrCode: <MetamaskQrCode />
+	},
+	Phantom: {
+		extension: 'https://chromewebstore.google.com/detail/phantom/bfnaelmomeimhlpmgjnjophhpkkoljpa',
+		qrCode: <img src={phantomQrCode} />
+	},
+	TronLink: {
+		extension: 'https://chromewebstore.google.com/detail/tronlink/ibnejdfjmmkpcnlpebklmnkoeoihofec',
+		qrCode: <img src={tronLinkQrCode} />
+	}
+};
+
+export function GetWallet({ wallet, onBack }: GetWalletProps) {
+	const { t } = useTranslation();
+
+	const [showQRCode, setShowQRCode] = useState(false);
+
+	const currentDownloadConfig = useMemo(() => {
+		return downloadConfig[wallet.name as keyof typeof downloadConfig];
+	}, [wallet]);
+
+	return (
+		<GetWalletContainer>
+			<ModalHeader
+				title={`${t('get')} ${wallet.name}`}
+				onBack={() => {
+					if (showQRCode) {
+						return setShowQRCode(false);
+					}
+					onBack && onBack();
+				}}
+			/>
+			{showQRCode ? (
+				<div className="qrCodeBox">
+					<div className="downloadTip">{t('getAppTip')}</div>
+					<div className="qrCode">{currentDownloadConfig.qrCode}</div>
+					<div className="button" onClick={() => setShowQRCode(false)}>
+						{t('continue')}
+					</div>
+				</div>
+			) : (
+				<div className="cardBox">
+					<div className="card">
+						<img src={chromeIcon} alt="Chrome" />
+						<div>
+							<div className="title">{`${wallet.name} ${t('forChrome')}`}</div>
+							<div className="description">{t('chromeDescription')}</div>
+							<div
+								className="button"
+								onClick={() => {
+									window.open(currentDownloadConfig.extension, '_blank');
+								}}
+							>
+								{t('addToChrome')}
+							</div>
+						</div>
+					</div>
+					<div className="card">
+						<img src={wallet.icon} alt={wallet.name} />
+						<div>
+							<div className="title">{`${wallet.name} ${t('forMobile')}`}</div>
+							<div className="description">{t('mobileDescription')}</div>
+							<div className="button" onClick={() => setShowQRCode(true)}>
+								{t('getMobileApp')}
+							</div>
+						</div>
+					</div>
+				</div>
+			)}
+		</GetWalletContainer>
+	);
+}

package/src/components/GetWallet/style.ts

@@ -0,0 +1,116 @@
+import { styled } from 'styled-components';
+
+const GetWalletContainer = styled.div`
+	display: flex;
+	flex-direction: column;
+	font-family: Manrope;
+	color: ${({ theme }) => theme.textColor1};
+	height: 100%;
+
+	.cardBox {
+		display: flex;
+		flex-direction: column;
+		margin: 0 64px 24px;
+		gap: 24px;
+		flex: 1;
+	}
+
+	.card {
+		display: flex;
+		gap: 24px;
+		padding: 40px 60px 0;
+		border: 1px solid ${({ theme }) => theme.borderColor};
+		border-radius: 12px;
+		flex: 1;
+		background: ${({ theme }) => theme.cardBg};
+
+		img {
+			width: 60px;
+			height: 60px;
+			border-radius: 12px;
+		}
+
+		.title {
+			font-size: 14px;
+			font-weight: 700;
+			line-height: 14px;
+			color: ${({ theme }) => theme.textColor};
+		}
+
+		.description {
+			margin-top: 10px;
+			font-size: 12px;
+			font-weight: 500;
+			line-height: 14px;
+			color: ${({ theme }) => theme.textColor3};
+		}
+
+		.button {
+			margin-top: 18px;
+		}
+	}
+
+	.button {
+		display: inline-block;
+		padding: 11px 16px;
+		color: ${({ theme }) => theme.buttonColor};
+		background: ${({ theme }) => theme.buttonBg};
+		font-size: 14px;
+		font-weight: 700;
+		line-height: 14px;
+		text-align: center;
+		border-radius: 8px;
+		box-sizing: border-box;
+		cursor: pointer;
+		height: 36px;
+	}
+
+	.qrCodeBox {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: space-between;
+		flex: 1;
+
+		.downloadTip {
+			text-align: center;
+			font-size: 14px;
+			font-weight: 600;
+			line-height: 18px;
+		}
+
+		.qrCode {
+			margin-top: 24px;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			width: 270px;
+			height: 270px;
+			border-radius: 12px;
+			border: 1px solid ${({ theme }) => theme.borderColor};
+		}
+
+		.button {
+			margin-top: auto;
+			margin-bottom: 24px;
+		}
+	}
+
+	@media (max-width: 768px) {
+		.cardBox {
+			margin: 0 24px 24px;
+
+			.card {
+				padding: 35px 24px;
+			}
+		}
+
+		.qrCodeBox {
+			.button {
+				margin-top: 16px;
+			}
+		}
+	}
+`;
+
+export default GetWalletContainer;

package/src/components/Header/ModalHeader.tsx

@@ -0,0 +1,24 @@
+import { walletKitStore } from '../../stores';
+import ModalHeaderBox from './style';
+import BackArrowSvg from '../SVGs/backArrowSvg';
+import CloseSvg from '../SVGs/closeSvg';
+
+interface ModalHeaderProps {
+	title?: string | null;
+	onBack?: () => void;
+	className?: string;
+}
+
+export default function ModalHeader({ title = '', onBack, className }: ModalHeaderProps) {
+	const useCloseModal = walletKitStore((state: any) => state.closeModal);
+
+	return (
+		<ModalHeaderBox className={className}>
+			{onBack ? <BackArrowSvg className="backBtn" onClick={onBack} /> : <div className="backBtn"></div>}
+			{title ? <div className="title">{title}</div> : <div></div>}
+			<div className="closeBtn" onClick={useCloseModal}>
+				<CloseSvg />
+			</div>
+		</ModalHeaderBox>
+	);
+}

package/src/components/Header/style.ts

@@ -0,0 +1,74 @@
+import { styled } from 'styled-components';
+
+const ModalHeaderBox = styled.div`
+	width: 100%;
+	height: 56px;
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	flex-shrink: 0;
+
+	.backBtn {
+		cursor: pointer;
+		margin-left: 16px;
+
+		path {
+			fill: ${({ theme }) => theme.backArrowColor};
+		}
+	}
+
+	.title {
+		color: ${({ theme }) => theme.textColor};
+		font-size: 16px;
+		font-weight: 700;
+		line-height: 170%;
+		letter-spacing: 0.3px;
+	}
+
+	.closeBtn {
+		margin-right: 16px;
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 24px;
+		height: 24px;
+		border-radius: 12px;
+		transition: all 0.2s;
+		color: ${({ theme }) => theme.closeBtnColor};
+		transform-origin: 50% 50%;
+		background-color: ${({ theme }) => theme.closeBtnBg};
+		z-index: 1;
+
+		&:hover {
+			background-color: ${({ theme }) => theme.closeBtnHoverBg};
+			transform: rotate(180deg);
+			transition: all 0.2s;
+		}
+	}
+
+	&.asideTitle {
+		justify-content: flex-start;
+
+		.closeBtn {
+			display: none;
+		}
+	}
+
+	@media (max-width: 768px) {
+		&.mainTitle {
+			display: none;
+		}
+
+		&.asideTitle {
+			justify-content: space-between;
+
+			.closeBtn {
+				display: flex;
+			}
+		}
+	}
+`;
+
+export default ModalHeaderBox;

package/src/components/Icon/index.tsx

@@ -0,0 +1,120 @@
+import React from 'react';
+import { styled } from 'styled-components';
+
+interface IconImageArg {
+	src: any;
+	width?: number | string;
+	height?: number | string;
+	borderRadius?: string;
+	isRadius?: boolean;
+	className?: string;
+}
+
+interface FoldIconImageArg {
+	src: Array<string>;
+	width?: number | string;
+	height?: number | string;
+	offset?: number;
+	proportion?: number;
+	className?: string;
+	isRadius?: boolean;
+}
+
+const IconImage = styled.img`
+	display: block;
+	transition: all 0.2s;
+`;
+
+const IconImageBox = styled.div`
+	cursor: pointer;
+	display: flex;
+	position: relative;
+`;
+const IconItem = styled.div`
+	cursor: pointer;
+	float: left;
+	display: flex;
+	justify-items: center;
+`;
+
+export const Icon: React.FC<IconImageArg> = ({ src, width, height, className }) => {
+	return (
+		<IconImage
+			className={className}
+			src={src}
+			width={width ? width + 'px' : '24px'}
+			height={height ? height + 'px' : '24px'}
+		/>
+	);
+};
+
+export const Image: React.FC<IconImageArg> = ({ src, width, height, isRadius = true, className, borderRadius }) => {
+	return (
+		<IconImage
+			className={className}
+			src={src}
+			width={width ? width : 'auto'}
+			height={height ? height : 'auto'}
+			style={{ borderRadius: borderRadius ? borderRadius : isRadius ? '50%' : '0' }}
+		/>
+	);
+};
+
+export const FoldIconBox: React.FC<FoldIconImageArg> = ({ src, width, height, offset = 0, isRadius = true }) => {
+	return (
+		<IconImageBox>
+			{src.map((item, index) => {
+				return (
+					<IconItem
+						key={index}
+						style={{
+							zIndex: index + 1,
+							marginLeft: index == 0 ? '0px' : offset + 'px',
+							width: width ? width + 'px' : '24px',
+							height: height ? height + 'px' : '24px'
+						}}
+					>
+						<IconImage
+							src={item}
+							width={width ? width : 24}
+							height={height ? height : 24}
+							style={{ borderRadius: isRadius ? '50%' : '0' }}
+						/>
+					</IconItem>
+				);
+			})}
+		</IconImageBox>
+	);
+};
+export const FoldIconBoxBig: React.FC<FoldIconImageArg> = ({ src, width, height, offset = 0, proportion = 1 }) => {
+	return (
+		<IconImageBox>
+			{src.map((item, index) => {
+				return (
+					<IconItem
+						key={index}
+						style={{
+							zIndex: index + 1,
+							marginLeft: index == 0 ? '0px' : offset + 'px',
+							marginTop: index == 0 ? '0px' : -(offset / 2) + 'px',
+							width: width ? width + 'px' : '24px',
+							height: height ? height + 'px' : '24px'
+						}}
+					>
+						{index === src.length - 1 ? (
+							<IconImage
+								src={item}
+								width={width ? Number(width) * proportion : 24 * proportion}
+								height={height ? Number(height) * proportion : 24 * proportion}
+							/>
+						) : (
+							<IconImage src={item} width={width ? width : 24} height={height ? height : 24} />
+						)}
+					</IconItem>
+				);
+			})}
+		</IconImageBox>
+	);
+};
+
+export default Icon;

package/src/components/Introduce/index.tsx

@@ -0,0 +1,30 @@
+import { useTranslation } from 'react-i18next';
+import ModalHeader from '../Header/ModalHeader';
+import IntroduceContainer from './style';
+
+interface IntroduceProps {
+	onGetWallet?: () => void;
+}
+
+export function Introduce({ onGetWallet }: IntroduceProps) {
+	const { t } = useTranslation();
+
+	return (
+		<>
+			<ModalHeader className="mainTitle" />
+			<IntroduceContainer>
+				<div className="title">{t('introduceQuestion')}</div>
+				<div className="introduce">{t('introduceAnswer')}</div>
+				<div className="detail">{t('introduceDetail')}</div>
+				<div className="footer">
+					<div className="button" onClick={() => onGetWallet?.()}>
+						{t('getWallet')}
+					</div>
+					{/* <span className="more" onClick={() => {}}>
+						{t('learnMore')}
+					</span> */}
+				</div>
+			</IntroduceContainer>
+		</>
+	);
+}

package/src/components/Introduce/style.ts

@@ -0,0 +1,73 @@
+import { styled } from 'styled-components';
+
+const IntroduceContainer = styled.div`
+	display: flex;
+	flex-direction: column;
+	margin: 84px 50px 0 96px;
+	font-family: Manrope;
+	color: ${({ theme }) => theme.textColor1};
+
+	.title {
+		color: ${({ theme }) => theme.blue};
+		font-size: 18px;
+		font-weight: 700;
+		line-height: 18px;
+	}
+
+	.introduce {
+		margin-top: 24px;
+		font-size: 12px;
+		font-weight: 700;
+		line-height: 14px;
+	}
+
+	.detail {
+		margin-top: 16px;
+		font-size: 12px;
+		font-weight: 500;
+		line-height: 14px;
+	}
+
+	.footer {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		max-width: 120px;
+	}
+
+	.button {
+		width: 100%;
+		display: inline-block;
+		margin-top: 32px;
+		padding: 11px 16px;
+		color: ${({ theme }) => theme.buttonColor};
+		background: ${({ theme }) => theme.buttonBg};
+		font-size: 14px;
+		font-weight: 700;
+		line-height: 14px;
+		text-align: center;
+		border-radius: 8px;
+		box-sizing: border-box;
+		cursor: pointer;
+	}
+
+	.more {
+		margin-top: 8px;
+		font-size: 12px;
+		font-style: normal;
+		font-weight: 700;
+		cursor: pointer;
+	}
+
+	@media (max-width: 768px) {
+		padding: 40px 32px 0;
+		margin: 0;
+		align-items: center;
+
+		.detail {
+			text-align: center;
+		}
+	}
+`;
+
+export default IntroduceContainer;

package/src/components/Modal/ConnectModal.tsx

@@ -0,0 +1,131 @@
+import ModalHeader from '../Header/ModalHeader';
+import Modal from './index';
+import { SlotWrapper } from '../../styled';
+import { SupportWallets } from '@web3jskit/wallethelper';
+import { useTranslation } from 'react-i18next';
+import { useCallback, useEffect, useState, type ReactNode } from 'react';
+import { WalletTriggerButton } from '../WalletTriggerButton';
+import { Introduce } from '../Introduce';
+import { WalletList } from '../WalletList';
+import { GetWallet } from '../GetWallet';
+import { Connecting } from '../Connecting';
+import { useWalletKit } from '../../hooks/useWalletKit';
+import { AsideList, ModalAside, ModalContainer, ModalMain } from './style';
+
+interface ModalProps {
+	isOpen: boolean;
+	closeAble?: boolean;
+	slots?: ReactNode[];
+}
+
+enum Step {
+	Introduce = 0,
+	WalletList = 1,
+	GetWallet = 2,
+	Connecting = 3
+}
+
+export function ConnectModal({ isOpen, slots }: ModalProps) {
+	const { t } = useTranslation();
+
+	const { currentChain, getConnectors, currentConnector, connectStatus, closeModal } = useWalletKit();
+
+	const [step, setStep] = useState(Step.Introduce);
+	const [selectedWallet, setSelectedWallet] = useState<any | null>(null);
+	const [connectors, setConnectors] = useState<any[]>([]);
+
+	const requestConnectors = async () => {
+		const list = await getConnectors(currentChain);
+		setConnectors(list);
+	};
+
+	useEffect(() => {
+		if (isOpen) {
+			requestConnectors();
+		} else {
+			setStep(0);
+			setConnectors([]);
+		}
+	}, [isOpen, currentChain]);
+
+	useEffect(() => {
+		switch (connectStatus) {
+			case 'connected':
+				closeModal();
+				break;
+			default:
+				setStep(0);
+				break;
+		}
+	}, [connectStatus]);
+
+	const renderMainByStep = useCallback(() => {
+		switch (step) {
+			case 0:
+				return (
+					<Introduce
+						onGetWallet={() => {
+							setStep(Step.WalletList);
+						}}
+					/>
+				);
+			case 1:
+				return (
+					<WalletList
+						list={SupportWallets}
+						onBack={() => {
+							setStep(0);
+						}}
+						onGetWallet={wallet => {
+							if (wallet.name === 'GelWallet') {
+								window.open('https://gelwallet.com', '_blank');
+								return;
+							}
+							setSelectedWallet(wallet);
+							setStep(Step.GetWallet);
+						}}
+					/>
+				);
+			case 2:
+				return (
+					<GetWallet
+						wallet={selectedWallet}
+						onBack={() => {
+							setStep(Step.WalletList);
+						}}
+					/>
+				);
+			default:
+				return <></>;
+		}
+	}, [step]);
+
+	return (
+		<Modal isOpen={isOpen}>
+			<ModalContainer>
+				<ModalAside className={step !== 0 ? 'hidden' : ''}>
+					<ModalHeader title={t('connectWallet')} className="asideTitle" />
+					<AsideList>
+						{connectors.length ? (
+							connectors.map((connector: any, index: number) => {
+								return <WalletTriggerButton key={index} connector={connector} />;
+							})
+						) : (
+							<></>
+						)}
+						{slots ? (
+							slots.map((Slot: ReactNode, index: number) => {
+								return <SlotWrapper key={index}>{Slot}</SlotWrapper>;
+							})
+						) : (
+							<></>
+						)}
+					</AsideList>
+				</ModalAside>
+				<ModalMain>
+					{connectStatus === 'connecting' ? <Connecting wallet={currentConnector} /> : renderMainByStep()}
+				</ModalMain>
+			</ModalContainer>
+		</Modal>
+	);
+}