@web3jskit/walletkit 0.0.3 → 0.0.5

package/src/components/Text/index.tsx

@@ -1,67 +0,0 @@
-import React from 'react';
-import { styled } from 'styled-components';
-
-interface TextOrg {
-	text?: string | number | any;
-	size?: number;
-	weight?: number;
-	color?: string;
-	padding?: string;
-	margin?: string;
-	ellipsis?: boolean;
-	className?: string;
-	children?: React.ReactNode;
-	prefix?: string;
-	suffix?: string;
-	counting?: boolean;
-	href?: string;
-}
-
-const TextStyled = styled.div`
-	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> = ({
-	prefix,
-	suffix,
-	className = '',
-	text,
-	size,
-	weight,
-	color,
-	padding = '',
-	margin = ''
-}) => {
-	return (
-		<TextStyled
-			className={className}
-			style={{
-				fontSize: size ? size + 'px' : '16px',
-				fontWeight: weight || 700,
-				color,
-				padding,
-				margin
-			}}
-		>
-			{prefix ? <span>{prefix}</span> : <></>}
-			<span className="text" dangerouslySetInnerHTML={{ __html: text }} />
-			{suffix ? <span>{suffix}</span> : <></>}
-		</TextStyled>
-	);
-};
-
-export default Text;

package/src/components/WalletKitProvider/ChainProvider.tsx

@@ -1,34 +0,0 @@
-import { createContext, type ReactNode, useContext, useMemo } from 'react';
-
-interface IChainProvider {
-	children: ReactNode;
-	defaultChain?: number | any;
-}
-
-interface ChainContextValue {
-	chains: any[];
-	defaultChainId?: number;
-}
-
-const ChainContext = createContext<ChainContextValue>({
-	chains: []
-});
-
-export function ChainProvider({ children, defaultChain }: IChainProvider) {
-	const chainValue = useMemo(() => {
-		return {
-			chains: [],
-			defaultChainId: typeof defaultChain === 'number' ? defaultChain : defaultChain?.id
-		};
-	}, [defaultChain]);
-
-	return <ChainContext.Provider value={chainValue}>{children}</ChainContext.Provider>;
-}
-
-export const useWalletKitChains = () => {
-	return useContext(ChainContext).chains;
-};
-
-export const useWalletKitDefaultChainId = () => {
-	return useContext(ChainContext).defaultChainId;
-};

package/src/components/WalletKitProvider/I18nProvider.tsx

@@ -1,52 +0,0 @@
-import { createContext, type ReactNode, useEffect, useMemo, useState } from 'react';
-import { type Locals } from '../../types/configType';
-import i18n from '../../locals/i18n';
-
-interface I18nProviderProps {
-	children: ReactNode;
-	language?: Locals;
-}
-
-export const detectedBrowserLocale = () => {
-	if (typeof window !== 'undefined' && typeof navigator !== 'undefined') {
-		if (navigator.languages?.length) {
-			return navigator.languages[0];
-		}
-
-		if (navigator.language) {
-			return navigator.language;
-		}
-	}
-	return '';
-};
-
-export const I18nContext = createContext<{ i18n: typeof i18n }>({ i18n });
-
-export const I18nProvider = ({ children, language }: I18nProviderProps) => {
-	const [updateCount, setUpdateCount] = useState(0);
-
-	const browserLocale: Locals = useMemo(() => {
-		return detectedBrowserLocale() as Locals;
-	}, []);
-
-	useEffect(() => {
-		i18n.on('languageChanged', () => {
-			setUpdateCount(count => count + 1);
-		});
-	}, []);
-
-	useEffect(() => {
-		if (language && language !== i18n.language) {
-			i18n.changeLanguage(language);
-		} else if (!language && browserLocale && browserLocale !== i18n.language) {
-			i18n.changeLanguage(browserLocale);
-		}
-	}, [language, browserLocale]);
-
-	const memoizedValue = useMemo(() => {
-		const t = (key: string, options?: any) => i18n.t(key, options);
-		return { t, i18n };
-	}, [updateCount]);
-
-	return <I18nContext.Provider value={memoizedValue}>{children}</I18nContext.Provider>;
-};

package/src/components/WalletKitProvider/ThemeProvider.tsx

@@ -1,16 +0,0 @@
-import { ThemeProvider } from 'styled-components';
-import { type ReactNode, useMemo } from 'react';
-import { type Theme } from '../../types/configType';
-import { themeStyle } from '../../theme';
-
-interface IWalletKitThemeProvider {
-	theme?: Theme;
-	children: ReactNode;
-}
-
-export function WalletKitThemeProvider({ theme, children }: IWalletKitThemeProvider) {
-	const themeObject = useMemo(() => {
-		return themeStyle[theme || 'lightMode'];
-	}, [theme]);
-	return <ThemeProvider theme={themeObject}>{children}</ThemeProvider>;
-}

package/src/components/WalletKitProvider/index.tsx

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

@@ -1,42 +0,0 @@
-import { useTranslation } from 'react-i18next';
-import ModalHeader from '../Header/ModalHeader';
-import WalletListContainer from './style';
-import { useMemo } from 'react';
-
-interface WalletListProps {
-	list?: any[];
-	onBack?: () => void;
-	onGetWallet?: (wallet: any) => void;
-}
-
-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">
-				{randomList?.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

@@ -1,102 +0,0 @@
-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;
-		gap: 20px;
-		flex: 1;
-		overflow: auto;
-
-		.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

@@ -1,50 +0,0 @@
-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]);
-
-	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

@@ -1,53 +0,0 @@
-import { styled } from 'styled-components';
-
-const WalletItem = styled.div`
-	display: flex;
-	padding: 4px 12px;
-	border-radius: 12px;
-	cursor: pointer;
-	flex-shrink: 0;
-	box-sizing: border-box;
-	user-select: none;
-
-	img {
-		width: 28px;
-		height: 28px;
-		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

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

@@ -1,42 +0,0 @@
-import { walletHelperStore, type WalletHelperState } from '@web3jskit/wallethelper';
-import { walletKitStore, AppModal, type WalletKitState } from '../stores';
-
-type WalletKit = WalletHelperState & WalletKitState;
-type WalletKitKeys = keyof WalletKit;
-
-// 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 exportStates = {
-		...walletHelperStates,
-		...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,9 +0,0 @@
-export { SupportWallet } from '@web3jskit/wallethelper';
-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

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

@@ -1,30 +0,0 @@
-{
-	"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",
-	"installed": "Installed",
-	"run": "Run",
-	"more": "More"
-}

package/src/locals/languages/zh.json

@@ -1,30 +0,0 @@
-{
-	"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": "断开连接",
-	"installed": "已安装",
-	"run": "流行",
-	"more": "更多"
-}

package/src/locals/resources.ts

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

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