@web3jskit/walletkit 0.0.4 → 0.0.5

package/package.json

@@ -1,8 +1,11 @@
 {
 	"name": "@web3jskit/walletkit",
-	"version": "0.0.4",
+	"version": "0.0.5",
 	"description": "walletkit",
 	"license": "MIT",
+	"files": [
+		"dist"
+	],
 	"scripts": {
 		"build": "tsc --build tsconfig.build.json",
 		"watch": "tsc --watch"
@@ -11,7 +14,8 @@
 	"dependencies": {
 		"@reach/dialog": "^0.18.0",
 		"@react-spring/web": "^9.7.1",
-		"@web3jskit/wallethelper": "0.0.4",
+		"@tanstack/react-query": "^5.0.0",
+		"@web3jskit/wallethelper": "0.0.5",
 		"copy-to-clipboard": "^3.3.3",
 		"i18next": "^22.4.13",
 		"i18next-browser-languagedetector": "^7.0.1",
@@ -35,7 +39,6 @@
 		"vitest": "2.0.5"
 	},
 	"peerDependencies": {
-		"@tanstack/react-query": ">=5.0.0",
 		"react": ">=18",
 		"react-dom": ">=18"
 	}

package/src/assets/svg/dataBase.ts

@@ -1,11 +0,0 @@
-export const closeIcon =
-	'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzAwMDAwMCIgdmlld0JveD0iMCAwIDI1NiAyNTYiPgo8cGF0aCBkPSJNMjA1LjY2LDE5NC4zNGE4LDgsMCwwLDEtMTEuMzIsMTEuMzJMMTI4LDEzOS4zMSw2MS42NiwyMDUuNjZhOCw4LDAsMCwxLTExLjMyLTExLjMyTDExNi42OSwxMjgsNTAuMzQsNjEuNjZBOCw4LDAsMCwxLDYxLjY2LDUwLjM0TDEyOCwxMTYuNjlsNjYuMzQtNjYuMzVhOCw4LDAsMCwxLDExLjMyLDExLjMyTDEzOS4zMSwxMjhaIj48L3BhdGg+Cjwvc3ZnPg==';
-
-export const b =
-	'data:image/svg+xml;base64,PHN2ZyB4bLjM0TDEyOCwxMTYuNjlsNjYuMzQtNjYuMzVhOCw4LDAsMCwxLDExLjMyLDExLjMyTDEzOS4zMSwxMjhaIj48L3BhdGg+Cjwvc3ZnPg==';
-
-export const chromeIcon =
-	'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 78 78"><path fill="url(%23a)" d="M71.034 20.5a37.001 37.001 0 0 0-64.084 0l2.22 39.96L71.034 20.5Z"/><path fill="url(%23b)" d="M22.979 48.25 6.958 20.5A37 37 0 0 0 39 76l36.26-37-52.281 9.25Z"/><path fill="url(%23c)" d="M55.021 48.25 39 76a37.001 37.001 0 0 0 32.035-55.5H39l16.021 27.75Z"/><path fill="%23fff" d="M39 57.5a18.5 18.5 0 1 0 0-37 18.5 18.5 0 0 0 0 37Z"/><path fill="%231A73E8" d="M39 53.652a14.65 14.65 0 0 0 13.536-20.26A14.653 14.653 0 1 0 39 53.653Z"/><defs><linearGradient id="a" x1="6.958" x2="71.034" y1="25.125" y2="25.125" gradientUnits="userSpaceOnUse"><stop stop-color="%23D93025"/><stop offset="1" stop-color="%23EA4335"/></linearGradient><linearGradient id="b" x1="43.003" x2="10.961" y1="73.684" y2="18.184" gradientUnits="userSpaceOnUse"><stop stop-color="%231E8E3E"/><stop offset="1" stop-color="%2334A853"/></linearGradient><linearGradient id="c" x1="33.598" x2="65.64" y1="76" y2="20.596" gradientUnits="userSpaceOnUse"><stop stop-color="%23FCC934"/><stop offset="1" stop-color="%23FBBC04"/></linearGradient></defs></svg>';
-
-export const gel =
-	'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAALDSURBVHgB1Zg/aBNRHMe/1kIrRHJDwbSDSQbTrSkKupmDglOhzSDoolMGBzV0cRPpKFJI1w6tVbGLhEC7uIS4KbYmHSNyyVLtYhMSIRVB3++Sd17i3buX1z85P/C7u7z3cu97v/d7v3f3AGd0ZqvMDGa/j9k+de49DwkizPInIMLNjE6fjkwzOzhFMdwOOn3/45lBiLGLitgFGQMUwy3Pxcz7QAw3/Sw7PILDGA6KYSiKGY9omL0zhfPaKALBUau8WW9hY/kD9io1KKCfQdtVffNqO4VL8QuOdduFKu7NvIAKQ1AkoI241k2ENahCMfREpiENzVgoYJ5vPbiKxNyksG2j1sL3/R/mNfGz9QsySA0ZxcvLjyl28xGoQOJoCMulfc+2w5CgHbzdYlYW35nBS531srB0w/Qih7wUmw5JCVKOoa31XUcxxGsmtJdAUM67Qg/F4iFcToQxezfeVd6oHbqKIZqsjtrYvXr74TXTU/QgopQgjKHcl/sYDwctEVvrJXazOnbYtC6XvkEExd2VxEXmmXNIPb5uiaMHmRl75vo/oYe4GGJlsWDGDEfTNOi6jmKxiEql4li22fHERCRoxRSfdUqC7DTrh12/s9ms2Tl1HI1GXcsI0fD2ohzU5A2Zsn5RFpRMJpHJZMyzqKxfpIesFxqWdDrtWdYv0h6SzSNHReihzee7LAdNmdeURz6zTPu1WrfqG2a+6Q7YGHsDsM8kuuZ5jKcOEZ5rmc4W0advbrrWLy28tdIB5RsyN2g9o1cTEZ5D5jVlJ1k251BWPyrKs+yk+P8Eeb0y7FX/LpQ7gviggLZPCDcoqA0IPmcJWvUTczHHTjaW33eV0Yyyr4GcQq7suSAzinRYg3++y1aHOoL8Qo5f5DF47xh2ZRH4bLOB8NV2jN1TximKycNjhnNoR2QN7e234xZhoL2lpzt1/AfLekgsXhgSgQAAAABJRU5ErkJggg==';

package/src/assets/svg/metaMaskWallet.ts

@@ -1,35 +0,0 @@
-import { svg } from 'lit';
-
-export const x = svg`<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="28" height="28" fill="white"/>
-<path d="M24.0891 3.1199L15.3446 9.61456L16.9617 5.7828L24.0891 3.1199Z" fill="#E2761B" stroke="#E2761B" stroke-width="0.0878845" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M3.90207 3.1199L12.5763 9.67608L11.0383 5.7828L3.90207 3.1199Z" fill="#E4761B" stroke="#E4761B" stroke-width="0.0878845" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M20.9429 18.1745L18.6139 21.7426L23.597 23.1136L25.0295 18.2536L20.9429 18.1745Z" fill="#E4761B" stroke="#E4761B" stroke-width="0.0878845" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M2.97929 18.2536L4.40301 23.1136L9.38607 21.7426L7.05713 18.1745L2.97929 18.2536Z" fill="#E4761B" stroke="#E4761B" stroke-width="0.0878845" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M9.10483 12.1456L7.71626 14.2461L12.6642 14.4658L12.4884 9.14877L9.10483 12.1456Z" fill="#E4761B" stroke="#E4761B" stroke-width="0.0878845" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M18.8864 12.1456L15.4589 9.08725L15.3446 14.4658L20.2837 14.2461L18.8864 12.1456Z" fill="#E4761B" stroke="#E4761B" stroke-width="0.0878845" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M9.38606 21.7426L12.3566 20.2925L9.79033 18.2888L9.38606 21.7426Z" fill="#E4761B" stroke="#E4761B" stroke-width="0.0878845" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M15.6347 20.2925L18.6139 21.7426L18.2009 18.2888L15.6347 20.2925Z" fill="#E4761B" stroke="#E4761B" stroke-width="0.0878845" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M18.6139 21.7426L15.6347 20.2925L15.8719 22.2348L15.8456 23.0521L18.6139 21.7426Z" fill="#D7C1B3" stroke="#D7C1B3" stroke-width="0.0878845" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M9.38606 21.7426L12.1544 23.0521L12.1368 22.2348L12.3566 20.2925L9.38606 21.7426Z" fill="#D7C1B3" stroke="#D7C1B3" stroke-width="0.0878845" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M12.1984 17.0056L9.72002 16.2762L11.4689 15.4765L12.1984 17.0056Z" fill="#233447" stroke="#233447" stroke-width="0.0878845" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M15.7928 17.0056L16.5223 15.4765L18.28 16.2762L15.7928 17.0056Z" fill="#233447" stroke="#233447" stroke-width="0.0878845" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M9.38606 21.7426L9.80791 18.1745L7.05712 18.2536L9.38606 21.7426Z" fill="#CD6116" stroke="#CD6116" stroke-width="0.0878845" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M18.1921 18.1745L18.6139 21.7426L20.9429 18.2536L18.1921 18.1745Z" fill="#CD6116" stroke="#CD6116" stroke-width="0.0878845" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M20.2837 14.2461L15.3446 14.4658L15.8016 17.0057L16.5311 15.4765L18.2888 16.2762L20.2837 14.2461Z" fill="#CD6116" stroke="#CD6116" stroke-width="0.0878845" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M9.72002 16.2762L11.4777 15.4765L12.1984 17.0057L12.6642 14.4658L7.71626 14.2461L9.72002 16.2762Z" fill="#CD6116" stroke="#CD6116" stroke-width="0.0878845" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M7.71626 14.2461L9.79033 18.2888L9.72002 16.2762L7.71626 14.2461Z" fill="#E4751F" stroke="#E4751F" stroke-width="0.0878845" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M18.2888 16.2762L18.2009 18.2888L20.2837 14.2461L18.2888 16.2762Z" fill="#E4751F" stroke="#E4751F" stroke-width="0.0878845" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M12.6642 14.4658L12.1984 17.0057L12.7784 20.0025L12.9102 16.0565L12.6642 14.4658Z" fill="#E4751F" stroke="#E4751F" stroke-width="0.0878845" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M15.3446 14.4658L15.1073 16.0477L15.2128 20.0025L15.8016 17.0057L15.3446 14.4658Z" fill="#E4751F" stroke="#E4751F" stroke-width="0.0878845" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M15.8016 17.0056L15.2128 20.0025L15.6347 20.2925L18.2009 18.2888L18.2888 16.2762L15.8016 17.0056Z" fill="#F6851B" stroke="#F6851B" stroke-width="0.0878845" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M9.72002 16.2762L9.79033 18.2888L12.3566 20.2925L12.7784 20.0025L12.1984 17.0056L9.72002 16.2762Z" fill="#F6851B" stroke="#F6851B" stroke-width="0.0878845" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M15.8456 23.0521L15.8719 22.2348L15.6522 22.0414H12.339L12.1368 22.2348L12.1544 23.0521L9.38606 21.7426L10.3528 22.5336L12.3126 23.8958H15.6786L17.6472 22.5336L18.6139 21.7426L15.8456 23.0521Z" fill="#C0AD9E" stroke="#C0AD9E" stroke-width="0.0878845" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M15.6347 20.2925L15.2128 20.0025H12.7784L12.3566 20.2925L12.1368 22.2348L12.339 22.0414H15.6522L15.8719 22.2348L15.6347 20.2925Z" fill="#161616" stroke="#161616" stroke-width="0.0878845" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M24.4583 10.0364L25.2053 6.45072L24.0891 3.1199L15.6347 9.39485L18.8864 12.1456L23.4827 13.4903L24.5022 12.3038L24.0628 11.9874L24.7658 11.3459L24.221 10.924L24.924 10.3879L24.4583 10.0364Z" fill="#763D16" stroke="#763D16" stroke-width="0.0878845" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M2.79472 6.45072L3.54174 10.0364L3.06717 10.3879L3.77024 10.924L3.23415 11.3459L3.93722 11.9874L3.4978 12.3038L4.50847 13.4903L9.10483 12.1456L12.3566 9.39485L3.90207 3.1199L2.79472 6.45072Z" fill="#763D16" stroke="#763D16" stroke-width="0.0878845" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M23.4827 13.4903L18.8864 12.1456L20.2837 14.2461L18.2009 18.2888L20.9429 18.2536H25.0295L23.4827 13.4903Z" fill="#F6851B" stroke="#F6851B" stroke-width="0.0878845" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M9.10484 12.1456L4.50848 13.4903L2.97929 18.2536H7.05713L9.79033 18.2888L7.71626 14.2461L9.10484 12.1456Z" fill="#F6851B" stroke="#F6851B" stroke-width="0.0878845" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M15.3446 14.4658L15.6347 9.39485L16.9705 5.7828H11.0383L12.3566 9.39485L12.6642 14.4658L12.7696 16.0653L12.7784 20.0025H15.2128L15.2304 16.0653L15.3446 14.4658Z" fill="#F6851B" stroke="#F6851B" stroke-width="0.0878845" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
-`;

package/src/components/ConnectButton/ConnectedInfo.tsx

@@ -1,17 +0,0 @@
-import { styled } from 'styled-components';
-import { formatAddress } from '../../utils/formatter';
-
-const WalletInfoButton = styled.button`
-	display: flex;
-	align-items: center;
-	gap: 10px;
-`;
-
-export function ConnectedInfo({ avatar, walletAddress, onClick, className }: any) {
-	return (
-		<WalletInfoButton className={className} onClick={() => onClick()}>
-			{avatar?.text}
-			<span>{formatAddress(walletAddress)}</span>
-		</WalletInfoButton>
-	);
-}

package/src/components/ConnectButton/index.tsx

@@ -1,48 +0,0 @@
-import { useTranslation } from 'react-i18next';
-import { useWalletKit, AppModal } from '../../hooks/useWalletKit';
-import { ConnectedInfo } from './ConnectedInfo';
-import { SupportWallet } from '@web3jskit/wallethelper';
-import { useEffect } from 'react';
-
-interface ConnectButtonProps {
-	text?: string;
-	showAvatar?: boolean;
-	buttonClass?: string;
-	infoClass?: string;
-	supportWallets?: SupportWallet[];
-}
-
-export function ConnectButton(props: ConnectButtonProps) {
-	const { t } = useTranslation();
-
-	const { text = t('connectWallet'), showAvatar = true, buttonClass, infoClass, supportWallets = [] } = props;
-	const { avatar, connectStatus, walletAddress, openModal, setSupportWallets } = useWalletKit();
-
-	useEffect(() => {
-		setSupportWallets(supportWallets);
-	}, []);
-
-	return (
-		<div>
-			{connectStatus === 'connected' ? (
-				<ConnectedInfo
-					className={infoClass}
-					avatar={showAvatar ? avatar : undefined}
-					walletAddress={walletAddress}
-					onClick={() => {
-						openModal(AppModal.InfoModal);
-					}}
-				/>
-			) : (
-				<button
-					className={buttonClass}
-					onClick={() => {
-						openModal(AppModal.ConnectModal);
-					}}
-				>
-					{text}
-				</button>
-			)}
-		</div>
-	);
-}

package/src/components/Connecting/index.tsx

@@ -1,26 +0,0 @@
-import { useTranslation } from 'react-i18next';
-import ModalHeader from '../Header/ModalHeader';
-import SpinSvg from '../SVGs/spinSvg';
-import ConnectingContainer from './style';
-
-interface ConnectingProps {
-	wallet: any;
-}
-
-export function Connecting({ wallet }: ConnectingProps) {
-	const { t } = useTranslation();
-
-	return (
-		<>
-			<ModalHeader className="mainTitle" />
-			<ConnectingContainer>
-				<div className="logo">
-					<img src={wallet?.icon} alt={wallet?.name} />
-				</div>
-				<div className="introduce">{`${t('opening')} ${wallet?.name} ${t('title')}...`}</div>
-				<div className="detail">{t('confirmConnection')}</div>
-				<SpinSvg className="loading" />
-			</ConnectingContainer>
-		</>
-	);
-}

package/src/components/Connecting/style.ts

@@ -1,53 +0,0 @@
-import { styled } from 'styled-components';
-
-const ConnectingContainer = styled.div`
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	margin-top: 72px;
-	font-family: Manrope;
-
-	.logo {
-		img {
-			width: 66px;
-			height: 66px;
-		}
-	}
-
-	.introduce {
-		margin-top: 44px;
-		font-size: 14px;
-		font-weight: 700;
-		line-height: 14px;
-		color: ${({ theme }) => theme.textColor};
-	}
-
-	.detail {
-		margin-top: 30px;
-		font-size: 14px;
-		font-weight: 700;
-		line-height: 14px;
-		color: ${({ theme }) => theme.textColor5};
-	}
-
-	.loading {
-		margin-top: 24px;
-		animation: spin 1s linear infinite;
-
-		path {
-			fill: ${({ theme }) => theme.spinColor};
-		}
-	}
-
-	@keyframes spin {
-		100% {
-			transform: rotate(360deg);
-		}
-	}
-
-	@media (max-width: 768px) {
-		margin-top: 36px;
-	}
-`;
-
-export default ConnectingContainer;

package/src/components/GetWallet/index.tsx

@@ -1,82 +0,0 @@
-import { useTranslation } from 'react-i18next';
-import { useState } from 'react';
-import ModalHeader from '../Header/ModalHeader';
-import GetWalletContainer from './style';
-import { chromeIcon } from '../../assets/svg/dataBase';
-// import QRCode from 'react-qr-code';
-import { QRCodeSVG } from 'qrcode.react';
-
-interface GetWalletProps {
-	wallet: any;
-	onBack?: () => void;
-}
-
-export function GetWallet({ wallet, onBack }: GetWalletProps) {
-	const { t } = useTranslation();
-
-	const [showQRCode, setShowQRCode] = useState(false);
-
-	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">
-						{/* <QRCode value={wallet.downloadUrl} /> */}
-						<QRCodeSVG
-							value={wallet.downloadUrl}
-							size={270}
-							imageSettings={{
-								src: wallet.icon,
-								height: 24,
-								width: 24,
-								excavate: true
-							}}
-						/>
-						,
-					</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(wallet.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

@@ -1,118 +0,0 @@
-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};
-			font-size: 0;
-			overflow: hidden;
-		}
-
-		.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

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

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

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

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