From ee4cc24c14d2d776f019ff026c8150bee1bb8b6f Mon Sep 17 00:00:00 2001
From: Aleka Cheung <aforaleka@gmail.com>
Date: Fri, 19 Jan 2024 11:36:29 -0800
Subject: [PATCH] use alert message instead of button message

---
 .../dialogs/OnboardingDialog/GenerateKeys.tsx |  1 +
 .../AccountManagementForms/DepositForm.tsx    | 11 +++++-
 .../DepositForm/DepositButtonAndReceipt.tsx   | 34 ++++++++++---------
 3 files changed, 29 insertions(+), 17 deletions(-)

diff --git a/src/views/dialogs/OnboardingDialog/GenerateKeys.tsx b/src/views/dialogs/OnboardingDialog/GenerateKeys.tsx
index 092e253..c65186b 100644
--- a/src/views/dialogs/OnboardingDialog/GenerateKeys.tsx
+++ b/src/views/dialogs/OnboardingDialog/GenerateKeys.tsx
@@ -72,6 +72,7 @@ export const GenerateKeys = ({
       if (message) {
         log('GenerateKeys/switchNetwork', error, { walletErrorType });
         setError(message);
+        throw error;
       }
     }
   };
diff --git a/src/views/forms/AccountManagementForms/DepositForm.tsx b/src/views/forms/AccountManagementForms/DepositForm.tsx
index a0235e1..e2d1b68 100644
--- a/src/views/forms/AccountManagementForms/DepositForm.tsx
+++ b/src/views/forms/AccountManagementForms/DepositForm.tsx
@@ -17,6 +17,7 @@ import type { EvmAddress } from '@/constants/wallets';
 import { useAccounts, useDebounce, useStringGetter, useSelectedNetwork } from '@/hooks';
 import { useAccountBalance, CHAIN_DEFAULT_TOKEN_ADDRESS } from '@/hooks/useAccountBalance';
 import { useLocalNotifications } from '@/hooks/useLocalNotifications';
+import { useWalletConnection } from '@/hooks/useWalletConnection';
 
 import { layoutMixins } from '@/styles/layoutMixins';
 import { formMixins } from '@/styles/formMixins';
@@ -364,6 +365,8 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
     return <LoadingSpace id="DepositForm" />;
   }
 
+  const [requireUserActionInWallet, setRequireUserActionInWallet] = useState(false);
+
   return (
     <Styled.Form onSubmit={onSubmit}>
       <ChainSelectMenu selectedChain={chainIdStr || undefined} onSelectChain={onSelectChain} />
@@ -382,7 +385,11 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
         />
       </Styled.WithDetailsReceipt>
       {errorMessage && <AlertMessage type={AlertType.Error}>{errorMessage}</AlertMessage>}
-
+      {requireUserActionInWallet && (
+        <AlertMessage type={AlertType.Warning}>
+          {stringGetter({ key: STRING_KEYS.CHECK_WALLET_FOR_REQUEST })}
+        </AlertMessage>
+      )}
       <Styled.Footer>
         <DepositButtonAndReceipt
           isDisabled={isDisabled}
@@ -391,6 +398,8 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
           setSlippage={onSetSlippage}
           slippage={slippage}
           sourceToken={sourceToken || undefined}
+          setRequireUserActionInWallet={setRequireUserActionInWallet}
+          setError={setError}
         />
       </Styled.Footer>
     </Styled.Form>
diff --git a/src/views/forms/AccountManagementForms/DepositForm/DepositButtonAndReceipt.tsx b/src/views/forms/AccountManagementForms/DepositForm/DepositButtonAndReceipt.tsx
index dce38fb..c928a3a 100644
--- a/src/views/forms/AccountManagementForms/DepositForm/DepositButtonAndReceipt.tsx
+++ b/src/views/forms/AccountManagementForms/DepositForm/DepositButtonAndReceipt.tsx
@@ -2,7 +2,6 @@ import { type Dispatch, type SetStateAction, useState, type ReactNode, useEffect
 import styled, { type AnyStyledComponent } from 'styled-components';
 import { shallowEqual, useSelector } from 'react-redux';
 import type { RouteData } from '@0xsquid/sdk';
-import { formatUnits } from 'viem';
 
 import { ButtonAction, ButtonShape, ButtonSize, ButtonType } from '@/constants/buttons';
 
@@ -40,7 +39,8 @@ type ElementProps = {
   isLoading?: boolean;
 
   chainId?: string | number;
-  setError?: Dispatch<SetStateAction<Error | undefined>>;
+  setError?: Dispatch<SetStateAction<Error | null>>;
+  setRequireUserActionInWallet: (val: boolean) => void;
   slippage: number;
   slotError?: ReactNode;
   setSlippage: (slippage: number) => void;
@@ -58,6 +58,7 @@ export const DepositButtonAndReceipt = ({
   isDisabled,
   isLoading,
   slotError,
+  setRequireUserActionInWallet,
 }: ElementProps) => {
   const [showFeeBreakdown, setShowFeeBreakdown] = useState(false);
   const [isEditingSlippage, setIsEditingSlipapge] = useState(false);
@@ -66,19 +67,20 @@ export const DepositButtonAndReceipt = ({
   const canAccountTrade = useSelector(calculateCanAccountTrade, shallowEqual);
 
   const { connectWallet, isConnectedWagmi } = useWalletConnection();
-  const [hasConnectWalletError, setHasConnectWalletError] = useState(false);
 
-  const attemptWalletConnect = async () => {
+  const connectWagmi = async () => {
     try {
+      setRequireUserActionInWallet(false);
       await connectWallet();
+      setRequireUserActionInWallet(false);
     } catch (e) {
-      setHasConnectWalletError(true);
+      setRequireUserActionInWallet(true);
     }
   };
 
   useEffect(() => {
     if (!isConnectedWagmi && canAccountTrade) {
-      attemptWalletConnect();
+      connectWagmi();
     }
   }, [isConnectedWagmi, canAccountTrade]);
 
@@ -98,7 +100,7 @@ export const DepositButtonAndReceipt = ({
     useSelector(getSubaccountBuyingPower, shallowEqual) || {};
 
   const { isCctp, summary, requestPayload } = useSelector(getTransferInputs, shallowEqual) || {};
-  const { usdcDecimals, usdcLabel } = useTokenConfigs();
+  const { usdcLabel } = useTokenConfigs();
 
   const feeSubitems: DetailsItem[] = [];
 
@@ -134,7 +136,9 @@ export const DepositButtonAndReceipt = ({
           {stringGetter({ key: STRING_KEYS.EXPECTED_DEPOSIT_AMOUNT })} <Tag>{usdcLabel}</Tag>
         </span>
       ),
-      value: <Output type={OutputType.Fiat} fractionDigits={TOKEN_DECIMALS} value={summary?.toAmount} />,
+      value: (
+        <Output type={OutputType.Fiat} fractionDigits={TOKEN_DECIMALS} value={summary?.toAmount} />
+      ),
       subitems: [
         {
           key: 'minimum-deposit-amount',
@@ -144,7 +148,11 @@ export const DepositButtonAndReceipt = ({
             </span>
           ),
           value: (
-            <Output type={OutputType.Fiat} fractionDigits={TOKEN_DECIMALS} value={summary?.toAmountMin} />
+            <Output
+              type={OutputType.Fiat}
+              fractionDigits={TOKEN_DECIMALS}
+              value={summary?.toAmountMin}
+            />
           ),
           tooltip: 'minimum-deposit-amount',
         },
@@ -272,13 +280,7 @@ export const DepositButtonAndReceipt = ({
       {!canAccountTrade ? (
         <OnboardingTriggerButton size={ButtonSize.Base} />
       ) : !isConnectedWagmi ? (
-        <Button
-          action={ButtonAction.Primary}
-          onClick={connectWallet}
-          state={{ isLoading: !hasConnectWalletError }}
-        >
-          {stringGetter({ key: STRING_KEYS.CHECK_WALLET_FOR_REQUEST })}
-        </Button>
+        <Button action={ButtonAction.Primary} onClick={connectWallet} state={{ isLoading: true }} />
       ) : !isMatchingNetwork ? (
         <Button
           action={ButtonAction.Primary}