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/views/forms/AccountManagementForms/DepositForm/DepositButtonAndReceipt.tsx b/src/views/forms/AccountManagementForms/DepositForm/DepositButtonAndReceipt.tsx index a6f6c39..dce38fb 100644 --- a/src/views/forms/AccountManagementForms/DepositForm/DepositButtonAndReceipt.tsx +++ b/src/views/forms/AccountManagementForms/DepositForm/DepositButtonAndReceipt.tsx @@ -1,4 +1,4 @@ -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'; @@ -12,6 +12,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'; @@ -64,6 +65,23 @@ export const DepositButtonAndReceipt = ({ const canAccountTrade = useSelector(calculateCanAccountTrade, shallowEqual); + const { connectWallet, isConnectedWagmi } = useWalletConnection(); + const [hasConnectWalletError, setHasConnectWalletError] = useState(false); + + const attemptWalletConnect = async () => { + try { + await connectWallet(); + } catch (e) { + setHasConnectWalletError(true); + } + }; + + useEffect(() => { + if (!isConnectedWagmi && canAccountTrade) { + attemptWalletConnect(); + } + }, [isConnectedWagmi, canAccountTrade]); + const { matchNetwork: switchNetwork, isSwitchingNetwork, @@ -253,6 +271,14 @@ export const DepositButtonAndReceipt = ({ > {!canAccountTrade ? ( + ) : !isConnectedWagmi ? ( + ) : !isMatchingNetwork ? (