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 ? (