@web3jskit/walletkit 0.0.1

package/src/components/WalletKitProvider/index.tsx

@@ -0,0 +1,40 @@
+import { type ReactNode } from 'react';
+import { ChainProvider } from './ChainProvider';
+
+import { ConnectModal } from '../Modal/ConnectModal';
+import { walletKitStore, AppModal } from '../../stores';
+import { I18nProvider } from './I18nProvider';
+import type { Locals, Theme } from '../../types/configType';
+import { WalletKitThemeProvider } from './ThemeProvider';
+import { ThemedGlobalStyle } from '../../theme';
+import { WalletInfoModal } from '../Modal/WalletInfoModal';
+
+interface IWalletKitProvider {
+	children: ReactNode;
+	language?: Locals;
+	defaultChain?: number | any;
+	theme?: Theme;
+	connectButtonSlots?: ReactNode[];
+}
+
+export function WalletKitProvider({ children, language, defaultChain, theme, connectButtonSlots }: IWalletKitProvider) {
+	// console.log('theme::', theme);
+	// console.log('language::', language);
+	// console.log('defaultChain::', defaultChain);
+
+	const modalType = walletKitStore((state: any) => state.modalType);
+	return (
+		<>
+			<ChainProvider defaultChain={defaultChain}>
+				<I18nProvider language={language}>
+					<WalletKitThemeProvider theme={theme}>
+						<ThemedGlobalStyle />
+						<ConnectModal slots={connectButtonSlots} isOpen={modalType === AppModal.ConnectModal} />
+						<WalletInfoModal isOpen={modalType === AppModal.InfoModal} />
+						<div>{children}</div>
+					</WalletKitThemeProvider>
+				</I18nProvider>
+			</ChainProvider>
+		</>
+	);
+}

package/src/components/WalletList/index.tsx

@@ -0,0 +1,35 @@
+import { useTranslation } from 'react-i18next';
+import ModalHeader from '../Header/ModalHeader';
+import WalletListContainer from './style';
+
+interface WalletListProps {
+	list?: any[];
+	onBack?: () => void;
+	onGetWallet?: (wallet: any) => void;
+}
+
+export function WalletList({ list, onBack, onGetWallet }: WalletListProps) {
+	const { t } = useTranslation();
+
+	return (
+		<WalletListContainer>
+			<ModalHeader title={t('getWalletTitle')} onBack={onBack} />
+			<div className="walletList">
+				{list?.map((item, index) => (
+					<div className="walletItem" key={index + item.name}>
+						<img src={item.icon} alt={item.name} />
+						<div>
+							<div className="name">{item.name}</div>
+							{item.name !== 'GelWallet' && <div className="description">{t('getWalletTips')}</div>}
+						</div>
+						<div className="button" onClick={() => onGetWallet?.(item)}>
+							{t('getWallet')}
+						</div>
+					</div>
+				))}
+			</div>
+			<div className="question">{t('getWalletQuestion')}</div>
+			<div className="answer">{t('getWalletAnswer')}</div>
+		</WalletListContainer>
+	);
+}

package/src/components/WalletList/style.ts

@@ -0,0 +1,101 @@
+import { styled } from 'styled-components';
+
+const WalletListContainer = styled.div`
+	display: flex;
+	flex-direction: column;
+	font-family: Manrope;
+	color: ${({ theme }) => theme.textColor1};
+	height: 100%;
+
+	.walletList {
+		display: flex;
+		flex-direction: column;
+		padding: 10px 20px 0;
+		gap: 20px;
+		flex: 1;
+
+		.walletItem {
+			display: flex;
+			align-items: center;
+		}
+
+		img {
+			width: 28px;
+			height: 28px;
+			flex-shrink: 0;
+			margin-right: 10px;
+			border-radius: 6px;
+		}
+
+		.name {
+			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 {
+			display: inline-block;
+			margin-left: auto;
+			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;
+		}
+	}
+
+	.question {
+		margin-left: 42px;
+		margin-bottom: 10px;
+		font-size: 16px;
+		font-weight: 700;
+		line-height: 16px;
+		color: ${({ theme }) => theme.textColor4};
+	}
+
+	.answer {
+		margin-left: 42px;
+		margin-bottom: 47px;
+		font-size: 16px;
+		font-weight: 400;
+		line-height: 16px;
+		color: ${({ theme }) => theme.textColor4};
+	}
+
+	@media (max-width: 768px) {
+		.walletList {
+			padding: 10px 28px 0;
+			min-height: 237px;
+			max-height: 237px;
+			overflow: auto;
+
+			.button {
+				font-size: 12px;
+			}
+		}
+
+		.question {
+			margin: 10px 25px;
+		}
+
+		.answer {
+			margin: 0 25px 75px;
+		}
+	}
+`;
+export default WalletListContainer;

package/src/components/WalletTriggerButton/index.tsx

@@ -0,0 +1,50 @@
+import React, { useMemo } from 'react';
+import Text from '../Text';
+import { FlexBox } from '../../styled';
+import Icon from '../Icon';
+import useSlotsWalletStore from '../../stores/SlotsWalletStore';
+import type { ISlotsConnector } from '../../types/slotsType';
+import WalletItem from './style';
+import { useWalletKit } from '../../hooks/useWalletKit';
+
+export interface IWalletTriggerButton {
+	connector: any;
+}
+export interface IWalletSlotTriggerButton {
+	slotsConnector: ISlotsConnector;
+}
+
+export const WalletTriggerButton: React.FC<IWalletTriggerButton> = ({ connector }) => {
+	const { connectStatus } = useWalletKit();
+
+	const disabled = useMemo(() => {
+		return connectStatus === 'connected' || connectStatus === 'connecting';
+	}, [connectStatus]);
+
+	const handleConnect = async () => {
+		if (disabled) return;
+		console.log('connector', connector);
+		await connector.connect();
+	};
+	return (
+		<WalletItem onClick={handleConnect} className={disabled ? 'disabled' : ''}>
+			<FlexBox className={'gap-10'}>
+				<Icon src={connector.icon || ''} />
+				<Text text={connector.name} />
+			</FlexBox>
+		</WalletItem>
+	);
+};
+
+export const WalletSlotTriggerButton: React.FC<IWalletSlotTriggerButton> = ({ slotsConnector }) => {
+	const useAddConnector = useSlotsWalletStore((state: any) => state.addConnector);
+	useAddConnector(slotsConnector);
+	return (
+		<WalletItem>
+			<FlexBox className={'gap-10'}>
+				<Icon src={slotsConnector.walletIcon} />
+				<Text text={slotsConnector.walletName} />
+			</FlexBox>
+		</WalletItem>
+	);
+};

package/src/components/WalletTriggerButton/style.ts

@@ -0,0 +1,51 @@
+import { styled } from 'styled-components';
+
+const WalletItem = styled.div`
+	display: flex;
+	padding: 12px;
+	border-radius: 12px;
+	cursor: pointer;
+	flex-shrink: 0;
+	box-sizing: border-box;
+	user-select: none;
+
+	img {
+		border-radius: 6px;
+	}
+
+	&:hover {
+		background: ${({ theme }) => theme.itemHoverBg};
+	}
+
+	&.disabled {
+		pointer-events: none;
+		background: none;
+	}
+
+	@media (max-width: 768px) {
+		width: 86px;
+		justify-content: center;
+
+		> div {
+			box-sizing: border-box;
+			flex-direction: column;
+			align-items: center;
+
+			img {
+				width: 36px;
+				height: 36px;
+			}
+
+			> div {
+				line-height: 14px;
+				text-align: center;
+
+				span {
+					font-size: 12px;
+				}
+			}
+		}
+	}
+`;
+
+export default WalletItem;

package/src/default.d.ts

@@ -0,0 +1,18 @@
+declare module '*.svg' {
+	const dataUrl: string;
+	export default dataUrl;
+}
+
+declare module '*.png' {
+	const dataUrl: string;
+	export default dataUrl;
+}
+
+declare module 'content-hash' {
+	declare function decode(x: string): string;
+	declare function getCodec(x: string): string;
+}
+declare module '*.json' {
+	const value: any;
+	export default value;
+}

package/src/hooks/useWalletKit.ts

@@ -0,0 +1,38 @@
+import { walletHelperStore, type WalletHelperState } from '@web3jskit/wallethelper';
+import { walletKitStore, AppModal, type WalletKitState } from '../stores';
+
+type WalletKit = WalletHelperState & WalletKitState;
+
+// use for react component
+export const useWalletKit = () => {
+	const walletHelperStates = walletHelperStore((states: any) => states);
+
+	const walletKitStates = walletKitStore((states: any) => states);
+
+	// const provider = currentConnector?.provider || null;
+
+	return {
+		...walletHelperStates,
+		// provider,
+
+		...walletKitStates
+	} as WalletKit;
+};
+
+// use for pure js
+export const getWalletKit = () => {
+	const walletHelperStates = walletHelperStore.getState();
+
+	const walletKitStates = walletKitStore.getState();
+
+	// const provider = currentConnector?.provider || null;
+
+	return {
+		...walletHelperStates,
+		// provider,
+
+		...walletKitStates
+	} as WalletKit;
+};
+
+export { AppModal };

package/src/index.ts

@@ -0,0 +1,8 @@
+export * from './components/WalletKitProvider';
+export * from './components/ConnectButton';
+export * from './types/configType';
+export * from './types/slotsType';
+export { createSlots } from './wallets/SlotsWallets/index';
+export { WalletSlotTriggerButton } from './components/WalletTriggerButton/index';
+export { useWalletKit, getWalletKit } from './hooks/useWalletKit';
+export { AppModal } from './stores';

package/src/locals/i18n.ts

@@ -0,0 +1,19 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import { resources } from './resources';
+
+// i18n.use(LanguageDetector)
+i18n.use(initReactI18next).init({
+	resources,
+	react: {
+		useSuspense: true
+	},
+	fallbackLng: 'en',
+	preload: ['zh-CN', 'en', 'zh', 'en-US'],
+	keySeparator: false,
+	interpolation: {
+		escapeValue: false
+	}
+});
+
+export default i18n;

package/src/locals/languages/en.json

@@ -0,0 +1,27 @@
+{
+	"title": "wallet",
+	"connectWallet": "Connect Wallet",
+	"introduceQuestion": "What is a wallet?",
+	"introduceAnswer": "Your Digital Asset Home",
+	"introduceDetail": "Wallets are used to send, receive, store, and display digital assets such as Ethereum and NFTs.",
+	"getWallet": "Get Wallet",
+	"learnMore": "Learn More",
+	"getWalletTitle": "Get a wallet",
+	"getWalletTips": "Mobile Wallet and Expansion,",
+	"getWalletQuestion": "Isn't that what you're looking for?",
+	"getWalletAnswer": "Select a wallet on the left to start using different wallet providers.",
+	"forChrome": "for Chrome",
+	"chromeDescription": "Access your wallet directly from your favorite web browser.",
+	"addToChrome": "Add to Chrome",
+	"forMobile": "for Mobile",
+	"mobileDescription": "Explore the world of Ethereum with a mobile wallet.",
+	"getMobileApp": "Get the App",
+	"getAppTip": "Scan with your phone to download for iOS or Android",
+	"get": "Get",
+	"continue": "Continue",
+	"opening": "Opening",
+	"confirmConnection": "Confirm connection in extension",
+	"copyAddress": "Copy Address",
+	"copied": "Copied!",
+	"disConnect": "Disconnect"
+}

package/src/locals/languages/zh.json

@@ -0,0 +1,27 @@
+{
+	"title": "钱包",
+	"connectWallet": "连接钱包",
+	"introduceQuestion": "什么是钱包？",
+	"introduceAnswer": "您的数字资产之家",
+	"introduceDetail": "钱包用于发送、接收、存储和展示数字资产，例如以太坊和 NFT。",
+	"getWallet": "获取钱包",
+	"learnMore": "了解更多",
+	"getWalletTitle": "获取钱包",
+	"getWalletTips": "移动钱包和扩展程序",
+	"getWalletQuestion": "不是你要找的吗？",
+	"getWalletAnswer": "在左侧选择一个钱包以开始使用不同的钱包提供商。",
+	"forChrome": "为 Chrome",
+	"chromeDescription": "从您最喜欢的网络浏览器直接访问您的钱包。",
+	"addToChrome": "添加到 Chrome",
+	"forMobile": "用于移动",
+	"mobileDescription": "使用移动钱包探索以太坊的世界。",
+	"getMobileApp": "获取应用",
+	"getAppTip": "用手机扫描下载 iOS 或 Android",
+	"get": "获取",
+	"continue": "继续",
+	"opening": "打开",
+	"confirmConnection": "在扩展程序中确认连接",
+	"copyAddress": "复制地址",
+	"copied": "已复制！",
+	"disConnect": "断开连接"
+}

package/src/locals/resources.ts

@@ -0,0 +1,11 @@
+import en from './languages/en.json';
+import zh from './languages/zh.json';
+
+export const resources = {
+	en: {
+		translation: en
+	},
+	zh: {
+		translation: zh
+	}
+};

package/src/stores/SlotsWalletStore.ts

@@ -0,0 +1,48 @@
+import { create } from 'zustand';
+import { persist, createJSONStorage } from 'zustand/middleware';
+import type { ISlotsConnector } from '../types/slotsType';
+
+export interface ISlotsWallets {
+	walletConnectors: {
+		[key: string]: ISlotsConnector;
+	};
+}
+
+const useSlotsWalletStore = create(
+	persist(
+		(set, get: () => ISlotsWallets) => ({
+			walletConnectors: {},
+			addConnector({ walletName, walletIcon, connector, uuid, connectorNamespace }: ISlotsConnector) {
+				return set(state => {
+					return {
+						walletConnectors: {
+							...state.walletConnectors,
+							[uuid]: { walletName, walletIcon, connector, uuid, connectorNamespace }
+						}
+					};
+				});
+			},
+
+			removeConnector(uuid: string) {
+				return set(state => {
+					if (get().walletConnectors[uuid]) {
+						return {
+							walletConnectors: Object.fromEntries(Object.entries(state.walletConnectors).filter(([k]) => k !== uuid))
+						};
+					}
+					return { walletConnectors: { ...state.walletConnectors } };
+				});
+			},
+
+			clearConnectors() {
+				return set(() => ({ walletConnectors: {} }));
+			}
+		}),
+		{
+			name: 'WALLET_KIT_SLOTS',
+			storage: createJSONStorage(() => localStorage)
+		}
+	)
+);
+
+export default useSlotsWalletStore;

package/src/stores/index.ts

@@ -0,0 +1,74 @@
+import { create } from 'zustand';
+import { persist, createJSONStorage } from 'zustand/middleware';
+import type { Locals, Theme } from '../types/configType';
+
+export enum AppModal {
+	ConnectModal,
+	InfoModal
+}
+
+type Avatar = {
+	text: string;
+	bg: string;
+};
+
+export interface WalletKitState {
+	chains: Array<any>;
+	setChains: (chains: Array<any>) => void;
+
+	language: Locals | null;
+	setLanguage: (language: Locals) => void;
+
+	theme: Theme | null;
+	toggleTheme: (theme: Theme) => void;
+
+	modalType: AppModal | null;
+	openModal: (modal: AppModal) => void;
+	closeModal: () => void;
+
+	avatar: Avatar | null;
+	setAvatar: (avatar: Avatar) => void;
+}
+
+export const walletKitStore = create<WalletKitState>()(
+	persist(
+		set => ({
+			chains: [],
+			setChains(chains: Array<any>) {
+				return set(() => ({ chains }));
+			},
+
+			language: null,
+			setLanguage(language: Locals) {
+				return set(() => ({ language }));
+			},
+
+			theme: null,
+			toggleTheme(theme: Theme) {
+				return set(() => ({ theme: theme === 'darkMode' ? 'lightMode' : 'darkMode' }));
+			},
+
+			modalType: null,
+			openModal(modal: AppModal) {
+				return set(() => ({ modalType: modal }));
+			},
+			closeModal() {
+				return set(() => ({ modalType: null }));
+			},
+
+			avatar: null,
+			setAvatar(avatar: Avatar) {
+				return set(() => ({ avatar }));
+			}
+		}),
+		{
+			name: 'WALLET_KIT_STORE',
+			storage: createJSONStorage(() => localStorage),
+			onRehydrateStorage: () => state => {
+				if (state) {
+					state.closeModal();
+				}
+			}
+		}
+	)
+);

package/src/styled/index.ts

@@ -0,0 +1,79 @@
+import { styled } from 'styled-components';
+
+export const FlexBox = styled.div`
+	display: flex;
+	position: relative;
+`;
+export const FlexCenter = styled.div`
+	display: flex;
+	align-items: center;
+	justify-content: center;
+`;
+export const FlexAICenter = styled.div`
+	display: flex;
+	align-items: center;
+`;
+export const FlexJCCenter = styled.div`
+	display: flex;
+	justify-content: center;
+`;
+export const FlexJCSpaceBetween = styled.div`
+	display: flex;
+	justify-content: space-between;
+`;
+
+export const FlexJCEnd = styled.div`
+	display: flex;
+	justify-content: flex-end;
+`;
+export const FlexJCStart = styled.div`
+	display: flex;
+	justify-content: flex-start;
+`;
+export const FlexWrap = styled.div`
+	display: flex;
+	flex-wrap: wrap;
+`;
+export const FlexCol = styled.div`
+	display: flex;
+	flex-direction: column;
+`;
+export const FlexColAIEnd = styled.div`
+	display: flex;
+	flex-direction: column;
+	align-items: end;
+`;
+export const FlexColJCEnd = styled.div`
+	display: flex;
+	flex-direction: column;
+	justify-content: end;
+`;
+export const FlexCenterCol = styled.div`
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+`;
+export const FlexJCCenterCol = styled.div`
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+`;
+
+export const FlexJCSBCol = styled.div`
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+`;
+export const FlexJCSBCenter = styled.div`
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+`;
+export const FlexAICenterCol = styled.div`
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+`;
+
+export const SlotWrapper = styled.div``;

package/src/test/getwalletprovider.test.ts

@@ -0,0 +1,9 @@
+import { describe, it } from 'vitest';
+describe('getInjectedProvider', () => {
+	it('metamask provider', () => {
+		console.log('connector');
+	});
+	it('getInjectedConnector', () => {
+		console.log('connector');
+	});
+});

package/src/test/setup.ts

@@ -0,0 +1,7 @@
+import '@testing-library/jest-dom';
+import { cleanup } from '@testing-library/react';
+import { afterEach } from 'vitest';
+
+afterEach(() => {
+	cleanup();
+});