Merge pull request #3 from vitelabs/v1.0.4

V1.0.4

manifest.json

@@ -1,7 +1,7 @@
 {
 	"manifest_version": 3,
 	"name": "Vite Passport",
-	"version": "1.0.3",
+	"version": "1.0.4",
 	"icons": {
 		"1024": "src/assets/logo-blue-1024.png"
 	},

src/background.ts

@@ -23,7 +23,7 @@ chrome.runtime.onConnect.addListener(async (chromePort) => {
 		if (message.type === 'reopen') {
 			chrome.alarms.clear(lockingAlarmName);
 		} else if (message.type === 'updateSecrets') {
-			chrome.storage.session.set({ secrets: message.secrets });
+			chrome.storage.session.set({ [secretsKey]: message.secrets });
 		} else if (message.type === 'lock') {
 			chrome.storage.session.remove(secretsKey);
 		}
@@ -93,5 +93,5 @@ const openPopup = async (routeAfterUnlock: string) => {
 		top: lastFocused.top,
 		left: lastFocused.left! + (lastFocused.width! - 18 * 16),
 	});
-	chrome.storage.session.set({ lastPopupId: id || 0 });
+	chrome.storage.session.set({ [lastPopupIdKey]: id || 0 });
 };

src/components/ModalListItem.tsx

@@ -9,7 +9,7 @@ type Props = {
 	label: string;
 	sublabel?: string;
 	className?: string;
-	onClose?: () => void;
+	onX?: () => void;
 };
 
 const ModalListItem = ({
@@ -20,7 +20,7 @@ const ModalListItem = ({
 	label,
 	sublabel,
 	className,
-	onClose,
+	onX,
 }: Props) => {
 	return (
 		<div className="flex items-center">
@@ -36,10 +36,10 @@ const ModalListItem = ({
 					)}
 				</div>
 			</button>
-			{onClose && (
+			{onX && (
 				<button
 					className="xy w-8 h-8 mr-2 overflow-hidden rounded-full bg-skin-middleground"
-					onClick={onClose}
+					onClick={onX}
 				>
 					<XIcon className="w-5 text-skin-eye-icon" />
 				</button>

src/components/Router.tsx

@@ -15,14 +15,10 @@ import MyTransactions from '../pages/MyTransactions';
 import Settings from '../pages/Settings';
 import SignTx from '../pages/SignTx';
 import Start from '../pages/Start';
+import { getCoinGeckoPriceApiUrl } from '../utils/constants';
 import { connect } from '../utils/global-context';
 import { copyToClipboardAsync, parseQueryString, toQueryString } from '../utils/strings';
 import { State, UnreceivedBlockMessage, ViteBalanceInfo } from '../utils/types';
-// import HistoryListener from './HistoryListener';
-
-// const providerTimeout = 60000;
-// const providerOptions = { retryTimes: 5, retryInterval: 5000 };
-// new WS_RPC(networkRpcUrl, providerTimeout, providerOptions)
 
 type Props = State;
 
@@ -33,9 +29,8 @@ const Router = ({
 	encryptedSecrets,
 	secrets,
 	transactionHistory,
-	displayedTokenIdsAndNames,
-	networkList,
-	activeNetworkIndex,
+	homePageTokenIdsAndNames,
+	activeNetwork,
 	currencyConversion,
 	toastError,
 }: Props) => {
@@ -69,34 +64,22 @@ const Router = ({
 		// return ['/import'];
 		return ['/'];
 	}, []); // eslint-disable-line
-	const networkRpcUrl = useMemo(() => {
-		const activeNetwork = networkList[activeNetworkIndex];
-		return activeNetwork.rpcUrl;
-	}, [networkList, activeNetworkIndex]);
-	const rpc = useMemo(
-		() => (/^ws/.test(networkRpcUrl) ? new WS_RPC(networkRpcUrl) : new HTTP_RPC(networkRpcUrl)),
-		[networkRpcUrl]
-	);
 
 	const viteApi = useMemo(() => {
-		return new ViteAPI(rpc, () => {
-			console.log('client connected');
-		});
-	}, [rpc]);
+		const url = activeNetwork.rpcUrl;
+		const rpc = /^ws/.test(url) ? new WS_RPC(url) : new HTTP_RPC(url);
+		return new ViteAPI(rpc, () => {});
+	}, [activeNetwork]);
 
 	useEffect(() => setState({ viteApi }), [setState, viteApi]);
 
 	useEffect(() => {
 		if (!currencyConversion) return;
 		const ttiToNameMap: { [tti: string]: string } = {};
-		fetch(
-			`https://api.coingecko.com/api/v3/simple/price?ids=${displayedTokenIdsAndNames
-				.map(([, name]) => name)
-				.join(',')}&vs_currencies=usd`
-		)
+		fetch(getCoinGeckoPriceApiUrl(homePageTokenIdsAndNames.map(([, name]) => name)))
 			.then((res) => res.json())
-			.then(async (prices: State['prices']) => {
-				const tokenIdsWithMissingPrices = displayedTokenIdsAndNames
+			.then(async (prices: NonNullable<State['prices']>) => {
+				const tokenIdsWithMissingPrices = homePageTokenIdsAndNames
 					.filter(([tti, name]) => {
 						ttiToNameMap[tti] = name;
 						return !prices[name];
@@ -131,7 +114,6 @@ const Router = ({
 								btcRate: number; // 1.843110962e-7
 							}[];
 						} = await res.json();
-						// console.log('data:', data);
 						data.forEach(({ tokenId, usdRate }) => {
 							prices[ttiToNameMap[tokenId]] = { usd: usdRate };
 						});
@@ -145,7 +127,7 @@ const Router = ({
 				console.log('error:', e);
 				setState({ toast: [e, 'error'] });
 			});
-	}, [currencyConversion, displayedTokenIdsAndNames, setState, toastError]);
+	}, [currencyConversion, homePageTokenIdsAndNames, setState, toastError]);
 
 	// Check if tti is listed on ViteX
 	// viteApi.request('dex_getTokenInfo', 'tti_5649544520544f4b454e6e40').then(
@@ -188,7 +170,7 @@ const Router = ({
 		}
 	}, [viteApi, activeAccount, setState]);
 
-	useEffect(updateViteBalanceInfo, [activeAccount, networkRpcUrl, updateViteBalanceInfo]);
+	useEffect(updateViteBalanceInfo, [activeAccount, activeNetwork.rpcUrl, updateViteBalanceInfo]);
 
 	useEffect(() => {
 		if (!activeAccount) return;

src/components/TransactionModal.tsx

@@ -67,11 +67,10 @@ const TransactionModal = ({
 	copyWithToast,
 	viteApi,
 	activeAccount,
+	activeNetwork,
 	transactionHistory,
 	setState,
 	triggerInjectedScriptEvent,
-	networkList,
-	activeNetworkIndex,
 }: Props) => {
 	const [sentTx, sentTxSet] = useState<undefined | AccountBlockBlock>();
 	const [tokenApiInfo, tokenApiInfoSet] = useState<undefined | TokenApiInfo>();
@@ -103,11 +102,6 @@ const TransactionModal = ({
 		...unsentBlock,
 	};
 
-	const activeNetwork = useMemo(
-		() => networkList[activeNetworkIndex],
-		[networkList, activeNetworkIndex]
-	);
-
 	const tokenName = useMemo(
 		() =>
 			!tokenApiInfo ? '' : addIndexToTokenSymbol(tokenApiInfo.symbol, tokenApiInfo.tokenIndex),
@@ -127,7 +121,7 @@ const TransactionModal = ({
 					<div className="flex-1 px-4">
 						<FetchWidget
 							shouldFetch={!!tokenId && !tokenApiInfo}
-							getPromise={() => getTokenApiInfo(tokenId!)}
+							getPromise={() => getTokenApiInfo(activeNetwork.rpcUrl, tokenId!)}
 							onResolve={(info) => {
 								if (info.length === 1) {
 									tokenApiInfoSet(info[0]);

src/containers/ResetWalletModal.tsx

@@ -9,7 +9,13 @@ type Props = State & {
 	onClose: () => void;
 };
 
-const ResetWalletModal = ({ onClose, i18n, setState, triggerInjectedScriptEvent }: Props) => {
+const ResetWalletModal = ({
+	onClose,
+	i18n,
+	setState,
+	triggerInjectedScriptEvent,
+	sendBgScriptPortMessage,
+}: Props) => {
 	const navigate = useNavigate();
 	return (
 		<Modal
@@ -20,7 +26,13 @@ const ResetWalletModal = ({ onClose, i18n, setState, triggerInjectedScriptEvent
 				const storage = await getValue(null);
 				removeKeys(Object.keys(storage) as StorageFields[]);
 				setValue(defaultStorage);
-				setState(defaultStorage);
+				setState({
+					...defaultStorage,
+					secrets: undefined,
+					activeAccount: undefined,
+					accountList: undefined,
+				});
+				sendBgScriptPortMessage({ type: 'lock' });
 				navigate('/', { replace: true });
 				triggerInjectedScriptEvent({
 					type: 'accountChange',

src/containers/TokenCard.tsx

@@ -63,7 +63,7 @@ const TokenCard = ({
 								? '...'
 								: !unitPrice
 								? i18n.noPrice
-								: `≈${formatPrice(biggestUnit!, unitPrice)}`}
+								: `≈${formatPrice(biggestUnit!, unitPrice, '$')}`}
 						</p>
 					)}
 				</div>

src/containers/TokenSearchBar.tsx

@@ -21,20 +21,6 @@ const TokenSearchBar = ({ i18n, onUserInput }: Props) => {
 				onChange={(e) => {
 					valueSet(e.target.value);
 					onUserInput(e.target.value);
-					// if (availableTokens !== null) {
-					// 	availableTokensSet(undefined);
-					// }
-					// if (!e.target.value) {
-					// 	availableTokensSet([
-					// 		...displayedTokens!,
-					// 		...defaultTokenList.filter(({ tokenAddress }) => !checkedTokens[tokenAddress]),
-					// 	]);
-					// 	return;
-					// }
-					// searchTokenApiInfo(e.target.value, (list: TokenApiInfo[]) => {
-					// 	// console.log('list:', list);
-					// 	availableTokensSet(list);
-					// });
 				}}
 			/>
 		</div>

src/containers/TransactionList.tsx

@@ -184,7 +184,6 @@ const TransactionList = ({
 													)
 												).slice(1);
 												const list = [...currentList, ...additionalTxs];
-												console.log('additionalTxs:', additionalTxs);
 												if (additionalTxs.length === 0) {
 													// OPTIMIZE: save this globally so it doesn't reset on component mount
 													ttiEndReachedSet(true);