Fix status empty bug

package.json

@@ -39,16 +39,14 @@
     "@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.0.24",
-    "@dydxprotocol/v4-client-js": "^1.0.6",
+    "@dydxprotocol/v4-client-js": "^1.0.0",
-    "@dydxprotocol/v4-localization": "^1.0.17",
+    "@dydxprotocol/v4-localization": "^1.0.5",
     "@ethersproject/providers": "^5.7.2",
     "@js-joda/core": "^5.5.3",
-    "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-collapsible": "^1.0.3",
     "@radix-ui/react-dialog": "^1.0.4",
     "@radix-ui/react-dropdown-menu": "^2.0.5",
-    "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-navigation-menu": "^1.1.3",
     "@radix-ui/react-popover": "^1.0.6",
     "@radix-ui/react-radio-group": "^1.1.3",
@@ -111,7 +109,7 @@
     "styled-components": "^5.3.11",
     "use-latest": "^1.2.1",
     "viem": "^1.12.2",
-    "wagmi": "^1.4.5"
+    "wagmi": "^1.3.7"
   },
   "devDependencies": {
     "@babel/core": "^7.22.5",

pnpm-lock.yaml

@@ -27,23 +27,20 @@ dependencies:
     specifier: ^0.31.0
     version: 0.31.0
   '@dydxprotocol/v4-abacus':
-    specifier: ^1.1.4
+    specifier: ^1.0.24
-    version: 1.1.4
+    version: 1.0.24
   '@dydxprotocol/v4-client-js':
-    specifier: ^1.0.6
+    specifier: ^1.0.0
-    version: 1.0.6
+    version: 1.0.0
   '@dydxprotocol/v4-localization':
-    specifier: ^1.0.17
+    specifier: ^1.0.5
-    version: 1.0.17
+    version: 1.0.5
   '@ethersproject/providers':
     specifier: ^5.7.2
     version: 5.7.2
   '@js-joda/core':
     specifier: ^5.5.3
     version: 5.5.3
-  '@radix-ui/react-checkbox':
-    specifier: ^1.0.4
-    version: 1.0.4(@types/react-dom@18.2.6)(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0)
   '@radix-ui/react-collapsible':
     specifier: ^1.0.3
     version: 1.0.3(@types/react-dom@18.2.6)(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0)
@@ -53,9 +50,6 @@ dependencies:
   '@radix-ui/react-dropdown-menu':
     specifier: ^2.0.5
     version: 2.0.5(@types/react-dom@18.2.6)(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0)
-  '@radix-ui/react-icons':
-    specifier: ^1.3.0
-    version: 1.3.0(react@18.2.0)
   '@radix-ui/react-navigation-menu':
     specifier: ^1.1.3
     version: 1.1.3(@types/react-dom@18.2.6)(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0)
@@ -243,8 +237,8 @@ dependencies:
     specifier: ^1.12.2
     version: 1.12.2(typescript@5.1.3)
   wagmi:
-    specifier: ^1.4.5
+    specifier: ^1.3.7
-    version: 1.4.5(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0)(typescript@5.1.3)(viem@1.12.2)
+    version: 1.3.7(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0)(typescript@5.1.3)(viem@1.12.2)
 
 devDependencies:
   '@babel/core':
@@ -988,12 +982,12 @@ packages:
     resolution: {integrity: sha512-RpfLEtTlyIxeNPGKcokS+p3BZII/Q3bYxryFRglh5H3A3T8q9fsLYm72VYAMEOOIBLEa8o93kFLiBDUWKrwXZA==}
     dev: true
 
-  /@dydxprotocol/v4-abacus@1.1.4:
+  /@dydxprotocol/v4-abacus@1.0.24:
-    resolution: {integrity: sha512-gml6qheFsPShE9p3FmzFeStYM9ZVhgMq0K0+y12V7pObnMKbumkOIISgCzc47idkah0GMNhiqwi9faD5SjOy/A==}
+    resolution: {integrity: sha512-wDGSjkrc3Se6Ev7UTjPgJV7PiyzZSz2mJwOTZikLwH7W3k1iPYGQmaCd7TudFk8h2aSdlEwNsQBCf0sLoyvHaQ==}
     dev: false
 
-  /@dydxprotocol/v4-client-js@1.0.6:
+  /@dydxprotocol/v4-client-js@1.0.0:
-    resolution: {integrity: sha512-xiWH+kbix+zhI6EsAnd+NDvkjBgxWtGwQmvpd0PjljWNYSFgUtNe5M+piDdRbl2nhy6YWbxAGTwwS3K/ih5qSw==}
+    resolution: {integrity: sha512-ehfHO+zQy795TcJRwtiawadFHZyh4HnpJNP26hCGsIjLE5q6LLHweQHpK/1N/sXU1PBOuQwc7iaJnFop6gYauQ==}
     dependencies:
       '@cosmjs/amino': 0.30.1
       '@cosmjs/encoding': 0.31.1
@@ -1020,8 +1014,8 @@ packages:
       - utf-8-validate
     dev: false
 
-  /@dydxprotocol/v4-localization@1.0.17:
+  /@dydxprotocol/v4-localization@1.0.5:
-    resolution: {integrity: sha512-fybNpi1ono1IdwFQJTszsHbHmGti2BdhTo1nz9KOmKh3tmXdhWObKb64Ve6/6Fjk6h/9+DeZ5ZG4UbYyYMyhCA==}
+    resolution: {integrity: sha512-zZm3GFp/ORz9YjigQFVBlcWmaxYY+XEdIw8AWN5nEbsuiA2Jay+/OA7lO9+nV1J1p1T+TgLo9iczIHJsAo3IsA==}
     dev: false
 
   /@dydxprotocol/v4-proto@0.4.1:
@@ -2187,34 +2181,6 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
-  /@radix-ui/react-checkbox@1.0.4(@types/react-dom@18.2.6)(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-CBuGQa52aAYnADZVt/KBQzXrwx6TqnlwtcIPGtVt5JkkzQwMOLJjPukimhfKEr4GQNd43C+djUh5Ikopj8pSLg==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-    dependencies:
-      '@babel/runtime': 7.22.10
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.14)(react@18.2.0)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.14)(react@18.2.0)
-      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.6)(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.6)(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.14)(react@18.2.0)
-      '@radix-ui/react-use-previous': 1.0.1(@types/react@18.2.14)(react@18.2.0)
-      '@radix-ui/react-use-size': 1.0.1(@types/react@18.2.14)(react@18.2.0)
-      '@types/react': 18.2.14
-      '@types/react-dom': 18.2.6
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    dev: false
-
   /@radix-ui/react-collapsible@1.0.3(@types/react-dom@18.2.6)(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-UBmVDkmR6IvDsloHVN+3rtx4Mi5TFvylYXpluuv0f37dtaz3H99bp8No0LGXRigVpl3UAT4l9j6bIchh42S/Gg==}
     peerDependencies:
@@ -2516,14 +2482,6 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
-  /@radix-ui/react-icons@1.3.0(react@18.2.0):
-    resolution: {integrity: sha512-jQxj/0LKgp+j9BiTXz3O3sgs26RNet2iLWmsPyRz2SIcR4q/4SbazXfnYwbAr+vLYKSfc7qxzyGQA1HLlYiuNw==}
-    peerDependencies:
-      react: ^16.x || ^17.x || ^18.x
-    dependencies:
-      react: 18.2.0
-    dev: false
-
   /@radix-ui/react-id@1.0.0(react@18.2.0):
     resolution: {integrity: sha512-Q6iAB/U7Tq3NTolBBQbHTgclPmGWE3OlktGGqrClPozSw4vkQ1DfQAOtzgRPecKsMdJINE05iaoDUG8tRzCBjw==}
     peerDependencies:
@@ -5979,12 +5937,26 @@ packages:
       pretty-format: 27.5.1
     dev: true
 
-  /@wagmi/connectors@3.1.3(@types/react@18.2.14)(react@18.2.0)(typescript@5.1.3)(viem@1.12.2):
+  /@wagmi/chains@1.4.0(typescript@5.1.3):
-    resolution: {integrity: sha512-UgwsQKQDFObJVJMf9pDfFoXTv710o4zrTHyhIWKBTMMkLpCMsMxN5+ZaDhBYt/BgoRinfRYQo8uwuwLhxE6Log==}
+    resolution: {integrity: sha512-9HwJrhcZ1TxyrCbE10y7s1eSiSiyfGam7AHIOLYExaOX+vpOZ+MNTt4orFEDbEpz1fxwJDPPI38lanAUix1OSA==}
     peerDependencies:
       typescript: '>=5.0.4'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      typescript: 5.1.3
+    dev: false
+
+  /@wagmi/connectors@2.6.5(@wagmi/chains@1.4.0)(react@18.2.0)(typescript@5.1.3)(viem@1.12.2):
+    resolution: {integrity: sha512-klF31togMDd0qQqEcLl5cCGxjMbL0RRXQ8I1vxmEa3KdGzw6Z3ICVzX7/bDfnNEZcOW7BKyAnZDq7rCt5jTOiw==}
+    peerDependencies:
+      '@wagmi/chains': '>=1.3.0'
+      typescript: '>=5.0.4'
       viem: '>=0.3.35'
     peerDependenciesMeta:
+      '@wagmi/chains':
+        optional: true
       typescript:
         optional: true
     dependencies:
@@ -5992,17 +5964,17 @@ packages:
       '@ledgerhq/connect-kit-loader': 1.1.2
       '@safe-global/safe-apps-provider': 0.17.1(typescript@5.1.3)
       '@safe-global/safe-apps-sdk': 8.1.0(typescript@5.1.3)
-      '@walletconnect/ethereum-provider': 2.10.2(@walletconnect/modal@2.6.2)
+      '@wagmi/chains': 1.4.0(typescript@5.1.3)
+      '@walletconnect/ethereum-provider': 2.8.6(@walletconnect/modal@2.5.9)
       '@walletconnect/legacy-provider': 2.0.0
-      '@walletconnect/modal': 2.6.2(@types/react@18.2.14)(react@18.2.0)
+      '@walletconnect/modal': 2.5.9(react@18.2.0)
-      '@walletconnect/utils': 2.10.2
+      '@walletconnect/utils': 2.8.6
       abitype: 0.8.7(typescript@5.1.3)
       eventemitter3: 4.0.7
       typescript: 5.1.3
       viem: 1.12.2(typescript@5.1.3)
     transitivePeerDependencies:
       - '@react-native-async-storage/async-storage'
-      - '@types/react'
       - bufferutil
       - encoding
       - lokijs
@@ -6012,8 +5984,8 @@ packages:
       - zod
     dev: false
 
-  /@wagmi/core@1.4.5(@types/react@18.2.14)(react@18.2.0)(typescript@5.1.3)(viem@1.12.2):
+  /@wagmi/core@1.3.6(@types/react@18.2.14)(react@18.2.0)(typescript@5.1.3)(viem@1.12.2):
-    resolution: {integrity: sha512-N9luRb1Uk4tBN9kaYcQSWKE9AsRt/rvZaFt5IZech4JPzNN2sQlfhKd9GEjOXYRDqEPHdDvos7qyBKiDNTz4GA==}
+    resolution: {integrity: sha512-TXv9ZlRR5aySfERFuWMuo+lKXC/CoqtxVJZVHPqhK1jY+nldMx3AvrWzzF4CccRaMYcVdvPFepvmxzq2A2VvWg==}
     peerDependencies:
       typescript: '>=5.0.4'
       viem: '>=0.3.35'
@@ -6021,7 +5993,8 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@wagmi/connectors': 3.1.3(@types/react@18.2.14)(react@18.2.0)(typescript@5.1.3)(viem@1.12.2)
+      '@wagmi/chains': 1.4.0(typescript@5.1.3)
+      '@wagmi/connectors': 2.6.5(@wagmi/chains@1.4.0)(react@18.2.0)(typescript@5.1.3)(viem@1.12.2)
       abitype: 0.8.7(typescript@5.1.3)
       eventemitter3: 4.0.7
       typescript: 5.1.3
@@ -6066,8 +6039,8 @@ packages:
       - utf-8-validate
     dev: false
 
-  /@walletconnect/core@2.10.2:
+  /@walletconnect/core@2.8.6:
-    resolution: {integrity: sha512-JQz/xp3SLEpTeRQctdck2ugSBVEpMxoSE+lFi2voJkZop1hv6P+uqr6E4PzjFluAjeAnKlT1xvra0aFWjPWVcw==}
+    resolution: {integrity: sha512-rnSqm1KJLcww/v6+UH8JeibQkJ3EKgyUDPfEK0stSEkrIUIcXaFlq3Et8S+vgV8bPhI0MVUhAhFL5OJZ3t2ryg==}
     dependencies:
       '@walletconnect/heartbeat': 1.2.1
       '@walletconnect/jsonrpc-provider': 1.0.13
@@ -6080,8 +6053,8 @@ packages:
       '@walletconnect/relay-auth': 1.0.4
       '@walletconnect/safe-json': 1.0.2
       '@walletconnect/time': 1.0.2
-      '@walletconnect/types': 2.10.2
+      '@walletconnect/types': 2.8.6
-      '@walletconnect/utils': 2.10.2
+      '@walletconnect/utils': 2.8.6
       events: 3.3.0
       lodash.isequal: 4.5.0
       uint8arrays: 3.1.1
@@ -6117,8 +6090,8 @@ packages:
       tslib: 1.14.1
     dev: false
 
-  /@walletconnect/ethereum-provider@2.10.2(@walletconnect/modal@2.6.2):
+  /@walletconnect/ethereum-provider@2.8.6(@walletconnect/modal@2.5.9):
-    resolution: {integrity: sha512-QMYFZ6+rVq2CJLdIPdKK0j1Qm66UA27oQU5V2SrL8EVwl7wFfm0Bq7fnL+qAWeDpn612dNeNErpk/ROa1zWlWg==}
+    resolution: {integrity: sha512-wUvJEsXTLmMihrOhQxAs1k9hrWEOT03QBn54P9r9GpJbJ1zEfIjQaXFfi8uup6gldhH+vN38PsbOiLyv/6d3qQ==}
     peerDependencies:
       '@walletconnect/modal': '>=2'
     peerDependenciesMeta:
@@ -6129,11 +6102,11 @@ packages:
       '@walletconnect/jsonrpc-provider': 1.0.13
       '@walletconnect/jsonrpc-types': 1.0.3
       '@walletconnect/jsonrpc-utils': 1.0.8
-      '@walletconnect/modal': 2.6.2(@types/react@18.2.14)(react@18.2.0)
+      '@walletconnect/modal': 2.5.9(react@18.2.0)
-      '@walletconnect/sign-client': 2.10.2
+      '@walletconnect/sign-client': 2.8.6
-      '@walletconnect/types': 2.10.2
+      '@walletconnect/types': 2.8.6
-      '@walletconnect/universal-provider': 2.10.2
+      '@walletconnect/universal-provider': 2.8.6
-      '@walletconnect/utils': 2.10.2
+      '@walletconnect/utils': 2.8.6
       events: 3.3.0
     transitivePeerDependencies:
       - '@react-native-async-storage/async-storage'
@@ -6284,34 +6257,32 @@ packages:
       tslib: 1.14.1
     dev: false
 
-  /@walletconnect/modal-core@2.6.2(@types/react@18.2.14)(react@18.2.0):
+  /@walletconnect/modal-core@2.5.9(react@18.2.0):
-    resolution: {integrity: sha512-cv8ibvdOJQv2B+nyxP9IIFdxvQznMz8OOr/oR/AaUZym4hjXNL/l1a2UlSQBXrVjo3xxbouMxLb3kBsHoYP2CA==}
+    resolution: {integrity: sha512-isIebwF9hOknGouhS/Ob4YJ9Sa/tqNYG2v6Ua9EkCqIoLimepkG5eC53tslUWW29SLSfQ9qqBNG2+iE7yQXqgw==}
     dependencies:
-      valtio: 1.11.2(@types/react@18.2.14)(react@18.2.0)
+      buffer: 6.0.3
+      valtio: 1.10.6(react@18.2.0)
     transitivePeerDependencies:
-      - '@types/react'
       - react
     dev: false
 
-  /@walletconnect/modal-ui@2.6.2(@types/react@18.2.14)(react@18.2.0):
+  /@walletconnect/modal-ui@2.5.9(react@18.2.0):
-    resolution: {integrity: sha512-rbdstM1HPGvr7jprQkyPggX7rP4XiCG85ZA+zWBEX0dVQg8PpAgRUqpeub4xQKDgY7pY/xLRXSiCVdWGqvG2HA==}
+    resolution: {integrity: sha512-nfBaAT9Ls7RZTBBgAq+Nt/3AoUcinIJ9bcq5UHXTV3lOPu/qCKmUC/0HY3GvUK8ykabUAsjr0OAGmcqkB91qug==}
     dependencies:
-      '@walletconnect/modal-core': 2.6.2(@types/react@18.2.14)(react@18.2.0)
+      '@walletconnect/modal-core': 2.5.9(react@18.2.0)
-      lit: 2.8.0
+      lit: 2.7.5
       motion: 10.16.2
       qrcode: 1.5.3
     transitivePeerDependencies:
-      - '@types/react'
       - react
     dev: false
 
-  /@walletconnect/modal@2.6.2(@types/react@18.2.14)(react@18.2.0):
+  /@walletconnect/modal@2.5.9(react@18.2.0):
-    resolution: {integrity: sha512-eFopgKi8AjKf/0U4SemvcYw9zlLpx9njVN8sf6DAkowC2Md0gPU/UNEbH1Wwj407pEKnEds98pKWib1NN1ACoA==}
+    resolution: {integrity: sha512-Zs2RvPwbBNRdBhb50FuJCxi3FJltt1KSpI7odjU/x9GTpTOcSOkmR66PBCy2JvNA0+ztnS1Xs0LVEr3lu7/Jzw==}
     dependencies:
-      '@walletconnect/modal-core': 2.6.2(@types/react@18.2.14)(react@18.2.0)
+      '@walletconnect/modal-core': 2.5.9(react@18.2.0)
-      '@walletconnect/modal-ui': 2.6.2(@types/react@18.2.14)(react@18.2.0)
+      '@walletconnect/modal-ui': 2.5.9(react@18.2.0)
     transitivePeerDependencies:
-      - '@types/react'
       - react
     dev: false
 
@@ -6367,17 +6338,17 @@ packages:
       - utf-8-validate
     dev: false
 
-  /@walletconnect/sign-client@2.10.2:
+  /@walletconnect/sign-client@2.8.6:
-    resolution: {integrity: sha512-vviSLV3f92I0bReX+OLr1HmbH0uIzYEQQFd1MzIfDk9PkfFT/LLAHhUnDaIAMkIdippqDcJia+5QEtT4JihL3Q==}
+    resolution: {integrity: sha512-rOFTKTHP7oJfXgYHX7+SdB8VbcsEE3ZFG/bMdmZboWaBim1mrY3vUyDdKrNr0VgI3AwBiEQezQDfKxBX0pMSQQ==}
     dependencies:
-      '@walletconnect/core': 2.10.2
+      '@walletconnect/core': 2.8.6
       '@walletconnect/events': 1.0.1
       '@walletconnect/heartbeat': 1.2.1
       '@walletconnect/jsonrpc-utils': 1.0.8
       '@walletconnect/logger': 2.0.1
       '@walletconnect/time': 1.0.2
-      '@walletconnect/types': 2.10.2
+      '@walletconnect/types': 2.8.6
-      '@walletconnect/utils': 2.10.2
+      '@walletconnect/utils': 2.8.6
       events: 3.3.0
     transitivePeerDependencies:
       - '@react-native-async-storage/async-storage'
@@ -6406,8 +6377,8 @@ packages:
       - lokijs
     dev: false
 
-  /@walletconnect/types@2.10.2:
+  /@walletconnect/types@2.8.6:
-    resolution: {integrity: sha512-luNV+07Wdla4STi9AejseCQY31tzWKQ5a7C3zZZaRK/di+rFaAAb7YW04OP4klE7tw/mJRGPTlekZElmHxO8kQ==}
+    resolution: {integrity: sha512-Z/PFa3W1XdxeTcCtdR6lUsFgZfU/69wWJBPyclPwn7cu1+eriuCr6XZXQpJjib3flU+HnwHiXeUuqZaheehPxw==}
     dependencies:
       '@walletconnect/events': 1.0.1
       '@walletconnect/heartbeat': 1.2.1
@@ -6420,17 +6391,17 @@ packages:
       - lokijs
     dev: false
 
-  /@walletconnect/universal-provider@2.10.2:
+  /@walletconnect/universal-provider@2.8.6:
-    resolution: {integrity: sha512-wFgI0LbQ3D56sgaUMsgOHCM5m8WLxiC71BGuCKQfApgsbNMVKugYVy2zWHyUyi8sqTQHI+uSaVpDev4UHq9LEw==}
+    resolution: {integrity: sha512-ln1RVv8+oHu9enOJ/oVkjiarneB+4vJCk16znOklIN2JtDHwB8iObDHlQH3UE6ynNTw1iRvaGuPR4g+YdIfB6w==}
     dependencies:
       '@walletconnect/jsonrpc-http-connection': 1.0.7
       '@walletconnect/jsonrpc-provider': 1.0.13
       '@walletconnect/jsonrpc-types': 1.0.3
       '@walletconnect/jsonrpc-utils': 1.0.8
       '@walletconnect/logger': 2.0.1
-      '@walletconnect/sign-client': 2.10.2
+      '@walletconnect/sign-client': 2.8.6
-      '@walletconnect/types': 2.10.2
+      '@walletconnect/types': 2.8.6
-      '@walletconnect/utils': 2.10.2
+      '@walletconnect/utils': 2.8.6
       events: 3.3.0
     transitivePeerDependencies:
       - '@react-native-async-storage/async-storage'
@@ -6462,8 +6433,8 @@ packages:
       - lokijs
     dev: false
 
-  /@walletconnect/utils@2.10.2:
+  /@walletconnect/utils@2.8.6:
-    resolution: {integrity: sha512-syxXRpc2yhSknMu3IfiBGobxOY7fLfLTJuw+ppKaeO6WUdZpIit3wfuGOcc0Ms3ZPFCrGfyGOoZsCvgdXtptRg==}
+    resolution: {integrity: sha512-wcy6e5+COYo7tfNnW8YqidnATdJDIW6vDiWWE7A1F78Sl/VflkaevB9cIgyn8eLdxC1SxXgGoeC2oLP90nnHJg==}
     dependencies:
       '@stablelib/chacha20poly1305': 1.0.1
       '@stablelib/hkdf': 1.0.1
@@ -6473,7 +6444,7 @@ packages:
       '@walletconnect/relay-api': 1.0.9
       '@walletconnect/safe-json': 1.0.2
       '@walletconnect/time': 1.0.2
-      '@walletconnect/types': 2.10.2
+      '@walletconnect/types': 2.8.6
       '@walletconnect/window-getters': 1.0.1
       '@walletconnect/window-metadata': 1.0.1
       detect-browser: 5.3.0
@@ -10402,14 +10373,6 @@ packages:
       lit-html: 2.8.0
     dev: false
 
-  /lit@2.8.0:
-    resolution: {integrity: sha512-4Sc3OFX9QHOJaHbmTMk28SYgVxLN3ePDjg7hofEft2zWlehFL3LiAuapWc4U/kYwMYJSh2hTCPZ6/LIC7ii0MA==}
-    dependencies:
-      '@lit/reactive-element': 1.6.3
-      lit-element: 3.3.3
-      lit-html: 2.8.0
-    dev: false
-
   /loader-runner@4.3.0:
     resolution: {integrity: sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==}
     engines: {node: '>=6.11.5'}
@@ -13543,19 +13506,15 @@ packages:
       use-sync-external-store: 1.2.0(react@18.2.0)
     dev: false
 
-  /valtio@1.11.2(@types/react@18.2.14)(react@18.2.0):
+  /valtio@1.10.6(react@18.2.0):
-    resolution: {integrity: sha512-1XfIxnUXzyswPAPXo1P3Pdx2mq/pIqZICkWN60Hby0d9Iqb+MEIpqgYVlbflvHdrp2YR/q3jyKWRPJJ100yxaw==}
+    resolution: {integrity: sha512-SxN1bHUmdhW6V8qsQTpCgJEwp7uHbntuH0S9cdLQtiohuevwBksbpXjwj5uDMA7bLwg1WKyq9sEpZrx3TIMrkA==}
     engines: {node: '>=12.20.0'}
     peerDependencies:
-      '@types/react': '>=16.8'
       react: '>=16.8'
     peerDependenciesMeta:
-      '@types/react':
-        optional: true
       react:
         optional: true
     dependencies:
-      '@types/react': 18.2.14
       proxy-compare: 2.5.1
       react: 18.2.0
       use-sync-external-store: 1.2.0(react@18.2.0)
@@ -13778,8 +13737,8 @@ packages:
       - supports-color
     dev: true
 
-  /wagmi@1.4.5(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0)(typescript@5.1.3)(viem@1.12.2):
+  /wagmi@1.3.7(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0)(typescript@5.1.3)(viem@1.12.2):
-    resolution: {integrity: sha512-Ph62E6cO5n2Z8Z5LTyZrkaNprxTsbC4w0qZJT4OJdXrEELziI8z/b4FO6amVFXdu2rDp/wpvF56e4mhKC8/Kdw==}
+    resolution: {integrity: sha512-n4Qwby0QB8/JSGjc0gGn4MWZ0BT229agEg6saPGS6VswmPjJLdkLq9qxKn1JptXxPREmb/ZvwHxU++3Z+gQJVA==}
     peerDependencies:
       react: '>=17.0.0'
       typescript: '>=5.0.4'
@@ -13791,7 +13750,7 @@ packages:
       '@tanstack/query-sync-storage-persister': 4.32.6
       '@tanstack/react-query': 4.32.6(react-dom@18.2.0)(react@18.2.0)
       '@tanstack/react-query-persist-client': 4.32.6(@tanstack/react-query@4.32.6)
-      '@wagmi/core': 1.4.5(@types/react@18.2.14)(react@18.2.0)(typescript@5.1.3)(viem@1.12.2)
+      '@wagmi/core': 1.3.6(@types/react@18.2.14)(react@18.2.0)(typescript@5.1.3)(viem@1.12.2)
       abitype: 0.8.7(typescript@5.1.3)
       react: 18.2.0
       typescript: 5.1.3

public/configs/cctp.json

@@ -1,61 +0,0 @@
-[
-    {
-        "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",
-        "name": "Arbitrum Goerli"
-    },
-    {
-        "chainId": "43113",
-        "tokenAddress": "0x5425890298aed601595a70AB815c96711a31Bc65",
-        "name": "Avalanche Fuji"
-    },
-    {
-        "chainId": "84531",
-        "tokenAddress": "0xf175520c52418dfe19c8098071a252da48cd1c19",
-        "name": "Base Goerli"
-    },
-    {
-        "chainId": "5",
-        "tokenAddress": "0x07865c6E87B9F70255377e024ace6630C1Eaa37F",
-        "name": "Ethereum Goerli"
-    },
-    {
-        "chainId": "grand-1",
-        "tokenAddress": "uusdc",
-        "name": "Noble Testnet"
-    },
-    {
-        "chainId": "420",
-        "tokenAddress": "0xe05606174bac4a6364b31bd0eca4bf4dd368f8c6",
-        "name": "OP Goerli"
-    },
-    {
-        "chainId": "103",
-        "name": "Solana Devnet"
-    }
-]

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,6 @@
                "https://validator.v4dev.dydx.exchange"
             ],
             "0xsquid": "https://testnet.api.0xsquid.com",
-            "nobleValidator": "https://rpc.testnet.noble.strange.love",
             "faucet": "https://faucet.v4dev.dydx.exchange"
          },
          "links": {
@@ -116,7 +115,7 @@
          "ethereumChainId": "5",
          "dydxChainId": "dydxprotocol-testnet",
          "chainName": "dYdX Chain",
-         "chainLogo": "/dydx-chain.png",
+         "chainLogo": "dydx-chain.png",
          "squidIntegratorId": "dYdX-api",
          "isMainNet": false,
          "tokens": {
@@ -144,8 +143,7 @@
             "validators": [
                "http://54.92.118.111"
             ],
-            "0xsquid": "https://testnet.api.0xsquid.com",
+            "0xsquid": "https://testnet.api.0xsquid.com"
-            "nobleValidator": "https://rpc.testnet.noble.strange.love"
          },
          "links": {
             "tos": "https://dydx.exchange/v4-terms",
@@ -189,7 +187,7 @@
          "ethereumChainId": "5",
          "dydxChainId": "dydxprotocol-testnet",
          "chainName": "dYdX Chain",
-         "chainLogo": "/dydx-chain.png",
+         "chainLogo": "dydx-chain.png",
          "squidIntegratorId": "dYdX-api",
          "isMainNet": false,
          "tokens": {
@@ -217,8 +215,7 @@
             "validators": [
                "http://validator.v4dev4.dydx.exchange"
             ],
-            "0xsquid": "https://testnet.api.0xsquid.com",
+            "0xsquid": "https://testnet.api.0xsquid.com"
-            "nobleValidator": "https://rpc.testnet.noble.strange.love"
          },
          "links": {
             "tos": "https://dydx.exchange/v4-terms",
@@ -262,7 +259,7 @@
          "ethereumChainId": "5",
          "dydxChainId": "dydxprotocol-testnet",
          "chainName": "dYdX Chain",
-         "chainLogo": "/dydx-chain.png",
+         "chainLogo": "dydx-chain.png",
          "squidIntegratorId": "dYdX-api",
          "isMainNet": false,
          "tokens": {
@@ -290,8 +287,7 @@
             "validators": [
                "http://18.223.78.50"
             ],
-            "0xsquid": "https://testnet.api.0xsquid.com",
+            "0xsquid": "https://testnet.api.0xsquid.com"
-            "nobleValidator": "https://rpc.testnet.noble.strange.love"
          },
          "links": {
             "tos": "https://dydx.exchange/v4-terms",
@@ -335,7 +331,7 @@
          "ethereumChainId": "5",
          "dydxChainId": "dydxprotocol-testnet",
          "chainName": "dYdX Chain",
-         "chainLogo": "/dydx-chain.png",
+         "chainLogo": "dydx-chain.png",
          "squidIntegratorId": "dYdX-api",
          "isMainNet": false,
          "tokens": {
@@ -364,8 +360,7 @@
             "validators": [
                "https://validator.v4staging.dydx.exchange"
             ],
-            "0xsquid": "https://testnet.api.squidrouter.com",
+            "0xsquid": "https://testnet.api.squidrouter.com"
-            "nobleValidator": "https://rpc.testnet.noble.strange.love"
          },
          "links": {
             "tos": "https://dydx.exchange/v4-terms",
@@ -410,8 +405,7 @@
          "ethereumChainId": "5",
          "dydxChainId": "dydxprotocol-testnet",
          "chainName": "dYdX Chain",
-         "chainLogo": "/dydx-chain.png",
+         "chainLogo": "dydx-chain.png",
-         "squidIntegratorId": "dYdX-api",
          "isMainNet": false,
          "tokens": {
             "chain": {
@@ -439,8 +433,7 @@
             "validators": [
                "https://validator.v4staging.dydx.exchange"
             ],
-            "0xsquid": "https://testnet.api.squidrouter.com",
+            "0xsquid": "https://testnet.api.squidrouter.com"
-            "nobleValidator": "https://rpc.testnet.noble.strange.love"
          },
          "links": {
             "tos": "https://dydx.exchange/v4-terms",
@@ -483,7 +476,7 @@
          "ethereumChainId": "5",
          "dydxChainId": "dydxprotocol-testnet",
          "chainName": "dYdX Chain",
-         "chainLogo": "/dydx-chain.png",
+         "chainLogo": "dydx-chain.png",
          "squidIntegratorId": "dYdX-api",
          "isMainNet": false,
          "tokens": {
@@ -512,8 +505,7 @@
             "validators": [
                "https://validator-uswest1.v4staging.dydx.exchange"
             ],
-            "0xsquid": "https://testnet.api.squidrouter.com",
+            "0xsquid": "https://testnet.api.squidrouter.com"
-            "nobleValidator": "https://rpc.testnet.noble.strange.love"
          },
          "links": {
             "tos": "https://dydx.exchange/v4-terms",
@@ -558,7 +550,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 +583,6 @@
                "https://dydx-rpc.liquify.com/api=8878132/dydx"
             ],
             "0xsquid": "https://testnet.api.squidrouter.com",
-            "nobleValidator": "https://rpc.testnet.noble.strange.love",
             "faucet": "https://faucet.v4testnet.dydx.exchange"
          },
          "links": {
@@ -637,7 +628,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 +657,6 @@
                "https://validator.v4testnet.dydx.exchange"
             ],
             "0xsquid": "https://testnet.api.squidrouter.com",
-            "nobleValidator": "https://rpc.testnet.noble.strange.love",
             "faucet": "https://faucet.v4testnet.dydx.exchange"
          },
          "links": {
@@ -713,7 +703,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 +732,6 @@
                "https://dydx-testnet.nodefleet.org"
             ],
             "0xsquid": "https://testnet.api.squidrouter.com",
-            "nobleValidator": "https://rpc.testnet.noble.strange.love",
             "faucet": "https://faucet.v4testnet.dydx.exchange"
          },
          "links": {
@@ -789,7 +778,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 +807,6 @@
                "https://test-dydx.kingnodes.com"
             ],
             "0xsquid": "https://testnet.api.squidrouter.com",
-            "nobleValidator": "https://rpc.testnet.noble.strange.love",
             "faucet": "https://faucet.v4testnet.dydx.exchange"
          },
          "links": {
@@ -865,7 +853,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 +882,6 @@
                "https://dydx-rpc.liquify.com/api=8878132/dydx"
             ],
             "0xsquid": "https://testnet.api.squidrouter.com",
-            "nobleValidator": "https://rpc.testnet.noble.strange.love",
             "faucet": "https://faucet.v4testnet.dydx.exchange"
          },
          "links": {
@@ -941,7 +928,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 +957,6 @@
                "https://dydx-testnet-rpc.polkachu.com/"
             ],
             "0xsquid": "https://testnet.api.squidrouter.com",
-            "nobleValidator": "https://rpc.testnet.noble.strange.love",
             "faucet": "https://faucet.v4testnet.dydx.exchange"
          },
          "links": {
@@ -1008,7 +994,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 +1023,6 @@
                "https://dydx-testnet-full-rpc.public.blastapi.io/"
             ],
             "0xsquid": "https://testnet.api.squidrouter.com",
-            "nobleValidator": "https://rpc.testnet.noble.strange.love",
             "faucet": "https://faucet.v4testnet.dydx.exchange"
          },
          "links": {
@@ -1084,7 +1069,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": {
@@ -1114,8 +1099,7 @@
                "[Validator endpoint 1",
                "[Validator endpoint n]"
             ],
-            "0xsquid": "[0xSquid endpoint for mainnet]",
+            "0xsquid": "[0xSquid endpoint for mainnet]"
-            "nobleValidator": "[noble validator endpoint for mainnet]"
          },
          "links": {
             "tos": "[HTTP link to TOS]",

public/configs/wallets.json

@@ -199,7 +199,7 @@
     },
     "mobile": {
       "native": "trust:",
-      "universal": ""
+      "universal": "https://link.trustwallet.com"
     },
     "desktop": {
       "native": "",

src/App.tsx

@@ -22,6 +22,8 @@ import { NotificationsProvider } from '@/hooks/useNotifications';
 import { LocalNotificationsProvider } from '@/hooks/useLocalNotifications';
 import { RestrictionProvider } from '@/hooks/useRestrictions';
 import { SubaccountProvider } from '@/hooks/useSubaccount';
+import { SquidProvider } from '@/hooks/useSquid';
+import { TestFlagsProvider } from '@/hooks/useTestFlags';
 
 import { GuardedMobileRoute } from '@/components/GuardedMobileRoute';
 
@@ -122,11 +124,13 @@ const providers = [
   wrapProvider(QueryClientProvider, { client: queryClient }),
   wrapProvider(GrazProvider),
   wrapProvider(WagmiConfig, { config }),
+  wrapProvider(TestFlagsProvider),
   wrapProvider(LocaleProvider),
   wrapProvider(RestrictionProvider),
   wrapProvider(DydxProvider),
   wrapProvider(AccountsProvider),
   wrapProvider(SubaccountProvider),
+  wrapProvider(SquidProvider),
   wrapProvider(LocalNotificationsProvider),
   wrapProvider(NotificationsProvider),
   wrapProvider(DialogAreaProvider),

src/abi/erc20_usdt.json

@@ -1,390 +0,0 @@
-[
-  {
-    "constant": true,
-    "inputs": [],
-    "name": "name",
-    "outputs": [{ "name": "", "type": "string" }],
-    "payable": false,
-    "stateMutability": "view",
-    "type": "function"
-  },
-  {
-    "constant": false,
-    "inputs": [{ "name": "_upgradedAddress", "type": "address" }],
-    "name": "deprecate",
-    "outputs": [],
-    "payable": false,
-    "stateMutability": "nonpayable",
-    "type": "function"
-  },
-  {
-    "constant": false,
-    "inputs": [
-      { "name": "_spender", "type": "address" },
-      { "name": "_value", "type": "uint256" }
-    ],
-    "name": "approve",
-    "outputs": [],
-    "payable": false,
-    "stateMutability": "nonpayable",
-    "type": "function"
-  },
-  {
-    "constant": true,
-    "inputs": [],
-    "name": "deprecated",
-    "outputs": [{ "name": "", "type": "bool" }],
-    "payable": false,
-    "stateMutability": "view",
-    "type": "function"
-  },
-  {
-    "constant": false,
-    "inputs": [{ "name": "_evilUser", "type": "address" }],
-    "name": "addBlackList",
-    "outputs": [],
-    "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": [],
-    "payable": false,
-    "stateMutability": "nonpayable",
-    "type": "function"
-  },
-  {
-    "constant": true,
-    "inputs": [],
-    "name": "upgradedAddress",
-    "outputs": [{ "name": "", "type": "address" }],
-    "payable": false,
-    "stateMutability": "view",
-    "type": "function"
-  },
-  {
-    "constant": true,
-    "inputs": [{ "name": "", "type": "address" }],
-    "name": "balances",
-    "outputs": [{ "name": "", "type": "uint256" }],
-    "payable": false,
-    "stateMutability": "view",
-    "type": "function"
-  },
-  {
-    "constant": true,
-    "inputs": [],
-    "name": "decimals",
-    "outputs": [{ "name": "", "type": "uint256" }],
-    "payable": false,
-    "stateMutability": "view",
-    "type": "function"
-  },
-  {
-    "constant": true,
-    "inputs": [],
-    "name": "maximumFee",
-    "outputs": [{ "name": "", "type": "uint256" }],
-    "payable": false,
-    "stateMutability": "view",
-    "type": "function"
-  },
-  {
-    "constant": true,
-    "inputs": [],
-    "name": "_totalSupply",
-    "outputs": [{ "name": "", "type": "uint256" }],
-    "payable": false,
-    "stateMutability": "view",
-    "type": "function"
-  },
-  {
-    "constant": false,
-    "inputs": [],
-    "name": "unpause",
-    "outputs": [],
-    "payable": false,
-    "stateMutability": "nonpayable",
-    "type": "function"
-  },
-  {
-    "constant": true,
-    "inputs": [{ "name": "_maker", "type": "address" }],
-    "name": "getBlackListStatus",
-    "outputs": [{ "name": "", "type": "bool" }],
-    "payable": false,
-    "stateMutability": "view",
-    "type": "function"
-  },
-  {
-    "constant": true,
-    "inputs": [
-      { "name": "", "type": "address" },
-      { "name": "", "type": "address" }
-    ],
-    "name": "allowed",
-    "outputs": [{ "name": "", "type": "uint256" }],
-    "payable": false,
-    "stateMutability": "view",
-    "type": "function"
-  },
-  {
-    "constant": true,
-    "inputs": [],
-    "name": "paused",
-    "outputs": [{ "name": "", "type": "bool" }],
-    "payable": false,
-    "stateMutability": "view",
-    "type": "function"
-  },
-  {
-    "constant": true,
-    "inputs": [{ "name": "who", "type": "address" }],
-    "name": "balanceOf",
-    "outputs": [{ "name": "", "type": "uint256" }],
-    "payable": false,
-    "stateMutability": "view",
-    "type": "function"
-  },
-  {
-    "constant": false,
-    "inputs": [],
-    "name": "pause",
-    "outputs": [],
-    "payable": false,
-    "stateMutability": "nonpayable",
-    "type": "function"
-  },
-  {
-    "constant": true,
-    "inputs": [],
-    "name": "getOwner",
-    "outputs": [{ "name": "", "type": "address" }],
-    "payable": false,
-    "stateMutability": "view",
-    "type": "function"
-  },
-  {
-    "constant": true,
-    "inputs": [],
-    "name": "owner",
-    "outputs": [{ "name": "", "type": "address" }],
-    "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": [],
-    "payable": false,
-    "stateMutability": "nonpayable",
-    "type": "function"
-  },
-  {
-    "constant": false,
-    "inputs": [
-      { "name": "newBasisPoints", "type": "uint256" },
-      { "name": "newMaxFee", "type": "uint256" }
-    ],
-    "name": "setParams",
-    "outputs": [],
-    "payable": false,
-    "stateMutability": "nonpayable",
-    "type": "function"
-  },
-  {
-    "constant": false,
-    "inputs": [{ "name": "amount", "type": "uint256" }],
-    "name": "issue",
-    "outputs": [],
-    "payable": false,
-    "stateMutability": "nonpayable",
-    "type": "function"
-  },
-  {
-    "constant": false,
-    "inputs": [{ "name": "amount", "type": "uint256" }],
-    "name": "redeem",
-    "outputs": [],
-    "payable": false,
-    "stateMutability": "nonpayable",
-    "type": "function"
-  },
-  {
-    "constant": true,
-    "inputs": [
-      { "name": "_owner", "type": "address" },
-      { "name": "_spender", "type": "address" }
-    ],
-    "name": "allowance",
-    "outputs": [{ "name": "remaining", "type": "uint256" }],
-    "payable": false,
-    "stateMutability": "view",
-    "type": "function"
-  },
-  {
-    "constant": true,
-    "inputs": [],
-    "name": "basisPointsRate",
-    "outputs": [{ "name": "", "type": "uint256" }],
-    "payable": false,
-    "stateMutability": "view",
-    "type": "function"
-  },
-  {
-    "constant": true,
-    "inputs": [{ "name": "", "type": "address" }],
-    "name": "isBlackListed",
-    "outputs": [{ "name": "", "type": "bool" }],
-    "payable": false,
-    "stateMutability": "view",
-    "type": "function"
-  },
-  {
-    "constant": false,
-    "inputs": [{ "name": "_clearedUser", "type": "address" }],
-    "name": "removeBlackList",
-    "outputs": [],
-    "payable": false,
-    "stateMutability": "nonpayable",
-    "type": "function"
-  },
-  {
-    "constant": true,
-    "inputs": [],
-    "name": "MAX_UINT",
-    "outputs": [{ "name": "", "type": "uint256" }],
-    "payable": false,
-    "stateMutability": "view",
-    "type": "function"
-  },
-  {
-    "constant": false,
-    "inputs": [{ "name": "newOwner", "type": "address" }],
-    "name": "transferOwnership",
-    "outputs": [],
-    "payable": false,
-    "stateMutability": "nonpayable",
-    "type": "function"
-  },
-  {
-    "constant": false,
-    "inputs": [{ "name": "_blackListedUser", "type": "address" }],
-    "name": "destroyBlackFunds",
-    "outputs": [],
-    "payable": false,
-    "stateMutability": "nonpayable",
-    "type": "function"
-  },
-  {
-    "inputs": [
-      { "name": "_initialSupply", "type": "uint256" },
-      { "name": "_name", "type": "string" },
-      { "name": "_symbol", "type": "string" },
-      { "name": "_decimals", "type": "uint256" }
-    ],
-    "payable": false,
-    "stateMutability": "nonpayable",
-    "type": "constructor"
-  },
-  {
-    "anonymous": false,
-    "inputs": [{ "indexed": false, "name": "amount", "type": "uint256" }],
-    "name": "Issue",
-    "type": "event"
-  },
-  {
-    "anonymous": false,
-    "inputs": [{ "indexed": false, "name": "amount", "type": "uint256" }],
-    "name": "Redeem",
-    "type": "event"
-  },
-  {
-    "anonymous": false,
-    "inputs": [{ "indexed": false, "name": "newAddress", "type": "address" }],
-    "name": "Deprecate",
-    "type": "event"
-  },
-  {
-    "anonymous": false,
-    "inputs": [
-      { "indexed": false, "name": "feeBasisPoints", "type": "uint256" },
-      { "indexed": false, "name": "maxFee", "type": "uint256" }
-    ],
-    "name": "Params",
-    "type": "event"
-  },
-  {
-    "anonymous": false,
-    "inputs": [
-      { "indexed": false, "name": "_blackListedUser", "type": "address" },
-      { "indexed": false, "name": "_balance", "type": "uint256" }
-    ],
-    "name": "DestroyedBlackFunds",
-    "type": "event"
-  },
-  {
-    "anonymous": false,
-    "inputs": [{ "indexed": false, "name": "_user", "type": "address" }],
-    "name": "AddedBlackList",
-    "type": "event"
-  },
-  {
-    "anonymous": false,
-    "inputs": [{ "indexed": false, "name": "_user", "type": "address" }],
-    "name": "RemovedBlackList",
-    "type": "event"
-  },
-  {
-    "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"
-  },
-  { "anonymous": false, "inputs": [], "name": "Pause", "type": "event" },
-  { "anonymous": false, "inputs": [], "name": "Unpause", "type": "event" }
-]

src/components/Button.tsx

@@ -61,7 +61,7 @@ export const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonPr
 
     return (
       <StyledBaseButton
-        disabled={state[ButtonState.Disabled] || state[ButtonState.Loading]}
+        disabled={state[ButtonState.Disabled]}
         {...{ ref, action, size, shape, state, ...otherProps }}
       >
         {

src/components/Checkbox.stories.tsx

@@ -13,9 +13,7 @@ export const Checkboxes: Story<CheckboxProps> = (args) => {
       <Checkbox
         {...args}
         checked={isChecked}
-        onCheckedChange={setIsChecked}
+        onClick={(e: React.ChangeEvent) => setIsChecked((e.target as HTMLInputElement).checked)}
-        id="story-checkbox"
-        label="example label"
       />
     </StoryWrapper>
   );

src/components/Checkbox.tsx

@@ -1,14 +1,10 @@
 import styled, { type AnyStyledComponent } from 'styled-components';
-import { Root, Indicator } from '@radix-ui/react-checkbox';
-import { CheckIcon } from '@radix-ui/react-icons';
 
-import { layoutMixins } from '@/styles/layoutMixins';
+import { breakpoints } from '@/styles';
 
 type ElementProps = {
   checked: boolean;
-  onCheckedChange: (checked: boolean) => void;
+  onClick: (e: React.ChangeEvent) => void;
-  id?: string;
-  label?: React.ReactNode;
 };
 
 type StyleProps = {
@@ -17,54 +13,85 @@ type StyleProps = {
 
 export type CheckboxProps = ElementProps & StyleProps;
 
-export const Checkbox: React.FC<CheckboxProps> = ({
+export const Checkbox: React.FC<CheckboxProps> = ({ checked, className, onClick }) => {
-  checked,
+  return (
-  className,
+    <Styled.CheckboxWrapper className={className}>
-  onCheckedChange,
+      <Styled.Checkbox
-  id,
+        type="checkbox"
-  label,
+        checked={checked}
-}) => (
+        onChange={onClick}
-  <Styled.Container>
+      />
-    <Styled.Root className={className} checked={checked} onCheckedChange={onCheckedChange} id={id}>
+      <Styled.CustomCheckbox />
-      <Styled.Indicator>
+    </Styled.CheckboxWrapper>
-        <CheckIcon />
+  );
-      </Styled.Indicator>
+};
-    </Styled.Root>
-    {label && <label htmlFor={id}>{label}</label>}
-  </Styled.Container>
-);
 
 const Styled: Record<string, AnyStyledComponent> = {};
 
-Styled.Container = styled.div`
+Styled.CustomCheckbox = styled.span`
-  ${layoutMixins.row}
+  width: 1.25em;
-  gap: 1ch;
+  height: 1.25em;
-  font: var(--font-small-book);
 
-  label {
+  position: absolute;
-    cursor: pointer;
+  left: 0;
-  }
+  right: 0;
-`;
+  top: 0;
-
+  bottom: 0;
-Styled.Root = styled(Root)`
-  --checkbox-backgroundColor: var(--color-layer-0);
-
-  min-width: 1.25rem;
-  height: 1.25rem;
-
-  border-radius: 0.375rem;
-  border: var(--border-width) solid var(--color-border);
   background-color: var(--checkbox-backgroundColor);
 
-  &[data-state='checked'] {
+  &::after {
-    --checkbox-backgroundColor: var(--color-accent);
+    position: absolute;
+    content: '';
+    top: 0.25em;
+    left: 0.4375em;
+    width: 0.3125em;
+    height: 0.5em;
+    border: solid var(--checkbox-checkColor);
+    border-width: 0 0.125em 0.125em 0;
+    border-radius: 0.0625em;
+    opacity: 0;
+    transform: rotate(0deg) scale(0);
+    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
+  }
+
+  @media ${breakpoints.tablet} {
+    width: 1.5em;
+    height: 1.5em;
+
+    &::after {
+      top: 0.25em;
+      left: 0.4375em;
+      width: 0.4375em;
+      height: 0.625em;
+    }
   }
 `;
 
-Styled.Indicator = styled(Indicator)`
+Styled.CheckboxWrapper = styled.div`
-  display: flex;
+  --checkbox-backgroundColor: var(--color-layer-1);
-  align-items: center;
+  --checkbox-checkColor: var(--color-text-1);
-  justify-content: center;
 
-  color: var(--color-text-2);
+  display: flex;
+  border-radius: 0.25em;
+  overflow: hidden;
+  position: relative;
+  cursor: pointer;
+
+  > input:checked ~ ${Styled.CustomCheckbox}::after {
+    opacity: 1;
+    transform: rotate(40deg) scale(1);
+  }
+`;
+
+Styled.Checkbox = styled.input`
+  width: 1.25em;
+  height: 1.25em;
+  z-index: 1;
+  cursor: pointer;
+  opacity: 0;
+
+  @media ${breakpoints.tablet} {
+    width: 1.5em;
+    height: 1.5em;
+  }
 `;

src/components/Collapsible.stories.tsx

@@ -1,13 +1,16 @@
 import type { Story } from '@ladle/react';
 
-import { Collapsible, type CollapsibleProps } from '@/components/Collapsible';
+import { Collapsible } from '@/components/Collapsible';
 
 import { StoryWrapper } from '.ladle/components';
 import { IconName } from './Icon';
 
-export const CollapsibleStory: Story<CollapsibleProps> = (args) => (
+export const CollapsibleStory: Story<Parameters<typeof Collapsible>> = (args) => (
   <StoryWrapper>
-    <Collapsible {...args}>
+    <Collapsible
+      label="Collapsible List of Items"
+      {...args}
+    >
       <ul>
         <li>Collapsible Item 1</li>
         <li>Collapsible Item 2</li>
@@ -20,8 +23,6 @@ export const CollapsibleStory: Story<CollapsibleProps> = (args) => (
 
 CollapsibleStory.args = {
   disabled: false,
-  withTrigger: true,
-  label: 'Collapsible List of Items',
 };
 
 CollapsibleStory.argTypes = {

src/components/Collapsible.tsx

@@ -14,7 +14,6 @@ type ElementProps = {
   label: React.ReactNode;
   triggerIcon?: IconName;
   children: React.ReactNode;
-  withTrigger?: boolean;
 };
 
 type StyleProps = {
@@ -24,8 +23,6 @@ type StyleProps = {
   fullWidth?: boolean;
 };
 
-export type CollapsibleProps = ElementProps & StyleProps;
-
 export const Collapsible = ({
   defaultOpen = false,
   disabled,
@@ -38,29 +35,26 @@ export const Collapsible = ({
   triggerIconSide = 'left',
   fullWidth,
   className,
-  withTrigger = true,
+}: ElementProps & StyleProps) => (
-}: CollapsibleProps) => (
   <Styled.Root defaultOpen={defaultOpen} open={open} onOpenChange={onOpenChange}>
-    {withTrigger && (
+    <Styled.Trigger className={className} disabled={disabled}>
-      <Styled.Trigger className={className} disabled={disabled}>
+      {triggerIconSide === 'right' && (
-        {triggerIconSide === 'right' && (
+        <>
-          <>
+          {label}
-            {label}
+          {fullWidth && <HorizontalSeparatorFiller />}
-            {fullWidth && <HorizontalSeparatorFiller />}
+        </>
-          </>
+      )}
-        )}
 
-        <Styled.TriggerIcon>
+      <Styled.TriggerIcon>
-          <Icon iconName={triggerIcon} />
+        <Icon iconName={triggerIcon} />
-        </Styled.TriggerIcon>
+      </Styled.TriggerIcon>
-        {triggerIconSide === 'left' && (
+      {triggerIconSide === 'left' && (
-          <>
+        <>
-            {fullWidth && <HorizontalSeparatorFiller />}
+          {fullWidth && <HorizontalSeparatorFiller />}
-            {label}
+          {label}
-          </>
+        </>
-        )}
+      )}
-      </Styled.Trigger>
+    </Styled.Trigger>
-    )}
     <Styled.Content $transitionDuration={transitionDuration}>{children}</Styled.Content>
   </Styled.Root>
 );

src/components/ComboboxDialogMenu.tsx

@@ -22,12 +22,7 @@ type PickComboxMenuProps<
   MenuGroupValue extends string | number
 > = Pick<
   ComboboxMenuProps<MenuItemValue, MenuGroupValue>,
-  | 'inputPlaceholder'
+  'inputPlaceholder' | 'onItemSelected' | 'slotEmpty' | 'withSearch' | 'withStickyLayout'
-  | 'onItemSelected'
-  | 'slotEmpty'
-  | 'withItemBorders'
-  | 'withSearch'
-  | 'withStickyLayout'
 >;
 
 type PickDialogProps = Pick<
@@ -58,7 +53,6 @@ export const ComboboxDialogMenu = <
   onItemSelected,
   inputPlaceholder,
   slotEmpty,
-  withItemBorders,
   withSearch,
   withStickyLayout = true,
   children,
@@ -89,7 +83,6 @@ export const ComboboxDialogMenu = <
       title={title}
       inputPlaceholder={inputPlaceholder}
       slotEmpty={slotEmpty}
-      withItemBorders={withItemBorders}
       withSearch={withSearch}
       withStickyLayout={withStickyLayout}
     />
@@ -102,8 +95,6 @@ const Styled: Record<string, AnyStyledComponent> = {};
 Styled.Dialog = styled(Dialog)`
   /* Params */
   --comboboxDialogMenu-backgroundColor: var(--color-layer-2);
-  --comboboxDialogMenu-item-gap: 0.5rem;
-  --comboboxDialogMenu-item-padding: 0.5rem 1rem;
 
   /* Overrides */
   & {
@@ -122,12 +113,10 @@ Styled.Dialog = styled(Dialog)`
 
     /* Net 0 sticky top inset (let stickyArea1 header stick to top) */
     --stickyArea0-topGap: calc(-1 * var(--stickyArea0-topHeight));
-    overflow-x: clip;
   }
 `;
 
 Styled.ComboboxMenu = styled(ComboboxMenu)`
   --comboboxMenu-backgroundColor: var(--comboboxDialogMenu-backgroundColor);
-  --comboboxMenu-item-gap: var(--comboboxDialogMenu-item-gap);
+  --comboboxMenu-item-gap: var(--comboxDialogMenu-item-gap, 0.5rem);
-  --comboboxMenu-item-padding: var(--comboboxDialogMenu-item-padding);
 `;

src/components/ComboboxMenu.tsx

@@ -2,7 +2,7 @@ import { Fragment, type ReactNode, useState } from 'react';
 import styled, { type AnyStyledComponent, css } from 'styled-components';
 import { Command } from 'cmdk';
 
-import { MenuItem, type MenuConfig } from '@/constants/menus';
+import { type MenuConfig } from '@/constants/menus';
 import { popoverMixins } from '@/styles/popoverMixins';
 import { layoutMixins } from '@/styles/layoutMixins';
 
@@ -20,7 +20,6 @@ type ElementProps<MenuItemValue extends string | number, MenuGroupValue extends
 
 type StyleProps = {
   className?: string;
-  withItemBorders?: boolean;
   withStickyLayout?: boolean;
 };
 
@@ -39,11 +38,17 @@ export const ComboboxMenu = <MenuItemValue extends string, MenuGroupValue extend
   withSearch = true,
 
   className,
-  withItemBorders,
   withStickyLayout,
 }: ComboboxMenuProps<MenuItemValue, MenuGroupValue>) => {
   const [highlightedCommand, setHighlightedCommand] = useState<MenuItemValue>();
   const [searchValue, setSearchValue] = useState('');
+  // const inputRef = useRef<HTMLInputElement | null>(null);
+
+  // console.log({ commandValue: highlightedCommand });
+
+  // useEffect(() => {
+  //   inputRef?.current?.focus();
+  // }, []);
 
   return (
     <Styled.Command
@@ -60,14 +65,11 @@ export const ComboboxMenu = <MenuItemValue extends string, MenuGroupValue extend
       {withSearch && (
         <Styled.Header $withStickyLayout={withStickyLayout}>
           <Styled.Input
-            /**
+            // ref={inputRef}
-             * Mobile Issue: Search Input will always trigger mobile keyboard drawer. There is no fix.
-             * https://github.com/pacocoursey/cmdk/issues/127
-             */
-            autoFocus
             type="search"
             value={searchValue}
             onValueChange={setSearchValue}
+            autoFocus
             placeholder={inputPlaceholder}
           />
         </Styled.Header>
@@ -78,7 +80,6 @@ export const ComboboxMenu = <MenuItemValue extends string, MenuGroupValue extend
           <Styled.Group
             key={group.group}
             heading={group.groupLabel}
-            $withItemBorders={withItemBorders}
             $withStickyLayout={withStickyLayout}
           >
             {group.items.map((item) => (
@@ -98,31 +99,22 @@ export const ComboboxMenu = <MenuItemValue extends string, MenuGroupValue extend
                     }
                   }}
                   disabled={item.disabled}
-                  $withItemBorders={withItemBorders}
                 >
-                  {
+                  {item.slotBefore}
-                    <>
+                  <Styled.ItemLabel>
-                      {item.slotBefore}
+                    <span>
-                      {item.slotCustomContent ?? (
+                      {`${item.label}${item.subitems?.length ? '…' : ''}`}
-                        <Styled.ItemLabel>
+                      {item.tag && (
-                          <span>
+                        <>
-                            {typeof item.label === 'string'
+                          {' '}
-                              ? `${item.label}${item.subitems?.length ? '…' : ''}`
+                          <Tag>{item.tag}</Tag>
-                              : item.label}
+                        </>
-                            {item.tag && (
-                              <>
-                                {' '}
-                                <Tag>{item.tag}</Tag>
-                              </>
-                            )}
-                          </span>
-                          {item.description && <span>{item.description}</span>}
-                        </Styled.ItemLabel>
                       )}
-                      {item.slotAfter}
+                    </span>
-                      {item.subitems && '→'}
+                    {item.description && <span>{item.description}</span>}
-                    </>
+                  </Styled.ItemLabel>
-                  }
+                  {item.slotAfter}
+                  {item.subitems && '→'}
                 </Styled.Item>
 
                 {searchValue &&
@@ -145,7 +137,6 @@ export const ComboboxMenu = <MenuItemValue extends string, MenuGroupValue extend
                           onItemSelected?.();
                         }}
                         disabled={subitem.disabled}
-                        $withItemBorders={withItemBorders}
                       >
                         {subitem.slotBefore}
                         <Styled.ItemLabel>
@@ -178,17 +169,14 @@ const Styled: Record<string, AnyStyledComponent> = {};
 
 Styled.Command = styled(Command)<{ $withStickyLayout?: boolean }>`
   --comboboxMenu-backgroundColor: var(--color-layer-2);
-
   --comboboxMenu-input-backgroundColor: var(--color-layer-3);
   --comboboxMenu-input-height: 2.5rem;
-
   --comboboxMenu-item-checked-backgroundColor: ;
   --comboboxMenu-item-checked-textColor: ;
   --comboboxMenu-item-highlighted-backgroundColor: var(--color-layer-3);
   --comboboxMenu-item-highlighted-textColor: var(--color-text-1);
   --comboboxMenu-item-backgroundColor: ;
   --comboboxMenu-item-gap: 0.5rem;
-  --comboboxMenu-item-padding: 0.5em 1em;
 
   display: grid;
   align-content: start;
@@ -237,7 +225,7 @@ Styled.Input = styled(Command.Input)`
   gap: 0.5rem;
 `;
 
-Styled.Group = styled(Command.Group)<{ $withItemBorders?: boolean; $withStickyLayout?: boolean }>`
+Styled.Group = styled(Command.Group)<{ $withStickyLayout?: boolean }>`
   color: var(--color-text-0);
 
   > [cmdk-group-heading] {
@@ -254,21 +242,12 @@ Styled.Group = styled(Command.Group)<{ $withItemBorders?: boolean; $withStickyLa
 
       > [cmdk-group-heading] {
         ${layoutMixins.stickyHeader}
-        z-index: 2;
       }
 
       > [cmdk-group-items] {
         ${layoutMixins.stickyArea3}
       }
     `}
-
-  ${({ $withItemBorders }) =>
-    $withItemBorders &&
-    css`
-      > [cmdk-group-items] {
-        padding: var(--border-width) 0;
-      }
-    `}
 `;
 
 Styled.List = styled(Command.List)<{ $withStickyLayout?: boolean }>`
@@ -295,14 +274,13 @@ Styled.List = styled(Command.List)<{ $withStickyLayout?: boolean }>`
     `}
 `;
 
-Styled.Item = styled(Command.Item)<{ $withItemBorders?: boolean }>`
+Styled.Item = styled(Command.Item)`
   ${layoutMixins.scrollSnapItem}
   ${popoverMixins.item}
   --item-checked-backgroundColor: var(--comboboxMenu-item-checked-backgroundColor);
   --item-checked-textColor: var(--comboboxMenu-item-checked-textColor);
   --item-highlighted-textColor: var(--comboboxMenu-item-highlighted-textColor);
   --item-gap: var(--comboboxMenu-item-gap);
-  --item-padding: var(--comboboxMenu-item-padding);
 
   background-color: var(--comboboxMenu-backgroundColor, inherit);
 
@@ -313,12 +291,6 @@ Styled.Item = styled(Command.Item)<{ $withItemBorders?: boolean }>`
     opacity: 0.75;
     cursor: not-allowed;
   }
-
-  ${({ $withItemBorders }) =>
-    $withItemBorders &&
-    css`
-      ${layoutMixins.withOuterBorder}
-    `}
 `;
 
 Styled.ItemLabel = styled.div`
@@ -337,8 +309,6 @@ Styled.ItemLabel = styled.div`
       opacity: 0.8;
     }
   }
-
-  min-width: 0;
 `;
 
 Styled.Empty = styled(Command.Empty)`

src/components/CopyButton.stories.tsx

@@ -15,10 +15,10 @@ CopyButtonStory.args = {
 };
 
 CopyButtonStory.argTypes = {
-  buttonType: {
+  shownAsText: {
-    options: ["text", "icon", "default"],
+    options: [true, false],
     control: { type: 'select' },
-    defaultValue: "default",
+    defaultValue: false,
   },
   children: {
     options: ['some text to copy'],

src/components/CopyButton.tsx

@@ -9,21 +9,14 @@ import { layoutMixins } from '@/styles/layoutMixins';
 
 import { Button, ButtonProps } from './Button';
 import { Icon, IconName } from './Icon';
-import { IconButton } from './IconButton';
-import { WithTooltip } from './WithTooltip';
 
 export type CopyButtonProps = {
   value?: string;
-  buttonType?: 'text' | 'icon' | 'default';
+  shownAsText?: boolean;
   children?: React.ReactNode;
 } & ButtonProps;
 
-export const CopyButton = ({
+export const CopyButton = ({ value, shownAsText, children, ...buttonProps }: CopyButtonProps) => {
-  value,
-  buttonType = 'default',
-  children,
-  ...buttonProps
-}: CopyButtonProps) => {
   const stringGetter = useStringGetter();
   const [copied, setCopied] = useState(false);
 
@@ -35,23 +28,11 @@ export const CopyButton = ({
     setTimeout(() => setCopied(false), 500);
   };
 
-  return buttonType === 'text' ? (
+  return shownAsText ? (
     <Styled.InlineRow onClick={onCopy} copied={copied}>
       {children}
-      <Styled.Icon copied={copied} iconName={copied ? IconName.Check : IconName.Copy} />
+      <Icon iconName={IconName.Copy} />
     </Styled.InlineRow>
-  ) : buttonType === 'icon' ? (
-    <WithTooltip
-      tooltipString={stringGetter({ key: copied ? STRING_KEYS.COPIED : STRING_KEYS.COPY })}
-    >
-      <Styled.IconButton
-        {...buttonProps}
-        copied={copied}
-        action={ButtonAction.Base}
-        iconName={copied ? IconName.Check : IconName.Copy}
-        onClick={onCopy}
-      />
-    </WithTooltip>
   ) : (
     <Button
       {...buttonProps}
@@ -82,21 +63,3 @@ Styled.InlineRow = styled.div<{ copied: boolean }>`
           }
         `}
 `;
-
-Styled.Icon = styled(Icon)<{ copied: boolean }>`
-  ${({ copied }) =>
-    copied &&
-    css`
-      color: var(--color-positive);
-    `}
-`;
-
-Styled.IconButton = styled(IconButton)<{ copied: boolean }>`
-  ${({ copied }) =>
-    copied &&
-    css`
-      svg {
-        color: var(--color-positive);
-      }
-    `}
-`;

src/components/Dialog.tsx

@@ -38,7 +38,6 @@ type ElementProps = {
   slotTrigger?: React.ReactNode;
   slotHeaderInner?: React.ReactNode;
   slotFooter?: React.ReactNode;
-  withClose?: boolean;
 };
 
 type StyleProps = {
@@ -47,7 +46,6 @@ type StyleProps = {
   hasHeaderBorder?: boolean;
   children?: React.ReactNode;
   className?: string;
-  withAnimation?: boolean;
 };
 
 export type DialogProps = ElementProps & StyleProps;
@@ -81,11 +79,9 @@ export const Dialog = ({
   slotTrigger,
   slotHeaderInner,
   slotFooter,
-  withClose = true,
   placement = DialogPlacement.Default,
   portalContainer,
   hasHeaderBorder = false,
-  withAnimation = false,
   children,
   className,
 }: DialogProps) => {
@@ -109,7 +105,6 @@ export const Dialog = ({
               e.preventDefault();
             }
           }}
-          $withAnimation={withAnimation}
         >
           <Styled.Header $withBorder={hasHeaderBorder}>
             <Styled.HeaderTopRow>
@@ -119,7 +114,7 @@ export const Dialog = ({
 
               {title && <Styled.Title>{title}</Styled.Title>}
 
-              {!preventClose && withClose && (
+              {!preventClose && (
                 <Styled.Close ref={closeButtonRef}>
                   <Icon iconName={IconName.Close} />
                 </Styled.Close>
@@ -173,7 +168,7 @@ Styled.Overlay = styled(Overlay)`
   }
 `;
 
-Styled.Container = styled(Content)<{ placement: DialogPlacement; $withAnimation?: boolean }>`
+Styled.Container = styled(Content)<{ placement: DialogPlacement }>`
   /* Params */
   --dialog-inset: 1rem;
   --dialog-width: 30rem;
@@ -229,7 +224,7 @@ Styled.Container = styled(Content)<{ placement: DialogPlacement; $withAnimation?
 
   outline: none;
 
-  ${({ placement, $withAnimation }) =>
+  ${({ placement }) =>
     ({
       [DialogPlacement.Default]: css`
         inset: var(--dialog-inset);
@@ -265,11 +260,9 @@ Styled.Container = styled(Content)<{ placement: DialogPlacement; $withAnimation?
           padding-bottom: var(--dialog-radius); */
         }
 
-        ${$withAnimation &&
+        @media (prefers-reduced-motion: no-preference) {
-        css`
+          &[data-state='open'] {
-          @media (prefers-reduced-motion: no-preference) {
+            animation: ${keyframes`
-            &[data-state='open'] {
-              animation: ${keyframes`
               from {
                 opacity: 0;
               }
@@ -277,19 +270,18 @@ Styled.Container = styled(Content)<{ placement: DialogPlacement; $withAnimation?
                 max-height: 0;
               }
             `} 0.15s var(--ease-out-expo);
-            }
+          }
 
-            &[data-state='closed'] {
+          &[data-state='closed'] {
-              animation: ${keyframes`
+            animation: ${keyframes`
               to {
                 opacity: 0;
                 scale: 0.9;
                 max-height: 0;
               }
             `} 0.15s;
-            }
           }
-        `}
+        }
       `,
       [DialogPlacement.Sidebar]: css`
         --dialog-width: var(--sidebar-width);
@@ -299,52 +291,50 @@ Styled.Container = styled(Content)<{ placement: DialogPlacement; $withAnimation?
           margin-left: auto;
         }
 
-        ${$withAnimation &&
+        @media (prefers-reduced-motion: no-preference) {
-        css`
+          &[data-state='open'] {
-          @media (prefers-reduced-motion: no-preference) {
+            animation: ${keyframes`
-            &[data-state='open'] {
-              animation: ${keyframes`
               from {
                 translate: 100% 0;
                 opacity: 0;
               }
             `} 0.15s var(--ease-out-expo);
-            }
+          }
 
-            &[data-state='closed'] {
+          &[data-state='closed'] {
-              animation: ${keyframes`
+            animation: ${keyframes`
               to {
                 translate: 100% 0;
                 opacity: 0;
               }
             `} 0.15s var(--ease-out-expo);
-            }
           }
-        `}
+        }
       `,
       [DialogPlacement.Inline]: css`
-        ${$withAnimation &&
+        @media (prefers-reduced-motion: no-preference) {
-        css`
+          &[data-state='open'] {
-          @media (prefers-reduced-motion: no-preference) {
+            animation: ${keyframes`
-            &[data-state='open'] {
-              animation: ${keyframes`
               from {
                 scale: 0.99;
                 opacity: 0;
+                /* filter: blur(2px); */
+                /* backdrop-filter: none; */
               }
             `} 0.15s var(--ease-out-expo);
-            }
+          }
 
-            &[data-state='closed'] {
+          &[data-state='closed'] {
-              animation: ${keyframes`
+            animation: ${keyframes`
               to {
                 scale: 0.99;
                 opacity: 0;
+                /* filter: blur(2px); */
+                /* backdrop-filter: none; */
               }
             `} 0.15s var(--ease-out-expo);
-            }
           }
-        `}
+        }
       `,
       [DialogPlacement.FullScreen]: css`
         --dialog-width: 100vw;

src/components/DropdownSelectMenu.tsx

@@ -9,7 +9,6 @@ import {
   RadioItem,
   Portal,
 } from '@radix-ui/react-dropdown-menu';
-import { CheckIcon } from '@radix-ui/react-icons';
 
 import { type MenuItem } from '@/constants/menus';
 
@@ -91,9 +90,7 @@ export const DropdownSelectMenu = <MenuItemValue extends string>({
 
                 {slotAfter}
 
-                <Styled.ItemIndicator>
+                <Styled.ItemIndicator>✔{/* <CheckIcon /> */}</Styled.ItemIndicator>
-                  <CheckIcon />
-                </Styled.ItemIndicator>
               </Styled.RadioItem>
             ))}
           </RadioGroup>

src/components/GreenCheckCircle.tsx

@@ -1,16 +1,43 @@
 import styled, { AnyStyledComponent } from 'styled-components';
 
+import { layoutMixins } from '@/styles/layoutMixins';
+
 import { Icon, IconName } from '@/components/Icon';
 
 export const GreenCheckCircle = ({ className }: { className?: string }) => (
-  <Styled.Icon className={className} iconName={IconName.CheckCircle} />
+  <Styled.GreenCheckCircle className={className}>
+    <Icon iconName={IconName.Check} />
+  </Styled.GreenCheckCircle>
 );
 
 const Styled: Record<string, AnyStyledComponent> = {};
 
-Styled.Icon = styled(Icon)`
+Styled.GreenCheckCircle = styled.div`
+  ${layoutMixins.stack}
+
   --icon-size: 1.25rem;
+  --icon-border-width: 3px;
 
   width: var(--icon-size);
   height: var(--icon-size);
+  border-radius: 50%;
+
+  align-items: center;
+
+  &:before {
+    content: '';
+    width: calc(var(--icon-size) - var(--icon-border-width) * 2);
+    height: calc(var(--icon-size) - var(--icon-border-width) * 2);
+    border: solid var(--icon-border-width) var(--color-positive);
+    border-radius: 50%;
+    opacity: 0.6;
+  }
+
+  svg {
+    width: calc(var(--icon-size) / 3);
+    height: calc(var(--icon-size) / 3);
+
+    color: var(--color-positive);
+    justify-self: center;
+  }
 `;

src/components/Icon.tsx

@@ -15,7 +15,6 @@ import {
   CautionCircleIcon,
   ChatIcon,
   CheckIcon,
-  CheckCircleIcon,
   ChevronLeftIcon,
   ChevronRightIcon,
   ClockIcon,
@@ -38,7 +37,6 @@ import {
   HelpCircleIcon,
   HideIcon,
   HistoryIcon,
-  LeaderboardIcon,
   LinkOutIcon,
   LockIcon,
   LogoShortIcon,
@@ -54,7 +52,6 @@ import {
   OrderUntriggeredIcon,
   OverviewIcon,
   PencilIcon,
-  PlayIcon,
   PositionsIcon,
   PriceChartIcon,
   PrivacyIcon,
@@ -89,7 +86,6 @@ export enum IconName {
   CautionCircleStroked = 'CautionCircleStroked',
   Chat = 'Chat',
   Check = 'Check',
-  CheckCircle = 'CheckCircle',
   ChevronLeft = 'ChevronLeft',
   ChevronRight = 'ChevronRight',
   Clock = 'Clock',
@@ -112,7 +108,6 @@ export enum IconName {
   HelpCircle = 'HelpCircle',
   Hide = 'Hide',
   History = 'History',
-  Leaderboard = 'Leaderboard',
   LinkOut = 'LinkOut',
   Lock = 'Lock',
   LogoShort = 'LogoShort',
@@ -129,7 +124,6 @@ export enum IconName {
   OrderUntriggered = 'OrderUntriggered',
   Overview = 'Overview',
   Pencil = 'Pencil',
-  Play = 'Play',
   Positions = 'Positions',
   PriceChart = 'PriceChart',
   Privacy = 'Privacy',
@@ -164,7 +158,6 @@ const icons = {
   [IconName.CautionCircleStroked]: CautionCircleStrokeIcon,
   [IconName.Chat]: ChatIcon,
   [IconName.Check]: CheckIcon,
-  [IconName.CheckCircle]: CheckCircleIcon,
   [IconName.ChevronLeft]: ChevronLeftIcon,
   [IconName.ChevronRight]: ChevronRightIcon,
   [IconName.Clock]: ClockIcon,
@@ -187,7 +180,6 @@ const icons = {
   [IconName.HelpCircle]: HelpCircleIcon,
   [IconName.Hide]: HideIcon,
   [IconName.History]: HistoryIcon,
-  [IconName.Leaderboard]: LeaderboardIcon,
   [IconName.LinkOut]: LinkOutIcon,
   [IconName.Lock]: LockIcon,
   [IconName.LogoShort]: LogoShortIcon,
@@ -203,7 +195,6 @@ const icons = {
   [IconName.OrderUntriggered]: OrderUntriggeredIcon,
   [IconName.Overview]: OverviewIcon,
   [IconName.Pencil]: PencilIcon,
-  [IconName.Play]: PlayIcon,
   [IconName.Positions]: PositionsIcon,
   [IconName.PriceChart]: PriceChartIcon,
   [IconName.Privacy]: PrivacyIcon,

src/components/Input.tsx

@@ -10,7 +10,7 @@ import {
   USD_DECIMALS,
 } from '@/constants/numbers';
 
-import { BIG_NUMBERS } from '@/lib/numbers';
+import { BIG_NUMBERS, MustBigNumber } from '@/lib/numbers';
 import { useLocaleSeparators } from '@/hooks';
 
 export enum InputType {
@@ -29,38 +29,31 @@ type StyleProps = {
 type ElementProps = {
   type?: InputType;
   value?: string | number | null;
+
+  allowNegative?: boolean;
+  decimals?: number;
   disabled?: boolean;
   id?: string;
+  max?: number;
   onBlur?: () => void;
+  onChange?:
+    | Dispatch<SetStateAction<string>>
+    | React.ReactEventHandler<HTMLInputElement>
+    | ((values: NumberFormatValues, e: SourceInfo) => void);
   onFocus?: () => void;
+  onInput?: ({
+    value,
+    floatValue,
+    formattedValue,
+  }: {
+    value: string;
+    floatValue?: number;
+    formattedValue: string;
+  }) => void;
   placeholder?: string;
 };
 
-type ConditionalProps =
+export type InputProps = ElementProps & StyleProps;
-  | {
-      allowNegative?: boolean;
-      decimals?: number;
-      max?: number;
-      onChange?: (values: NumberFormatValues, e: SourceInfo) => void;
-      onInput?: ({
-        value,
-        floatValue,
-        formattedValue,
-      }: {
-        value: string;
-        floatValue?: number;
-        formattedValue: string;
-      }) => void;
-    }
-  | {
-      allowNegative?: never;
-      decimals?: never;
-      max?: never;
-      onChange?: Dispatch<SetStateAction<string>> | React.ReactEventHandler<HTMLInputElement>;
-      onInput?: (e: SyntheticInputEvent) => void;
-    };
-
-export type InputProps = ElementProps & StyleProps & ConditionalProps;
 
 export const Input = forwardRef<HTMLInputElement, InputProps>(
   (
@@ -136,7 +129,6 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
             placeholder={placeholder}
             value={value}
             // Other
-            data-1p-ignore // prevent 1Password fill
             {...otherProps}
           />
         ) : (
@@ -145,7 +137,6 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
             ref={ref as React.Ref<typeof NumericFormat<unknown>>}
             id={id}
             // NumericFormat
-            valueIsNumericString
             allowNegative={allowNegative}
             decimalScale={decimals}
             decimalSeparator={LOCALE_DECIMAL_SEPARATOR}
@@ -169,7 +160,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
                 ? undefined
                 : Number(formattedValue.replace(',', '.'));
 
-              onInput?.({ value, floatValue, formattedValue, ...e });
+              onInput?.({ value, floatValue, formattedValue });
             }}
             // Native
             disabled={disabled}
@@ -177,7 +168,6 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
             value={formattedValue}
             autoComplete="off"
             autoCorrect="off"
-            data-1p-ignore // prevent 1Password fill
             {...otherProps}
           />
         )}

src/components/NavigationMenu.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, Ref } from 'react';
+import { forwardRef, Ref, useEffect, useRef, useState } from 'react';
 import styled, { type AnyStyledComponent, css, keyframes } from 'styled-components';
 import { NavLink, matchPath, useLocation } from 'react-router-dom';
 
@@ -21,6 +21,8 @@ import {
 
 import { layoutMixins } from '@/styles/layoutMixins';
 
+import { isTruthy } from '@/lib/isTruthy';
+
 import { Tag } from './Tag';
 import { Icon, IconName } from './Icon';
 
@@ -59,6 +61,7 @@ const NavItem = forwardRef(
       <>
         {slotBefore}
         <span>
+          {/* {`${label}${subitems?.length ? ' ' : ''}`} */}
           {label}
           {tag && (
             <>
@@ -97,6 +100,8 @@ const NavItem = forwardRef(
   }
 );
 
+type TriggerRef = HTMLAnchorElement | HTMLDivElement | HTMLButtonElement | null;
+
 export const NavigationMenu = <MenuItemValue extends string, MenuGroupValue extends string>({
   onSelectItem,
   onSelectGroup,
@@ -107,6 +112,33 @@ export const NavigationMenu = <MenuItemValue extends string, MenuGroupValue exte
   dir = 'ltr',
   className,
 }: ElementProps<MenuItemValue, MenuGroupValue> & StyleProps) => {
+  // Disable click (close) in the first 500ms after hover (open)
+  // https://github.com/radix-ui/primitives/issues/1630#issuecomment-1545995075
+  const [clickIsDisabled, setClickIsDisabled] = useState(false);
+  const triggerRefs = useRef({} as { [value: string]: TriggerRef });
+
+  useEffect(() => {
+    const observer = new MutationObserver((mutationsList) => {
+      for (const mutation of mutationsList) {
+        if (
+          mutation.type === 'attributes' &&
+          mutation.attributeName === 'data-state' &&
+          (mutation.target as unknown as HTMLOrSVGElement).dataset.state === 'open' &&
+          mutation.target !== document.activeElement
+        ) {
+          setClickIsDisabled(true);
+          setTimeout(() => setClickIsDisabled(false), 500);
+        }
+      }
+    });
+
+    for (const element of Object.values(triggerRefs.current).filter(isTruthy)) {
+      observer.observe(element, { attributes: true });
+    }
+
+    return () => observer.disconnect();
+  }, []);
+
   const renderSubitems = ({
     item,
     depth = 0,
@@ -116,18 +148,18 @@ export const NavigationMenu = <MenuItemValue extends string, MenuGroupValue exte
   }) => (
     <>
       <Styled.SubMenuTrigger
-        asChild
+        asChild={depth > 0}
-        onPointerMove={(e: MouseEvent) => e.preventDefault()}
+        ref={(ref: TriggerRef) => (triggerRefs.current[item.value] = ref)}
-        onPointerLeave={(e: MouseEvent) => e.preventDefault()}
+        onClick={(e: MouseEvent) => {
+          if (clickIsDisabled) {
+            e.preventDefault();
+          }
+        }}
       >
         <Styled.NavItem onSelect={onSelectGroup} orientation={itemOrientation} {...item} />
       </Styled.SubMenuTrigger>
 
-      <Styled.Content
+      <Styled.Content data-placement={submenuPlacement}>
-        onPointerEnter={(e: MouseEvent) => e.preventDefault()}
-        onPointerLeave={(e: MouseEvent) => e.preventDefault()}
-        data-placement={submenuPlacement}
-      >
         <Styled.Sub data-placement={submenuPlacement}>
           <Styled.List
             data-orientation={depth > 0 ? 'menu' : orientation === 'vertical' ? 'vertical' : 'menu'}
@@ -378,12 +410,25 @@ Styled.List = styled(List)`
 `;
 
 Styled.ListItem = styled(Item)`
+  /* display: contents; */
   display: grid;
   position: relative;
 
   ${Styled.List}[data-orientation="horizontal"] > & {
     gap: var(--submenu-side-offset);
   }
+
+  /* ${Styled.List}[data-orientation="menu"] > & {
+    grid-template-columns: 1fr 0;
+    align-items: start;
+    gap: 2rem;
+  } */
+
+  /* &:has([data-state="open"]) {
+    position: sticky;
+    left: 0;
+    right: 0;
+  } */
 `;
 
 Styled.SubMenuTrigger = styled(Trigger)`
@@ -391,6 +436,11 @@ Styled.SubMenuTrigger = styled(Trigger)`
   outline-offset: -2px;
 
   &[data-state='open'] {
+    div {
+      background-color: var(--navigationMenu-item-checked-backgroundColor);
+      color: var(--navigationMenu-item-checked-textColor);
+    }
+
     svg {
       rotate: 0.5turn;
     }
@@ -402,10 +452,11 @@ Styled.NavItem = styled(NavItem)<{ orientation: 'horizontal' | 'vertical' }>`
     subitems?.length
       ? css`
           ${popoverMixins.trigger}
-          --trigger-open-backgroundColor: var(--navigationMenu-item-checked-backgroundColor);
+          --trigger-backgroundColor: transparent;
+          --trigger-open-backgroundColor: var(--color-layer-3);
         `
       : css`
-          &:hover:not(:active) {
+          &:hover:not(.active) {
             background-color: var(--navigationMenu-item-highlighted-backgroundColor);
             color: var(--navigationMenu-item-highlighted-textColor);
           }
@@ -419,6 +470,8 @@ Styled.NavItem = styled(NavItem)<{ orientation: 'horizontal' | 'vertical' }>`
   --item-radius: var(--navigationMenu-item-radius);
   --item-padding: var(--navigationMenu-item-padding);
 
+  /* ${popoverMixins.backdropOverlay} */
+
   ${layoutMixins.scrollSnapItem}
 
   min-height: var(--navigationMenu-item-height);

src/components/Notification.tsx

@@ -1,201 +0,0 @@
-import React, { type MouseEvent } from 'react';
-import styled, { css } from 'styled-components';
-
-import { ButtonShape, ButtonSize } from '@/constants/buttons';
-
-import {
-  NotificationStatus,
-  type Notification as NotificationDataType,
-} from '@/constants/notifications';
-
-import { useNotifications } from '@/hooks/useNotifications';
-
-import { popoverMixins } from '@/styles/popoverMixins';
-import { layoutMixins } from '@/styles/layoutMixins';
-
-import { IconButton } from '@/components/IconButton';
-import { IconName } from '@/components/Icon';
-import { Output, OutputType } from '@/components/Output';
-
-type ElementProps = {
-  notification: NotificationDataType;
-  onClick?: () => void;
-  slotIcon?: React.ReactNode;
-  slotTitle?: React.ReactNode;
-  slotTitleLeft?: React.ReactNode;
-  slotTitleRight?: React.ReactNode;
-  slotDescription?: React.ReactNode;
-  slotCustomContent?: React.ReactNode;
-  slotAction?: React.ReactNode;
-  withClose?: boolean;
-};
-
-type StyleProps = {
-  className?: string;
-  isToast?: boolean;
-};
-
-export type NotificationProps = ElementProps & StyleProps;
-
-export const Notification = ({
-  className,
-  isToast,
-  notification,
-  onClick,
-  slotIcon,
-  slotTitle,
-  slotTitleLeft,
-  slotTitleRight,
-  slotDescription,
-  slotCustomContent,
-  slotAction,
-  withClose = !isToast,
-}: NotificationProps) => {
-  const { markCleared, markSeen } = useNotifications();
-
-  return (
-    <$Container className={className} isToast={isToast} onClick={onClick}>
-      <$Header>
-        {slotTitleLeft ?? (slotIcon && <$Icon>{slotIcon}</$Icon>)}
-        <$Title>{slotTitle}</$Title>
-        {slotTitleRight}
-        {withClose && !isToast && (
-          <$ActionItems>
-            <$Output
-              type={OutputType.RelativeTime}
-              value={notification.timestamps[NotificationStatus.Triggered]}
-            />
-
-            {notification.status < NotificationStatus.Seen ? <$UnreadIndicator /> : null}
-
-            {notification.status < NotificationStatus.Cleared ? (
-              <$IconButton
-                iconName={IconName.Close}
-                shape={ButtonShape.Square}
-                size={ButtonSize.XSmall}
-                onClick={(e: MouseEvent) => {
-                  e.stopPropagation();
-
-                  if (notification.status < NotificationStatus.Seen) {
-                    markSeen(notification);
-                  } else if (notification.status < NotificationStatus.Cleared) {
-                    markCleared(notification);
-                  }
-                }}
-              />
-            ) : null}
-          </$ActionItems>
-        )}
-      </$Header>
-      <$Description>{slotCustomContent ?? slotDescription}</$Description>
-      {slotAction && <$Action>{slotAction}</$Action>}
-    </$Container>
-  );
-};
-
-const $Container = styled.div<{ isToast?: boolean }>`
-  // Params
-  --toast-icon-size: 1.75em;
-
-  // Rules
-  ${popoverMixins.popover}
-  overflow: visible;
-  padding: 1rem 1.25rem;
-
-  ${({ isToast }) =>
-    isToast
-      ? css`
-          padding: 1rem;
-          box-shadow: 0 0 0 var(--border-width) var(--color-border),
-            // border
-            0 0 0.5rem 0.1rem var(--color-layer-2); // shadow
-        `
-      : css`
-          flex: 1;
-          background-color: transparent;
-          border-radius: 0;
-          backdrop-filter: none;
-        `}
-`;
-
-const $Header = styled.header`
-  ${layoutMixins.row}
-  position: relative;
-`;
-
-const $Icon = styled.div`
-  ${layoutMixins.row}
-  float: left;
-
-  margin-right: 0.5rem;
-
-  line-height: 1;
-
-  > svg,
-  img {
-    width: 1.5rem;
-    height: 1.5rem;
-  }
-`;
-
-const $Title = styled.div`
-  flex: 1;
-
-  font: var(--font-base-medium);
-  color: var(--color-text-2);
-
-  overflow: hidden;
-  text-overflow: ellipsis;
-`;
-
-const $Description = styled.div`
-  margin-top: 0.5rem;
-  color: var(--color-text-0);
-  font: var(--font-small-book);
-`;
-
-const $Action = styled.div`
-  margin-top: 0.5rem;
-  font: var(--font-small-book);
-`;
-
-const $ActionItems = styled.div`
-  min-width: fit-content;
-  padding-left: 0.5rem;
-  height: 100%;
-  ${layoutMixins.row};
-  justify-content: end;
-  gap: 0.5rem;
-
-  position: absolute;
-  right: 0;
-  top: 0;
-
-  background-color: var(--color-layer-2);
-  font: var(--font-mini-book);
-
-  display: none;
-  z-index: 1;
-
-  ${$Container}:hover & {
-    display: flex;
-  }
-`;
-
-const $UnreadIndicator = styled.div`
-  width: 0.5rem;
-  height: 0.5rem;
-  border-radius: 50%;
-  background-color: var(--color-accent);
-  border: 1px solid var(--color-layer-2);
-`;
-
-const $Output = styled(Output)`
-  color: var(--color-text-0);
-`;
-
-const $IconButton = styled(IconButton)`
-  --button-border: none;
-  --button-textColor: var(--color-text-0);
-  --button-hover-textColor: var(--color-text-1);
-`;

src/components/SearchInput.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
+import { useState } from 'react';
 import styled, { type AnyStyledComponent, css } from 'styled-components';
 
 import { layoutMixins } from '@/styles/layoutMixins';
@@ -22,11 +22,6 @@ export const SearchInput = ({
 }: SearchInputProps) => {
   const [isOpen, setIsOpen] = useState(false);
   const [value, setValue] = useState('');
-  const inputRef = useRef<HTMLInputElement | null>(null);
-
-  useEffect(() => {
-    if (isOpen) inputRef?.current?.focus();
-  }, [inputRef, isOpen]);
 
   return (
     <Styled.Search>
@@ -46,7 +41,6 @@ export const SearchInput = ({
       />
       <Styled.Input
         autoFocus
-        ref={inputRef}
         value={value}
         isOpen={isOpen}
         type={type}

src/components/SearchSelectMenu.tsx

@@ -12,8 +12,6 @@ import { WithDetailsReceipt } from '@/components/WithDetailsReceipt';
 import { WithLabel } from '@/components/WithLabel';
 
 import { layoutMixins } from '@/styles/layoutMixins';
-import { formMixins } from '@/styles/formMixins';
-import breakpoints from '@/styles/breakpoints';
 
 type ElementProps = {
   asChild?: boolean;
@@ -86,30 +84,27 @@ export const SearchSelectMenu = ({
 
 const Styled: Record<string, AnyStyledComponent> = {};
 
-Styled.SearchSelectMenu = styled.div`
-  ${layoutMixins.column}
-`;
-
 Styled.MenuTrigger = styled.div`
   height: var(--form-input-height);
 
   ${layoutMixins.spacedRow}
   align-items: center;
-  padding: var(--form-input-paddingY) var(--form-input-paddingX);
+  padding: 0 1rem;
-
-  @media ${breakpoints.tablet} {
-    height: var(--form-input-height-mobile);
-  }
 `;
 
 Styled.WithLabel = styled(WithLabel)`
-  ${formMixins.inputLabel}
+  --label-textColor: var(--color-text-0);
+  gap: 0.25rem;
 
   label {
     font: var(--font-mini-book);
   }
 `;
 
+Styled.SearchSelectMenu = styled.div`
+  ${layoutMixins.column}
+`;
+
 Styled.WithDetailsReceipt = styled(WithDetailsReceipt)`
   --withReceipt-backgroundColor: var(--color-layer-2);
 

src/components/SelectMenu.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import styled, { css, type AnyStyledComponent } from 'styled-components';
+import styled, { type AnyStyledComponent } from 'styled-components';
 
 import {
   Root,
@@ -13,13 +13,11 @@ import {
   Portal,
   Icon as SelectIcon,
 } from '@radix-ui/react-select';
-import { CheckIcon } from '@radix-ui/react-icons';
 
 import { popoverMixins } from '@/styles/popoverMixins';
 import { formMixins } from '@/styles/formMixins';
 
 import { WithLabel } from '@/components/WithLabel';
-import { Icon, IconName } from './Icon';
 
 export const SelectMenu = <T extends string>({
   children,
@@ -46,9 +44,7 @@ export const SelectMenu = <T extends string>({
         ) : (
           <Value />
         )}
-        {React.Children.toArray(children).length > 1 && (
+        {React.Children.toArray(children).length > 1 && <Styled.DropdownIcon />}
-          <Styled.TriggerIcon iconName={IconName.Triangle} />
-        )}
       </Styled.Trigger>
       <Portal>
         <Styled.Content className={className}>
@@ -72,9 +68,7 @@ export const SelectItem = <T extends string>({
 }) => (
   <Styled.Item className={className} value={value}>
     <ItemText>{label}</ItemText>
-    <Styled.ItemIndicator>
+    <Styled.ItemIndicator>✔{/* <CheckIcon /> */}</Styled.ItemIndicator>
-      <CheckIcon />
-    </Styled.ItemIndicator>
   </Styled.Item>
 );
 
@@ -94,6 +88,12 @@ Styled.Trigger = styled(Trigger)<{ $withBlur?: boolean }>`
   }
 `;
 
+Styled.DropdownIcon = styled(SelectIcon)`
+  font-size: 0.675em;
+  color: var(--color-text-1);
+  margin-left: auto;
+`;
+
 Styled.Content = styled(Content)`
   --select-menu-content-maxWidth: ;
   max-width: var(--select-menu-content-maxWidth);
@@ -116,9 +116,3 @@ Styled.WithLabel = styled(WithLabel)`
   ${formMixins.inputLabel}
   border-radius: 0;
 `;
-
-Styled.TriggerIcon = styled(Icon)`
-  width: 0.625rem;
-  height: 0.375rem;
-  color: var(--color-text-0);
-`;

src/components/Table.tsx

@@ -831,7 +831,6 @@ Styled.SortArrow = styled.span<{ sortDirection: 'ascending' | 'descending' }>`
 Styled.Thead = styled.thead<StyleProps>`
   ${layoutMixins.stickyHeader}
   scroll-snap-align: none;
-  font: var(--font-mini-book);
 
   > * {
     height: var(--stickyArea-topHeight);
@@ -840,17 +839,18 @@ Styled.Thead = styled.thead<StyleProps>`
   color: var(--tableHeader-textColor);
   background-color: var(--tableHeader-backgroundColor);
 
-  ${({ withInnerBorders, withGradientCardRows }) =>
+  @media ${breakpoints.notTablet} {
-    withInnerBorders &&
+    ${({ withInnerBorders, withGradientCardRows }) =>
-    !withGradientCardRows &&
+      withInnerBorders &&
-    css`
+      !withGradientCardRows &&
-      ${layoutMixins.withInnerHorizontalBorders}
+      css`
-    `}
+        ${layoutMixins.withInnerHorizontalBorders}
+      `}
+  }
 `;
 
 Styled.Tbody = styled.tbody<StyleProps>`
   ${layoutMixins.stickyArea2}
-  font: var(--font-small-book);
 
   // If <table> height is fixed with not enough rows to overflow, vertically center the rows
   &:before,
@@ -869,10 +869,6 @@ Styled.Tbody = styled.tbody<StyleProps>`
       --stickyArea2-paddingBottom: var(--border-width);
       --stickyArea2-paddingLeft: var(--border-width);
       --stickyArea2-paddingRight: var(--border-width);
-
-      tr:first-of-type {
-        box-shadow: none;
-      }
     `}
 
   ${({ withGradientCardRows }) =>

src/components/Toast.tsx

@@ -1,19 +1,24 @@
-import { type MouseEvent, useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
-import styled, { keyframes } from 'styled-components';
+
-import { Root, Action, Close } from '@radix-ui/react-toast';
+import { Root, Title, Description, Action, Close } from '@radix-ui/react-toast';
 
 import { ButtonShape, ButtonSize } from '@/constants/buttons';
-import { popoverMixins } from '@/styles/popoverMixins';
-import { breakpoints } from '@/styles';
-
-import { Notification, type NotificationProps } from '@/components/Notification';
 
 import { IconButton } from './IconButton';
-import { IconName } from './Icon';
+import { CloseIcon } from '@/icons';
+
+import styled, { keyframes } from 'styled-components';
+import { popoverMixins } from '@/styles/popoverMixins';
+import { layoutMixins } from '@/styles/layoutMixins';
 
 type ElementProps = {
   isOpen?: boolean;
   setIsOpen?: (isOpen: boolean, isClosedFromTimeout?: boolean) => void;
+  slotIcon?: React.ReactNode;
+  slotTitle?: React.ReactNode;
+  slotDescription?: React.ReactNode;
+  slotCustomContent?: React.ReactNode;
+  slotAction?: React.ReactNode;
   actionDescription?: string;
   actionAltText?: string;
   sensitivity?: 'foreground' | 'background';
@@ -21,22 +26,13 @@ type ElementProps = {
   lastUpdated?: number;
 };
 
-type StyleProps = {
+type StyleProps = {};
-  className?: string;
-};
-
-type ToastProps = NotificationProps & ElementProps & StyleProps;
 
 export const Toast = ({
-  className,
   isOpen = true,
-  notification,
-  onClick,
   setIsOpen,
   slotIcon,
   slotTitle,
-  slotTitleLeft,
-  slotTitleRight,
   slotDescription,
   slotCustomContent,
   slotAction,
@@ -45,7 +41,7 @@ export const Toast = ({
   sensitivity = 'background',
   duration = Infinity,
   lastUpdated,
-}: ToastProps) => {
+}: ElementProps & StyleProps) => {
   // Timeout
   const timeout = useRef<number>();
   const [isPaused, setIsPaused] = useState(false);
@@ -62,45 +58,37 @@ export const Toast = ({
 
   return (
     <$Root
-      className={className}
       type={sensitivity}
       duration={Infinity}
       open={isOpen}
       onOpenChange={setIsOpen}
       onPause={() => setIsPaused(true)}
       onResume={() => setIsPaused(false)}
-      onClick={() => {
-        setIsOpen?.(false, false);
-        onClick?.();
-      }}
     >
-      <Close asChild>
+      <div>
-        <$CloseButton
+        <$Container>
-          iconName={IconName.Close}
+          <$Header>
-          shape={ButtonShape.Circle}
+            {slotIcon && <$Icon>{slotIcon}</$Icon>}
-          size={ButtonSize.XSmall}
-          onClick={(e: MouseEvent) => e.stopPropagation()}
-        />
-      </Close>
 
-      {slotCustomContent ?? (
+            <Close asChild>
-        <$Notification
+              <$CloseButton
-          isToast
+                iconComponent={CloseIcon}
-          notification={notification}
+                shape={ButtonShape.Square}
-          slotIcon={slotIcon}
+                size={ButtonSize.XSmall}
-          slotTitle={slotTitle}
+              />
-          slotTitleLeft={slotTitleLeft}
+            </Close>
-          slotTitleRight={slotTitleRight}
+
-          slotDescription={slotDescription}
+            <$Title>{slotTitle}</$Title>
-          slotAction={
+          </$Header>
-            actionDescription && (
+          {!slotCustomContent && <$Description>{slotDescription}</$Description>}
-              <$Action asChild altText={actionAltText}>
+          {slotCustomContent}
-                {slotAction}
+          {actionDescription && (
-              </$Action>
+            <$Action asChild altText={actionAltText}>
-            )
+              {slotAction}
-          }
+            </$Action>
-        />
+          )}
-      )}
+        </$Container>
+      </div>
     </$Root>
   );
 };
@@ -126,7 +114,7 @@ const $Root = styled(Root)`
   translate: var(--x) var(--y);
   will-change: translate, margin-top;
 
-  /* margin-bottom: var(--toasts-gap); */
+  margin-bottom: var(--toasts-gap);
 
   &[data-swipe-direction='right'] {
     &[data-state='open'] {
@@ -175,10 +163,6 @@ const $Root = styled(Root)`
     cursor: n-resize;
   }
 
-  &:focus:not([data-swipe='end']) & {
-    outline: var(--color-accent) 1px solid;
-  }
-
   &[data-swipe='move'] {
     transition-property: opacity;
     opacity: 0.98;
@@ -187,10 +171,6 @@ const $Root = styled(Root)`
     * {
       cursor: inherit;
     }
-
-    & > * {
-      opacity: 0.5;
-    }
   }
 
   &[data-state='closed'],
@@ -218,48 +198,69 @@ const $Root = styled(Root)`
   }
 `;
 
-const $Notification = styled(Notification)`
+const $Container = styled.div`
   // Params
   --toast-icon-size: 1.75em;
 
   // Rules
   ${popoverMixins.popover}
-  overflow: visible;
   padding: 1rem;
   box-shadow: 0 0 0 var(--border-width) var(--color-border),
     // border
     0 0 0.5rem 0.1rem var(--color-layer-2); // shadow
 
+  ${$Root}:focus:not([data-swipe='end']) & {
+    outline: var(--color-accent) 1px solid;
+  }
+
   > * {
     transition: opacity 0.2s;
   }
+  ${$Root}[data-swipe='move'] & > * {
+    opacity: 0.5;
+  }
+`;
+
+const $Header = styled.header`
+  display: block;
+`;
+
+const $Icon = styled.div`
+  ${layoutMixins.row}
+
+  float: left;
+
+  width: 1em;
+  height: 1em;
+
+  margin-right: 0.4em;
+
+  line-height: 1;
 `;
 
 const $CloseButton = styled(IconButton)`
   --button-textColor: var(--color-text-0);
   --button-border: none;
   --button-icon-size: 0.85em;
-  display: none;
 
-  /* float: right; */
+  float: right;
   margin: -0.42rem -0.42rem -0.42rem 0.42rem;
+`;
 
-  // Absolute
+const $Title = styled(Title)`
-  position: absolute;
+  flex: 1;
-  top: 0;
-  right: 0;
 
-  border: solid var(--border-width) var(--color-border);
+  font: var(--font-base-medium);
+  color: var(--color-text-2);
 
-  ${$Root}:hover & {
+  overflow: hidden;
-    display: block;
+  text-overflow: ellipsis;
-    z-index: 2;
+`;
-  }
 
-  @media ${breakpoints.mobile} {
+const $Description = styled(Description)`
-    display: block;
+  margin-top: 0.5rem;
-    z-index: 2;
+  color: var(--color-text-0);
-  }
+  font: var(--font-small-book);
 `;
 
 const $Action = styled(Action)`

src/components/ToastArea.tsx

@@ -1,7 +1,6 @@
-import styled from 'styled-components';
-
 import { Provider, Viewport } from '@radix-ui/react-toast';
 
+import styled from 'styled-components';
 import { layoutMixins } from '@/styles/layoutMixins';
 
 type ElementProps = {
@@ -13,9 +12,7 @@ type StyleProps = {
   className?: string;
 };
 
-type ToastAreaProps = ElementProps & StyleProps;
+export const ToastArea = ({ swipeDirection, children, className }: ElementProps & StyleProps) => (
-
-export const ToastArea = ({ swipeDirection, children, className }: ToastAreaProps) => (
   <$ToastArea className={className}>
     <Provider swipeDirection={swipeDirection}>
       {children}
@@ -37,7 +34,6 @@ const $ToastArea = styled.aside`
   > * {
     display: contents;
     pointer-events: none;
-    position: relative;
 
     > ol {
       /* display: block; */
@@ -47,7 +43,6 @@ const $ToastArea = styled.aside`
       // Desired display order: latest to earliest (¯\_(ツ)_/¯)
       display: flex;
       flex-direction: column-reverse;
-      position: relative;
 
       pointer-events: none;
 

src/components/ToggleButton.tsx

@@ -52,19 +52,15 @@ const Styled: Record<string, AnyStyledComponent> = {};
 Styled.BaseButton = styled(BaseButton)`
   --button-toggle-off-backgroundColor: var(--color-layer-3);
   --button-toggle-off-textColor: var(--color-text-0);
-  --button-toggle-off-border: solid var(--border-width) var(--border-color);
   --button-toggle-on-backgroundColor: var(--color-layer-1);
   --button-toggle-on-textColor: var(--color-text-2);
-  --button-toggle-on-border: solid var(--border-width) var(--border-color);
 
   --button-backgroundColor: var(--button-toggle-off-backgroundColor);
   --button-textColor: var(--button-toggle-off-textColor);
-  --button-border: var(--button-toggle-off-border);
 
   &[data-state='on'],
   &[data-state='active'] {
     --button-backgroundColor: var(--button-toggle-on-backgroundColor);
     --button-textColor: var(--button-toggle-on-textColor);
-    --button-border: var(--button-toggle-on-border);
   }
 `;

src/constants/abacus.ts

@@ -124,8 +124,6 @@ export type SubaccountPosition = Abacus.exchange.dydx.abacus.output.SubaccountPo
 export type SubaccountOrder = Abacus.exchange.dydx.abacus.output.SubaccountOrder;
 export type OrderStatus = Abacus.exchange.dydx.abacus.output.input.OrderStatus;
 export const AbacusOrderStatus = Abacus.exchange.dydx.abacus.output.input.OrderStatus;
-const abacusOrderStatuses = [...AbacusOrderStatus.values()] as const;
-export type AbacusOrderStatuses = (typeof abacusOrderStatuses)[number];
 export type SubaccountFills = Abacus.exchange.dydx.abacus.output.SubaccountFill[];
 export type SubaccountFill = Abacus.exchange.dydx.abacus.output.SubaccountFill;
 export type SubaccountFundingPayment = Abacus.exchange.dydx.abacus.output.SubaccountFundingPayment;
@@ -211,13 +209,11 @@ type ReadonlyKeysOf<T> = {
   [K in keyof T]: IfEquals<{ [_ in K]: T[K] }, { readonly [_ in K]: T[K] }, K, never>;
 }[keyof T];
 
-export type KotlinIrEnumValues<T> = Exclude<ReadonlyKeysOf<T>, 'Companion' | '$serializer'>;
+type KotlinIrEnumValues<T> = Exclude<ReadonlyKeysOf<T>, 'Companion' | '$serializer'>;
 
 export const ORDER_SIDES: Record<KotlinIrEnumValues<typeof AbacusOrderSide>, OrderSide> = {
   [AbacusOrderSide.buy.name]: OrderSide.BUY,
   [AbacusOrderSide.sell.name]: OrderSide.SELL,
-  [AbacusOrderSide.buy.rawValue]: OrderSide.BUY,
-  [AbacusOrderSide.sell.rawValue]: OrderSide.SELL,
 };
 
 export const POSITION_SIDES: Record<KotlinIrEnumValues<typeof AbacusPositionSide>, PositionSide> = {
@@ -238,25 +234,12 @@ export const HISTORICAL_PNL_PERIODS: Record<
 
 export const ORDER_STATUS_STRINGS: Record<KotlinIrEnumValues<typeof AbacusOrderStatus>, string> = {
   [AbacusOrderStatus.open.name]: STRING_KEYS.OPEN_STATUS,
-  [AbacusOrderStatus.open.rawValue]: STRING_KEYS.OPEN_STATUS,
-
   [AbacusOrderStatus.partiallyFilled.name]: STRING_KEYS.PARTIALLY_FILLED,
-  [AbacusOrderStatus.partiallyFilled.rawValue]: STRING_KEYS.PARTIALLY_FILLED,
-
   [AbacusOrderStatus.filled.name]: STRING_KEYS.ORDER_FILLED,
-  [AbacusOrderStatus.filled.rawValue]: STRING_KEYS.ORDER_FILLED,
-
   [AbacusOrderStatus.cancelled.name]: STRING_KEYS.CANCELED,
-  [AbacusOrderStatus.cancelled.rawValue]: STRING_KEYS.CANCELED,
-
   [AbacusOrderStatus.canceling.name]: STRING_KEYS.CANCELING,
-  [AbacusOrderStatus.canceling.rawValue]: STRING_KEYS.CANCELING,
-
   [AbacusOrderStatus.pending.name]: STRING_KEYS.PENDING,
-  [AbacusOrderStatus.pending.rawValue]: STRING_KEYS.PENDING,
-
   [AbacusOrderStatus.untriggered.name]: STRING_KEYS.UNTRIGGERED,
-  [AbacusOrderStatus.untriggered.rawValue]: STRING_KEYS.UNTRIGGERED,
 };
 
 export const TRADE_TYPES: Record<
@@ -264,31 +247,15 @@ export const TRADE_TYPES: Record<
   Nullable<TradeTypes>
 > = {
   [AbacusOrderType.limit.name]: TradeTypes.LIMIT,
-  [AbacusOrderType.limit.rawValue]: TradeTypes.LIMIT,
-
   [AbacusOrderType.market.name]: TradeTypes.MARKET,
-  [AbacusOrderType.market.rawValue]: TradeTypes.MARKET,
-
   [AbacusOrderType.stopLimit.name]: TradeTypes.STOP_LIMIT,
-  [AbacusOrderType.stopLimit.rawValue]: TradeTypes.STOP_LIMIT,
-
   [AbacusOrderType.stopMarket.name]: TradeTypes.STOP_MARKET,
-  [AbacusOrderType.stopMarket.rawValue]: TradeTypes.STOP_MARKET,
-
   [AbacusOrderType.takeProfitLimit.name]: TradeTypes.TAKE_PROFIT,
-  [AbacusOrderType.takeProfitLimit.rawValue]: TradeTypes.TAKE_PROFIT,
-
   [AbacusOrderType.takeProfitMarket.name]: TradeTypes.TAKE_PROFIT_MARKET,
-  [AbacusOrderType.takeProfitMarket.rawValue]: TradeTypes.TAKE_PROFIT_MARKET,
 
   [AbacusOrderType.liquidated.name]: null,
   [AbacusOrderType.liquidation.name]: null,
-
-  [AbacusOrderType.liquidation.name]: null,
-  [AbacusOrderType.liquidation.rawValue]: null,
-
   [AbacusOrderType.trailingStop.name]: null,
-  [AbacusOrderType.trailingStop.rawValue]: null,
 };
 
 // Custom types involving Abacus

src/constants/dialogs.ts

@@ -3,7 +3,6 @@ export enum DialogTypes {
   Deposit = 'Deposit',
   DisconnectWallet = 'DisconnectWallet',
   ExchangeOffline = 'ExchangeOffline',
-  ExternalLink = 'ExternalLink',
   FillDetails = 'FillDetails',
   Help = 'Help',
   ExternalNavKeplr = 'ExternalNavKeplr',
@@ -11,14 +10,13 @@ export enum DialogTypes {
   MobileSignIn = 'MobileSignIn',
   Onboarding = 'Onboarding',
   OrderDetails = 'OrderDetails',
-  Preferences = 'Preferences',
   RateLimit = 'RateLimit',
+  Receive = 'Receive',
   RestrictedGeo = 'RestrictedGeo',
   RestrictedWallet = 'RestrictedWallet',
   Trade = 'Trade',
   Transfer = 'Transfer',
   Withdraw = 'Withdraw',
-  ManageFunds = 'ManageFunds',
 }
 
 export enum TradeBoxDialogTypes {

src/constants/localStorage.ts

@@ -13,7 +13,6 @@ export enum LocalStorageKey {
   PushNotificationsEnabled = 'dydx.PushNotificationsEnabled',
   PushNotificationsLastUpdated = 'dydx.PushNotificationsLastUpdated',
   TransferNotifications = 'dydx.TransferNotifications',
-  NotificationPreferences = 'dydx.NotificationPreferences',
 
   // UI State
   LastViewedMarket = 'dydx.LastViewedMarket',
@@ -22,13 +21,9 @@ export enum LocalStorageKey {
   SelectedTheme = 'dydx.SelectedTheme',
   SelectedTradeLayout = 'dydx.SelectedTradeLayout',
   TradingViewChartConfig = 'dydx.TradingViewChartConfig',
-  HasSeenLaunchIncentives = 'dydx.HasSeenLaunchIncentives',
 }
 
 export const LOCAL_STORAGE_VERSIONS = {
   [LocalStorageKey.EvmDerivedAddresses]: 'v2',
-  [LocalStorageKey.NotificationPreferences]: 'v1',
-  [LocalStorageKey.TransferNotifications]: 'v1',
-  [LocalStorageKey.Notifications]: 'v1',
   // TODO: version all localStorage keys
 };

src/constants/localization.ts

@@ -6,8 +6,6 @@ import {
   LOCALE_DATA,
   TOOLTIPS,
   WARNINGS_STRING_KEYS,
-  NOTIFICATIONS_STRING_KEYS,
-  NOTIFICATIONS,
 } from '@dydxprotocol/v4-localization';
 
 import { type LinksConfigs } from '@/hooks/useURLConfigs';
@@ -29,7 +27,6 @@ export enum SupportedLocales {
 
 export const EN_LOCALE_DATA = {
   ...LOCALE_DATA[SupportedLocales.EN],
-  ...NOTIFICATIONS[SupportedLocales.EN],
   TOOLTIPS: TOOLTIPS[SupportedLocales.EN],
 };
 
@@ -37,13 +34,8 @@ export const STRING_KEYS = {
   ...APP_STRING_KEYS,
   ...ERRORS_STRING_KEYS,
   ...WARNINGS_STRING_KEYS,
-  ...NOTIFICATIONS_STRING_KEYS,
 };
 
-export const STRING_KEY_VALUES = Object.fromEntries(
-  Object.values(STRING_KEYS).map((key) => [key, key])
-);
-
 export type StringKey = keyof typeof STRING_KEYS;
 
 export type LocaleData = typeof EN_LOCALE_DATA;

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/menus.ts

@@ -26,7 +26,6 @@ export type MenuItem<MenuItemValue, MenuItemTypes = string> = {
   tag?: React.ReactNode;
   slotAfter?: React.ReactNode;
   description?: string;
-  slotCustomContent?: React.ReactNode;
 
   href?: string;
   onSelect?: (key: MenuItemValue) => void;

src/constants/notifications.ts

@@ -2,9 +2,8 @@ import { StatusResponse } from '@0xsquid/sdk';
 
 /** implemented in useNotificationTypes */
 export enum NotificationType {
-  AbacusGenerated = 'AbacusGenerated',
+  OrderStatusChanged = 'OrderStatusChanged',
   SquidTransfer = 'SquidTransfer',
-  ReleaseUpdates = 'ReleaseUpdates',
 }
 
 export enum NotificationComponentType {}
@@ -60,7 +59,7 @@ export enum NotificationStatus {
   /** Toast or NotificationsMenu item interacted with or dismissed. "Seen" in NotificationsMenu. */
   Seen,
 
-  /** Notification marked for deletion. Hidden in NotificationsMenu. */
+  /** Notification marked for deletion. "Archived" in NotificationsMenu. */
   Cleared,
 }
 
@@ -81,20 +80,14 @@ export type Notifications = Record<NotificationId, Notification<any>>;
 /** Notification display data derived from app state at runtime. */
 export type NotificationDisplayData = {
   icon?: React.ReactNode;
-  title: string; // Title for Toast, Notification, and Push Notification
-  body?: string; // Description body for Toast, Notification, and Push Notification
 
-  slotTitleLeft?: React.ReactNode;
+  title?: string;
-  slotTitleRight?: React.ReactNode;
 
-  // Overrides title/body for Notification in NotificationMenu
+  description?: React.ReactNode;
-  renderCustomBody?: ({
+
-    isToast,
+  customContent?: React.ReactNode;
-    notification,
+
-  }: {
+  customMenuContent?: React.ReactNode;
-    isToast?: boolean;
-    notification: Notification;
-  }) => React.ReactNode; // Custom Notification
 
   actionDescription?: string;
 
@@ -129,16 +122,5 @@ export type TransferNotifcation = {
   fromChainId?: string;
   toAmount?: number;
   triggeredAt?: number;
-  isCctp?: boolean;
-  errorCount?: number;
   status?: StatusResponse;
 };
-
-/**
- * @description Struct to store whether a NotificationType should be triggered
- */
-export type NotificationPreferences = {
-  [key in NotificationType]: boolean;
-} & { version: string };
-
-export const DEFAULT_TOAST_AUTO_CLOSE_MS = 5000;

src/constants/trade.ts

@@ -116,15 +116,3 @@ export enum MobilePlaceOrderSteps {
   PlacingOrder = 'PlacingOrder',
   Confirmation = 'Confirmation',
 }
-
-export const CLEARED_TRADE_INPUTS = {
-  limitPriceInput: '',
-  triggerPriceInput: '',
-  trailingPercentInput: '',
-};
-
-export const CLEARED_SIZE_INPUTS = {
-  amountInput: '',
-  usdAmountInput: '',
-  leverageInput: '',
-};

src/hooks/index.ts

@@ -22,7 +22,6 @@ import { useShouldShowFooter } from './useShouldShowFooter';
 import { useSelectedNetwork } from './useSelectedNetwork';
 import { useStringGetter } from './useStringGetter';
 import { useSubaccount } from './useSubaccount';
-import { useTradeFormInputs } from './useTradeFormInputs';
 import { useURLConfigs } from './useURLConfigs';
 
 export {
@@ -50,6 +49,5 @@ export {
   useSelectedNetwork,
   useStringGetter,
   useSubaccount,
-  useTradeFormInputs,
   useURLConfigs,
 };

src/hooks/useAccounts.tsx

@@ -2,7 +2,7 @@ import { useCallback, useContext, createContext, useEffect, useState, useMemo }
 
 import { useDispatch } from 'react-redux';
 import { AES, enc } from 'crypto-js';
-import { NOBLE_BECH32_PREFIX, LocalWallet, type Subaccount } from '@dydxprotocol/v4-client-js';
+import { LocalWallet, type Subaccount } from '@dydxprotocol/v4-client-js';
 
 import { OnboardingGuard, OnboardingState, type EvmDerivedAddresses } from '@/constants/account';
 import { DialogTypes } from '@/constants/dialogs';
@@ -136,8 +136,8 @@ const useAccountsContext = () => {
       getSubaccounts: async ({ dydxAddress }: { dydxAddress: DydxAddress }) => {
         try {
           const response = await compositeClient?.indexerClient.account.getSubaccounts(dydxAddress);
-          setDydxSubaccounts(response?.subaccounts);
+          setDydxSubaccounts(response.subaccounts);
-          return response?.subaccounts ?? [];
+          return response.subaccounts;
         } catch (error) {
           // 404 is expected if the user has no subaccounts
           if (error.status === 404) {
@@ -219,16 +219,6 @@ const useAccountsContext = () => {
     else abacusStateManager.attemptDisconnectAccount();
   }, [localDydxWallet]);
 
-  useEffect(() => {
-    const setNobleWallet = async () => {
-      if (hdKey?.mnemonic) {
-        const nobleWallet = await LocalWallet.fromMnemonic(hdKey.mnemonic, NOBLE_BECH32_PREFIX);
-        abacusStateManager.setNobleWallet(nobleWallet);
-      }
-    };
-    setNobleWallet();
-  }, [hdKey?.mnemonic]);
-
   // clear subaccounts when no dydxAddress is set
   useEffect(() => {
     (async () => {

src/hooks/useCurrentMarketId.ts

@@ -22,8 +22,6 @@ export const useCurrentMarketId = () => {
   const dispatch = useDispatch();
   const selectedNetwork = useSelector(getSelectedNetwork);
   const marketIds = useSelector(getMarketIds, shallowEqual);
-  const hasMarketIds = marketIds.length > 0;
-
   const [lastViewedMarket, setLastViewedMarket] = useLocalStorage({
     key: LocalStorageKey.LastViewedMarket,
     defaultValue: DEFAULT_MARKETID,
@@ -50,5 +48,5 @@ export const useCurrentMarketId = () => {
     if (marketIds) {
       abacusStateManager.setMarket(marketId ?? DEFAULT_MARKETID);
     }
-  }, [selectedNetwork, hasMarketIds, marketId]);
+  }, [selectedNetwork, marketIds, marketId]);
 };

src/hooks/useLocalNotifications.tsx

@@ -1,12 +1,12 @@
 import { createContext, useContext, useCallback, useEffect, useMemo } from 'react';
 import { useQuery } from 'react-query';
+import type { StatusResponse } from '@0xsquid/sdk';
 
-import { LOCAL_STORAGE_VERSIONS, LocalStorageKey } from '@/constants/localStorage';
+import { LocalStorageKey } from '@/constants/localStorage';
 import { type TransferNotifcation } from '@/constants/notifications';
+
 import { useAccounts } from '@/hooks/useAccounts';
-
+import { STATUS_ERROR_GRACE_PERIOD, useSquid } from '@/hooks/useSquid';
-import { fetchSquidStatus, STATUS_ERROR_GRACE_PERIOD } from '@/lib/squid';
-
 import { useLocalStorage } from './useLocalStorage';
 
 const LocalNotificationsContext = createContext<
@@ -22,32 +22,16 @@ export const LocalNotificationsProvider = ({ ...props }) => (
 export const useLocalNotifications = () => useContext(LocalNotificationsContext)!;
 
 const TRANSFER_STATUS_FETCH_INTERVAL = 10_000;
-const ERROR_COUNT_THRESHOLD = 3;
 
 const useLocalNotificationsContext = () => {
   // transfer notifications
   const [allTransferNotifications, setAllTransferNotifications] = useLocalStorage<{
     [key: `dydx${string}`]: TransferNotifcation[];
-    version: string;
   }>({
     key: LocalStorageKey.TransferNotifications,
-    defaultValue: {
+    defaultValue: {},
-      version: LOCAL_STORAGE_VERSIONS[LocalStorageKey.TransferNotifications],
-    },
   });
 
-  // Ensure version matches, otherwise wipe
-  useEffect(() => {
-    if (
-      allTransferNotifications?.version !==
-      LOCAL_STORAGE_VERSIONS[LocalStorageKey.TransferNotifications]
-    ) {
-      setAllTransferNotifications({
-        version: LOCAL_STORAGE_VERSIONS[LocalStorageKey.TransferNotifications],
-      });
-    }
-  }, [allTransferNotifications]);
-
   const { dydxAddress } = useAccounts();
 
   const transferNotifications = dydxAddress ? allTransferNotifications[dydxAddress] || [] : [];
@@ -68,65 +52,58 @@ const useLocalNotificationsContext = () => {
     [transferNotifications]
   );
 
-  useQuery({
+  const squid = useSquid();
-    queryKey: 'getTransactionStatus',
+
+  const { data: transferStatuses } = useQuery({
+    queryKey: ['getTransactionStatus', transferNotifications],
     queryFn: async () => {
-      const processTransferNotifications = async (transferNotifications: TransferNotifcation[]) => {
+      const statuses: { [key: string]: StatusResponse } = {};
-        const newTransferNotifications = await Promise.all(
+      for (const {
-          transferNotifications.map(async (transferNotification) => {
+        txHash,
-            const {
+        toChainId,
-              txHash,
+        fromChainId,
-              toChainId,
+        triggeredAt,
-              fromChainId,
+        status: currentStatus,
-              triggeredAt,
+      } of transferNotifications) {
-              isCctp,
+        try {
-              errorCount,
+          // skip if error is returned or if the transaction is not ongoing
-              status: currentStatus,
+          if (
-            } = transferNotification;
-
             // @ts-ignore status.errors is not in the type definition but can be returned
-            // also error can some time come back as an empty object so we need to ignore for that
+            currentStatus?.errors ||
-            const hasErrors = !!currentStatus?.errors || 
+            currentStatus?.error ||
-                 (currentStatus?.error && Object.keys(currentStatus.error).length !== 0);
+            (currentStatus?.squidTransactionStatus &&
+              currentStatus?.squidTransactionStatus !== 'ongoing')
+          ) {
+            continue;
+          }
 
-            if (
+          const status = await squid?.getStatus({ transactionId: txHash, toChainId, fromChainId });
-              !hasErrors &&
+          if (status) statuses[txHash] = status;
-              (!currentStatus?.squidTransactionStatus ||
+        } catch (error) {
-                currentStatus?.squidTransactionStatus === 'ongoing')
+          // ignore errors for the first 120s since the status might not be available yet
-            ) {
+          if (!triggeredAt || Date.now() - triggeredAt > STATUS_ERROR_GRACE_PERIOD) {
-              try {
+            statuses[txHash] = error;
-                const status = await fetchSquidStatus({
+          }
-                  transactionId: txHash,
+        }
-                  toChainId,
+      }
-                  fromChainId,
+      return statuses;
-                }, isCctp);
-
-                if (status) {
-                  transferNotification.status = status;
-                }
-              } catch (error) {
-                if (!triggeredAt || Date.now() - triggeredAt > STATUS_ERROR_GRACE_PERIOD) {
-                  if (errorCount && errorCount > ERROR_COUNT_THRESHOLD) {
-                    transferNotification.status = error;
-                  } else {
-                    transferNotification.errorCount = errorCount ? errorCount + 1 : 1;
-                  }
-                }
-              }
-            }
-
-            return transferNotification;
-          })
-        );
-
-        return newTransferNotifications;
-      };
-      const newTransferNotifications = await processTransferNotifications(transferNotifications);
-      setTransferNotifications(newTransferNotifications);
     },
     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,

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

@@ -1,148 +1,125 @@
-import { type ReactNode, useEffect } from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
-import styled from 'styled-components';
+import styled, { type AnyStyledComponent } from 'styled-components';
-import { shallowEqual, useDispatch, useSelector } from 'react-redux';
+import { useSelector, shallowEqual, useDispatch } from 'react-redux';
-import { isEqual, groupBy } from 'lodash';
+import { groupBy } from 'lodash';
-import { useNavigate } from 'react-router-dom';
 
+import { AlertType } from '@/constants/alerts';
+import { AbacusOrderStatus, ORDER_SIDES } from '@/constants/abacus';
 import { DialogTypes } from '@/constants/dialogs';
+import { STRING_KEYS, StringKey } from '@/constants/localization';
 import { ENVIRONMENT_CONFIG_MAP } from '@/constants/networks';
-import { AppRoute } from '@/constants/routes';
+import { type NotificationTypeConfig, NotificationType } from '@/constants/notifications';
-import { DydxChainAsset } from '@/constants/wallets';
+import { ORDER_SIDE_STRINGS } from '@/constants/trade';
 
-import {
+import { useSelectedNetwork }  from '@/hooks';
-  STRING_KEYS,
-  STRING_KEY_VALUES,
-  type StringGetterFunction,
-  type StringKey,
-} from '@/constants/localization';
-
-import {
-  type NotificationTypeConfig,
-  NotificationType,
-  DEFAULT_TOAST_AUTO_CLOSE_MS,
-} from '@/constants/notifications';
-
-import { useSelectedNetwork, useStringGetter } from '@/hooks';
 import { useLocalNotifications } from '@/hooks/useLocalNotifications';
 
-import { AssetIcon } from '@/components/AssetIcon';
 import { Icon, IconName } from '@/components/Icon';
-import { TradeNotification } from '@/views/notifications/TradeNotification';
+import { Output, OutputType } from '@/components/Output';
-import { TransferStatusNotification } from '@/views/notifications/TransferStatusNotification';
+import { TransferStatusToast } from '@/views/TransferStatus';
 
 import { getSubaccountFills, getSubaccountOrders } from '@/state/accountSelectors';
 import { openDialog } from '@/state/dialogs';
-import { getAbacusNotifications } from '@/state/notificationsSelectors';
-import { getMarketIds } from '@/state/perpetualsSelectors';
 
-import { formatSeconds } from '@/lib/timeUtils';
+import { OrderStatusIcon } from '@/views/OrderStatusIcon';
 
-const parseStringParamsForNotification = ({
+import { useStringGetter } from './useStringGetter';
-  stringGetter,
+import { TransferStatusSteps } from '@/views/TransferStatusSteps';
-  value,
-}: {
-  stringGetter: StringGetterFunction;
-  value: unknown;
-}): ReactNode => {
-  if (STRING_KEY_VALUES[value as StringKey]) {
-    return stringGetter({ key: value as StringKey });
-  }
 
-  return value as ReactNode;
+export const notificationTypes = [
-};
-
-export const notificationTypes: NotificationTypeConfig[] = [
   {
-    type: NotificationType.AbacusGenerated,
+    type: NotificationType.OrderStatusChanged,
-    useTrigger: ({ trigger }) => {
+
+    useTrigger: ({ trigger, lastUpdated }) => {
       const stringGetter = useStringGetter();
-      const abacusNotifications = useSelector(getAbacusNotifications, isEqual);
+
+      const orders = useSelector(getSubaccountOrders, shallowEqual) || [];
+      const ordersByOrderId = Object.fromEntries(orders.map((order) => [order.id, order]));
+
+      const fills = useSelector(getSubaccountFills, shallowEqual) || [];
+      const fillsByOrderId = groupBy(fills, (fill) => fill.orderId);
+
+      const orderIds = useMemo(
+        () => [...Object.keys(ordersByOrderId), ...Object.keys(fillsByOrderId)],
+        [orders, fills]
+      );
 
       useEffect(() => {
-        for (const abacusNotif of abacusNotifications) {
+        for (const orderId of orderIds) {
-          const [abacusNotificationType = '', id = ''] = abacusNotif.id.split(':');
+          const fills = fillsByOrderId[orderId];
-          const parsedData = abacusNotif.data ? JSON.parse(abacusNotif.data) : {};
 
-          const params = Object.fromEntries(
+          const order =
-            Object.entries(parsedData).map(([key, value]) => {
+            ordersByOrderId[orderId] ??
-              return [key, parseStringParamsForNotification({ stringGetter, value })];
+            (fills?.length
-            })
+              ? {
-          );
+                  ...fills[fills.length - 1],
-
+                  id: orderId,
-          switch (abacusNotificationType) {
+                  createdAtMilliseconds: Math.max(
-            case 'order': {
+                    ...fills.map((fill) => fill.createdAtMilliseconds)
-              trigger(
-                abacusNotif.id,
-                {
-                  icon: abacusNotif.image && <$Icon src={abacusNotif.image} alt="" />,
-                  title: stringGetter({ key: abacusNotif.title }),
-                  body: abacusNotif.text ? stringGetter({ key: abacusNotif.text, params }) : '',
-                  toastDuration: DEFAULT_TOAST_AUTO_CLOSE_MS,
-                  toastSensitivity: 'foreground',
-                  renderCustomBody: ({ isToast, notification }) => (
-                    <TradeNotification
-                      isToast={isToast}
-                      data={parsedData}
-                      notification={notification}
-                    />
                   ),
-                },
+                  status: AbacusOrderStatus.filled,
-                [abacusNotif.updateTimeInMilliseconds, abacusNotif.data],
+                }
-                true
+              : undefined);
-              );
-              break;
-            }
-            default:
-              trigger(
-                abacusNotif.id,
-                {
-                  icon: abacusNotif.image && <$Icon src={abacusNotif.image} alt="" />,
-                  title: stringGetter({ key: abacusNotif.title }),
-                  body: abacusNotif.text ? stringGetter({ key: abacusNotif.text, params }) : '',
-                  toastDuration: DEFAULT_TOAST_AUTO_CLOSE_MS,
-                  toastSensitivity: 'foreground',
-                },
-                [abacusNotif.updateTimeInMilliseconds, abacusNotif.data]
-              );
-              break;
-          }
-        }
-      }, [abacusNotifications, stringGetter]);
-    },
-    useNotificationAction: () => {
-      const dispatch = useDispatch();
-      const orders = useSelector(getSubaccountOrders, shallowEqual) || [];
-      const ordersById = groupBy(orders, 'id');
-      const fills = useSelector(getSubaccountFills, shallowEqual) || [];
-      const fillsById = groupBy(fills, 'id');
-      const marketIds = useSelector(getMarketIds, shallowEqual);
-      const navigate = useNavigate();
 
-      return (notificationId: string) => {
+          if (order)
-        const [abacusNotificationType = '', id = ''] = notificationId.split(':');
+            trigger(
-
+              order.id,
-        if (ordersById[id]) {
+              {
-          dispatch(
+                icon: (
-            openDialog({
+                  <OrderStatusIcon status={order.status} totalFilled={order.totalFilled ?? 0} />
-              type: DialogTypes.OrderDetails,
+                ),
-              dialogProps: { orderId: id },
+                title: `${stringGetter({
-            })
+                  key: order.resources.typeStringKey as StringKey,
-          );
+                })} ${
-        } else if (fillsById[id]) {
+                  order.status === AbacusOrderStatus.open && (order?.totalFilled ?? 0) > 0
-          dispatch(
+                    ? stringGetter({ key: STRING_KEYS.PARTIALLY_FILLED })
-            openDialog({
+                    : stringGetter({ key: order.resources.statusStringKey as StringKey })
-              type: DialogTypes.FillDetails,
+                }`,
-              dialogProps: { fillId: id },
+                description: `${stringGetter({
-            })
+                  key: ORDER_SIDE_STRINGS[ORDER_SIDES[order.side.name]],
-          );
+                })} ${order.size} ${order.marketId} @ $${order.price}`,
-        } else if (marketIds.includes(id)) {
+                actionDescription: 'View Order',
-          navigate(`${AppRoute.Trade}/${id}`, {
+                actionAltText: 'View this order in the Orders tab or the Notifications menu.',
-            replace: true,
+                toastSensitivity:
-          });
+                  order.status === AbacusOrderStatus.pending ? 'foreground' : 'background',
+                toastDuration: 5000,
+              },
+              [order.status.name, order.size],
+              !order.createdAtMilliseconds || order.createdAtMilliseconds > lastUpdated
+            );
         }
-      };
+      }, [orderIds]);
     },
-  },
+
+    // useNotificationAction: () => {
+    //   const dispatch = useDispatch();
+    //   const orders = useSelector(getSubaccountOrders, shallowEqual) || [];
+    //   const ordersByOrderId = Object.fromEntries(orders.map((order) => [order.id, order]));
+
+    //   const fills = useSelector(getSubaccountFills, shallowEqual) || [];
+    //   const fillsByOrderId = groupBy(fills, (fill) => fill.orderId);
+
+    //   return (id) => {
+    //     if (ordersByOrderId[id]) {
+    //       dispatch(
+    //         openDialog({
+    //           type: DialogTypes.OrderDetails,
+    //           dialogProps: { orderId: id },
+    //         })
+    //       );
+    //     } else if (fillsByOrderId[id]) {
+    //       const fillId = fillsByOrderId[id][0].id;
+
+    //       dispatch(
+    //         openDialog({
+    //           type: DialogTypes.FillDetails,
+    //           dialogProps: { fillId },
+    //         })
+    //       );
+    //     }
+    //   };
+    // },
+  } as NotificationTypeConfig<string, [string, number]>,
   {
     type: NotificationType.SquidTransfer,
     useTrigger: ({ trigger }) => {
@@ -150,113 +127,81 @@ export const notificationTypes: NotificationTypeConfig[] = [
       const { transferNotifications } = useLocalNotifications();
       const { selectedNetwork } = useSelectedNetwork();
 
+      const getTitleStringKey = useCallback((type: 'deposit' | 'withdrawal', finished: boolean) => {
+        if (type === 'deposit' && !finished) return STRING_KEYS.DEPOSIT_IN_PROGRESS;
+        if (type === 'deposit' && finished) return STRING_KEYS.DEPOSIT;
+        if (type === 'withdrawal' && !finished) return STRING_KEYS.WITHDRAW_IN_PROGRESS;
+        return STRING_KEYS.WITHDRAW;
+      }, []);
+
       useEffect(() => {
         for (const transfer of transferNotifications) {
           const { fromChainId, status, txHash, toAmount } = transfer;
-          const isFinished = Boolean(status) && status?.squidTransactionStatus !== 'ongoing';
+          const finished = Boolean(status) && status?.squidTransactionStatus !== 'ongoing';
-          const icon = <Icon iconName={isFinished ? IconName.Transfer : IconName.Clock} />;
+          const type = fromChainId === ENVIRONMENT_CONFIG_MAP[selectedNetwork].dydxChainId ? 'withdrawal' : 'deposit';
+          // @ts-ignore status.errors is not in the type definition but can be returned
+          const error = status?.errors?.length ? status?.errors[0] : status?.error;
 
-          const type =
+          // TODO: confirm with design what the description should be
-            fromChainId === ENVIRONMENT_CONFIG_MAP[selectedNetwork].dydxChainId
+          const description = (
-              ? 'withdrawal'
+            <div>
-              : 'deposit';
+              <Styled.TransferText>
+                {type === 'deposit' ? 'Deposit of ' : 'Withdraw of '}
+                <Output type={OutputType.Fiat} value={toAmount} />
+              </Styled.TransferText>
 
-          const title = stringGetter({
+              {error && (
-            key: {
+                <Styled.ErrorMessage type={AlertType.Error}>
-              deposit: isFinished ? STRING_KEYS.DEPOSIT : STRING_KEYS.DEPOSIT_IN_PROGRESS,
+                  {stringGetter({
-              withdrawal: isFinished ? STRING_KEYS.WITHDRAW : STRING_KEYS.WITHDRAW_IN_PROGRESS,
+                    key: STRING_KEYS.SOMETHING_WENT_WRONG_WITH_MESSAGE,
-            }[type],
+                    params: {
-          });
+                      ERROR_MESSAGE:
-
+                        error.message || stringGetter({ key: STRING_KEYS.UNKNOWN_ERROR }),
-          const toChainEta = status?.toChain?.chainData?.estimatedRouteDuration || 0;
+                    },
-          const estimatedDuration = formatSeconds(Math.max(toChainEta, 0));
+                  })}
-          const body = stringGetter({
+                </Styled.ErrorMessage>
-            key: STRING_KEYS.DEPOSIT_STATUS,
+              )}
-            params: {
+            </div>
-              AMOUNT_USD: `${toAmount} ${DydxChainAsset.USDC.toUpperCase()}`,
+          );
-              ESTIMATED_DURATION: estimatedDuration,
-            },
-          });
 
           trigger(
             txHash,
             {
-              icon,
+              icon: <Icon iconName={finished ? IconName.Transfer : IconName.Clock} />,
-              title,
+              title: stringGetter({ key: getTitleStringKey(type, finished) }),
-              body,
+              description: description,
-              renderCustomBody: ({ isToast, notification }) => (
+              customContent: (
-                <TransferStatusNotification
+                <TransferStatusToast
-                  isToast={isToast}
-                  slotIcon={icon}
-                  slotTitle={title}
-                  transfer={transfer}
                   type={type}
+                  toAmount={transfer.toAmount}
                   triggeredAt={transfer.triggeredAt}
-                  notification={notification}
+                  status={transfer.status}
                 />
               ),
+              customMenuContent: !finished && (
+                <div>
+                  {description}
+                  <TransferStatusSteps status={transfer.status} type={type} />
+                </div>
+              ),
               toastSensitivity: 'foreground',
             },
-            [isFinished]
+            []
           );
         }
-      }, [transferNotifications, stringGetter]);
+      }, [transferNotifications]);
-    },
-    useNotificationAction: () => {
-      return () => {};
     },
   },
-  {
+] satisfies NotificationTypeConfig[];
-    type: NotificationType.ReleaseUpdates,
-    useTrigger: ({ trigger }) => {
-      const stringGetter = useStringGetter();
 
-      useEffect(() => {
+const Styled: Record<string, AnyStyledComponent> = {};
-        trigger(
-          'rewards-and-full-trading-live',
-          {
-            icon: <AssetIcon symbol="DYDX" />,
-            title: stringGetter({ key: 'NOTIFICATIONS.RELEASE_REWARDS_AND_FULL_TRADING.TITLE' }),
-            body: stringGetter({
-              key: 'NOTIFICATIONS.RELEASE_REWARDS_AND_FULL_TRADING.BODY',
-              params: {
-                DOS_BLOGPOST: (
-                  <$Link
-                    href="https://www.dydxopsdao.com/blog/deep-dive-full-trading"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    {stringGetter({ key: STRING_KEYS.HERE })}
-                  </$Link>
-                ),
-                TRADING_BLOGPOST: (
-                  <$Link
-                    href="https://dydx.exchange/blog/v4-full-trading"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    {stringGetter({ key: STRING_KEYS.HERE })}
-                  </$Link>
-                ),
-              },
-            }),
-            toastSensitivity: 'foreground',
-          },
-          []
-        );
-      }, [stringGetter]);
-    },
-    useNotificationAction: () => {
-      return () => {};
-    },
-  },
-];
 
-const $Icon = styled.img`
+Styled.TransferText = styled.span`
-  height: 1.5rem;
+  display: inline-flex;
-  width: 1.5rem;
+  align-items: center;
+  gap: 0.5ch;
 `;
 
-const $Link = styled.a`
+Styled.ErrorMessage = styled.div`
-  --link-color: var(--color-text-2);
+  max-width: 13rem;
 `;

src/hooks/useNotifications.tsx

@@ -1,13 +1,11 @@
 import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
 
-import { LOCAL_STORAGE_VERSIONS, LocalStorageKey } from '@/constants/localStorage';
+import { LocalStorageKey } from '@/constants/localStorage';
 import {
   type Notification,
   type NotificationDisplayData,
-  type NotificationPreferences,
   type Notifications,
   NotificationStatus,
-  NotificationType,
 } from '@/constants/notifications';
 
 import { useLocalStorage } from './useLocalStorage';
@@ -15,10 +13,8 @@ import { notificationTypes } from './useNotificationTypes';
 
 import { renderSvgToDataUrl } from '../lib/renderSvgToDataUrl';
 
-type NotificationsContextType = ReturnType<typeof useNotificationsContext>;
+const NotificationsContext = createContext<ReturnType<typeof useNotificationsContext> | undefined>(
-
+  undefined
-const NotificationsContext = createContext<NotificationsContextType>(
-  {} as NotificationsContextType
 );
 
 NotificationsContext.displayName = 'Notifications';
@@ -31,7 +27,6 @@ export const useNotifications = () => useContext(NotificationsContext)!;
 
 const useNotificationsContext = () => {
   // Local storage
-  // const [notifications, setNotifications] = useState<Notifications>({});
   const [notifications, setNotifications] = useLocalStorage<Notifications>({
     key: LocalStorageKey.Notifications,
     defaultValue: {},
@@ -42,25 +37,12 @@ const useNotificationsContext = () => {
     defaultValue: Date.now(),
   });
 
-  const [notificationPreferences, setNotificationPreferences] =
-    useLocalStorage<NotificationPreferences>({
-      key: LocalStorageKey.NotificationPreferences,
-      defaultValue: {
-        [NotificationType.AbacusGenerated]: true,
-        [NotificationType.SquidTransfer]: true,
-        version: LOCAL_STORAGE_VERSIONS[LocalStorageKey.NotificationPreferences],
-      },
-    });
-
   useEffect(() => {
     setNotificationsLastUpdated(Date.now());
   }, [notifications]);
 
-  const getKey = useCallback(
+  const getKey = <T extends string | number>(notification: Pick<Notification<T>, 'type' | 'id'>) =>
-    <T extends string | number>(notification: Pick<Notification<T>, 'type' | 'id'>) =>
+    `${notification.type}/${notification.id}`;
-      `${notification.type}/${notification.id}`,
-    []
-  );
 
   // Display data
   const [notificationsDisplayData, setNotificationsDisplayData] = useState(
@@ -72,47 +54,29 @@ const useNotificationsContext = () => {
     [notificationsDisplayData]
   );
 
-  // Check for version changes
-  useEffect(() => {
-    if (
-      notificationPreferences.version !==
-      LOCAL_STORAGE_VERSIONS[LocalStorageKey.NotificationPreferences]
-    ) {
-      setNotificationPreferences({
-        [NotificationType.AbacusGenerated]: true,
-        [NotificationType.SquidTransfer]: true,
-        [NotificationType.ReleaseUpdates]: true,
-        version: LOCAL_STORAGE_VERSIONS[LocalStorageKey.NotificationPreferences],
-      });
-    }
-  }, []);
-
   // Status changes
   const updateStatus = useCallback(
     (notification: Notification, status: NotificationStatus) => {
       notification.status = status;
       notification.timestamps[notification.status] = Date.now();
-      setNotifications({ ...notifications, [getKey(notification)]: notification });
+      setNotifications({ ...notifications });
     },
-    [notifications, getKey]
+    [notifications]
   );
 
   const { markUnseen, markSeen, markCleared } = useMemo(
     () => ({
       markUnseen: (notification: Notification) => {
-        if (notification.status < NotificationStatus.Unseen) {
+        if (notification.status < NotificationStatus.Unseen)
           updateStatus(notification, NotificationStatus.Unseen);
-        }
       },
       markSeen: (notification: Notification) => {
-        if (notification.status < NotificationStatus.Seen) {
+        if (notification.status < NotificationStatus.Seen)
           updateStatus(notification, NotificationStatus.Seen);
-        }
       },
       markCleared: (notification: Notification) => {
-        if (notification.status < NotificationStatus.Cleared) {
+        if (notification.status < NotificationStatus.Cleared)
           updateStatus(notification, NotificationStatus.Cleared);
-        }
       },
     }),
     [updateStatus]
@@ -133,37 +97,33 @@ const useNotificationsContext = () => {
 
           const notification = notifications[key];
 
-          // Filter out notifications that are not enabled
+          // New unique key - create new notification
-          if (notificationPreferences[type] !== false) {
+          if (!notification) {
-            // New unique key - create new notification
+            const notification = (notifications[key] = {
-            if (!notification) {
+              id,
-              const notification = (notifications[key] = {
+              type,
-                id,
+              timestamps: {},
-                type,
+              updateKey,
-                timestamps: {},
+            } as Notification);
-                updateKey,
-              } as Notification);
-              updateStatus(
-                notification,
-                isNew ? NotificationStatus.Triggered : NotificationStatus.Cleared
-              );
-            } else if (JSON.stringify(updateKey) !== JSON.stringify(notification.updateKey)) {
-              // updateKey changed - update existing notification
 
-              const notification = notifications[key];
+            updateStatus(
+              notification,
+              isNew ? NotificationStatus.Triggered : NotificationStatus.Cleared
+            );
+          }
 
-              notification.updateKey = updateKey;
+          // updateKey changed - update existing notification
-              updateStatus(notification, NotificationStatus.Updated);
+          else if (JSON.stringify(updateKey) !== JSON.stringify(notification.updateKey)) {
-            }
+            const notification = notifications[key];
-          } else {
+
-            // Notification is disabled - remove it
+            notification.updateKey = updateKey;
-            delete notifications[key];
+            updateStatus(notification, NotificationStatus.Updated);
           }
 
           notificationsDisplayData[key] = displayData;
           setNotificationsDisplayData({ ...notificationsDisplayData });
         },
-        [notifications, updateStatus, notificationPreferences[type]]
+        [notifications, updateStatus]
       ),
 
       lastUpdated: notificationsLastUpdated,
@@ -176,8 +136,10 @@ const useNotificationsContext = () => {
     )
   );
 
-  const onNotificationAction = async (notification: Notification) =>
+  const onNotificationAction = useCallback(
-    await actions[notification.type]?.(notification.id);
+    async (notification: Notification) => await actions[notification.type]?.(notification.id),
+    [actions]
+  );
 
   // Push notifications
   const [hasEnabledPush, setHasEnabledPush] = useLocalStorage({
@@ -224,7 +186,7 @@ const useNotificationsContext = () => {
             renotify: true,
             tag: getKey(notification),
             data: notification,
-            description: displayData.body,
+            body: displayData.description,
             icon: iconUrl ?? '/favicon.svg',
             badge: iconUrl ?? '/favicon.svg',
             image: iconUrl ?? '/favicon.svg',
@@ -246,7 +208,7 @@ const useNotificationsContext = () => {
 
       setPushNotificationsLastUpdated(Date.now());
     })();
-  }, [hasEnabledPush, notifications, markSeen]);
+  }, [hasEnabledPush, notifications, onNotificationAction, markSeen]);
 
   // Menu state
   const [isMenuOpen, setIsMenuOpen] = useState(false);
@@ -277,13 +239,5 @@ const useNotificationsContext = () => {
     // Menu state
     isMenuOpen,
     setIsMenuOpen,
-
-    // Notification Preferences
-    notificationPreferences,
-    setNotificationPreferences,
-    getNotificationPreferenceForType: useCallback(
-      (type: NotificationType) => notificationPreferences[type],
-      [notificationPreferences]
-    ),
   };
 };

src/hooks/useSquid.tsx

@@ -0,0 +1,50 @@
+import { createContext, useContext, useEffect, useMemo, useState } from 'react';
+import { useSelector } from 'react-redux';
+import { Squid } from '@0xsquid/sdk';
+
+import { ENVIRONMENT_CONFIG_MAP } from '@/constants/networks';
+
+import { getSelectedNetwork } from '@/state/appSelectors';
+
+export const NATIVE_TOKEN_ADDRESS = '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE';
+
+export const STATUS_ERROR_GRACE_PERIOD = 300_000;
+
+const useSquidContext = () => {
+  const selectedNetwork = useSelector(getSelectedNetwork);
+  const [_, setInitialized] = useState(false);
+
+  const initializeClient = async () => {
+    setInitialized(false);
+    if (!squid) return;
+    await squid.init();
+    setInitialized(true);
+  };
+
+  const squid = useMemo(
+    () =>
+      new Squid({
+        baseUrl: ENVIRONMENT_CONFIG_MAP[selectedNetwork]?.endpoints['0xsquid'],
+        integratorId: ENVIRONMENT_CONFIG_MAP[selectedNetwork]?.squidIntegratorId,
+      }),
+    [selectedNetwork]
+  );
+
+  useEffect(() => {
+    if (squid) {
+      initializeClient();
+    }
+  }, [squid]);
+
+  return squid;
+};
+
+type SquidContextType = ReturnType<typeof useSquidContext>;
+const SquidContext = createContext<SquidContextType | undefined>(undefined);
+SquidContext.displayName = '0xSquid';
+
+export const SquidProvider = ({ ...props }) => (
+  <SquidContext.Provider value={useSquidContext()} {...props} />
+);
+
+export const useSquid = () => useContext(SquidContext);

src/hooks/useTestFlags.tsx

@@ -0,0 +1,46 @@
+import { createContext, useContext, useEffect, useState } from 'react';
+import { useLocation } from 'react-router-dom';
+import queryString from 'query-string';
+
+class TestFlags {
+  public queryParams: queryString.ParsedQuery<string>;
+
+  constructor() {
+    this.queryParams = {};
+  }
+
+  setQueryParams(flags: queryString.ParsedQuery<string>) {
+    this.queryParams = flags;
+  }
+
+  get displayInitializingMarkets() {
+    return !!this.queryParams.displayInitializingMarkets;
+  }
+}
+
+export const testFlags = new TestFlags();
+
+const useTestFlagsContext = () => {
+  const [queryParams, setQueryParams] = useState<queryString.ParsedQuery<string>>({});
+  const location = useLocation();
+
+  useEffect(() => {
+    const parsedQueryParams = queryString.parse(location.search.substring(-1));
+    testFlags.setQueryParams(parsedQueryParams);
+    setQueryParams(parsedQueryParams);
+  }, []);
+
+  return {
+    ...queryParams,
+  };
+};
+
+type TestFlagsContextType = ReturnType<typeof useTestFlagsContext>;
+const TestFlagsContext = createContext<TestFlagsContextType>({} as TestFlagsContextType);
+TestFlagsContext.displayName = 'TestFlags';
+
+export const TestFlagsProvider = ({ ...props }) => (
+  <TestFlagsContext.Provider value={useTestFlagsContext()} {...props} />
+);
+
+export const useTestFlags = () => useContext(TestFlagsContext);

src/hooks/useTradeFormInputs.ts

@@ -1,30 +0,0 @@
-import { getTradeFormInputs } from '@/state/inputsSelectors';
-import { useEffect } from 'react';
-import { shallowEqual, useSelector } from 'react-redux';
-
-import { TradeInputField } from '@/constants/abacus';
-
-import abacusStateManager from '@/lib/abacus';
-
-export const useTradeFormInputs = () => {
-  const tradeFormInputValues = useSelector(getTradeFormInputs, shallowEqual);
-  const { limitPriceInput, triggerPriceInput, trailingPercentInput } = tradeFormInputValues;
-
-  useEffect(() => {
-    abacusStateManager.setTradeValue({
-      value: triggerPriceInput,
-      field: TradeInputField.triggerPrice,
-    });
-  }, [triggerPriceInput]);
-
-  useEffect(() => {
-    abacusStateManager.setTradeValue({ value: limitPriceInput, field: TradeInputField.limitPrice });
-  }, [limitPriceInput]);
-
-  useEffect(() => {
-    abacusStateManager.setTradeValue({
-      value: trailingPercentInput,
-      field: TradeInputField.trailingPercent,
-    });
-  }, [trailingPercentInput]);
-};

src/icons/check-circle.svg

@@ -1,6 +0,0 @@
-<svg width="27" height="28" viewBox="0 0 27 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="Frame">
-<path id="Vector" d="M9.5 15L12.5 18L17.5 11M25.5 14C25.5 15.5759 25.1896 17.1363 24.5866 18.5922C23.9835 20.0481 23.0996 21.371 21.9853 22.4853C20.871 23.5996 19.5481 24.4835 18.0922 25.0866C16.6363 25.6896 15.0759 26 13.5 26C11.9241 26 10.3637 25.6896 8.9078 25.0866C7.45189 24.4835 6.12902 23.5996 5.01472 22.4853C3.90042 21.371 3.0165 20.0481 2.41345 18.5922C1.81039 17.1363 1.5 15.5759 1.5 14C1.5 10.8174 2.76428 7.76516 5.01472 5.51472C7.26516 3.26428 10.3174 2 13.5 2C16.6826 2 19.7348 3.26428 21.9853 5.51472C24.2357 7.76516 25.5 10.8174 25.5 14Z" stroke="#3ED9A4" stroke-opacity="0.5" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
-<path id="Vector_2" d="M9.5 15L12.5 18L17.5 11" stroke="#3ED9A4" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
-</g>
-</svg>

src/icons/check.svg

@@ -1,4 +1,4 @@
 <svg width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M2 6.39098L5.68182 10L11 2" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+  <path d="M2 6.39098L5.68182 10L11 2" stroke="currentColor" stroke-width="3" stroke-linecap="round"
     stroke-linejoin="round" />
 </svg>

src/icons/index.ts

@@ -10,7 +10,6 @@ export { default as CautionCircleIcon } from './caution-circle.svg';
 export { default as CautionCircleStrokeIcon } from './caution-circle-stroke.svg';
 export { default as ChatIcon } from './chat-bubble.svg';
 export { default as CheckIcon } from './check.svg';
-export { default as CheckCircleIcon } from './check-circle.svg';
 export { default as ChevronLeftIcon } from './chevron-left.svg';
 export { default as ChevronRightIcon } from './chevron-right.svg';
 export { default as ClockIcon } from './clock.svg';
@@ -32,7 +31,6 @@ export { default as GiftboxIcon } from './giftbox.svg';
 export { default as HelpCircleIcon } from './help-circle.svg';
 export { default as HideIcon } from './hide.svg';
 export { default as HistoryIcon } from './history.svg';
-export { default as LeaderboardIcon } from './leaderboard.svg';
 export { default as LinkOutIcon } from './link-out.svg';
 export { default as LockIcon } from './lock.svg';
 export { default as LogoShortIcon } from './logo-short';

src/icons/leaderboard.svg

@@ -1,3 +0,0 @@
-<svg width="13" height="14" viewBox="0 0 13 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0.0996094 2.60156C0.0996094 2.07113 0.310323 1.56242 0.685396 1.18735C1.06047 0.812276 1.56918 0.601563 2.09961 0.601562H10.8996C11.43 0.601563 11.9387 0.812276 12.3138 1.18735C12.6889 1.56242 12.8996 2.07113 12.8996 2.60156C12.8996 3.132 12.6889 3.6407 12.3138 4.01578C11.9387 4.39085 11.43 4.60156 10.8996 4.60156H2.09961C1.56918 4.60156 1.06047 4.39085 0.685396 4.01578C0.310323 3.6407 0.0996094 3.132 0.0996094 2.60156ZM0.699609 6.26796C0.540479 6.26796 0.387867 6.33118 0.275345 6.4437C0.162823 6.55622 0.0996094 6.70883 0.0996094 6.86796C0.0996094 7.02709 0.162823 7.1797 0.275345 7.29223C0.387867 7.40475 0.540479 7.46796 0.699609 7.46796H12.2996C12.4587 7.46796 12.6114 7.40475 12.7239 7.29223C12.8364 7.1797 12.8996 7.02709 12.8996 6.86796C12.8996 6.70883 12.8364 6.55622 12.7239 6.4437C12.6114 6.33118 12.4587 6.26796 12.2996 6.26796H0.699609ZM0.699609 9.13196C0.540479 9.13196 0.387867 9.19518 0.275345 9.3077C0.162823 9.42022 0.0996094 9.57283 0.0996094 9.73196C0.0996094 9.89109 0.162823 10.0437 0.275345 10.1562C0.387867 10.2687 0.540479 10.332 0.699609 10.332H12.2996C12.4587 10.332 12.6114 10.2687 12.7239 10.1562C12.8364 10.0437 12.8996 9.89109 12.8996 9.73196C12.8996 9.57283 12.8364 9.42022 12.7239 9.3077C12.6114 9.19518 12.4587 9.13196 12.2996 9.13196H0.699609ZM0.699609 12.0016C0.540479 12.0016 0.387867 12.0648 0.275345 12.1773C0.162823 12.2898 0.0996094 12.4424 0.0996094 12.6016C0.0996094 12.7607 0.162823 12.9133 0.275345 13.0258C0.387867 13.1383 0.540479 13.2016 0.699609 13.2016H12.2996C12.4587 13.2016 12.6114 13.1383 12.7239 13.0258C12.8364 12.9133 12.8996 12.7607 12.8996 12.6016C12.8996 12.4424 12.8364 12.2898 12.7239 12.1773C12.6114 12.0648 12.4587 12.0016 12.2996 12.0016H0.699609Z" fill="currentColor"/>
-</svg>

src/icons/wallets/generic-wallet.svg

@@ -1,13 +1,5 @@
-<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-<g id="Wallet" clip-path="url(#clip0_14122_34311)">
+  <g fill="#FFFFFF">
-<g id="Group 151">
+    <path d="M461.2 128H80c-8.84 0-16-7.16-16-16s7.16-16 16-16h384c8.84 0 16-7.16 16-16 0-26.51-21.49-48-48-48H64C28.65 32 0 60.65 0 96v320c0 35.35 28.65 64 64 64h397.2c28.02 0 50.8-21.53 50.8-48V176c0-26.47-22.78-48-50.8-48zM416 336c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32 32z"/>
-<path id="Exclude" fill-rule="evenodd" clip-rule="evenodd" d="M11.4979 10.9976C11.1764 11.3193 10.7404 11.5 10.2857 11.5L1.71429 11.5C1.25963 11.5 0.823594 11.3193 0.502102 10.9976C0.180612 10.6758 -4.76837e-07 10.2395 -4.76837e-07 9.78455L-4.76837e-07 2.06502C-4.76837e-07 2.51999 0.180612 2.95632 0.502102 3.27803C0.823594 3.59974 1.25963 3.78047 1.71429 3.78047L10.2857 3.78047C10.7404 3.78047 11.1764 3.96121 11.4979 4.28292C11.8194 4.60462 12 5.04096 12 5.49592V9.78455C12 10.2395 11.8194 10.6758 11.4979 10.9976ZM9.64294 8.7126C10.2347 8.7126 10.7144 8.23258 10.7144 7.64044C10.7144 7.0483 10.2347 6.56828 9.64294 6.56828C9.05121 6.56828 8.57151 7.0483 8.57151 7.64044C8.57151 8.23258 9.05121 8.7126 9.64294 8.7126Z" fill="#C8C7D8"/>
+  </g>
-<path id="Vector" d="M8.57031 2.92186V2.06413C8.57031 1.60917 8.3897 1.17284 8.06821 0.851128C7.74672 0.529419 7.31068 0.348684 6.85603 0.348684L2.14174 0.348684C1.80075 0.348684 1.47372 0.484235 1.2326 0.725517C0.991486 0.966799 0.856028 1.29405 0.856028 1.63527C0.856028 1.9765 0.991486 2.30374 1.2326 2.54503C1.47372 2.78631 1.80075 2.92186 2.14174 2.92186L8.57031 2.92186Z" fill="#C8C7D8"/>
-</g>
-</g>
-<defs>
-<clipPath id="clip0_14122_34311">
-<rect width="12" height="12" fill="white"/>
-</clipPath>
-</defs>
 </svg>

src/layout/DialogManager.tsx

@@ -11,19 +11,17 @@ import { DepositDialog } from '@/views/dialogs/DepositDialog';
 import { DisconnectDialog } from '@/views/dialogs/DisconnectDialog';
 import { ExchangeOfflineDialog } from '@/views/dialogs/ExchangeOfflineDialog';
 import { HelpDialog } from '@/views/dialogs/HelpDialog';
-import { ExternalLinkDialog } from '@/views/dialogs/ExternalLinkDialog';
 import { ExternalNavKeplrDialog } from '@/views/dialogs/ExternalNavKeplrDialog';
 import { MnemonicExportDialog } from '@/views/dialogs/MnemonicExportDialog';
 import { MobileSignInDialog } from '@/views/dialogs/MobileSignInDialog';
 import { OnboardingDialog } from '@/views/dialogs/OnboardingDialog';
-import { PreferencesDialog } from '@/views/dialogs/PreferencesDialog';
 import { RateLimitDialog } from '@/views/dialogs/RateLimitDialog';
+import { ReceiveDialog } from '@/views/dialogs/ReceiveDialog';
 import { RestrictedGeoDialog } from '@/views/dialogs/RestrictedGeoDialog';
 import { TradeDialog } from '@/views/dialogs/TradeDialog';
 import { TransferDialog } from '@/views/dialogs/TransferDialog';
 import { RestrictedWalletDialog } from '@/views/dialogs/RestrictedWalletDialog';
 import { WithdrawDialog } from '@/views/dialogs/WithdrawDialog';
-import { ManageFundsDialog } from '@/views/dialogs/ManageFundsDialog';
 
 import { OrderDetailsDialog } from '@/views/dialogs/DetailsDialog/OrderDetailsDialog';
 import { FillDetailsDialog } from '@/views/dialogs/DetailsDialog/FillDetailsDialog';
@@ -54,18 +52,16 @@ export const DialogManager = () => {
     [DialogTypes.FillDetails]: <FillDetailsDialog {...modalProps} />,
     [DialogTypes.Help]: <HelpDialog {...modalProps} />,
     [DialogTypes.ExternalNavKeplr]: <ExternalNavKeplrDialog {...modalProps} />,
-    [DialogTypes.ExternalLink]: <ExternalLinkDialog {...modalProps} />,
     [DialogTypes.MnemonicExport]: <MnemonicExportDialog {...modalProps} />,
     [DialogTypes.MobileSignIn]: <MobileSignInDialog {...modalProps} />,
     [DialogTypes.Onboarding]: <OnboardingDialog {...modalProps} />,
     [DialogTypes.OrderDetails]: <OrderDetailsDialog {...modalProps} />,
-    [DialogTypes.Preferences]: <PreferencesDialog {...modalProps} />,
     [DialogTypes.RateLimit]: <RateLimitDialog {...modalProps} />,
+    [DialogTypes.Receive]: <ReceiveDialog {...modalProps} />,
     [DialogTypes.RestrictedGeo]: <RestrictedGeoDialog {...modalProps} />,
     [DialogTypes.RestrictedWallet]: <RestrictedWalletDialog {...modalProps} />,
     [DialogTypes.Trade]: <TradeDialog {...modalProps} />,
     [DialogTypes.Transfer]: <TransferDialog {...modalProps} />,
     [DialogTypes.Withdraw]: <WithdrawDialog {...modalProps} />,
-    [DialogTypes.ManageFunds]: <ManageFundsDialog {...modalProps} />,
   }[type];
 };

src/layout/Footer/FooterDesktop.tsx

@@ -1,7 +1,7 @@
 import styled, { type AnyStyledComponent, css } from 'styled-components';
 
 import { AbacusApiStatus } from '@/constants/abacus';
-import { ButtonSize, ButtonType } from '@/constants/buttons';
+import { ButtonSize } from '@/constants/buttons';
 import { STRING_KEYS } from '@/constants/localization';
 import { ENVIRONMENT_CONFIG_MAP, isDev } from '@/constants/networks';
 
@@ -55,12 +55,10 @@ export const FooterDesktop = () => {
           }
         >
           <Styled.FooterButton
-            type={statusPage ? ButtonType.Link : ButtonType.Button}
             slotLeft={<Styled.StatusDot exchangeStatus={exchangeStatus} />}
             slotRight={statusPage && <LinkOutIcon />}
             size={ButtonSize.XSmall}
             state={{ isDisabled: !statusPage }}
-            href={statusPage}
           >
             {label}
           </Styled.FooterButton>
@@ -134,7 +132,7 @@ Styled.StatusDot = styled.div<{ exchangeStatus: ExchangeStatus }>`
 Styled.FooterButton = styled(Button)`
   --button-height: 1.5rem;
   --button-radius: 0.25rem;
-  --button-backgroundColor: transparent;
+  --button-backgroundColor: var(--color-layer-2);
   --button-border: none;
   --button-textColor: var(--color-text-0);
 

src/layout/Footer/FooterMobile.tsx

@@ -1,6 +1,7 @@
 import styled, { type AnyStyledComponent } from 'styled-components';
 import { useDispatch, useSelector } from 'react-redux';
 
+import { ButtonAction, ButtonSize } from '@/constants/buttons';
 import { DialogTypes } from '@/constants/dialogs';
 import { STRING_KEYS } from '@/constants/localization';
 import { DEFAULT_MARKETID } from '@/constants/markets';
@@ -10,8 +11,8 @@ import { useShouldShowFooter, useStringGetter } from '@/hooks';
 import { layoutMixins } from '@/styles/layoutMixins';
 
 import { NavigationMenu } from '@/components/NavigationMenu';
-import { Icon, IconName } from '@/components/Icon';
+import { Icon } from '@/components/Icon';
-import { BellIcon, MarketsIcon, PortfolioIcon, ProfileIcon } from '@/icons';
+import { BellIcon, MarketsIcon, PlayIcon, PortfolioIcon, ProfileIcon, TradeIcon } from '@/icons';
 import { IconButton } from '@/components/IconButton';
 
 import { calculateCanAccountTrade } from '@/state/accountCalculators';
@@ -41,9 +42,11 @@ export const FooterMobile = () => {
                     value: 'trade',
                     label: stringGetter({ key: STRING_KEYS.TRADE }),
                     slotBefore: (
-                      <Styled.StartIcon>
+                      <Styled.IconButton
-                        <Icon iconName={IconName.Trade} />
+                        iconComponent={TradeIcon}
-                      </Styled.StartIcon>
+                        size={ButtonSize.Large}
+                        action={ButtonAction.Primary}
+                      />
                     ),
                     href: `${AppRoute.Trade}/${marketId ?? DEFAULT_MARKETID}`,
                   }
@@ -51,9 +54,11 @@ export const FooterMobile = () => {
                     value: 'onboarding',
                     label: stringGetter({ key: STRING_KEYS.ONBOARDING }),
                     slotBefore: (
-                      <Styled.StartIcon>
+                      <Styled.IconButton
-                        <Icon iconName={IconName.Play} />
+                        iconComponent={PlayIcon}
-                      </Styled.StartIcon>
+                        size={ButtonSize.Large}
+                        action={ButtonAction.Primary}
+                      />
                     ),
                     onClick: () => dispatch(openDialog({ type: DialogTypes.Onboarding })),
                   },
@@ -163,24 +168,3 @@ Styled.IconButton = styled(IconButton)`
 Styled.Icon = styled(Icon)`
   font-size: 1.5rem;
 `;
-
-Styled.StartIcon = styled.div`
-  display: inline-flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  margin-top: -0.25rem;
-
-  width: 3.5rem;
-  height: 3.5rem;
-
-  color: var(--color-text-2);
-  background-color: var(--color-accent);
-  border: solid var(--border-width) var(--color-border-white);
-  border-radius: 50%;
-
-  svg {
-    width: 1.5rem;
-    height: 1.5rem;
-  }
-`;

src/layout/Header/HeaderDesktop.tsx

@@ -1,6 +1,6 @@
 import styled, { type AnyStyledComponent } from 'styled-components';
 import { Link } from 'react-router-dom';
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
 
 import { ButtonShape } from '@/constants/buttons';
 import { DialogTypes } from '@/constants/dialogs';
@@ -8,10 +8,6 @@ import { STRING_KEYS } from '@/constants/localization';
 import { AppRoute } from '@/constants/routes';
 import { LogoShortIcon, BellStrokeIcon } from '@/icons';
 
-import { headerMixins } from '@/styles/headerMixins';
-import { layoutMixins } from '@/styles/layoutMixins';
-import breakpoints from '@/styles/breakpoints';
-
 import { useTokenConfigs, useStringGetter, useURLConfigs } from '@/hooks';
 
 import { Icon, IconName } from '@/components/Icon';
@@ -25,7 +21,10 @@ import { NotificationsMenu } from '@/views/menus/NotificationsMenu';
 import { LanguageSelector } from '@/views/menus/LanguageSelector';
 
 import { openDialog } from '@/state/dialogs';
-import { getHasSeenLaunchIncentives } from '@/state/configsSelectors';
+
+import { headerMixins } from '@/styles/headerMixins';
+import { layoutMixins } from '@/styles/layoutMixins';
+import breakpoints from '@/styles/breakpoints';
 
 export const HeaderDesktop = () => {
   const stringGetter = useStringGetter();
@@ -33,8 +32,6 @@ export const HeaderDesktop = () => {
   const dispatch = useDispatch();
   const { chainTokenLabel } = useTokenConfigs();
 
-  const hasSeenLaunchIncentives = useSelector(getHasSeenLaunchIncentives);
-
   const navItems = [
     {
       group: 'navigation',
@@ -58,7 +55,6 @@ export const HeaderDesktop = () => {
           value: chainTokenLabel,
           label: chainTokenLabel,
           href: `/${chainTokenLabel}`,
-          slotAfter: !hasSeenLaunchIncentives && <Styled.UnreadIndicator />,
         },
         {
           value: 'MORE',
@@ -242,10 +238,3 @@ Styled.IconButton = styled(IconButton)<{ size?: string }>`
   --button-icon-size: 1rem;
   --button-padding: 0 0.5em;
 `;
-
-Styled.UnreadIndicator = styled.div`
-  width: 0.4375rem;
-  height: 0.4375rem;
-  border-radius: 50%;
-  background-color: var(--color-accent);
-`;

src/layout/NotificationsToastArea.tsx

@@ -1,27 +1,20 @@
-import { useMemo, useState } from 'react';
-import styled, { css } from 'styled-components';
-
 import { NotificationStatus } from '@/constants/notifications';
-import { ButtonShape, ButtonSize } from '@/constants/buttons';
+import { ButtonSize } from '@/constants/buttons';
+
 import { useNotifications } from '@/hooks/useNotifications';
 import { useBreakpoints } from '@/hooks/useBreakpoints';
-import { ChevronLeftIcon } from '@/icons';
-import { breakpoints } from '@/styles';
 
-import { Button } from '@/components/Button';
-import { Toast } from '@/components/Toast';
 import { ToastArea } from '@/components/ToastArea';
-import { ToggleButton } from '@/components/ToggleButton';
+import { Toast } from '@/components/Toast';
+import { Button } from '@/components/Button';
+
+import styled from 'styled-components';
 
 type StyleProps = {
   className?: string;
 };
 
-const MAX_TOASTS = 10;
-
 export const NotificationsToastArea = ({ className }: StyleProps) => {
-  const [shouldStackNotifications, setshouldStackNotifications] = useState(true);
-
   const {
     notifications,
     getKey,
@@ -33,9 +26,10 @@ export const NotificationsToastArea = ({ className }: StyleProps) => {
   } = useNotifications();
 
   const { isMobile } = useBreakpoints();
-  const notificationMap = useMemo(() => {
+
-    return (
+  return (
-      Object.values(notifications)
+    <StyledToastArea swipeDirection={isMobile ? 'up' : 'right'} className={className}>
+      {Object.values(notifications)
         // Sort by time of first trigger
         .sort(
           (n1, n2) =>
@@ -47,129 +41,45 @@ export const NotificationsToastArea = ({ className }: StyleProps) => {
           key: getKey(notification),
           displayData: getDisplayData(notification),
         }))
-        .filter(
+        .filter(({ displayData }) => displayData)
-          ({ displayData, notification }) =>
+        .map(({ notification, key, displayData }) => (
-            displayData && notification.status < NotificationStatus.Unseen
+          <Toast
-        )
+            key={key}
-        .slice(-MAX_TOASTS)
+            isOpen={notification.status < NotificationStatus.Unseen}
-    );
+            slotIcon={displayData.icon}
-  }, [notifications, getKey, getDisplayData]);
+            slotTitle={displayData.title}
-
+            slotDescription={displayData.description}
-  if (isMenuOpen) return null;
+            slotCustomContent={displayData.customContent}
-
+            slotAction={
-  const hasMultipleToasts = notificationMap.length > 1;
+              <Button size={ButtonSize.Small} onClick={() => onNotificationAction(notification)}>
-
+                {displayData.actionDescription}
-  return (
+              </Button>
-    <StyledToastArea swipeDirection={isMobile ? 'up' : 'right'} className={className}>
+            }
-      {hasMultipleToasts && (
+            actionDescription={displayData.actionDescription}
-        <StyledToggleButton
+            actionAltText={displayData.actionAltText}
-          shape={ButtonShape.Pill}
+            duration={isMenuOpen ? Infinity : displayData.toastDuration}
-          size={ButtonSize.XSmall}
+            sensitivity={displayData.toastSensitivity}
-          isPressed={shouldStackNotifications}
+            setIsOpen={(isOpen, isClosedFromTimeout) => {
-          onPressedChange={() => setshouldStackNotifications(!shouldStackNotifications)}
+              if (!isOpen)
-        >
+                if (isClosedFromTimeout)
-          <ChevronLeftIcon />
+                  // Toast timer expired without user interaction
-        </StyledToggleButton>
+                  markUnseen(notification);
-      )}
+                // Toast interacted with or dismissed
-
+                else markSeen(notification);
-      {notificationMap.map(({ notification, key, displayData }, idx) => (
+            }}
-        <StyledToast
+            lastUpdated={notification.timestamps[notification.status]}
-          key={key}
+          />
-          isStacked={shouldStackNotifications}
+        ))}
-          isOpen={notification.status < NotificationStatus.Unseen}
-          layer={notificationMap.length - 1 - idx}
-          notification={notification}
-          slotIcon={displayData.icon}
-          slotTitle={displayData.title}
-          slotTitleLeft={displayData.slotTitleLeft}
-          slotTitleRight={displayData.slotTitleRight}
-          slotDescription={displayData.body}
-          slotCustomContent={displayData.renderCustomBody?.({ isToast: true, notification })}
-          onClick={() => onNotificationAction(notification)}
-          slotAction={
-            <Button size={ButtonSize.Small} onClick={() => onNotificationAction(notification)}>
-              {displayData.actionDescription}
-            </Button>
-          }
-          actionDescription={displayData.actionDescription}
-          actionAltText={displayData.actionAltText}
-          duration={displayData.toastDuration ?? Infinity}
-          sensitivity={displayData.toastSensitivity}
-          setIsOpen={(isOpen: boolean, isClosedFromTimeout?: boolean) => {
-            if (!isOpen)
-              if (isClosedFromTimeout)
-                // Toast timer expired without user interaction
-                markUnseen(notification);
-              // Toast interacted with or dismissed
-              else markSeen(notification);
-          }}
-          lastUpdated={notification.timestamps[notification.status]}
-        />
-      ))}
     </StyledToastArea>
   );
 };
 
 const StyledToastArea = styled(ToastArea)`
   position: absolute;
-  width: min(17.5rem, 100%);
+  width: min(16rem, 100%);
   inset: 0 0 0 auto;
 
   padding: 0.75rem 0.75rem 0.75rem 0;
 
   mask-image: linear-gradient(to left, transparent, white 0.5rem);
-
-  @media ${breakpoints.mobile} {
-    width: 100%;
-    position: fixed;
-  }
-`;
-
-const StyledToast = styled(Toast)<{ isStacked?: boolean; layer: number }>`
-  // Stacked toast
-  ${({ isStacked, layer }) =>
-    isStacked
-      ? css`
-          position: absolute;
-          left: 0;
-          top: calc(${layer} * 2px);
-          right: calc(${layer} * -2px);
-        `
-      : css`
-          margin-bottom: 0.75rem;
-        `}
-`;
-
-const StyledToggleButton = styled(ToggleButton)<{ isPressed: boolean }>`
-  z-index: 2;
-  pointer-events: auto;
-  display: none;
-  position: absolute;
-  top: 4px;
-  left: calc(50% - 0.75rem);
-  --button-width: 2rem;
-  --button-height: 1rem;
-
-  ${StyledToastArea}:hover & {
-    display: flex;
-  }
-
-  > svg {
-    width: 4px;
-    margin-top: 1px;
-    transform: rotate(-90deg);
-
-    ${({ isPressed }) =>
-      !isPressed &&
-      css`
-        transform: rotate(90deg);
-      `}
-  }
-
-  @media ${breakpoints.mobile} {
-    display: flex;
-    left: calc(50% - 2rem);
-    --button-width: 4rem;
-    --button-height: 2rem;
-  }
 `;

src/lib/abacus/dydxChainTransactions.ts

@@ -1,7 +1,6 @@
 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 {
   CompositeClient,
@@ -9,7 +8,6 @@ import {
   type LocalWallet,
   Network,
   NetworkOptimizer,
-  NobleClient,
   SubaccountClient,
   ValidatorConfig,
   OrderType,
@@ -44,10 +42,8 @@ import { log } from '../telemetry';
 
 class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
   private compositeClient: CompositeClient | undefined;
-  private nobleClient: NobleClient | undefined;
   private store: RootStore | undefined;
   private localWallet: LocalWallet | undefined;
-  private nobleWallet: LocalWallet | undefined;
 
   constructor() {
     this.compositeClient = undefined;
@@ -62,13 +58,6 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
     this.localWallet = localWallet;
   }
 
-  setNobleWallet(nobleWallet: LocalWallet) {
-    this.nobleWallet = nobleWallet;
-    if (this.nobleClient) {
-      this.nobleClient.connect(nobleWallet);
-    }
-  }
-
   async connectNetwork(
     paramsInJson: Nullable<string>,
     callback: (p0: Nullable<string>) => void
@@ -80,7 +69,6 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
         websocketUrl,
         validatorUrl,
         chainId,
-        nobleValidatorUrl,
         USDC_DENOM,
         USDC_DECIMALS,
         USDC_GAS_DENOM,
@@ -112,10 +100,6 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
 
       this.compositeClient = compositeClient;
 
-      if (nobleValidatorUrl) {
-        this.nobleClient = new NobleClient(nobleValidatorUrl);
-        if (this.nobleWallet) await this.nobleClient.connect(this.nobleWallet);
-      }
       // Dispatch custom event to notify other parts of the app that the network has been connected
       const customEvent = new CustomEvent('abacus:connectNetwork', {
         detail: parsedParams,
@@ -211,9 +195,8 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
         throw new StatefulOrderError('Stateful order has failed to commit.', tx);
       }
 
-      const encodedTx = encodeJson(tx);
+      const parsedTx = this.parseToPrimitives(tx);
-      const parsedTx = JSON.parse(encodedTx);
+      const hash = parsedTx?.hash;
-      const hash = parsedTx.hash.toUpperCase();
 
       if (isTestnet) {
         console.log(
@@ -223,7 +206,7 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
         );
       } else console.log(`txHash: ${hash}`);
 
-      return encodedTx;
+      return JSON.stringify(parsedTx);
     } catch (error) {
       if (error?.name !== 'BroadcastError') {
         log('DydxChainTransactions/placeOrderTransaction', error);
@@ -253,14 +236,9 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
         goodTilBlockTime || undefined
       );
 
-      const encodedTx = encodeJson(tx);
+      const parsedTx = this.parseToPrimitives(tx);
 
-      if (import.meta.env.MODE === 'development') {
+      return JSON.stringify(parsedTx);
-        const parsedTx = JSON.parse(encodedTx);
-        console.log(parsedTx, parsedTx.hash.toUpperCase());
-      }
-
-      return encodedTx;
     } catch (error) {
       log('DydxChainTransactions/cancelOrderTransaction', error);
 
@@ -340,46 +318,6 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
     }
   }
 
-  async sendNobleIBC(
-    params: {
-      msgTypeUrl: string,
-      msg: any,
-    }
-  ): Promise<string> {
-    if (!this.nobleClient?.isConnected) {
-      throw new Error('Missing nobleClient or localWallet');
-    }
-
-    try {
-      const ibcMsg = {
-        typeUrl: params.msgTypeUrl, // '/ibc.applications.transfer.v1.MsgTransfer',
-        value: params.msg,
-      };
-      const fee = await this.nobleClient.simulateTransaction([ibcMsg]);
-  
-      // take out fee from amount before sweeping
-      const amount = parseInt(ibcMsg.value.token.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.token.amount = amount.toString();
-      const tx = await this.nobleClient.send([ibcMsg]);
-
-      const parsedTx = this.parseToPrimitives(tx);
-
-      return JSON.stringify(parsedTx);
-    } catch (error) {
-      log('DydxChainTransactions/sendNobleIBC', error);
-
-      return JSON.stringify({
-        error,
-      });
-    }
-  }
-
   async transaction(
     type: TransactionTypes,
     paramsInJson: Abacus.Nullable<string>,
@@ -409,11 +347,6 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
           callback(result);
           break;
         }
-        case TransactionType.SendNobleIBC: {
-          const result = await this.sendNobleIBC(params);
-          callback(result);
-          break;
-        }
         default: {
           break;
         }
@@ -501,13 +434,8 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
           const parseDelegations = this.parseToPrimitives(delegations);
           callback(JSON.stringify(parseDelegations));
           break;
-        case QueryType.GetNobleBalance:
+        // Do not implement Transfers (yet)
-          if (this.nobleClient?.isConnected) {
+        case QueryType.Transfers:
-            const nobleBalance = await this.nobleClient.getAccountBalance('uusdc');
-            const parsedNobleBalance = this.parseToPrimitives(nobleBalance);
-            callback(JSON.stringify(parsedNobleBalance));
-          }
-          break;
         default:
           break;
       }

src/lib/abacus/index.ts

@@ -26,14 +26,12 @@ import {
 } from '@/constants/abacus';
 
 import { DEFAULT_MARKETID } from '@/constants/markets';
-import { CURRENT_ABACUS_DEPLOYMENT, type DydxNetwork, isMainnet } from '@/constants/networks';
+import { CURRENT_ABACUS_DEPLOYMENT, type DydxNetwork } from '@/constants/networks';
-import { CLEARED_SIZE_INPUTS, CLEARED_TRADE_INPUTS } from '@/constants/trade';
 
 import type { RootStore } from '@/state/_store';
-import { setTradeFormInputs } from '@/state/inputs';
-import { getInputTradeOptions, getTransferInputs } from '@/state/inputsSelectors';
 
-import { testFlags } from '@/lib/testFlags';
+import { getInputTradeOptions } from '@/state/inputsSelectors';
+import { getTransferInputs } from '@/state/inputsSelectors';
 
 import AbacusRest from './rest';
 import AbacusAnalytics from './analytics';
@@ -45,7 +43,6 @@ import AbacusFormatter from './formatter';
 import AbacusThreading from './threading';
 import AbacusFileSystem from './filesystem';
 import { LocaleSeparators } from '../numbers';
-
 class AbacusStateManager {
   private store: RootStore | undefined;
   private currentMarket: string | undefined;
@@ -83,14 +80,10 @@ class AbacusStateManager {
       this.abacusFormatter
     );
 
-    const appConfigs = AbacusAppConfig.Companion.forWeb;
-    if (!isMainnet || testFlags.withCCTP)
-      appConfigs.squidVersion = AbacusAppConfig.SquidVersion.V2DepositOnly;
-
     this.stateManager = new AsyncAbacusStateManager(
       '',
       CURRENT_ABACUS_DEPLOYMENT,
-      appConfigs,
+      AbacusAppConfig.Companion.forWeb,
       ioImplementations,
       uiImplementations,
       // @ts-ignore
@@ -139,8 +132,6 @@ class AbacusStateManager {
       this.setTradeValue({ value: null, field: TradeInputField.limitPrice });
     }
 
-    this.store?.dispatch(setTradeFormInputs(CLEARED_TRADE_INPUTS));
-
     if (shouldResetSize) {
       this.setTradeValue({ value: null, field: TradeInputField.size });
       this.setTradeValue({ value: null, field: TradeInputField.usdcSize });
@@ -148,8 +139,6 @@ class AbacusStateManager {
       if (needsLeverage) {
         this.setTradeValue({ value: null, field: TradeInputField.leverage });
       }
-
-      this.store?.dispatch(setTradeFormInputs(CLEARED_SIZE_INPUTS));
     }
   };
 
@@ -186,12 +175,6 @@ class AbacusStateManager {
     }
   };
 
-  setNobleWallet = (nobleWallet?: LocalWallet) => {
-    if (nobleWallet) {
-      this.chainTransactions.setNobleWallet(nobleWallet);
-    }
-  };
-
   setTransfersSourceAddress = (evmAddress: string) => {
     this.stateManager.sourceAddress = evmAddress;
   };
@@ -235,6 +218,18 @@ class AbacusStateManager {
     this.abacusFormatter.setLocaleSeparators({ group, decimal });
   };
 
+  setTransferStatus = ({
+    hash,
+    fromChainId,
+    toChainId,
+  }: {
+    hash: string;
+    fromChainId?: string;
+    toChainId?: string;
+  }) => {
+    this.stateManager.transferStatus(hash, fromChainId, toChainId);
+  };
+
   // ------ Transactions ------ //
 
   placeOrder = (

src/lib/abacus/stateNotification.ts

@@ -35,7 +35,6 @@ import { setApiState } from '@/state/app';
 import { setAssets } from '@/state/assets';
 import { setConfigs } from '@/state/configs';
 import { setInputs } from '@/state/inputs';
-import { updateNotifications } from '@/state/notifications';
 import { setHistoricalFundings, setLiveTrades, setMarkets, setOrderbook } from '@/state/perpetuals';
 import { isTruthy } from '../isTruthy';
 
@@ -51,7 +50,6 @@ class AbacusStateNotifier implements AbacusStateNotificationProtocol {
   }
 
   notificationsChanged(notifications: kollections.List<AbacusNotification>): void {
-    this.store?.dispatch(updateNotifications(notifications.toArray()));
     return;
   }
 

src/lib/abacus/websocket.ts

@@ -10,7 +10,7 @@ import {
 } from '@/constants/websocket';
 
 import { lastSuccessfulWebsocketRequestByOrigin } from '@/hooks/useAnalytics';
-import { testFlags } from '@/lib/testFlags';
+import { testFlags } from '@/hooks/useTestFlags';
 
 import { subscriptionsByChannelId } from '@/lib/tradingView/dydxfeed/cache';
 import { mapCandle } from '@/lib/tradingView/utils';

src/lib/squid.ts

@@ -1,48 +0,0 @@
-import { isMainnet } from '@/constants/networks';
-import { GetStatus, StatusResponse } from '@0xsquid/sdk';
-
-export const NATIVE_TOKEN_ADDRESS = '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE';
-
-export const STATUS_ERROR_GRACE_PERIOD = 300_000;
-
-const getSquidStatusUrl = (isV2: boolean) => {
-  if (isV2) {
-    return isMainnet
-      ? 'https://v2.api.squidrouter.com/v2/status'
-      : 'https://testnet.v2.api.squidrouter.com/v2/status';
-  }
-  return isMainnet
-    ? 'https://api.squidrouter.com/v1/status'
-    : 'https://testnet.api.squidrouter.com/v1/status';
-};
-
-export const fetchSquidStatus = async (
-  params: GetStatus,
-  isV2?: boolean,
-  integratorId?: string
-): Promise<StatusResponse> => {
-  const parsedParams: { [key: string]: string } = {
-    transactionId: params.transactionId,
-    fromChainId: String(params.fromChainId),
-    toChainId: String(params.toChainId),
-  };
-  if (isV2) parsedParams.bridgeType = 'cctp';
-  const url = `${getSquidStatusUrl(!!isV2)}?${new URLSearchParams(parsedParams).toString()}`;
-
-  const response = await fetch(url, {
-    headers: {
-      "x-integrator-id": integratorId || 'dYdX-api'
-    },
-  });
-
-  if (!response.ok) {
-    const error = await response.json();
-    throw new Error(error);
-  }
-
-  return response.json();
-};
-
-export const getNobleChainId = () => {
-  return isMainnet ? 'noble-1' : 'grand-1';
-}

src/lib/testFlags.ts

@@ -1,31 +0,0 @@
-class TestFlags {
-  public queryParams: { [key: string]: string };
-
-  constructor() {
-    this.queryParams = {};
-    const hash = window.location.hash;
-    const queryIndex = hash.indexOf('?');
-    if (queryIndex === -1) return
-
-    const queryParamsString = hash.substring(queryIndex + 1);
-    const params = new URLSearchParams(queryParamsString);
-
-    for (const [key, value] of params) {
-        this.queryParams[key] = value;
-    }
-  }
-
-  get displayInitializingMarkets() {
-    return !!this.queryParams.displayInitializingMarkets;
-  }
-
-  get displayAllMarkets() {
-    return !!this.queryParams.displayAllMarkets;
-  }
-
-  get withCCTP() {
-    return !!this.queryParams.withCCTP;
-  }
-}
-
-export const testFlags = new TestFlags();

src/pages/Profile.tsx

@@ -2,16 +2,12 @@ import styled, { AnyStyledComponent, css } from 'styled-components';
 import { Link } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 import { useEnsName } from 'wagmi';
-import { useNavigate } from 'react-router-dom';
 
 import { ButtonSize } from '@/constants/buttons';
-import { TransferInputField, TransferType } from '@/constants/abacus';
-
-import { layoutMixins } from '@/styles/layoutMixins';
 
 import { Details } from '@/components/Details';
 import { FillsTable, FillsTableColumnKey } from '@/views/tables/FillsTable';
-import { Icon, IconName } from '@/components/Icon';
+import { IconName } from '@/components/Icon';
 import { IconButton, type IconButtonProps } from '@/components/IconButton';
 import { Panel } from '@/components/Panel';
 import { Toolbar } from '@/components/Toolbar';
@@ -20,22 +16,22 @@ import { OnboardingState } from '@/constants/account';
 import { DialogTypes } from '@/constants/dialogs';
 import { STRING_KEYS } from '@/constants/localization';
 import { AppRoute, PortfolioRoute, HistoryRoute } from '@/constants/routes';
-import { wallets } from '@/constants/wallets';
+import { wallets, WalletType } from '@/constants/wallets';
 import { useAccounts, useStringGetter, useTokenConfigs } from '@/hooks';
 
 import { getOnboardingState } from '@/state/accountSelectors';
 import { openDialog } from '@/state/dialogs';
 
-import abacusStateManager from '@/lib/abacus';
 import { isTruthy } from '@/lib/isTruthy';
 import { truncateAddress } from '@/lib/wallet';
 
+import { layoutMixins } from '@/styles/layoutMixins';
+
 const ENS_CHAIN_ID = 1; // Ethereum
 
 const Profile = () => {
   const stringGetter = useStringGetter();
   const dispatch = useDispatch();
-  const navigate = useNavigate();
 
   const onboardingState = useSelector(getOnboardingState);
   const isConnected = onboardingState !== OnboardingState.Disconnected;
@@ -50,50 +46,16 @@ const Profile = () => {
 
   const actions = [
     {
-      key: 'deposit',
+      key: 'settings',
-      label: stringGetter({ key: STRING_KEYS.DEPOSIT }),
+      label: stringGetter({ key: STRING_KEYS.SETTINGS }),
-      icon: { iconName: IconName.Deposit },
+      icon: { iconName: IconName.Gear },
-      onClick: () => {
+      href: AppRoute.Settings,
-        dispatch(
-          openDialog({
-            type: DialogTypes.ManageFunds,
-            dialogProps: {
-              selectedTransferType: TransferType.deposit.rawValue,
-            },
-          })
-        );
-      },
-    },
-    {
-      key: 'withdraw',
-      label: stringGetter({ key: STRING_KEYS.WITHDRAW }),
-      icon: { iconName: IconName.Withdraw },
-      onClick: () => {
-        dispatch(
-          openDialog({
-            type: DialogTypes.ManageFunds,
-            dialogProps: {
-              selectedTransferType: TransferType.withdrawal.rawValue,
-            },
-          })
-        );
-      },
-    },
-    {
-      key: 'transfer',
-      label: stringGetter({ key: STRING_KEYS.TRANSFER }),
-      icon: { iconName: IconName.Send },
-      onClick: () => {
-        dispatch(
-          openDialog({
-            type: DialogTypes.ManageFunds,
-            dialogProps: {
-              selectedTransferType: TransferType.transferOut.rawValue,
-            },
-          })
-        );
-      },
     },
+    // {
+    //   key: 'tutorials',
+    //   label: stringGetter({ key: STRING_KEYS.TUTORIALS }),
+    //   icon: { iconName: IconName.Comment },
+    // },
     isConnected
       ? {
           key: 'sign-out',
@@ -104,9 +66,9 @@ const Profile = () => {
           },
         }
       : {
-          key: 'connect',
+          key: 'wallet',
-          label: stringGetter({ key: STRING_KEYS.CONNECT }),
+          label: stringGetter({ key: STRING_KEYS.WALLET }),
-          icon: { iconName: IconName.Transfer },
+          icon: { iconComponent: wallets[walletType || WalletType.OtherWallet].icon },
           onClick: () => {
             dispatch(openDialog({ type: DialogTypes.Onboarding }));
           },
@@ -142,7 +104,12 @@ const Profile = () => {
         {actions.map(({ key, label, href, icon, onClick }) => {
           const action = (
             <>
-              <Styled.ActionButton {...icon} size={ButtonSize.Large} onClick={onClick} />
+              <Styled.ActionButton
+                {...icon}
+                size={ButtonSize.Large}
+                onClick={onClick}
+                isCloseIcon={icon.iconName === IconName.Close}
+              />
               <span>{label}</span>
             </>
           );
@@ -155,26 +122,6 @@ const Profile = () => {
           );
         })}
       </Styled.Actions>
-      <Styled.EqualGrid>
-        <Styled.PanelButton
-          slotHeader={
-            <Styled.InlineRow>
-              <Icon iconName={IconName.Gear} />
-              {stringGetter({ key: STRING_KEYS.SETTINGS })}
-            </Styled.InlineRow>
-          }
-          onClick={() => navigate(AppRoute.Settings)}
-        />
-        <Styled.PanelButton
-          slotHeader={
-            <Styled.InlineRow>
-              <Icon iconName={IconName.HelpCircle} />
-              {stringGetter({ key: STRING_KEYS.HELP })}
-            </Styled.InlineRow>
-          }
-          onClick={() => dispatch(openDialog({ type: DialogTypes.Help }))}
-        />
-      </Styled.EqualGrid>
 
       <Styled.EqualGrid>
         <Panel
@@ -233,7 +180,7 @@ Styled.MobileProfileLayout = styled.div`
   ${layoutMixins.contentContainerPage}
 
   gap: 1rem;
-  padding: 1.25rem 0.9rem;
+  padding: 1.25rem;
 `;
 
 Styled.Header = styled.header`
@@ -298,21 +245,19 @@ Styled.Actions = styled(Toolbar)`
   }
 `;
 
-Styled.ActionButton = styled(IconButton)<{ iconName?: IconName }>`
+Styled.ActionButton = styled(IconButton)<{ isCloseIcon?: boolean }>`
   margin-bottom: 0.5rem;
 
-  ${({ iconName }) =>
+  ${({ isCloseIcon }) =>
-    iconName === IconName.Close
+    isCloseIcon &&
-      ? css`
+    css`
-          --button-textColor: var(--color-negative);
+      --button-textColor: var(--color-negative);
-          --button-icon-size: 0.75em;
+
-        `
+      svg {
-      : iconName === IconName.Transfer &&
+        width: 0.875em;
-        css`
+        height: 0.875em;
-          --button-icon-size: 1.25em;
+      }
-          --button-textColor: var(--color-text-2);
+    `}
-          --button-backgroundColor: var(--color-accent);
-        `}
 `;
 
 Styled.EqualGrid = styled.div`
@@ -361,14 +306,3 @@ Styled.TablePanel = styled(Panel)`
     }
   }
 `;
-
-Styled.InlineRow = styled.div`
-  ${layoutMixins.inlineRow}
-  padding: 1rem;
-  gap: 0.5rem;
-`;
-
-Styled.PanelButton = styled(Panel)`
-  --panel-paddingY: 0
-  --panel-paddingX:0;
-`;

src/pages/portfolio/Fees.tsx

@@ -304,6 +304,10 @@ Styled.FeeTable = styled(Table)`
 
   @media ${breakpoints.notTablet} {
     --tableHeader-backgroundColor: var(--color-layer-1);
+
+    thead tr {
+      --border-width: 0;
+    }
   }
 `;
 

src/pages/portfolio/Portfolio.tsx

@@ -1,13 +1,11 @@
-import { shallowEqual, useDispatch, useSelector } from 'react-redux';
+import { useEffect } from 'react';
 import styled, { type AnyStyledComponent } from 'styled-components';
 import { Navigate, Route, Routes } from 'react-router-dom';
 
-import { OnboardingState } from '@/constants/account';
-import { DialogTypes } from '@/constants/dialogs';
 import { STRING_KEYS } from '@/constants/localization';
 import { HistoryRoute, PortfolioRoute } from '@/constants/routes';
 
-import { useAccountBalance, useBreakpoints, useDocumentTitle, useStringGetter } from '@/hooks';
+import { useBreakpoints, useDocumentTitle, useStringGetter } from '@/hooks';
 
 import { FillsTable, FillsTableColumnKey } from '@/views/tables/FillsTable';
 import { FundingPaymentsTable } from '@/views/tables/FundingPaymentsTable';
@@ -16,9 +14,6 @@ import { Icon, IconName } from '@/components/Icon';
 import { NavigationMenu } from '@/components/NavigationMenu';
 import { WithSidebar } from '@/components/WithSidebar';
 
-import { getOnboardingState, getSubaccount } from '@/state/accountSelectors';
-import { openDialog } from '@/state/dialogs';
-
 import { PortfolioNavMobile } from './PortfolioNavMobile';
 import { Overview } from './Overview';
 import { Positions } from './Positions';
@@ -27,20 +22,11 @@ import { Fees } from './Fees';
 import { History } from './History';
 
 import { layoutMixins } from '@/styles/layoutMixins';
-import { Button } from '@/components/Button';
-import { ButtonAction } from '@/constants/buttons';
 
 export default () => {
-  const dispatch = useDispatch();
   const stringGetter = useStringGetter();
   const { isTablet, isNotTablet } = useBreakpoints();
 
-  const onboardingState = useSelector(getOnboardingState);
-  const { freeCollateral } = useSelector(getSubaccount, shallowEqual) || {};
-  const { nativeTokenBalance } = useAccountBalance();
-
-  const usdcBalance = freeCollateral?.current || 0;
-
   useDocumentTitle(stringGetter({ key: STRING_KEYS.PORTFOLIO }));
 
   const routesComponent = (
@@ -98,74 +84,46 @@ export default () => {
     <WithSidebar
       sidebar={
         isTablet ? null : (
-          <Styled.SideBar>
+          <Styled.NavigationMenu
-            <Styled.NavigationMenu
+            items={[
-              items={[
+              {
-                {
+                group: 'views',
-                  group: 'views',
+                groupLabel: stringGetter({ key: STRING_KEYS.VIEWS }),
-                  groupLabel: stringGetter({ key: STRING_KEYS.VIEWS }),
+                items: [
-                  items: [
+                  {
-                    {
+                    value: PortfolioRoute.Overview,
-                      value: PortfolioRoute.Overview,
+                    slotBefore: <Styled.Icon iconName={IconName.Overview} />,
-                      slotBefore: <Styled.Icon iconName={IconName.Overview} />,
+                    label: stringGetter({ key: STRING_KEYS.OVERVIEW }),
-                      label: stringGetter({ key: STRING_KEYS.OVERVIEW }),
+                    href: PortfolioRoute.Overview,
-                      href: PortfolioRoute.Overview,
+                  },
-                    },
+                  {
-                    {
+                    value: PortfolioRoute.Positions,
-                      value: PortfolioRoute.Positions,
+                    slotBefore: <Styled.Icon iconName={IconName.Cube} />,
-                      slotBefore: <Styled.Icon iconName={IconName.Cube} />,
+                    label: stringGetter({ key: STRING_KEYS.POSITIONS }),
-                      label: stringGetter({ key: STRING_KEYS.POSITIONS }),
+                    href: PortfolioRoute.Positions,
-                      href: PortfolioRoute.Positions,
+                  },
-                    },
+                  {
-                    {
+                    value: PortfolioRoute.Orders,
-                      value: PortfolioRoute.Orders,
+                    slotBefore: <Styled.Icon iconName={IconName.OrderPending} />,
-                      slotBefore: <Styled.Icon iconName={IconName.OrderPending} />,
+                    label: stringGetter({ key: STRING_KEYS.ORDERS }),
-                      label: stringGetter({ key: STRING_KEYS.ORDERS }),
+                    href: PortfolioRoute.Orders,
-                      href: PortfolioRoute.Orders,
+                  },
-                    },
+                  {
-                    {
+                    value: PortfolioRoute.Fees,
-                      value: PortfolioRoute.Fees,
+                    slotBefore: <Styled.Icon iconName={IconName.Calculator} />,
-                      slotBefore: <Styled.Icon iconName={IconName.Calculator} />,
+                    label: stringGetter({ key: STRING_KEYS.FEES }),
-                      label: stringGetter({ key: STRING_KEYS.FEES }),
+                    href: PortfolioRoute.Fees,
-                      href: PortfolioRoute.Fees,
+                  },
-                    },
+                  {
-                    {
+                    value: PortfolioRoute.History,
-                      value: PortfolioRoute.History,
+                    slotBefore: <Styled.Icon iconName={IconName.History} />,
-                      slotBefore: <Styled.Icon iconName={IconName.History} />,
+                    label: stringGetter({ key: STRING_KEYS.HISTORY }),
-                      label: stringGetter({ key: STRING_KEYS.HISTORY }),
+                    href: PortfolioRoute.History,
-                      href: PortfolioRoute.History,
+                  },
-                    },
+                ],
-                  ],
+              },
-                },
+            ]}
-              ]}
+          />
-            />
-            {onboardingState === OnboardingState.AccountConnected && (
-              <Styled.Footer>
-                <Button
-                  action={ButtonAction.Primary}
-                  onClick={() => dispatch(openDialog({ type: DialogTypes.Deposit }))}
-                >
-                  {stringGetter({ key: STRING_KEYS.DEPOSIT })}
-                </Button>
-                {usdcBalance > 0 && (
-                  <Button
-                    action={ButtonAction.Base}
-                    onClick={() => dispatch(openDialog({ type: DialogTypes.Withdraw }))}
-                  >
-                    {stringGetter({ key: STRING_KEYS.WITHDRAW })}
-                  </Button>
-                )}
-                {(usdcBalance > 0 || nativeTokenBalance.gt(0)) && (
-                  <Button
-                    action={ButtonAction.Base}
-                    onClick={() => dispatch(openDialog({ type: DialogTypes.Transfer }))}
-                  >
-                    {stringGetter({ key: STRING_KEYS.TRANSFER })}
-                  </Button>
-                )}
-              </Styled.Footer>
-            )}
-          </Styled.SideBar>
         )
       }
     >
@@ -181,26 +139,6 @@ Styled.PortfolioMobile = styled.div`
   ${layoutMixins.expandingColumnWithHeader}
 `;
 
-Styled.SideBar = styled.div`
-  ${layoutMixins.flexColumn}
-  justify-content: space-between;
-
-  height: 100%;
-`;
-
-Styled.Footer = styled.div`
-  ${layoutMixins.row}
-  flex-wrap: wrap;
-  
-  padding: 1rem;
-
-  gap: 0.5rem;
-
-  > button {
-    flex-grow: 1;
-  }
-`;
-
 Styled.NavigationMenu = styled(NavigationMenu)`
   padding: 0.5rem;
   padding-top: 0;

src/pages/rewards/DYDXBalancePanel.tsx

@@ -2,7 +2,6 @@ import type { ElementType } from 'react';
 import styled, { AnyStyledComponent } from 'styled-components';
 import { shallowEqual, useDispatch, useSelector } from 'react-redux';
 
-import breakpoints from '@/styles/breakpoints';
 import { layoutMixins } from '@/styles/layoutMixins';
 import { useAccountBalance, useAccounts, useTokenConfigs, useStringGetter } from '@/hooks';
 
@@ -40,20 +39,29 @@ export const DYDXBalancePanel = () => {
             <AssetIcon symbol={chainTokenLabel} />
             {chainTokenLabel}
           </Styled.Title>
-          <Styled.ActionButtons>
+          <Styled.ReceiveAndTransferButtons>
             {!canAccountTrade ? (
               <OnboardingTriggerButton size={ButtonSize.Small} />
             ) : (
-              <Button
+              <>
-                slotLeft={<Icon iconName={IconName.Send} />}
+                <Styled.ReceiveButton
-                size={ButtonSize.Small}
+                  slotLeft={<Icon iconName={IconName.Qr} />}
-                action={ButtonAction.Primary}
+                  size={ButtonSize.Small}
-                onClick={() => dispatch(openDialog({ type: DialogTypes.Transfer }))}
+                  onClick={() => dispatch(openDialog({ type: DialogTypes.Receive }))}
-              >
+                >
-                {stringGetter({ key: STRING_KEYS.TRANSFER })}
+                  {stringGetter({ key: STRING_KEYS.RECEIVE })}
-              </Button>
+                </Styled.ReceiveButton>
+                <Button
+                  slotLeft={<Icon iconName={IconName.Send} />}
+                  size={ButtonSize.Small}
+                  action={ButtonAction.Primary}
+                  onClick={() => dispatch(openDialog({ type: DialogTypes.Transfer }))}
+                >
+                  {stringGetter({ key: STRING_KEYS.TRANSFER })}
+                </Button>
+              </>
             )}
-          </Styled.ActionButtons>
+          </Styled.ReceiveAndTransferButtons>
         </Styled.Header>
       }
     >
@@ -117,17 +125,12 @@ const Styled: Record<string, AnyStyledComponent> = {};
 
 Styled.Panel = styled(Panel)`
   --panel-paddingX: 1.5rem;
-
-  @media ${breakpoints.tablet} {
-    --panel-paddingY: 1.5rem;
-    --panel-content-paddingY: 1rem;
-  }
 `;
 
 Styled.Header = styled.div`
   ${layoutMixins.spacedRow}
   gap: 1rem;
-  padding: var(--panel-paddingY) var(--panel-paddingX) 0;
+  padding: 1rem 1.5rem 0;
 `;
 
 Styled.Title = styled.h3`
@@ -140,7 +143,7 @@ Styled.Title = styled.h3`
   }
 `;
 
-Styled.ActionButtons = styled(Toolbar)`
+Styled.ReceiveAndTransferButtons = styled(Toolbar)`
   ${layoutMixins.inlineRow}
   --stickyArea-topHeight: max-content;
   gap: 0.5rem;

src/pages/rewards/LaunchIncentivesPanel.tsx

@@ -1,296 +0,0 @@
-import { useEffect } from 'react';
-import { useDispatch } from 'react-redux';
-import { useQuery } from 'react-query';
-import styled, { AnyStyledComponent } from 'styled-components';
-
-import { STRING_KEYS } from '@/constants/localization';
-import { ButtonAction } from '@/constants/buttons';
-import { DialogTypes } from '@/constants/dialogs';
-
-import breakpoints from '@/styles/breakpoints';
-import { useAccounts, useBreakpoints, useStringGetter } from '@/hooks';
-
-import { layoutMixins } from '@/styles/layoutMixins';
-
-import { Panel } from '@/components/Panel';
-import { Button } from '@/components/Button';
-
-import { Output, OutputType } from '@/components/Output';
-import { Icon, IconName } from '@/components/Icon';
-import { Tag, TagSize } from '@/components/Tag';
-
-import { markLaunchIncentivesSeen } from '@/state/configs';
-import { openDialog } from '@/state/dialogs';
-
-import { log } from '@/lib/telemetry';
-
-export const LaunchIncentivesPanel = () => {
-  const { isNotTablet } = useBreakpoints();
-  const dispatch = useDispatch();
-
-  useEffect(() => {
-    dispatch(markLaunchIncentivesSeen());
-  }, []);
-
-  return isNotTablet ? (
-    <Styled.Panel slotHeader={<LaunchIncentivesTitle />} slotRight={<EstimatedRewards />}>
-      <LaunchIncentivesContent />
-    </Styled.Panel>
-  ) : (
-    <Styled.Panel>
-      <Styled.Column>
-        <EstimatedRewards />
-        <LaunchIncentivesTitle />
-        <LaunchIncentivesContent />
-      </Styled.Column>
-    </Styled.Panel>
-  );
-};
-
-const LaunchIncentivesTitle = () => {
-  const stringGetter = useStringGetter();
-  return (
-    <Styled.Title>
-      {stringGetter({
-        key: STRING_KEYS.LAUNCH_INCENTIVES_TITLE,
-        params: {
-          FOR_V4: <Styled.ForV4>{stringGetter({ key: STRING_KEYS.FOR_V4 })}</Styled.ForV4>,
-        },
-      })}
-      <Styled.NewTag size={TagSize.Medium}>{stringGetter({ key: STRING_KEYS.NEW })}</Styled.NewTag>
-    </Styled.Title>
-  );
-};
-
-const EstimatedRewards = () => {
-  const stringGetter = useStringGetter();
-  const { dydxAddress } = useAccounts();
-
-  const { data, isLoading } = useQuery({
-    enabled: !!dydxAddress,
-    queryKey: `launch_incentives_rewards_${dydxAddress ?? ''}`,
-    queryFn: async () => {
-      if (!dydxAddress) return undefined;
-      const resp = await fetch(`https://cloud.chaoslabs.co/query/api/dydx/points/${dydxAddress}`);
-      return (await resp.json())?.incentivePoints;
-    },
-    onError: (error: Error) => log('LaunchIncentives/fetchPoints', error),
-  });
-
-  return (
-    <Styled.EstimatedRewardsCard>
-      <Styled.EstimatedRewardsCardContent>
-        <div>
-          <span>{stringGetter({ key: STRING_KEYS.ESTIMATED_REWARDS })}</span>
-          <Styled.Season>
-            {stringGetter({
-              key: STRING_KEYS.LAUNCH_INCENTIVES_SEASON_NUM,
-              params: {
-                SEASON_NUMBER: 1,
-              },
-            })}
-          </Styled.Season>
-        </div>
-
-        <Styled.Points>
-          <Output type={OutputType.Number} value={data} isLoading={isLoading} fractionDigits={2} />
-          {data !== undefined && stringGetter({ key: STRING_KEYS.POINTS })}
-        </Styled.Points>
-      </Styled.EstimatedRewardsCardContent>
-
-      <Styled.Image src="/rewards-stars.svg" />
-    </Styled.EstimatedRewardsCard>
-  );
-};
-
-const LaunchIncentivesContent = () => {
-  const stringGetter = useStringGetter();
-  const dispatch = useDispatch();
-
-  return (
-    <Styled.Column>
-      <Styled.Description>
-        {stringGetter({ key: STRING_KEYS.LAUNCH_INCENTIVES_DESCRIPTION })}{' '}
-      </Styled.Description>
-      <Styled.ChaosLabsLogo src="/logos/chaos-labs.svg" />
-      <Styled.ButtonRow>
-        <Styled.AboutButton
-          action={ButtonAction.Base}
-          onClick={() => {
-            dispatch(
-              openDialog({
-                type: DialogTypes.ExternalLink,
-                dialogProps: { link: 'https://dydx.exchange/blog/v4-full-trading' },
-              })
-            );
-          }}
-          slotRight={<Styled.LinkOutIcon iconName={IconName.LinkOut} />}
-        >
-          {stringGetter({ key: STRING_KEYS.ABOUT })}
-        </Styled.AboutButton>
-        <Styled.Button
-          action={ButtonAction.Primary}
-          onClick={() => {
-            dispatch(
-              openDialog({
-                type: DialogTypes.ExternalLink,
-                dialogProps: { link: 'https://community.chaoslabs.xyz/dydx-v4/risk/leaderboard' },
-              })
-            );
-          }}
-          slotRight={<Styled.LinkOutIcon iconName={IconName.LinkOut} />}
-          slotLeft={<Icon iconName={IconName.Leaderboard} />}
-        >
-          {stringGetter({ key: STRING_KEYS.LEADERBOARD })}
-        </Styled.Button>
-      </Styled.ButtonRow>
-    </Styled.Column>
-  );
-};
-
-const Styled: Record<string, AnyStyledComponent> = {};
-
-Styled.Panel = styled(Panel)`
-  --panel-paddingY: 1rem;
-  --panel-paddingX: 1.5rem;
-
-  background-color: var(--color-layer-4);
-  width: 100%;
-
-  @media ${breakpoints.tablet} {
-    --panel-paddingY: 1.5rem;
-  }
-`;
-
-Styled.ForV4 = styled.span`
-  color: var(--color-text-0);
-`;
-
-Styled.Title = styled.h3`
-  ${layoutMixins.inlineRow}
-  font: var(--font-medium-book);
-  color: var(--color-text-2);
-
-  @media ${breakpoints.notTablet} {
-    padding: var(--panel-paddingY) var(--panel-paddingX) 0;
-  }
-`;
-
-Styled.Description = styled.div`
-  color: var(--color-text-0);
-  --link-color: var(--color-text-1);
-
-  a {
-    display: inline;
-    text-decoration: underline;
-    text-underline-offset: 0.25rem;
-
-    ::before {
-      content: ' ';
-    }
-  }
-`;
-
-Styled.ButtonRow = styled.div`
-  ${layoutMixins.inlineRow}
-  gap: 0.75rem;
-  margin-top: 0.5rem;
-
-  a:last-child {
-    --button-width: 100%;
-  }
-`;
-
-Styled.Button = styled(Button)`
-  --button-padding: 0 1rem;
-`;
-
-Styled.LinkOutIcon = styled(Icon)`
-  color: var(--color-text-1);
-`;
-
-Styled.AboutButton = styled(Styled.Button)`
-  --button-textColor: var(--color-text-2);
-  --button-backgroundColor: var(--color-layer-6);
-  --button-border: solid var(--border-width) var(--color-layer-7);
-`;
-
-Styled.Column = styled.div`
-  ${layoutMixins.flexColumn}
-  gap: 0.5rem;
-`;
-
-Styled.EstimatedRewardsCard = styled.div`
-  ${layoutMixins.spacedRow}
-  padding: 1rem 1.25rem;
-  min-width: 21.25rem;
-  height: calc(100% - calc(1.5rem * 2));
-  margin: 1.5rem;
-
-  background-color: var(--color-layer-5);
-  background-image: url('/dots-background.svg');
-  background-size: cover;
-
-  border-radius: 0.75rem;
-  border: solid var(--border-width) var(--color-layer-6);
-  color: var(--color-text-1);
-
-  @media ${breakpoints.tablet} {
-    margin: 0 0 0.5rem;
-  }
-`;
-
-Styled.EstimatedRewardsCardContent = styled.div`
-  ${layoutMixins.flexColumn}
-  gap: 1rem;
-  height: 100%;
-  justify-content: space-between;
-
-  div {
-    ${layoutMixins.flexColumn}
-    gap: 0.15rem;
-    font: var(--font-medium-book);
-
-    :first-child {
-      color: var(--color-text-2);
-    }
-  }
-`;
-
-Styled.BackgroundDots = styled.img`
-  position: absolute;
-`;
-
-Styled.Season = styled.span`
-  font: var(--font-small-book);
-  color: var(--color-text-1);
-`;
-
-Styled.Points = styled.span`
-  ${layoutMixins.inlineRow}
-  gap: 0.25rem;
-  font: var(--font-large-book);
-  color: var(--color-text-0);
-
-  output {
-    color: var(--color-text-2);
-  }
-`;
-
-Styled.Image = styled.img`
-  position: relative;
-  float: right;
-
-  width: 5.25rem;
-  height: auto;
-`;
-
-Styled.ChaosLabsLogo = styled.img`
-  height: 1.25rem;
-  align-self: start;
-`;
-
-Styled.NewTag = styled(Tag)`
-  color: var(--color-accent);
-  background-color: var(--color-accent-faded);
-`;

src/pages/rewards/MigratePanel.tsx

@@ -7,8 +7,6 @@ import { ButtonAction, ButtonSize, ButtonType } from '@/constants/buttons';
 
 import { useAccountBalance, useBreakpoints, useStringGetter } from '@/hooks';
 
-import { breakpoints } from '@/styles';
-
 import { layoutMixins } from '@/styles/layoutMixins';
 
 import { Details } from '@/components/Details';
@@ -136,22 +134,13 @@ const Styled: Record<string, AnyStyledComponent> = {};
 Styled.MigratePanel = styled(Panel)`
   --panel-paddingX: 1.5rem;
   width: 100%;
-
-  background-image: url('/dots-background.svg');
-  background-position: right;
-  background-repeat: no-repeat;
-
-  @media ${breakpoints.tablet} {
-    --panel-paddingY: 1.5rem;
-    --panel-content-paddingY: 1rem;
-  }
 `;
 
 Styled.Title = styled.h3`
   font: var(--font-medium-book);
   color: var(--color-text-2);
 
-  padding: var(--panel-paddingY) var(--panel-paddingX) 0;
+  padding: 1rem 1.5rem 0;
 `;
 
 Styled.MigrateAction = styled.div`
@@ -175,13 +164,6 @@ Styled.Token = styled(Output)`
 Styled.Description = styled.div`
   color: var(--color-text-0);
   --link-color: var(--color-text-1);
-
-  a {
-    display: inline;
-    ::before {
-      content: ' ';
-    }
-  }
 `;
 
 Styled.Column = styled.div`

src/pages/rewards/RewardsPage.tsx

@@ -19,7 +19,6 @@ import { openDialog } from '@/state/dialogs';
 
 import { DYDXBalancePanel } from './DYDXBalancePanel';
 import { MigratePanel } from './MigratePanel';
-import { LaunchIncentivesPanel } from './LaunchIncentivesPanel';
 
 export const RewardsPage = () => {
   const dispatch = useDispatch();
@@ -40,20 +39,9 @@ export const RewardsPage = () => {
   return (
     <Styled.Page>
       {import.meta.env.VITE_V3_TOKEN_ADDRESS && <MigratePanel />}
-
-      {isTablet ? (
-        <>
-          <LaunchIncentivesPanel />
-          <DYDXBalancePanel />
-        </>
-      ) : (
-        <Styled.PanelRowIncentivesAndBalance>
-          <LaunchIncentivesPanel />
-          <DYDXBalancePanel />
-        </Styled.PanelRowIncentivesAndBalance>
-      )}
-
       <Styled.PanelRow>
+        {isTablet && <DYDXBalancePanel />}
+
         <Styled.Panel
           slotHeader={<Styled.Title>{stringGetter({ key: STRING_KEYS.GOVERNANCE })}</Styled.Title>}
           slotRight={panelArrow}
@@ -79,6 +67,8 @@ export const RewardsPage = () => {
             </Link>
           </Styled.Description>
         </Styled.Panel>
+
+        {isNotTablet && <DYDXBalancePanel />}
       </Styled.PanelRow>
     </Styled.Page>
   );
@@ -109,11 +99,6 @@ Styled.Page = styled.div`
 
 Styled.Panel = styled(Panel)`
   --panel-paddingX: 1.5rem;
-
-  @media ${breakpoints.tablet} {
-    --panel-paddingY: 1.5rem;
-    --panel-content-paddingY: 1rem;
-  }
 `;
 
 Styled.Title = styled.h3`
@@ -125,29 +110,20 @@ Styled.Title = styled.h3`
 Styled.Description = styled.div`
   color: var(--color-text-0);
   --link-color: var(--color-text-1);
-
-  a {
-    display: inline;
-    ::before {
-      content: ' ';
-    }
-  }
 `;
 
 Styled.PanelRow = styled.div`
   ${layoutMixins.gridEqualColumns}
   gap: 1.5rem;
 
+  align-items: flex-start;
+
   @media ${breakpoints.tablet} {
     grid-auto-flow: row;
     grid-template-columns: 1fr;
   }
 `;
 
-Styled.PanelRowIncentivesAndBalance = styled(Styled.PanelRow)`
-  grid-template-columns: 2fr 1fr;
-`;
-
 Styled.IconButton = styled(IconButton)`
   color: var(--color-text-0);
   --color-border: var(--color-layer-6);

src/pages/trade/Trade.tsx

@@ -7,12 +7,7 @@ import { layoutMixins } from '@/styles/layoutMixins';
 
 import { TradeLayouts } from '@/constants/layout';
 
-import {
+import { useBreakpoints, useCurrentMarketId, usePageTitlePriceUpdates } from '@/hooks';
-  useBreakpoints,
-  useCurrentMarketId,
-  usePageTitlePriceUpdates,
-  useTradeFormInputs,
-} from '@/hooks';
 
 import { calculateCanAccountTrade } from '@/state/accountCalculators';
 import { getSelectedTradeLayout } from '@/state/layoutSelectors';
@@ -42,7 +37,6 @@ const TradePage = () => {
   const [isHorizontalPanelOpen, setIsHorizontalPanelOpen] = useState(true);
 
   usePageTitlePriceUpdates();
-  useTradeFormInputs();
 
   return isTablet ? (
     <Styled.TradeLayoutMobile>

src/state/_store.ts

@@ -1,7 +1,6 @@
 import { configureStore } from '@reduxjs/toolkit';
 
 import abacusStateManager from '@/lib/abacus';
-
 import appMiddleware from './appMiddleware';
 import localizationMiddleware from './localizationMiddleware';
 
@@ -14,7 +13,6 @@ import { inputsSlice } from './inputs';
 import { layoutSlice } from './layout';
 import { localizationSlice } from './localization';
 import { perpetualsSlice } from './perpetuals';
-import { notificationsSlice } from './notifications';
 
 export const commandMenuSlices = [layoutSlice, localizationSlice];
 
@@ -28,7 +26,6 @@ export const store = configureStore({
     inputs: inputsSlice.reducer,
     layout: layoutSlice.reducer,
     localization: localizationSlice.reducer,
-    notifications: notificationsSlice.reducer,
     perpetuals: perpetualsSlice.reducer,
   },
 

src/state/configs.ts

@@ -17,7 +17,6 @@ export interface ConfigsState {
   feeTiers?: kollections.List<FeeTier>;
   feeDiscounts?: FeeDiscount[];
   network?: NetworkConfigs;
-  hasSeenLaunchIncentives: boolean;
 }
 
 const DOCUMENT_THEME_MAP = {
@@ -44,10 +43,6 @@ const initialState: ConfigsState = {
   feeDiscounts: undefined,
   feeTiers: undefined,
   network: undefined,
-  hasSeenLaunchIncentives: getLocalStorage({
-    key: LocalStorageKey.HasSeenLaunchIncentives,
-    defaultValue: false,
-  }),
 };
 
 changeTheme(initialState.appTheme);
@@ -65,11 +60,7 @@ export const configsSlice = createSlice({
       ...state,
       ...action.payload,
     }),
-    markLaunchIncentivesSeen: (state: ConfigsState) => {
-      setLocalStorage({ key: LocalStorageKey.HasSeenLaunchIncentives, value: true });
-      state.hasSeenLaunchIncentives = true;
-    },
   },
 });
 
-export const { setAppTheme, setConfigs, markLaunchIncentivesSeen } = configsSlice.actions;
+export const { setAppTheme, setConfigs } = configsSlice.actions;

src/state/configsSelectors.ts

@@ -5,6 +5,3 @@ export const getAppTheme = (state: RootState) => state.configs.appTheme;
 export const getFeeTiers = (state: RootState) => state.configs.feeTiers?.toArray();
 
 export const getFeeDiscounts = (state: RootState) => state.configs.feeDiscounts;
-
-export const getHasSeenLaunchIncentives = (state: RootState) =>
-  state.configs.hasSeenLaunchIncentives;

src/state/inputs.ts

@@ -1,5 +1,4 @@
 import { createSlice, type PayloadAction } from '@reduxjs/toolkit';
-import assign from 'lodash/assign';
 
 import type {
   InputError,
@@ -10,14 +9,9 @@ import type {
   TransferInputs,
 } from '@/constants/abacus';
 
-import { CLEARED_SIZE_INPUTS, CLEARED_TRADE_INPUTS } from '@/constants/trade';
-
-type TradeFormInputs = typeof CLEARED_TRADE_INPUTS & typeof CLEARED_SIZE_INPUTS;
-
 export interface InputsState {
   current?: Nullable<string>;
   inputErrors?: Nullable<InputError[]>;
-  tradeFormInputs: TradeFormInputs;
   tradeInputs?: Nullable<TradeInputs>;
   closePositionInputs?: Nullable<ClosePositionInputs>;
   transferInputs?: Nullable<TransferInputs>;
@@ -26,10 +20,6 @@ export interface InputsState {
 const initialState: InputsState = {
   current: undefined,
   inputErrors: undefined,
-  tradeFormInputs: {
-    ...CLEARED_TRADE_INPUTS,
-    ...CLEARED_SIZE_INPUTS,
-  },
   tradeInputs: undefined,
   transferInputs: undefined,
 };
@@ -47,17 +37,10 @@ export const inputsSlice = createSlice({
         inputErrors: errors?.toArray(),
         tradeInputs: trade,
         closePositionInputs: closePosition,
-        transferInputs: {
+        transferInputs: transfer,
-          ...transfer,
-          isCctp: !!transfer?.isCctp,
-        } as Nullable<TransferInputs>,
       };
     },
-
-    setTradeFormInputs: (state, action: PayloadAction<Partial<TradeFormInputs>>) => {
-      state.tradeFormInputs = assign({}, state.tradeFormInputs, action.payload);
-    },
   },
 });
 
-export const { setInputs, setTradeFormInputs } = inputsSlice.actions;
+export const { setInputs } = inputsSlice.actions;

src/state/inputsSelectors.ts

@@ -120,8 +120,3 @@ export const useTradeFormData = () => {
     shallowEqual
   );
 };
-
-/**
- * @returns Tradeform Input states for display. Abacus inputs should track these values.
- */
-export const getTradeFormInputs = (state: RootState) => state.inputs.tradeFormInputs;

src/state/localizationMiddleware.ts

@@ -1,10 +1,5 @@
 import type { PayloadAction } from '@reduxjs/toolkit';
-import {
+import { LOCALE_DATA, SupportedLocale, TOOLTIPS } from '@dydxprotocol/v4-localization';
-  LOCALE_DATA,
-  NOTIFICATIONS,
-  SupportedLocale,
-  TOOLTIPS,
-} from '@dydxprotocol/v4-localization';
 
 import {
   type LocaleData,
@@ -31,7 +26,6 @@ const getNewLocaleData = ({
 
   const newLocaleData = {
     ...LOCALE_DATA[locale],
-    ...NOTIFICATIONS[locale],
     TOOLTIPS: TOOLTIPS[locale],
   };
 
@@ -57,8 +51,9 @@ export default (store: any) => (next: any) => async (action: PayloadAction<any>)
       } else if (globalThis.navigator?.language) {
         const browserLanguageBaseTag = globalThis.navigator.language.split('-')[0].toLowerCase();
 
-        const locale = (SUPPORTED_BASE_TAGS_LOCALE_MAPPING[browserLanguageBaseTag] ??
+        const locale = SUPPORTED_BASE_TAGS_LOCALE_MAPPING[
-          SUPPORTED_BASE_TAGS_LOCALE_MAPPING[SupportedLocales.EN]) as SupportedLocales;
+          browserLanguageBaseTag
+        ] as SupportedLocales;
 
         if (locale) {
           store.dispatch(setSelectedLocale({ locale, isAutoDetect: true }));

src/state/notifications.ts

@@ -1,24 +0,0 @@
-import { createSlice } from '@reduxjs/toolkit';
-import type { PayloadAction } from '@reduxjs/toolkit';
-
-import { AbacusNotification } from '@/constants/abacus';
-
-export interface NotificationsState {
-  abacusNotifications: AbacusNotification[];
-}
-
-const initialState: NotificationsState = {
-  abacusNotifications: [],
-};
-
-export const notificationsSlice = createSlice({
-  name: 'Notifications',
-  initialState,
-  reducers: {
-    updateNotifications: (state, action: PayloadAction<AbacusNotification[]>) => {
-      state.abacusNotifications = action.payload;
-    },
-  },
-});
-
-export const { updateNotifications } = notificationsSlice.actions;

src/state/notificationsSelectors.ts

@@ -1,3 +0,0 @@
-import { RootState } from './_store';
-
-export const getAbacusNotifications = (state: RootState) => state.notifications.abacusNotifications;

src/styles/colors.css

@@ -116,7 +116,6 @@
 
   --color-gradient-positive: hsla(158, 49%, 48%, 0.16);
   --color-gradient-negative: hsla(0, 100%, 66%, 0.16);
-  --color-accent-faded: hsla(var(--theme-classic-hue-purple), 100%, 70%, 0.16);
 
   --color-risk-low: var(--theme-classic-color-green);
   --color-risk-medium: var(--theme-classic-color-yellow);

src/styles/formMixins.ts

@@ -107,17 +107,12 @@ export const formMixins: Record<
   `,
 
   inputLabel: css`
-    --label-textColor: var(--color-text-1);
     position: relative;
     height: 100%;
     width: 100%;
     gap: 0;
 
     border-radius: inherit;
-
-    @media ${breakpoints.tablet} {
-      gap: 0.25rem;
-    }
   `,
 
   inputToggleGroup: css`
@@ -135,30 +130,4 @@ export const formMixins: Record<
       --button-toggle-off-textColor: var(--color-text-1);
     }
   `,
-
-  footer: css`
-    ${layoutMixins.stickyFooter}
-    ${layoutMixins.withStickyFooterBackdrop}
-
-    margin-top: auto;
-  `,
-
-  transfersForm: css`
-    ${() => formMixins.inputsColumn}
-    --form-input-gap: 1.25rem;
-    --form-input-height: 3.5rem;
-    --form-input-height-mobile: 4rem;
-    --form-input-paddingY: 0.5rem;
-    --form-input-paddingX: 1rem;
-
-    height: 100%;
-
-    label {
-      --label-textColor: var(--color-text-0);
-    }
-
-    @media ${breakpoints.tablet} {
-      --form-input-gap: 1rem;
-    }
-  `,
 };

src/styles/headerMixins.ts

@@ -12,8 +12,8 @@ export const headerMixins = {
     --trigger-open-textColor: var(--color-text-2);
 
     &:hover:not(:disabled) {
-      --trigger-backgroundColor: var(--trigger-hover-backgroundColor);
+      background-color: var(--trigger-hover-backgroundColor);
-      --trigger-textColor: var(--trigger-hover-textColor);
+      color: var(--trigger-hover-textColor);
     }
   `,
 

src/styles/tradeViewMixins.ts

@@ -18,5 +18,9 @@ export const tradeViewMixins: Record<
     tbody {
       font: var(--font-small-book);
     }
+
+    thead tr {
+      box-shadow: none;
+    }
   `,
 };

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;
@@ -63,7 +60,7 @@ export const ExchangeBillboards: React.FC<ExchangeBillboardsProps> = ({
         },
         {
           key: 'trades',
-          labelKey: isTablet ? STRING_KEYS.TRADES_24H : STRING_KEYS.TRADES,
+          labelKey: STRING_KEYS.TRADES,
           value: totalTrades24H || undefined,
           type: isTablet ? OutputType.CompactNumber : OutputType.Number,
           subLabelKey: !isTablet && STRING_KEYS.TRADES_LABEL,

src/views/MarketsDropdown.tsx

@@ -82,18 +82,18 @@ const MarketsDropdownContent = ({ onRowAction }: { onRowAction?: (market: string
                 ),
               },
               {
-                columnKey: 'priceChange24HPercent',
+                columnKey: 'priceChange24H',
-                getCellValue: (row) => row.priceChange24HPercent,
+                getCellValue: (row) => row.priceChange24H,
                 label: stringGetter({ key: STRING_KEYS._24H }),
-                renderCell: ({ priceChange24HPercent }) => (
+                renderCell: ({ priceChange24H, priceChange24HPercent }) => (
                   <Styled.InlineRow>
-                    {!priceChange24HPercent ? (
+                    {!priceChange24H ? (
                       <Styled.Output type={OutputType.Text} value={null} />
                     ) : (
                       <Styled.PriceChangeOutput
                         type={OutputType.Percent}
                         value={priceChange24HPercent}
-                        isNegative={MustBigNumber(priceChange24HPercent).isNegative()}
+                        isNegative={MustBigNumber(priceChange24H).isNegative()}
                       />
                     )}
                   </Styled.InlineRow>

src/views/OrderStatusIcon.tsx

@@ -1,7 +1,6 @@
-import styled from 'styled-components';
+import { type OrderStatus, AbacusOrderStatus } from '@/constants/abacus';
-
-import { AbacusOrderStatus } from '@/constants/abacus';
 
+import { Icon } from '@/components/Icon';
 import {
   OrderCanceledIcon,
   OrderFilledIcon,
@@ -10,57 +9,49 @@ import {
   OrderPendingIcon,
 } from '@/icons';
 
-import { Icon } from '@/components/Icon';
+import styled from 'styled-components';
 
 type ElementProps = {
-  status: string;
+  status: OrderStatus;
   totalFilled: number;
 };
 
-type StyleProps = {
+export const OrderStatusIcon = ({ status, totalFilled }: ElementProps) => (
-  className?: string;
+  <$Icon
-};
+    {...{
-
+      [AbacusOrderStatus.open.name]:
-export const OrderStatusIcon = ({ className, status, totalFilled }: ElementProps & StyleProps) => {
+        totalFilled > 0
-  const { iconComponent, color } = {
+          ? {
-    [AbacusOrderStatus.open.rawValue]:
+              iconComponent: OrderPartiallyFilledIcon,
-      totalFilled > 0
+              color: 'var(--color-warning)',
-        ? {
+            }
-            iconComponent: OrderPartiallyFilledIcon,
+          : {
-            color: 'var(--color-warning)',
+              iconComponent: OrderOpenIcon,
-          }
+              color: 'var(--color-text-2)',
-        : {
+            },
-            iconComponent: OrderOpenIcon,
+      [AbacusOrderStatus.filled.name]: {
-            color: 'var(--color-text-2)',
+        iconComponent: OrderFilledIcon,
-          },
+        color: 'var(--color-success)',
-    [AbacusOrderStatus.partiallyFilled.rawValue]: {
+      },
-      iconComponent: OrderPartiallyFilledIcon,
+      [AbacusOrderStatus.cancelled.name]: {
-      color: 'var(--color-warning)',
+        iconComponent: OrderCanceledIcon,
-    },
+        color: 'var(--color-error)',
-    [AbacusOrderStatus.filled.rawValue]: {
+      },
-      iconComponent: OrderFilledIcon,
+      [AbacusOrderStatus.canceling.name]: {
-      color: 'var(--color-success)',
+        iconComponent: OrderPendingIcon,
-    },
+        color: 'var(--color-error)',
-    [AbacusOrderStatus.cancelled.rawValue]: {
+      },
-      iconComponent: OrderCanceledIcon,
+      [AbacusOrderStatus.pending.name]: {
-      color: 'var(--color-error)',
+        iconComponent: OrderPendingIcon,
-    },
+        color: 'var(--color-text-2)',
-    [AbacusOrderStatus.canceling.rawValue]: {
+      },
-      iconComponent: OrderPendingIcon,
+      [AbacusOrderStatus.untriggered.name]: {
-      color: 'var(--color-error)',
+        iconComponent: OrderPendingIcon,
-    },
+        color: 'var(--color-text-2)',
-    [AbacusOrderStatus.pending.rawValue]: {
+      },
-      iconComponent: OrderPendingIcon,
+    }[status.name]}
-      color: 'var(--color-text-2)',
+  />
-    },
+);
-    [AbacusOrderStatus.untriggered.rawValue]: {
-      iconComponent: OrderPendingIcon,
-      color: 'var(--color-text-2)',
-    },
-  }[status];
-
-  return <$Icon className={className} iconComponent={iconComponent} color={color} />;
-};
 
 const $Icon = styled(Icon)<{ color: string }>`
   color: ${({ color }) => color};

src/views/TradeBoxOrderView.tsx

@@ -5,7 +5,7 @@ import { createSelector } from 'reselect';
 
 import { TradeInputField } from '@/constants/abacus';
 import { TradeTypes } from '@/constants/trade';
-import { STRING_KEYS, StringKey } from '@/constants/localization';
+import { STRING_KEYS } from '@/constants/localization';
 import { useStringGetter } from '@/hooks';
 import { layoutMixins } from '@/styles/layoutMixins';
 
@@ -30,8 +30,7 @@ const useTradeTypeOptions = () => {
   const allTradeTypeItems = typeOptions?.toArray()?.map(({ type, stringKey }) => ({
     value: type,
     label: stringGetter({
-      key:
+      key: type === TradeTypes.TAKE_PROFIT ? STRING_KEYS.TAKE_PROFIT_LIMIT : stringKey,
-        type === TradeTypes.TAKE_PROFIT ? STRING_KEYS.TAKE_PROFIT_LIMIT : (stringKey as StringKey),
     }),
   }));
 

src/views/TransferStatus.tsx

@@ -0,0 +1,185 @@
+import { useCallback, useState, useMemo } from 'react';
+import styled, { type AnyStyledComponent } from 'styled-components';
+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 { AlertType } from '@/constants/alerts';
+
+import { formatSeconds } from '@/lib/timeUtils';
+
+import { AlertMessage } from '@/components/AlertMessage';
+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 = {
+  type: 'withdrawal' | 'deposit';
+  toAmount?: number;
+  triggeredAt?: number;
+  status?: StatusResponse;
+};
+
+export const TransferStatusToast = ({
+  type,
+  toAmount,
+  triggeredAt = Date.now(),
+  status,
+}: ElementProps) => {
+  const stringGetter = useStringGetter();
+  const [open, setOpen] = useState<boolean>(false);
+  const [secondsLeft, setSecondsLeft] = useState<number>(0);
+
+  // @ts-ignore status.errors is not in the type definition but can be returned
+  const error = status?.errors?.length ? status?.errors[0] : status?.error;
+
+  const 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} />;
+
+  const inProgressStatusString =
+    type === 'deposit'
+      ? secondsLeft > 0
+        ? STRING_KEYS.DEPOSIT_STATUS
+        : STRING_KEYS.DEPOSIT_STATUS_SHORTLY
+      : secondsLeft > 0
+      ? STRING_KEYS.WITHDRAW_STATUS
+      : STRING_KEYS.WITHDRAW_STATUS_SHORTLY;
+
+  const statusString =
+    type === 'deposit'
+      ? status?.squidTransactionStatus === 'success'
+        ? STRING_KEYS.DEPOSIT_COMPLETE
+        : inProgressStatusString
+      : status?.squidTransactionStatus === 'success'
+      ? STRING_KEYS.WITHDRAW_COMPLETE
+      : inProgressStatusString;
+
+  return (
+    <Styled.Root open={open} onOpenChange={setOpen}>
+      <WithReceipt
+        hideReceipt={!open}
+        side="bottom"
+        slotReceipt={
+          <Styled.Receipt>
+            <TransferStatusSteps status={status} type={type} />
+          </Styled.Receipt>
+        }
+      >
+        <Styled.BridgingStatus>
+          <Styled.Status>
+            {stringGetter({
+              key: statusString,
+              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>
+          {error && (
+            <AlertMessage type={AlertType.Error}>
+              {stringGetter({
+                key: STRING_KEYS.SOMETHING_WENT_WRONG_WITH_MESSAGE,
+                params: {
+                  ERROR_MESSAGE: error.message || stringGetter({ key: STRING_KEYS.UNKNOWN_ERROR }),
+                },
+              })}
+            </AlertMessage>
+          )}
+          <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: rotate 0.3s var(--ease-out-expo);
+
+  ${Styled.Trigger}[data-state='open'] & {
+    rotate: -0.5turn;
+  }
+`;

src/views/TransferStatusSteps.tsx

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import styled, { css, type AnyStyledComponent } from 'styled-components';
+import styled, { css, keyframes, type AnyStyledComponent } from 'styled-components';
 import { StatusResponse } from '@0xsquid/sdk';
 
 import { useStringGetter, useSelectedNetwork, useURLConfigs } from '@/hooks';
@@ -18,10 +18,6 @@ type ElementProps = {
   type: 'withdrawal' | 'deposit';
 };
 
-type StyleProps = {
-  className?: string;
-};
-
 enum TransferStatusStep {
   FromChain,
   Bridge,
@@ -29,7 +25,7 @@ enum TransferStatusStep {
   Complete,
 }
 
-export const TransferStatusSteps = ({ className, status, type }: ElementProps & StyleProps) => {
+export const TransferStatusSteps = ({ status, type }: ElementProps) => {
   const stringGetter = useStringGetter();
   const { selectedNetwork } = useSelectedNetwork();
   const { mintscan: mintscanTxUrl } = useURLConfigs();
@@ -49,12 +45,7 @@ export const TransferStatusSteps = ({ className, status, type }: ElementProps &
             type === 'deposit' ? STRING_KEYS.INITIATED_DEPOSIT : STRING_KEYS.INITIATED_WITHDRAWAL,
         }),
         step: TransferStatusStep.FromChain,
-        link: 
+        link: status?.fromChain?.transactionUrl,
-          type === 'deposit'
-            ? status?.fromChain?.transactionUrl
-            : routeStatus?.[0]?.chainId === dydxChainId && routeStatus[0].txHash
-            ? `${mintscanTxUrl?.replace('{tx_hash}', routeStatus[0].txHash.replace('0x', ''))}`
-            : undefined,
       },
       {
         label: stringGetter({ key: STRING_KEYS.BRIDGING_TOKENS }),
@@ -73,7 +64,7 @@ export const TransferStatusSteps = ({ className, status, type }: ElementProps &
           type === 'withdrawal'
             ? status?.toChain?.transactionUrl
             : currentStatus?.chainId === dydxChainId && currentStatus?.txHash
-            ? `${mintscanTxUrl?.replace('{tx_hash}', currentStatus.txHash.replace('0x', ''))}`
+            ? `${mintscanTxUrl?.replace('{tx_hash}', currentStatus.txHash)}`
             : undefined,
       },
     ];
@@ -105,7 +96,7 @@ export const TransferStatusSteps = ({ className, status, type }: ElementProps &
   if (!status) return <LoadingDots size={3} />;
 
   return (
-    <Styled.BridgingStatus className={className}>
+    <Styled.BridgingStatus>
       {steps.map((step) => (
         <Styled.Step key={step.step}>
           <Styled.row>

src/views/dialogs/DepositDialog.tsx

@@ -1,15 +1,23 @@
+import { useState } from 'react';
+import styled, { type AnyStyledComponent } from 'styled-components';
+
+import { isMainnet } from '@/constants/networks';
 import { STRING_KEYS } from '@/constants/localization';
 import { useBreakpoints, useStringGetter } from '@/hooks';
 
 import { Dialog, DialogPlacement } from '@/components/Dialog';
 
-import { DepositDialogContent } from './DepositDialog/DepositDialogContent';
+import { DepositForm } from '@/views/forms/AccountManagementForms/DepositForm';
+import { TestnetDepositForm } from '@/views/forms/AccountManagementForms/TestnetDepositForm';
+
+import { layoutMixins } from '@/styles/layoutMixins';
 
 type ElementProps = {
   setIsOpen?: (open: boolean) => void;
 };
 
 export const DepositDialog = ({ setIsOpen }: ElementProps) => {
+  const [showFaucet, setShowFaucet] = useState(!isMainnet);
   const stringGetter = useStringGetter();
   const { isMobile } = useBreakpoints();
 
@@ -20,9 +28,45 @@ export const DepositDialog = ({ setIsOpen }: ElementProps) => {
       isOpen
       setIsOpen={setIsOpen}
       title={stringGetter({ key: STRING_KEYS.DEPOSIT })}
+      description={showFaucet && 'Test funds will be sent directly to your dYdX account.'}
       placement={isMobile ? DialogPlacement.FullScreen : DialogPlacement.Default}
     >
-      <DepositDialogContent onDeposit={closeDialog} />
+      <Styled.Content>
+        {isMainnet || !showFaucet ? (
+          <DepositForm />
+        ) : (
+          <TestnetDepositForm onDeposit={closeDialog} />
+        )}
+        {!isMainnet && (
+          <Styled.TextToggle onClick={() => setShowFaucet(!showFaucet)}>
+            {showFaucet ? 'Show deposit form' : 'Show test faucet'}
+          </Styled.TextToggle>
+        )}
+      </Styled.Content>
     </Dialog>
   );
 };
+
+const Styled: Record<string, AnyStyledComponent> = {};
+
+Styled.TextToggle = styled.div`
+  ${layoutMixins.stickyFooter}
+  color: var(--color-accent);
+  cursor: pointer;
+
+  margin-top: auto;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+Styled.Content = styled.div`
+  ${layoutMixins.stickyArea0}
+  --stickyArea0-bottomHeight: 2rem;
+  --stickyArea0-bottomGap: 1rem;
+  --stickyArea0-totalInsetBottom: 0.5rem;
+
+  ${layoutMixins.flexColumn}
+  gap: 1rem;
+`;

src/views/dialogs/DepositDialog/DepositDialogContent.tsx

@@ -1,73 +0,0 @@
-import { useEffect, useState } from 'react';
-import styled, { type AnyStyledComponent } from 'styled-components';
-
-import { TransferInputField, TransferType } from '@/constants/abacus';
-import { isMainnet } from '@/constants/networks';
-import { layoutMixins } from '@/styles/layoutMixins';
-
-import { DepositForm } from '@/views/forms/AccountManagementForms/DepositForm';
-import { TestnetDepositForm } from '@/views/forms/AccountManagementForms/TestnetDepositForm';
-
-import abacusStateManager from '@/lib/abacus';
-
-type ElementProps = {
-  onDeposit?: () => void;
-};
-
-export const DepositDialogContent = ({ onDeposit }: ElementProps) => {
-  const [showFaucet, setShowFaucet] = useState(!isMainnet);
-
-  useEffect(() => {
-    abacusStateManager.setTransferValue({
-      field: TransferInputField.type,
-      value: TransferType.deposit.rawValue,
-    });
-
-    return () => {
-      abacusStateManager.setTransferValue({
-        field: TransferInputField.type,
-        value: null,
-      });
-    };
-  }, []);
-
-  return (
-    <Styled.Content>
-      {isMainnet || !showFaucet ? (
-        <DepositForm onDeposit={onDeposit} />
-      ) : (
-        <TestnetDepositForm onDeposit={onDeposit} />
-      )}
-      {!isMainnet && (
-        <Styled.TextToggle onClick={() => setShowFaucet(!showFaucet)}>
-          {showFaucet ? 'Show deposit form' : 'Show test faucet'}
-        </Styled.TextToggle>
-      )}
-    </Styled.Content>
-  );
-};
-
-const Styled: Record<string, AnyStyledComponent> = {};
-
-Styled.Content = styled.div`
-  ${layoutMixins.flexColumn}
-  gap: 1rem;
-
-  form {
-    flex: 1;
-  }
-`;
-
-Styled.TextToggle = styled.div`
-  ${layoutMixins.stickyFooter}
-  --stickyArea-bottomHeight: 0;
-
-  color: var(--color-accent);
-  cursor: pointer;
-
-  margin-top: auto;
-
-  &:hover {
-    text-decoration: underline;
-  }
-`;

src/views/dialogs/ExternalLinkDialog.tsx

@@ -1,46 +0,0 @@
-import styled, { type AnyStyledComponent } from 'styled-components';
-
-import { ButtonAction, ButtonType } from '@/constants/buttons';
-import { STRING_KEYS } from '@/constants/localization';
-import { useStringGetter } from '@/hooks';
-
-import { Button } from '@/components/Button';
-import { Dialog } from '@/components/Dialog';
-
-import { layoutMixins } from '@/styles/layoutMixins';
-
-type ElementProps = {
-  link: string;
-  linkDescription?: string;
-  setIsOpen: (open: boolean) => void;
-};
-
-export const ExternalLinkDialog = ({ setIsOpen, link, linkDescription }: ElementProps) => {
-  const stringGetter = useStringGetter();
-  return (
-    <Dialog
-      isOpen
-      setIsOpen={setIsOpen}
-      title={stringGetter({ key: STRING_KEYS.LEAVING_WEBSITE })}
-      description={
-        linkDescription ?? stringGetter({ key: STRING_KEYS.LEAVING_WEBSITE_DESCRIPTION })
-      }
-    >
-      <Styled.Content>
-        <p>{stringGetter({ key: STRING_KEYS.LEAVING_WEBSITE_DISCLAIMER })}.</p>
-        <Button type={ButtonType.Link} action={ButtonAction.Primary} href={link}>
-          {stringGetter({ key: STRING_KEYS.CONTINUE })}
-        </Button>
-      </Styled.Content>
-    </Dialog>
-  );
-};
-
-const Styled: Record<string, AnyStyledComponent> = {};
-
-Styled.Content = styled.div`
-  ${layoutMixins.flexColumn}
-  gap: 1rem;
-
-  font: var(--font-base-book);
-`;

src/views/dialogs/ManageFundsDialog.tsx

@@ -1,87 +0,0 @@
-import { shallowEqual, useSelector } from 'react-redux';
-import styled, { type AnyStyledComponent } from 'styled-components';
-
-import { TransferInputField, TransferType } from '@/constants/abacus';
-import { STRING_KEYS } from '@/constants/localization';
-import { ButtonSize } from '@/constants/buttons';
-import { useStringGetter } from '@/hooks';
-
-import { Dialog, DialogPlacement } from '@/components/Dialog';
-import { ToggleGroup } from '@/components/ToggleGroup';
-import { TransferForm } from '@/views/forms/TransferForm';
-import { WithdrawForm } from '@/views/forms/AccountManagementForms/WithdrawForm';
-
-import { getTransferInputs } from '@/state/inputsSelectors';
-
-import abacusStateManager from '@/lib/abacus';
-
-import { DepositDialogContent } from './DepositDialog/DepositDialogContent';
-
-type ElementProps = {
-  selectedTransferType?: string;
-  setIsOpen?: (open: boolean) => void;
-};
-
-export const ManageFundsDialog = ({ setIsOpen, selectedTransferType }: ElementProps) => {
-  const stringGetter = useStringGetter();
-  const { type } = useSelector(getTransferInputs, shallowEqual) || {};
-  const currentType = type?.rawValue ?? selectedTransferType ?? TransferType.deposit.rawValue;
-
-  const closeDialog = () => setIsOpen?.(false);
-
-  const transferTypeConfig = {
-    [TransferType.deposit.rawValue]: {
-      value: TransferType.deposit.rawValue,
-      label: stringGetter({ key: STRING_KEYS.DEPOSIT }),
-      component: <DepositDialogContent />,
-    },
-    [TransferType.withdrawal.rawValue]: {
-      value: TransferType.withdrawal.rawValue,
-      label: stringGetter({ key: STRING_KEYS.WITHDRAW }),
-      component: <WithdrawForm />,
-    },
-    [TransferType.transferOut.rawValue]: {
-      value: TransferType.transferOut.rawValue,
-      label: stringGetter({ key: STRING_KEYS.TRANSFER }),
-      component: <TransferForm onDone={closeDialog} />,
-    },
-  };
-
-  return (
-    <Styled.Dialog
-      isOpen
-      setIsOpen={setIsOpen}
-      placement={DialogPlacement.FullScreen}
-      title={
-        <Styled.ToggleGroup
-          items={Object.values(transferTypeConfig)}
-          value={currentType}
-          size={ButtonSize.Medium}
-          onValueChange={(value: string) =>
-            abacusStateManager.setTransferValue({
-              field: TransferInputField.type,
-              value,
-            })
-          }
-        />
-      }
-      hasHeaderBorder
-    >
-      {transferTypeConfig[currentType].component}
-    </Styled.Dialog>
-  );
-};
-const Styled: Record<string, AnyStyledComponent> = {};
-
-Styled.Dialog = styled(Dialog)`
-  --dialog-content-paddingTop: 1.5rem;
-`;
-
-Styled.ToggleGroup = styled(ToggleGroup)`
-  overflow-x: auto;
-
-  button {
-    --button-toggle-off-border: none;
-    --button-padding: 0 1rem;
-  }
-`;

src/views/dialogs/MnemonicExportDialog.tsx

@@ -5,7 +5,7 @@ import { AlertType } from '@/constants/alerts';
 import { ButtonAction, ButtonSize } from '@/constants/buttons';
 import { STRING_KEYS } from '@/constants/localization';
 import { useAccounts, useStringGetter } from '@/hooks';
-import breakpoints from '@/styles/breakpoints';
+import { breakpoints } from '@/styles';
 import { layoutMixins } from '@/styles/layoutMixins';
 
 import { AlertMessage } from '@/components/AlertMessage';
@@ -54,14 +54,11 @@ export const MnemonicExportDialog = ({ setIsOpen }: ElementProps) => {
         <Styled.WithReceipt
           slotReceipt={
             <Styled.CheckboxContainer>
-              <Checkbox
+              <Styled.Checkbox
                 checked={hasAcknowledged}
-                onCheckedChange={setHasAcknowledged}
+                onClick={() => setHasAcknowledged(!hasAcknowledged)}
-                id="acknowledge-secret-phase-risk"
-                label={stringGetter({
-                  key: STRING_KEYS.SECRET_PHRASE_RISK_ACK,
-                })}
               />
+              <span>{stringGetter({ key: STRING_KEYS.SECRET_PHRASE_RISK_ACK })}</span>
             </Styled.CheckboxContainer>
           }
         >
@@ -165,10 +162,17 @@ Styled.WithReceipt = styled(WithReceipt)`
 `;
 
 Styled.CheckboxContainer = styled.div`
+  ${layoutMixins.spacedRow};
+
   padding: 1rem;
+  gap: 0.75rem;
   color: var(--color-text-0);
 `;
 
+Styled.Checkbox = styled(Checkbox)`
+  --checkbox-backgroundColor: var(--color-layer-3);
+`;
+
 Styled.AlertMessage = styled(AlertMessage)`
   font: var(--font-base-book);
   margin: 0;