diff --git a/src/hooks/useNotificationTypes.tsx b/src/hooks/useNotificationTypes.tsx index fa6a81d..c09d7c9 100644 --- a/src/hooks/useNotificationTypes.tsx +++ b/src/hooks/useNotificationTypes.tsx @@ -110,18 +110,18 @@ export const notificationTypes = [ const stringGetter = useStringGetter(); const { transferNotifications } = useLocalNotifications(); - const getTitleStringKey = useCallback((type: 'deposit' | 'withdraw', finished: boolean) => { + const getTitleStringKey = useCallback((type: 'deposit' | 'withdrawal', finished: boolean) => { if (type === 'deposit' && !finished) return STRING_KEYS.DEPOSIT_IN_PROGRESS; if (type === 'deposit' && finished) return STRING_KEYS.DEPOSIT; - if (type === 'withdraw' && !finished) return STRING_KEYS.WITHDRAW_IN_PROGRESS; + if (type === 'withdrawal' && !finished) return STRING_KEYS.WITHDRAW_IN_PROGRESS; return STRING_KEYS.WITHDRAW; }, []); useEffect(() => { for (const transfer of transferNotifications) { - const { toChainId, status, txHash, toAmount } = transfer; + const { fromChainId, status, txHash, toAmount } = transfer; const finished = Boolean(status) && status?.squidTransactionStatus !== 'ongoing'; - const type = toChainId === TESTNET_CHAIN_ID ? 'deposit' : 'withdraw'; + const type = fromChainId === TESTNET_CHAIN_ID ? 'withdrawal' : 'deposit'; // @ts-ignore status.errors is not in the type definition but can be returned const error = status?.errors?.length ? status?.errors[0] : status?.error; @@ -154,6 +154,7 @@ export const notificationTypes = [ description: description, customContent: ( {description} - + ), toastSensitivity: 'foreground', diff --git a/src/views/TransferStatus.tsx b/src/views/TransferStatus.tsx index cecce4e..81868cf 100644 --- a/src/views/TransferStatus.tsx +++ b/src/views/TransferStatus.tsx @@ -1,6 +1,5 @@ import { useCallback, useState, useMemo } from 'react'; import styled, { type AnyStyledComponent } from 'styled-components'; -import { TESTNET_CHAIN_ID } from '@dydxprotocol/v4-client-js'; import { Root, Trigger, Content } from '@radix-ui/react-collapsible'; import { StatusResponse } from '@0xsquid/sdk'; @@ -21,12 +20,14 @@ import { LoadingDots } from '@/components/Loading/LoadingDots'; import { layoutMixins } from '@/styles/layoutMixins'; type ElementProps = { + type: 'withdrawal' | 'deposit'; toAmount?: number; triggeredAt?: number; status?: StatusResponse; }; export const TransferStatusToast = ({ + type, toAmount, triggeredAt = Date.now(), status, @@ -38,11 +39,6 @@ export const TransferStatusToast = ({ // @ts-ignore status.errors is not in the type definition but can be returned const error = status?.errors?.length ? status?.errors[0] : status?.error; - const type = useMemo( - () => (status?.toChain?.chainData?.chainId === TESTNET_CHAIN_ID ? 'deposit' : 'withdrawal'), - [status] - ); - const updateSecondsLeft = useCallback(() => { const fromChainEta = (status?.fromChain?.chainData?.estimatedRouteDuration || 0) * 1000; const toChainEta = (status?.toChain?.chainData?.estimatedRouteDuration || 0) * 1000; @@ -69,7 +65,7 @@ export const TransferStatusToast = ({ side="bottom" slotReceipt={ - + } > diff --git a/src/views/TransferStatusSteps.tsx b/src/views/TransferStatusSteps.tsx index 409badf..4aeee7c 100644 --- a/src/views/TransferStatusSteps.tsx +++ b/src/views/TransferStatusSteps.tsx @@ -1,7 +1,6 @@ import { useMemo } from 'react'; import styled, { css, keyframes, type AnyStyledComponent } from 'styled-components'; import { StatusResponse } from '@0xsquid/sdk'; -import { TESTNET_CHAIN_ID } from '@dydxprotocol/v4-client-js'; import { useStringGetter } from '@/hooks'; @@ -15,6 +14,7 @@ import { STRING_KEYS } from '@/constants/localization'; type ElementProps = { status?: StatusResponse; + type: 'withdrawal' | 'deposit'; }; enum TransferStatusStep { @@ -24,14 +24,13 @@ enum TransferStatusStep { Complete, } -export const TransferStatusSteps = ({ status }: ElementProps) => { +export const TransferStatusSteps = ({ status, type }: ElementProps) => { const stringGetter = useStringGetter(); - const { currentStep, steps, type } = useMemo(() => { + const { currentStep, steps } = useMemo(() => { const routeStatus = status?.routeStatus; const fromChain = status?.fromChain?.chainData?.chainId; const toChain = status?.toChain?.chainData?.chainId; - const type = toChain === TESTNET_CHAIN_ID ? 'deposit' : 'withdrawal'; const steps = [ { @@ -74,6 +73,10 @@ export const TransferStatusSteps = ({ status }: ElementProps) => { currentStep = TransferStatusStep.FromChain; } + if (status?.squidTransactionStatus === 'success') { + currentStep = TransferStatusStep.Complete; + } + return { currentStep, steps,