diff --git a/src/App.tsx b/src/App.tsx index 2183c18..89aa1ff 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -99,12 +99,10 @@ const Content = () => { ); }; -type ProviderWrapperProps = { - children: React.ReactNode; -}; - const wrapProvider = (Component: React.ComponentType, props?: any) => { - return ({ children }: ProviderWrapperProps) => {children}; + return ({ children }: { children: React.ReactNode }) => ( + {children} + ); }; const providers = [ @@ -118,7 +116,7 @@ const providers = [ wrapProvider(SquidProvider), wrapProvider(LocalNotificationsProvider), wrapProvider(NotificationsProvider), - wrapProvider(DialogAreaProvider) + wrapProvider(DialogAreaProvider), ]; const App = () => { diff --git a/src/constants/abacus.ts b/src/constants/abacus.ts index 28897bd..8ba534b 100644 --- a/src/constants/abacus.ts +++ b/src/constants/abacus.ts @@ -135,8 +135,6 @@ export const TransferType = Abacus.exchange.dydx.abacus.output.input.TransferTyp const transferTypes = [...TransferType.values()] as const; export type TransferTypes = (typeof transferTypes)[number]; -export type TransferStatus = Abacus.exchange.dydx.abacus.output.TransferStatus; - // ------ Trade Items ------ // export const TradeInputField = Abacus.exchange.dydx.abacus.state.modal.TradeInputField; const tradeInputFields = [...TradeInputField.values()] as const; diff --git a/src/constants/localization/app.ts b/src/constants/localization/app.ts index 573a1c5..95f4b95 100644 --- a/src/constants/localization/app.ts +++ b/src/constants/localization/app.ts @@ -447,6 +447,7 @@ export const APP_STRING_KEYS = { VERIFY_WALLET_COMPATIBILITY: 'ONBOARDING.VERIFY_WALLET_COMPATIBILITY', WELCOME: 'ONBOARDING.WELCOME', WELCOME_DYDX: 'ONBOARDING.WELCOME_DYDX', + WITHDRAW_STATUS: 'ONBOARDING.WITHDRAW_STATUS', WRONG_NETWORK_EXPLANATION_PRODUCTION: 'ONBOARDING.WRONG_NETWORK_EXPLANATION_PRODUCTION', WRONG_NETWORK_EXPLANATION_STAGING: 'ONBOARDING.WRONG_NETWORK_EXPLANATION_STAGING', WRONG_NETWORK: 'ONBOARDING.WRONG_NETWORK', diff --git a/src/hooks/useSquid.tsx b/src/hooks/useSquid.tsx index 9801df7..0266fc7 100644 --- a/src/hooks/useSquid.tsx +++ b/src/hooks/useSquid.tsx @@ -1,7 +1,6 @@ import { createContext, useContext, useEffect, useMemo, useState } from 'react'; import { useSelector } from 'react-redux'; import { Squid } from '@0xsquid/sdk'; -import { USDC_DENOM } from '@dydxprotocol/v4-client'; import { DydxV4Network, isDydxV4Network } from '@/constants/networks'; @@ -14,21 +13,6 @@ const SQUID_BASE_URL: Record = { [DydxV4Network.V4Mainnet]: 'https://api.0xsquid.com', }; -/** - * @description Deposit route defaults for IBC Testnet - * */ -export const SQUID_DEPOSIT_ROUTE_DEFAULTS = { - toChain: 'dydx-testnet-2', - toToken: USDC_DENOM, - enableForecall: false, // instant execution service, defaults to true -}; - -export const SQUID_WITHDRAW_ROUTE_DEFAULTS = { - fromChain: 'dydx-testnet-2', - fromToken: USDC_DENOM, - enableForecall: false, // instant execution service, defaults to true -}; - const useSquidContext = () => { const selectedNetwork = useSelector(getSelectedNetwork); const [_, setInitialized] = useState(false); diff --git a/src/hooks/useSquidRouter.tsx b/src/hooks/useSquidRouter.tsx deleted file mode 100644 index 0266fc7..0000000 --- a/src/hooks/useSquidRouter.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import { createContext, useContext, useEffect, useMemo, useState } from 'react'; -import { useSelector } from 'react-redux'; -import { Squid } from '@0xsquid/sdk'; - -import { DydxV4Network, isDydxV4Network } from '@/constants/networks'; - -import { getSelectedNetwork } from '@/state/appSelectors'; - -const SQUID_BASE_URL: Record = { - [DydxV4Network.V4Testnet2]: 'https://squid-api-git-feat-cosmos-maintestnet-0xsquid.vercel.app', - [DydxV4Network.V4Staging]: undefined, - [DydxV4Network.V4Local]: undefined, - [DydxV4Network.V4Mainnet]: 'https://api.0xsquid.com', -}; - -const useSquidContext = () => { - const selectedNetwork = useSelector(getSelectedNetwork); - const [_, setInitialized] = useState(false); - - const initializeClient = async () => { - setInitialized(false); - if (!squid) return; - await squid.init(); - setInitialized(true); - }; - - const squid = useMemo( - () => - isDydxV4Network(selectedNetwork) - ? new Squid({ baseUrl: SQUID_BASE_URL[selectedNetwork as DydxV4Network] }) - : undefined, - [selectedNetwork] - ); - - useEffect(() => { - if (squid) { - initializeClient(); - } - }, [squid]); - - return squid; -}; - -type SquidContextType = ReturnType; -const SquidContext = createContext(undefined); -SquidContext.displayName = '0xSquid'; - -export const SquidProvider = ({ ...props }) => ( - -); - -export const useSquid = () => useContext(SquidContext); diff --git a/src/localization/en/app.json b/src/localization/en/app.json index 5a6ba71..22fcb1b 100644 --- a/src/localization/en/app.json +++ b/src/localization/en/app.json @@ -452,6 +452,7 @@ "VERIFY_WALLET_COMPATIBILITY": "Verify wallet compatibility", "WELCOME_DYDX": "Welcome to dYdX", "WELCOME": "Welcome", + "WITHDRAW_STATUS": "Your withdrawal of {AMOUNT_USD} will be available in approximately {ESTIMATED_DURATION}.", "WRONG_NETWORK_EXPLANATION_PRODUCTION": "To complete dYdX onboarding, set your wallet network to 'Ethereum Mainnet'.", "WRONG_NETWORK_EXPLANATION_STAGING": "To complete dYdX onboarding, set your wallet network to 'Goerli Test Network'.", "WRONG_NETWORK": "Wrong network", diff --git a/src/views/TransferStatus.tsx b/src/views/TransferStatus.tsx index ec7a7c3..47d0454 100644 --- a/src/views/TransferStatus.tsx +++ b/src/views/TransferStatus.tsx @@ -1,29 +1,22 @@ -import { useCallback, useState } from 'react'; -import { useQuery } from 'react-query'; -import styled, { css, keyframes, type AnyStyledComponent } from 'styled-components'; +import { useCallback, useState, useMemo } from 'react'; +import styled, { type AnyStyledComponent } from 'styled-components'; +import { TESTNET_CHAIN_ID } from '@dydxprotocol/v4-client'; import { Root, Trigger, Content } from '@radix-ui/react-collapsible'; import { StatusResponse } from '@0xsquid/sdk'; -import type { TransferStatus } from '@/constants/abacus'; - import { useInterval, useStringGetter } from '@/hooks'; -import { useSquid } from '@/hooks/useSquid'; import { STRING_KEYS } from '@/constants/localization'; import { formatSeconds } from '@/lib/timeUtils'; -import abacusStateManager from '@/lib/abacus'; import { Output, OutputType } from '@/components/Output'; -import { Link } from '@/components/Link'; import { WithReceipt } from '@/components/WithReceipt'; import { Icon, IconName } from '@/components/Icon'; import { TransferStatusSteps } from '@/views/TransferStatusSteps'; import { LoadingDots } from '@/components/Loading/LoadingDots'; import { layoutMixins } from '@/styles/layoutMixins'; -import { popoverMixins } from '@/styles/popoverMixins'; -import { DateTime } from 'luxon'; type ElementProps = { toAmount?: number; @@ -40,6 +33,11 @@ export const TransferStatusToast = ({ const [open, setOpen] = useState(false); const [secondsLeft, setSecondsLeft] = useState(); + 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; @@ -64,7 +62,7 @@ export const TransferStatusToast = ({ {stringGetter({ - key: STRING_KEYS.DEPOSIT_STATUS, + key: type === 'deposit' ? STRING_KEYS.DEPOSIT_STATUS : STRING_KEYS.WITHDRAW_STATUS, params: { AMOUNT_USD: , ESTIMATED_DURATION: (