diff --git a/src/hooks/useAccounts.tsx b/src/hooks/useAccounts.tsx index bf1df08..45f739a 100644 --- a/src/hooks/useAccounts.tsx +++ b/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, diff --git a/src/hooks/useWalletConnection.ts b/src/hooks/useWalletConnection.ts index 0df1dae..9268d82 100644 --- a/src/hooks/useWalletConnection.ts +++ b/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(); diff --git a/src/views/TransferStatus.tsx b/src/views/TransferStatus.tsx index b54cd01..9c09945 100644 --- a/src/views/TransferStatus.tsx +++ b/src/views/TransferStatus.tsx @@ -34,7 +34,7 @@ export const TransferStatusToast = ({ }: ElementProps) => { const stringGetter = useStringGetter(); const [open, setOpen] = useState(false); - const [secondsLeft, setSecondsLeft] = useState(); + const [secondsLeft, setSecondsLeft] = useState(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 ; + 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 ( diff --git a/src/views/TransferStatusSteps.tsx b/src/views/TransferStatusSteps.tsx index 4aeee7c..e158e00 100644 --- a/src/views/TransferStatusSteps.tsx +++ b/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) { diff --git a/src/views/forms/AccountManagementForms/DepositForm.tsx b/src/views/forms/AccountManagementForms/DepositForm.tsx index ce341d6..d7ce376 100644 --- a/src/views/forms/AccountManagementForms/DepositForm.tsx +++ b/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();