Onboarding fixes

src/hooks/useAccounts.tsx

@@ -42,6 +42,7 @@ const useAccountsContext = () => {
     selectedWalletError,
     evmAddress,
     signerWagmi,
+    publicClientWagmi,
     dydxAddress: connectedDydxAddress,
     signerGraz,
   } = useWalletConnection();
@@ -296,6 +297,7 @@ const useAccountsContext = () => {
     // Wallet connection (EVM)
     evmAddress,
     signerWagmi,
+    publicClientWagmi,
 
     // Wallet connection (Cosmos)
     signerGraz,

src/hooks/useWalletConnection.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState, useMemo } from 'react';
 import { useSelector } from 'react-redux';
 
 import { LocalStorageKey } from '@/constants/localStorage';
@@ -90,18 +90,23 @@ export const useWalletConnection = () => {
 
   const selectedNetwork = useSelector(getSelectedNetwork);
   const walletConnectConfig = ENVIRONMENT_CONFIG_MAP[selectedNetwork].wallets.walletconnect;
-
-  const { connectAsync: connectWagmi } =
-    walletType && walletConnectionType
-      ? useConnectWagmi({
-          connector: resolveWagmiConnector({
+  const wagmiConnector = useMemo(
+    () =>
+      walletType && walletConnectionType
+        ? resolveWagmiConnector({
             walletType,
             walletConnection: {
               type: walletConnectionType,
             },
             walletConnectConfig,
-          }),
-        })
+          })
+        : undefined,
+    [walletConnectConfig, walletType, walletConnectionType]
+  );
+
+  const { connectAsync: connectWagmi } =
+    walletType && walletConnectionType
+      ? useConnectWagmi({ connector: wagmiConnector })
       : useConnectWagmi();
   const { suggestAndConnect: connectGraz } = useConnectGraz();
 

src/views/TransferStatus.tsx

@@ -34,7 +34,7 @@ export const TransferStatusToast = ({
 }: ElementProps) => {
   const stringGetter = useStringGetter();
   const [open, setOpen] = useState<boolean>(false);
-  const [secondsLeft, setSecondsLeft] = useState<number | undefined>();
+  const [secondsLeft, setSecondsLeft] = useState<number>(0);
 
   // @ts-ignore status.errors is not in the type definition but can be returned
   const error = status?.errors?.length ? status?.errors[0] : status?.error;
@@ -49,14 +49,23 @@ export const TransferStatusToast = ({
 
   if (!status) return <LoadingDots size={3} />;
 
+  const inProgressStatusString =
+    type === 'deposit'
+      ? secondsLeft > 0
+        ? STRING_KEYS.DEPOSIT_STATUS
+        : STRING_KEYS.DEPOSIT_STATUS_SHORTLY
+      : secondsLeft > 0
+      ? STRING_KEYS.WITHDRAW_COMPLETE
+      : STRING_KEYS.WITHDRAW_STATUS_SHORTLY;
+
   const statusString =
     type === 'deposit'
       ? status?.squidTransactionStatus === 'success'
         ? STRING_KEYS.DEPOSIT_COMPLETE
-        : STRING_KEYS.DEPOSIT_STATUS
+        : inProgressStatusString
       : status?.squidTransactionStatus === 'success'
       ? STRING_KEYS.WITHDRAW_COMPLETE
-      : STRING_KEYS.WITHDRAW_STATUS;
+      : inProgressStatusString;
 
   return (
     <Styled.Root open={open} onOpenChange={setOpen}>

src/views/TransferStatusSteps.tsx

@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 import styled, { css, keyframes, type AnyStyledComponent } from 'styled-components';
 import { StatusResponse } from '@0xsquid/sdk';
 
-import { useStringGetter } from '@/hooks';
+import { useStringGetter, useSelectedNetwork, useURLConfigs } from '@/hooks';
 
 import { Link } from '@/components/Link';
 import { Icon, IconName } from '@/components/Icon';
@@ -11,6 +11,7 @@ import { LoadingSpinner } from '@/components/Loading/LoadingSpinner';
 
 import { layoutMixins } from '@/styles/layoutMixins';
 import { STRING_KEYS } from '@/constants/localization';
+import { ENVIRONMENT_CONFIG_MAP } from '@/constants/networks';
 
 type ElementProps = {
   status?: StatusResponse;
@@ -26,12 +27,17 @@ enum TransferStatusStep {
 
 export const TransferStatusSteps = ({ status, type }: ElementProps) => {
   const stringGetter = useStringGetter();
+  const { selectedNetwork } = useSelectedNetwork();
+  const { mintscan: mintscanTxUrl } = useURLConfigs();
+  const dydxChainId = ENVIRONMENT_CONFIG_MAP[selectedNetwork].dydxChainId;
 
   const { currentStep, steps } = useMemo(() => {
     const routeStatus = status?.routeStatus;
     const fromChain = status?.fromChain?.chainData?.chainId;
     const toChain = status?.toChain?.chainData?.chainId;
 
+    const currentStatus = routeStatus?.[routeStatus?.length - 1];
+
     const steps = [
       {
         label: stringGetter({
@@ -54,12 +60,15 @@ export const TransferStatusSteps = ({ status, type }: ElementProps) => {
           },
         }),
         step: TransferStatusStep.ToChain,
-        link: status?.toChain?.transactionUrl,
+        link:
+          type === 'withdrawal'
+            ? status?.toChain?.transactionUrl
+            : currentStatus?.chainId === dydxChainId && currentStatus?.txHash
+            ? `${mintscanTxUrl?.replace('{tx_hash}', currentStatus.txHash)}`
+            : undefined,
       },
     ];
 
-    const currentStatus = routeStatus?.[routeStatus?.length - 1];
-
     let currentStep = TransferStatusStep.Bridge;
 
     if (!routeStatus?.length) {

src/views/forms/AccountManagementForms/DepositForm.tsx

@@ -17,7 +17,6 @@ import { useAccounts, useDebounce, useStringGetter, useSelectedNetwork } from '@
 import { useAccountBalance, CHAIN_DEFAULT_TOKEN_ADDRESS } from '@/hooks/useAccountBalance';
 import { useLocalNotifications } from '@/hooks/useLocalNotifications';
 import { NATIVE_TOKEN_ADDRESS, useSquid } from '@/hooks/useSquid';
-import { useWalletConnection } from '@/hooks/useWalletConnection';
 
 import { layoutMixins } from '@/styles/layoutMixins';
 import { formMixins } from '@/styles/formMixins';
@@ -56,8 +55,7 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
   const [isLoading, setIsLoading] = useState(false);
   const { selectedNetwork } = useSelectedNetwork();
 
-  const { evmAddress, signerWagmi } = useAccounts();
-  const { publicClientWagmi } = useWalletConnection();
+  const { evmAddress, signerWagmi, publicClientWagmi } = useAccounts();
 
   const { addTransferNotification } = useLocalNotifications();