misc

src/App.tsx

@@ -99,12 +99,10 @@ const Content = () => {
   );
 };
 
-type ProviderWrapperProps = {
-  children: React.ReactNode;
-};
-
 const wrapProvider = (Component: React.ComponentType<any>, props?: any) => {
-  return ({ children }: ProviderWrapperProps) => <Component {...props}>{children}</Component>;
+  return ({ children }: { children: React.ReactNode }) => (
+    <Component {...props}>{children}</Component>
+  );
 };
 
 const providers = [
@@ -118,7 +116,7 @@ const providers = [
   wrapProvider(SquidProvider),
   wrapProvider(LocalNotificationsProvider),
   wrapProvider(NotificationsProvider),
-  wrapProvider(DialogAreaProvider)
+  wrapProvider(DialogAreaProvider),
 ];
 
 const App = () => {

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;

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',

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, string | undefined> = {
   [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);

src/hooks/useSquidRouter.tsx

@@ -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, string | undefined> = {
-  [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<typeof useSquidContext>;
-const SquidContext = createContext<SquidContextType>(undefined);
-SquidContext.displayName = '0xSquid';
-
-export const SquidProvider = ({ ...props }) => (
-  <SquidContext.Provider value={useSquidContext()} {...props} />
-);
-
-export const useSquid = () => useContext(SquidContext);

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",

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<boolean>(false);
   const [secondsLeft, setSecondsLeft] = useState<number | undefined>();
 
+  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 = ({
         <Styled.BridgingStatus>
           <Styled.Status>
             {stringGetter({
-              key: STRING_KEYS.DEPOSIT_STATUS,
+              key: type === 'deposit' ? STRING_KEYS.DEPOSIT_STATUS : STRING_KEYS.WITHDRAW_STATUS,
               params: {
                 AMOUNT_USD: <Styled.InlineOutput type={OutputType.Fiat} value={toAmount} />,
                 ESTIMATED_DURATION: (