bump v4-client

Fix Auto Deposit
Add Satoshi fonts, remove Circular (#23 )
2023-09-08 16:06:10 -07:00 · 2023-09-08 11:41:58 -07:00 · 2023-09-08 10:14:22 -07:00 · 2023-09-07 11:03:53 -07:00 · 2023-09-06 10:22:54 -07:00 · 2023-09-05 13:04:53 -07:00
59 changed files with 1217 additions and 2016 deletions
@@ -1,4 +1,4 @@
-# Contributing to Trader-Fe
+# Contributing to V4-web
 We love your input! We want to make contributing to this project as easy and transparent as possible, whether it's:

 - Reporting a bug
@@ -18,10 +18,10 @@ Pull requests are the best way to propose changes to the codebase (we use [Githu
 4. Issue that pull request!

 ## Any contributions you make will be under the same License
-When you submit code changes, your submissions are understood to be under the same [License](https://github.com/dydxprotocol/trader-fe/blob/master/LICENSE) that covers the project.
+When you submit code changes, your submissions are understood to be under the same [License](https://github.com/dydxprotocol/v4-web/blob/master/LICENSE) that covers the project.

-## Report bugs using Github's [issues](https://github.com/dydxprotocol/trader-fe/issues)
-Report a bug by [opening a new issue](https://github.com/dydxprotocol/trader-fe/issues/new).
+## Report bugs using Github's [issues](https://github.com/dydxprotocol/v4-web/issues)
+Report a bug by [opening a new issue](https://github.com/dydxprotocol/v4-web/issues/new).

 **Great Bug Reports** tend to have:

@@ -1,16 +1,19 @@
-Business Source License 1.1 
-License text copyright © 2023 MariaDB plc, All Rights Reserved. “Business Source License” is a trademark of MariaDB plc.
-Copyright (C) 2023 dYdX Trading Inc.
+Subject to your compliance with applicable law, you are granted the right to use the Licensed Work (defined below) under the terms of the below licenses; provided, however, that if you violate any such applicable law in your use of the Licensed Work, all of your rights and licenses to use (including any rights to reproduce, distribute, install or modify) the Licensed Work will automatically and immediately terminate.

 Use of this software before the Change Date specified in the LICENSE file is governed by the Business Source License included in the LICENSE file and at https://spdx.org/licenses/BUSL-1.1.html.

 On and after the Change Date specified in the LICENSE file, use of this software will be governed by the Change License (GNU Affero GPL v3) as specified in the LICENSE file.

+
+Business Source License 1.1 
+Business Source License text copyright © 2023 MariaDB plc, All Rights Reserved. “Business Source License” is a trademark of MariaDB plc.
+Copyright (C) 2023 dYdX Trading Inc.
+
 Parameters
 Licensor: dYdX Trading Inc.
 Licensed Work: dydxprotocol/cosmos-sdk, dydxprotocol/cometbft, dydxprotocol/v4-chain, dydxprotocol/v4-clients, dydxprotocol/v4-web, dydxprotocol/v4-abacus, dydxprotocol/v4-localization, dydxprotocol/v4-documentation, and any dYdX or dYdX Trading Inc. github repository reflecting a copy of this license, or link to this license. 
 Additional Use Grant: None
-Change Date: On the later to occur of (i) the release of the Licensed Work labeled “dYdX Version 1.0 GPL”, and which includes a document uploaded to the relevant github repository stating “The software in this repository is Version 1.0, subject to GPL license”, and (ii) September 30, 2023 (approximate projected release of “Version 1.0” of this software).
+Change Date: On the later to occur of (i) the release of the Licensed Work labeled “dYdX Version 1.0 Affero GPL”, and which includes a document uploaded to the relevant github repository stating “The software in this repository is Version 1.0, subject to Affero GPL license”, and (ii) September 30, 2023 (approximate projected release of “Version 1.0” of this software).
 Change License: GNU Affero GPL License v3

 License text copyright © 2023 MariaDB plc, All Rights Reserved. “Business Source License” is a trademark of MariaDB plc.
@@ -39,7 +42,7 @@ OPEN SOURCE LICENSE BELOW - TO BE APPLIED AFTER THE CHANGE DATE.

 Copyright (C) 2023 dYdX Trading Inc.

-Use of this software is governed by the The GNU Affero General Public License as set forth below. 
+Subject to your compliance with applicable law, you are granted the right to use the Licensed Work (defined below) under the terms of the GNU Affero General Public License as set forth below; provided, however, that if you violate any such applicable law in your use of the Licensed Work, all of your rights and licenses to use (including any rights to reproduce, distribute, install or modify) the Licensed Work will automatically and immediately terminate.


 The GNU Affero General Public License
@@ -835,4 +838,4 @@ copy of the Program in return for a fee.


 For more information about this software, see https://dydx.exchange. 
- Copyright (C) 2023 dYdX Trading Inc.
+ Copyright (C) 2023 dYdX Trading Inc.
@@ -22,8 +22,8 @@ Alternatively, follow the [IPFS Kubo installation guide](https://docs.ipfs.tech
 Clone the repository and navigate to its directory:

 ```bash
-git clone https://github.com/dydxprotocol/trader-fe.git
-cd trader-fe
+git clone https://github.com/dydxprotocol/v4-web.git
+cd v4-web
 ```

 ### Step 2: Install pnpm and dependencies
@@ -102,3 +102,47 @@ To access your content on IPFS:
 2. **Public IPFS gateway:** Access your content via a public IPFS gateway, such as [https://dweb.link](https://dweb.link/) or [https://w3s.link/](https://w3s.link/). Use the gateway URL with your CID appended, like `https://dweb.link/ipfs/your_cid`.

 Replace `your_cid` with the actual CID.
+
+
+## Part 5: Customization
+
+### Using CircularXX font
+
+1. **Procure a license for CircularXX:** Visit [Lineto](https://lineto.com/shop/select?family=circular&set=DOPhtVQR-8m) and add `Circular/Family Package` + `Circular Mono/Regular` to your cart. Check the applicable boxes in the `Configure` step to fill out licensing information. After the `Payment` step, download the `.woff2` files.
+
+2. **Add the fonts to `v4-web`:** Add `CircularXXWeb-Bold.woff2`, `CircularXXWeb-Book.woff2`, `CircularXXWeb-Medium.woff2`, and `CircularXXMonoWeb-Regular.woff2` to the `src/styles/fonts` directory.
+
+3. **Add font-family to stylesheets:** In `src/styles/fonts.css`, add the following code to import your newly purchased `Circular` font.
+```css
+  @font-face {
+    src: url("fonts/CircularXXWeb-Book.woff2") format("woff2");
+    font-family: "Circular";
+    font-weight: 450;
+  }
+
+  @font-face {
+    src: url("fonts/CircularXXWeb-Medium.woff2") format("woff2");
+    font-family: "Circular";
+    font-weight: 500;
+  }
+
+  @font-face {
+    src: url("fonts/CircularXXWeb-Bold.woff2") format("woff2");
+    font-family: "Circular";
+    font-weight: 700;
+  }
+
+  @font-face {
+    src: url("fonts/CircularXXMonoWeb-Regular.woff2") format("woff2");
+    font-family: "CircularMono";
+    font-weight: 400;
+  }
+```
+
+In `src/styles/text.css`, update lines `4` and `5` to
+```css
+  --fontFamily-base: "Circular", "Satoshi", system-ui, -apple-system, Helvetica, Arial, sans-serif;
+  --fontFamily-monospace: "CircularMono", Courier, monospace, var(--fontFamily-base);
+```
+
+Enjoy the newly installed font.
@@ -30,15 +30,15 @@
  },
  "packageManager": "pnpm@8.6.6",
  "dependencies": {
-    "@0xsquid/sdk": "^1.7.2",
+    "@0xsquid/sdk": "^1.10.0",
    "@cosmjs/amino": "^0.31.0",
    "@cosmjs/crypto": "^0.31.0",
    "@cosmjs/encoding": "^0.31.0",
    "@cosmjs/proto-signing": "^0.31.0",
    "@cosmjs/stargate": "^0.31.0",
    "@cosmjs/tendermint-rpc": "^0.31.0",
-    "@dydxprotocol/abacus": "^0.4.6",
-    "@dydxprotocol/v4-client-js": "^0.32.0",
+    "@dydxprotocol/abacus": "^0.4.7",
+    "@dydxprotocol/v4-client-js": "^0.33.1",
    "@dydxprotocol/v4-localization": "^0.0.25",
    "@ethersproject/providers": "^5.7.2",
    "@js-joda/core": "^5.5.3",
@@ -13,8 +13,9 @@ import { AccountsProvider } from '@/hooks/useAccounts';
 import { DialogAreaProvider, useDialogArea } from './hooks/useDialogArea';
 import { LocaleProvider } from './hooks/useLocaleSeparators';
 import { NotificationsProvider } from './hooks/useNotifications';
+import { LocalNotificationsProvider } from './hooks/useLocalNotifications';
 import { SubaccountProvider } from './hooks/useSubaccount';
-import { SquidProvider } from '@/hooks/useSquidRouter';
+import { SquidProvider } from '@/hooks/useSquid';

 import { GuardedMobileRoute } from '@/components/GuardedMobileRoute';

@@ -98,29 +99,31 @@ const Content = () => {
  );
 };

-const App = () => (
-  <QueryClientProvider client={queryClient}>
-    <GrazProvider>
-      <WagmiConfig config={config}>
-        <LocaleProvider>
-          <DydxProvider>
-            <AccountsProvider>
-              <SubaccountProvider>
-                <NotificationsProvider>
-                  <DialogAreaProvider>
-                    <SquidProvider>
-                      <Content />
-                    </SquidProvider>
-                  </DialogAreaProvider>
-                </NotificationsProvider>
-              </SubaccountProvider>
-            </AccountsProvider>
-          </DydxProvider>
-        </LocaleProvider>
-      </WagmiConfig>
-    </GrazProvider>
-  </QueryClientProvider>
-);
+const wrapProvider = (Component: React.ComponentType<any>, props?: any) => {
+  return ({ children }: { children: React.ReactNode }) => (
+    <Component {...props}>{children}</Component>
+  );
+};
+
+const providers = [
+  wrapProvider(QueryClientProvider, { client: queryClient }),
+  wrapProvider(GrazProvider),
+  wrapProvider(WagmiConfig, { config }),
+  wrapProvider(LocaleProvider),
+  wrapProvider(DydxProvider),
+  wrapProvider(AccountsProvider),
+  wrapProvider(SubaccountProvider),
+  wrapProvider(SquidProvider),
+  wrapProvider(LocalNotificationsProvider),
+  wrapProvider(NotificationsProvider),
+  wrapProvider(DialogAreaProvider),
+];
+
+const App = () => {
+  return [...providers].reverse().reduce((children, Provider) => {
+    return <Provider>{children}</Provider>;
+  }, <Content />);
+};

 const Styled: Record<string, AnyStyledComponent> = {};

@@ -0,0 +1,222 @@
+[
+  {
+    "constant": true,
+    "inputs": [],
+    "name": "name",
+    "outputs": [
+      {
+        "name": "",
+        "type": "string"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "name": "_spender",
+        "type": "address"
+      },
+      {
+        "name": "_value",
+        "type": "uint256"
+      }
+    ],
+    "name": "approve",
+    "outputs": [
+      {
+        "name": "",
+        "type": "bool"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [],
+    "name": "totalSupply",
+    "outputs": [
+      {
+        "name": "",
+        "type": "uint256"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "name": "_from",
+        "type": "address"
+      },
+      {
+        "name": "_to",
+        "type": "address"
+      },
+      {
+        "name": "_value",
+        "type": "uint256"
+      }
+    ],
+    "name": "transferFrom",
+    "outputs": [
+      {
+        "name": "",
+        "type": "bool"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [],
+    "name": "decimals",
+    "outputs": [
+      {
+        "name": "",
+        "type": "uint8"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [
+      {
+        "name": "_owner",
+        "type": "address"
+      }
+    ],
+    "name": "balanceOf",
+    "outputs": [
+      {
+        "name": "balance",
+        "type": "uint256"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [],
+    "name": "symbol",
+    "outputs": [
+      {
+        "name": "",
+        "type": "string"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "name": "_to",
+        "type": "address"
+      },
+      {
+        "name": "_value",
+        "type": "uint256"
+      }
+    ],
+    "name": "transfer",
+    "outputs": [
+      {
+        "name": "",
+        "type": "bool"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [
+      {
+        "name": "_owner",
+        "type": "address"
+      },
+      {
+        "name": "_spender",
+        "type": "address"
+      }
+    ],
+    "name": "allowance",
+    "outputs": [
+      {
+        "name": "",
+        "type": "uint256"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "payable": true,
+    "stateMutability": "payable",
+    "type": "fallback"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": true,
+        "name": "owner",
+        "type": "address"
+      },
+      {
+        "indexed": true,
+        "name": "spender",
+        "type": "address"
+      },
+      {
+        "indexed": false,
+        "name": "value",
+        "type": "uint256"
+      }
+    ],
+    "name": "Approval",
+    "type": "event"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": true,
+        "name": "from",
+        "type": "address"
+      },
+      {
+        "indexed": true,
+        "name": "to",
+        "type": "address"
+      },
+      {
+        "indexed": false,
+        "name": "value",
+        "type": "uint256"
+      }
+    ],
+    "name": "Transfer",
+    "type": "event"
+  }
+]
@@ -17,6 +17,7 @@ type ElementProps = {
  slotIcon?: React.ReactNode;
  slotTitle?: React.ReactNode;
  slotDescription?: React.ReactNode;
+  slotCustomContent?: React.ReactNode;
  slotAction?: React.ReactNode;
  actionDescription?: string;
  actionAltText?: string;
@@ -33,6 +34,7 @@ export const Toast = ({
  slotIcon,
  slotTitle,
  slotDescription,
+  slotCustomContent,
  slotAction,
  actionDescription = '',
  actionAltText = actionDescription,
@@ -78,12 +80,13 @@ export const Toast = ({

            <$Title>{slotTitle}</$Title>
          </$Header>
-
-          <$Description>{slotDescription}</$Description>
-
-          <$Action asChild altText={actionAltText}>
-            {slotAction}
-          </$Action>
+          {!slotCustomContent && <$Description>{slotDescription}</$Description>}
+          {slotCustomContent}
+          {actionDescription && (
+            <$Action asChild altText={actionAltText}>
+              {slotAction}
+            </$Action>
+          )}
        </$Container>
      </div>
    </$Root>
@@ -49,11 +49,11 @@ export enum EvmDerivedAccountStatus {
  Derived,
 }

-import type { DydxAddress, EthereumAddress } from './wallets';
+import type { DydxAddress, EvmAddress } from './wallets';

 export type EvmDerivedAddresses = {
  version?: string;
-  [EthereumAddress: EthereumAddress]: {
+  [EvmAddress: EvmAddress]: {
    encryptedSignature?: string;
    dydxAddress?: DydxAddress;
  };
@@ -1,7 +1,7 @@
 import type { SupportedLocales } from './localization';
 import type { DydxNetwork } from './networks';
 import type { OnboardingState, OnboardingSteps } from './account';
-import type { DydxAddress, WalletType, WalletConnectionType, EthereumAddress } from './wallets';
+import type { DydxAddress, WalletType, WalletConnectionType, EvmAddress } from './wallets';
 import type { DialogTypes } from './dialogs';
 import type { TradeTypes } from './trade';
 import type { AbacusApiStatus, HumanReadablePlaceOrderPayload } from './abacus';
@@ -40,7 +40,7 @@ export type AnalyticsUserPropertyValue<T extends AnalyticsUserProperty> =
    : T extends AnalyticsUserProperty.WalletConnectionType
    ? WalletConnectionType | undefined
    : T extends AnalyticsUserProperty.WalletAddress
-    ? EthereumAddress | DydxAddress | undefined
+    ? EvmAddress | DydxAddress | undefined
    : // Account
    T extends AnalyticsUserProperty.DydxAddress
    ? DydxAddress | undefined
@@ -12,6 +12,7 @@ export enum LocalStorageKey {
  NotificationsLastUpdated = 'dydx.NotificationsLastUpdated',
  PushNotificationsEnabled = 'dydx.PushNotificationsEnabled',
  PushNotificationsLastUpdated = 'dydx.PushNotificationsLastUpdated',
+  TransferNotifications = 'dydx.TransferNotifications',

  // UI State
  LastViewedMarket = 'dydx.LastViewedMarket',
@@ -34,6 +34,8 @@ export const STRING_KEYS = {
  ...WARNINGS_STRING_KEYS,
 };

+export type StringKey = keyof typeof STRING_KEYS;
+
 export type LocaleData = typeof EN_LOCALE_DATA;

 export type StringGetterFunction = (a: {
@@ -1,36 +1,6 @@
 import { Asset, PerpetualMarket } from '@/constants/abacus';
 import { STRING_KEYS } from '@/constants/localization';

-export interface Market {
-  market: string;
-  status: string;
-  baseAsset: string;
-  quoteAsset: string;
-  stepSize: string;
-  tickSize: string;
-  oraclePrice: string;
-  priceChange24H: string;
-  nextFundingRate: string;
-  nextFundingAt: string;
-  minOrderSize: string;
-  type: string;
-  initialMarginFraction: string;
-  maintenanceMarginFraction: string;
-  volume24H: string;
-  trades24H: string;
-  openInterest: string;
-  incrementalInitialMarginFraction: string;
-  incrementalPositionSize: string;
-  maxPositionSize: string;
-  baselinePositionSize: string;
-  assetResolution: string;
-  syntheticAssetId: string;
-}
-
-export type AllMarkets = {
-  [market: string]: Market;
-};
-
 export type MarketData = {
  asset: Asset;
  tickSizeDecimals: number;
@@ -1,16 +1,22 @@
+import { StatusResponse } from "@0xsquid/sdk";
+
 /** implemented in useNotificationTypes */
 export enum NotificationType {
  OrderStatusChanged = 'OrderStatusChanged',
+  SquidTransfer = 'SquidTransfer',
 }

 export enum NotificationComponentType {}

-export type NotificationId = string | number
+export type NotificationId = string | number;

-export type NotificationTypeConfig<_NotificationId extends NotificationId = string, NotificationUpdateKey = any> = {
+export type NotificationTypeConfig<
+  _NotificationId extends NotificationId = string,
+  NotificationUpdateKey = any
+> = {
  type: NotificationType;

-  /** React hook to trigger notifications based on app state */ 
+  /** React hook to trigger notifications based on app state */
  useTrigger: (_: {
    trigger: (
      /** Unique ID for the triggered notification */
@@ -30,7 +36,7 @@ export type NotificationTypeConfig<_NotificationId extends NotificationId = stri
       * @param true (default): Notification initialized with status NotificationStatus.Triggered
       * @param false: Notification initialized with status NotificationStatus.Cleared
       */
-      isNew?: boolean,
+      isNew?: boolean
    ) => void;

    lastUpdated: number;
@@ -58,7 +64,10 @@ export enum NotificationStatus {
 }

 /** Notification state. Serialized and cached into localStorage. */
-export type Notification<_NotificationId extends NotificationId = string, NotificationUpdateKey = any> = {
+export type Notification<
+  _NotificationId extends NotificationId = string,
+  NotificationUpdateKey = any
+> = {
  id: _NotificationId;
  type: NotificationType;
  status: NotificationStatus;
@@ -74,7 +83,11 @@ export type NotificationDisplayData = {

  title?: string;

-  description?: string;
+  description?: React.ReactNode;
+
+  customContent?: React.ReactNode;
+
+  customMenuContent?: React.ReactNode;

  actionDescription?: string;

@@ -101,3 +114,13 @@ export type NotificationDisplayData = {
   */
  toastDuration?: number;
 };
+
+// Notification types
+export type TransferNotifcation = {
+  txHash: string;
+  toChainId?: string;
+  fromChainId?: string;
+  toAmount?: number;
+  triggeredAt?: number;
+  status?: StatusResponse;
+};
@@ -337,7 +337,7 @@ export const SIGN_TYPED_DATA = {

 export type PrivateInformation = ReturnType<typeof onboarding.deriveHDKeyFromEthereumSignature>;

-export type EthereumAddress = `0x${string}`;
+export type EvmAddress = `0x${string}`;
 export type DydxAddress = `dydx${string}`;

 export const DYDX_CHAIN_INFO: Parameters<typeof suggestChain>[0] = {
@@ -7,7 +7,7 @@ import { formatUnits } from 'viem';

 import { CLIENT_NETWORK_CONFIGS } from '@/constants/networks';
 import { QUANTUM_MULTIPLIER } from '@/constants/numbers';
-import { EthereumAddress } from '@/constants/wallets';
+import { EvmAddress } from '@/constants/wallets';

 import { convertBech32Address } from '@/lib/addressUtils';
 import { MustBigNumber } from '@/lib/numbers';
@@ -59,7 +59,7 @@ export const useAccountBalance = ({
    token:
      addressOrDenom === CHAIN_DEFAULT_TOKEN_ADDRESS
        ? undefined
-        : (addressOrDenom as EthereumAddress),
+        : (addressOrDenom as EvmAddress),
    watch: true,
  });

@@ -6,7 +6,7 @@ import { LocalWallet, USDC_DENOM, type Subaccount } from '@dydxprotocol/v4-clien

 import { OnboardingGuard, OnboardingState, type EvmDerivedAddresses } from '@/constants/account';
 import { LocalStorageKey, LOCAL_STORAGE_VERSIONS } from '@/constants/localStorage';
-import { DydxAddress, EthereumAddress, PrivateInformation } from '@/constants/wallets';
+import { DydxAddress, EvmAddress, PrivateInformation } from '@/constants/wallets';

 import {
  setOnboardingState,
@@ -82,7 +82,7 @@ const useAccountsContext = () => {
    evmAddress,
    dydxAddress,
  }: {
-    evmAddress: EthereumAddress;
+    evmAddress: EvmAddress;
    dydxAddress?: DydxAddress;
  }) => {
    saveEvmDerivedAddresses({
@@ -192,7 +192,7 @@ const useAccountsContext = () => {
        } catch (error) {
          log('useAccounts/setLocalDydxWallet', error);
        }
-      } else if (evmAddress && signerWagmi) {
+      } else if (evmAddress) {
        if (!localDydxWallet) {
          dispatch(setOnboardingState(OnboardingState.WalletConnected));

@@ -4,7 +4,7 @@ import { useMatch, useNavigate } from 'react-router-dom';

 import { LocalStorageKey } from '@/constants/localStorage';
 import { DEFAULT_MARKETID } from '@/constants/markets';
-import { AppRoute, DEFAULT_TRADE_ROUTE } from '@/constants/routes';
+import { AppRoute } from '@/constants/routes';

 import { getSelectedNetwork } from '@/state/appSelectors';
 import { closeDialogInTradeBox } from '@/state/dialogs';
@@ -0,0 +1,98 @@
+import { createContext, useContext, useCallback, useEffect, useMemo } from 'react';
+import { useQuery } from 'react-query';
+import type { StatusResponse } from '@0xsquid/sdk';
+
+import { LocalStorageKey } from '@/constants/localStorage';
+import { type TransferNotifcation } from '@/constants/notifications';
+
+import { useAccounts } from '@/hooks/useAccounts';
+import { useSquid } from '@/hooks/useSquid';
+import { useLocalStorage } from './useLocalStorage';
+
+const LocalNotificationsContext = createContext<
+  ReturnType<typeof useLocalNotificationsContext> | undefined
+>(undefined);
+
+LocalNotificationsContext.displayName = 'LocalNotifications';
+
+export const LocalNotificationsProvider = ({ ...props }) => (
+  <LocalNotificationsContext.Provider value={useLocalNotificationsContext()} {...props} />
+);
+
+export const useLocalNotifications = () => useContext(LocalNotificationsContext)!;
+
+const TRANSFER_STATUS_FETCH_INTERVAL = 10_000;
+
+const useLocalNotificationsContext = () => {
+  // transfer notifications
+  const [allTransferNotifications, setAllTransferNotifications] = useLocalStorage<{
+    [key: `dydx${string}`]: TransferNotifcation[];
+  }>({
+    key: LocalStorageKey.TransferNotifications,
+    defaultValue: {},
+  });
+
+  const { dydxAddress } = useAccounts();
+
+  const transferNotifications = dydxAddress ? allTransferNotifications[dydxAddress] || [] : [];
+
+  const setTransferNotifications = useCallback(
+    (notifications: TransferNotifcation[]) => {
+      if (!dydxAddress) return;
+      const updatedNotifications = { ...allTransferNotifications };
+      updatedNotifications[dydxAddress] = notifications;
+      setAllTransferNotifications(updatedNotifications);
+    },
+    [setAllTransferNotifications, dydxAddress]
+  );
+
+  const addTransferNotification = useCallback(
+    (notification: TransferNotifcation) =>
+      setTransferNotifications([...transferNotifications, notification]),
+    [transferNotifications]
+  );
+
+  const squid = useSquid();
+
+  const { data: transferStatuses } = useQuery({
+    queryKey: ['getTransactionStatus', transferNotifications],
+    queryFn: async () => {
+      const statuses: { [key: string]: StatusResponse } = {};
+      for (const {
+        txHash,
+        toChainId,
+        fromChainId,
+        status: currentStatus,
+      } of transferNotifications) {
+        try {
+          if (currentStatus && currentStatus?.squidTransactionStatus !== 'ongoing') continue;
+  
+          const status = await squid?.getStatus({ transactionId: txHash, toChainId, fromChainId });
+          if (status) statuses[txHash] = status;
+        } catch (error) {
+          console.error(error);
+        }
+      }
+      return statuses;
+    },
+    refetchInterval: TRANSFER_STATUS_FETCH_INTERVAL,
+  });
+
+  useEffect(() => {
+    if (!transferStatuses) return;
+    const newTransferNotifications = transferNotifications.map((notification) => {
+      const status = transferStatuses[notification.txHash];
+      if (!status) return notification;
+      return {
+        ...notification,
+        status,
+      };
+    });
+    setTransferNotifications(newTransferNotifications);
+  }, [transferStatuses]);
+
+  return {
+    transferNotifications,
+    addTransferNotification,
+  };
+};
@@ -1,4 +1,4 @@
-import { useEffect, useMemo } from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
 import { useSelector, shallowEqual, useDispatch } from 'react-redux';
 import { groupBy } from 'lodash';

@@ -8,12 +8,20 @@ import { STRING_KEYS } from '@/constants/localization';
 import { type NotificationTypeConfig, NotificationType } from '@/constants/notifications';
 import { ORDER_SIDE_STRINGS, TRADE_TYPE_STRINGS, TradeTypes } from '@/constants/trade';

+import { useLocalNotifications } from '@/hooks/useLocalNotifications';
+
+import { Icon, IconName } from '@/components/Icon';
+import { Output, OutputType } from '@/components/Output';
+import { TransferStatusToast } from '@/views/TransferStatus';
+
 import { getSubaccountFills, getSubaccountOrders } from '@/state/accountSelectors';
 import { openDialog } from '@/state/dialogs';

 import { OrderStatusIcon } from '@/views/OrderStatusIcon';

 import { useStringGetter } from './useStringGetter';
+import { TransferStatusSteps } from '@/views/TransferStatusSteps';
+import { TESTNET_CHAIN_ID } from '@dydxprotocol/v4-client-js';

 export const notificationTypes = [
  {
@@ -93,4 +101,51 @@ export const notificationTypes = [
      };
    },
  } as NotificationTypeConfig<string, [string, number]>,
+  {
+    type: NotificationType.SquidTransfer,
+    useTrigger: ({ trigger }) => {
+      const stringGetter = useStringGetter();
+      const { transferNotifications } = useLocalNotifications();
+
+      const getTitleStringKey = useCallback((type: 'deposit' | 'withdraw', 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;
+        return STRING_KEYS.WITHDRAW;
+      }, []);
+
+      useEffect(() => {
+        for (const transfer of transferNotifications) {
+          const { toChainId, status, txHash, toAmount } = transfer;
+          const finished = Boolean(status) && status?.squidTransactionStatus !== 'ongoing';
+          const type = toChainId === TESTNET_CHAIN_ID ? 'deposit' : 'withdraw';
+
+          trigger(
+            txHash,
+            {
+              icon: <Icon iconName={finished ? IconName.Transfer : IconName.Clock} />,
+              title: stringGetter({ key: getTitleStringKey(type, finished) }),
+              // TODO: confirm with design what the description should be
+              description: (
+                <>
+                  <span>{type === 'deposit' ? 'Deposit of ' : 'Withdraw of'}</span>
+                  <Output type={OutputType.Fiat} value={toAmount} />
+                </>
+              ),
+              customContent: (
+                <TransferStatusToast
+                  toAmount={transfer.toAmount}
+                  triggeredAt={transfer.triggeredAt}
+                  status={transfer.status}
+                />
+              ),
+              customMenuContent: !finished && <TransferStatusSteps status={transfer.status} />,
+              toastSensitivity: 'foreground',
+            },
+            []
+          );
+        }
+      }, [transferNotifications]);
+    },
+  },
 ] satisfies NotificationTypeConfig[];
@@ -106,7 +106,10 @@ const useNotificationsContext = () => {
              updateKey,
            } as Notification);

-            updateStatus(notification, isNew ? NotificationStatus.Triggered : NotificationStatus.Cleared);
+            updateStatus(
+              notification,
+              isNew ? NotificationStatus.Triggered : NotificationStatus.Cleared
+            );
          }

          // updateKey changed - update existing notification
@@ -141,7 +144,9 @@ const useNotificationsContext = () => {
  // Push notifications
  const [hasEnabledPush, setHasEnabledPush] = useLocalStorage({
    key: LocalStorageKey.PushNotificationsEnabled,
-    defaultValue: Boolean(globalThis.Notification && globalThis.Notification.permission === 'granted'),
+    defaultValue: Boolean(
+      globalThis.Notification && globalThis.Notification.permission === 'granted'
+    ),
  });
  const [isEnablingPush, setIsEnablingPush] = useState(false);

@@ -236,4 +241,3 @@ const useNotificationsContext = () => {
    setIsMenuOpen,
  };
 };
-// }
@@ -1,17 +1,13 @@
 import { createContext, useContext, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
+import { TESTNET_CHAIN_ID } from '@dydxprotocol/v4-client-js';
 import { Squid } from '@0xsquid/sdk';

-import { DydxV4Network, isDydxV4Network } from '@/constants/networks';
+import { CLIENT_NETWORK_CONFIGS, 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',
-};
+export const NATIVE_TOKEN_ADDRESS = "0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE";

 const useSquidContext = () => {
  const selectedNetwork = useSelector(getSelectedNetwork);
@@ -27,7 +23,7 @@ const useSquidContext = () => {
  const squid = useMemo(
    () =>
      isDydxV4Network(selectedNetwork)
-        ? new Squid({ baseUrl: SQUID_BASE_URL[selectedNetwork as DydxV4Network] })
+        ? new Squid({ baseUrl: CLIENT_NETWORK_CONFIGS[selectedNetwork]?.endpoints['0xsquid'] })
        : undefined,
    [selectedNetwork]
  );
@@ -100,7 +100,7 @@ export const useSubaccountContext = ({ localDydxWallet }: { localDydxWallet?: Lo
        subaccountClient: SubaccountClient;
        assetId?: number;
        amount: Long;
-      }) => await compositeClient?.validatorClient.post.deposit(subaccountClient, assetId, amount),
+      }) => await compositeClient?.validatorClient.post.deposit(subaccountClient, assetId, amount, false),

      withdrawFromSubaccount: async ({
        subaccountClient,
@@ -4,7 +4,7 @@ import { LocalStorageKey } from '@/constants/localStorage';

 import {
  type DydxAddress,
-  type EthereumAddress,
+  type EvmAddress,
  WalletConnectionType,
  WalletType,
  wallets,
@@ -17,6 +17,7 @@ import {
  useConnect as useConnectWagmi,
  useAccount as useAccountWagmi,
  useDisconnect as useDisconnectWagmi,
+  usePublicClient as usePublicClientWagmi,
  useWalletClient as useWalletClientWagmi,
 } from 'wagmi';
 import {
@@ -37,11 +38,12 @@ export const useWalletConnection = () => {
  const stringGetter = useStringGetter();

  // EVM wallet connection
-  const [evmAddress, saveEvmAddress] = useLocalStorage<EthereumAddress | undefined>({
+  const [evmAddress, saveEvmAddress] = useLocalStorage<EvmAddress | undefined>({
    key: LocalStorageKey.EvmAddress,
    defaultValue: undefined,
  });
  const { address: evmAddressWagmi, isConnected: isConnectedWagmi } = useAccountWagmi();
+  const publicClientWagmi = usePublicClientWagmi();
  const { data: signerWagmi } = useWalletClientWagmi();
  const { disconnectAsync: disconnectWagmi } = useDisconnectWagmi();

@@ -214,7 +216,8 @@ export const useWalletConnection = () => {
    evmAddress,
    evmAddressWagmi,
    signerWagmi,
-
+    publicClientWagmi,
+    
    // Wallet connection (Cosmos)
    dydxAddress,
    dydxAddressGraz,
@@ -41,6 +41,7 @@ export const NotificationsToastArea = ({ className }: StyleProps) => {
            slotIcon={displayData.icon}
            slotTitle={displayData.title}
            slotDescription={displayData.description}
+            slotCustomContent={displayData.customContent}
            slotAction={
              <Button size={ButtonSize.Small} onClick={() => onNotificationAction(notification)}>
                {displayData.actionDescription}
@@ -153,6 +153,7 @@ class AbacusStateManager {

  // ------ Set Data ------ //
  setStore = (store: RootStore) => {
+    this.store = store;
    this.stateNotifier.setStore(store);
  };

@@ -72,3 +72,9 @@ export const getTimeTillNextUnit = (unit: 'minute' | 'hour' | 'day') => {
 };

 export const getTimeString = (time: number) => time.toString().padStart(2, '0');
+
+export const formatSeconds = (seconds: number) => {
+  const minutes = Math.floor(seconds / 60);
+  const remainingSeconds = seconds % 60;
+  return `${getTimeString(minutes)}:${getTimeString(remainingSeconds)}`;
+}
@@ -1,38 +1,42 @@
-/*
- * Legal Disclaimer for Web licence
+/**
+ * @license
 *
- * Licence to use self-hosted webfonts for displaying dynamic text on specified website domains. Our package includes WOFF and WOFF2 font formats.
+ * Font Family: Satoshi
+ * Designed by: Deni Anggara
+ * URL: https://www.fontshare.com/fonts/satoshi
+ * © 2023 Indian Type Foundry
 *
- * Should the license page views limit be exceeded the license holder will be required to contact Lineto.com for an upgrade.
- * 
- * It is strictly prohibited to rename the font and to download or use these fonts in any other media. 
- * 
- * These Web fonts are licensed exclusively for the use on the following domain(s) and their subdomains:
- *
- * dydx.exchange (monthly pageviews: <50K)
- *
- */
+ * Font Styles:
+ * Satoshi Regular
+ * Satoshi Medium
+ * Satoshi Bold
+ * Satoshi Black
+*/
+

@font-face {
-  src: url("fonts/CircularXXWeb-Book.woff2") format("woff2");
-  font-family: "Circular";
-  font-weight: 450;
+  src: url("fonts/Satoshi-Regular.woff2") format("woff2");
+  font-family: "Satoshi";
+  font-weight: 400;
 }

+
@font-face {
-  src: url("fonts/CircularXXWeb-Medium.woff2") format("woff2");
-  font-family: "Circular";
+  src: url("fonts/Satoshi-Medium.woff2") format("woff2");
+  font-family: "Satoshi";
  font-weight: 500;
 }

+
@font-face {
-  src: url("fonts/CircularXXWeb-Bold.woff2") format("woff2");
-  font-family: "Circular";
+  src: url("fonts/Satoshi-Bold.woff2") format("woff2");
+  font-family: "Satoshi";
  font-weight: 700;
 }

@font-face {
-  src: url("fonts/CircularXXMonoWeb-Regular.woff2") format("woff2");
-  font-family: "CircularMono";
-  font-weight: 400;
+  src: url("fonts/Satoshi-Black.woff2") format("woff2");
+  font-family: "Satoshi";
+  font-weight: 900;
 }
+
@@ -1,22 +1,16 @@
 /* Constants */

 :root {
-  --fontFamily-base: "Circular", system-ui, -apple-system, Helvetica, Arial, sans-serif;
-  --fontFamily-monospace: "CircularMono", Courier, monospace, var(--fontFamily-base);
+  --fontFamily-base: "Satoshi", system-ui, -apple-system, Helvetica, Arial, sans-serif;
+  --fontFamily-monospace: Courier, monospace, var(--fontFamily-base);

  --fontWeight-base-0: 450;
  --fontWeight-base-1: 500;
  --fontWeight-base-2: 700;
-  --fontWeight-monospace: 400;

  --letter-spacing-base: -0.02em;

  /* New Typography system */
-
-  /**
-   * @size 10px/11px
-   * @weight 400
-   */
  --fontSize-tiny: 0.625rem; /* 10px/11px */
  --fontSize-mini: 0.75rem; /* 12px/13px */
  --fontSize-small: 0.8438rem; /* 13.5px/14.5px */
@@ -2,7 +2,7 @@ import { shallowEqual, useSelector } from 'react-redux';
 import styled, { type AnyStyledComponent } from 'styled-components';

 import { ButtonShape, ButtonSize, ButtonType } from '@/constants/buttons';
-import { STRING_KEYS } from '@/constants/localization';
+import { STRING_KEYS, type StringKey } from '@/constants/localization';
 import { useBreakpoints, useStringGetter } from '@/hooks';
 import { breakpoints } from '@/styles';
 import { layoutMixins } from '@/styles/layoutMixins';
@@ -34,10 +34,7 @@ export const MarketDetails: React.FC = () => {
    initialMarginFraction,
    maintenanceMarginFraction,
    minOrderSize,
-    maxPositionSize,
-    baselinePositionSize,
-    incrementalInitialMarginFraction,
-    incrementalPositionSize,
+    stepSizeDecimals,
    tickSizeDecimals,
  } = configs;

@@ -72,12 +69,28 @@ export const MarketDetails: React.FC = () => {
      key: 'step-size',
      label: stringGetter({ key: STRING_KEYS.STEP_SIZE }),
      tooltip: 'step-size',
-      value: <Output useGrouping value={stepSize} type={OutputType.Asset} tag={symbol} />,
+      value: (
+        <Output
+          useGrouping
+          value={stepSize}
+          type={OutputType.Asset}
+          tag={symbol}
+          fractionDigits={stepSizeDecimals}
+        />
+      ),
    },
    {
      key: 'min-order-size',
      label: stringGetter({ key: STRING_KEYS.MINIMUM_ORDER_SIZE }),
-      value: <Output useGrouping value={minOrderSize} type={OutputType.Asset} tag={symbol} />,
+      value: (
+        <Output
+          useGrouping
+          value={minOrderSize}
+          type={OutputType.Asset}
+          tag={symbol}
+          fractionDigits={stepSizeDecimals}
+        />
+      ),
    },
    {
      key: 'max-leverage',
@@ -105,36 +118,6 @@ export const MarketDetails: React.FC = () => {
      tooltip: 'initial-margin-fraction',
      value: <Output useGrouping value={initialMarginFraction} type={OutputType.SmallPercent} />,
    },
-    {
-      key: 'incremental-initial-margin-fraction',
-      label: stringGetter({ key: STRING_KEYS.INCREMENTAL_INITIAL_MARGIN_FRACTION }),
-      value: (
-        <Output
-          useGrouping
-          value={incrementalInitialMarginFraction}
-          type={OutputType.SmallPercent}
-        />
-      ),
-    },
-    {
-      key: 'incremental-position-size',
-      label: stringGetter({ key: STRING_KEYS.INCREMENTAL_POSITION_SIZE }),
-      value: (
-        <Output useGrouping value={incrementalPositionSize} type={OutputType.Asset} tag={symbol} />
-      ),
-    },
-    {
-      key: 'baseline-position-size',
-      label: stringGetter({ key: STRING_KEYS.BASELINE_POSITION_SIZE }),
-      value: (
-        <Output useGrouping value={baselinePositionSize} type={OutputType.Asset} tag={symbol} />
-      ),
-    },
-    {
-      key: 'max-position-size',
-      label: stringGetter({ key: STRING_KEYS.MAXIMUM_POSITION_SIZE }),
-      value: <Output useGrouping value={maxPositionSize} type={OutputType.Asset} tag={symbol} />,
-    },
  ];

  return (
@@ -150,10 +133,10 @@ export const MarketDetails: React.FC = () => {

        <Styled.MarketDescription>
          {primaryDescriptionKey && (
-            <p>{stringGetter({ key: STRING_KEYS[primaryDescriptionKey] })}</p>
+            <p>{stringGetter({ key: STRING_KEYS[primaryDescriptionKey as StringKey] })}</p>
          )}
          {secondaryDescriptionKey && (
-            <p>{stringGetter({ key: STRING_KEYS[secondaryDescriptionKey] })}</p>
+            <p>{stringGetter({ key: STRING_KEYS[secondaryDescriptionKey as StringKey] })}</p>
          )}
        </Styled.MarketDescription>

@@ -1,7 +1,7 @@
 import { useState, useCallback } from 'react';
 import { useInterval } from '@/hooks';

-import { getTimeTillNextUnit, getTimeString } from '@/lib/timeUtils';
+import { getTimeTillNextUnit, formatSeconds } from '@/lib/timeUtils';
 import { Output, OutputType } from '@/components/Output';

 export const NextFundingTimer = () => {
@@ -18,7 +18,7 @@ export const NextFundingTimer = () => {
      type={OutputType.Text}
      value={
        secondsLeft !== undefined
-          ? `${getTimeString(Math.floor(secondsLeft / 60))}:${getTimeString(secondsLeft % 60)}`
+          ? formatSeconds(secondsLeft)
          : undefined
      }
    />
@@ -0,0 +1,156 @@
+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';
+
+import { useInterval, useStringGetter } from '@/hooks';
+
+import { STRING_KEYS } from '@/constants/localization';
+
+import { formatSeconds } from '@/lib/timeUtils';
+
+import { Output, OutputType } from '@/components/Output';
+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';
+
+type ElementProps = {
+  toAmount?: number;
+  triggeredAt?: number;
+  status?: StatusResponse;
+};
+
+export const TransferStatusToast = ({
+  toAmount,
+  triggeredAt = Date.now(),
+  status,
+}: ElementProps) => {
+  const stringGetter = useStringGetter();
+  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;
+    setSecondsLeft(Math.floor((triggeredAt + fromChainEta + toChainEta - Date.now()) / 1000));
+  }, [status]);
+
+  useInterval({ callback: updateSecondsLeft });
+
+  if (!status) return <LoadingDots size={3} />;
+
+  return (
+    <Styled.Root open={open} onOpenChange={setOpen}>
+      <WithReceipt
+        hideReceipt={!open}
+        side="bottom"
+        slotReceipt={
+          <Styled.Receipt>
+            <TransferStatusSteps status={status} />
+          </Styled.Receipt>
+        }
+      >
+        <Styled.BridgingStatus>
+          <Styled.Status>
+            {stringGetter({
+              key: type === 'deposit' ? STRING_KEYS.DEPOSIT_STATUS : STRING_KEYS.WITHDRAW_STATUS,
+              params: {
+                AMOUNT_USD: <Styled.InlineOutput type={OutputType.Fiat} value={toAmount} />,
+                ESTIMATED_DURATION: (
+                  <Styled.InlineOutput
+                    type={OutputType.Text}
+                    value={formatSeconds(Math.max(secondsLeft || 0, 0))}
+                  />
+                ),
+              },
+            })}
+          </Styled.Status>
+          <Styled.Trigger>
+            <Styled.TriggerIcon>
+              <Icon iconName={IconName.Caret} />
+            </Styled.TriggerIcon>
+            {stringGetter({ key: open ? STRING_KEYS.HIDE_DETAILS : STRING_KEYS.VIEW_DETAILS })}
+          </Styled.Trigger>
+        </Styled.BridgingStatus>
+      </WithReceipt>
+    </Styled.Root>
+  );
+};
+
+const Styled: Record<string, AnyStyledComponent> = {};
+
+Styled.Root = styled(Root)`
+  margin: 0.5rem -1rem -1rem -1rem;
+  color: var(--color-text-0);
+  font: var(--font-small-book);
+`;
+
+Styled.Receipt = styled.div`
+  padding: 0 1rem;
+`;
+
+Styled.BridgingStatus = styled.div`
+  ${layoutMixins.flexColumn};
+  background-color: var(--color-layer-3);
+
+  gap: 0.5rem;
+  padding: 0 1rem 1rem 1rem;
+  border-radius: 0.5rem;
+`;
+
+Styled.Status = styled.div`
+  color: var(--color-text-0);
+
+  font-size: 0.875rem;
+`;
+
+Styled.InlineOutput = styled(Output)`
+  display: inline-block;
+
+  color: var(--color-text-1);
+`;
+
+Styled.Content = styled(Content)`
+  ${layoutMixins.flexColumn};
+
+  gap: 0.5rem;
+  padding: 1rem;
+`;
+
+Styled.Step = styled.div`
+  ${layoutMixins.row};
+
+  gap: 0.5rem;
+`;
+
+Styled.Trigger = styled(Trigger)`
+  display: flex;
+  align-items: center;
+  gap: 0.5em;
+
+  color: var(--color-accent);
+  user-select: none;
+  &:focus {
+    outline: none;
+  }
+`;
+
+Styled.TriggerIcon = styled.span`
+  width: 0.75em;
+
+  display: inline-flex;
+  transition: transform 0.3s var(--ease-out-expo);
+
+  ${Styled.Trigger}[data-state='open'] & {
+    rotate: -0.5turn;
+  }
+`;
@@ -0,0 +1,175 @@
+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';
+
+import { Link } from '@/components/Link';
+import { Icon, IconName } from '@/components/Icon';
+import { LoadingDots } from '@/components/Loading/LoadingDots';
+import { LoadingSpinner } from '@/components/Loading/LoadingSpinner';
+
+import { layoutMixins } from '@/styles/layoutMixins';
+import { STRING_KEYS } from '@/constants/localization';
+
+type ElementProps = {
+  status?: StatusResponse;
+};
+
+enum TransferStatusStep {
+  FromChain,
+  Bridge,
+  ToChain,
+  Complete,
+}
+
+export const TransferStatusSteps = ({ status }: ElementProps) => {
+  const stringGetter = useStringGetter();
+
+  const { currentStep, steps, type } = 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 = [
+      {
+        label: stringGetter({
+          key:
+            type === 'deposit' ? STRING_KEYS.INITIATED_DEPOSIT : STRING_KEYS.INITIATED_WITHDRAWAL,
+        }),
+        step: TransferStatusStep.FromChain,
+        link: status?.fromChain?.transactionUrl,
+      },
+      {
+        label: stringGetter({ key: STRING_KEYS.BRIDGING_TOKENS }),
+        step: TransferStatusStep.Bridge,
+        link: status?.axelarTransactionUrl,
+      },
+      {
+        label: stringGetter({
+          key: type === 'deposit' ? STRING_KEYS.DEPOSIT_TO_CHAIN : STRING_KEYS.WITHDRAW_TO_CHAIN,
+          params: {
+            CHAIN: status?.toChain?.chainData?.chainName,
+          },
+        }),
+        step: TransferStatusStep.ToChain,
+        link: status?.toChain?.transactionUrl,
+      },
+    ];
+
+    const currentStatus = routeStatus[routeStatus?.length - 1];
+
+    let currentStep = TransferStatusStep.Bridge;
+
+    if (!routeStatus?.length) {
+      currentStep = TransferStatusStep.FromChain;
+    } else if (currentStatus.chainId === toChain) {
+      currentStep =
+        currentStatus.status !== 'success'
+          ? TransferStatusStep.ToChain
+          : TransferStatusStep.Complete;
+    } else if (currentStatus.chainId === fromChain && currentStatus.status !== 'success') {
+      currentStep = TransferStatusStep.FromChain;
+    }
+
+    return {
+      currentStep,
+      steps,
+      type,
+    };
+  }, [status, stringGetter]);
+
+  if (!status) return <LoadingDots size={3} />;
+
+  return (
+    <Styled.BridgingStatus>
+      {steps.map((step) => (
+        <Styled.Step key={step.step}>
+          <Styled.row>
+            {step.step === currentStep ? (
+              <Styled.Icon>
+                <Styled.Spinner />
+              </Styled.Icon>
+            ) : step.step < currentStep ? (
+              <Styled.Icon state="complete">
+                <Icon iconName={IconName.Check} />
+              </Styled.Icon>
+            ) : (
+              <Styled.Icon state="default">{step.step + 1}</Styled.Icon>
+            )}
+            {step.link && currentStep >= step.step ? (
+              <Link href={step.link}>
+                <Styled.Label highlighted={currentStep >= step.step}>
+                  {step.label}
+                  <Icon iconName={IconName.LinkOut} />
+                </Styled.Label>
+              </Link>
+            ) : (
+              <Styled.Label highlighted={currentStep >= step.step}>{step.label}</Styled.Label>
+            )}
+          </Styled.row>
+        </Styled.Step>
+      ))}
+    </Styled.BridgingStatus>
+  );
+};
+
+const Styled: Record<string, AnyStyledComponent> = {};
+
+Styled.BridgingStatus = styled.div`
+  ${layoutMixins.flexColumn};
+
+  gap: 1rem;
+  padding: 1rem 0;
+`;
+
+Styled.Step = styled.div`
+  ${layoutMixins.spacedRow};
+`;
+
+Styled.row = styled.div`
+  ${layoutMixins.inlineRow};
+  gap: 0.5rem;
+`;
+
+Styled.Icon = styled.div<{ state: 'complete' | 'default' }>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  height: 2rem;
+  width: 2rem;
+
+  border-radius: 50%;
+
+  background-color: var(--color-layer-3);
+
+  ${({ state }) =>
+    ({
+      ['complete']: css`
+        color: var(--color-positive);
+      `,
+      ['default']: css`
+        color: var(--color-text-0);
+      `,
+    }[state])}
+`;
+
+Styled.Spinner = styled(LoadingSpinner)`
+  --spinner-width: 1.25rem;
+
+  color: var(--color-accent);
+`;
+
+Styled.Label = styled(Styled.row)<{ highlighted?: boolean }>`
+  ${({ highlighted }) =>
+    highlighted
+      ? css`
+          color: var(--color-text-2);
+        `
+      : css`
+          color: var(--color-text-0);
+        `}
+`;
@@ -3,16 +3,21 @@ import styled, { type AnyStyledComponent } from 'styled-components';
 import { type NumberFormatValues } from 'react-number-format';
 import { shallowEqual, useSelector } from 'react-redux';
 import { TESTNET_CHAIN_ID } from '@dydxprotocol/v4-client-js';
-import { ethers } from 'ethers';
+import { parseUnits } from 'viem'

+import erc20 from '@/abi/erc20.json';
 import { TransferInputField, TransferInputTokenResource, TransferType } from '@/constants/abacus';
 import { AlertType } from '@/constants/alerts';
 import { ButtonSize } from '@/constants/buttons';
 import { STRING_KEYS } from '@/constants/localization';
 import { NumberSign } from '@/constants/numbers';
+import type { EvmAddress } from '@/constants/wallets';

 import { useAccounts, useDebounce, useStringGetter } from '@/hooks';
 import { useAccountBalance } 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';
@@ -32,6 +37,7 @@ import { getTransferInputs } from '@/state/inputsSelectors';

 import abacusStateManager from '@/lib/abacus';
 import { MustBigNumber } from '@/lib/numbers';
+import { log } from '@/lib/telemetry';

 import { ChainSelectMenu } from './ChainSelectMenu';
 import { TokenSelectMenu } from './TokenSelectMenu';
@@ -48,13 +54,17 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
  const [error, setError] = useState<Error | null>(null);
  const [isLoading, setIsLoading] = useState(false);

-  const { signerWagmi } = useAccounts();
+  const { evmAddress, signerWagmi } = useAccounts();
+  const { publicClientWagmi } = useWalletConnection();
+
+  const { addTransferNotification } = useLocalNotifications();

  const {
    requestPayload,
    token,
    chain: chainIdStr,
    resources,
+    summary,
  } = useSelector(getTransferInputs, shallowEqual) || {};
  const chainId = chainIdStr ? parseInt(chainIdStr) : undefined;

@@ -64,13 +74,16 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
    [token, resources]
  );

+  const sourceChain = useMemo(
+    () => (chainIdStr ? resources?.chainResources?.get(chainIdStr) : undefined),
+    [chainId, resources]
+  );
+
  const [fromAmount, setFromAmount] = useState('');
  const [slippage, setSlippage] = useState(0.01); // 1% slippage
  const debouncedAmount = useDebounce<string>(fromAmount, 500);

  // Async Data
-  const [transactionHash, setTransactionHash] = useState<string>();
-
  const { balance, queryStatus, isQueryFetching } = useAccountBalance({
    addressOrDenom: sourceToken?.address || undefined,
    assetSymbol: sourceToken?.symbol || undefined,
@@ -157,6 +170,39 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
    }
  }, [balance, setFromAmount]);

+  const validateTokenApproval = useCallback(async () => {
+    if (!signerWagmi || !publicClientWagmi) throw new Error('Missing signer');
+    if (!sourceToken?.address || !sourceToken.decimals) throw new Error('Missing source token address');
+    if (!sourceChain?.rpc) throw new Error('Missing source chain rpc');
+    if (!requestPayload?.targetAddress) throw new Error('Missing target address');
+    if (!requestPayload?.value) throw new Error('Missing transaction value');
+    if (sourceToken?.address === NATIVE_TOKEN_ADDRESS) return;
+
+    const allowance = await publicClientWagmi.readContract({
+      address: sourceToken.address as EvmAddress,
+      abi: erc20,
+      functionName: 'allowance',
+      args: [evmAddress as EvmAddress, requestPayload.targetAddress as EvmAddress]
+    });
+
+    const sourceAmountBN = parseUnits(debouncedAmount, sourceToken.decimals);
+    
+    if (sourceAmountBN > (allowance as bigint)) {
+      const { request } = await publicClientWagmi.simulateContract({
+        account: evmAddress,
+        address: sourceToken.address as EvmAddress,
+        abi: erc20,
+        functionName: 'approve',
+        args: [requestPayload.targetAddress as EvmAddress, sourceAmountBN],
+      })
+
+      const approveTx = await signerWagmi.writeContract(request);
+      await publicClientWagmi.waitForTransactionReceipt({
+        hash: approveTx,
+      })
+    }
+  }, [signerWagmi, sourceToken, sourceChain, requestPayload, publicClientWagmi]);
+
  const onSubmit = useCallback(
    async (e: FormEvent) => {
      try {
@@ -178,27 +224,32 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {

        setIsLoading(true);

+        await validateTokenApproval();
+
        let tx = {
-          to: requestPayload.targetAddress as `0x${string}`,
-          data: requestPayload.data as `0x${string}`,
-          gasLimit: ethers.toBigInt(requestPayload.gasLimit),
+          to: requestPayload.targetAddress as EvmAddress,
+          data: requestPayload.data as EvmAddress,
+          gasLimit: BigInt(requestPayload.gasLimit),
          value:
-            requestPayload.routeType !== 'SEND' ? ethers.toBigInt(requestPayload.value) : undefined,
+            requestPayload.routeType !== 'SEND' ? BigInt(requestPayload.value) : undefined,
        };
        const txHash = await signerWagmi.sendTransaction(tx);
+
        onDeposit?.();

        if (txHash) {
-          setTransactionHash(txHash);
-          abacusStateManager.setTransferStatus({
-            hash: txHash,
+          addTransferNotification({
+            txHash: txHash,
            toChainId: TESTNET_CHAIN_ID,
-            fromChainId: chainId?.toString(),
+            fromChainId: chainIdStr || undefined,
+            toAmount: summary?.usdcSize || undefined,
+            triggeredAt: Date.now(),
          });
          abacusStateManager.clearTransferInputValues();
          setFromAmount('');
        }
      } catch (error) {
+        log('DepositForm/onSubmit', error);
        setError(error);
      } finally {
        setIsLoading(false);
@@ -286,17 +337,7 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
          }
        />
      </Styled.WithDetailsReceipt>
-      {errorMessage ? (
-        <AlertMessage type={AlertType.Error}>{errorMessage}</AlertMessage>
-      ) : (
-        transactionHash && (
-          <AlertMessage type={AlertType.Success}>
-            <Styled.TransactionInfo>
-              {stringGetter({ key: STRING_KEYS.DEPOSIT_IN_PROGRESS })}
-            </Styled.TransactionInfo>
-          </AlertMessage>
-        )
-      )}
+      {errorMessage && <AlertMessage type={AlertType.Error}>{errorMessage}</AlertMessage>}
      <DepositButtonAndReceipt
        isDisabled={isDisabled}
        isLoading={isLoading}
@@ -12,6 +12,7 @@ import { STRING_KEYS } from '@/constants/localization';
 import { NumberSign, QUANTUM_MULTIPLIER } from '@/constants/numbers';

 import { useDebounce, useStringGetter, useSubaccount } from '@/hooks';
+import { useLocalNotifications } from '@/hooks/useLocalNotifications';

 import { layoutMixins } from '@/styles/layoutMixins';
 import { formMixins } from '@/styles/formMixins';
@@ -63,9 +64,9 @@ export const WithdrawForm = () => {
    [token, resources]
  );

-  // Async Data
-  const [transactionHash, setTransactionHash] = useState<string>();
+  const { addTransferNotification } = useLocalNotifications();

+  // Async Data
  const debouncedAmountBN = MustBigNumber(debouncedAmount);
  const withdrawAmountBN = MustBigNumber(withdrawAmount);
  const freeCollateralBN = MustBigNumber(freeCollateral?.current);
@@ -133,11 +134,12 @@ export const WithdrawForm = () => {
        if (txHash?.hash) {
          const hash = `0x${Buffer.from(txHash.hash).toString('hex')}`;

-          setTransactionHash(hash);
-          abacusStateManager.setTransferStatus({
-            hash,
+          addTransferNotification({
+            txHash: hash,
            fromChainId: TESTNET_CHAIN_ID,
            toChainId: chainIdStr || undefined,
+            toAmount: debouncedAmountBN.toNumber(),
+            triggeredAt: Date.now(),
          });
          abacusStateManager.clearTransferInputValues();
          setWithdrawAmount('');
@@ -148,7 +150,7 @@ export const WithdrawForm = () => {
        setIsLoading(false);
      }
    },
-    [setTransactionHash, requestPayload, debouncedAmountBN, chainIdStr]
+    [requestPayload, debouncedAmountBN, chainIdStr]
  );

  const onChangeAddress = useCallback((e: ChangeEvent<HTMLInputElement>) => {
@@ -291,17 +293,7 @@ export const WithdrawForm = () => {
          }
        />
      </Styled.WithDetailsReceipt>
-      {errorMessage ? (
-        <AlertMessage type={AlertType.Error}>{errorMessage}</AlertMessage>
-      ) : (
-        transactionHash && (
-          <AlertMessage type={AlertType.Success}>
-            <Styled.TransactionInfo>
-              {stringGetter({ key: STRING_KEYS.WITHDRAW_IN_PROGRESS })}
-            </Styled.TransactionInfo>
-          </AlertMessage>
-        )
-      )}
+      {errorMessage && <AlertMessage type={AlertType.Error}>{errorMessage}</AlertMessage>}
      <WithdrawButtonAndReceipt
        isDisabled={isDisabled}
        isLoading={isLoading}
@@ -89,9 +89,9 @@ export const NotificationsMenu = ({
            .map(({ notification, key, displayData }) => ({
              value: key,
              label: displayData.title ?? '',
-              description: displayData.description,
-              slotBefore: displayData.icon,
-              slotAfter: (
+              description: displayData.customMenuContent || displayData.description,
+              slotBefore: !displayData.customMenuContent && displayData.icon,
+              slotAfter: !displayData.customMenuContent && (
                <>
                  <$Output
                    type={OutputType.RelativeTime}
Author	SHA1	Message	Date
Bill He	761bf87dfc	bump v4-client	2023-09-08 16:06:10 -07:00
Bill He	dcb0681792	Fix Auto Deposit	2023-09-08 11:41:58 -07:00
Jared Vu	b2783d67ae	Add Satoshi fonts, remove Circular (#23 ) * Add Satoshi fonts, remove Circular * trader-fe -> v4-web * Remove CircularMono * Update README for font instructions * update CONTRIBUTING.md	2023-09-08 10:14:22 -07:00
Jared Vu	817e81079c	Remove deprecated market-detail items (#24 ) * Remove deprecated market-detail items * remove unused import	2023-09-07 11:03:53 -07:00
James Jia	78ddaa7fe5	update LICENSE (#22 )	2023-09-06 10:22:54 -07:00
Bill	564192fa2b	Deposit/Withdraw status notifications (#9 ) * Deposit/Withdraw status notifications * prevent log out during switch accounts * fix merge * check for token approval * address comments * update lock * wait for approval * address comments	2023-09-05 13:04:53 -07:00
Rui	102b1702ff	Add wallets PNGs to be used on mobile (#21 )	2023-09-05 12:58:36 -07:00