Handle symbol not yet added

* Implement CCTP withdraw

* bump packages

* address comments

package.json

@@ -39,9 +39,9 @@
     "@cosmjs/proto-signing": "^0.31.0",
     "@cosmjs/stargate": "^0.31.0",
     "@cosmjs/tendermint-rpc": "^0.31.0",
-    "@dydxprotocol/v4-abacus": "^1.1.4",
+    "@dydxprotocol/v4-abacus": "^1.1.24",
-    "@dydxprotocol/v4-client-js": "^1.0.6",
+    "@dydxprotocol/v4-client-js": "^1.0.11",
-    "@dydxprotocol/v4-localization": "^1.0.17",
+    "@dydxprotocol/v4-localization": "^1.0.19",
     "@ethersproject/providers": "^5.7.2",
     "@js-joda/core": "^5.5.3",
     "@radix-ui/react-checkbox": "^1.0.4",
@@ -111,7 +111,7 @@
     "styled-components": "^5.3.11",
     "use-latest": "^1.2.1",
     "viem": "^1.12.2",
-    "wagmi": "^1.4.5"
+    "wagmi": "^1.4.12"
   },
   "devDependencies": {
     "@babel/core": "^7.22.5",

public/configs/cctp.json

@@ -1,29 +1,9 @@
 [
-    {
-        "chainId": "42161",
-        "tokenAddress": "0xff970a61a04b1ca14834a43f5de4533ebddb5cc8",
-        "name": "Arbitrum"
-    },
-    {
-        "chainId": "43114",
-        "tokenAddress": "0xB97EF9Ef8734C71904D8002F8b6Bc66Dd9c48a6E",
-        "name": "Avalanche"
-    },
-    {
-        "chainId": "8453",
-        "tokenAddress": "0x66627F389ae46D881773B7131139b2411980E09E",
-        "name": "Base"
-    },
     {
         "chainId": "1",
         "tokenAddress": "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48",
         "name": "Ethereum"
     },
-    {
-        "chainId": "10",
-        "tokenAddress": "0x7F5c764cBc14f9669B88837ca1490cCa17c31607",
-        "name": "OP Mainnet"
-    },
     {
         "chainId": "421613",
         "tokenAddress": "0xfd064a18f3bf249cf1f87fc203e90d8f650f2d63",

public/configs/env.json

@@ -42,7 +42,7 @@
          "ethereumChainId": "5",
          "dydxChainId": "dydxprotocol-testnet",
          "chainName": "dYdX Chain",
-         "chainLogo": "dydx-chain.png",
+         "chainLogo": "/dydx-chain.png",
          "squidIntegratorId": "dYdX-api",
          "isMainNet": false,
          "tokens": {
@@ -71,7 +71,7 @@
                "https://validator.v4dev.dydx.exchange"
             ],
             "0xsquid": "https://testnet.api.0xsquid.com",
-            "nobleValidator": "https://rpc.testnet.noble.strange.love",
+            "nobleValidator": "https://noble-testnet-rpc.polkachu.com/",
             "faucet": "https://faucet.v4dev.dydx.exchange"
          },
          "links": {
@@ -116,7 +116,7 @@
          "ethereumChainId": "5",
          "dydxChainId": "dydxprotocol-testnet",
          "chainName": "dYdX Chain",
-         "chainLogo": "dydx-chain.png",
+         "chainLogo": "/dydx-chain.png",
          "squidIntegratorId": "dYdX-api",
          "isMainNet": false,
          "tokens": {
@@ -145,7 +145,7 @@
                "http://54.92.118.111"
             ],
             "0xsquid": "https://testnet.api.0xsquid.com",
-            "nobleValidator": "https://rpc.testnet.noble.strange.love"
+            "nobleValidator": "https://noble-testnet-rpc.polkachu.com/"
          },
          "links": {
             "tos": "https://dydx.exchange/v4-terms",
@@ -189,7 +189,7 @@
          "ethereumChainId": "5",
          "dydxChainId": "dydxprotocol-testnet",
          "chainName": "dYdX Chain",
-         "chainLogo": "dydx-chain.png",
+         "chainLogo": "/dydx-chain.png",
          "squidIntegratorId": "dYdX-api",
          "isMainNet": false,
          "tokens": {
@@ -218,7 +218,7 @@
                "http://validator.v4dev4.dydx.exchange"
             ],
             "0xsquid": "https://testnet.api.0xsquid.com",
-            "nobleValidator": "https://rpc.testnet.noble.strange.love"
+            "nobleValidator": "https://noble-testnet-rpc.polkachu.com/"
          },
          "links": {
             "tos": "https://dydx.exchange/v4-terms",
@@ -262,7 +262,7 @@
          "ethereumChainId": "5",
          "dydxChainId": "dydxprotocol-testnet",
          "chainName": "dYdX Chain",
-         "chainLogo": "dydx-chain.png",
+         "chainLogo": "/dydx-chain.png",
          "squidIntegratorId": "dYdX-api",
          "isMainNet": false,
          "tokens": {
@@ -291,7 +291,7 @@
                "http://18.223.78.50"
             ],
             "0xsquid": "https://testnet.api.0xsquid.com",
-            "nobleValidator": "https://rpc.testnet.noble.strange.love"
+            "nobleValidator": "https://noble-testnet-rpc.polkachu.com/"
          },
          "links": {
             "tos": "https://dydx.exchange/v4-terms",
@@ -335,7 +335,7 @@
          "ethereumChainId": "5",
          "dydxChainId": "dydxprotocol-testnet",
          "chainName": "dYdX Chain",
-         "chainLogo": "dydx-chain.png",
+         "chainLogo": "/dydx-chain.png",
          "squidIntegratorId": "dYdX-api",
          "isMainNet": false,
          "tokens": {
@@ -365,7 +365,7 @@
                "https://validator.v4staging.dydx.exchange"
             ],
             "0xsquid": "https://testnet.api.squidrouter.com",
-            "nobleValidator": "https://rpc.testnet.noble.strange.love"
+            "nobleValidator": "https://noble-testnet-rpc.polkachu.com/"
          },
          "links": {
             "tos": "https://dydx.exchange/v4-terms",
@@ -410,7 +410,7 @@
          "ethereumChainId": "5",
          "dydxChainId": "dydxprotocol-testnet",
          "chainName": "dYdX Chain",
-         "chainLogo": "dydx-chain.png",
+         "chainLogo": "/dydx-chain.png",
          "squidIntegratorId": "dYdX-api",
          "isMainNet": false,
          "tokens": {
@@ -440,7 +440,7 @@
                "https://validator.v4staging.dydx.exchange"
             ],
             "0xsquid": "https://testnet.api.squidrouter.com",
-            "nobleValidator": "https://rpc.testnet.noble.strange.love"
+            "nobleValidator": "https://noble-testnet-rpc.polkachu.com/"
          },
          "links": {
             "tos": "https://dydx.exchange/v4-terms",
@@ -483,7 +483,7 @@
          "ethereumChainId": "5",
          "dydxChainId": "dydxprotocol-testnet",
          "chainName": "dYdX Chain",
-         "chainLogo": "dydx-chain.png",
+         "chainLogo": "/dydx-chain.png",
          "squidIntegratorId": "dYdX-api",
          "isMainNet": false,
          "tokens": {
@@ -513,7 +513,7 @@
                "https://validator-uswest1.v4staging.dydx.exchange"
             ],
             "0xsquid": "https://testnet.api.squidrouter.com",
-            "nobleValidator": "https://rpc.testnet.noble.strange.love"
+            "nobleValidator": "https://noble-testnet-rpc.polkachu.com/"
          },
          "links": {
             "tos": "https://dydx.exchange/v4-terms",
@@ -558,7 +558,7 @@
          "ethereumChainId": "5",
          "dydxChainId": "dydx-testnet-4",
          "chainName": "dYdX Chain",
-         "chainLogo": "dydx-chain.png",
+         "chainLogo": "/dydx-chain.png",
          "squidIntegratorId": "dYdX-api",
          "isMainNet": false,
          "tokens": {
@@ -591,7 +591,7 @@
                "https://dydx-rpc.liquify.com/api=8878132/dydx"
             ],
             "0xsquid": "https://testnet.api.squidrouter.com",
-            "nobleValidator": "https://rpc.testnet.noble.strange.love",
+            "nobleValidator": "https://noble-testnet-rpc.polkachu.com/",
             "faucet": "https://faucet.v4testnet.dydx.exchange"
          },
          "links": {
@@ -637,7 +637,7 @@
          "ethereumChainId": "5",
          "dydxChainId": "dydx-testnet-4",
          "chainName": "dYdX Chain",
-         "chainLogo": "dydx-chain.png",
+         "chainLogo": "/dydx-chain.png",
          "squidIntegratorId": "dYdX-api",
          "isMainNet": false,
          "tokens": {
@@ -666,7 +666,7 @@
                "https://validator.v4testnet.dydx.exchange"
             ],
             "0xsquid": "https://testnet.api.squidrouter.com",
-            "nobleValidator": "https://rpc.testnet.noble.strange.love",
+            "nobleValidator": "https://noble-testnet-rpc.polkachu.com/",
             "faucet": "https://faucet.v4testnet.dydx.exchange"
          },
          "links": {
@@ -713,7 +713,7 @@
          "ethereumChainId": "5",
          "dydxChainId": "dydx-testnet-4",
          "chainName": "dYdX Chain",
-         "chainLogo": "dydx-chain.png",
+         "chainLogo": "/dydx-chain.png",
          "squidIntegratorId": "dYdX-api",
          "isMainNet": false,
          "tokens": {
@@ -742,7 +742,7 @@
                "https://dydx-testnet.nodefleet.org"
             ],
             "0xsquid": "https://testnet.api.squidrouter.com",
-            "nobleValidator": "https://rpc.testnet.noble.strange.love",
+            "nobleValidator": "https://noble-testnet-rpc.polkachu.com/",
             "faucet": "https://faucet.v4testnet.dydx.exchange"
          },
          "links": {
@@ -789,7 +789,7 @@
          "ethereumChainId": "5",
          "dydxChainId": "dydx-testnet-4",
          "chainName": "dYdX Chain",
-         "chainLogo": "dydx-chain.png",
+         "chainLogo": "/dydx-chain.png",
          "squidIntegratorId": "dYdX-api",
          "isMainNet": false,
          "tokens": {
@@ -818,7 +818,7 @@
                "https://test-dydx.kingnodes.com"
             ],
             "0xsquid": "https://testnet.api.squidrouter.com",
-            "nobleValidator": "https://rpc.testnet.noble.strange.love",
+            "nobleValidator": "https://noble-testnet-rpc.polkachu.com/",
             "faucet": "https://faucet.v4testnet.dydx.exchange"
          },
          "links": {
@@ -865,7 +865,7 @@
          "ethereumChainId": "5",
          "dydxChainId": "dydx-testnet-4",
          "chainName": "dYdX Chain",
-         "chainLogo": "dydx-chain.png",
+         "chainLogo": "/dydx-chain.png",
          "squidIntegratorId": "dYdX-api",
          "isMainNet": false,
          "tokens": {
@@ -894,7 +894,7 @@
                "https://dydx-rpc.liquify.com/api=8878132/dydx"
             ],
             "0xsquid": "https://testnet.api.squidrouter.com",
-            "nobleValidator": "https://rpc.testnet.noble.strange.love",
+            "nobleValidator": "https://noble-testnet-rpc.polkachu.com/",
             "faucet": "https://faucet.v4testnet.dydx.exchange"
          },
          "links": {
@@ -941,7 +941,7 @@
          "ethereumChainId": "5",
          "dydxChainId": "dydx-testnet-4",
          "chainName": "dYdX Chain",
-         "chainLogo": "dydx-chain.png",
+         "chainLogo": "/dydx-chain.png",
          "squidIntegratorId": "dYdX-api",
          "isMainNet": false,
          "tokens": {
@@ -970,7 +970,7 @@
                "https://dydx-testnet-rpc.polkachu.com/"
             ],
             "0xsquid": "https://testnet.api.squidrouter.com",
-            "nobleValidator": "https://rpc.testnet.noble.strange.love",
+            "nobleValidator": "https://noble-testnet-rpc.polkachu.com/",
             "faucet": "https://faucet.v4testnet.dydx.exchange"
          },
          "links": {
@@ -1008,7 +1008,7 @@
          "ethereumChainId": "5",
          "dydxChainId": "dydx-testnet-4",
          "chainName": "dYdX Chain",
-         "chainLogo": "dydx-chain.png",
+         "chainLogo": "/dydx-chain.png",
          "squidIntegratorId": "dYdX-api",
          "isMainNet": false,
          "tokens": {
@@ -1037,7 +1037,7 @@
                "https://dydx-testnet-full-rpc.public.blastapi.io/"
             ],
             "0xsquid": "https://testnet.api.squidrouter.com",
-            "nobleValidator": "https://rpc.testnet.noble.strange.love",
+            "nobleValidator": "https://noble-testnet-rpc.polkachu.com/",
             "faucet": "https://faucet.v4testnet.dydx.exchange"
          },
          "links": {
@@ -1084,7 +1084,7 @@
          "ethereumChainId": "1",
          "dydxChainId": "[mainnet chain id]",
          "chainName": "dYdX Chain",
-         "chainLogo": "dydx-chain.png",
+         "chainLogo": "/dydx-chain.png",
          "squidIntegratorId": "[mainnet squid integrator id]",
          "isMainNet": true,
          "tokens": {

public/configs/markets.json

@@ -1,454 +1,360 @@
 {
-    "1INCH-USD":{
+  "1INCH-USD": {
-       "name":"1inch",
+    "name": "1inch",
-       "tags":[
+    "tags": ["Defi"],
-          "Defi"
+    "websiteLink": "https://1inch.io/",
-       ],
+    "whitepaperLink": "https://github.com/1inch",
-       "websiteLink":"https://1inch.io/",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/1inch/"
-       "whitepaperLink":"https://github.com/1inch",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/1inch/"
   },
-    "AAVE-USD":{
+  "AAVE-USD": {
-       "name":"Aave",
+    "name": "Aave",
-       "tags":[
+    "tags": ["Defi"],
-          "Defi"
+    "websiteLink": "https://aave.com/",
-       ],
+    "whitepaperLink": "https://github.com/aave/protocol-v2/blob/master/aave-v2-whitepaper.pdf",
-       "websiteLink":"https://aave.com/",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/aave/"
-       "whitepaperLink":"https://github.com/aave/protocol-v2/blob/master/aave-v2-whitepaper.pdf",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/aave/"
   },
-    "ADA-USD":{
+  "ADA-USD": {
-       "name":"Cardano",
+    "name": "Cardano",
-       "tags":[
+    "tags": ["Layer 1"],
-          "Layer 1"
+    "websiteLink": "https://cardano.org/",
-       ],
+    "whitepaperLink": "https://why.cardano.org/en/introduction/motivation/",
-       "websiteLink":"https://cardano.org/",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/cardano/"
-       "whitepaperLink":"https://why.cardano.org/en/introduction/motivation/",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/cardano/"
   },
-    "ALGO-USD":{
+  "ALGO-USD": {
-       "name":"Algorand",
+    "name": "Algorand",
-       "tags":[
+    "tags": ["Layer 1"],
-          "Layer 1"
+    "websiteLink": "https://algorand.com/",
-       ],
+    "whitepaperLink": "https://algorand.com/technology/white-papers",
-       "websiteLink":"https://algorand.com/",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/algorand/"
-       "whitepaperLink":"https://algorand.com/technology/white-papers",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/algorand/"
   },
-    "APE-USD":{
+  "APE-USD": {
-       "name":"ApeCoin",
+    "name": "ApeCoin",
-       "tags":[
+    "tags": [],
-          
+    "websiteLink": "https://apecoin.com/",
-       ],
+    "whitepaperLink": "https://apecoin.com/about",
-       "websiteLink":"https://apecoin.com/",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/apecoin-ape/"
-       "whitepaperLink":"https://apecoin.com/about",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/apecoin-ape/"
   },
-    "APT-USD":{
+  "APT-USD": {
-       "name":"Aptos",
+    "name": "Aptos",
-       "tags":[
+    "tags": ["Layer 1"],
-          "Layer 1"
+    "websiteLink": "https://aptoslabs.com/",
-       ],
+    "whitepaperLink": "https://aptos.dev/aptos-white-paper/",
-       "websiteLink":"https://aptoslabs.com/",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/aptos/"
-       "whitepaperLink":"https://aptos.dev/aptos-white-paper/",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/aptos/"
   },
-    "ARB-USD":{
+  "ARB-USD": {
-       "name":"Arbitrum",
+    "name": "Arbitrum",
-       "tags":[
+    "tags": [],
-          
+    "websiteLink": "https://arbitrum.io/",
-       ],
+    "whitepaperLink": "https://github.com/OffchainLabs/nitro",
-       "websiteLink":"https://arbitrum.io/",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/arbitrum/"
-       "whitepaperLink":"https://github.com/OffchainLabs/nitro",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/arbitrum/"
   },
-    "ATOM-USD":{
+  "ATOM-USD": {
-       "name":"Cosmos",
+    "name": "Cosmos",
-       "tags":[
+    "tags": ["Layer 1"],
-          "Layer 1"
+    "websiteLink": "https://cosmos.network/",
-       ],
+    "whitepaperLink": "https://v1.cosmos.network/resources/whitepaper",
-       "websiteLink":"https://cosmos.network/",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/cosmos/"
-       "whitepaperLink":"https://v1.cosmos.network/resources/whitepaper",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/cosmos/"
   },
-    "AVAX-USD":{
+  "AVAX-USD": {
-       "name":"Avalanche",
+    "name": "Avalanche",
-       "tags":[
+    "tags": ["Layer 1"],
-          "Layer 1"
+    "websiteLink": "https://www.avalabs.org/",
-       ],
+    "whitepaperLink": "https://assets.website-files.com/5d80307810123f5ffbb34d6e/6008d7bbf8b10d1eb01e7e16_Avalanche%20Platform%20Whitepaper.pdf",
-       "websiteLink":"https://www.avalabs.org/",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/avalanche/"
-       "whitepaperLink":"https://assets.website-files.com/5d80307810123f5ffbb34d6e/6008d7bbf8b10d1eb01e7e16_Avalanche%20Platform%20Whitepaper.pdf",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/avalanche/"
   },
-    "BCH-USD":{
+  "BCH-USD": {
-       "name":"Bitcoin Cash",
+    "name": "Bitcoin Cash",
-       "tags":[
+    "tags": ["Layer 1"],
-          "Layer 1"
+    "websiteLink": "https://bitcoincash.org/",
-       ],
+    "whitepaperLink": "https://bitcoincash.org/",
-       "websiteLink":"https://bitcoincash.org/",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/bitcoin-cash/"
-       "whitepaperLink":"https://bitcoincash.org/",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/bitcoin-cash/"
   },
-    "BLUR-USD":{
+  "BLUR-USD": {
-       "name":"Blur",
+    "name": "Blur",
-       "tags":[
+    "tags": [],
-          
+    "websiteLink": "https://blur.io/",
-       ],
+    "whitepaperLink": "https://docs.blur.foundation/",
-       "websiteLink":"https://blur.io/",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/blur-token/"
-       "whitepaperLink":"https://docs.blur.foundation/",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/blur-token/"
   },
-    "CELO-USD":{
+  "CELO-USD": {
-       "name":"Celo",
+    "name": "Celo",
-       "tags":[
+    "tags": [],
-          
+    "websiteLink": "https://celo.org",
-       ],
+    "whitepaperLink": "https://docs.celo.org",
-       "websiteLink":"https://celo.org",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/celo/"
-       "whitepaperLink":"https://docs.celo.org",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/celo/"
   },
-    "BTC-USD":{
+  "BTC-USD": {
-       "name":"Bitcoin",
+    "name": "Bitcoin",
-       "tags":[
+    "tags": ["Layer 1"],
-          "Layer 1"
+    "websiteLink": "https://bitcoin.org/",
-       ],
+    "whitepaperLink": "https://bitcoin.org/bitcoin.pdf",
-       "websiteLink":"https://bitcoin.org/",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/bitcoin/"
-       "whitepaperLink":"https://bitcoin.org/bitcoin.pdf",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/bitcoin/"
   },
-    "COMP-USD":{
+  "COMP-USD": {
-       "name":"Compound",
+    "name": "Compound",
-       "tags":[
+    "tags": ["Defi"],
-          "Defi"
+    "websiteLink": "https://compound.finance/",
-       ],
+    "whitepaperLink": "https://compound.finance/documents/Compound.Whitepaper.pdf",
-       "websiteLink":"https://compound.finance/",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/compound/"
-       "whitepaperLink":"https://compound.finance/documents/Compound.Whitepaper.pdf",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/compound/"
   },
-    "CRV-USD":{
+  "CRV-USD": {
-       "name":"Curve",
+    "name": "Curve",
-       "tags":[
+    "tags": ["Governance"],
-          "Governance"
+    "websiteLink": "https://curve.fi/",
-       ],
+    "whitepaperLink": "https://curve.fi/whitepaper",
-       "websiteLink":"https://curve.fi/",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/curve-dao-token/"
-       "whitepaperLink":"https://curve.fi/whitepaper",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/curve-dao-token/"
   },
-    "DOGE-USD":{
+  "DOGE-USD": {
-       "name":"Dogecoin",
+    "name": "Dogecoin",
-       "tags":[
+    "tags": ["Layer 1"],
-          "Layer 1"
+    "websiteLink": "https://dogecoin.com/",
-       ],
+    "whitepaperLink": "https://github.com/dogecoin/dogecoin",
-       "websiteLink":"https://dogecoin.com/",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/dogecoin/"
-       "whitepaperLink":"https://github.com/dogecoin/dogecoin",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/dogecoin/"
   },
-    "DOT-USD":{
+  "DOT-USD": {
-       "name":"Polkadot",
+    "name": "Polkadot",
-       "tags":[
+    "tags": ["Layer 1"],
-          "Layer 1"
+    "websiteLink": "https://polkadot.network/",
-       ],
+    "whitepaperLink": "https://polkadot.network/PolkaDotPaper.pdf",
-       "websiteLink":"https://polkadot.network/",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/polkadot-new/"
-       "whitepaperLink":"https://polkadot.network/PolkaDotPaper.pdf",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/polkadot-new/"
   },
-    "ENJ-USD":{
+  "ENJ-USD": {
-       "name":"Enjin",
+    "name": "Enjin",
-       "tags":[
+    "tags": [],
-          
+    "websiteLink": "https://enjin.io/",
-       ],
+    "whitepaperLink": "https://cdn.enjin.io/downloads/whitepapers/enjin-coin/en.pdf/",
-       "websiteLink":"https://enjin.io/",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/enjin-coin/"
-       "whitepaperLink":"https://cdn.enjin.io/downloads/whitepapers/enjin-coin/en.pdf/",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/enjin-coin/"
   },
-    "EOS-USD":{
+  "EOS-USD": {
-       "name":"EOS",
+    "name": "EOS",
-       "tags":[
+    "tags": ["Layer 1"],
-          "Layer 1"
+    "websiteLink": "https://eos.io/",
-       ],
+    "whitepaperLink": "https://github.com/EOSIO/Documentation/blob/master/TechnicalWhitePaper.md",
-       "websiteLink":"https://eos.io/",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/eos/"
-       "whitepaperLink":"https://github.com/EOSIO/Documentation/blob/master/TechnicalWhitePaper.md",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/eos/"
   },
-    "ETC-USD":{
+  "ETC-USD": {
-       "name":"Ethereum Classic",
+    "name": "Ethereum Classic",
-       "tags":[
+    "tags": ["Layer 1"],
-          "Layer 1"
+    "websiteLink": "https://ethereumclassic.org/",
-       ],
+    "whitepaperLink": "https://ethereumclassic.org/why-classic",
-       "websiteLink":"https://ethereumclassic.org/",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/ethereum-classic/"
-       "whitepaperLink":"https://ethereumclassic.org/why-classic",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/ethereum-classic/"
   },
-    "ETH-USD":{
+  "ETH-USD": {
-       "name":"Ethereum",
+    "name": "Ethereum",
-       "tags":[
+    "tags": ["Layer 1"],
-          "Layer 1"
+    "websiteLink": "https://ethereum.org/",
-       ],
+    "whitepaperLink": "https://ethereum.org/whitepaper/",
-       "websiteLink":"https://ethereum.org/",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/ethereum/",
-       "whitepaperLink":"https://ethereum.org/whitepaper/",
+    "displayStepSize": "0.001",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/ethereum/",
+    "displayTickSize": "0.1"
-       "displayStepSize":"0.001",
-       "displayTickSize":"0.1"
   },
-    "FIL-USD":{
+  "FIL-USD": {
-       "name":"Filecoin",
+    "name": "Filecoin",
-       "tags":[
+    "tags": ["Layer 1"],
-          "Layer 1"
+    "websiteLink": "https://filecoin.io/",
-       ],
+    "whitepaperLink": "https://filecoin.io/filecoin.pdf",
-       "websiteLink":"https://filecoin.io/",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/filecoin/"
-       "whitepaperLink":"https://filecoin.io/filecoin.pdf",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/filecoin/"
   },
-    "HNT-USD":{
+  "HNT-USD": {
-       "name":"Helium",
+    "name": "Helium",
-       "tags":[
+    "tags": ["Layer 1"],
-          "Layer 1"
+    "websiteLink": "https://www.helium.com",
-       ],
+    "whitepaperLink": "http://whitepaper.helium.com",
-       "websiteLink":"https://www.helium.com",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/helium/"
-       "whitepaperLink":"http://whitepaper.helium.com",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/helium/"
   },
-    "ICP-USD":{
+  "ICP-USD": {
-       "name":"Internet Computer",
+    "name": "Internet Computer",
-       "tags":[
+    "tags": ["Layer 1"],
-          "Layer 1"
+    "websiteLink": "https://dfinity.org",
-       ],
+    "whitepaperLink": "https://dfinity.org/whitepaper.pdf",
-       "websiteLink":"https://dfinity.org",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/internet-computer/"
-       "whitepaperLink":"https://dfinity.org/whitepaper.pdf",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/internet-computer/"
   },
-    "LDO-USD":{
+  "LDO-USD": {
-       "name":"Lido DAO",
+    "name": "Lido DAO",
-       "tags":[
+    "tags": ["Defi"],
-          "Defi"
+    "websiteLink": "https://lido.fi/",
-       ],
+    "whitepaperLink": "https://lido.fi/static/Lido:Ethereum-Liquid-Staking.pdf",
-       "websiteLink":"https://lido.fi/",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/lido-dao/"
-       "whitepaperLink":"https://lido.fi/static/Lido:Ethereum-Liquid-Staking.pdf",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/lido-dao/"
   },
-    "LINK-USD":{
+  "LINK-USD": {
-       "name":"Chainlink",
+    "name": "Chainlink",
-       "tags":[
+    "tags": ["Defi"],
-          "Defi"
+    "websiteLink": "https://chain.link/",
-       ],
+    "whitepaperLink": "https://link.smartcontract.com/whitepaper",
-       "websiteLink":"https://chain.link/",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/chainlink/"
-       "whitepaperLink":"https://link.smartcontract.com/whitepaper",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/chainlink/"
   },
-    "LTC-USD":{
+  "LTC-USD": {
-       "name":"Litecoin",
+    "name": "Litecoin",
-       "tags":[
+    "tags": ["Layer 1"],
-          "Layer 1"
+    "websiteLink": "https://litecoin.org/",
-       ],
+    "whitepaperLink": "https://litecoin.info/index.php/Main_Page",
-       "websiteLink":"https://litecoin.org/",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/litecoin/"
-       "whitepaperLink":"https://litecoin.info/index.php/Main_Page",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/litecoin/"
   },
-    "MATIC-USD":{
+  "MATIC-USD": {
-       "name":"Polygon",
+    "name": "Polygon",
-       "tags":[
+    "tags": ["Layer 2"],
-          "Layer 2"
+    "websiteLink": "https://polygon.technology/",
-       ],
+    "whitepaperLink": "https://polygon.technology/lightpaper-polygon.pdf",
-       "websiteLink":"https://polygon.technology/",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/polygon/"
-       "whitepaperLink":"https://polygon.technology/lightpaper-polygon.pdf",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/polygon/"
   },
-    "MKR-USD":{
+  "MKR-USD": {
-       "name":"Maker",
+    "name": "Maker",
-       "tags":[
+    "tags": ["Governance"],
-          "Governance"
+    "websiteLink": "https://makerdao.com",
-       ],
+    "whitepaperLink": "https://makerdao.com/whitepaper",
-       "websiteLink":"https://makerdao.com",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/maker/"
-       "whitepaperLink":"https://makerdao.com/whitepaper",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/maker/"
   },
-    "NEAR-USD":{
+  "NEAR-USD": {
-       "name":"NEAR Protocol",
+    "name": "NEAR Protocol",
-       "tags":[
+    "tags": ["Layer 1"],
-          "Layer 1"
+    "websiteLink": "https://near.org",
-       ],
+    "whitepaperLink": "https://near.org/papers/the-official-near-white-paper/",
-       "websiteLink":"https://near.org",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/near-protocol/"
-       "whitepaperLink":"https://near.org/papers/the-official-near-white-paper/",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/near-protocol/"
   },
-    "OP-USD":{
+  "OP-USD": {
-       "name":"Optimism",
+    "name": "Optimism",
-       "tags":[
+    "tags": [],
-          
+    "websiteLink": "https://www.optimism.io/",
-       ],
+    "whitepaperLink": "https://github.com/ethereum-optimism",
-       "websiteLink":"https://www.optimism.io/",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/optimism-ethereum/"
-       "whitepaperLink":"https://github.com/ethereum-optimism",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/optimism-ethereum/"
   },
-    "PEPE-USD":{
+  "PEPE-USD": {
-       "name":"Pepe",
+    "name": "Pepe",
-       "tags":[
+    "tags": [],
-          
+    "websiteLink": "https://www.pepe.vip/",
-       ],
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/pepe/"
-       "websiteLink":"https://www.pepe.vip/",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/pepe/"
   },
-    "RUNE-USD":{
+  "RUNE-USD": {
-       "name":"THORChain",
+    "name": "THORChain",
-       "tags":[
+    "tags": ["Layer 1"],
-          "Layer 1"
+    "websiteLink": "https://thorchain.org",
-       ],
+    "whitepaperLink": "https://whitepaper.io/document/709/thorchain-whitepaper",
-       "websiteLink":"https://thorchain.org",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/thorchain/"
-       "whitepaperLink":"https://whitepaper.io/document/709/thorchain-whitepaper",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/thorchain/"
   },
-    "SEI-USD":{
+  "SEI-USD": {
-       "name":"Sei",
+    "name": "Sei",
-       "tags":[
+    "tags": ["Layer 1", "Defi"],
-          "Layer 1",
+    "websiteLink": "https://www.sei.io/",
-          "Defi"
+    "whitepaperLink": "https://github.com/sei-protocol/sei-chain/blob/3c9576fee3494ce039df684624f918dd8066ba3f/whitepaper/Sei_Whitepaper.pdf",
-       ],
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/sei/"
-       "websiteLink":"https://www.sei.io/",
-       "whitepaperLink":"https://github.com/sei-protocol/sei-chain/blob/3c9576fee3494ce039df684624f918dd8066ba3f/whitepaper/Sei_Whitepaper.pdf",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/sei/"
   },
-    "SHIB-USD":{
+  "SHIB-USD": {
-       "name":"Shiba Inu",
+    "name": "Shiba Inu",
-       "tags":[
+    "tags": [],
-          
+    "websiteLink": "https://shibatoken.com/",
-       ],
+    "whitepaperLink": "https://docs.shibatoken.com/",
-       "websiteLink":"https://shibatoken.com/",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/shiba-inu/"
-       "whitepaperLink":"https://docs.shibatoken.com/",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/shiba-inu/"
   },
-    "SNX-USD":{
+  "SNX-USD": {
-       "name":"Synthetix",
+    "name": "Synthetix",
-       "tags":[
+    "tags": ["Defi"],
-          "Defi"
+    "websiteLink": "https://synthetix.io/",
-       ],
+    "whitepaperLink": "https://docs.synthetix.io/litepaper",
-       "websiteLink":"https://synthetix.io/",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/synthetix-network-token/"
-       "whitepaperLink":"https://docs.synthetix.io/litepaper",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/synthetix-network-token/"
   },
-    "SOL-USD":{
+  "SOL-USD": {
-       "name":"Solana",
+    "name": "Solana",
-       "tags":[
+    "tags": ["Layer 1"],
-          "Layer 1"
+    "websiteLink": "https://solana.com/",
-       ],
+    "whitepaperLink": "https://solana.com/solana-whitepaper.pdf",
-       "websiteLink":"https://solana.com/",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/solana/"
-       "whitepaperLink":"https://solana.com/solana-whitepaper.pdf",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/solana/"
   },
-    "SUI-USD":{
+  "SUI-USD": {
-       "name":"Sui",
+    "name": "Sui",
-       "tags":[
+    "tags": ["Layer 1"],
-          "Layer 1"
+    "websiteLink": "https://sui.io/",
-       ],
+    "whitepaperLink": "https://github.com/MystenLabs",
-       "websiteLink":"https://sui.io/",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/sui/"
-       "whitepaperLink":"https://github.com/MystenLabs",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/sui/"
   },
-    "SUSHI-USD":{
+  "SUSHI-USD": {
-       "name":"Sushi",
+    "name": "Sushi",
-       "tags":[
+    "tags": ["Defi"],
-          "Defi"
+    "websiteLink": "https://sushi.com/",
-       ],
+    "whitepaperLink": "https://docs.sushi.com/",
-       "websiteLink":"https://sushi.com/",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/sushiswap/"
-       "whitepaperLink":"https://docs.sushi.com/",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/sushiswap/"
   },
-    "TRX-USD":{
+  "TIA-USD": {
-       "name":"TRON",
+    "name": "Celestia",
-       "tags":[
+    "tags": ["Layer 1"],
-          "Defi"
+    "websiteLink": "https://celestia.org/",
-       ],
+    "whitepaperLink": "https://arxiv.org/pdf/1905.09274.pdf",
-       "websiteLink":"https://tron.network/",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/celestia/"
-       "whitepaperLink":"https://tron.network/static/doc/white_paper_v_2_0.pdf",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/tron/"
   },
-    "UMA-USD":{
+  "TRX-USD": {
-       "name":"UMA",
+    "name": "TRON",
-       "tags":[
+    "tags": ["Defi"],
-          "Defi"
+    "websiteLink": "https://tron.network/",
-       ],
+    "whitepaperLink": "https://tron.network/static/doc/white_paper_v_2_0.pdf",
-       "websiteLink":"https://umaproject.org/",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/tron/"
-       "whitepaperLink":"https://github.com/UMAprotocol/whitepaper",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/uma/"
   },
-    "UNI-USD":{
+  "UMA-USD": {
-       "name":"Uniswap",
+    "name": "UMA",
-       "tags":[
+    "tags": ["Defi"],
-          "Defi"
+    "websiteLink": "https://umaproject.org/",
-       ],
+    "whitepaperLink": "https://github.com/UMAprotocol/whitepaper",
-       "websiteLink":"https://uniswap.org/",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/uma/"
-       "whitepaperLink":"https://uniswap.org/whitepaper-v3.pdf",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/uniswap/"
   },
-    "WLD-USD":{
+  "UNI-USD": {
-       "name":"Worldcoin",
+    "name": "Uniswap",
-       "tags":[
+    "tags": ["Defi"],
-          
+    "websiteLink": "https://uniswap.org/",
-       ],
+    "whitepaperLink": "https://uniswap.org/whitepaper-v3.pdf",
-       "websiteLink":"https://worldcoin.org/",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/uniswap/"
-       "whitepaperLink":"https://whitepaper.worldcoin.org/",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/worldcoin-org/"
   },
-    "XLM-USD":{
+  "WLD-USD": {
-       "name":"Stellar",
+    "name": "Worldcoin",
-       "tags":[
+    "tags": [],
-          "Layer 1"
+    "websiteLink": "https://worldcoin.org/",
-       ],
+    "whitepaperLink": "https://whitepaper.worldcoin.org/",
-       "websiteLink":"https://www.stellar.org/",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/worldcoin-org/"
-       "whitepaperLink":"https://www.stellar.org/papers/stellar-consensus-protocol",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/stellar/"
   },
-    "XMR-USD":{
+  "XLM-USD": {
-       "name":"Monero",
+    "name": "Stellar",
-       "tags":[
+    "tags": ["Layer 1"],
-          "Layer 1"
+    "websiteLink": "https://www.stellar.org/",
-       ],
+    "whitepaperLink": "https://www.stellar.org/papers/stellar-consensus-protocol",
-       "websiteLink":"https://www.getmonero.org/",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/stellar/"
-       "whitepaperLink":"https://www.getmonero.org/resources/research-lab/",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/monero/"
   },
-    "XRP-USD":{
+  "XMR-USD": {
-       "name":"Ripple",
+    "name": "Monero",
-       "tags":[
+    "tags": ["Layer 1"],
-          "Layer 1"
+    "websiteLink": "https://www.getmonero.org/",
-       ],
+    "whitepaperLink": "https://www.getmonero.org/resources/research-lab/",
-       "websiteLink":"https://ripple.com/currency/",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/monero/"
-       "whitepaperLink":"https://github.com/ripple",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/xrp/"
   },
-    "XTZ-USD":{
+  "XRP-USD": {
-       "name":"Tezos",
+    "name": "Ripple",
-       "tags":[
+    "tags": ["Layer 1"],
-          "Layer 1"
+    "websiteLink": "https://ripple.com/currency/",
-       ],
+    "whitepaperLink": "https://github.com/ripple",
-       "websiteLink":"https://tezos.com",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/xrp/"
-       "whitepaperLink":"https://tezos.com/whitepaper.pdf",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/tezos/"
   },
-    "YFI-USD":{
+  "XTZ-USD": {
-       "name":"Yearn",
+    "name": "Tezos",
-       "tags":[
+    "tags": ["Layer 1"],
-          "Defi"
+    "websiteLink": "https://tezos.com",
-       ],
+    "whitepaperLink": "https://tezos.com/whitepaper.pdf",
-       "websiteLink":"https://yearn.finance/",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/tezos/"
-       "whitepaperLink":"https://docs.yearn.finance/",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/yearn-finance/"
   },
-    "ZEC-USD":{
+  "YFI-USD": {
-       "name":"Zcash",
+    "name": "Yearn",
-       "tags":[
+    "tags": ["Defi"],
-          "Layer 1"
+    "websiteLink": "https://yearn.finance/",
-       ],
+    "whitepaperLink": "https://docs.yearn.finance/",
-       "websiteLink":"https://z.cash/",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/yearn-finance/"
-       "whitepaperLink":"https://z.cash/technology/",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/zcash/"
   },
-    "ZRX-USD":{
+  "ZEC-USD": {
-       "name":"0x",
+    "name": "Zcash",
-       "tags":[
+    "tags": ["Layer 1"],
-          "Defi"
+    "websiteLink": "https://z.cash/",
-       ],
+    "whitepaperLink": "https://z.cash/technology/",
-       "websiteLink":"https://0x.org/",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/zcash/"
-       "whitepaperLink":"https://0x.org/pdfs/0x_white_paper.pdf",
+  },
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/0x/"
+  "ZRX-USD": {
-    }
+    "name": "0x",
+    "tags": ["Defi"],
+    "websiteLink": "https://0x.org/",
+    "whitepaperLink": "https://0x.org/pdfs/0x_white_paper.pdf",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/0x/"
   }
+}

src/components/AssetIcon.tsx

@@ -45,6 +45,7 @@ const assetIcons = {
   SOL: '/currencies/sol.png',
   SUI: '/currencies/sui.png',
   SUSHI: '/currencies/sushi.png',
+  TIA: '/currencies/tia.png',
   TRX: '/currencies/trx.png',
   UMA: '/currencies/uma.png',
   UNI: '/currencies/uni.png',
@@ -71,8 +72,13 @@ export const AssetIcon = ({
 }: {
   symbol?: Nullable<string>;
   className?: string;
-}) =>
+}) => (
-  isAssetSymbol(symbol) ? <Styled.Img src={assetIcons[symbol]} className={className} /> : null;
+  <Styled.Img
+    src={isAssetSymbol(symbol) ? assetIcons[symbol] : '/currencies/unavailable.png'}
+    className={className}
+    alt={symbol}
+  />
+);
 
 const Styled: Record<string, AnyStyledComponent> = {};
 

src/components/CollapsibleTabs.tsx

@@ -31,10 +31,12 @@ type ElementProps<TabItemsValue> = {
 };
 
 type StyleProps = {
-  fullWidthTabs?: boolean;
   className?: string;
+  fullWidthTabs?: boolean;
 };
 
+export type CollapsibleTabsProps<TabItemsValue> = ElementProps<TabItemsValue> & StyleProps;
+
 export const CollapsibleTabs = <TabItemsValue extends string>({
   defaultValue,
   items,
@@ -43,8 +45,9 @@ export const CollapsibleTabs = <TabItemsValue extends string>({
   onOpenChange,
 
   fullWidthTabs,
+
   className,
-}: ElementProps<TabItemsValue> & StyleProps) => {
+}: CollapsibleTabsProps<TabItemsValue>) => {
   const [value, setValue] = useState(defaultValue);
 
   const currentItem = items.find((item) => item.value === value);
@@ -86,8 +89,8 @@ export const CollapsibleTabs = <TabItemsValue extends string>({
         </Styled.Header>
 
         <Styled.CollapsibleContent>
-          {items.map(({ value, content }) => (
+          {items.map(({ asChild, value, content }) => (
-            <Styled.TabsContent key={value} value={value}>
+            <Styled.TabsContent key={value} asChild={asChild} value={value}>
               {content}
             </Styled.TabsContent>
           ))}
@@ -219,7 +222,6 @@ Styled.Header = styled.header`
 
 Styled.CollapsibleContent = styled(CollapsibleContent)`
   ${layoutMixins.stack}
-  ${layoutMixins.perspectiveArea}
 
   box-shadow: none;
 `;

src/components/Input.tsx

@@ -198,7 +198,6 @@ Styled.InputContainer = styled.div`
   border-radius: inherit;
 
   input {
-    user-select: all;
     flex: 1;
     width: 100%;
   }

src/components/Tabs.tsx

@@ -21,6 +21,7 @@ export type TabItem<TabItemsValue> = {
   content?: React.ReactNode;
   subitems?: TabItem<TabItemsValue>[];
   customTrigger?: ReactNode;
+  asChild?: boolean;
 };
 
 type ElementProps<TabItemsValue> = {
@@ -41,6 +42,8 @@ type StyleProps = {
   className?: string;
 };
 
+export type TabsProps<TabItemsValue> = ElementProps<TabItemsValue> & StyleProps;
+
 export const Tabs = <TabItemsValue extends string>({
   defaultValue,
   value,
@@ -107,9 +110,10 @@ export const Tabs = <TabItemsValue extends string>({
         sharedContent
       ) : (
         <Styled.Stack>
-          {items.map(({ value, content, forceMount }) => (
+          {items.map(({ asChild, value, content, forceMount }) => (
             <Styled.Content
               key={value}
+              asChild={asChild}
               value={value}
               forceMount={forceMount}
               $hide={forceMount && currentItem?.value !== value}
@@ -242,7 +246,6 @@ Styled.Trigger = styled(Trigger)<{ $withBorders?: boolean }>`
 
 Styled.Stack = styled.div`
   ${layoutMixins.stack}
-  ${layoutMixins.perspectiveArea}
 
   box-shadow: none;
 `;

src/constants/markets.ts

@@ -26,39 +26,3 @@ export enum FundingDirection {
   ToShort = 'ToShort',
   ToLong = 'ToLong',
 }
-
-export const MARKETS_TO_DISPLAY = [
-  'BTC-USD',
-  'ETH-USD',
-  'LINK-USD',
-  'SOL-USD',
-  'MATIC-USD',
-  'ATOM-USD',
-  'AVAX-USD',
-  'APE-USD',
-  'XRP-USD',
-  'UNI-USD',
-  'ADA-USD',
-  'TRX-USD',
-  'OP-USD',
-  'MKR-USD',
-  'DOGE-USD',
-  'SHIB-USD',
-  'COMP-USD',
-  'LDO-USD',
-  'NEAR-USD',
-  'APT-USD',
-  'SUI-USD',
-  'DOT-USD',
-  'ETC-USD',
-  'ARB-USD',
-  'CRV-USD',
-  'BLUR-USD',
-  'FIL-USD',
-  'XLM-USD',
-  'PEPE-USD',
-  'WLD-USD',
-  'SEI-USD',
-  'LTC-USD',
-  'BCH-USD',
-];

src/constants/notifications.ts

@@ -122,9 +122,15 @@ export type NotificationDisplayData = {
   toastDuration?: number;
 };
 
+export enum TransferNotificationTypes {
+  Withdrawal = 'withdrawal',
+  Deposit = 'deposit',
+}
+
 // Notification types
 export type TransferNotifcation = {
   txHash: string;
+  type?: TransferNotificationTypes;
   toChainId?: string;
   fromChainId?: string;
   toAmount?: number;

src/hooks/useMarketsData.ts

@@ -1,14 +1,7 @@
 import { useMemo } from 'react';
 import { useSelector, shallowEqual } from 'react-redux';
 
-import {
+import { MarketFilters, MARKET_FILTER_LABELS, type MarketData } from '@/constants/markets';
-  MarketFilters,
-  MARKET_FILTER_LABELS,
-  type MarketData,
-  MARKETS_TO_DISPLAY,
-} from '@/constants/markets';
-
-import { testFlags } from '@/lib/testFlags';
 
 import { getAssets } from '@/state/assetsSelectors';
 import { getPerpetualMarkets } from '@/state/perpetualsSelectors';
@@ -49,9 +42,7 @@ export const useMarketsData = (
   }, [allPerpetualMarkets, allAssets]);
 
   const filteredMarkets = useMemo(() => {
-    const filtered = markets
+    const filtered = markets.filter(filterFunctions[filter]);
-      .filter(filterFunctions[filter])
-      .filter(({ id }) => (testFlags.displayAllMarkets ? true : MARKETS_TO_DISPLAY.includes(id)));
 
     if (searchFilter) {
       return filtered.filter(

src/hooks/useNotificationTypes.tsx

@@ -20,6 +20,7 @@ import {
   type NotificationTypeConfig,
   NotificationType,
   DEFAULT_TOAST_AUTO_CLOSE_MS,
+  TransferNotificationTypes,
 } from '@/constants/notifications';
 
 import { useSelectedNetwork, useStringGetter } from '@/hooks';
@@ -152,20 +153,20 @@ export const notificationTypes: NotificationTypeConfig[] = [
 
       useEffect(() => {
         for (const transfer of transferNotifications) {
-          const { fromChainId, status, txHash, toAmount } = transfer;
+          const { fromChainId, status, txHash, toAmount, type } = transfer;
           const isFinished = Boolean(status) && status?.squidTransactionStatus !== 'ongoing';
           const icon = <Icon iconName={isFinished ? IconName.Transfer : IconName.Clock} />;
 
-          const type =
+          const transferType = type ??
             fromChainId === ENVIRONMENT_CONFIG_MAP[selectedNetwork].dydxChainId
-              ? 'withdrawal'
+              ? TransferNotificationTypes.Withdrawal
-              : 'deposit';
+              : TransferNotificationTypes.Deposit;
 
           const title = stringGetter({
             key: {
               deposit: isFinished ? STRING_KEYS.DEPOSIT : STRING_KEYS.DEPOSIT_IN_PROGRESS,
               withdrawal: isFinished ? STRING_KEYS.WITHDRAW : STRING_KEYS.WITHDRAW_IN_PROGRESS,
-            }[type],
+            }[transferType],
           });
 
           const toChainEta = status?.toChain?.chainData?.estimatedRouteDuration || 0;
@@ -190,7 +191,7 @@ export const notificationTypes: NotificationTypeConfig[] = [
                   slotIcon={icon}
                   slotTitle={title}
                   transfer={transfer}
-                  type={type}
+                  type={transferType}
                   triggeredAt={transfer.triggeredAt}
                   notification={notification}
                 />

src/hooks/useSubaccount.tsx

@@ -31,6 +31,7 @@ import { log } from '@/lib/telemetry';
 import { useAccounts } from './useAccounts';
 import { useTokenConfigs } from './useTokenConfigs';
 import { useDydxClient } from './useDydxClient';
+import { hashFromTx } from '@/lib/hashfromTx';
 
 type SubaccountContextType = ReturnType<typeof useSubaccountContext>;
 const SubaccountContext = createContext<SubaccountContextType>({} as SubaccountContextType);
@@ -293,12 +294,29 @@ export const useSubaccountContext = ({ localDydxWallet }: { localDydxWallet?: Lo
   );
 
   const sendSquidWithdraw = useCallback(
-    async (amount: number, payload: string) => {
+    async (amount: number, payload: string, isCctp?: boolean) => {
+      
+      const cctpWithdraw = () => {
+        return new Promise<string>((resolve, reject) => 
+          abacusStateManager.cctpWithdraw((success, error, data) => {
+            const parsedData = JSON.parse(data);
+            if (success && parsedData?.code == 0) {
+              resolve(parsedData?.transactionHash);
+            } else {
+              reject(error);
+            }
+          })
+        )
+      }
+      if (isCctp) {
+        return await cctpWithdraw();
+      }
+
       if (!subaccountClient) {
         return;
       }
-
+      const tx = await sendSquidWithdrawFromSubaccount({ subaccountClient, amount, payload });
-      return await sendSquidWithdrawFromSubaccount({ subaccountClient, amount, payload });
+      return hashFromTx(tx?.hash);
     },
     [subaccountClient, sendSquidWithdrawFromSubaccount]
   );

src/lib/abacus/dydxChainTransactions.ts

@@ -2,6 +2,7 @@ import Abacus, { type Nullable } from '@dydxprotocol/v4-abacus';
 import Long from 'long';
 import type { IndexedTx } from '@cosmjs/stargate';
 import { GAS_MULTIPLIER, encodeJson } from '@dydxprotocol/v4-client-js';
+import { EncodeObject } from '@cosmjs/proto-signing';
 
 import {
   CompositeClient,
@@ -41,6 +42,7 @@ import { openDialog } from '@/state/dialogs';
 import { StatefulOrderError } from '../errors';
 import { bytesToBigInt } from '../numbers';
 import { log } from '../telemetry';
+import { hashFromTx } from '../hashfromTx';
 
 class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
   private compositeClient: CompositeClient | undefined;
@@ -63,10 +65,14 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
   }
 
   setNobleWallet(nobleWallet: LocalWallet) {
+    try {
       this.nobleWallet = nobleWallet;
       if (this.nobleClient) {
         this.nobleClient.connect(nobleWallet);
       }
+    } catch (e) {
+      log('DydxChainTransactions/setNobleWallet', e);
+    }
   }
 
   async connectNetwork(
@@ -112,10 +118,15 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
 
       this.compositeClient = compositeClient;
 
+      try {
         if (nobleValidatorUrl) {
           this.nobleClient = new NobleClient(nobleValidatorUrl);
           if (this.nobleWallet) await this.nobleClient.connect(this.nobleWallet);
         }
+      } catch (e) {
+        log('DydxChainTransactions/connectNetwork/NobleClient', e);
+      }
+
       // Dispatch custom event to notify other parts of the app that the network has been connected
       const customEvent = new CustomEvent('abacus:connectNetwork', {
         detail: parsedParams,
@@ -380,6 +391,90 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
     }
   }
 
+  async withdrawToNobleIBC(
+    params: {
+      subaccountNumber: number,
+      amount: string,
+      ibcPayload: string,
+    }
+  ): Promise<string> {
+    if (!this.compositeClient || !this.localWallet) {
+      throw new Error('Missing compositeClient or localWallet');
+    }
+
+    const { subaccountNumber, amount, ibcPayload } = params ?? {};
+    const parsedIbcPayload: {
+      msgTypeUrl: string,
+      msg: any,
+    } = ibcPayload ? JSON.parse(ibcPayload) : undefined;
+  
+    try {
+      const msg = this.compositeClient.withdrawFromSubaccountMessage(
+        new SubaccountClient(this.localWallet, subaccountNumber),
+        parseFloat(amount).toFixed(this.compositeClient.validatorClient.config.denoms.USDC_DECIMALS)
+      );
+      const ibcMsg: EncodeObject = {
+        typeUrl: parsedIbcPayload.msgTypeUrl,
+        value: parsedIbcPayload.msg,
+      };
+
+      const tx = await this.compositeClient.send(
+        this.localWallet,
+        () => Promise.resolve([msg, ibcMsg]),
+        false
+      );
+
+      return JSON.stringify({
+        txHash: hashFromTx(tx?.hash)
+      });
+    } catch (error) {
+      log('DydxChainTransactions/withdrawToNobleIBC', error);
+
+      return JSON.stringify({
+        error,
+      });
+    }
+  }
+
+  async cctpWithdraw(params: {
+    typeUrl: string,
+    value: any,
+  }): Promise<string> {
+    if (!this.nobleClient?.isConnected) {
+      throw new Error('Missing nobleClient or localWallet');
+    }
+
+    try {
+      const ibcMsg = {
+        typeUrl: params.typeUrl, // '/circle.cctp.v1.MsgDepositForBurn',
+        value: params.value,
+      };
+      const fee = await this.nobleClient.simulateTransaction([ibcMsg]);
+  
+      // take out fee from amount before sweeping
+      const amount = parseInt(ibcMsg.value.amount, 10) -
+        Math.floor(parseInt(fee.amount[0].amount, 10) * GAS_MULTIPLIER);
+  
+      if (amount <= 0) {
+        throw new Error('noble balance does not cover fees');
+      }
+  
+      ibcMsg.value.amount = amount.toString();
+  
+      const tx = await this.nobleClient.send([ibcMsg]);
+
+      const parsedTx = this.parseToPrimitives(tx);
+
+      return JSON.stringify(parsedTx);
+    } catch (error) {
+      log('DydxChainTransactions/cctpWithdraw', error);
+
+      return JSON.stringify({
+        error,
+      });
+    }
+  }
+
   async transaction(
     type: TransactionTypes,
     paramsInJson: Abacus.Nullable<string>,
@@ -414,6 +509,17 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
           callback(result);
           break;
         }
+        case TransactionType.WithdrawToNobleIBC: {
+          const result = await this.withdrawToNobleIBC(params);
+          callback(result);
+          break;
+        }
+        case TransactionType.CctpWithdraw: {
+          const result = await this.cctpWithdraw(params);
+          callback(result);
+          break;
+          break;
+        }
         default: {
           break;
         }

src/lib/abacus/index.ts

@@ -85,7 +85,7 @@ class AbacusStateManager {
 
     const appConfigs = AbacusAppConfig.Companion.forWeb;
     if (!isMainnet || testFlags.withCCTP)
-      appConfigs.squidVersion = AbacusAppConfig.SquidVersion.V2DepositOnly;
+      appConfigs.squidVersion = AbacusAppConfig.SquidVersion.V2;
 
     this.stateManager = new AsyncAbacusStateManager(
       '',
@@ -262,6 +262,14 @@ class AbacusStateManager {
     ) => void
   ) => this.stateManager.cancelOrder(orderId, callback);
 
+  cctpWithdraw = (
+    callback: (
+      success: boolean,
+      parsingError: Nullable<ParsingError>,
+      data: string,
+    ) => void
+  ): void => this.stateManager.commitCCTPWithdraw(callback);
+
   // ------ Utils ------ //
   getHistoricalPnlPeriod = (): Nullable<HistoricalPnlPeriods> =>
     this.stateManager.historicalPnlPeriod;

src/lib/hashfromTx.ts

@@ -0,0 +1,3 @@
+export const hashFromTx = (
+  txHash: string | Uint8Array
+): string => `0x${Buffer.from(txHash).toString('hex')}`;

src/lib/testFlags.ts

@@ -5,7 +5,7 @@ class TestFlags {
     this.queryParams = {};
     const hash = window.location.hash;
     const queryIndex = hash.indexOf('?');
-    if (queryIndex === -1) return
+    if (queryIndex === -1) return;
 
     const queryParamsString = hash.substring(queryIndex + 1);
     const params = new URLSearchParams(queryParamsString);
@@ -19,10 +19,6 @@ class TestFlags {
     return !!this.queryParams.displayInitializingMarkets;
   }
 
-  get displayAllMarkets() {
-    return !!this.queryParams.displayAllMarkets;
-  }
-
   get withCCTP() {
     return !!this.queryParams.withCCTP;
   }

src/pages/trade/HorizontalPanel.tsx

@@ -1,8 +1,7 @@
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { shallowEqual, useSelector } from 'react-redux';
 import styled, { type AnyStyledComponent } from 'styled-components';
 
-import { AbacusOrderStatus } from '@/constants/abacus';
 import { STRING_KEYS } from '@/constants/localization';
 
 import { useBreakpoints, useStringGetter } from '@/hooks';
@@ -28,7 +27,6 @@ import {
   getCurrentMarketTradeInfoNumbers,
   getHasUnseenFillUpdates,
   getHasUnseenOrderUpdates,
-  getLatestOrderStatus,
   getTradeInfoNumbers,
 } from '@/state/accountSelectors';
 
@@ -82,8 +80,10 @@ export const HorizontalPanel = ({ isOpen = true, setIsOpen }: ElementProps) => {
     showCurrentMarket ? numOpenOrders : numTotalOpenOrders
   );
 
-  const tabItems = [
+  const tabItems = useMemo(
+    () => [
       {
+        asChild: true,
         value: InfoSection.Position,
         label: stringGetter({
           key: showCurrentMarket ? STRING_KEYS.POSITION : STRING_KEYS.POSITIONS,
@@ -118,6 +118,7 @@ export const HorizontalPanel = ({ isOpen = true, setIsOpen }: ElementProps) => {
         ),
       },
       {
+        asChild: true,
         value: InfoSection.Orders,
         label: stringGetter({ key: STRING_KEYS.ORDERS }),
 
@@ -152,6 +153,7 @@ export const HorizontalPanel = ({ isOpen = true, setIsOpen }: ElementProps) => {
         ),
       },
       {
+        asChild: true,
         value: InfoSection.Fills,
         label: stringGetter({ key: STRING_KEYS.FILLS }),
 
@@ -200,7 +202,20 @@ export const HorizontalPanel = ({ isOpen = true, setIsOpen }: ElementProps) => {
       //     <FundingPaymentsTable currentMarket={showCurrentMarket ? currentMarket?.id : undefined} />
       //   ),
       // },
-  ];
+    ],
+    [
+      stringGetter,
+      currentMarketId,
+      showCurrentMarket,
+      isTablet,
+      isWaitingForOrderToIndex,
+      isAccountViewOnly,
+      ordersTagNumber,
+      fillsTagNumber,
+      hasUnseenFillUpdates,
+      hasUnseenOrderUpdates,
+    ]
+  );
 
   return isTablet ? (
     <MobileTabs defaultValue={InfoSection.Position} items={tabItems} withBorders={false} />

src/styles/layoutMixins.ts

@@ -877,11 +877,6 @@ export const layoutMixins: Record<
     }
   `,
 
-  perspectiveArea: css`
-    perspective: 100rem;
-    transform-style: preserve-3d;
-  `,
-
   absolute: css`
     position: absolute;
     top: 0;

src/views/AccountInfo.tsx

@@ -63,7 +63,6 @@ Styled.AccountInfoSectionContainer = styled.div<{ showAccountInfo?: boolean }>`
   ${layoutMixins.column}
   height: var(--account-info-section-height);
   min-height: var(--account-info-section-height);
-  overflow-x: clip;
 
   ${({ showAccountInfo }) =>
     !showAccountInfo &&

src/views/AccountInfo/AccountInfoConnectedState.tsx

@@ -203,7 +203,6 @@ const Styled: Record<string, AnyStyledComponent> = {};
 
 Styled.Stack = styled.div`
   ${layoutMixins.stack}
-  ${layoutMixins.perspectiveArea}
 `;
 
 Styled.CornerButton = styled(Button)`
@@ -293,7 +292,14 @@ Styled.TransferButtons = styled.div`
 
 Styled.ConnectedAccountInfoContainer = styled.div<{ $showHeader?: boolean }>`
   ${layoutMixins.column}
+
+  @media ${breakpoints.notTablet} {
     ${layoutMixins.withOuterAndInnerBorders}
+  }
+
+  @media ${breakpoints.tablet} {
+    ${layoutMixins.withInnerBorder}
+  }
 
   ${({ $showHeader }) =>
     $showHeader &&

src/views/ExchangeBillboards.tsx

@@ -2,9 +2,7 @@ import styled, { type AnyStyledComponent } from 'styled-components';
 import { shallowEqual, useSelector } from 'react-redux';
 
 import { STRING_KEYS } from '@/constants/localization';
-import { MARKETS_TO_DISPLAY } from '@/constants/markets';
 import { useBreakpoints, useStringGetter } from '@/hooks';
-import { testFlags } from '@/lib/testFlags';
 import { breakpoints } from '@/styles';
 import { layoutMixins } from '@/styles/layoutMixins';
 
@@ -34,7 +32,6 @@ export const ExchangeBillboards: React.FC<ExchangeBillboardsProps> = ({
 
   Object.values(perpetualMarkets)
     .filter(Boolean)
-    .filter(({ id }) => (testFlags.displayAllMarkets ? true : MARKETS_TO_DISPLAY.includes(id)))
     .forEach(({ oraclePrice, perpetual }) => {
       const { volume24H, trades24H, openInterest = 0 } = perpetual || {};
       volume24HUSDC += volume24H ?? 0;

src/views/MarketDetails.tsx

@@ -213,13 +213,8 @@ Styled.MarketDetails = styled.div`
 `;
 
 Styled.Header = styled.header`
-  /* max-width: fit-content; */
-
   ${layoutMixins.column}
   gap: 1.25rem;
-
-  position: sticky;
-  bottom: 3rem;
 `;
 
 Styled.WrapRow = styled.div`

src/views/PositionInfo.tsx

@@ -453,13 +453,6 @@ Styled.Actions = styled.footer`
   > :last-child {
     flex: 2;
   }
-
-  position: sticky;
-  bottom: clamp(0.5rem, 7.5%, 2rem);
-
-  @media ${breakpoints.tablet} {
-    bottom: 0;
-  }
 `;
 
 Styled.Output = styled(Output)<{ sign: NumberSign; smallText?: boolean; margin?: string }>`
@@ -514,6 +507,7 @@ Styled.PositionInfo = styled.div`
 
 Styled.DetachedSection = styled(DetachedSection)`
   padding: 0 1.5rem;
+  position: relative;
 `;
 
 Styled.DetachedScrollableSection = styled(DetachedScrollableSection)`

src/views/charts/TvChart.tsx

@@ -82,7 +82,6 @@ const Styled: Record<string, AnyStyledComponent> = {};
 
 Styled.PriceChart = styled.div<{ isChartReady?: boolean }>`
   ${layoutMixins.stack}
-  ${layoutMixins.perspectiveArea}
 
   height: 100%;
 

src/views/dialogs/DetailsDialog/FillDetailsDialog.tsx

@@ -94,7 +94,7 @@ export const FillDetailsDialog = ({ fillId, setIsOpen }: ElementProps) => {
 
   return (
     <DetailsDialog
-      slotIcon={<Styled.AssetIcon symbol={asset.id} />}
+      slotIcon={<Styled.AssetIcon symbol={asset?.id} />}
       title={resources.typeStringKey && stringGetter({ key: resources.typeStringKey })}
       items={detailItems}
       setIsOpen={setIsOpen}

src/views/dialogs/DetailsDialog/OrderDetailsDialog.tsx

@@ -194,7 +194,7 @@ export const OrderDetailsDialog = ({ orderId, setIsOpen }: ElementProps) => {
 
   return (
     <DetailsDialog
-      slotIcon={<Styled.AssetIcon symbol={asset.id} />}
+      slotIcon={<Styled.AssetIcon symbol={asset?.id} />}
       title={!resources.typeStringKey ? '' : stringGetter({ key: resources.typeStringKey })}
       slotFooter={
         isAccountViewOnly ? null : isOrderStatusClearable(status) ? (

src/views/forms/AccountManagementForms/TokenSelectMenu.tsx

@@ -57,7 +57,6 @@ export const TokenSelectMenu = ({ selectedToken, onSelectToken }: ElementProps)
               <Tag>{type === TransferType.deposit ? 'USDC' : selectedToken?.symbol}</Tag>
             </>
           ),
-          tooltip: 'swap',
         },
       ]}
     >

src/views/forms/AccountManagementForms/WithdrawForm.tsx

@@ -10,7 +10,7 @@ import { AlertType } from '@/constants/alerts';
 import { ButtonSize } from '@/constants/buttons';
 import { STRING_KEYS } from '@/constants/localization';
 import { ENVIRONMENT_CONFIG_MAP } from '@/constants/networks';
-import { NotificationStatus } from '@/constants/notifications';
+import { NotificationStatus, TransferNotificationTypes } from '@/constants/notifications';
 import { NumberSign } from '@/constants/numbers';
 
 import {
@@ -45,6 +45,7 @@ import { getTransferInputs } from '@/state/inputsSelectors';
 
 import abacusStateManager from '@/lib/abacus';
 import { MustBigNumber } from '@/lib/numbers';
+import { getNobleChainId } from '@/lib/squid';
 
 import { TokenSelectMenu } from './TokenSelectMenu';
 import { WithdrawButtonAndReceipt } from './WithdrawForm/WithdrawButtonAndReceipt';
@@ -167,16 +168,16 @@ export const WithdrawForm = () => {
             })
           );
         } else {
-          const txHash = await sendSquidWithdraw(debouncedAmountBN.toNumber(), requestPayload.data);
+          const txHash = await sendSquidWithdraw(debouncedAmountBN.toNumber(), requestPayload.data, isCctp);
-          if (txHash?.hash) {
+          if (txHash) {
-            const hash = `0x${Buffer.from(txHash.hash).toString('hex')}`;
             addTransferNotification({
-              txHash: hash,
+              txHash: txHash,
-              fromChainId: ENVIRONMENT_CONFIG_MAP[selectedNetwork].dydxChainId,
+              type: TransferNotificationTypes.Withdrawal,
+              fromChainId: !isCctp ? ENVIRONMENT_CONFIG_MAP[selectedNetwork].dydxChainId : getNobleChainId(),
               toChainId: chainIdStr || undefined,
               toAmount: debouncedAmountBN.toNumber(),
               triggeredAt: Date.now(),
-              notificationStatus: NotificationStatus.Triggered,
+              isCctp,
             });
             abacusStateManager.clearTransferInputValues();
             setWithdrawAmount('');

src/views/forms/TradeForm/LeverageSlider.tsx

@@ -1,10 +1,10 @@
-import { type Dispatch, type SetStateAction, useCallback, useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 import styled, { AnyStyledComponent, css } from 'styled-components';
 import { Root, Thumb, Track } from '@radix-ui/react-slider';
 import _ from 'lodash';
 import { OrderSide } from '@dydxprotocol/v4-client-js';
 
-import { type Nullable, TradeInputField } from '@/constants/abacus';
+import { TradeInputField } from '@/constants/abacus';
 import { PositionSide } from '@/constants/trade';
 
 import { MustBigNumber, type BigNumberish } from '@/lib/numbers';
@@ -12,11 +12,11 @@ import abacusStateManager from '@/lib/abacus';
 
 type ElementProps = {
   leverage?: BigNumberish | null;
-  leverageInputValue: Nullable<number>;
+  leverageInputValue: string;
   maxLeverage: BigNumberish | null;
   orderSide: OrderSide;
   positionSide: PositionSide;
-  setLeverageInputValue: Dispatch<SetStateAction<Nullable<number>>>;
+  setLeverageInputValue: (value: string) => void;
 };
 
 type StyleProps = { className?: string };
@@ -33,6 +33,7 @@ export const LeverageSlider = ({
   const leverageBN = MustBigNumber(leverage);
   const maxLeverageBN = MustBigNumber(maxLeverage);
   const leverageInputBN = MustBigNumber(leverageInputValue || leverage);
+  const leverageInputNumber = isNaN(leverageInputBN.toNumber()) ? 0 : leverageInputBN.toNumber();
 
   const sliderConfig = useMemo(
     () => ({
@@ -79,12 +80,12 @@ export const LeverageSlider = ({
   );
 
   const onSliderDrag = ([newLeverage]: number[]) => {
-    setLeverageInputValue(newLeverage);
+    setLeverageInputValue(`${newLeverage}`);
     debouncedSetAbacusLeverage(newLeverage);
   };
 
   const onValueCommit = ([newLeverage]: number[]) => {
-    setLeverageInputValue(newLeverage);
+    setLeverageInputValue(`${newLeverage}`);
 
     // Ensure Abacus is updated with the latest, committed value
     debouncedSetAbacusLeverage.cancel();
@@ -102,7 +103,7 @@ export const LeverageSlider = ({
         min={min}
         max={max}
         step={0.1}
-        value={[Math.min(Math.max(leverageInputBN.toNumber(), min), max)]}
+        value={[Math.min(Math.max(leverageInputNumber, min), max)]}
         onValueChange={onSliderDrag}
         onValueCommit={onValueCommit}
       >

src/views/forms/TradeForm/MarketLeverageInput.tsx

@@ -1,9 +1,8 @@
-import type { Dispatch, SetStateAction } from 'react';
 import { shallowEqual, useSelector } from 'react-redux';
 import styled, { AnyStyledComponent } from 'styled-components';
 import { OrderSide } from '@dydxprotocol/v4-client-js';
 
-import { TradeInputField, Nullable } from '@/constants/abacus';
+import { TradeInputField } from '@/constants/abacus';
 import { ButtonShape } from '@/constants/buttons';
 import { STRING_KEYS } from '@/constants/localization';
 import { LEVERAGE_DECIMALS } from '@/constants/numbers';
@@ -62,21 +61,7 @@ export const MarketLeverageInput = ({
 
   const leveragePosition = postOrderLeverage ? newPositionSide : currentPositionSide;
 
-  const onLeverageInput = ({ value, floatValue }: { value: string; floatValue?: number }) => {
+  const getSignedLeverage = (newLeverage: string | number) => {
-    const newLeverage = MustBigNumber(floatValue).toFixed();
-
-    if (value === '' || newLeverage === 'NaN' || !floatValue) {
-      setLeverageInputValue('');
-      abacusStateManager.setTradeValue({
-        value: null,
-        field: TradeInputField.leverage,
-      });
-    } else {
-      updateLeverage(floatValue);
-    }
-  };
-
-  const updateLeverage = (newLeverage: string | number) => {
     const newLeverageBN = MustBigNumber(newLeverage);
     const newLeverageSignedBN =
       leveragePosition === PositionSide.Short ||
@@ -84,10 +69,33 @@ export const MarketLeverageInput = ({
         ? newLeverageBN.abs().negated()
         : newLeverageBN.abs();
 
-    setLeverageInputValue(newLeverageSignedBN.toString());
+    return newLeverageSignedBN.toFixed(LEVERAGE_DECIMALS);
+  };
+
+  const onLeverageInput = ({
+    floatValue,
+    formattedValue,
+  }: {
+    floatValue?: number;
+    formattedValue: string;
+  }) => {
+    setLeverageInputValue(formattedValue);
+    const newLeverage = MustBigNumber(floatValue).toFixed();
 
     abacusStateManager.setTradeValue({
-      value: newLeverageSignedBN.toFixed(LEVERAGE_DECIMALS),
+      value:
+        formattedValue === '' || newLeverage === 'NaN' ? null : getSignedLeverage(formattedValue),
+      field: TradeInputField.leverage,
+    });
+  };
+
+  const updateLeverage = (newLeverage: string | number) => {
+    const newLeverageSigned = getSignedLeverage(newLeverage);
+
+    setLeverageInputValue(newLeverageSigned);
+
+    abacusStateManager.setTradeValue({
+      value: newLeverageSigned,
       field: TradeInputField.leverage,
     });
   };
@@ -130,7 +138,7 @@ export const MarketLeverageInput = ({
         >
           <Styled.LeverageSlider
             leverage={currentLeverage}
-            leverageInputValue={leverageInputValue}
+            leverageInputValue={getSignedLeverage(leverageInputValue)}
             maxLeverage={maxLeverage}
             orderSide={orderSide}
             positionSide={currentPositionSide}

src/views/forms/TradeForm/TradeSizeInputs.tsx

@@ -77,7 +77,7 @@ export const TradeSizeInputs = () => {
     floatValue?: number;
     formattedValue: string;
   }) => {
-    dispatch(setTradeFormInputs({ amountInput: MustBigNumber(floatValue).toString() }));
+    dispatch(setTradeFormInputs({ amountInput: formattedValue }));
     const newAmount = MustBigNumber(floatValue).toFixed(decimals);
 
     abacusStateManager.setTradeValue({
@@ -93,7 +93,7 @@ export const TradeSizeInputs = () => {
     floatValue?: number;
     formattedValue: string;
   }) => {
-    dispatch(setTradeFormInputs({ usdAmountInput: MustBigNumber(floatValue).toString() }));
+    dispatch(setTradeFormInputs({ usdAmountInput: formattedValue }));
     const newUsdcAmount = MustBigNumber(floatValue).toFixed(tickSizeDecimals || USD_DECIMALS);
 
     abacusStateManager.setTradeValue({

src/views/notifications/TransferStatusNotification/TransferStatusSteps.tsx

@@ -12,10 +12,11 @@ import { LoadingSpinner } from '@/components/Loading/LoadingSpinner';
 import { layoutMixins } from '@/styles/layoutMixins';
 import { STRING_KEYS } from '@/constants/localization';
 import { ENVIRONMENT_CONFIG_MAP } from '@/constants/networks';
+import { TransferNotificationTypes } from '@/constants/notifications';
 
 type ElementProps = {
   status?: StatusResponse;
-  type: 'withdrawal' | 'deposit';
+  type: TransferNotificationTypes;
 };
 
 type StyleProps = {
@@ -46,11 +47,13 @@ export const TransferStatusSteps = ({ className, status, type }: ElementProps &
       {
         label: stringGetter({
           key:
-            type === 'deposit' ? STRING_KEYS.INITIATED_DEPOSIT : STRING_KEYS.INITIATED_WITHDRAWAL,
+            type === TransferNotificationTypes.Deposit
+              ? STRING_KEYS.INITIATED_DEPOSIT
+              : STRING_KEYS.INITIATED_WITHDRAWAL,
         }),
         step: TransferStatusStep.FromChain,
         link:
-          type === 'deposit'
+          type === TransferNotificationTypes.Deposit
             ? status?.fromChain?.transactionUrl
             : routeStatus?.[0]?.chainId === dydxChainId && routeStatus[0].txHash
             ? `${mintscanTxUrl?.replace('{tx_hash}', routeStatus[0].txHash.replace('0x', ''))}`
@@ -63,14 +66,20 @@ export const TransferStatusSteps = ({ className, status, type }: ElementProps &
       },
       {
         label: stringGetter({
-          key: type === 'deposit' ? STRING_KEYS.DEPOSIT_TO_CHAIN : STRING_KEYS.WITHDRAW_TO_CHAIN,
+          key:
+            type === TransferNotificationTypes.Deposit
+              ? STRING_KEYS.DEPOSIT_TO_CHAIN
+              : STRING_KEYS.WITHDRAW_TO_CHAIN,
           params: {
-            CHAIN: type === 'deposit' ? 'dYdX' : status?.toChain?.chainData?.chainName,
+            CHAIN:
+              type === TransferNotificationTypes.Deposit
+                ? 'dYdX'
+                : status?.toChain?.chainData?.chainName,
           },
         }),
         step: TransferStatusStep.ToChain,
         link:
-          type === 'withdrawal'
+          type === TransferNotificationTypes.Withdrawal
             ? status?.toChain?.transactionUrl
             : currentStatus?.chainId === dydxChainId && currentStatus?.txHash
             ? `${mintscanTxUrl?.replace('{tx_hash}', currentStatus.txHash.replace('0x', ''))}`

src/views/notifications/TransferStatusNotification/index.tsx

@@ -5,7 +5,7 @@ import { useInterval, useStringGetter } from '@/hooks';
 
 import { AlertType } from '@/constants/alerts';
 import { STRING_KEYS } from '@/constants/localization';
-import { TransferNotifcation } from '@/constants/notifications';
+import { TransferNotifcation, TransferNotificationTypes } from '@/constants/notifications';
 
 import { formatSeconds } from '@/lib/timeUtils';
 
@@ -22,7 +22,7 @@ import { layoutMixins } from '@/styles/layoutMixins';
 import { TransferStatusSteps } from './TransferStatusSteps';
 
 type ElementProps = {
-  type: 'withdrawal' | 'deposit';
+  type: TransferNotificationTypes;
   transfer: TransferNotifcation;
   triggeredAt?: number;
 };
@@ -55,7 +55,7 @@ export const TransferStatusNotification = ({
   useInterval({ callback: updateSecondsLeft });
 
   const inProgressStatusString =
-    type === 'deposit'
+    type === TransferNotificationTypes.Deposit
       ? secondsLeft > 0
         ? STRING_KEYS.DEPOSIT_STATUS
         : STRING_KEYS.DEPOSIT_STATUS_SHORTLY
@@ -64,7 +64,7 @@ export const TransferStatusNotification = ({
       : STRING_KEYS.WITHDRAW_STATUS_SHORTLY;
 
   const statusString =
-    type === 'deposit'
+    type === TransferNotificationTypes.Deposit
       ? status?.squidTransactionStatus === 'success'
         ? STRING_KEYS.DEPOSIT_COMPLETE
         : inProgressStatusString

src/views/tables/OrdersTable.tsx

@@ -230,14 +230,7 @@ const getOrdersTableColumnDef = ({
         label: `${stringGetter({ key: STRING_KEYS.STATUS })} / ${stringGetter({
           key: STRING_KEYS.FILL,
         })}`,
-        renderCell: ({
+        renderCell: ({ asset, createdAtMilliseconds, size, status, totalFilled, resources }) => {
-          asset,
-          createdAtMilliseconds,
-          size,
-          status,
-          totalFilled,
-          resources,
-        }) => {
           const { statusIconColor, statusStringKey } = getStatusIconInfo({
             status,
             totalFilled,
@@ -345,9 +338,7 @@ export const OrdersTable = ({
     if (hasUnseenOrderUpdates) dispatch(viewedOrders());
   }, [hasUnseenOrderUpdates]);
 
-  const symbol = currentMarket
+  const symbol = currentMarket ? allAssets[allPerpetualMarkets[currentMarket]?.assetId]?.id : null;
-    ? allAssets[allPerpetualMarkets[currentMarket]?.assetId]?.symbol
-    : null;
 
   const ordersData = orders.map((order: SubaccountOrder) =>
     getHydratedTradingData({