@web3jskit/walletkit 0.0.1 → 0.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@web3jskit/walletkit",
-	"version": "0.0.1",
+	"version": "0.0.3",
 	"description": "walletkit",
 	"license": "MIT",
 	"scripts": {
@@ -11,18 +11,18 @@
 	"dependencies": {
 		"@reach/dialog": "^0.18.0",
 		"@react-spring/web": "^9.7.1",
-		"@web3jskit/wallethelper": "^0.0.1",
+		"@web3jskit/wallethelper": "0.0.3",
 		"copy-to-clipboard": "^3.3.3",
 		"i18next": "^22.4.13",
 		"i18next-browser-languagedetector": "^7.0.1",
 		"i18next-xhr-backend": "^3.2.2",
 		"lit": "^3.2.1",
+		"qrcode.react": "^4.2.0",
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",
 		"react-i18next": "^12.2.0",
 		"styled-components": "^6.1.13",
-		"zustand": "^4.3.9",
-		"typescript": "5.5.2"
+		"zustand": "^4.3.9"
 	},
 	"devDependencies": {
 		"@testing-library/jest-dom": "^6.2.0",

package/src/assets/svg/dataBase.ts

@@ -9,9 +9,3 @@ export const chromeIcon =
 
 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==';
-
-export const phantomQrCode =
-	'data:image/png;base64,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';
-
-export const tronLinkQrCode =
-	'data:image/png;base64,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';

package/src/components/ConnectButton/index.tsx

@@ -1,19 +1,26 @@
 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 } = props;
-	const { connectStatus, walletAddress, openModal, avatar } = useWalletKit();
+	const { text = t('connectWallet'), showAvatar = true, buttonClass, infoClass, supportWallets = [] } = props;
+	const { avatar, connectStatus, walletAddress, openModal, setSupportWallets } = useWalletKit();
+
+	useEffect(() => {
+		setSupportWallets(supportWallets);
+	}, []);
 
 	return (
 		<div>

package/src/components/GetWallet/index.tsx

@@ -1,40 +1,21 @@
 import { useTranslation } from 'react-i18next';
-import { useMemo, useState } from 'react';
+import { 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';
+// import QRCode from 'react-qr-code';
+import { QRCodeSVG } from 'qrcode.react';
 
 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
@@ -49,7 +30,20 @@ export function GetWallet({ wallet, onBack }: GetWalletProps) {
 			{showQRCode ? (
 				<div className="qrCodeBox">
 					<div className="downloadTip">{t('getAppTip')}</div>
-					<div className="qrCode">{currentDownloadConfig.qrCode}</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>
@@ -64,7 +58,7 @@ export function GetWallet({ wallet, onBack }: GetWalletProps) {
 							<div
 								className="button"
 								onClick={() => {
-									window.open(currentDownloadConfig.extension, '_blank');
+									window.open(wallet.extension, '_blank');
 								}}
 							>
 								{t('addToChrome')}

package/src/components/GetWallet/style.ts

@@ -88,6 +88,8 @@ const GetWalletContainer = styled.div`
 			height: 270px;
 			border-radius: 12px;
 			border: 1px solid ${({ theme }) => theme.borderColor};
+			font-size: 0;
+			overflow: hidden;
 		}
 
 		.button {

package/src/components/Modal/ConnectModal.tsx

@@ -3,7 +3,7 @@ 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 { useCallback, useEffect, useMemo, useState, type ReactNode } from 'react';
 import { WalletTriggerButton } from '../WalletTriggerButton';
 import { Introduce } from '../Introduce';
 import { WalletList } from '../WalletList';
@@ -39,6 +39,26 @@ export function ConnectModal({ isOpen, slots }: ModalProps) {
 		setConnectors(list);
 	};
 
+	const connectorsGroupByType = useMemo(() => {
+		const result = connectors.reduce((acc, connector) => {
+			if (!acc[connector.connectorType]) {
+				acc[connector.connectorType] = [];
+			}
+			acc[connector.connectorType].push(connector);
+			return acc;
+		}, {});
+		return result;
+	}, [connectors]);
+
+	const sortedKeys = useMemo(() => {
+		const keys = Object.keys(connectorsGroupByType);
+		const sortedKeys = keys.sort((a, b) => {
+			const order = ['installed', 'run', 'more'];
+			return order.indexOf(a) - order.indexOf(b);
+		});
+		return sortedKeys;
+	}, [connectorsGroupByType]);
+
 	useEffect(() => {
 		if (isOpen) {
 			requestConnectors();
@@ -77,8 +97,8 @@ export function ConnectModal({ isOpen, slots }: ModalProps) {
 							setStep(0);
 						}}
 						onGetWallet={wallet => {
-							if (wallet.name === 'GelWallet') {
-								window.open('https://gelwallet.com', '_blank');
+							if (wallet.name === 'Gel Wallet') {
+								window.open(wallet.webUrl, '_blank');
 								return;
 							}
 							setSelectedWallet(wallet);
@@ -106,13 +126,17 @@ export function ConnectModal({ isOpen, slots }: ModalProps) {
 				<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} />;
-							})
-						) : (
-							<></>
-						)}
+						{sortedKeys.map(connectorType => {
+							return (
+								<div className="typeBox" key={connectorType}>
+									<div className={`typeHeader ${connectorType}`}>{t(connectorType)}</div>
+									{connectorsGroupByType[connectorType].map((connector: any) => {
+										return <WalletTriggerButton key={connectorType + connector.name} connector={connector} />;
+									})}
+								</div>
+							);
+						})}
+
 						{slots ? (
 							slots.map((Slot: ReactNode, index: number) => {
 								return <SlotWrapper key={index}>{Slot}</SlotWrapper>;

package/src/components/Modal/style.ts

@@ -34,14 +34,44 @@ export const ModalAside = styled.div`
 `;
 
 export const AsideList = styled.div`
-	overflow: auto;
+	overflow-y: auto;
+	overflow-x: hidden;
 	display: flex;
 	flex-direction: column;
 	gap: 16px;
-	padding: 0 20px;
+	padding: 0 20px 20px;
+
+	.typeBox {
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+	}
+
+	.typeHeader {
+		font-size: 14px;
+		line-height: 14px;
+		font-weight: 700;
+		color: ${({ theme }) => theme.gray};
+		margin-bottom: 14px;
+
+		&.installed {
+			color: ${({ theme }) => theme.blue};
+		}
+	}
 
 	@media (max-width: 768px) {
+		overflow-x: auto;
+		overflow-y: hidden;
 		flex-direction: row;
+		padding: 0 20px;
+
+		.typeBox {
+			flex-direction: row;
+
+			.typeHeader {
+				display: none;
+			}
+		}
 
 		// &::-webkit-scrollbar {
 		// 	display: none;

package/src/components/Text/index.tsx

@@ -18,13 +18,21 @@ interface TextOrg {
 }
 
 const TextStyled = styled.div`
-	color: ${({ theme }) => theme.textColor2};
-	font-family: 'Manrope', serif;
-	height: inherit;
-	left: inherit;
-	white-space: pre-wrap;
-	//word-break: break-all;
+	display: flex;
 	align-items: center;
+
+	.text {
+		max-width: 120px;
+		color: ${({ theme }) => theme.textColor2};
+		font-family: 'Manrope';
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+
+		@media (max-width: 768px) {
+			white-space: wrap;
+		}
+	}
 `;
 
 export const Text: React.FC<TextOrg> = ({
@@ -50,7 +58,7 @@ export const Text: React.FC<TextOrg> = ({
 			}}
 		>
 			{prefix ? <span>{prefix}</span> : <></>}
-			<span dangerouslySetInnerHTML={{ __html: text }} />
+			<span className="text" dangerouslySetInnerHTML={{ __html: text }} />
 			{suffix ? <span>{suffix}</span> : <></>}
 		</TextStyled>
 	);

package/src/components/WalletList/index.tsx

@@ -1,6 +1,7 @@
 import { useTranslation } from 'react-i18next';
 import ModalHeader from '../Header/ModalHeader';
 import WalletListContainer from './style';
+import { useMemo } from 'react';
 
 interface WalletListProps {
 	list?: any[];
@@ -11,11 +12,17 @@ interface WalletListProps {
 export function WalletList({ list, onBack, onGetWallet }: WalletListProps) {
 	const { t } = useTranslation();
 
+	// random three wallets in the list
+	const randomList = useMemo(() => {
+		const randomList = list?.sort(() => Math.random() - 0.5).slice(0, 3);
+		return randomList;
+	}, [list]);
+
 	return (
 		<WalletListContainer>
 			<ModalHeader title={t('getWalletTitle')} onBack={onBack} />
 			<div className="walletList">
-				{list?.map((item, index) => (
+				{randomList?.map((item, index) => (
 					<div className="walletItem" key={index + item.name}>
 						<img src={item.icon} alt={item.name} />
 						<div>

package/src/components/WalletList/style.ts

@@ -10,9 +10,10 @@ const WalletListContainer = styled.div`
 	.walletList {
 		display: flex;
 		flex-direction: column;
-		padding: 10px 20px 0;
+		padding: 10px 20px;
 		gap: 20px;
 		flex: 1;
+		overflow: auto;
 
 		.walletItem {
 			display: flex;

package/src/components/WalletTriggerButton/index.tsx

@@ -18,7 +18,7 @@ export const WalletTriggerButton: React.FC<IWalletTriggerButton> = ({ connector
 	const { connectStatus } = useWalletKit();
 
 	const disabled = useMemo(() => {
-		return connectStatus === 'connected' || connectStatus === 'connecting';
+		return connectStatus === 'connected';
 	}, [connectStatus]);
 
 	const handleConnect = async () => {

package/src/components/WalletTriggerButton/style.ts

@@ -2,7 +2,7 @@ import { styled } from 'styled-components';
 
 const WalletItem = styled.div`
 	display: flex;
-	padding: 12px;
+	padding: 4px 12px;
 	border-radius: 12px;
 	cursor: pointer;
 	flex-shrink: 0;
@@ -10,6 +10,8 @@ const WalletItem = styled.div`
 	user-select: none;
 
 	img {
+		width: 28px;
+		height: 28px;
 		border-radius: 6px;
 	}
 

package/src/hooks/useWalletKit.ts

@@ -2,6 +2,7 @@ import { walletHelperStore, type WalletHelperState } from '@web3jskit/wallethelp
 import { walletKitStore, AppModal, type WalletKitState } from '../stores';
 
 type WalletKit = WalletHelperState & WalletKitState;
+type WalletKitKeys = keyof WalletKit;
 
 // use for react component
 export const useWalletKit = () => {
@@ -22,17 +23,20 @@ export const useWalletKit = () => {
 // use for pure js
 export const getWalletKit = () => {
 	const walletHelperStates = walletHelperStore.getState();
-
 	const walletKitStates = walletKitStore.getState();
 
-	// const provider = currentConnector?.provider || null;
-
-	return {
+	const exportStates = {
 		...walletHelperStates,
-		// provider,
-
 		...walletKitStates
 	} as WalletKit;
+	// only export get/set methods
+	Object.keys(exportStates).forEach((key: string) => {
+		if (typeof exportStates[key as WalletKitKeys] !== 'function') {
+			delete exportStates[key as WalletKitKeys];
+		}
+	});
+
+	return exportStates as WalletKit;
 };
 
 export { AppModal };

package/src/index.ts

@@ -1,3 +1,4 @@
+export { SupportWallet } from '@web3jskit/wallethelper';
 export * from './components/WalletKitProvider';
 export * from './components/ConnectButton';
 export * from './types/configType';

package/src/locals/languages/en.json

@@ -23,5 +23,8 @@
 	"confirmConnection": "Confirm connection in extension",
 	"copyAddress": "Copy Address",
 	"copied": "Copied!",
-	"disConnect": "Disconnect"
+	"disConnect": "Disconnect",
+	"installed": "Installed",
+	"run": "Run",
+	"more": "More"
 }

package/src/locals/languages/zh.json

@@ -23,5 +23,8 @@
 	"confirmConnection": "在扩展程序中确认连接",
 	"copyAddress": "复制地址",
 	"copied": "已复制！",
-	"disConnect": "断开连接"
+	"disConnect": "断开连接",
+	"installed": "已安装",
+	"run": "流行",
+	"more": "更多"
 }

package/src/stores/index.ts

@@ -16,11 +16,11 @@ export interface WalletKitState {
 	chains: Array<any>;
 	setChains: (chains: Array<any>) => void;
 
-	language: Locals | null;
+	language: Locals;
 	setLanguage: (language: Locals) => void;
 
-	theme: Theme | null;
-	toggleTheme: (theme: Theme) => void;
+	theme: Theme;
+	toggleTheme: () => void;
 
 	modalType: AppModal | null;
 	openModal: (modal: AppModal) => void;
@@ -32,19 +32,20 @@ export interface WalletKitState {
 
 export const walletKitStore = create<WalletKitState>()(
 	persist(
-		set => ({
+		(set, get) => ({
 			chains: [],
 			setChains(chains: Array<any>) {
 				return set(() => ({ chains }));
 			},
 
-			language: null,
+			language: 'en',
 			setLanguage(language: Locals) {
 				return set(() => ({ language }));
 			},
 
-			theme: null,
-			toggleTheme(theme: Theme) {
+			theme: 'lightMode',
+			toggleTheme() {
+				const { theme } = get();
 				return set(() => ({ theme: theme === 'darkMode' ? 'lightMode' : 'darkMode' }));
 			},