add spinner to tx modal and other fixes

Author: wepsree

src/components/Modal.tsx

@@ -2,9 +2,11 @@ import { ArrowNarrowLeftIcon, PlusIcon } from '@heroicons/react/solid';
 import { ReactNode, useEffect, useRef } from 'react';
 import ReactDOM from 'react-dom';
 import { useKeyPress } from '../utils/hooks';
+import Spinner from './Spinner';
 
 type Props = {
 	fullscreen?: boolean;
+	spinner?: boolean;
 	bottom?: boolean;
 	noHeader?: boolean;
 	heading?: string;
@@ -31,6 +33,7 @@ const Modal = ({
 	plusIcon,
 	buttonText,
 	onButtonClick,
+	spinner,
 	bottom,
 	noBackArrow,
 }: Props) => {
@@ -62,7 +65,11 @@ const Modal = ({
 				mouseDraggingModal.current = false;
 			}}
 		>
-			{fullscreen ? (
+			{spinner ? (
+				<div className="w-full h-full xy">
+					<Spinner />
+				</div>
+			) : fullscreen ? (
 				<div
 					onClick={(e) => e.stopPropagation()}
 					className="flex flex-col w-full h-full bg-skin-base"

src/components/TransactionModal.tsx

@@ -20,7 +20,7 @@ import DeterministicIcon from './DeterministicIcon';
 import Modal from './Modal';
 
 type Props = State & {
-	noBackArrow?: boolean;
+	thirdPartyTx?: boolean;
 	transaction?: Transaction;
 	contractFuncParams?: any[];
 	onBack?: () => void; // clicking back arrow
@@ -55,7 +55,7 @@ const Field = ({
 	);
 
 const TransactionModal = ({
-	noBackArrow,
+	thirdPartyTx,
 	unsentBlock,
 	onBack,
 	onCancel = onBack,
@@ -119,7 +119,7 @@ const TransactionModal = ({
 			{(!!transaction || !!unsentBlock) && (
 				<Modal
 					fullscreen
-					noBackArrow={noBackArrow || sendingTx}
+					noBackArrow={thirdPartyTx}
 					heading={unsentBlock ? i18n.confirmTransaction : i18n.transaction}
 					onClose={() => onBack && onBack()}
 					className="flex flex-col"
@@ -225,14 +225,8 @@ const TransactionModal = ({
 								<Button theme="highlight" label={i18n.close} onClick={onCloseAfterSend!} />
 							) : (
 								<>
+									<Button theme="foreground" label={i18n.cancel} onClick={onCancel!} />
 									<Button
-										disabled={!!sendingTx}
-										theme="foreground"
-										label={i18n.cancel}
-										onClick={onCancel!}
-									/>
-									<Button
-										disabled={!!sendingTx}
 										theme="highlight"
 										label={i18n.confirm}
 										onClick={async () => {
@@ -263,32 +257,35 @@ const TransactionModal = ({
 													);
 												}
 
-												const sanitizedBlock: AccountBlockBlock = {
-													// Don't want to send `block: res` in case the type of `res` changes and includes `privateKey`
-													// This ensures the private key is never sent to the content script
-													blockType: res.blockType,
-													address: res.address,
-													fee: res.fee,
-													data: res.data,
-													sendBlockHash: res.sendBlockHash,
-													toAddress: res.toAddress,
-													tokenId: res.tokenId,
-													amount: res.amount,
-													height: res.height,
-													previousHash: res.previousHash,
-													difficulty: res.difficulty,
-													nonce: res.nonce,
-													signature: res.signature,
-													publicKey: res.publicKey,
-													hash: res.hash,
-												};
-												triggerInjectedScriptEvent({
-													type: 'writeAccountBlock',
-													payload: { block: sanitizedBlock },
-												});
+												if (thirdPartyTx) {
+													const sanitizedBlock: AccountBlockBlock = {
+														// Don't want to send `block: res` in case the type of `res` changes and includes `privateKey`
+														// This ensures the private key is never sent to the content script
+														blockType: res.blockType,
+														address: res.address,
+														fee: res.fee,
+														data: res.data,
+														sendBlockHash: res.sendBlockHash,
+														toAddress: res.toAddress,
+														tokenId: res.tokenId,
+														amount: res.amount,
+														height: res.height,
+														previousHash: res.previousHash,
+														difficulty: res.difficulty,
+														nonce: res.nonce,
+														signature: res.signature,
+														publicKey: res.publicKey,
+														hash: res.hash,
+													};
+													triggerInjectedScriptEvent({
+														type: 'writeAccountBlock',
+														payload: { block: sanitizedBlock },
+													});
+												}
 											} catch (e) {
 												console.log('error:', e);
 												toastError(e);
+											} finally {
 												sendingTxSet(false);
 											}
 										}}
@@ -299,6 +296,11 @@ const TransactionModal = ({
 					)}
 				</Modal>
 			)}
+			{sendingTx && (
+				<Modal spinner onClose={() => {}}>
+					{null}
+				</Modal>
+			)}
 		</>
 	);
 };

src/i18n/en.ts

@@ -169,6 +169,7 @@ const en = {
 	rpcUrlAlreadyInUse: 'RPC URL already in use',
 	none: 'None',
 	noPrice: 'No Price',
+	waitForWalletBalanceToLoad: 'Wait for wallet balance to load',
 	test: 'test',
 	'': '',
 };

src/pages/Home.tsx

@@ -51,6 +51,9 @@ const Home = ({
 	viteBalanceInfo,
 	currencyConversion,
 	portfolioValue,
+	toastInfo,
+	displayedTokenIdsAndNames,
+	toastError,
 }: State) => {
 	// const quotaBeneficiaryRef = useTextInputRef();
 	// const lockedAmountRef = useTextInputRef();
@@ -156,9 +159,11 @@ const Home = ({
 							onClick={async () => {
 								if (balanceInfoMap) {
 									sendingSet(true);
-									const arr = await getTokenApiInfo(Object.keys(balanceInfoMap));
+									const arr = await getTokenApiInfo(displayedTokenIdsAndNames.map(([tti]) => tti));
 									tokensInWalletSet(arr);
 									displayedTokensSet(arr);
+								} else {
+									toastInfo(i18n.waitForWalletBalanceToLoad);
 								}
 							}}
 						>
@@ -426,6 +431,7 @@ const Home = ({
 									tokensInWallet.filter((tokenApiInfo) => {
 										return (
 											tokenApiInfo.tokenAddress.includes(search) ||
+											tokenApiInfo.name.toLocaleLowerCase().includes(search) ||
 											addIndexToTokenSymbol(tokenApiInfo.symbol, tokenApiInfo.tokenIndex)
 												.toLocaleLowerCase()
 												.includes(search)

src/pages/SignTx.tsx

@@ -54,7 +54,7 @@ const SignTx = ({ activeAccount, viteBalanceInfo, i18n }: State) => {
 			<Spinner />
 		</div>
 	) : (
-		<TransactionModal noBackArrow onCancel={() => window.close()} unsentBlock={block} />
+		<TransactionModal thirdPartyTx onCancel={() => window.close()} unsentBlock={block} />
 	);
 };