From 414e38afec6e4f657a1b6cbcf604682b6e812f38 Mon Sep 17 00:00:00 2001 From: aleka Date: Tue, 23 Jan 2024 13:45:14 -0500 Subject: [PATCH] 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 | 23 +++++++++-- src/lib/abacus/index.ts | 15 ++++--- .../dialogs/OnboardingDialog/GenerateKeys.tsx | 1 + .../AccountManagementForms/DepositForm.tsx | 17 +++++--- .../DepositForm/DepositButtonAndReceipt.tsx | 40 ++++++++++++++++--- .../AccountManagementForms/WithdrawForm.tsx | 6 +-- src/views/forms/TransferForm.tsx | 6 +-- 7 files changed, 78 insertions(+), 30 deletions(-) diff --git a/src/hooks/useWalletConnection.ts b/src/hooks/useWalletConnection.ts index c6e9fff..5f32945 100644 --- a/src/hooks/useWalletConnection.ts +++ b/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, diff --git a/src/lib/abacus/index.ts b/src/lib/abacus/index.ts index 796fb94..199f834 100644 --- a/src/lib/abacus/index.ts +++ b/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, - data: string, - ) => void + callback: (success: boolean, parsingError: Nullable, data: string) => void ): void => this.stateManager.commitCCTPWithdraw(callback); // ------ Utils ------ // 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 f2074d5..af2d74f 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'; @@ -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 ; } + const [requireUserActionInWallet, setRequireUserActionInWallet] = useState(false); + return ( @@ -386,7 +385,11 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => { /> {errorMessage && {errorMessage}} - + {requireUserActionInWallet && ( + + {stringGetter({ key: STRING_KEYS.CHECK_WALLET_FOR_REQUEST })} + + )} { setSlippage={onSetSlippage} slippage={slippage} sourceToken={sourceToken || undefined} + setRequireUserActionInWallet={setRequireUserActionInWallet} + setError={setError} /> diff --git a/src/views/forms/AccountManagementForms/DepositForm/DepositButtonAndReceipt.tsx b/src/views/forms/AccountManagementForms/DepositForm/DepositButtonAndReceipt.tsx index a6f6c39..c928a3a 100644 --- a/src/views/forms/AccountManagementForms/DepositForm/DepositButtonAndReceipt.tsx +++ b/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>; + setError?: Dispatch>; + 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 })} {usdcLabel} ), - value: , + value: ( + + ), subitems: [ { key: 'minimum-deposit-amount', @@ -126,7 +148,11 @@ export const DepositButtonAndReceipt = ({ ), value: ( - + ), tooltip: 'minimum-deposit-amount', }, @@ -253,6 +279,8 @@ export const DepositButtonAndReceipt = ({ > {!canAccountTrade ? ( + ) : !isConnectedWagmi ? ( +