Delay wagmi connection if remember me is enabled (#210)

* connect wagmi on deposit if remember me

* use alert message instead of button message

* clear input state when closing transfers forms to renable trade place order button

src/hooks/useWalletConnection.ts

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useState, useMemo } from 'react';
 import { useSelector } from 'react-redux';
 
+import { EvmDerivedAddresses } from '@/constants/account';
 import { LocalStorageKey } from '@/constants/localStorage';
 import { ENVIRONMENT_CONFIG_MAP } from '@/constants/networks';
 
@@ -104,11 +105,17 @@ export const useWalletConnection = () => {
     [walletConnectConfig, walletType, walletConnectionType]
   );
 
-  const { connectAsync: connectWagmi } = useConnectWagmi({ connector: wagmiConnector })
+  const { connectAsync: connectWagmi } = useConnectWagmi({ connector: wagmiConnector });
   const { suggestAndConnect: connectGraz } = useConnectGraz();
+  const [evmDerivedAddresses] = useLocalStorage({
+    key: LocalStorageKey.EvmDerivedAddresses,
+    defaultValue: {} as EvmDerivedAddresses,
+  });
 
   const connectWallet = useCallback(
-    async ({ walletType }: { walletType: WalletType }) => {
+    async ({ walletType, forceConnect }: { walletType?: WalletType; forceConnect?: boolean }) => {
+      if (!walletType) return { walletType, walletConnectionType };
+
       const walletConnection = getWalletConnection({ walletType });
 
       try {
@@ -132,7 +139,11 @@ export const useWalletConnection = () => {
             });
           }
         } else {
-          if (!isConnectedWagmi) {
+          const isAccountConnected = Boolean(
+            evmAddress && evmDerivedAddresses[evmAddress]?.encryptedSignature
+          );
+          // if account connected (via remember me), do not show wagmi popup until forceConnect
+          if (!isConnectedWagmi && (forceConnect || !isAccountConnected)) {
             await connectWagmi({
               connector: resolveWagmiConnector({
                 walletType,
@@ -228,6 +239,12 @@ export const useWalletConnection = () => {
     evmAddressWagmi,
     signerWagmi,
     publicClientWagmi,
+    isConnectedWagmi,
+    connectWallet: () =>
+      connectWallet({
+        walletType: selectedWalletType,
+        forceConnect: true,
+      }),
 
     // Wallet connection (Cosmos)
     dydxAddress,

src/lib/abacus/index.ts

@@ -171,6 +171,15 @@ class AbacusStateManager {
     this.setTransferValue({ value: null, field: TransferInputField.usdcSize });
   };
 
+  resetInputState = () => {
+    this.clearTransferInputValues();
+    this.setTransferValue({
+      field: TransferInputField.type,
+      value: null,
+    });
+    this.clearTradeInputValues();
+  };
+
   // ------ Set Data ------ //
   setStore = (store: RootStore) => {
     this.store = store;
@@ -262,11 +271,7 @@ class AbacusStateManager {
   ) => this.stateManager.cancelOrder(orderId, callback);
 
   cctpWithdraw = (
-    callback: (
-      success: boolean,
-      parsingError: Nullable<ParsingError>,
-      data: string,
-    ) => void
+    callback: (success: boolean, parsingError: Nullable<ParsingError>, data: string) => void
   ): void => this.stateManager.commitCCTPWithdraw(callback);
 
   // ------ Utils ------ //

src/views/dialogs/OnboardingDialog/GenerateKeys.tsx

@@ -72,6 +72,7 @@ export const GenerateKeys = ({
       if (message) {
         log('GenerateKeys/switchNetwork', error, { walletErrorType });
         setError(message);
+        throw error;
       }
     }
   };

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';
@@ -120,11 +121,7 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
     });
 
     return () => {
-      abacusStateManager.clearTransferInputValues();
-      abacusStateManager.setTransferValue({
-        field: TransferInputField.type,
-        value: null,
-      });
+      abacusStateManager.resetInputState();
     };
   }, []);
 
@@ -368,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} />
@@ -386,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}
@@ -395,6 +398,8 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
           setSlippage={onSetSlippage}
           slippage={slippage}
           sourceToken={sourceToken || undefined}
+          setRequireUserActionInWallet={setRequireUserActionInWallet}
+          setError={setError}
         />
       </Styled.Footer>
     </Styled.Form>

src/views/forms/AccountManagementForms/DepositForm/DepositButtonAndReceipt.tsx

@@ -1,8 +1,7 @@
-import { type Dispatch, type ReactNode, type SetStateAction, useState, useMemo } from 'react';
+import { type Dispatch, type SetStateAction, useState, type ReactNode, useEffect } from 'react';
 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';
 
@@ -12,6 +11,7 @@ import { NumberSign, TOKEN_DECIMALS } from '@/constants/numbers';
 
 import { useStringGetter, useTokenConfigs } from '@/hooks';
 import { useMatchingEvmNetwork } from '@/hooks/useMatchingEvmNetwork';
+import { useWalletConnection } from '@/hooks/useWalletConnection';
 
 import { layoutMixins } from '@/styles/layoutMixins';
 
@@ -39,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;
@@ -57,6 +58,7 @@ export const DepositButtonAndReceipt = ({
   isDisabled,
   isLoading,
   slotError,
+  setRequireUserActionInWallet,
 }: ElementProps) => {
   const [showFeeBreakdown, setShowFeeBreakdown] = useState(false);
   const [isEditingSlippage, setIsEditingSlipapge] = useState(false);
@@ -64,6 +66,24 @@ export const DepositButtonAndReceipt = ({
 
   const canAccountTrade = useSelector(calculateCanAccountTrade, shallowEqual);
 
+  const { connectWallet, isConnectedWagmi } = useWalletConnection();
+
+  const connectWagmi = async () => {
+    try {
+      setRequireUserActionInWallet(false);
+      await connectWallet();
+      setRequireUserActionInWallet(false);
+    } catch (e) {
+      setRequireUserActionInWallet(true);
+    }
+  };
+
+  useEffect(() => {
+    if (!isConnectedWagmi && canAccountTrade) {
+      connectWagmi();
+    }
+  }, [isConnectedWagmi, canAccountTrade]);
+
   const {
     matchNetwork: switchNetwork,
     isSwitchingNetwork,
@@ -80,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[] = [];
 
@@ -116,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',
@@ -126,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',
         },
@@ -253,6 +279,8 @@ export const DepositButtonAndReceipt = ({
     >
       {!canAccountTrade ? (
         <OnboardingTriggerButton size={ButtonSize.Base} />
+      ) : !isConnectedWagmi ? (
+        <Button action={ButtonAction.Primary} onClick={connectWallet} state={{ isLoading: true }} />
       ) : !isMatchingNetwork ? (
         <Button
           action={ButtonAction.Primary}

src/views/forms/AccountManagementForms/WithdrawForm.tsx

@@ -101,11 +101,7 @@ export const WithdrawForm = () => {
     });
 
     return () => {
-      abacusStateManager.clearTransferInputValues();
-      abacusStateManager.setTransferValue({
-        field: TransferInputField.type,
-        value: null,
-      });
+      abacusStateManager.resetInputState();
     };
   }, []);
 

src/views/forms/TransferForm.tsx

@@ -118,11 +118,7 @@ export const TransferForm = ({
     onChangeAsset(selectedAsset);
 
     return () => {
-      abacusStateManager.clearTransferInputValues();
-      abacusStateManager.setTransferValue({
-        field: TransferInputField.type,
-        value: null,
-      });
+      abacusStateManager.resetInputState();
     };
   }, []);