rebase

package.json

@@ -41,7 +41,7 @@
     "@cosmjs/tendermint-rpc": "^0.31.0",
     "@dydxprotocol/v4-abacus": "^1.0.19",
     "@dydxprotocol/v4-client-js": "^1.0.0",
-    "@dydxprotocol/v4-localization": "^1.0.3",
+    "@dydxprotocol/v4-localization": "^1.0.5",
     "@ethersproject/providers": "^5.7.2",
     "@js-joda/core": "^5.5.3",
     "@radix-ui/react-collapsible": "^1.0.3",

pnpm-lock.yaml

@@ -1,5 +1,9 @@
 lockfileVersion: '6.0'
 
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
 dependencies:
   '@0xsquid/sdk':
     specifier: ^1.10.0
@@ -29,8 +33,8 @@ dependencies:
     specifier: ^1.0.0
     version: 1.0.0
   '@dydxprotocol/v4-localization':
-    specifier: ^1.0.3
-    version: 1.0.3
+    specifier: ^1.0.5
+    version: 1.0.5
   '@ethersproject/providers':
     specifier: ^5.7.2
     version: 5.7.2
@@ -1007,8 +1011,8 @@ packages:
       - utf-8-validate
     dev: false
 
-  /@dydxprotocol/v4-localization@1.0.3:
-    resolution: {integrity: sha512-DSTVabwVI6TjR0Z6Nlcl+ryrmayCoki0eBbBcSO/bsNYAffsPAy1e4ctajH49hQC6CKaCyK4urZPEXsdCmLlzQ==}
+  /@dydxprotocol/v4-localization@1.0.5:
+    resolution: {integrity: sha512-zZm3GFp/ORz9YjigQFVBlcWmaxYY+XEdIw8AWN5nEbsuiA2Jay+/OA7lO9+nV1J1p1T+TgLo9iczIHJsAo3IsA==}
     dev: false
 
   /@dydxprotocol/v4-proto@0.4.1:
@@ -14096,7 +14100,3 @@ packages:
   /zwitch@2.0.4:
     resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
     dev: true
-
-settings:
-  autoInstallPeers: true
-  excludeLinksFromLockfile: false

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,19 +90,21 @@ 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,
-          }),
-        })
-      : useConnectWagmi();
+          })
+        : undefined,
+    [walletConnectConfig, walletType, walletConnectionType]
+  );
+
+  const { connectAsync: connectWagmi } = useConnectWagmi({ connector: wagmiConnector })
   const { suggestAndConnect: connectGraz } = useConnectGraz();
 
   const connectWallet = useCallback(

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_STATUS
+      : 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();