diff --git a/next-env.d.ts b/next-env.d.ts
index 4f11a03dc..fd36f9494 100644
--- a/next-env.d.ts
+++ b/next-env.d.ts
@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/package.json b/package.json
index 492642073..8210eaea0 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
   "author": "Hiro Systems PBC (formerly Blockstack PBC)",
   "dependencies": {
     "@chakra-ui/anatomy": "2.2.0",
+    "@chakra-ui/next-js": "^2.2.0",
     "@chakra-ui/react": "2.8.0",
     "@chakra-ui/theme-tools": "2.1.0",
     "@emotion/cache": "11.11.0",
@@ -79,7 +80,7 @@
     "monaco-vscode-textmate-theme-converter": "0.1.7",
     "monacode": "0.3.1",
     "morgan": "1.10.0",
-    "next": "13.1.6",
+    "next": "14.0.2",
     "next-plugin-preact": "3.0.6",
     "nookies": "2.5.2",
     "onigasm": "2.2.5",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a2b3dc40c..50ea09868 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,6 +11,9 @@ dependencies:
   '@chakra-ui/anatomy':
     specifier: 2.2.0
     version: 2.2.0
+  '@chakra-ui/next-js':
+    specifier: ^2.2.0
+    version: 2.2.0(@chakra-ui/react@2.8.0)(@emotion/react@11.11.1)(next@14.0.2)(react@18.2.0)
   '@chakra-ui/react':
     specifier: 2.8.0
     version: 2.8.0(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(@types/react@17.0.15)(framer-motion@10.16.4)(react-dom@18.2.0)(react@18.2.0)
@@ -67,7 +70,7 @@ dependencies:
     version: 4.16.2
   '@sentry/nextjs':
     specifier: 7.67.0
-    version: 7.67.0(next@13.1.6)(react@18.2.0)(webpack@5.88.2)
+    version: 7.67.0(next@14.0.2)(react@18.2.0)(webpack@5.88.2)
   '@stacks/auth':
     specifier: 6.9.0
     version: 6.9.0
@@ -174,11 +177,11 @@ dependencies:
     specifier: 1.10.0
     version: 1.10.0
   next:
-    specifier: 13.1.6
-    version: 13.1.6(@babel/core@7.20.12)(react-dom@18.2.0)(react@18.2.0)
+    specifier: 14.0.2
+    version: 14.0.2(@babel/core@7.20.12)(react-dom@18.2.0)(react@18.2.0)
   next-plugin-preact:
     specifier: 3.0.6
-    version: 3.0.6(@prefresh/babel-plugin@0.4.4)(next@13.1.6)(preact-render-to-string@5.1.19)(preact-ssr-prepass@1.2.0)(preact@10.18.1)(webpack@5.88.2)
+    version: 3.0.6(@prefresh/babel-plugin@0.4.4)(next@14.0.2)(preact-render-to-string@5.1.19)(preact-ssr-prepass@1.2.0)(preact@10.18.1)(webpack@5.88.2)
   nookies:
     specifier: 2.5.2
     version: 2.5.2
@@ -417,7 +420,7 @@ devDependencies:
     version: 11.0.0
   next-router-mock:
     specifier: 0.9.7
-    version: 0.9.7(next@13.1.6)(react@18.2.0)
+    version: 0.9.7(next@14.0.2)(react@18.2.0)
   package-json-cleanup-loader:
     specifier: 1.0.3
     version: 1.0.3
@@ -2413,6 +2416,21 @@ packages:
       - '@types/react'
     dev: false
 
+  /@chakra-ui/next-js@2.2.0(@chakra-ui/react@2.8.0)(@emotion/react@11.11.1)(next@14.0.2)(react@18.2.0):
+    resolution: {integrity: sha512-brCz0UEOlImX4Np2jDIaljZJkW6kiDSuXG5erxvYjZlklLhmti1zj0o1sSjt5yff1xndfgHoOJb+BYG5wx+vDg==}
+    peerDependencies:
+      '@chakra-ui/react': '>=2.4.0'
+      '@emotion/react': '>=11'
+      next: '>=13'
+      react: '>=18'
+    dependencies:
+      '@chakra-ui/react': 2.8.0(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(@types/react@17.0.15)(framer-motion@10.16.4)(react-dom@18.2.0)(react@18.2.0)
+      '@emotion/cache': 11.11.0
+      '@emotion/react': 11.11.1(@types/react@17.0.15)(react@18.2.0)
+      next: 14.0.2(@babel/core@7.20.12)(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+    dev: false
+
   /@chakra-ui/number-input@2.1.0(@chakra-ui/system@2.6.0)(react@18.2.0):
     resolution: {integrity: sha512-/gEAzQHhrMA+1rzyCMaN8OkKtUPuER6iA+nloYEYBoT7dH/EoNlRtBkiIQhDp+E4VpgZJ0SK3OVrm9/eBbtHHg==}
     peerDependencies:
@@ -3533,13 +3551,13 @@ packages:
     resolution: {integrity: sha512-k2mTh0m+IV1HRdU0xXM617tSQTi53tVR2muvYOsBeYcUgEAyxV1FOC7Qj279th3fBVQ+Dj6muvNJZcHSPNdbKg==}
     dependencies:
       '@formatjs/intl-localematcher': 0.4.2
-      tslib: 2.4.1
+      tslib: 2.6.2
     dev: false
 
   /@formatjs/fast-memoize@2.2.0:
     resolution: {integrity: sha512-hnk/nY8FyrL5YxwP9e4r9dqeM6cAbo8PeU9UjyXojZMNvVad2Z06FAVHyR3Ecw6fza+0GH7vdJgiKIVXTMbSBA==}
     dependencies:
-      tslib: 2.4.1
+      tslib: 2.6.2
     dev: false
 
   /@formatjs/icu-messageformat-parser@2.6.2:
@@ -3547,20 +3565,20 @@ packages:
     dependencies:
       '@formatjs/ecma402-abstract': 1.17.2
       '@formatjs/icu-skeleton-parser': 1.6.2
-      tslib: 2.4.1
+      tslib: 2.6.2
     dev: false
 
   /@formatjs/icu-skeleton-parser@1.6.2:
     resolution: {integrity: sha512-VtB9Slo4ZL6QgtDFJ8Injvscf0xiDd4bIV93SOJTBjUF4xe2nAWOoSjLEtqIG+hlIs1sNrVKAaFo3nuTI4r5ZA==}
     dependencies:
       '@formatjs/ecma402-abstract': 1.17.2
-      tslib: 2.4.1
+      tslib: 2.6.2
     dev: false
 
   /@formatjs/intl-localematcher@0.4.2:
     resolution: {integrity: sha512-BGdtJFmaNJy5An/Zan4OId/yR9Ih1OojFjcduX/xOvq798OgWSyDtd6Qd5jqJXwJs1ipe4Fxu9+cshic5Ox2tA==}
     dependencies:
-      tslib: 2.4.1
+      tslib: 2.6.2
     dev: false
 
   /@gar/promisify@1.1.3:
@@ -4065,8 +4083,8 @@ packages:
       - utf-8-validate
     dev: true
 
-  /@next/env@13.1.6:
-    resolution: {integrity: sha512-s+W9Fdqh5MFk6ECrbnVmmAOwxKQuhGMT7xXHrkYIBMBcTiOqNWhv5KbJIboKR5STXxNXl32hllnvKaffzFaWQg==}
+  /@next/env@14.0.2:
+    resolution: {integrity: sha512-HAW1sljizEaduEOes/m84oUqeIDAUYBR1CDwu2tobNlNDFP3cSm9d6QsOsGeNlIppU1p/p1+bWbYCbvwjFiceA==}
 
   /@next/eslint-plugin-next@13.1.1:
     resolution: {integrity: sha512-SBrOFS8PC3nQ5aeZmawJkjKkWjwK9RoxvBSv/86nZp0ubdoVQoko8r8htALd9ufp16NhacCdqhu9bzZLDWtALQ==}
@@ -4074,104 +4092,72 @@ packages:
       glob: 7.1.7
     dev: true
 
-  /@next/swc-android-arm-eabi@13.1.6:
-    resolution: {integrity: sha512-F3/6Z8LH/pGlPzR1AcjPFxx35mPqjE5xZcf+IL+KgbW9tMkp7CYi1y7qKrEWU7W4AumxX/8OINnDQWLiwLasLQ==}
-    engines: {node: '>= 10'}
-    cpu: [arm]
-    os: [android]
-    requiresBuild: true
-    optional: true
-
-  /@next/swc-android-arm64@13.1.6:
-    resolution: {integrity: sha512-cMwQjnB8vrYkWyK/H0Rf2c2pKIH4RGjpKUDvbjVAit6SbwPDpmaijLio0LWFV3/tOnY6kvzbL62lndVA0mkYpw==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [android]
-    requiresBuild: true
-    optional: true
-
-  /@next/swc-darwin-arm64@13.1.6:
-    resolution: {integrity: sha512-KKRQH4DDE4kONXCvFMNBZGDb499Hs+xcFAwvj+rfSUssIDrZOlyfJNy55rH5t2Qxed1e4K80KEJgsxKQN1/fyw==}
+  /@next/swc-darwin-arm64@14.0.2:
+    resolution: {integrity: sha512-i+jQY0fOb8L5gvGvojWyZMfQoQtDVB2kYe7fufOEiST6sicvzI2W5/EXo4lX5bLUjapHKe+nFxuVv7BA+Pd7LQ==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [darwin]
     requiresBuild: true
     optional: true
 
-  /@next/swc-darwin-x64@13.1.6:
-    resolution: {integrity: sha512-/uOky5PaZDoaU99ohjtNcDTJ6ks/gZ5ykTQDvNZDjIoCxFe3+t06bxsTPY6tAO6uEAw5f6vVFX5H5KLwhrkZCA==}
+  /@next/swc-darwin-x64@14.0.2:
+    resolution: {integrity: sha512-zRCAO0d2hW6gBEa4wJaLn+gY8qtIqD3gYd9NjruuN98OCI6YyelmhWVVLlREjS7RYrm9OUQIp/iVJFeB6kP1hg==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [darwin]
     requiresBuild: true
     optional: true
 
-  /@next/swc-freebsd-x64@13.1.6:
-    resolution: {integrity: sha512-qaEALZeV7to6weSXk3Br80wtFQ7cFTpos/q+m9XVRFggu+8Ib895XhMWdJBzew6aaOcMvYR6KQ6JmHA2/eMzWw==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [freebsd]
-    requiresBuild: true
-    optional: true
-
-  /@next/swc-linux-arm-gnueabihf@13.1.6:
-    resolution: {integrity: sha512-OybkbC58A1wJ+JrJSOjGDvZzrVEQA4sprJejGqMwiZyLqhr9Eo8FXF0y6HL+m1CPCpPhXEHz/2xKoYsl16kNqw==}
-    engines: {node: '>= 10'}
-    cpu: [arm]
-    os: [linux]
-    requiresBuild: true
-    optional: true
-
-  /@next/swc-linux-arm64-gnu@13.1.6:
-    resolution: {integrity: sha512-yCH+yDr7/4FDuWv6+GiYrPI9kcTAO3y48UmaIbrKy8ZJpi7RehJe3vIBRUmLrLaNDH3rY1rwoHi471NvR5J5NQ==}
+  /@next/swc-linux-arm64-gnu@14.0.2:
+    resolution: {integrity: sha512-tSJmiaon8YaKsVhi7GgRizZoV0N1Sx5+i+hFTrCKKQN7s3tuqW0Rov+RYdPhAv/pJl4qiG+XfSX4eJXqpNg3dA==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
     optional: true
 
-  /@next/swc-linux-arm64-musl@13.1.6:
-    resolution: {integrity: sha512-ECagB8LGX25P9Mrmlc7Q/TQBb9rGScxHbv/kLqqIWs2fIXy6Y/EiBBiM72NTwuXUFCNrWR4sjUPSooVBJJ3ESQ==}
+  /@next/swc-linux-arm64-musl@14.0.2:
+    resolution: {integrity: sha512-dXJLMSEOwqJKcag1BeX1C+ekdPPJ9yXbWIt3nAadhbLx5CjACoB2NQj9Xcqu2tmdr5L6m34fR+fjGPs+ZVPLzA==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
     optional: true
 
-  /@next/swc-linux-x64-gnu@13.1.6:
-    resolution: {integrity: sha512-GT5w2mruk90V/I5g6ScuueE7fqj/d8Bui2qxdw6lFxmuTgMeol5rnzAv4uAoVQgClOUO/MULilzlODg9Ib3Y4Q==}
+  /@next/swc-linux-x64-gnu@14.0.2:
+    resolution: {integrity: sha512-WC9KAPSowj6as76P3vf1J3mf2QTm3Wv3FBzQi7UJ+dxWjK3MhHVWsWUo24AnmHx9qDcEtHM58okgZkXVqeLB+Q==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
     requiresBuild: true
     optional: true
 
-  /@next/swc-linux-x64-musl@13.1.6:
-    resolution: {integrity: sha512-keFD6KvwOPzmat4TCnlnuxJCQepPN+8j3Nw876FtULxo8005Y9Ghcl7ACcR8GoiKoddAq8gxNBrpjoxjQRHeAQ==}
+  /@next/swc-linux-x64-musl@14.0.2:
+    resolution: {integrity: sha512-KSSAwvUcjtdZY4zJFa2f5VNJIwuEVnOSlqYqbQIawREJA+gUI6egeiRu290pXioQXnQHYYdXmnVNZ4M+VMB7KQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
     requiresBuild: true
     optional: true
 
-  /@next/swc-win32-arm64-msvc@13.1.6:
-    resolution: {integrity: sha512-OwertslIiGQluFvHyRDzBCIB07qJjqabAmINlXUYt7/sY7Q7QPE8xVi5beBxX/rxTGPIbtyIe3faBE6Z2KywhQ==}
+  /@next/swc-win32-arm64-msvc@14.0.2:
+    resolution: {integrity: sha512-2/O0F1SqJ0bD3zqNuYge0ok7OEWCQwk55RPheDYD0va5ij7kYwrFkq5ycCRN0TLjLfxSF6xI5NM6nC5ux7svEQ==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [win32]
     requiresBuild: true
     optional: true
 
-  /@next/swc-win32-ia32-msvc@13.1.6:
-    resolution: {integrity: sha512-g8zowiuP8FxUR9zslPmlju7qYbs2XBtTLVSxVikPtUDQedhcls39uKYLvOOd1JZg0ehyhopobRoH1q+MHlIN/w==}
+  /@next/swc-win32-ia32-msvc@14.0.2:
+    resolution: {integrity: sha512-vJI/x70Id0oN4Bq/R6byBqV1/NS5Dl31zC+lowO8SDu1fHmUxoAdILZR5X/sKbiJpuvKcCrwbYgJU8FF/Gh50Q==}
     engines: {node: '>= 10'}
     cpu: [ia32]
     os: [win32]
     requiresBuild: true
     optional: true
 
-  /@next/swc-win32-x64-msvc@13.1.6:
-    resolution: {integrity: sha512-Ls2OL9hi3YlJKGNdKv8k3X/lLgc3VmLG3a/DeTkAd+lAituJp8ZHmRmm9f9SL84fT3CotlzcgbdaCDfFwFA6bA==}
+  /@next/swc-win32-x64-msvc@14.0.2:
+    resolution: {integrity: sha512-Ut4LXIUvC5m8pHTe2j0vq/YDnTEyq6RSR9vHYPqnELrDapPhLNz9Od/L5Ow3J8RNDWpEnfCiQXuVdfjlNEJ7ug==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [win32]
@@ -4245,7 +4231,7 @@ packages:
       open: 8.4.0
       picocolors: 1.0.0
       tiny-glob: 0.2.9
-      tslib: 2.4.1
+      tslib: 2.6.2
     dev: true
 
   /@playwright/test@1.22.2:
@@ -4319,7 +4305,7 @@ packages:
       preact: 10.18.1
     dev: false
 
-  /@prefresh/next@1.4.7(next@13.1.6)(preact@10.18.1)(webpack@5.88.2):
+  /@prefresh/next@1.4.7(next@14.0.2)(preact@10.18.1)(webpack@5.88.2):
     resolution: {integrity: sha512-Dz0ssNDk6suG4Sag31uG6sMCFckipf6WZjQ+Wd4uTaNlcmzGQZpIOfbqyYrK6hP3kuG2lSQ0DgtGFj32Ze4dHw==}
     peerDependencies:
       next: ^9.4.0 || ^10.0.0 || ^11.0.0
@@ -4330,7 +4316,7 @@ packages:
       '@prefresh/core': 1.3.2(preact@10.18.1)
       '@prefresh/utils': 1.1.1
       '@prefresh/webpack': 3.3.2(@prefresh/babel-plugin@0.4.1)(preact@10.18.1)(webpack@5.88.2)
-      next: 13.1.6(@babel/core@7.20.12)(react-dom@18.2.0)(react@18.2.0)
+      next: 14.0.2(@babel/core@7.20.12)(react-dom@18.2.0)(react@18.2.0)
       preact: 10.18.1
       webpack: 5.88.2
     dev: false
@@ -5808,7 +5794,7 @@ packages:
       '@sentry/core': 7.67.0
       '@sentry/types': 7.67.0
       '@sentry/utils': 7.67.0
-      tslib: 2.4.1
+      tslib: 2.6.2
     dev: false
 
   /@sentry/browser@7.67.0:
@@ -5820,7 +5806,7 @@ packages:
       '@sentry/replay': 7.67.0
       '@sentry/types': 7.67.0
       '@sentry/utils': 7.67.0
-      tslib: 2.4.1
+      tslib: 2.6.2
     dev: false
 
   /@sentry/cli@1.75.0:
@@ -5846,7 +5832,7 @@ packages:
     dependencies:
       '@sentry/types': 7.67.0
       '@sentry/utils': 7.67.0
-      tslib: 2.4.1
+      tslib: 2.6.2
     dev: false
 
   /@sentry/integrations@7.67.0:
@@ -5856,10 +5842,10 @@ packages:
       '@sentry/types': 7.67.0
       '@sentry/utils': 7.67.0
       localforage: 1.10.0
-      tslib: 2.4.1
+      tslib: 2.6.2
     dev: false
 
-  /@sentry/nextjs@7.67.0(next@13.1.6)(react@18.2.0)(webpack@5.88.2):
+  /@sentry/nextjs@7.67.0(next@14.0.2)(react@18.2.0)(webpack@5.88.2):
     resolution: {integrity: sha512-Iw6jktvb8NYDE+MvBONTTkVBSL/9/skg68ccG1Cs9Sla+0KTlu1+D8fMtmxvn1G50kFo9AONnDb01NhoVa9SjA==}
     engines: {node: '>=8'}
     peerDependencies:
@@ -5879,7 +5865,7 @@ packages:
       '@sentry/utils': 7.67.0
       '@sentry/webpack-plugin': 1.20.0
       chalk: 3.0.0
-      next: 13.1.6(@babel/core@7.20.12)(react-dom@18.2.0)(react@18.2.0)
+      next: 14.0.2(@babel/core@7.20.12)(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
       rollup: 2.78.0
       stacktrace-parser: 0.1.10
@@ -5901,7 +5887,7 @@ packages:
       cookie: 0.4.2
       https-proxy-agent: 5.0.1
       lru_map: 0.3.3
-      tslib: 2.4.1
+      tslib: 2.6.2
     transitivePeerDependencies:
       - supports-color
     dev: false
@@ -5917,7 +5903,7 @@ packages:
       '@sentry/utils': 7.67.0
       hoist-non-react-statics: 3.3.2
       react: 18.2.0
-      tslib: 2.4.1
+      tslib: 2.6.2
     dev: false
 
   /@sentry/replay@7.67.0:
@@ -5939,7 +5925,7 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       '@sentry/types': 7.67.0
-      tslib: 2.4.1
+      tslib: 2.6.2
     dev: false
 
   /@sentry/webpack-plugin@1.20.0:
@@ -7333,7 +7319,7 @@ packages:
       flat-cache: 3.0.4
       micromatch: 4.0.5
       react-docgen-typescript: 2.2.2(typescript@4.8.4)
-      tslib: 2.4.1
+      tslib: 2.6.2
       typescript: 4.8.4
       webpack: 5.88.2
     transitivePeerDependencies:
@@ -7512,7 +7498,7 @@ packages:
       fs-extra: 9.1.0
       global: 4.4.0
       isomorphic-unfetch: 3.1.0
-      nanoid: 3.3.4
+      nanoid: 3.3.6
       read-pkg-up: 7.0.1
       regenerator-runtime: 0.13.11
     transitivePeerDependencies:
@@ -7581,13 +7567,13 @@ packages:
   /@swc/helpers@0.4.14:
     resolution: {integrity: sha512-4C7nX/dvpzB7za4Ql9K81xK3HPxCpHMgwTZVyf+9JQ6VUbn9jjZVN7/Nkdz/Ugzs2CSjqnL/UPXroiVBVHUWUw==}
     dependencies:
-      tslib: 2.4.1
+      tslib: 2.6.2
+    dev: false
 
   /@swc/helpers@0.5.2:
     resolution: {integrity: sha512-E4KcWTpoLHqwPHLxidpOqQbcrZVgi0rsmmZXUle1jXmJfuIf/UWpczUJ7MZZ5tlxytgJXyp0w4PGkkeLiuIdZw==}
     dependencies:
-      tslib: 2.4.1
-    dev: false
+      tslib: 2.6.2
 
   /@tanstack/query-core@4.33.0:
     resolution: {integrity: sha512-qYu73ptvnzRh6se2nyBIDHGBQvPY1XXl3yR769B7B6mIDD7s+EZhdlWHQ67JI6UOTFRaI7wupnTnwJ3gE0Mr/g==}
@@ -9116,7 +9102,7 @@ packages:
     dependencies:
       '@types/react': 17.0.15
       react: 18.2.0
-      tslib: 2.4.1
+      tslib: 2.6.2
     dev: false
 
   /aria-query@4.2.2:
@@ -9285,7 +9271,7 @@ packages:
     resolution: {integrity: sha512-O0yuUDnZeQDL+ncNGlJ78BiO4jnYI3bvMsD5prT0/nsgijG/LpNBIr63gTjVTNsiGkgQhiyCShTgxt8oXOrklA==}
     engines: {node: '>=4'}
     dependencies:
-      tslib: 2.4.1
+      tslib: 2.6.2
     dev: true
 
   /astral-regex@2.0.0:
@@ -9875,6 +9861,12 @@ packages:
     resolution: {integrity: sha512-HpGFw18DgFWlncDfjTa2rcQ4W88O1mC8e8yZ2AvQY5KDaktSTwo+KRf6nHK6FRI5FyRyb/5T6+TSxfP7QyGsmQ==}
     dev: true
 
+  /busboy@1.6.0:
+    resolution: {integrity: sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==}
+    engines: {node: '>=10.16.0'}
+    dependencies:
+      streamsearch: 1.1.0
+
   /bytes@3.0.0:
     resolution: {integrity: sha512-pMhOfFDPiv9t5jjIXkHosWmkSyQbvsgEVNkz0ERHbuLh2T/7j4Mqqpz523Fe8MVY89KC6Sh/QfS2sM+SjgFDcw==}
     engines: {node: '>= 0.8'}
@@ -9989,7 +9981,7 @@ packages:
     resolution: {integrity: sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==}
     dependencies:
       pascal-case: 3.1.2
-      tslib: 2.4.1
+      tslib: 2.6.2
     dev: true
 
   /camelcase-css@2.0.1:
@@ -10677,13 +10669,13 @@ packages:
     peerDependencies:
       webpack: ^4.27.0 || ^5.0.0
     dependencies:
-      icss-utils: 5.1.0(postcss@8.4.21)
+      icss-utils: 5.1.0(postcss@8.4.31)
       loader-utils: 2.0.4
-      postcss: 8.4.21
-      postcss-modules-extract-imports: 3.0.0(postcss@8.4.21)
-      postcss-modules-local-by-default: 4.0.0(postcss@8.4.21)
-      postcss-modules-scope: 3.0.0(postcss@8.4.21)
-      postcss-modules-values: 4.0.0(postcss@8.4.21)
+      postcss: 8.4.31
+      postcss-modules-extract-imports: 3.0.0(postcss@8.4.31)
+      postcss-modules-local-by-default: 4.0.0(postcss@8.4.31)
+      postcss-modules-scope: 3.0.0(postcss@8.4.31)
+      postcss-modules-values: 4.0.0(postcss@8.4.31)
       postcss-value-parser: 4.2.0
       schema-utils: 3.3.0
       semver: 7.5.4
@@ -11086,7 +11078,7 @@ packages:
     resolution: {integrity: sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==}
     dependencies:
       no-case: 3.0.4
-      tslib: 2.4.1
+      tslib: 2.6.2
     dev: true
 
   /dot-prop@5.3.0:
@@ -12205,7 +12197,7 @@ packages:
     resolution: {integrity: sha512-KSuV3ur4gf2KqMNoZx3nXNVhqCkn42GuTYCX4tXPEwf0MjpFQmNMiN6m7dXaUXgIoivL6/65agoUMg4RLS0Vbg==}
     engines: {node: '>=10'}
     dependencies:
-      tslib: 2.4.1
+      tslib: 2.6.2
     dev: false
 
   /focus-lock@0.8.1:
@@ -13177,13 +13169,13 @@ packages:
       postcss: 7.0.39
     dev: true
 
-  /icss-utils@5.1.0(postcss@8.4.21):
+  /icss-utils@5.1.0(postcss@8.4.31):
     resolution: {integrity: sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==}
     engines: {node: ^10 || ^12 || >= 14}
     peerDependencies:
       postcss: ^8.1.0
     dependencies:
-      postcss: 8.4.21
+      postcss: 8.4.31
     dev: true
 
   /ieee754@1.2.1:
@@ -13305,7 +13297,7 @@ packages:
       '@formatjs/ecma402-abstract': 1.17.2
       '@formatjs/fast-memoize': 2.2.0
       '@formatjs/icu-messageformat-parser': 2.6.2
-      tslib: 2.4.1
+      tslib: 2.6.2
     dev: false
 
   /invariant@2.2.4:
@@ -14870,7 +14862,7 @@ packages:
   /lower-case@2.0.2:
     resolution: {integrity: sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==}
     dependencies:
-      tslib: 2.4.1
+      tslib: 2.6.2
     dev: true
 
   /lru-cache@5.1.1:
@@ -15409,15 +15401,10 @@ packages:
     dev: true
     optional: true
 
-  /nanoid@3.3.4:
-    resolution: {integrity: sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==}
-    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
-
   /nanoid@3.3.6:
     resolution: {integrity: sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
-    dev: true
 
   /nanomatch@1.2.13:
     resolution: {integrity: sha512-fpoe2T0RbHwBTBUOftAfBPaDEi06ufaUai0mE6Yn1kacc3SnTErfb/h+X94VXzI64rKFHYImXSvdwGGCmwOqCA==}
@@ -15458,7 +15445,7 @@ packages:
     resolution: {integrity: sha512-9iN1ka/9zmX1ZvLV9ewJYEk9h7RyRRtqdK0woXcqohu8EWIerfPUjYJPg0ULy0UqP7cslmdGc8xKDJcojlKiaw==}
     dev: true
 
-  /next-plugin-preact@3.0.6(@prefresh/babel-plugin@0.4.4)(next@13.1.6)(preact-render-to-string@5.1.19)(preact-ssr-prepass@1.2.0)(preact@10.18.1)(webpack@5.88.2):
+  /next-plugin-preact@3.0.6(@prefresh/babel-plugin@0.4.4)(next@14.0.2)(preact-render-to-string@5.1.19)(preact-ssr-prepass@1.2.0)(preact@10.18.1)(webpack@5.88.2):
     resolution: {integrity: sha512-Ze8c8h0jaCPbG0X9T5jJpSDtrfvU9NLlt+DJWtxOu2fn6qPbNU3s61F1hTcldZb3IbpXkp5iGnhPCdgGZEGrCQ==}
     requiresBuild: true
     peerDependencies:
@@ -15466,7 +15453,7 @@ packages:
       preact-render-to-string: '>=5'
       preact-ssr-prepass: '>=1'
     dependencies:
-      '@prefresh/next': 1.4.7(next@13.1.6)(preact@10.18.1)(webpack@5.88.2)
+      '@prefresh/next': 1.4.7(next@14.0.2)(preact@10.18.1)(webpack@5.88.2)
       '@prefresh/webpack': 3.3.2(@prefresh/babel-plugin@0.4.4)(preact@10.18.1)(webpack@5.88.2)
       module-alias: 2.2.2
       preact: 10.18.1
@@ -15478,55 +15465,50 @@ packages:
       - webpack
     dev: false
 
-  /next-router-mock@0.9.7(next@13.1.6)(react@18.2.0):
+  /next-router-mock@0.9.7(next@14.0.2)(react@18.2.0):
     resolution: {integrity: sha512-y5ioLCIsdkJKwcoPnrUyocNEJT22RK4wKSg6LO0Q2XkBBvkYprEWy5FiCZt+CA8+qpfxpBlNca76F+glEohbRA==}
     peerDependencies:
       next: '>=10.0.0'
       react: '>=17.0.0'
     dependencies:
-      next: 13.1.6(@babel/core@7.20.12)(react-dom@18.2.0)(react@18.2.0)
+      next: 14.0.2(@babel/core@7.20.12)(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
     dev: true
 
-  /next@13.1.6(@babel/core@7.20.12)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-hHlbhKPj9pW+Cymvfzc15lvhaOZ54l+8sXDXJWm3OBNBzgrVj6hwGPmqqsXg40xO1Leq+kXpllzRPuncpC0Phw==}
-    engines: {node: '>=14.6.0'}
+  /next@14.0.2(@babel/core@7.20.12)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-jsAU2CkYS40GaQYOiLl9m93RTv2DA/tTJ0NRlmZIBIL87YwQ/xR8k796z7IqgM3jydI8G25dXvyYMC9VDIevIg==}
+    engines: {node: '>=18.17.0'}
     hasBin: true
     peerDependencies:
-      fibers: '>= 3.1.0'
-      node-sass: ^6.0.0 || ^7.0.0
+      '@opentelemetry/api': ^1.1.0
       react: ^18.2.0
       react-dom: ^18.2.0
       sass: ^1.3.0
     peerDependenciesMeta:
-      fibers:
-        optional: true
-      node-sass:
+      '@opentelemetry/api':
         optional: true
       sass:
         optional: true
     dependencies:
-      '@next/env': 13.1.6
-      '@swc/helpers': 0.4.14
+      '@next/env': 14.0.2
+      '@swc/helpers': 0.5.2
+      busboy: 1.6.0
       caniuse-lite: 1.0.30001447
-      postcss: 8.4.14
+      postcss: 8.4.31
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
       styled-jsx: 5.1.1(@babel/core@7.20.12)(react@18.2.0)
+      watchpack: 2.4.0
     optionalDependencies:
-      '@next/swc-android-arm-eabi': 13.1.6
-      '@next/swc-android-arm64': 13.1.6
-      '@next/swc-darwin-arm64': 13.1.6
-      '@next/swc-darwin-x64': 13.1.6
-      '@next/swc-freebsd-x64': 13.1.6
-      '@next/swc-linux-arm-gnueabihf': 13.1.6
-      '@next/swc-linux-arm64-gnu': 13.1.6
-      '@next/swc-linux-arm64-musl': 13.1.6
-      '@next/swc-linux-x64-gnu': 13.1.6
-      '@next/swc-linux-x64-musl': 13.1.6
-      '@next/swc-win32-arm64-msvc': 13.1.6
-      '@next/swc-win32-ia32-msvc': 13.1.6
-      '@next/swc-win32-x64-msvc': 13.1.6
+      '@next/swc-darwin-arm64': 14.0.2
+      '@next/swc-darwin-x64': 14.0.2
+      '@next/swc-linux-arm64-gnu': 14.0.2
+      '@next/swc-linux-arm64-musl': 14.0.2
+      '@next/swc-linux-x64-gnu': 14.0.2
+      '@next/swc-linux-x64-musl': 14.0.2
+      '@next/swc-win32-arm64-msvc': 14.0.2
+      '@next/swc-win32-ia32-msvc': 14.0.2
+      '@next/swc-win32-x64-msvc': 14.0.2
     transitivePeerDependencies:
       - '@babel/core'
       - babel-plugin-macros
@@ -15539,7 +15521,7 @@ packages:
     resolution: {integrity: sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==}
     dependencies:
       lower-case: 2.0.2
-      tslib: 2.4.1
+      tslib: 2.6.2
     dev: true
 
   /node-abi@2.30.1:
@@ -16063,7 +16045,7 @@ packages:
     resolution: {integrity: sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==}
     dependencies:
       dot-case: 3.0.4
-      tslib: 2.4.1
+      tslib: 2.6.2
     dev: true
 
   /parent-module@1.0.1:
@@ -16136,7 +16118,7 @@ packages:
     resolution: {integrity: sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==}
     dependencies:
       no-case: 3.0.4
-      tslib: 2.4.1
+      tslib: 2.6.2
     dev: true
 
   /pascalcase@0.1.1:
@@ -16367,13 +16349,13 @@ packages:
       postcss: 7.0.39
     dev: true
 
-  /postcss-modules-extract-imports@3.0.0(postcss@8.4.21):
+  /postcss-modules-extract-imports@3.0.0(postcss@8.4.31):
     resolution: {integrity: sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==}
     engines: {node: ^10 || ^12 || >= 14}
     peerDependencies:
       postcss: ^8.1.0
     dependencies:
-      postcss: 8.4.21
+      postcss: 8.4.31
     dev: true
 
   /postcss-modules-local-by-default@3.0.3:
@@ -16386,14 +16368,14 @@ packages:
       postcss-value-parser: 4.2.0
     dev: true
 
-  /postcss-modules-local-by-default@4.0.0(postcss@8.4.21):
+  /postcss-modules-local-by-default@4.0.0(postcss@8.4.31):
     resolution: {integrity: sha512-sT7ihtmGSF9yhm6ggikHdV0hlziDTX7oFoXtuVWeDd3hHObNkcHRo9V3yg7vCAY7cONyxJC/XXCmmiHHcvX7bQ==}
     engines: {node: ^10 || ^12 || >= 14}
     peerDependencies:
       postcss: ^8.1.0
     dependencies:
-      icss-utils: 5.1.0(postcss@8.4.21)
-      postcss: 8.4.21
+      icss-utils: 5.1.0(postcss@8.4.31)
+      postcss: 8.4.31
       postcss-selector-parser: 6.0.11
       postcss-value-parser: 4.2.0
     dev: true
@@ -16406,13 +16388,13 @@ packages:
       postcss-selector-parser: 6.0.11
     dev: true
 
-  /postcss-modules-scope@3.0.0(postcss@8.4.21):
+  /postcss-modules-scope@3.0.0(postcss@8.4.31):
     resolution: {integrity: sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==}
     engines: {node: ^10 || ^12 || >= 14}
     peerDependencies:
       postcss: ^8.1.0
     dependencies:
-      postcss: 8.4.21
+      postcss: 8.4.31
       postcss-selector-parser: 6.0.11
     dev: true
 
@@ -16423,14 +16405,14 @@ packages:
       postcss: 7.0.39
     dev: true
 
-  /postcss-modules-values@4.0.0(postcss@8.4.21):
+  /postcss-modules-values@4.0.0(postcss@8.4.31):
     resolution: {integrity: sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==}
     engines: {node: ^10 || ^12 || >= 14}
     peerDependencies:
       postcss: ^8.1.0
     dependencies:
-      icss-utils: 5.1.0(postcss@8.4.21)
-      postcss: 8.4.21
+      icss-utils: 5.1.0(postcss@8.4.31)
+      postcss: 8.4.31
     dev: true
 
   /postcss-selector-parser@6.0.11:
@@ -16453,23 +16435,6 @@ packages:
       source-map: 0.6.1
     dev: true
 
-  /postcss@8.4.14:
-    resolution: {integrity: sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==}
-    engines: {node: ^10 || ^12 || >=14}
-    dependencies:
-      nanoid: 3.3.4
-      picocolors: 1.0.0
-      source-map-js: 1.0.2
-
-  /postcss@8.4.21:
-    resolution: {integrity: sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==}
-    engines: {node: ^10 || ^12 || >=14}
-    dependencies:
-      nanoid: 3.3.4
-      picocolors: 1.0.0
-      source-map-js: 1.0.2
-    dev: true
-
   /postcss@8.4.31:
     resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==}
     engines: {node: ^10 || ^12 || >=14}
@@ -16477,7 +16442,6 @@ packages:
       nanoid: 3.3.6
       picocolors: 1.0.0
       source-map-js: 1.0.2
-    dev: true
 
   /preact-render-to-string@5.1.19(preact@10.18.1):
     resolution: {integrity: sha512-bj8sn/oytIKO6RtOGSS/1+5CrQyRSC99eLUnEVbqUa6MzJX5dYh7wu9bmT0d6lm/Vea21k9KhCQwvr2sYN3rrQ==}
@@ -17110,7 +17074,7 @@ packages:
       '@types/react': 17.0.15
       react: 18.2.0
       react-style-singleton: 2.2.1(@types/react@17.0.15)(react@18.2.0)
-      tslib: 2.4.1
+      tslib: 2.6.2
     dev: false
 
   /react-remove-scroll@2.5.5(@types/react@17.0.15)(react@18.2.0):
@@ -17127,7 +17091,7 @@ packages:
       react: 18.2.0
       react-remove-scroll-bar: 2.3.4(@types/react@17.0.15)(react@18.2.0)
       react-style-singleton: 2.2.1(@types/react@17.0.15)(react@18.2.0)
-      tslib: 2.4.1
+      tslib: 2.6.2
       use-callback-ref: 1.3.0(@types/react@17.0.15)(react@18.2.0)
       use-sidecar: 1.1.2(@types/react@17.0.15)(react@18.2.0)
     dev: false
@@ -17166,7 +17130,7 @@ packages:
       get-nonce: 1.0.1
       invariant: 2.2.4
       react: 18.2.0
-      tslib: 2.4.1
+      tslib: 2.6.2
     dev: false
 
   /react-test-renderer@18.2.0(react@18.2.0):
@@ -18252,6 +18216,10 @@ packages:
     resolution: {integrity: sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ==}
     dev: true
 
+  /streamsearch@1.1.0:
+    resolution: {integrity: sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==}
+    engines: {node: '>=10.0.0'}
+
   /string-argv@0.3.1:
     resolution: {integrity: sha512-a1uQGz7IyVy9YwhqjZIZu1c8JO8dNIe20xBmSS6qu9kv++k3JGzCVmprbNN5Kn+BgzD5E7YYwg1CcjuJMRNsvg==}
     engines: {node: '>=0.6.19'}
@@ -18531,7 +18499,7 @@ packages:
     engines: {node: ^14.18.0 || >=16.0.0}
     dependencies:
       '@pkgr/utils': 2.3.1
-      tslib: 2.4.1
+      tslib: 2.6.2
     dev: true
 
   /table@6.7.1:
@@ -18949,10 +18917,10 @@ packages:
 
   /tslib@2.4.1:
     resolution: {integrity: sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA==}
+    dev: false
 
   /tslib@2.6.2:
     resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==}
-    dev: false
 
   /tsutils@3.21.0(typescript@4.8.4):
     resolution: {integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==}
@@ -19312,7 +19280,7 @@ packages:
     dependencies:
       '@types/react': 17.0.15
       react: 18.2.0
-      tslib: 2.4.1
+      tslib: 2.6.2
     dev: false
 
   /use-events@1.4.2(react@18.2.0):
@@ -19337,7 +19305,7 @@ packages:
       '@types/react': 17.0.15
       detect-node-es: 1.1.0
       react: 18.2.0
-      tslib: 2.4.1
+      tslib: 2.6.2
     dev: false
 
   /use-sync-external-store@1.2.0(react@18.2.0):
@@ -19496,7 +19464,7 @@ packages:
     engines: {node: '>=10.13.0'}
     dependencies:
       glob-to-regexp: 0.4.1
-      graceful-fs: 4.2.10
+      graceful-fs: 4.2.11
 
   /web-api-hooks@3.0.2(react@18.2.0):
     resolution: {integrity: sha512-EQEGcHo1+FVINg5spKw05lBiN1/LhRK/K2xKnUmuLsLzz4sQK8Bk8qhj4RUgsh4LA7XXZqgJ43aQI+nvtMmIqA==}
diff --git a/src/app/DefaultHeadTags.tsx b/src/app/DefaultHeadTags.tsx
deleted file mode 100644
index 45f83ab07..000000000
--- a/src/app/DefaultHeadTags.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import snippet from '@segment/snippet';
-import Script from 'next/script';
-
-const { SEGMENT_WRITE_KEY, NODE_ENV } = process.env;
-const description =
-  'Explore transactions and accounts on the Stacks blockchain. Clone any contract and experiment in your browser with the Explorer sandbox.';
-
-function GA() {
-  if (NODE_ENV !== 'production') return null;
-  return (
-    <>
-      <Script async src="https://www.googletagmanager.com/gtag/js?id=G-NB2VBT0KY2"></Script>
-      <Script
-        id="stacks-ga-snippet"
-        dangerouslySetInnerHTML={{
-          __html: `window.dataLayer = window.dataLayer || [];
-                function gtag(){dataLayer.push(arguments);};
-                gtag('js', new Date());
-                gtag('config', 'G-NB2VBT0KY2');`,
-        }}
-      />
-    </>
-  );
-}
-
-export function DefaultHeadTags() {
-  return (
-    <>
-      <meta name="theme-color" content="#6287DD" />
-      <meta name="apple-mobile-web-app-capable" content="yes" />
-      <meta name="apple-mobile-web-app-status-bar-style" content="#6287DD" />
-
-      <meta property="og:type" content="website" />
-      <meta property="og:site_name" content="explorer.hiro.so" />
-      <meta name="twitter:card" content="summary" />
-      <meta name="twitter:site" content="@stacks" />
-      <meta name="twitter:creator" content="@stacks" />
-      <meta
-        property="og:image"
-        content={`https://blockstack-www.imgix.net/stacks-explorer-og.png?auto=format,compress`}
-      />
-      <meta
-        name="twitter:image"
-        content={`https://blockstack-www.imgix.net/stacks-explorer-og.png?auto=format,compress`}
-      />
-      <meta name="twitter:card" content="summary_large_image" />
-      <meta name="twitter:site" content="@stacks" />
-      <meta property="og:description" content={description} />
-      <link rel="icon" type="image/svg+xml" href={`/static/favicon.png`} />
-
-      <GA />
-      {SEGMENT_WRITE_KEY && (
-        <Script
-          id="stacks-segment"
-          dangerouslySetInnerHTML={{
-            __html: snippet.min({
-              apiKey: SEGMENT_WRITE_KEY,
-              page: true,
-            }),
-          }}
-        />
-      )}
-      <link rel="preconnect" href="https://fonts.gstatic.com" />
-    </>
-  );
-}
diff --git a/src/app/HomeClient.tsx b/src/app/HomeClient.tsx
deleted file mode 100644
index a326b6f48..000000000
--- a/src/app/HomeClient.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-'use client';
-
-import { DEFAULT_BLOCKS_LIST_LIMIT, DEFAULT_LIST_LIMIT_SMALL } from '@/common/constants';
-import { useGlobalContext } from '@/common/context/useAppContext';
-import { Grid } from '@/ui/Grid';
-import { Title } from '@/ui/typography';
-import * as React from 'react';
-import { FC } from 'react';
-
-import { DefaultTxListTabs } from './common/components/tx-lists/tabs/DefaultTxListTabs';
-import { BlocksList } from './components/BlockList';
-import { Stats } from './stats/Stats';
-
-export const HomeClientBase: FC = () => {
-  console.log('[DEBUG] rendering home');
-  const { activeNetwork } = useGlobalContext();
-  return (
-    <Grid
-      mt="32px"
-      gap="32px"
-      width="100%"
-      gridTemplateColumns={['100%', '100%', 'minmax(0, 0.6fr) minmax(0, 0.4fr)']}
-    >
-      <Title
-        as="h1"
-        fontSize="36px"
-        display="block"
-        width="100%"
-        textAlign={['center', 'left']}
-        mt="40px"
-        mb="0"
-        data-test="homepage-title"
-        color="white"
-        gridColumnStart={'1'}
-        gridColumnEnd={['2', '2', '3']}
-      >
-        Stacks Explorer
-      </Title>
-      {!activeNetwork.isSubnet && <Stats />}
-      <DefaultTxListTabs limit={DEFAULT_LIST_LIMIT_SMALL} />
-
-      <BlocksList limit={DEFAULT_BLOCKS_LIST_LIMIT} />
-    </Grid>
-  );
-};
-
-export default HomeClientBase;
-
-export const HomeClient = HomeClientBase;
diff --git a/src/app/PageWrapper.tsx b/src/app/PageWrapper.tsx
deleted file mode 100644
index d1bba46b5..000000000
--- a/src/app/PageWrapper.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-'use client';
-
-import {
-  PAGE_MAX_WIDTH,
-  SITE_NOTICE_BANNER_LABEL,
-  SITE_NOTICE_BANNER_MESSAGE,
-  SITE_NOTICE_ENABLED,
-} from '@/common/constants';
-import { Footer } from '@/components/footer';
-import { Modals } from '@/components/modals';
-import { NetworkModeToast } from '@/components/network-mode-toast';
-import { Notice } from '@/components/notice';
-import { SearchComponent } from '@/features/search/search';
-import { StatusBar } from '@/features/status-bar';
-import { Box } from '@/ui/Box';
-import { Flex } from '@/ui/Flex';
-import { useColorMode } from '@chakra-ui/react';
-import { FC, ReactNode } from 'react';
-import { NavBar } from '@/app/components/NavBar';
-
-export const PageWrapper: FC<{ children: ReactNode }> = ({ children }) => {
-  const colorMode = useColorMode().colorMode;
-
-  return (
-    <>
-      <Box position={'sticky'} width={'100%'} top={'0'} backdropFilter={'blur(10px)'} zIndex={2}>
-        <StatusBar />
-      </Box>
-      <Flex
-        maxWidth="100vw"
-        overflowX="hidden"
-        flexDirection="column"
-        minHeight="100vh"
-        position="relative"
-        overflow="hidden"
-        style={{
-          backgroundAttachment: 'fixed',
-          backgroundImage:
-            colorMode === 'light'
-              ? 'linear-gradient(transparent, transparent 530px, white 530px), linear-gradient(30deg, rgb(98, 135, 221), rgb(231, 72, 92) 58%, rgb(102, 137, 221) 100%)'
-              : undefined,
-        }}
-      >
-        <Box marginLeft={`calc(100vw - 100%)`}>
-          <NavBar />
-          <Flex
-            display={['block', 'block', 'none', 'none']}
-            p="8px"
-            mx="auto"
-            width="100%"
-            flexDirection={'column'}
-            px={'16px'}
-          >
-            <SearchComponent variant="small" mr="16px" width="100%" maxWidth="760px" />
-          </Flex>
-          <Flex
-            flexDirection="column"
-            width="100%"
-            minHeight="100%"
-            position="relative"
-            flexGrow={1}
-          >
-            {SITE_NOTICE_ENABLED && (
-              <Box px="20px">
-                <Notice label={SITE_NOTICE_BANNER_LABEL} message={SITE_NOTICE_BANNER_MESSAGE} />
-              </Box>
-            )}
-            <Flex
-              as="main"
-              mx="auto"
-              width="100%"
-              flexGrow={1}
-              height="100%"
-              maxWidth={PAGE_MAX_WIDTH}
-              flexDirection="column"
-              px={['16px', '16px', '32px']}
-            >
-              {children}
-            </Flex>
-            <Footer />
-          </Flex>
-        </Box>
-      </Flex>
-      <Modals />
-      <NetworkModeToast />
-    </>
-  );
-};
diff --git a/src/app/Providers.tsx b/src/app/Providers.tsx
deleted file mode 100644
index dcee94fed..000000000
--- a/src/app/Providers.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-'use client';
-
-import { store } from '@/common/state/store';
-import { AppConfig } from '@/components/app-config';
-import { UIProvider } from '@/ui/UIProvider';
-import * as React from 'react';
-import { FC } from 'react';
-import { CookiesProvider } from 'react-cookie';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { Provider } from 'react-redux';
-
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      refetchOnWindowFocus: false,
-      refetchOnMount: false,
-      retry: false,
-      staleTime: 5000,
-      suspense: true,
-    },
-  },
-});
-export const Providers: FC<any> = ({
-  children,
-  cookies,
-  queryNetworkMode,
-  queryApiUrl,
-  querySubnet,
-  apiUrls,
-}) => {
-  return (
-    <CookiesProvider>
-      <UIProvider cookies={cookies}>
-        <Provider store={store}>
-          <AppConfig
-            queryNetworkMode={queryNetworkMode}
-            queryApiUrl={queryApiUrl}
-            querySubnet={querySubnet}
-          >
-            <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
-          </AppConfig>
-        </Provider>
-      </UIProvider>
-    </CookiesProvider>
-  );
-};
diff --git a/src/app/address/[principal]/error.tsx b/src/app/address/[principal]/error.tsx
deleted file mode 100644
index 555f26692..000000000
--- a/src/app/address/[principal]/error.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-'use client';
-
-import { MessageWithIcon } from '@/components/message-with-icon';
-import { Meta } from '@/components/meta-head';
-import { Section } from '@/components/section';
-import { ButtonLink } from '@/ui/ButtonLink';
-import { Box, Grid, Stack } from '@/ui/components';
-import { Title } from '@/ui/typography';
-import * as Sentry from '@sentry/nextjs';
-import Link from 'next/link';
-import * as React from 'react';
-import { useEffect } from 'react';
-import { TbAlertOctagon } from 'react-icons/tb';
-
-export default function Error({ error }: { error: any; reset: () => void }) {
-  useEffect(() => {
-    console.error(error);
-    if (error.status === 404) return;
-    Sentry.captureException(error);
-  }, [error]);
-  return (
-    <>
-      <Meta title="Address not found" />
-      <Title mb={['16px', '16px', '0']} mt="64px" as="h1" color="white" fontSize="36px">
-        Address not found
-      </Title>
-      <Section mt="32px">
-        <Grid placeItems="center" p="32px" minHeight="350px">
-          <Box>
-            <MessageWithIcon
-              icon={TbAlertOctagon}
-              title="This address doesn't seem correct."
-              message="This page isn't available, and it looks like the address provided isn't correct."
-              action={
-                <Stack isInline spacing="16px">
-                  <Link href="/" passHref legacyBehavior>
-                    <ButtonLink href="/" mt="24px">
-                      Go home
-                    </ButtonLink>
-                  </Link>
-                </Stack>
-              }
-            />
-          </Box>
-        </Grid>
-      </Section>
-    </>
-  );
-}
diff --git a/src/app/address/[principal]/head.tsx b/src/app/address/[principal]/head.tsx
deleted file mode 100644
index 55e77dfd4..000000000
--- a/src/app/address/[principal]/head.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { ReactNode } from 'react';
-
-import { DefaultHeadTags } from '../../DefaultHeadTags';
-import { defaultTitle } from '../../common/consts/head';
-
-export default function Head(): ReactNode {
-  const title = `STX Address - ${defaultTitle}`;
-  return (
-    <>
-      <title>{title}</title>
-      <meta property="og:title" content={title} />
-      <DefaultHeadTags />
-    </>
-  );
-}
diff --git a/src/app/address/[principal]/page.tsx b/src/app/address/[principal]/page.tsx
deleted file mode 100644
index c85f60c57..000000000
--- a/src/app/address/[principal]/page.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-'use client';
-
-import { PageTitle } from '@/app/common/components/PageTitle';
-import { useAccountBalance } from '@/app/common/queries/useAccountBalance';
-import { useNftHoldings } from '@/app/common/queries/useNftHoldings';
-import { useApi } from '@/common/api/client';
-import { microStxToStx, truncateMiddle } from '@/common/utils';
-import { hasTokenBalance } from '@/common/utils/accounts';
-import { TokenBalancesCard } from '@/components/balances/principal-token-balances';
-import { StxBalances } from '@/components/balances/stx-balance-card';
-import { Meta } from '@/components/meta-head';
-import { UnlockingScheduleModal } from '@/components/modals/unlocking-schedule';
-import { AddressSummary } from '@/features/address-page/address-summary';
-import { Grid, GridProps, Stack } from '@/ui/components';
-import * as React from 'react';
-
-import { AddressTxListTabs } from '../../common/components/tx-lists/tabs/AddressTxListTabs';
-import { useAddressNonces } from '../../common/queries/useAddressNonces';
-
-const ContentWrapper = (props: GridProps) => {
-  return (
-    <Grid
-      gridColumnGap="32px"
-      gridTemplateColumns={['100%', '100%', 'repeat(1, calc(100% - 352px) 320px)']}
-      gridRowGap={['32px', '32px', 'unset']}
-      maxWidth="100%"
-      alignItems="flex-start"
-      {...props}
-    />
-  );
-};
-
-export default function AddressPage({ params: { principal } }: any) {
-  const api = useApi();
-
-  const { data: balance } = useAccountBalance(
-    api,
-    { address: principal },
-    { refetchOnWindowFocus: true }
-  );
-  const { data: nftHoldings } = useNftHoldings(
-    api,
-    { address: principal },
-    { refetchOnWindowFocus: true }
-  );
-  const { data: nonces } = useAddressNonces(api, { address: principal });
-
-  const hasTokenBalances = hasTokenBalance(balance);
-
-  return (
-    <>
-      <Meta
-        title={`STX Address ${truncateMiddle(principal)}`}
-        labels={[
-          {
-            label: 'STX Balance',
-            data: `${balance?.stx?.balance ? microStxToStx(balance.stx.balance) : 0} STX`,
-          },
-        ]}
-      />
-      <UnlockingScheduleModal balance={balance} />
-      <PageTitle>Address details</PageTitle>
-      <ContentWrapper>
-        <Stack spacing="32px">
-          <AddressSummary
-            principal={principal}
-            hasTokenBalances={hasTokenBalances}
-            balances={balance}
-            lastExecutedTxNonce={nonces?.last_executed_tx_nonce}
-          />
-          <AddressTxListTabs address={principal} />
-        </Stack>
-        {balance && (
-          <Stack spacing="32px">
-            <StxBalances principal={principal} balances={balance} />
-            <TokenBalancesCard balances={balance} nftHoldings={nftHoldings} />
-          </Stack>
-        )}
-      </ContentWrapper>
-    </>
-  );
-}
diff --git a/src/app/block/[hash]/error.tsx b/src/app/block/[hash]/error.tsx
deleted file mode 100644
index 3208b2ac7..000000000
--- a/src/app/block/[hash]/error.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-'use client';
-
-import { MessageWithIcon } from '@/components/message-with-icon';
-import { Meta } from '@/components/meta-head';
-import { Section } from '@/components/section';
-import { ButtonLink } from '@/ui/ButtonLink';
-import { Box, Grid, Stack } from '@/ui/components';
-import { Title } from '@/ui/typography';
-import * as Sentry from '@sentry/nextjs';
-import * as React from 'react';
-import { useEffect } from 'react';
-import { TbAlertOctagon } from 'react-icons/tb';
-
-export default function Error({ error }: { error: any; reset: () => void }) {
-  useEffect(() => {
-    console.error(error);
-    if (error.status === 404) return;
-    Sentry.captureException(error);
-  }, [error]);
-  return (
-    <>
-      <Meta title="Block hash not found" />
-      <Title mb={['16px', '16px', '0']} mt="64px" as="h1" color="white" fontSize="36px">
-        Block not found
-      </Title>
-      <Section mt="32px">
-        <Grid placeItems="center" p="32px" minHeight="350px">
-          <Box>
-            <MessageWithIcon
-              icon={TbAlertOctagon}
-              title="This hash doesn't seem right."
-              message="This page isn't available, and it looks like the block hash provided isn't correct."
-              action={
-                <Stack isInline spacing="16px">
-                  <Box>
-                    <ButtonLink href="/" mt="24px">
-                      Go home
-                    </ButtonLink>
-                  </Box>
-                  <Box>
-                    <ButtonLink href="/blocks" variant="secondary" mt="24px">
-                      All blocks
-                    </ButtonLink>
-                  </Box>
-                </Stack>
-              }
-            />
-          </Box>
-        </Grid>
-      </Section>
-    </>
-  );
-}
diff --git a/src/app/block/[hash]/head.tsx b/src/app/block/[hash]/head.tsx
deleted file mode 100644
index 0c2546554..000000000
--- a/src/app/block/[hash]/head.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { truncateMiddle } from '@/common/utils';
-
-import { DefaultHeadTags } from '../../DefaultHeadTags';
-
-export default function Head({ params: { hash } }: any) {
-  const title = `Block ${truncateMiddle(hash)}`;
-  return (
-    <>
-      <title>{title}</title>
-      <meta property="og:title" content={title} />
-      <DefaultHeadTags />
-    </>
-  );
-}
diff --git a/src/app/block/[hash]/page.tsx b/src/app/block/[hash]/page.tsx
deleted file mode 100644
index 2d65703f5..000000000
--- a/src/app/block/[hash]/page.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-'use client';
-
-import { PageTitle } from '@/app/common/components/PageTitle';
-import { useGlobalContext } from '@/common/context/useAppContext';
-import { BtcStxBlockLinks } from '@/components/btc-stx-block-links';
-import { FilterButton } from '@/components/filter-button';
-import '@/components/loaders/skeleton-text';
-import { SectionBoxSkeleton } from '@/components/loaders/skeleton-transaction';
-import { Meta } from '@/components/meta-head';
-import { PageWrapper } from '@/components/page-wrapper';
-import { Section } from '@/components/section';
-import { Timestamp } from '@/components/timestamp';
-import { BlockQueryKeys, blockQK } from '@/features/block/query-keys';
-import { getBlockQueries } from '@/features/block/use-block-queries';
-import { getTransactionQueries } from '@/features/transaction/use-transaction-queries';
-import { Box } from '@/ui/components';
-import * as React from 'react';
-import { useInfiniteQuery, useQuery } from '@tanstack/react-query';
-
-import { KeyValueHorizontal } from '../../common/components/KeyValueHorizontal';
-import { Value } from '../../common/components/Value';
-import { useVerticallyStackedElementsBorderStyle } from '../../common/styles/border';
-import { BtcAnchorBlockCard } from '../../txid/[txid]/Cards/BtcAnchorBlockCard';
-import { BlockTxsList } from './tx-lists/BlockTxsList';
-
-export default function BlockSinglePage({ params: { hash } }: any) {
-  const networkUrl = useGlobalContext().activeNetwork.url;
-  const blockQueries = getBlockQueries(networkUrl);
-  const transactionQueries = getTransactionQueries(networkUrl);
-
-  const queryOptions = {
-    refetchOnWindowFocus: true,
-    retry: 0,
-    staleTime: Infinity,
-  };
-
-  const { data: block } = useQuery(
-    blockQK(BlockQueryKeys.block, hash),
-    blockQueries.fetchBlock(hash),
-    queryOptions
-  );
-
-  const blockTransactionsResponse = useInfiniteQuery(
-    blockQK(BlockQueryKeys.blockTransactions, hash),
-    transactionQueries.fetchBlockTransactions(hash),
-    queryOptions
-  );
-
-  const title = (block && `Block #${block.height.toLocaleString()}`) || '';
-
-  return (
-    <>
-      <Meta title={title} />
-      <PageTitle>{title}</PageTitle>
-      <PageWrapper>
-        <Section title="Summary">
-          <Box px="16px" css={useVerticallyStackedElementsBorderStyle}>
-            <KeyValueHorizontal label={'Hash'} value={<Value>{hash}</Value>} copyValue={hash} />
-            {block && (
-              <>
-                <KeyValueHorizontal
-                  label={'Block height'}
-                  value={
-                    <BtcStxBlockLinks
-                      btcBlockHeight={block.burn_block_height}
-                      stxBlockHeight={block.height}
-                      stxBlockHash={block.hash}
-                    />
-                  }
-                />
-                <KeyValueHorizontal
-                  label={'Mined'}
-                  value={<Timestamp ts={block.burn_block_time} />}
-                />
-                <KeyValueHorizontal
-                  label={'Transactions'}
-                  value={<Value>{block.txs.length}</Value>}
-                />
-              </>
-            )}
-          </Box>
-        </Section>
-        {block ? <BtcAnchorBlockCard block={block} /> : null}
-      </PageWrapper>
-      {blockTransactionsResponse.isLoading ? (
-        <SectionBoxSkeleton />
-      ) : !!blockTransactionsResponse.data ? (
-        <Section title={'Transactions'} topRight={<FilterButton />} mt="32px">
-          <Box flexGrow={1}>
-            <BlockTxsList blockHash={hash} />
-          </Box>
-        </Section>
-      ) : null}
-    </>
-  );
-}
diff --git a/src/app/block/[hash]/tx-lists/BlockTxsList.tsx b/src/app/block/[hash]/tx-lists/BlockTxsList.tsx
deleted file mode 100644
index 377fd10a5..000000000
--- a/src/app/block/[hash]/tx-lists/BlockTxsList.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { useApi } from '@/common/api/client';
-import { SkeletonGenericTransactionList } from '@/components/loaders/skeleton-transaction';
-import { SectionFooterAction } from '@/components/section-footer-button';
-import { Box } from '@/ui/components';
-import * as React from 'react';
-import { FC, memo } from 'react';
-
-import { Transaction } from '@stacks/stacks-blockchain-api-types';
-
-import { FilteredTxs } from '../../../common/components/tx-lists/common/components/FilteredTxs';
-import { TxListItem } from '../../../common/components/tx-lists/list-items/TxListItem';
-import { useInfiniteQueryResult } from '../../../common/hooks/useInfiniteQueryResult';
-import { useBlockTxsInfinite } from '../../../common/queries/useBlockTxsInfinite';
-
-interface BlockTxsListProps {
-  blockHash: string;
-  limit?: number;
-}
-
-export const BlockTxsList: FC<BlockTxsListProps> = memo(({ blockHash, limit }) => {
-  const api = useApi();
-  const response = useBlockTxsInfinite(api, { blockHash });
-
-  const txs = useInfiniteQueryResult<Transaction>(response, limit);
-
-  if (response.isLoading) {
-    return <SkeletonGenericTransactionList />;
-  }
-
-  return (
-    <Box position={'relative'} px={'20px'}>
-      <FilteredTxs txs={txs} TxListItem={TxListItem} />
-      <SectionFooterAction
-        isLoading={response.isFetchingNextPage}
-        hasNextPage={response.hasNextPage}
-        fetchNextPage={limit ? undefined : response.fetchNextPage}
-        label={'transactions'}
-      />
-    </Box>
-  );
-});
diff --git a/src/app/blocks/head.tsx b/src/app/blocks/head.tsx
deleted file mode 100644
index 638d95abc..000000000
--- a/src/app/blocks/head.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { DefaultHeadTags } from '../DefaultHeadTags';
-
-export default function Head() {
-  const title = `Recent Blocks`;
-  return (
-    <>
-      <title>{title}</title>
-      <meta property="og:title" content={title} />
-      <DefaultHeadTags />
-    </>
-  );
-}
diff --git a/src/app/blocks/loading.tsx b/src/app/blocks/loading.tsx
deleted file mode 100644
index 464b7b823..000000000
--- a/src/app/blocks/loading.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import { SECTION_HEADER_HEIGHT } from '@/common/constants/sizes';
-import { ExplorerSkeletonLoader } from '@/components/loaders/skeleton-common';
-import { Box } from '@/ui/Box';
-import { Flex } from '@/ui/Flex';
-import { Text, Title } from '@/ui/typography';
-import React from 'react';
-
-function SSRSkeletonBlockList() {
-  return (
-    <Box position={'relative'} px={'20px'}>
-      {[...Array(10)].map((_, i) => (
-        <Flex flexGrow={1} gap={'16px'} alignItems={'center'} py={'24px'} minWidth={0}>
-          <Box width={'40px'}>
-            <ExplorerSkeletonLoader width={'40px'} height={'40px'} circle={true} />
-          </Box>
-          <Flex direction={'column'} gap={'6px'} minWidth={0}>
-            <Flex direction={'column'} minHeight={'24px'} justifyContent={'center'} mb={'8px'}>
-              <ExplorerSkeletonLoader width={'192px'} height={'15px'} />
-            </Flex>
-            <Box>
-              <ExplorerSkeletonLoader width={'180px'} height={'12px'} />
-            </Box>
-          </Flex>
-          <Flex direction={'column'} gap={'8px'} ml={'auto'} flexShrink={0}>
-            <Box alignSelf={'flex-end'}>
-              <ExplorerSkeletonLoader width={'89px'} height={'14px'} />
-            </Box>
-            <Box alignSelf={'flex-end'}>
-              <ExplorerSkeletonLoader width={'72px'} height={'12px'} />
-            </Box>
-          </Flex>
-        </Flex>
-      ))}
-    </Box>
-  );
-}
-
-export default function Loading() {
-  return (
-    <>
-      <Box mb="24px">
-        <Title mt="72px" color="white" as="h1" fontSize="36px">
-          Blocks
-        </Title>
-      </Box>
-      <Flex
-        direction={'column'}
-        mb="32px"
-        gap={'24px'}
-        bg={'bg.light'}
-        borderRadius={'12px'}
-        borderWidth={'1px'}
-      >
-        <Flex
-          alignItems="center"
-          bg={'bg'}
-          justifyContent="space-between"
-          borderBottomWidth="1px"
-          flexShrink={0}
-          p="12px 16px"
-          borderTopRightRadius="12px"
-          borderTopLeftRadius="12px"
-          minHeight={SECTION_HEADER_HEIGHT}
-        >
-          <Text color={'textTitle'} fontWeight="500" py={'10px'}>
-            Recent Blocks
-          </Text>
-        </Flex>
-        <Flex flexDirection="column" flexGrow={1}>
-          <Flex flexDirection="column" flexGrow={1} px="20px">
-            <SSRSkeletonBlockList />
-          </Flex>
-        </Flex>
-      </Flex>
-    </>
-  );
-}
diff --git a/src/app/blocks/page.tsx b/src/app/blocks/page.tsx
deleted file mode 100644
index ed520607d..000000000
--- a/src/app/blocks/page.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-'use client';
-
-import { PageTitle } from '@/app/common/components/PageTitle';
-import { Flex } from '@/ui/components';
-import type { NextPage } from 'next';
-import * as React from 'react';
-
-import { BlocksList } from '../components/BlockList';
-
-const BlocksPage: NextPage = () => (
-  <Flex direction={'column'}>
-    <PageTitle>Blocks</PageTitle>
-    <BlocksList />
-  </Flex>
-);
-
-export default BlocksPage;
diff --git a/src/app/common/claritySyntax.ts b/src/app/common/claritySyntax.ts
deleted file mode 100644
index c27817401..000000000
--- a/src/app/common/claritySyntax.ts
+++ /dev/null
@@ -1,553 +0,0 @@
-export const claritySyntax = {
-  $schema: 'https://raw.githubusercontent.com/martinring/tmlanguage/master/tmlanguage.json',
-  name: 'clarity',
-  scopeName: 'source.clar',
-  uuid: 'f9e9871d-2ea6-4be0-afd2-fc382d704716',
-  patterns: [
-    { include: '#expression' },
-    { include: '#define-constant' },
-    { include: '#define-data-var' },
-    { include: '#define-map' },
-    { include: '#define-function' },
-    { include: '#define-fungible-token' },
-    { include: '#define-non-fungible-token' },
-    { include: '#define-trait' },
-    { include: '#use-trait' },
-  ],
-  repository: {
-    comment: {
-      name: 'comment.line.semicolon.clarity',
-      match: '(?x) (?<=^|[()\\[\\]{}",\'`;\\s]) (;) .* $',
-    },
-    expression: {
-      patterns: [
-        { include: '#comment' },
-        { include: '#keyword' },
-        { include: '#literal' },
-        { include: '#let-func' },
-        { include: '#built-in-func' },
-        { include: '#get-set-func' },
-      ],
-    },
-    keyword: {
-      name: 'constant.language.clarity',
-      match:
-        '\\b(?:block-height|burn-block-height|chain-id|contract-caller|is-in-regtest|stx-liquid-supply|tx-sender|tx-sponsor?)\\b',
-    },
-    'define-function': {
-      begin: '(?x) (\\() \\s* (define-(?:public|private|read-only)) \\s+',
-      end: '(\\))',
-      beginCaptures: {
-        '1': { name: 'punctuation.define-function.start.clarity' },
-        '2': { name: 'keyword.declaration.define-function.clarity' },
-      },
-      endCaptures: {
-        '1': { name: 'punctuation.define-function.end.clarity' },
-      },
-      name: 'meta.define-function',
-      patterns: [
-        { include: '#expression' },
-        { include: '#user-func' },
-        {
-          begin: '(?x) (\\() \\s* ([a-zA-Z][a-zA-Z0-9_\\-\\!\\?]*) \\s*',
-          end: '(\\))',
-          beginCaptures: {
-            '1': { name: 'punctuation.function-signature.start.clarity' },
-            '2': { name: 'entity.name.function.clarity' },
-          },
-          endCaptures: {
-            '1': { name: 'punctuation.function-signature.end.clarity' },
-          },
-          name: 'meta.define-function-signature',
-          patterns: [
-            {
-              begin: '(?x) (\\() \\s* ([a-zA-Z][a-zA-Z0-9_\\-\\!\\?]*) \\s+',
-              end: '(\\))',
-              beginCaptures: {
-                '1': { name: 'punctuation.function-argument.start.clarity' },
-                '2': { name: 'variable.parameter.clarity' },
-              },
-              endCaptures: {
-                '1': { name: 'punctuation.function-argument.end.clarity' },
-              },
-              name: 'meta.function-argument',
-              patterns: [{ include: '#data-type' }],
-            },
-          ],
-        },
-      ],
-    },
-    'define-fungible-token': {
-      match:
-        '(?x) (\\() \\s* (define-fungible-token) \\s+ ([a-zA-Z][a-zA-Z0-9_\\-\\!\\?]*) (?:\\s+(u\\d+))?',
-      captures: {
-        '1': { name: 'punctuation.define-fungible-token.start.clarity' },
-        '2': { name: 'keyword.declaration.define-fungible-token.clarity' },
-        '3': {
-          name: 'entity.name.fungible-token-name.clarity variable.other.clarity',
-        },
-        '4': { name: 'constant.numeric.fungible-token-total-supply.clarity' },
-        '5': { name: 'punctuation.define-fungible-token.end.clarity' },
-      },
-    },
-    'define-non-fungible-token': {
-      begin:
-        '(?x) (\\() \\s* (define-non-fungible-token) \\s+ ([a-zA-Z][a-zA-Z0-9_\\-\\!\\?]*) \\s+',
-      end: '(\\))',
-      beginCaptures: {
-        '1': { name: 'punctuation.define-non-fungible-token.start.clarity' },
-        '2': {
-          name: 'keyword.declaration.define-non-fungible-token.clarity',
-        },
-        '3': {
-          name: 'entity.name.non-fungible-token-name.clarity variable.other.clarity',
-        },
-      },
-      endCaptures: {
-        '1': { name: 'punctuation.define-non-fungible-token.end.clarity' },
-      },
-      name: 'meta.define-non-fungible-token',
-      patterns: [{ include: '#data-type' }],
-    },
-    'define-trait': {
-      begin: '(?x) (\\() \\s* (define-trait) \\s+ ([a-zA-Z][a-zA-Z0-9_\\-\\!\\?]*) \\s+',
-      end: '(\\))',
-      beginCaptures: {
-        '1': { name: 'punctuation.define-trait.start.clarity' },
-        '2': { name: 'keyword.declaration.define-trait.clarity' },
-        '3': { name: 'entity.name.trait-name.clarity variable.other.clarity' },
-      },
-      endCaptures: {
-        '1': { name: 'punctuation.define-trait.end.clarity' },
-      },
-      name: 'meta.define-trait',
-      patterns: [
-        {
-          begin: '(?x) (\\() \\s*',
-          end: '(\\))',
-          beginCaptures: {
-            '1': { name: 'punctuation.define-trait-body.start.clarity' },
-          },
-          endCaptures: {
-            '1': { name: 'punctuation.define-trait-body.end.clarity' },
-          },
-          name: 'meta.define-trait-body',
-          patterns: [
-            { include: '#expression' },
-            {
-              begin: '(?x) (\\() \\s* ([a-zA-Z][a-zA-Z0-9_\\-\\!\\?]+\\??) \\s+',
-              end: '(\\))',
-              beginCaptures: {
-                '1': { name: 'punctuation.trait-function.start.clarity' },
-                '2': {
-                  name: 'entity.name.trait-function-name.clarity variable.other.clarity',
-                },
-              },
-              endCaptures: {
-                '1': { name: 'punctuation.trait-function.end.clarity' },
-              },
-              name: 'meta.trait-function',
-              patterns: [
-                { include: '#data-type' },
-                {
-                  begin: '(?x) (\\() \\s*',
-                  end: '(\\))',
-                  beginCaptures: {
-                    '1': {
-                      name: 'punctuation.trait-function-args.start.clarity',
-                    },
-                  },
-                  endCaptures: {
-                    '1': {
-                      name: 'punctuation.trait-function-args.end.clarity',
-                    },
-                  },
-                  name: 'meta.trait-function-args',
-                  patterns: [{ include: '#data-type' }],
-                },
-              ],
-            },
-          ],
-        },
-      ],
-    },
-    'use-trait': {
-      begin: '(?x) (\\() \\s* (use-trait) \\s+ ([a-zA-Z][a-zA-Z0-9_\\-\\!\\?]*) \\s+',
-      end: '(\\))',
-      beginCaptures: {
-        '1': { name: 'punctuation.use-trait.start.clarity' },
-        '2': { name: 'keyword.declaration.use-trait.clarity' },
-        '3': {
-          name: 'entity.name.trait-alias.clarity variable.other.clarity',
-        },
-      },
-      endCaptures: {
-        '1': { name: 'punctuation.use-trait.end.clarity' },
-      },
-      name: 'meta.use-trait',
-      patterns: [{ include: '#literal' }],
-    },
-    'define-constant': {
-      begin: '(?x) (\\() \\s* (define-constant) \\s+ ([a-zA-Z][a-zA-Z0-9_\\-\\!\\?]*) \\s+',
-      end: '(\\))',
-      beginCaptures: {
-        '1': { name: 'punctuation.define-constant.start.clarity' },
-        '2': { name: 'keyword.declaration.define-constant.clarity' },
-        '3': {
-          name: 'entity.name.constant-name.clarity variable.other.clarity',
-        },
-      },
-      endCaptures: {
-        '1': { name: 'punctuation.define-constant.end.clarity' },
-      },
-      name: 'meta.define-constant',
-      patterns: [{ include: '#expression' }],
-    },
-    'define-data-var': {
-      begin: '(?x) (\\() \\s* (define-data-var) \\s+ ([a-zA-Z][a-zA-Z0-9_\\-\\!\\?]*) \\s+',
-      end: '(\\))',
-      beginCaptures: {
-        '1': { name: 'punctuation.define-data-var.start.clarity' },
-        '2': { name: 'keyword.declaration.define-data-var.clarity' },
-        '3': {
-          name: 'entity.name.data-var-name.clarity variable.other.clarity',
-        },
-      },
-      endCaptures: {
-        '1': { name: 'punctuation.define-data-var.end.clarity' },
-      },
-      name: 'meta.define-data-var',
-      patterns: [{ include: '#data-type' }, { include: '#expression' }],
-    },
-    'define-map': {
-      begin: '(?x) (\\() \\s* (define-map) \\s+ ([a-zA-Z][a-zA-Z0-9_\\-\\!\\?]*) \\s+',
-      end: '(\\))',
-      beginCaptures: {
-        '1': { name: 'punctuation.define-map.start.clarity' },
-        '2': { name: 'keyword.declaration.define-map.clarity' },
-        '3': { name: 'entity.name.map-name.clarity variable.other.clarity' },
-      },
-      endCaptures: {
-        '1': { name: 'punctuation.define-map.end.clarity' },
-      },
-      name: 'meta.define-map',
-      patterns: [{ include: '#data-type' }, { include: '#expression' }],
-    },
-    literal: {
-      patterns: [
-        { include: '#number-literal' },
-        { include: '#bool-literal' },
-        { include: '#string-literal' },
-        { include: '#tuple-literal' },
-        { include: '#principal-literal' },
-        { include: '#list-literal' },
-        { include: '#optional-literal' },
-        { include: '#response-literal' },
-      ],
-      repository: {
-        'number-literal': {
-          patterns: [
-            {
-              comment: 'unsigned integers',
-              name: 'constant.numeric.uint.clarity',
-              match: '\\bu\\d+\\b',
-            },
-            {
-              comment: 'signed integers',
-              name: 'constant.numeric.int.clarity',
-              match: '\\b\\d+\\b',
-            },
-            {
-              comment: 'hexadecimals',
-              name: 'constant.numeric.hex.clarity',
-              match: '\\b0x[0-9a-f]*\\b',
-            },
-          ],
-        },
-        'bool-literal': {
-          name: 'constant.language.bool.clarity',
-          match: '\\b(true|false)\\b',
-        },
-        'string-literal': {
-          patterns: [
-            {
-              name: 'string.quoted.double.clarity',
-              begin: '(u?)(")',
-              beginCaptures: {
-                '1': { name: 'string.quoted.utf8.clarity' },
-                '2': { name: 'punctuation.definition.string.begin.clarity' },
-              },
-              end: '"',
-              endCaptures: {
-                '1': { name: 'punctuation.definition.string.end.clarity' },
-              },
-              patterns: [
-                {
-                  name: 'constant.character.escape.quote',
-                  match: '\\\\.',
-                },
-              ],
-            },
-          ],
-        },
-        'tuple-literal': {
-          begin: '(\\{)',
-          end: '(\\})',
-          beginCaptures: {
-            '1': { name: 'punctuation.tuple.start.clarity' },
-          },
-          endCaptures: {
-            '1': { name: 'punctuation.tuple.end.clarity' },
-          },
-          name: 'meta.tuple',
-          patterns: [
-            {
-              name: 'entity.name.tag.tuple-key.clarity',
-              match: '([a-zA-Z][a-zA-Z0-9_\\-\\!\\?]*)(?=:)',
-            },
-            { include: '#expression' },
-            { include: '#user-func' },
-          ],
-        },
-        'principal-literal': {
-          name: 'constant.other.principal.clarity',
-          match:
-            "(?x)  \\'[0-9A-Z]{28,41}(:?\\.[a-zA-Z][a-zA-Z0-9\\-]+){0,2} | (\\.[a-zA-Z][a-zA-Z0-9\\-]*){1,2} (?=[\\s(){},]|$)",
-        },
-        'list-literal': {
-          begin: '(?x) (\\() \\s* (list) \\s+',
-          end: '(\\))',
-          beginCaptures: {
-            '1': { name: 'punctuation.list.start.clarity' },
-            '2': { name: 'entity.name.type.list.clarity' },
-          },
-          endCaptures: {
-            '1': { names: 'punctuation.list.end.clarity' },
-          },
-          name: 'meta.list',
-          patterns: [{ include: '#expression' }, { include: '#user-func' }],
-        },
-        'optional-literal': {
-          patterns: [
-            {
-              match: '\\b(none)\\b',
-              name: 'constant.language.none.clarity',
-            },
-            {
-              begin: '(?x) (\\() \\s* (some) \\s+',
-              end: '(\\))',
-              beginCaptures: {
-                '1': { name: 'punctuation.some.start.clarity' },
-                '2': { name: 'constant.language.some.clarity' },
-              },
-              endCaptures: {
-                '1': { name: 'punctuation.some.end.clarity' },
-              },
-              name: 'meta.some',
-              patterns: [{ include: '#expression' }],
-            },
-          ],
-        },
-        'response-literal': {
-          begin: '(?x) (\\() \\s* (ok|err) \\s+',
-          end: '(\\))',
-          beginCaptures: {
-            '1': { name: 'punctuation.response.start.clarity' },
-            '2': { name: 'constant.language.ok-err.clarity' },
-          },
-          endCaptures: {
-            '1': { name: 'punctuation.response.end.clarity' },
-          },
-          name: 'meta.response',
-          patterns: [{ include: '#expression' }, { include: '#user-func' }],
-        },
-      },
-    },
-    'data-type': {
-      patterns: [
-        { include: '#comment' },
-        {
-          comment: 'numerics',
-          name: 'entity.name.type.numeric.clarity',
-          match: '\\b(uint|int)\\b',
-        },
-        {
-          comment: 'principal',
-          name: 'entity.name.type.principal.clarity',
-          match: '\\b(principal)\\b',
-        },
-        {
-          comment: 'bool',
-          name: 'entity.name.type.bool.clarity',
-          match: '\\b(bool)\\b',
-        },
-        {
-          match: '(?x) (\\() \\s* (?:(string-ascii|string-utf8)\\s+(\\d+)) \\s* (\\))',
-          captures: {
-            '1': { name: 'punctuation.string-def.start.clarity' },
-            '2': { name: 'entity.name.type.string.clarity' },
-            '3': { name: 'constant.numeric.string-len.clarity' },
-            '4': { name: 'punctuation.string-def.end.clarity' },
-          },
-        },
-        {
-          match: '(?x) (\\() \\s* (buff)\\s+(\\d+)\\s* (\\))',
-          captures: {
-            '1': { name: 'punctuation.buff-def.start.clarity' },
-            '2': { name: 'entity.name.type.buff.clarity' },
-            '3': { name: 'constant.numeric.buf-len.clarity' },
-            '4': { name: 'punctuation.buff-def.end.clarity' },
-          },
-        },
-        {
-          comment: 'optional',
-          begin: '(?x) (\\() \\s* (optional)\\s+',
-          beginCaptures: {
-            '1': { name: 'punctuation.optional-def.start.clarity' },
-            '2': { name: 'storage.type.modifier' },
-          },
-          end: '(\\))',
-          endCaptures: {
-            '1': { name: 'punctuation.optional-def.end.clarity' },
-          },
-          name: 'meta.optional-def',
-          patterns: [{ include: '#data-type' }],
-        },
-        {
-          comment: 'response',
-          begin: '(?x) (\\() \\s* (response)\\s+',
-          beginCaptures: {
-            '1': { name: 'punctuation.response-def.start.clarity' },
-            '2': { name: 'storage.type.modifier' },
-          },
-          end: '(\\))',
-          endCaptures: {
-            '1': { name: 'punctuation.response-def.end.clarity' },
-          },
-          name: 'meta.response-def',
-          patterns: [{ include: '#data-type' }],
-        },
-        {
-          comment: 'list',
-          begin: '(?x) (\\() \\s* (list) \\s+ (\\d+) \\s+',
-          end: '(\\))',
-          beginCaptures: {
-            '1': { name: 'punctuation.list-def.start.clarity' },
-            '2': { name: 'entity.name.type.list.clarity' },
-            '3': { name: 'constant.numeric.list-len.clarity' },
-          },
-          endCaptures: {
-            '1': { name: 'punctuation.list-def.end.clarity' },
-          },
-          name: 'meta.list-def',
-          patterns: [{ include: '#data-type' }],
-        },
-        {
-          begin: '(\\{)',
-          beginCaptures: {
-            '1': { name: 'punctuation.tuple-def.start.clarity' },
-          },
-          end: '(\\})',
-          endCaptures: {
-            '1': { name: 'punctuation.tuple-def.end.clarity' },
-          },
-          name: 'meta.tuple-def',
-          patterns: [
-            {
-              name: 'entity.name.tag.tuple-data-type-key.clarity',
-              match: '([a-zA-Z][a-zA-Z0-9_\\-\\!\\?]*)(?=:)',
-            },
-            { include: '#data-type' },
-          ],
-        },
-      ],
-    },
-    'built-in-func': {
-      begin:
-        '(?x) (\\() \\s* (\\-|\\+|<\\=|>\\=|<|>|\\*|/|and|append|as-contract|as-max-len\\?|asserts!|at-block|begin|bit-and|bit-not|bit-or|bit-shift-left|bit-shift-right|bit-xor|buff-to-int-be|buff-to-int-le|buff-to-uint-be|buff-to-uint-le|concat|contract-call\\?|contract-of|default-to|element-at|element-at\\?|filter|fold|from-consensus-buff\\?|ft-burn\\?|ft-get-balance|ft-get-supply|ft-mint\\?|ft-transfer\\?|get-block-info\\?|get-burn-block-info\\?|hash160|if|impl-trait|index-of|index-of\\?|int-to-ascii|int-to-utf8|is-eq|is-err|is-none|is-ok|is-some|is-standard|keccak256|len|log2|map|match|merge|mod|nft-burn\\?|nft-get-owner\\?|nft-mint\\?|nft-transfer\\?|not|or|pow|principal-construct\\?|principal-destruct\\?|principal-of\\?|print|replace-at\\?|secp256k1-recover\\?|secp256k1-verify|sha256|sha512|sha512/256|slice\\?|sqrti|string-to-int\\?|string-to-uint\\?|stx-account|stx-burn\\?|stx-get-balance|stx-transfer-memo\\?|stx-transfer\\?|to-consensus-buff\\?|to-int|to-uint|try!|unwrap!|unwrap-err!|unwrap-err-panic|unwrap-panic|xor) \\s+',
-      end: '(\\))',
-      beginCaptures: {
-        '1': { name: 'punctuation.built-in-function.start.clarity' },
-        '2': { name: 'keyword.declaration.built-in-function.clarity' },
-      },
-      endCaptures: {
-        '1': { name: 'punctuation.built-in-function.end.clarity' },
-      },
-      name: 'meta.built-in-function',
-      patterns: [{ include: '#expression' }, { include: '#user-func' }],
-    },
-    'get-set-func': {
-      name: 'meta.get-set-func',
-      begin:
-        '(?x) (\\() \\s* (var-get|var-set|map-get\\?|map-set|map-insert|map-delete|get) \\s+ ([a-zA-Z][a-zA-Z0-9_\\-\\!\\?]*) \\s*',
-      end: '(\\))',
-      beginCaptures: {
-        '1': { name: 'punctuation.get-set-func.start.clarity' },
-        '2': { name: 'keyword.control.clarity' },
-        '3': { name: 'variable.other.clarity' },
-      },
-      endCaptures: {
-        '1': { name: 'punctuation.get-set-func.end.clarity' },
-      },
-      patterns: [{ include: '#expression' }],
-    },
-    'let-func': {
-      begin: '(?x) (\\() \\s* (let) \\s*',
-      end: '(\\))',
-      beginCaptures: {
-        '1': { name: 'punctuation.let-function.start.clarity' },
-        '2': { name: 'keyword.declaration.let-function.clarity' },
-      },
-      endCaptures: {
-        '1': { name: 'punctuation.let-function.end.clarity' },
-      },
-      name: 'meta.let-function',
-      patterns: [
-        { include: '#expression' },
-        { include: '#user-func' },
-        {
-          begin: '(?x) (\\() \\s*',
-          end: '(\\))',
-          beginCaptures: {
-            '1': { name: 'punctuation.let-var.start.clarity' },
-          },
-          endCaptures: {
-            '1': { name: 'punctuation.let-var.end.clarity' },
-          },
-          name: 'meta.let-var',
-          patterns: [
-            {
-              begin: '(?x) (\\() ([a-zA-Z][a-zA-Z0-9_\\-\\!\\?]*) \\s+',
-              end: '(\\))',
-              beginCaptures: {
-                '1': { name: 'punctuation.let-local-var.start.clarity' },
-                '2': {
-                  name: 'entity.name.let-local-var-name.clarity variable.parameter.clarity',
-                },
-              },
-              endCaptures: {
-                '1': { name: 'punctuation.let-local-var.end.clarity' },
-              },
-              name: 'meta.let-local-var',
-              patterns: [{ include: '#expression' }, { include: '#user-func' }],
-            },
-            { include: '#expression' },
-          ],
-        },
-      ],
-    },
-    'user-func': {
-      begin: '(?x) (\\() \\s* (([a-zA-Z][a-zA-Z0-9_\\-\\!\\?]*)) \\s*',
-      end: '(\\))',
-      beginCaptures: {
-        '1': { name: 'punctuation.user-function.start.clarity' },
-        '2': { name: 'entity.name.function.clarity' },
-      },
-      endCaptures: {
-        '1': { name: 'punctuation.user-function.end.clarity' },
-      },
-      name: 'meta.user-function',
-      patterns: [{ include: '#expression' }, { include: '$self' }],
-    },
-  },
-};
diff --git a/src/app/common/components/ContractAvailableFunctions.tsx b/src/app/common/components/ContractAvailableFunctions.tsx
deleted file mode 100644
index 310f7aaa8..000000000
--- a/src/app/common/components/ContractAvailableFunctions.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import { FC, useState } from 'react';
-import { ContractWithParsedAbi } from '@/common/types/contract';
-import { useUser } from '@/app/sandbox/hooks/useUser';
-import { useAppDispatch } from '@/common/state/hooks';
-import { Flex } from '@/ui/Flex';
-import { Button } from '@/ui/Button';
-import { setUserData } from '@/app/sandbox/sandbox-slice';
-import { FunctionView } from '@/app/sandbox/components/ContractCall/FunctionView';
-import { ClarityAbiFunction } from '@stacks/transactions';
-import { TextLink } from '@/ui/TextLink';
-import { Caption } from '@/ui/typography';
-import { showFn } from '@/app/common/utils/sandbox';
-import { AbiFunction } from '@/app/sandbox/components/ContractCall/AvailableFunctionsView';
-
-export const ContractAvailableFunctions: FC<{
-  contractId: string;
-  contract: ContractWithParsedAbi;
-}> = ({ contractId, contract }) => {
-  const { isConnected, connect } = useUser();
-  const dispatch = useAppDispatch();
-  const [functionName, setFunctionName] = useState('');
-  return (
-    <>
-      {!isConnected ? (
-        <Flex alignItems={'center'} justifyContent={'center'} py={'24px'}>
-          <Button
-            onClick={() =>
-              connect({
-                onFinish: authData => {
-                  dispatch(setUserData({ userData: authData.userSession.loadUserData() }));
-                },
-              })
-            }
-          >
-            Connect Stacks Wallet
-          </Button>
-        </Flex>
-      ) : functionName ? (
-        <FunctionView
-          contractId={contractId}
-          fn={
-            contract?.abi?.functions?.find(
-              (fn: any) => fn.name === functionName
-            ) as unknown as ClarityAbiFunction
-          }
-          cancelButton={
-            <TextLink onClick={() => setFunctionName('')}>
-              <Caption _hover={{ cursor: 'pointer', color: 'textTitle' }} mt="16px">
-                Cancel
-              </Caption>
-            </TextLink>
-          }
-        />
-      ) : (
-        contract?.abi?.functions.map(
-          (abiFn: any) =>
-            showFn(contractId, abiFn) && (
-              <AbiFunction
-                key={abiFn.name}
-                abiFn={abiFn}
-                onClick={() => {
-                  setFunctionName(abiFn.name);
-                }}
-              />
-            )
-        )
-      )}
-    </>
-  );
-};
diff --git a/src/app/common/components/CopyButton.tsx b/src/app/common/components/CopyButton.tsx
deleted file mode 100644
index b010a1e65..000000000
--- a/src/app/common/components/CopyButton.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { IconButton, IconButtonProps, Tooltip } from '@/ui/components';
-import { useClipboard } from '@chakra-ui/react';
-import * as React from 'react';
-import { FC, memo } from 'react';
-import { AiOutlineCopy } from 'react-icons/ai';
-
-export const CopyButton: FC<IconButtonProps & { initialValue: string }> = memo(
-  ({ initialValue, ...rest }) => {
-    const { onCopy, hasCopied } = useClipboard(initialValue);
-    return (
-      <Tooltip label={hasCopied ? 'Copied!' : 'Copy to clipboard'}>
-        <IconButton
-          icon={<AiOutlineCopy strokeWidth={1.75} size={'20px'} color={'textBody'} />}
-          onClick={onCopy}
-          height={'auto'}
-          _focus={{ background: 'none' }}
-          _hover={{ background: 'bg4' }}
-          {...rest}
-        />
-      </Tooltip>
-    );
-  }
-);
diff --git a/src/app/common/components/KeyValueHorizontal.tsx b/src/app/common/components/KeyValueHorizontal.tsx
deleted file mode 100644
index 062245fb9..000000000
--- a/src/app/common/components/KeyValueHorizontal.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import { Flex, FlexProps } from '@/ui/components';
-import { css } from '@emotion/react';
-import { FC, ReactNode } from 'react';
-
-import { CopyButton } from './CopyButton';
-
-export interface KeyValueHorizontalProps {
-  label: string;
-  value: ReactNode;
-  copyValue?: string;
-  labelProps?: FlexProps;
-}
-
-const rowStyle = css`
-  .fancy-copy {
-    opacity: 0;
-    position: relative;
-    right: 10px;
-    transition: opacity 0.4s ease-in-out, right 0.4s ease-in-out;
-  }
-  &:hover {
-    .fancy-copy {
-      opacity: 1;
-      right: 0;
-    }
-  }
-`;
-
-export const KeyValueHorizontal: FC<KeyValueHorizontalProps> = ({
-  label,
-  value,
-  copyValue,
-  labelProps,
-}) => {
-  return (
-    <Flex
-      py={'16px'}
-      alignItems={'center'}
-      css={rowStyle}
-      gap={'10px'}
-      flexWrap="nowrap"
-      minHeight={'73px'}
-    >
-      <Flex fontSize={'12px'} color={'textCaption'} width={'140px'} flexShrink={0} {...labelProps}>
-        {label}
-      </Flex>
-      <Flex
-        flexDirection={['column', 'column', 'row']}
-        alignItems={['flex-start', 'flex-start', 'center']}
-        color={'textBody'}
-        maxWidth={'calc(100% - 180px)'}
-        wordBreak={'break-all'}
-      >
-        {value}
-      </Flex>
-      {copyValue && (
-        <CopyButton
-          className={'fancy-copy'}
-          initialValue={copyValue}
-          aria-label={'copy row'}
-          size={'40px'}
-        />
-      )}
-    </Flex>
-  );
-};
diff --git a/src/app/common/components/KeyValueVertical.tsx b/src/app/common/components/KeyValueVertical.tsx
deleted file mode 100644
index 22a0bd420..000000000
--- a/src/app/common/components/KeyValueVertical.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import { Flex } from '@/ui/components';
-import { css } from '@emotion/react';
-import { FC, ReactNode } from 'react';
-
-import { CopyButton } from './CopyButton';
-
-export interface KeyValueVerticalProps {
-  label: string;
-  value: ReactNode;
-  copyValue?: string;
-}
-
-const rowStyle = css`
-  .fancy-copy {
-    opacity: 0;
-    position: relative;
-    right: 10px;
-    transition: opacity 0.4s ease-in-out, right 0.4s ease-in-out;
-  }
-  &:hover {
-    .fancy-copy {
-      opacity: 1;
-      right: 0;
-    }
-  }
-`;
-
-export const KeyValueVertical: FC<KeyValueVerticalProps> = ({ label, value, copyValue }) => {
-  return (
-    <Flex p={'24px 0'} css={rowStyle} gap={'10px'}>
-      <Flex gap={'10px'} direction={'column'}>
-        <Flex fontSize={'12px'} color={'textCaption'} width={'140px'}>
-          {label}
-        </Flex>
-        <Flex
-          flexDirection={['column', 'column', 'row']}
-          alignItems={['flex-start', 'flex-start', 'center']}
-          color={'textBody'}
-        >
-          {value}
-        </Flex>
-      </Flex>
-      {copyValue && (
-        <CopyButton
-          className={'fancy-copy'}
-          initialValue={copyValue}
-          aria-label={'copy row'}
-          size={'40px'}
-        />
-      )}
-    </Flex>
-  );
-};
diff --git a/src/app/common/components/ListItem.tsx b/src/app/common/components/ListItem.tsx
deleted file mode 100644
index edd50dc68..000000000
--- a/src/app/common/components/ListItem.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Flex, Stack } from '@/ui/components';
-import { Caption, Text, Title } from '@/ui/typography';
-import { FC, ReactNode } from 'react';
-
-export const ListItem: FC<{
-  icon: ReactNode;
-  title: ReactNode;
-  subTitle: ReactNode;
-  rightItem?: ReactNode;
-}> = ({ icon, title, subTitle, rightItem }) => (
-  <Flex justifyContent="space-between" alignItems="center" py="16px">
-    <Flex alignItems="center" width={'100%'} flexWrap={'nowrap'}>
-      {icon}
-      <Stack ml="16px" spacing="8px" overflow={'hidden'} flex={'1'}>
-        <Title fontSize={14} whiteSpace={'normal'} overflowWrap={'break-word'}>
-          {title}
-        </Title>
-        <Text fontSize={12}>{subTitle}</Text>
-      </Stack>
-    </Flex>
-    {typeof rightItem !== 'undefined' && <Caption>{rightItem}</Caption>}
-  </Flex>
-);
diff --git a/src/app/common/components/PageTitle.tsx b/src/app/common/components/PageTitle.tsx
deleted file mode 100644
index 94338e1b8..000000000
--- a/src/app/common/components/PageTitle.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import { Title } from '@/ui/typography';
-import { FC } from 'react';
-
-export const PageTitle: FC = props => (
-  <Title as="h1" color="white" fontSize="36px" mt={'72px'} mb={'36px'} {...props} />
-);
diff --git a/src/app/common/components/StxPriceButton/index.tsx b/src/app/common/components/StxPriceButton/index.tsx
deleted file mode 100644
index f635eeab9..000000000
--- a/src/app/common/components/StxPriceButton/index.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-'use client';
-
-import { getUsdValue } from '@/common/utils';
-import { Button, Tooltip } from '@/ui/components';
-import { useColorMode } from '@chakra-ui/react';
-import * as React from 'react';
-import { FC, useCallback, useMemo, useState } from 'react';
-
-import { MempoolTransaction, Transaction } from '@stacks/stacks-blockchain-api-types';
-
-import { useStxPriceForTx } from './useStxPriceForTx';
-
-const initialTooltipContent = 'Displaying current value; Click to show value on day of txn';
-
-const tooltipContent = ['Current value', 'Estimated value on day of txn'];
-
-interface StxPriceButtonProps {
-  tx: Transaction | MempoolTransaction;
-  value: number;
-}
-
-export const StxPriceButton: FC<StxPriceButtonProps> = ({ tx, value }) => {
-  const { historicalStxPrice, currentStxPrice } = useStxPriceForTx(tx);
-  const [tooltipContentIndex, setTooltipContentIndex] = useState(0);
-  const [initialRender, setInitialRender] = useState(true);
-  const toggleStxPrice = useCallback(() => {
-    if (initialRender) setInitialRender(false);
-    if (historicalStxPrice !== undefined) {
-      setTooltipContentIndex((tooltipContentIndex + 1) % tooltipContent.length);
-    }
-  }, [initialRender, tooltipContentIndex, historicalStxPrice]);
-  const showCurrentPriceForCompletedTransactions = tooltipContentIndex !== 1;
-  const currentPriceFormatted = useMemo(
-    () => getUsdValue(value, currentStxPrice, true),
-    [currentStxPrice, value]
-  );
-  const historicalPriceFormatted = useMemo(
-    () => getUsdValue(value, historicalStxPrice, true),
-    [historicalStxPrice, value]
-  );
-  const { colorMode } = useColorMode();
-  return (
-    <Tooltip label={initialRender ? initialTooltipContent : tooltipContent[tooltipContentIndex]}>
-      <Button
-        size={'xs'}
-        bg={colorMode === 'light' ? '#e9e8ff' : 'bg4.dark'}
-        color={'textBody'}
-        _hover={{
-          bg: colorMode === 'light' ? '#d9d7ff' : 'bg4.dark',
-        }}
-        ml={'5px'}
-        onClick={toggleStxPrice}
-        fontSize={'12px !important'}
-        _focus={{ outline: 0 }}
-        flexShrink={0}
-        suppressHydrationWarning={true}
-      >
-        {showCurrentPriceForCompletedTransactions
-          ? currentPriceFormatted
-          : historicalPriceFormatted}
-      </Button>
-    </Tooltip>
-  );
-};
diff --git a/src/app/common/components/StxPriceButton/useStxPriceForTx.ts b/src/app/common/components/StxPriceButton/useStxPriceForTx.ts
deleted file mode 100644
index 23e3fb725..000000000
--- a/src/app/common/components/StxPriceButton/useStxPriceForTx.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import dayjs from 'dayjs';
-
-import { MempoolTransaction, Transaction } from '@stacks/stacks-blockchain-api-types';
-
-import { useCurrentStxPrice, useHistoricalStxPrice } from '../../hooks/use-current-prices';
-
-export const useStxPriceForTx = (tx: Transaction | MempoolTransaction) => {
-  const hasBlockHeight = 'block_height' in tx;
-  const blockBurnTime = hasBlockHeight
-    ? tx.parent_burn_block_time_iso || tx.burn_block_time_iso
-    : undefined;
-  const { data: historicalStxPrice } = useHistoricalStxPrice(
-    dayjs(blockBurnTime).format('DD-MM-YYYY'),
-    { enabled: !!blockBurnTime }
-  );
-  const { data: currentStxPrice } = useCurrentStxPrice();
-  return { historicalStxPrice, currentStxPrice };
-};
diff --git a/src/app/common/components/TabsContainer.tsx b/src/app/common/components/TabsContainer.tsx
deleted file mode 100644
index 8bdb982df..000000000
--- a/src/app/common/components/TabsContainer.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { Tab } from '@/ui/Tab';
-import { TabList } from '@/ui/TabList';
-import { TabPanel } from '@/ui/TabPanel';
-import { TabPanels } from '@/ui/TabPanels';
-import { Tabs, TabsProps } from '@/ui/Tabs';
-import { FC, ReactNode } from 'react';
-
-export const TabsContainer: FC<
-  {
-    tabs: {
-      title: string;
-      content: ReactNode;
-    }[];
-    actions?: ReactNode;
-  } & Partial<TabsProps>
-> = ({ tabs, actions, ...tabsProps }) => (
-  <Tabs
-    variant={'soft-rounded'}
-    isLazy
-    gridColumnStart={'1'}
-    gridColumnEnd={'2'}
-    minWidth={0}
-    {...tabsProps}
-  >
-    <TabList flexWrap={'wrap'}>
-      {tabs.map(tab => (
-        <Tab key={`${tab.title}-title`}>{tab.title}</Tab>
-      ))}
-      {actions}
-    </TabList>
-    <TabPanels>
-      {tabs.map(tab => (
-        <TabPanel key={`${tab.title}-content`}>{tab.content}</TabPanel>
-      ))}
-    </TabPanels>
-  </Tabs>
-);
diff --git a/src/app/common/components/TwoColumnPage.tsx b/src/app/common/components/TwoColumnPage.tsx
deleted file mode 100644
index 2cc1cbce7..000000000
--- a/src/app/common/components/TwoColumnPage.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { Grid, Stack } from '@/ui/components';
-import * as React from 'react';
-import { ReactNode } from 'react';
-
-export const TwoColumnPage: React.FC<{
-  title: ReactNode;
-  leftContent: ReactNode;
-  rightContent: ReactNode;
-}> = ({ title, leftContent, rightContent }) => {
-  return (
-    <>
-      {title}
-      <Grid
-        gridColumnGap="32px"
-        gridTemplateColumns={[
-          '100%',
-          '100%',
-          rightContent ? 'repeat(1, calc(100% - 352px) 320px)' : '100%',
-        ]}
-        gridRowGap={['32px', '32px', 'unset']}
-        maxWidth="100%"
-        alignItems="flex-start"
-      >
-        <Stack spacing="32px">{leftContent}</Stack>
-        {rightContent && <Stack spacing="32px">{rightContent}</Stack>}
-      </Grid>
-    </>
-  );
-};
diff --git a/src/app/common/components/TxIcon.tsx b/src/app/common/components/TxIcon.tsx
deleted file mode 100644
index eb5d99859..000000000
--- a/src/app/common/components/TxIcon.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import { TransactionStatus } from '@/common/constants';
-import { TxStatus } from '@/common/types/tx';
-import { ClockIcon } from '@/components/icons/clock';
-import { FailedIcon } from '@/components/icons/failed';
-import { MicroblockIcon } from '@/components/icons/microblock';
-import { Circle, IconProps } from '@/ui/components';
-import { FunctionIcon } from '@/ui/icons';
-import { StxIcon } from '@/ui/icons/StxIcon';
-import { useColorMode } from '@chakra-ui/react';
-import React, { FC } from 'react';
-import { IconType } from 'react-icons';
-import { BsCodeSlash } from 'react-icons/bs';
-import { TbBrandCoinbase } from 'react-icons/tb';
-import { RxCube } from 'react-icons/rx';
-
-import { Transaction } from '@stacks/stacks-blockchain-api-types';
-import { TransactionType } from '@stacks/stacks-blockchain-api-types/generated';
-
-export const getTxTypeIcon = (txType: Transaction['tx_type']): IconType => {
-  switch (txType) {
-    case 'smart_contract':
-      return BsCodeSlash;
-
-    case 'contract_call':
-      return FunctionIcon;
-
-    case 'coinbase':
-      return TbBrandCoinbase;
-
-    case 'poison_microblock':
-      return RxCube;
-
-    default:
-      return StxIcon;
-  }
-};
-
-const StatusBubble: React.FC<{ txStatus?: TxStatus }> = ({ txStatus }) => {
-  const colorMode = useColorMode().colorMode;
-  if (txStatus === TransactionStatus.PENDING) {
-    return (
-      <Circle size="16px" position="absolute" bottom="-2px" right="-4px">
-        <ClockIcon color={`invert.${colorMode}`} fill={`bg.${colorMode}`} />
-      </Circle>
-    );
-  } else if (txStatus === TransactionStatus.FAILED) {
-    return (
-      <Circle size="16px" position="absolute" bottom="-2px" right="-4px">
-        <FailedIcon color={`feedbackError.${colorMode}`} fill={`bg.${colorMode}`} />
-      </Circle>
-    );
-  } else if (txStatus === TransactionStatus.SUCCESS_MICROBLOCK) {
-    return (
-      <Circle
-        bg={`invert.${colorMode}`}
-        size="16px"
-        position="absolute"
-        bottom="-2px"
-        right="-4px"
-        boxShadow={'none'}
-      >
-        <MicroblockIcon color={`bg.${colorMode}`} fill={`bg.${colorMode}`} size="10px" />
-      </Circle>
-    );
-  } else {
-    return null;
-  }
-};
-
-export const TxIcon: FC<
-  {
-    txType?: TransactionType;
-    txStatus?: TxStatus;
-  } & IconProps
-> = ({ txType, txStatus, ...rest }) => {
-  const showTxStatusBubble = txStatus !== TransactionStatus.SUCCESS_ANCHOR_BLOCK;
-
-  const TxIcon = txType ? getTxTypeIcon(txType) : null;
-
-  return (
-    <Circle size={'40px'} position={'relative'}>
-      {showTxStatusBubble && <StatusBubble txStatus={txStatus} />}
-      {TxIcon && <TxIcon color={'textCaption.light'} size="16px" />}
-    </Circle>
-  );
-};
diff --git a/src/app/common/components/Value.tsx b/src/app/common/components/Value.tsx
deleted file mode 100644
index bf35ba136..000000000
--- a/src/app/common/components/Value.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Text } from '@/ui/typography';
-import { FC } from 'react';
-
-export const Value: FC = ({ children }) => (
-  <Text fontWeight={500} fontSize={'14px'} lineHeight={'1em'}>
-    {children}
-  </Text>
-);
diff --git a/src/app/common/components/__tests__/TabsContainer.test.tsx b/src/app/common/components/__tests__/TabsContainer.test.tsx
deleted file mode 100644
index 9ea1c9884..000000000
--- a/src/app/common/components/__tests__/TabsContainer.test.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import '@testing-library/jest-dom';
-import { render, fireEvent, waitFor } from '@testing-library/react';
-import { TabsContainer } from '../TabsContainer';
-
-const tabs = [
-  {
-    title: 'Tab 1',
-    content: 'Tab 1 content',
-  },
-  {
-    title: 'Tab 2',
-    content: 'Tab 2 content',
-  },
-];
-
-describe('TabsContainer', () => {
-  it('renders tabs with correct title', () => {
-    const { getAllByRole } = render(<TabsContainer tabs={tabs} />);
-    const tabList = getAllByRole('tab');
-    expect(tabList).toHaveLength(2);
-    expect(tabList[0]).toHaveTextContent('Tab 1');
-    expect(tabList[1]).toHaveTextContent('Tab 2');
-  });
-
-  it('displays correct tab content when a tab is clicked', async () => {
-    const { getAllByRole, getByText } = render(<TabsContainer tabs={tabs} />);
-    const tabList = getAllByRole('tab');
-    fireEvent.click(tabList[1]);
-    await waitFor(() => {
-      expect(getByText('Tab 2 content')).toBeVisible();
-    });
-    fireEvent.click(tabList[0]);
-    await waitFor(() => {
-      expect(getByText('Tab 1 content')).toBeVisible();
-    });
-  });
-});
diff --git a/src/app/common/components/skeletons/SSRSkeletonBlockList.tsx b/src/app/common/components/skeletons/SSRSkeletonBlockList.tsx
deleted file mode 100644
index 1570bf8e9..000000000
--- a/src/app/common/components/skeletons/SSRSkeletonBlockList.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { ExplorerSkeletonLoader } from '@/components/loaders/skeleton-common';
-import { Box } from '@/ui/Box';
-import { Flex } from '@/ui/Flex';
-import React from 'react';
-
-export function SSRSkeletonTxList() {
-  return (
-    <Box position={'relative'} px={'20px'}>
-      {[...Array(10)].map((_, i) => (
-        <Flex flexGrow={1} gap={'16px'} alignItems={'center'} py={'24px'} minWidth={0}>
-          <Box width={'40px'}>
-            <ExplorerSkeletonLoader width={'40px'} height={'40px'} circle={true} />
-          </Box>
-          <Flex direction={'column'} gap={'6px'} minWidth={0}>
-            <Flex direction={'column'} minHeight={'24px'} justifyContent={'center'} mb={'8px'}>
-              <ExplorerSkeletonLoader width={'192px'} height={'15px'} />
-            </Flex>
-            <Box>
-              <ExplorerSkeletonLoader width={'180px'} height={'12px'} />
-            </Box>
-          </Flex>
-          <Flex direction={'column'} gap={'8px'} ml={'auto'} flexShrink={0}>
-            <Box alignSelf={'flex-end'}>
-              <ExplorerSkeletonLoader width={'89px'} height={'14px'} />
-            </Box>
-            <Box alignSelf={'flex-end'}>
-              <ExplorerSkeletonLoader width={'72px'} height={'12px'} />
-            </Box>
-          </Flex>
-        </Flex>
-      ))}
-    </Box>
-  );
-}
diff --git a/src/app/common/components/skeletons/SSRSkeletonTxList.tsx b/src/app/common/components/skeletons/SSRSkeletonTxList.tsx
deleted file mode 100644
index f522f6cb3..000000000
--- a/src/app/common/components/skeletons/SSRSkeletonTxList.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { ExplorerSkeletonLoader } from '@/components/loaders/skeleton-common';
-import { Box } from '@/ui/Box';
-import { Flex } from '@/ui/Flex';
-import React from 'react';
-
-export function SSRSkeletonTxList() {
-  return (
-    <>
-      <Box position={'relative'} px={'20px'}>
-        {[...Array(10)].map((_, i) => (
-          <Flex flexGrow={1} gap={'16px'} alignItems={'center'} py={'24px'} minWidth={0}>
-            <Box width={'40px'}>
-              <ExplorerSkeletonLoader width={'40px'} height={'40px'} circle={true} />
-            </Box>
-            <Flex direction={'column'} gap={'6px'} minWidth={0}>
-              <Flex direction={'column'} minHeight={'24px'} justifyContent={'center'}>
-                <ExplorerSkeletonLoader width={'275px'} height={'20px'} />
-              </Flex>
-              <Box>
-                <ExplorerSkeletonLoader width={'212px'} height={'16px'} />
-              </Box>
-            </Flex>
-            <Flex direction={'column'} gap={'8px'} ml={'auto'} flexShrink={0}>
-              <Box alignSelf={'flex-end'}>
-                <ExplorerSkeletonLoader width={'79px'} height={'14px'} />
-              </Box>
-              <Box alignSelf={'flex-end'}>
-                <ExplorerSkeletonLoader width={'185px'} height={'12px'} />
-              </Box>
-            </Flex>
-          </Flex>
-        ))}
-      </Box>
-    </>
-  );
-}
diff --git a/src/app/common/components/tx-lists/address-lists/AddressConfirmedTxsList.tsx b/src/app/common/components/tx-lists/address-lists/AddressConfirmedTxsList.tsx
deleted file mode 100644
index 51ad59e49..000000000
--- a/src/app/common/components/tx-lists/address-lists/AddressConfirmedTxsList.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-'use client';
-
-import { useApi } from '@/common/api/client';
-import { SkeletonGenericTransactionList } from '@/components/loaders/skeleton-transaction';
-import { SectionFooterAction } from '@/components/section-footer-button';
-import { Box } from '@/ui/Box';
-import { Accordion } from '@/ui/components';
-import * as React from 'react';
-import { FC, memo, useMemo } from 'react';
-
-import { AddressTransactionWithTransfers } from '@stacks/stacks-blockchain-api-types';
-
-import { useInfiniteQueryResult } from '../../../hooks/useInfiniteQueryResult';
-import { useAddressConfirmedTxsWithTransfersInfinite } from '../../../queries/useAddressConfirmedTxsWithTransfersInfinite';
-import { FilteredTxs } from '../common/components/FilteredTxs';
-import { TxWithTransferListItem } from '../list-items/TxWithTransferListItem';
-
-export const AddressConfirmedTxsList: FC<{ address: string }> = memo(({ address }) => {
-  const api = useApi();
-  const response = useAddressConfirmedTxsWithTransfersInfinite(api, { address });
-
-  const txsWithTransfers = useInfiniteQueryResult<AddressTransactionWithTransfers>(response);
-
-  const indexes = useMemo(
-    () =>
-      txsWithTransfers
-        .map((txWithTransfers, i) =>
-          !!txWithTransfers.stx_transfers?.length ||
-          !!txWithTransfers.ft_transfers?.length ||
-          !!txWithTransfers.nft_transfers?.length
-            ? i
-            : undefined
-        )
-        .filter(function isDefined<TValue>(value: TValue | undefined): value is TValue {
-          return value !== undefined;
-        }),
-    [txsWithTransfers]
-  );
-
-  if (response.isLoading) {
-    return <SkeletonGenericTransactionList />;
-  }
-
-  return (
-    <Box position={'relative'} px={'20px'}>
-      <Accordion allowMultiple defaultIndex={indexes}>
-        <FilteredTxs txs={txsWithTransfers} TxListItem={TxWithTransferListItem} address={address} />
-      </Accordion>
-      <SectionFooterAction
-        label="transactions"
-        isLoading={response.isFetchingNextPage}
-        fetchNextPage={response.fetchNextPage}
-        hasNextPage={response.hasNextPage}
-      />
-    </Box>
-  );
-});
diff --git a/src/app/common/components/tx-lists/address-lists/AddressMempoolTxsList.tsx b/src/app/common/components/tx-lists/address-lists/AddressMempoolTxsList.tsx
deleted file mode 100644
index aa81b8927..000000000
--- a/src/app/common/components/tx-lists/address-lists/AddressMempoolTxsList.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { useApi } from '@/common/api/client';
-import { SkeletonGenericTransactionList } from '@/components/loaders/skeleton-transaction';
-import { SectionFooterAction } from '@/components/section-footer-button';
-import { Box } from '@/ui/Box';
-import * as React from 'react';
-import { FC, memo } from 'react';
-
-import { MempoolTransaction } from '@stacks/stacks-blockchain-api-types';
-
-import { useInfiniteQueryResult } from '../../../hooks/useInfiniteQueryResult';
-import { useAddressMempoolTxsInfinite } from '../../../queries/useAddressMempoolTxsInfinite';
-import { FilteredTxs } from '../common/components/FilteredTxs';
-import { MempoolTxListItem } from '../list-items/MempoolTxListItem';
-
-export const AddressMempoolTxsList: FC<{ address: string }> = memo(({ address }) => {
-  const api = useApi();
-  const response = useAddressMempoolTxsInfinite(api, {
-    address,
-  });
-
-  const txs = useInfiniteQueryResult<MempoolTransaction>(response);
-
-  if (response.isLoading) {
-    return <SkeletonGenericTransactionList />;
-  }
-
-  return (
-    <Box px={'20px'}>
-      <FilteredTxs txs={txs} TxListItem={MempoolTxListItem} />
-      <SectionFooterAction
-        label="transactions"
-        isLoading={response.isFetchingNextPage}
-        fetchNextPage={response.fetchNextPage}
-        hasNextPage={response.hasNextPage}
-      />
-    </Box>
-  );
-});
diff --git a/src/app/common/components/tx-lists/common/components/FilteredTxs.tsx b/src/app/common/components/tx-lists/common/components/FilteredTxs.tsx
deleted file mode 100644
index fbec3f02a..000000000
--- a/src/app/common/components/tx-lists/common/components/FilteredTxs.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-'use client';
-
-import { FilteredMessage } from '@/components/filter-panel';
-import { Box, Grid } from '@/ui/components';
-import { Text } from '@/ui/typography';
-import * as React from 'react';
-import { FC, useMemo } from 'react';
-
-import {
-  AddressTransactionWithTransfers,
-  MempoolTransaction,
-  Transaction,
-} from '@stacks/stacks-blockchain-api-types';
-
-import { useFilterState } from '../../../../hooks/use-filter-state';
-
-interface FilteredTxsProps<T extends unknown> {
-  txs: T[];
-  TxListItem: FC<{ tx: T; address?: string }>;
-  address?: string;
-}
-
-type PossibleTxTypes = Transaction | MempoolTransaction | AddressTransactionWithTransfers;
-
-const getTx = (tx: PossibleTxTypes) => ('tx' in tx ? tx.tx : tx);
-
-export const FilteredTxs = <T extends PossibleTxTypes>({
-  txs,
-  TxListItem,
-  address,
-}: FilteredTxsProps<T>) => {
-  const { activeFilters } = useFilterState();
-  const filteredTxs: T[] = useMemo(
-    () => txs?.filter(tx => activeFilters[getTx(tx).tx_type]),
-    [txs, activeFilters]
-  );
-  const hasTxs = !!txs?.length;
-  const hasVisibleTxs = !!filteredTxs?.length;
-  const allTxsAreFilteredOut = hasTxs && !hasVisibleTxs;
-  if (allTxsAreFilteredOut) return <FilteredMessage />;
-  if (hasVisibleTxs)
-    return (
-      <>
-        {filteredTxs?.map(tx => (
-          <TxListItem tx={tx} address={address} key={`tx-list-item-${getTx(tx).tx_id}`} />
-        ))}
-      </>
-    );
-  return (
-    <Grid placeItems="center" px="16px" py="32px">
-      <Text color={'textCaption'} mt="32px">
-        No transactions
-      </Text>
-    </Grid>
-  );
-};
diff --git a/src/app/common/components/tx-lists/common/types/transfers.ts b/src/app/common/components/tx-lists/common/types/transfers.ts
deleted file mode 100644
index 036831905..000000000
--- a/src/app/common/components/tx-lists/common/types/transfers.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { AddressTransactionWithTransfers } from '@stacks/stacks-blockchain-api-types';
-
-export type StxTransfers = AddressTransactionWithTransfers['stx_transfers'];
-export type FtTransfers = AddressTransactionWithTransfers['ft_transfers'];
-export type NftTransfers = AddressTransactionWithTransfers['nft_transfers'];
diff --git a/src/app/common/components/tx-lists/common/utils/tx.tsx b/src/app/common/components/tx-lists/common/utils/tx.tsx
deleted file mode 100644
index deff3ee3d..000000000
--- a/src/app/common/components/tx-lists/common/utils/tx.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import { buildUrl } from '@/app/common/utils/buildUrl';
-import { useGlobalContext } from '@/common/context/useAppContext';
-import { getContractName, getFunctionName, microToStacks } from '@/common/utils';
-import { Flex } from '@/ui/Flex';
-import { Stack } from '@/ui/Stack';
-import { Box, BoxProps } from '@/ui/components';
-import { useColorMode } from '@chakra-ui/react';
-import Link from 'next/link';
-import { FC } from 'react';
-import { TbArrowLeft } from 'react-icons/tb';
-
-import { MempoolTransaction, Transaction } from '@stacks/stacks-blockchain-api-types';
-
-import { StxPriceButton } from '../../../StxPriceButton';
-
-export const useTxTitle = (
-  tx: Transaction | MempoolTransaction,
-  txHref: string,
-  showPrice?: boolean,
-  openInNewTab?: boolean
-) => {
-  const network = useGlobalContext().activeNetwork;
-  const TxLink: FC<{ href?: string } & BoxProps> = ({ href = txHref, ...rest }) => (
-    <Box
-      as={Link}
-      href={href}
-      {...(openInNewTab && { target: '_blank' })}
-      textOverflow={'ellipsis'}
-      overflow={'hidden'}
-      whiteSpace={'nowrap'}
-      display={'block'}
-      color={`links.${useColorMode().colorMode}`}
-      _hover={{ color: `links.${useColorMode().colorMode}`, textDecoration: 'underline' }}
-      {...rest}
-    />
-  );
-  switch (tx.tx_type) {
-    case 'smart_contract':
-      return (
-        <TxLink>
-          {getContractName(tx?.smart_contract?.contract_id)}
-          <Box display={['none', 'none', 'inline']}>: {tx.tx_id}</Box>
-        </TxLink>
-      );
-    case 'contract_call':
-      return (
-        <Stack alignItems="center" isInline>
-          <TxLink>
-            {getFunctionName(tx)}
-            <Box display={['none', 'none', 'inline']}>: {tx.tx_id}</Box>
-          </TxLink>
-          <Box color={'textCaption'} size="14px">
-            <TbArrowLeft size="14px" />
-          </Box>
-          <TxLink
-            href={buildUrl(`/txid/${tx.contract_call.contract_id}`, network)}
-            overflow={'none'}
-          >
-            {getContractName(tx.contract_call.contract_id)}
-          </TxLink>
-        </Stack>
-      );
-    case 'token_transfer':
-      return (
-        <Flex flexDirection={['row']} alignItems={['center']}>
-          <TxLink>
-            {microToStacks(tx.token_transfer.amount)} STX
-            <Box display={['none', 'none', 'inline']}>: {tx.tx_id}</Box>
-          </TxLink>
-          {showPrice && <StxPriceButton tx={tx} value={Number(tx.token_transfer.amount)} />}
-        </Flex>
-      );
-    case 'coinbase':
-      return (
-        <TxLink>
-          Block #{(tx as Transaction).block_height} coinbase
-          <Box display={['none', 'none', 'inline']}>: {tx.tx_id}</Box>
-        </TxLink>
-      );
-    default:
-      return <TxLink>{tx.tx_id}</TxLink>;
-  }
-};
diff --git a/src/app/common/components/tx-lists/default-lists/ConfirmedTxsList.tsx b/src/app/common/components/tx-lists/default-lists/ConfirmedTxsList.tsx
deleted file mode 100644
index 893f2899a..000000000
--- a/src/app/common/components/tx-lists/default-lists/ConfirmedTxsList.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { useApi } from '@/common/api/client';
-import { SkeletonTransactionList } from '@/components/loaders/skeleton-transaction';
-import { SectionFooterAction } from '@/components/section-footer-button';
-import { Text } from '@/ui/Text';
-import { Box, Flex } from '@/ui/components';
-import dynamic from 'next/dynamic';
-import * as React from 'react';
-import { FC, memo } from 'react';
-
-import { Transaction } from '@stacks/stacks-blockchain-api-types';
-
-import { useInfiniteQueryResult } from '../../../hooks/useInfiniteQueryResult';
-import { useConfirmedTransactionsInfinite } from '../../../queries/useConfirmedTransactionsInfinite';
-import { FilteredTxs } from '../common/components/FilteredTxs';
-import { TxListItem } from '../list-items/TxListItem';
-
-const ConfirmedTxsListBase: FC<{
-  limit?: number;
-}> = memo(({ limit }) => {
-  const api = useApi();
-  const response = useConfirmedTransactionsInfinite(api);
-
-  const txs = useInfiniteQueryResult<Transaction>(response, limit);
-
-  if (!txs?.length) {
-    return (
-      <Flex p={'30px'} justifyContent={'center'}>
-        <Text color={'textBody'}>No transactions</Text>
-      </Flex>
-    );
-  }
-
-  return (
-    <Box position={'relative'} px={'20px'}>
-      <FilteredTxs txs={txs} TxListItem={TxListItem} />
-      <SectionFooterAction
-        isLoading={response.isFetchingNextPage}
-        hasNextPage={response.hasNextPage}
-        href={limit ? '/transactions' : undefined}
-        fetchNextPage={limit ? undefined : response.fetchNextPage}
-        label={'transactions'}
-      />
-    </Box>
-  );
-});
-
-export default ConfirmedTxsListBase;
-
-export const ConfirmedTxsList = dynamic(() => import('./ConfirmedTxsList'), {
-  loading: () => <SkeletonTransactionList />,
-  ssr: false,
-});
diff --git a/src/app/common/components/tx-lists/default-lists/MempoolTxsList.tsx b/src/app/common/components/tx-lists/default-lists/MempoolTxsList.tsx
deleted file mode 100644
index b9115dfac..000000000
--- a/src/app/common/components/tx-lists/default-lists/MempoolTxsList.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { useApi } from '@/common/api/client';
-import { SkeletonTransactionList } from '@/components/loaders/skeleton-transaction';
-import { SectionFooterAction } from '@/components/section-footer-button';
-import { Box, Flex } from '@/ui/components';
-import { Text } from '@/ui/typography';
-import dynamic from 'next/dynamic';
-import * as React from 'react';
-import { FC, memo } from 'react';
-
-import { MempoolTransaction } from '@stacks/stacks-blockchain-api-types';
-
-import { useInfiniteQueryResult } from '../../../hooks/useInfiniteQueryResult';
-import { useMempoolTransactionsInfinite } from '../../../queries/useMempoolTransactionsInfinite';
-import { FilteredTxs } from '../common/components/FilteredTxs';
-import { MempoolTxListItem } from '../list-items/MempoolTxListItem';
-
-const MempoolTxsListBase: FC<{
-  limit?: number;
-}> = memo(({ limit }) => {
-  const api = useApi();
-  const response = useMempoolTransactionsInfinite(api);
-  const txs = useInfiniteQueryResult<MempoolTransaction>(response, limit);
-
-  if (!txs?.length) {
-    return (
-      <Flex p={'30px'} justifyContent={'center'}>
-        <Text color={'textBody'}>No pending transactions</Text>
-      </Flex>
-    );
-  }
-  return (
-    <Box px={'20px'}>
-      <FilteredTxs txs={txs} TxListItem={MempoolTxListItem} />
-      <SectionFooterAction
-        isLoading={response.isFetchingNextPage}
-        hasNextPage={response.hasNextPage}
-        href={limit ? '/transactions' : undefined}
-        fetchNextPage={limit ? undefined : response.fetchNextPage}
-        label={'transactions'}
-      />
-    </Box>
-  );
-});
-
-export default MempoolTxsListBase;
-
-export const MempoolTxsList = dynamic(() => import('./MempoolTxsList'), {
-  loading: () => <SkeletonTransactionList />,
-  ssr: false,
-});
diff --git a/src/app/common/components/tx-lists/list-items/FtTransfers.tsx b/src/app/common/components/tx-lists/list-items/FtTransfers.tsx
deleted file mode 100644
index fde398882..000000000
--- a/src/app/common/components/tx-lists/list-items/FtTransfers.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { useFtMetadata } from '@/app/common/queries/useFtMetadata';
-import { useApi } from '@/common/api/client';
-import { ftDecimals, getAssetNameParts } from '@/common/utils';
-import { getTicker } from '@/components/tx-events';
-import { FC, Fragment } from 'react';
-
-import { AddressTransactionWithTransfersFtTransfers } from '@stacks/blockchain-api-client';
-import { Transaction } from '@stacks/stacks-blockchain-api-types';
-
-import { TransferListItem } from './TransferListItem';
-
-interface FtTransfersProps {
-  address: string;
-  ftTransfers: AddressTransactionWithTransfersFtTransfers[];
-  tx: Transaction;
-}
-
-const TransferListItemWithMetaSymbol: FC<{
-  ftTransfer: AddressTransactionWithTransfersFtTransfers;
-  tx: Transaction;
-  sender?: string;
-  recipient?: string;
-  isOriginator: boolean;
-}> = ({ ftTransfer, tx, sender, recipient, isOriginator }) => {
-  const api = useApi();
-  const { asset, address, contract } = getAssetNameParts(ftTransfer.asset_identifier);
-  const contractId = `${address}.${contract}`;
-  const { data: ftMetadata } = useFtMetadata(api, { contractId }, { enabled: !!contractId });
-  const symbol = ftMetadata?.symbol || getTicker(asset).toUpperCase();
-  return (
-    <TransferListItem
-      tx={tx}
-      title={`${symbol || 'Token'} transfer`}
-      sender={sender}
-      recipient={recipient}
-      amount={`${
-        ftTransfer.amount ? ftDecimals(ftTransfer.amount, ftMetadata?.decimals || 0) : '-'
-      } ${symbol}`}
-      isOriginator={isOriginator}
-    />
-  );
-};
-
-export const FtTransfers: FC<FtTransfersProps> = ({ address, ftTransfers, tx }) => (
-  <Fragment>
-    {ftTransfers.map((ftTransfer, i) => {
-      return (
-        <TransferListItemWithMetaSymbol
-          ftTransfer={ftTransfer}
-          key={`ft-transfer-${i}`}
-          tx={tx}
-          sender={ftTransfer.sender}
-          recipient={ftTransfer.recipient}
-          isOriginator={address === ftTransfer.sender}
-        />
-      );
-    })}
-  </Fragment>
-);
diff --git a/src/app/common/components/tx-lists/list-items/MempoolTxListItem.tsx b/src/app/common/components/tx-lists/list-items/MempoolTxListItem.tsx
deleted file mode 100644
index 56889e343..000000000
--- a/src/app/common/components/tx-lists/list-items/MempoolTxListItem.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import { buildUrl } from '@/app/common/utils/buildUrl';
-import { TwoColsListItem } from '@/common/components/TwoColumnsListItem';
-import { useGlobalContext } from '@/common/context/useAppContext';
-import { getTransactionStatus } from '@/common/utils/transactions';
-import { AddressArea, Nonce, Timestamp } from '@/components/transaction-item';
-import { Flex, FlexProps, Stack } from '@/ui/components';
-import { Caption, Title } from '@/ui/typography';
-import * as React from 'react';
-import { FC, memo, useMemo } from 'react';
-
-import type { MempoolTransaction } from '@stacks/stacks-blockchain-api-types';
-
-import { TxIcon } from '../../TxIcon';
-import { useTxTitle } from '../common/utils/tx';
-import { getTransactionTypeLabel } from '../utils/tx';
-
-interface MempoolTxsListItemProps extends FlexProps {
-  tx: MempoolTransaction;
-}
-
-export const MempoolTxListItem: FC<MempoolTxsListItemProps> = memo(({ tx, ...rest }) => {
-  const isPending = tx.tx_status === 'pending';
-  const didFail = !isPending;
-  const network = useGlobalContext().activeNetwork;
-
-  const icon = useMemo(
-    () => <TxIcon txType={tx.tx_type} txStatus={getTransactionStatus(tx)} />,
-    [tx]
-  );
-  const href = buildUrl(`/txid/${encodeURIComponent(tx.tx_id)}`, network);
-  const txTitle = useTxTitle(tx, href, true);
-  const leftTitle = useMemo(
-    () => (
-      <Title fontWeight="500" display="block" fontSize="16px">
-        {txTitle}
-      </Title>
-    ),
-    [txTitle]
-  );
-
-  const leftSubtitle = useMemo(
-    () => (
-      <Stack
-        as="span"
-        isInline
-        gap="4px"
-        alignItems="center"
-        flexWrap="wrap"
-        divider={<Caption>∙</Caption>}
-      >
-        <Caption fontWeight="bold">{getTransactionTypeLabel(tx.tx_type)}</Caption>
-        <AddressArea tx={tx} />
-      </Stack>
-    ),
-    [tx]
-  );
-
-  const rightTitle = useMemo(() => <Timestamp tx={tx} />, []);
-
-  const rightSubtitle = useMemo(
-    () => (
-      <Flex justifyContent="flex-end" alignItems="flex-end" flexWrap="wrap">
-        <Caption
-          mr="6px"
-          as="span"
-          data-test="tx-caption"
-          color={didFail ? 'feedbackError' : 'invert'}
-        >
-          {isPending && 'Pending'}
-          {didFail && 'Failed'}
-        </Caption>
-        {isPending && <Nonce nonce={tx.nonce} />}
-      </Flex>
-    ),
-    [didFail, isPending, tx.nonce]
-  );
-
-  return (
-    <TwoColsListItem
-      icon={icon}
-      leftContent={{ title: leftTitle, subtitle: leftSubtitle }}
-      rightContent={{ title: rightTitle, subtitle: rightSubtitle }}
-      {...rest}
-    />
-  );
-});
diff --git a/src/app/common/components/tx-lists/list-items/MempoolTxListItemMini.tsx b/src/app/common/components/tx-lists/list-items/MempoolTxListItemMini.tsx
deleted file mode 100644
index d4eb7071d..000000000
--- a/src/app/common/components/tx-lists/list-items/MempoolTxListItemMini.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { buildUrl } from '@/app/common/utils/buildUrl';
-import { TwoColsListItem } from '@/common/components/TwoColumnsListItem';
-import { useGlobalContext } from '@/common/context/useAppContext';
-import { getTransactionStatus } from '@/common/utils/transactions';
-import { AddressArea } from '@/components/transaction-item';
-import { Stack } from '@/ui/components';
-import { Caption, Title } from '@/ui/typography';
-import * as React from 'react';
-import { FC, memo, useMemo } from 'react';
-
-import type { MempoolTransaction } from '@stacks/stacks-blockchain-api-types';
-
-import { TxIcon } from '../../TxIcon';
-import { useTxTitle } from '../common/utils/tx';
-import { getTransactionTypeLabel } from '../utils/tx';
-
-interface MempoolTxsListItemProps {
-  tx: MempoolTransaction;
-}
-
-export const MempoolTxListItemMini: FC<MempoolTxsListItemProps> = memo(({ tx }) => {
-  const network = useGlobalContext().activeNetwork;
-
-  const icon = useMemo(
-    () => <TxIcon txType={tx.tx_type} txStatus={getTransactionStatus(tx)} />,
-    [tx]
-  );
-  const href = buildUrl(`/txid/${encodeURIComponent(tx.tx_id)}`, network);
-
-  const txTitle = useTxTitle(tx, href, true, true);
-
-  const leftTitle = useMemo(
-    () => (
-      <Title fontWeight="500" display="block" fontSize="16px">
-        {txTitle}
-      </Title>
-    ),
-    [txTitle]
-  );
-
-  const leftSubtitle = useMemo(
-    () => (
-      <Stack
-        as="span"
-        isInline
-        spacing="4px"
-        alignItems="center"
-        flexWrap="wrap"
-        divider={<Caption>∙</Caption>}
-      >
-        <Caption fontWeight="bold">{getTransactionTypeLabel(tx.tx_type)}</Caption>
-        <AddressArea tx={tx} />
-      </Stack>
-    ),
-    [tx]
-  );
-
-  return <TwoColsListItem icon={icon} leftContent={{ title: leftTitle, subtitle: leftSubtitle }} />;
-});
diff --git a/src/app/common/components/tx-lists/list-items/NftTransfers.tsx b/src/app/common/components/tx-lists/list-items/NftTransfers.tsx
deleted file mode 100644
index b4cead404..000000000
--- a/src/app/common/components/tx-lists/list-items/NftTransfers.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { getAssetNameParts } from '@/common/utils';
-import { getTicker } from '@/components/tx-events';
-import { FC, Fragment } from 'react';
-
-import { AddressTransactionWithTransfersNftTransfers } from '@stacks/blockchain-api-client';
-import { Transaction } from '@stacks/stacks-blockchain-api-types';
-
-import { TransferListItem } from './TransferListItem';
-
-interface NftTransfersProps {
-  address: string;
-  nftTransfers: AddressTransactionWithTransfersNftTransfers[];
-  tx: Transaction;
-}
-
-export const NftTransfers: FC<NftTransfersProps> = ({ address, nftTransfers, tx }) => (
-  <Fragment>
-    {nftTransfers.map((nftTransfer, i) => {
-      const collection = nftTransfer.asset_identifier.split('::')[1] || 'NFT';
-      const { asset } = getAssetNameParts(nftTransfer.asset_identifier);
-      const symbol = getTicker(asset).toUpperCase();
-      return (
-        <TransferListItem
-          key={`nft-transfer-${i}`}
-          tx={tx}
-          title={`${collection} transfer`}
-          sender={nftTransfer.sender}
-          recipient={nftTransfer.recipient}
-          amount={`1 ${symbol}`}
-          isOriginator={address === nftTransfer.sender}
-        />
-      );
-    })}
-  </Fragment>
-);
diff --git a/src/app/common/components/tx-lists/list-items/StxTransfers.tsx b/src/app/common/components/tx-lists/list-items/StxTransfers.tsx
deleted file mode 100644
index 5f5f9e722..000000000
--- a/src/app/common/components/tx-lists/list-items/StxTransfers.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { microToStacks } from '@/common/utils';
-import { FC, Fragment } from 'react';
-
-import { AddressTransactionWithTransfersStxTransfers } from '@stacks/blockchain-api-client/src/generated/models';
-import { Transaction } from '@stacks/stacks-blockchain-api-types';
-
-import { TransferListItem } from './TransferListItem';
-
-interface StxTransfersProps {
-  address: string;
-  stxTransfers: AddressTransactionWithTransfersStxTransfers[];
-  tx: Transaction;
-}
-
-export const StxTransfers: FC<StxTransfersProps> = ({ address, stxTransfers, tx }) => (
-  <Fragment>
-    {stxTransfers.map((stxTransfer, i) => (
-      <TransferListItem
-        key={`stx-transfer-${i}`}
-        tx={tx}
-        title={'STX transfer'}
-        sender={stxTransfer.sender}
-        recipient={stxTransfer.recipient}
-        amount={`${stxTransfer.amount ? microToStacks(stxTransfer.amount).toString() : '-'} STX`}
-        isOriginator={address === stxTransfer.sender}
-      />
-    ))}
-  </Fragment>
-);
diff --git a/src/app/common/components/tx-lists/list-items/TransferListItem.tsx b/src/app/common/components/tx-lists/list-items/TransferListItem.tsx
deleted file mode 100644
index 3df8f981b..000000000
--- a/src/app/common/components/tx-lists/list-items/TransferListItem.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import { buildUrl } from '@/app/common/utils/buildUrl';
-import { TwoColsListItem } from '@/common/components/TwoColumnsListItem';
-import { useGlobalContext } from '@/common/context/useAppContext';
-import { PrincipalLink } from '@/components/transaction-item';
-import { Circle } from '@/ui/Circle';
-import { Stack } from '@/ui/Stack';
-import { Caption, Text, Title } from '@/ui/typography';
-import * as React from 'react';
-import { FC, memo, useMemo } from 'react';
-import { TbArrowDown, TbArrowUp } from 'react-icons/tb';
-
-import { Transaction } from '@stacks/stacks-blockchain-api-types';
-
-interface TransferListItemProps {
-  tx: Transaction;
-  title: string;
-  sender?: string;
-  recipient?: string;
-  amount: string;
-  isOriginator: boolean;
-}
-
-export const TransferListItem: FC<TransferListItemProps> = memo(
-  ({ tx, title, sender, recipient, amount, isOriginator }) => {
-    const network = useGlobalContext().activeNetwork;
-    const href = buildUrl(`/txid/${encodeURIComponent(tx.tx_id)}`, network);
-
-    const icon = useMemo(
-      () =>
-        isOriginator ? (
-          <Circle bg={'bg'} size={'40px'}>
-            <TbArrowUp color={'invert'} fill={'bg'} size={'16px'} />
-          </Circle>
-        ) : (
-          <Circle bg={'bg'} size={'40px'}>
-            <TbArrowDown color={'invert'} fill={'bg'} size={'16px'} />
-          </Circle>
-        ),
-      [isOriginator]
-    );
-
-    const leftTitle = useMemo(
-      () => (
-        <Title fontWeight="500" display="block" fontSize="16px">
-          {title}
-        </Title>
-      ),
-      [title]
-    );
-
-    const leftSubtitle = useMemo(
-      () => (
-        <Stack
-          as="span"
-          isInline
-          spacing="4px"
-          alignItems="center"
-          flexWrap="wrap"
-          divider={<Caption>∙</Caption>}
-        >
-          {isOriginator && recipient && (
-            <Caption>
-              to <PrincipalLink principal={recipient} />
-            </Caption>
-          )}
-          {!isOriginator && sender && (
-            <Caption>
-              from <PrincipalLink principal={sender} />
-            </Caption>
-          )}
-        </Stack>
-      ),
-      [isOriginator, sender, recipient]
-    );
-
-    const rightTitle = useMemo(
-      () => (
-        <Text fontSize="14px" textAlign="right" color={'textBody'}>
-          {amount}
-        </Text>
-      ),
-      [amount]
-    );
-
-    return (
-      <TwoColsListItem
-        icon={icon}
-        leftContent={{ title: leftTitle, subtitle: leftSubtitle }}
-        rightContent={{ title: rightTitle, subtitle: null }}
-        pl={'56px'}
-      />
-    );
-  }
-);
diff --git a/src/app/common/components/tx-lists/list-items/TxListItem.tsx b/src/app/common/components/tx-lists/list-items/TxListItem.tsx
deleted file mode 100644
index e78d9cbfc..000000000
--- a/src/app/common/components/tx-lists/list-items/TxListItem.tsx
+++ /dev/null
@@ -1,122 +0,0 @@
-import { buildUrl } from '@/app/common/utils/buildUrl';
-import { TwoColsListItem } from '@/common/components/TwoColumnsListItem';
-import { useGlobalContext } from '@/common/context/useAppContext';
-import { truncateMiddle } from '@/common/utils';
-import { getTransactionStatus } from '@/common/utils/transactions';
-import { ExplorerLink } from '@/components/links';
-import { AddressArea, Timestamp } from '@/components/transaction-item';
-import { FlexProps, Stack } from '@/ui/components';
-import { Caption, Title } from '@/ui/typography';
-import { useColorMode } from '@chakra-ui/react';
-import * as React from 'react';
-import { FC, ReactNode, memo } from 'react';
-
-import type { Transaction } from '@stacks/stacks-blockchain-api-types';
-
-import { TxIcon } from '../../TxIcon';
-import { useTxTitle } from '../common/utils/tx';
-import { getTransactionTypeLabel } from '../utils/tx';
-
-interface TxsListItemProps extends FlexProps {
-  tx: Transaction;
-  leftTitle?: ReactNode;
-  leftSubtitle?: ReactNode;
-  rightTitle?: ReactNode;
-  rightSubtitle?: ReactNode;
-}
-
-const Icon: FC<{ tx: Transaction }> = memo(({ tx }) => (
-  <TxIcon txType={tx.tx_type} txStatus={getTransactionStatus(tx)} />
-));
-
-const LeftTitle: FC<{ tx: Transaction; href: string }> = memo(({ tx, href }) => (
-  <Title fontWeight="500" display="block" fontSize="15px">
-    {useTxTitle(tx, href, true)}
-  </Title>
-));
-
-const LeftSubtitle: FC<{ tx: Transaction }> = memo(({ tx }) => (
-  <Stack
-    as="span"
-    isInline
-    gap="4px"
-    alignItems="center"
-    flexWrap="wrap"
-    divider={<Caption>∙</Caption>}
-  >
-    <Caption fontWeight="bold">{getTransactionTypeLabel(tx.tx_type)}</Caption>
-    <AddressArea tx={tx} />
-  </Stack>
-));
-
-const RightTitle: FC<{ tx: Transaction }> = memo(({ tx }) => <Timestamp tx={tx} />);
-
-const RightSubtitle: FC<{ tx: Transaction }> = memo(({ tx }) => {
-  const isConfirmed = tx.tx_status === 'success';
-  const isAnchored = !tx.is_unanchored;
-  const didFail = !isConfirmed;
-  const isInMicroblock = isConfirmed && !isAnchored;
-  const isInAnchorBlock = isConfirmed && isAnchored;
-  const colorMode = useColorMode().colorMode;
-  const hash = isInMicroblock
-    ? tx.microblock_hash
-    : isInAnchorBlock
-    ? tx.parent_block_hash
-    : undefined;
-  return (
-    <Stack
-      as="span"
-      isInline
-      gap="4px"
-      alignItems="center"
-      flexWrap="wrap"
-      divider={<Caption>∙</Caption>}
-      minWidth={'160px'}
-      justifyContent={'flex-end'}
-    >
-      <Caption as="span" data-test="tx-caption" color={didFail ? 'feedbackError' : 'invert'}>
-        {isConfirmed && !isAnchored && 'In microblock'}
-        {isConfirmed && isAnchored && 'In anchor block'}
-        {didFail && 'Failed'}
-      </Caption>
-      {hash && (
-        <ExplorerLink
-          href={`${isInMicroblock ? '/microblock' : '/block'}/${encodeURIComponent(hash)}`}
-        >
-          <Caption
-            as={'a'}
-            color={`links.${colorMode}`}
-            _hover={{
-              cursor: 'pointer',
-              textDecoration: 'underline',
-            }}
-            textDecoration="none"
-          >
-            {truncateMiddle(hash, 4)}
-          </Caption>
-        </ExplorerLink>
-      )}
-    </Stack>
-  );
-});
-
-export const TxListItem: FC<TxsListItemProps> = memo(
-  ({ tx, leftTitle, leftSubtitle, rightTitle, rightSubtitle, ...rest }) => {
-    const network = useGlobalContext().activeNetwork;
-    const href = buildUrl(`/txid/${encodeURIComponent(tx.tx_id)}`, network);
-    return (
-      <TwoColsListItem
-        icon={<Icon tx={tx} />}
-        leftContent={{
-          title: leftTitle || <LeftTitle tx={tx} href={href} />,
-          subtitle: leftSubtitle || <LeftSubtitle tx={tx} />,
-        }}
-        rightContent={{
-          title: rightTitle || <RightTitle tx={tx} />,
-          subtitle: rightSubtitle || <RightSubtitle tx={tx} />,
-        }}
-        {...rest}
-      />
-    );
-  }
-);
diff --git a/src/app/common/components/tx-lists/list-items/TxListItemMini.tsx b/src/app/common/components/tx-lists/list-items/TxListItemMini.tsx
deleted file mode 100644
index 9b017830d..000000000
--- a/src/app/common/components/tx-lists/list-items/TxListItemMini.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { buildUrl } from '@/app/common/utils/buildUrl';
-import { TwoColsListItem } from '@/common/components/TwoColumnsListItem';
-import { useGlobalContext } from '@/common/context/useAppContext';
-import { getTransactionStatus } from '@/common/utils/transactions';
-import { AddressArea } from '@/components/transaction-item';
-import { Stack } from '@/ui/components';
-import { Caption, Title } from '@/ui/typography';
-import * as React from 'react';
-import { FC, memo } from 'react';
-
-import type { Transaction } from '@stacks/stacks-blockchain-api-types';
-
-import { TxIcon } from '../../TxIcon';
-import { useTxTitle } from '../common/utils/tx';
-import { getTransactionTypeLabel } from '../utils/tx';
-
-interface TxsListItemProps {
-  tx: Transaction;
-}
-
-const Icon: FC<{ tx: Transaction }> = memo(({ tx }) => (
-  <TxIcon txType={tx.tx_type} txStatus={getTransactionStatus(tx)} />
-));
-
-const LeftTitle: FC<{ tx: Transaction; href: string }> = memo(({ tx, href }) => (
-  <Title fontWeight="500" display="block" fontSize="15px">
-    {useTxTitle(tx, href, true, true)}
-  </Title>
-));
-
-const LeftSubtitle: FC<{ tx: Transaction }> = memo(({ tx }) => (
-  <Stack
-    as="span"
-    isInline
-    gap="4px"
-    alignItems="center"
-    flexWrap="wrap"
-    divider={<Caption>∙</Caption>}
-  >
-    <Caption fontWeight="bold">{getTransactionTypeLabel(tx.tx_type)}</Caption>
-    <AddressArea tx={tx} />
-  </Stack>
-));
-
-export const TxListItemMini: FC<TxsListItemProps> = memo(({ tx }) => {
-  const network = useGlobalContext().activeNetwork;
-  const href = buildUrl(`/txid/${encodeURIComponent(tx.tx_id)}`, network);
-  return (
-    <TwoColsListItem
-      icon={<Icon tx={tx} />}
-      leftContent={{ title: <LeftTitle tx={tx} href={href} />, subtitle: <LeftSubtitle tx={tx} /> }}
-    />
-  );
-});
diff --git a/src/app/common/components/tx-lists/list-items/TxWithTransferListItem.tsx b/src/app/common/components/tx-lists/list-items/TxWithTransferListItem.tsx
deleted file mode 100644
index 8621b9130..000000000
--- a/src/app/common/components/tx-lists/list-items/TxWithTransferListItem.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-import { getTransactionTypeLabel } from '@/app/common/components/tx-lists/utils/tx';
-import { useVerticallyStackedElementsBorderStyle } from '@/app/common/styles/border';
-import { AddressArea } from '@/components/transaction-item';
-import { Text } from '@/ui/Text';
-import {
-  AccordionButton,
-  AccordionIcon,
-  AccordionItem,
-  AccordionPanel,
-  Flex,
-  Stack,
-} from '@/ui/components';
-import { Caption } from '@/ui/typography';
-import pluralize from 'pluralize';
-import React, { FC, memo } from 'react';
-
-import { AddressTransactionWithTransfers, Transaction } from '@stacks/stacks-blockchain-api-types';
-
-import { FtTransfers } from './FtTransfers';
-import { NftTransfers } from './NftTransfers';
-import { StxTransfers } from './StxTransfers';
-import { TxListItem } from './TxListItem';
-
-interface TxWithTransferListItemProps {
-  tx: AddressTransactionWithTransfers;
-  address?: string;
-}
-
-const LeftSubtitle: FC<{ tx: Transaction; transfersCount: number }> = memo(
-  ({ tx, transfersCount }) => (
-    <Stack
-      as="span"
-      isInline
-      gap="4px"
-      alignItems="center"
-      flexWrap="wrap"
-      divider={<Caption>∙</Caption>}
-    >
-      <Caption fontWeight="bold">{getTransactionTypeLabel(tx.tx_type)}</Caption>
-      <Caption fontWeight="bold">
-        {transfersCount} {pluralize('transfer', transfersCount)}
-      </Caption>
-      <AddressArea tx={tx} />
-    </Stack>
-  )
-);
-
-export const TxWithTransferListItem: FC<TxWithTransferListItemProps> = ({
-  tx: { tx, stx_transfers, ft_transfers, nft_transfers },
-  address,
-}) => {
-  if (!address) return null;
-  return (
-    <AccordionItem border={'none'}>
-      <Flex gap={'6px'}>
-        <TxListItem
-          tx={tx}
-          key={`txs-list-item-${tx.tx_id}`}
-          leftSubtitle={
-            <LeftSubtitle
-              tx={tx}
-              transfersCount={
-                (stx_transfers?.length || 0) +
-                (ft_transfers?.length || 0) +
-                (nft_transfers?.length || 0)
-              }
-            />
-          }
-        />
-        <AccordionButton
-          flexGrow={0}
-          flexShrink={0}
-          width={'30px'}
-          ml={'auto'}
-          p={0}
-          justifyContent={'center'}
-        >
-          <AccordionIcon />
-        </AccordionButton>
-      </Flex>
-      <AccordionPanel p={'0 30px 0 0'} css={useVerticallyStackedElementsBorderStyle}>
-        {!stx_transfers?.length && !ft_transfers?.length && !nft_transfers?.length && (
-          <Text fontSize={'14px'} p={'20px'} align={'center'}>
-            No Transfers
-          </Text>
-        )}
-        {stx_transfers && <StxTransfers address={address} stxTransfers={stx_transfers} tx={tx} />}
-        {ft_transfers && <FtTransfers address={address} ftTransfers={ft_transfers} tx={tx} />}
-        {nft_transfers && <NftTransfers address={address} nftTransfers={nft_transfers} tx={tx} />}
-      </AccordionPanel>
-    </AccordionItem>
-  );
-};
diff --git a/src/app/common/components/tx-lists/tabs/AddressTxListTabs.tsx b/src/app/common/components/tx-lists/tabs/AddressTxListTabs.tsx
deleted file mode 100644
index 596bfd1a3..000000000
--- a/src/app/common/components/tx-lists/tabs/AddressTxListTabs.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import * as React from 'react';
-import { FC } from 'react';
-
-import { AddressConfirmedTxsList } from '../address-lists/AddressConfirmedTxsList';
-import { AddressMempoolTxsList } from '../address-lists/AddressMempoolTxsList';
-import { TxListTabs } from './TxListTabs';
-
-export const AddressTxListTabs: FC<{
-  address: string;
-}> = ({ address }) => {
-  return (
-    <TxListTabs
-      confirmedList={<AddressConfirmedTxsList address={address} />}
-      mempoolList={<AddressMempoolTxsList address={address} />}
-    />
-  );
-};
diff --git a/src/app/common/components/tx-lists/tabs/DefaultTxListTabs.tsx b/src/app/common/components/tx-lists/tabs/DefaultTxListTabs.tsx
deleted file mode 100644
index a6913731d..000000000
--- a/src/app/common/components/tx-lists/tabs/DefaultTxListTabs.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { FC } from 'react';
-
-import { ConfirmedTxsList } from '../default-lists/ConfirmedTxsList';
-import { MempoolTxsList } from '../default-lists/MempoolTxsList';
-import { TxListTabs } from './TxListTabs';
-
-export const DefaultTxListTabs: FC<{
-  limit?: number;
-}> = ({ limit }) => {
-  return (
-    <TxListTabs
-      confirmedList={<ConfirmedTxsList limit={limit} />}
-      mempoolList={<MempoolTxsList limit={limit} />}
-    />
-  );
-};
diff --git a/src/app/common/components/tx-lists/tabs/TxListTabs.tsx b/src/app/common/components/tx-lists/tabs/TxListTabs.tsx
deleted file mode 100644
index eb2ef6710..000000000
--- a/src/app/common/components/tx-lists/tabs/TxListTabs.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { CSVDownloadButton } from '@/components/CSVDownloadButton';
-import { FilterButton } from '@/components/filter-button';
-import { Box } from '@/ui/Box';
-import { TabsProps } from '@/ui/Tabs';
-import * as React from 'react';
-import { FC, ReactNode } from 'react';
-import { usePathname } from 'next/navigation';
-import { TabsContainer } from '@/app/common/components/TabsContainer';
-
-export const TxListTabs: FC<
-  {
-    confirmedList: ReactNode;
-    mempoolList: ReactNode;
-  } & Partial<TabsProps>
-> = ({ confirmedList, mempoolList, ...tabsProps }) => {
-  const pathname = usePathname();
-
-  const isAddressPage = React.useMemo(() => pathname?.startsWith('/address/'), [pathname]);
-
-  return (
-    <TabsContainer
-      tabs={[
-        {
-          title: 'Confirmed',
-          content: confirmedList,
-        },
-        {
-          title: 'Pending',
-          content: mempoolList,
-        },
-      ]}
-      actions={
-        <Box marginLeft={'auto'} display={'flex'} gap={4}>
-          {isAddressPage && <CSVDownloadButton />}
-          <FilterButton />
-        </Box>
-      }
-    />
-  );
-};
diff --git a/src/app/common/components/tx-lists/tabs/__tests__/TxListTabs.test.tsx b/src/app/common/components/tx-lists/tabs/__tests__/TxListTabs.test.tsx
deleted file mode 100644
index c905cb4b1..000000000
--- a/src/app/common/components/tx-lists/tabs/__tests__/TxListTabs.test.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-import '@testing-library/jest-dom';
-import '@testing-library/jest-dom/extend-expect';
-import { render, screen } from '@testing-library/react';
-import { TxListTabs } from '../TxListTabs';
-import { usePathname as usePathNameActual } from 'next/navigation';
-import configureMockStore, { MockStoreEnhanced } from 'redux-mock-store';
-import { Provider } from 'react-redux';
-import { TxFilterTypes } from '@/features/transactions-filter/transactions-filter-slice';
-import { fireEvent } from '@testing-library/react';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { RouterContext } from 'next/dist/shared/lib/router-context';
-import { NextRouter } from 'next/router';
-
-jest.mock('next/navigation', () => ({
-  usePathname: jest.fn(),
-}));
-
-const queryClient = new QueryClient();
-const mockStore = configureMockStore();
-let store: MockStoreEnhanced<unknown>;
-const usePathname = usePathNameActual as jest.MockedFunction<typeof usePathNameActual>;
-
-describe('TxListTabs component', () => {
-  beforeEach(() => {
-    usePathname.mockReset();
-    store = mockStore({
-      [TxFilterTypes.TxsPageTxFilter]: {
-        isVisible: false,
-      },
-      [TxFilterTypes.AddressTxFilter]: {
-        isVisible: false,
-      },
-    });
-  });
-
-  it('renders correctly', () => {
-    usePathname.mockReturnValue('/transactions');
-
-    const confirmedList = <div>Confirmed List</div>;
-    const mempoolList = <div>Mempool List</div>;
-
-    render(
-      <Provider store={store}>
-        <TxListTabs confirmedList={confirmedList} mempoolList={mempoolList} />
-      </Provider>
-    );
-
-    expect(screen.getByText('Confirmed List')).toBeInTheDocument();
-
-    const pendingTab = screen.getByRole('tab', { name: /Pending/i });
-    fireEvent.click(pendingTab);
-    expect(screen.getByText('Mempool List')).toBeInTheDocument();
-  });
-
-  it('displays CSVDownloadButton if on address page', () => {
-    usePathname.mockReturnValue('/address/test-address');
-    const routerMock = {
-      pathname: '/address/test-address',
-      route: '/address/[address]',
-      query: { address: 'test-address' },
-      asPath: '/address/test-address',
-    } as unknown as NextRouter;
-
-    const confirmedList = <div>Confirmed List</div>;
-    const mempoolList = <div>Mempool List</div>;
-
-    render(
-      <Provider store={store}>
-        <QueryClientProvider client={queryClient}>
-          <RouterContext.Provider value={routerMock}>
-            <TxListTabs confirmedList={confirmedList} mempoolList={mempoolList} />
-          </RouterContext.Provider>
-        </QueryClientProvider>
-      </Provider>
-    );
-
-    expect(screen.getByRole('button', { name: /Export as CSV/i })).toBeInTheDocument();
-  });
-
-  it('does not display CSVDownloadButton if not on address page', () => {
-    usePathname.mockReturnValue('/transactions');
-
-    const confirmedList = <div>Confirmed List</div>;
-    const mempoolList = <div>Mempool List</div>;
-
-    render(
-      <Provider store={store}>
-        <QueryClientProvider client={queryClient}>
-          <TxListTabs confirmedList={confirmedList} mempoolList={mempoolList} />
-        </QueryClientProvider>
-      </Provider>
-    );
-
-    expect(screen.queryByRole('button', { name: /Export as CSV/i })).not.toBeInTheDocument();
-  });
-});
diff --git a/src/app/common/components/tx-lists/utils/tx.ts b/src/app/common/components/tx-lists/utils/tx.ts
deleted file mode 100644
index 407398508..000000000
--- a/src/app/common/components/tx-lists/utils/tx.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { TransactionType } from '@stacks/stacks-blockchain-api-types';
-
-export const getTransactionTypeLabel = (value: TransactionType) => {
-  switch (value) {
-    case 'token_transfer':
-      return 'STX transfer';
-    case 'coinbase':
-      return 'Coinbase';
-    case 'contract_call':
-      return 'Function call';
-    case 'smart_contract':
-      return 'Contract deploy';
-    case 'poison_microblock':
-      return 'Poison microblock';
-  }
-};
diff --git a/src/app/common/consts/head.ts b/src/app/common/consts/head.ts
deleted file mode 100644
index f58b1c042..000000000
--- a/src/app/common/consts/head.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const defaultTitle = 'Stacks Explorer by Hiro';
diff --git a/src/app/common/hooks/use-current-prices.ts b/src/app/common/hooks/use-current-prices.ts
deleted file mode 100644
index cbe705d19..000000000
--- a/src/app/common/hooks/use-current-prices.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-'use client';
-
-import { QueryFunctionContext, UseQueryOptions, useQuery } from '@tanstack/react-query';
-
-const getCurrentBtcPrice = async () =>
-  fetch('https://api.coingecko.com/api/v3/exchange_rates')
-    .then(res => res.json())
-    .then(data => data?.rates?.usd?.value);
-
-export const useCurrentBtcPrice = () =>
-  useQuery(['current-btc-price'], getCurrentBtcPrice, {
-    staleTime: 30 * 60 * 1000,
-    suspense: false,
-    retry: false,
-  });
-
-const getCurrentStxPrice = async () =>
-  fetch('https://api.coingecko.com/api/v3/simple/price?ids=blockstack,bitcoin&vs_currencies=usd')
-    .then(res => res.json())
-    .then(data => data?.blockstack?.usd);
-
-export const useCurrentStxPrice = (options?: UseQueryOptions<any, unknown, any, any>) =>
-  useQuery(['current-stx-price'], getCurrentStxPrice, {
-    staleTime: 30 * 60 * 1000,
-    suspense: false,
-    retry: false,
-    ...options,
-  });
-
-const getHistoricalStxPrice = async ({ queryKey }: QueryFunctionContext) => {
-  const [_, date] = queryKey;
-  return fetch(
-    `https://api.coingecko.com/api/v3/coins/blockstack/history?date=${date}&localization=false`
-  )
-    .then(res => res.json())
-    .then(data => data?.market_data?.current_price?.usd);
-};
-
-export const useHistoricalStxPrice = (
-  date: string,
-  options?: UseQueryOptions<any, unknown, any, string[]>
-) =>
-  useQuery(['historical-stx-price', date], getHistoricalStxPrice, {
-    staleTime: Infinity,
-    cacheTime: Infinity,
-    refetchOnWindowFocus: false,
-    refetchOnMount: false,
-    refetchOnReconnect: false,
-    suspense: false,
-    retry: false,
-    ...options,
-  });
diff --git a/src/app/common/hooks/use-debounce.ts b/src/app/common/hooks/use-debounce.ts
deleted file mode 100644
index daaf0db60..000000000
--- a/src/app/common/hooks/use-debounce.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { useEffect, useState } from 'react';
-
-export function useDebounce(value: string, delay: number) {
-  const [debouncedValue, setDebouncedValue] = useState(value);
-
-  useEffect(() => {
-    const handler = setTimeout(() => {
-      setDebouncedValue(value);
-    }, delay);
-
-    return () => {
-      clearTimeout(handler);
-    };
-  }, [value, delay]);
-
-  return debouncedValue;
-}
diff --git a/src/app/common/hooks/use-filter-state.tsx b/src/app/common/hooks/use-filter-state.tsx
deleted file mode 100644
index e03622d94..000000000
--- a/src/app/common/hooks/use-filter-state.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-'use client';
-
-import { useAppDispatch, useAppSelector } from '@/common/state/hooks';
-import { useFilterScope } from '@/features/transactions-filter/hooks/use-filter-scope';
-import { txFilters } from '@/features/transactions-filter/transactions-filter-slice';
-
-import { GetTransactionListTypeEnum } from '@stacks/blockchain-api-client';
-
-export const useFilterState = () => {
-  const dispatch = useAppDispatch();
-  const filterScope = useFilterScope();
-
-  const toggleFilterVisibility = () => {
-    dispatch(txFilters[filterScope].actions.toggleVisibility());
-  };
-
-  const toggleFilter = (filter: GetTransactionListTypeEnum) => {
-    dispatch(txFilters[filterScope].actions.toggleFilter(filter));
-  };
-
-  return {
-    toggleFilterVisibility,
-    toggleFilter,
-    isVisible: useAppSelector(txFilters[filterScope].selectors.selectIsVisible),
-    activeFilters: useAppSelector(txFilters[filterScope].selectors.selectActiveFilters),
-  };
-};
diff --git a/src/app/common/hooks/use-random-name.tsx b/src/app/common/hooks/use-random-name.tsx
deleted file mode 100644
index b8b87497c..000000000
--- a/src/app/common/hooks/use-random-name.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import { Config, adjectives, animals, colors, uniqueNamesGenerator } from 'unique-names-generator';
-
-const customConfig: Config = {
-  dictionaries: [adjectives, colors, animals],
-  separator: '-',
-  length: 3,
-};
-
-export const generateRandomName = () => uniqueNamesGenerator(customConfig);
-
-export const useRandomName = () => {
-  return React.useCallback(generateRandomName, []);
-};
diff --git a/src/app/common/hooks/use-stacks-network.ts b/src/app/common/hooks/use-stacks-network.ts
deleted file mode 100644
index 804d310e7..000000000
--- a/src/app/common/hooks/use-stacks-network.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { useGlobalContext } from '@/common/context/useAppContext';
-import { NetworkModes } from '@/common/types/network';
-import { fetchWithApiKey } from '@/common/utils/fetchWithApiKey';
-
-import { StacksMainnet, StacksTestnet } from '@stacks/network';
-
-export const useStacksNetwork = (): StacksTestnet | StacksMainnet => {
-  const selectedNetwork = useGlobalContext().activeNetwork;
-  const apiServer = selectedNetwork.url;
-  const networkMode = selectedNetwork.mode;
-  const Network = networkMode === NetworkModes.Testnet ? StacksTestnet : StacksMainnet;
-  const network = new Network({ url: apiServer, fetchFn: fetchWithApiKey });
-  return network;
-};
diff --git a/src/app/common/hooks/useInfiniteQueryResult.ts b/src/app/common/hooks/useInfiniteQueryResult.ts
deleted file mode 100644
index 2cd16233d..000000000
--- a/src/app/common/hooks/useInfiniteQueryResult.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { useMemo } from 'react';
-import { UseInfiniteQueryResult } from '@tanstack/react-query';
-
-interface GenericResponseType<T> {
-  limit: number;
-  offset: number;
-  total: number;
-  results: T[];
-}
-
-export function useInfiniteQueryResult<T>(
-  response: UseInfiniteQueryResult<GenericResponseType<unknown>>,
-  limit?: number
-) {
-  return useMemo(
-    () =>
-      (response.data?.pages
-        .map(page => page.results)
-        .flat()
-        .slice(0, limit) || []) as T[],
-    [limit, response.data?.pages]
-  );
-}
diff --git a/src/app/common/queries/query-stale-time.ts b/src/app/common/queries/query-stale-time.ts
deleted file mode 100644
index 9cd6f4f29..000000000
--- a/src/app/common/queries/query-stale-time.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-const ONE_SECOND = 1000;
-export const ONE_MINUTE = 60 * ONE_SECOND;
-export const TWO_MINUTES = 2 * ONE_MINUTE;
-export const FIVE_MINUTES = 5 * ONE_MINUTE;
-export const TEN_MINUTES = 10 * ONE_MINUTE;
diff --git a/src/app/common/queries/useAccountBalance.ts b/src/app/common/queries/useAccountBalance.ts
deleted file mode 100644
index 78899af52..000000000
--- a/src/app/common/queries/useAccountBalance.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { useApi } from '@/common/api/client';
-import { getNextPageParam } from '@/common/utils';
-import { UseQueryOptions, useInfiniteQuery, useQuery } from '@tanstack/react-query';
-
-import { AddressBalanceResponse } from '@stacks/stacks-blockchain-api-types';
-
-import { ONE_MINUTE } from './query-stale-time';
-
-export const useAccountBalance = (
-  api: ReturnType<typeof useApi>,
-  { address = '' }: { address?: string },
-  options: UseQueryOptions<any, any, AddressBalanceResponse, any> = {}
-) => {
-  return useQuery(
-    ['accountBalance', address],
-    () =>
-      api.accountsApi.getAccountBalance({
-        principal: address,
-      }),
-    {
-      getNextPageParam,
-      staleTime: ONE_MINUTE,
-      enabled: !!address,
-      ...options,
-    }
-  );
-};
diff --git a/src/app/common/queries/useAddressConfirmedTxsWithTransfersInfinite.ts b/src/app/common/queries/useAddressConfirmedTxsWithTransfersInfinite.ts
deleted file mode 100644
index 946a2ee17..000000000
--- a/src/app/common/queries/useAddressConfirmedTxsWithTransfersInfinite.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { useApi } from '@/common/api/client';
-import { DEFAULT_LIST_LIMIT } from '@/common/constants';
-import { getNextPageParam } from '@/common/utils';
-import { UseQueryOptions, useInfiniteQuery } from '@tanstack/react-query';
-
-import { TWO_MINUTES } from './query-stale-time';
-
-export const useAddressConfirmedTxsWithTransfersInfinite = (
-  api: ReturnType<typeof useApi>,
-  { address = '' }: { address?: string },
-  options: UseQueryOptions<any, any, any, any> = {}
-) => {
-  return useInfiniteQuery(
-    ['addressConfirmedTxsWithTransfersInfinite', address],
-    ({ pageParam }) =>
-      api.accountsApi.getAccountTransactionsWithTransfers({
-        principal: address,
-        limit: DEFAULT_LIST_LIMIT,
-        offset: pageParam || 0,
-      }),
-    {
-      getNextPageParam,
-      staleTime: TWO_MINUTES,
-      enabled: !!address,
-      suspense: false,
-      ...options,
-    }
-  );
-};
diff --git a/src/app/common/queries/useAddressMempoolTxsInfinite.ts b/src/app/common/queries/useAddressMempoolTxsInfinite.ts
deleted file mode 100644
index 5c424d0c6..000000000
--- a/src/app/common/queries/useAddressMempoolTxsInfinite.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { useApi } from '@/common/api/client';
-import { DEFAULT_LIST_LIMIT } from '@/common/constants';
-import { getNextPageParam } from '@/common/utils';
-import { UseQueryOptions, useInfiniteQuery } from '@tanstack/react-query';
-
-import { TWO_MINUTES } from './query-stale-time';
-
-export const useAddressMempoolTxsInfinite = (
-  api: ReturnType<typeof useApi>,
-  { address }: { address: string },
-  options: UseQueryOptions<any, any, any, any> = {}
-) => {
-  return useInfiniteQuery(
-    ['addressMempoolTxsInfinite', address],
-    ({ pageParam }) =>
-      api.transactionsApi.getMempoolTransactionList({
-        address,
-        limit: DEFAULT_LIST_LIMIT,
-        offset: pageParam || 0,
-      }),
-    {
-      getNextPageParam,
-      staleTime: TWO_MINUTES,
-      enabled: !!address,
-      suspense: false,
-      ...options,
-    }
-  );
-};
diff --git a/src/app/common/queries/useAddressNonces.ts b/src/app/common/queries/useAddressNonces.ts
deleted file mode 100644
index 792a7f56b..000000000
--- a/src/app/common/queries/useAddressNonces.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { useApi } from '@/common/api/client';
-import { useQuery } from '@tanstack/react-query';
-
-export const useAddressNonces = (
-  api: ReturnType<typeof useApi>,
-  { address }: { address: string }
-) => {
-  return useQuery(['addressNonces', address], () =>
-    api.accountsApi.getAccountNonces({
-      principal: address,
-    })
-  );
-};
diff --git a/src/app/common/queries/useBlockByHash.ts b/src/app/common/queries/useBlockByHash.ts
deleted file mode 100644
index 3c18cfc0d..000000000
--- a/src/app/common/queries/useBlockByHash.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { useApi } from '@/common/api/client';
-import { UseQueryOptions, useQuery } from '@tanstack/react-query';
-
-export const useBlockByHash = (
-  api: ReturnType<typeof useApi>,
-  { hash }: { hash: string },
-  options: UseQueryOptions<any, any, any, any> = {}
-) => {
-  return useQuery(
-    ['blockByHash', hash],
-    () =>
-      api.blocksApi.getBlockByHash({
-        hash,
-      }),
-    { staleTime: Infinity, ...options }
-  );
-};
diff --git a/src/app/common/queries/useBlockListInfinite.ts b/src/app/common/queries/useBlockListInfinite.ts
deleted file mode 100644
index ca6e4ad22..000000000
--- a/src/app/common/queries/useBlockListInfinite.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { useApi } from '@/common/api/client';
-import { DEFAULT_LIST_LIMIT } from '@/common/constants';
-import { getNextPageParam } from '@/common/utils';
-import { useInfiniteQuery } from '@tanstack/react-query';
-
-import { TWO_MINUTES } from './query-stale-time';
-
-export const useBlockListInfinite = (api: ReturnType<typeof useApi>) => {
-  return useInfiniteQuery(
-    ['blockListInfinite'],
-    ({ pageParam }) =>
-      api.blocksApi.getBlockList({
-        limit: DEFAULT_LIST_LIMIT,
-        offset: pageParam || 0,
-      }),
-    { getNextPageParam, staleTime: TWO_MINUTES }
-  );
-};
diff --git a/src/app/common/queries/useBlockTxsInfinite.ts b/src/app/common/queries/useBlockTxsInfinite.ts
deleted file mode 100644
index b9bb0ed65..000000000
--- a/src/app/common/queries/useBlockTxsInfinite.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { useApi } from '@/common/api/client';
-import { MAX_BLOCK_TRANSACTIONS_PER_CALL } from '@/common/constants';
-import { getNextPageParam } from '@/common/utils';
-import { useInfiniteQuery } from '@tanstack/react-query';
-
-import { TWO_MINUTES } from './query-stale-time';
-
-export const useBlockTxsInfinite = (
-  api: ReturnType<typeof useApi>,
-  { blockHash }: { blockHash: string }
-) => {
-  return useInfiniteQuery(
-    ['blockTxsInfinite', blockHash],
-    ({ pageParam }) =>
-      api.transactionsApi.getTransactionsByBlockHash({
-        blockHash,
-        limit: MAX_BLOCK_TRANSACTIONS_PER_CALL,
-        offset: pageParam || 0,
-      }),
-    { getNextPageParam, staleTime: TWO_MINUTES }
-  );
-};
diff --git a/src/app/common/queries/useConfirmedTransactionsInfinite.ts b/src/app/common/queries/useConfirmedTransactionsInfinite.ts
deleted file mode 100644
index 3808d0651..000000000
--- a/src/app/common/queries/useConfirmedTransactionsInfinite.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { useApi } from '@/common/api/client';
-import { DEFAULT_LIST_LIMIT } from '@/common/constants';
-import { getNextPageParam } from '@/common/utils';
-import { useInfiniteQuery } from '@tanstack/react-query';
-
-import { TWO_MINUTES } from './query-stale-time';
-
-export const useConfirmedTransactionsInfinite = (
-  api: ReturnType<typeof useApi>,
-  wait?: boolean
-) => {
-  return useInfiniteQuery(
-    ['confirmedTransactionsInfinite'],
-    ({ pageParam }) =>
-      api.transactionsApi.getTransactionList({
-        limit: DEFAULT_LIST_LIMIT,
-        offset: pageParam || 0,
-      }),
-    { getNextPageParam, staleTime: TWO_MINUTES }
-  );
-};
diff --git a/src/app/common/queries/useContractById.ts b/src/app/common/queries/useContractById.ts
deleted file mode 100644
index 78391e123..000000000
--- a/src/app/common/queries/useContractById.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { useApi } from '@/common/api/client';
-import { ContractWithParsedAbi } from '@/common/types/contract';
-import { UseQueryOptions, useQuery } from '@tanstack/react-query';
-
-export const useContractById = (
-  api: ReturnType<typeof useApi>,
-  { contractId }: { contractId: string },
-  options: UseQueryOptions<any, any, any, any> = {}
-) => {
-  return useQuery<ContractWithParsedAbi>(
-    ['contractById', contractId],
-    () =>
-      api.smartContractsApi
-        .getContractById({
-          contractId,
-        })
-        .then((contract: any) => ({
-          ...contract,
-          abi: contract.abi ? JSON.parse(contract.abi) : undefined,
-        })),
-    { staleTime: Infinity, ...options }
-  );
-};
diff --git a/src/app/common/queries/useCoreApiInfo.ts b/src/app/common/queries/useCoreApiInfo.ts
deleted file mode 100644
index 252adbece..000000000
--- a/src/app/common/queries/useCoreApiInfo.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { useApi } from '@/common/api/client';
-import { useQuery } from '@tanstack/react-query';
-
-export const useCoreApiInfo = (api: ReturnType<typeof useApi>) => {
-  return useQuery(['coreApiInfo'], () => api.infoApi.getCoreApiInfo(), {});
-};
diff --git a/src/app/common/queries/useFtMetadata.ts b/src/app/common/queries/useFtMetadata.ts
deleted file mode 100644
index e006d0071..000000000
--- a/src/app/common/queries/useFtMetadata.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { useApi } from '@/common/api/client';
-import { FtMetadataResponse } from '@hirosystems/token-metadata-api-client';
-import { UseQueryOptions, useQuery } from '@tanstack/react-query';
-
-export const useFtMetadata = (
-  api: ReturnType<typeof useApi>,
-  { contractId }: { contractId: string },
-  options: UseQueryOptions<any, any, FtMetadataResponse, any> = {}
-) => {
-  return useQuery(
-    ['contractFtMetadata', contractId],
-    () => api.tokenMetadataApi?.getFtMetadata(contractId),
-    {
-      retry: false,
-      staleTime: Infinity,
-      suspense: false,
-      refetchOnWindowFocus: false,
-      ...options,
-    }
-  );
-};
diff --git a/src/app/common/queries/useMempoolTransactionsInfinite.ts b/src/app/common/queries/useMempoolTransactionsInfinite.ts
deleted file mode 100644
index 3b0cb18ba..000000000
--- a/src/app/common/queries/useMempoolTransactionsInfinite.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { useApi } from '@/common/api/client';
-import { DEFAULT_LIST_LIMIT } from '@/common/constants';
-import { getNextPageParam } from '@/common/utils';
-import { useInfiniteQuery } from '@tanstack/react-query';
-
-import { TWO_MINUTES } from './query-stale-time';
-
-export const useMempoolTransactionsInfinite = (api: ReturnType<typeof useApi>) => {
-  return useInfiniteQuery(
-    ['mempoolTransactionsInfinite'],
-    ({ pageParam }) =>
-      api.transactionsApi.getMempoolTransactionList({
-        limit: DEFAULT_LIST_LIMIT,
-        offset: pageParam || 0,
-      }),
-    // new Promise(function (resolve) {
-    //   setTimeout(() => resolve([]), 1000000);
-    // }),
-    {
-      getNextPageParam,
-      staleTime: TWO_MINUTES,
-      refetchOnMount: false,
-      retry: false,
-      refetchOnReconnect: false,
-      refetchInterval: false,
-      refetchIntervalInBackground: false,
-    }
-  );
-};
diff --git a/src/app/common/queries/useMicroblockByHash.ts b/src/app/common/queries/useMicroblockByHash.ts
deleted file mode 100644
index 72901cbb4..000000000
--- a/src/app/common/queries/useMicroblockByHash.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { useApi } from '@/common/api/client';
-import { useQuery } from '@tanstack/react-query';
-
-export const useMicroblockByHash = (
-  api: ReturnType<typeof useApi>,
-  { microblockHash }: { microblockHash: string }
-) => {
-  return useQuery(
-    ['microblockByHash', microblockHash],
-    () =>
-      api.microblocksApi.getMicroblockByHash({
-        hash: microblockHash,
-      }),
-    { staleTime: Infinity }
-  );
-};
diff --git a/src/app/common/queries/useNftHoldings.ts b/src/app/common/queries/useNftHoldings.ts
deleted file mode 100644
index be370d27b..000000000
--- a/src/app/common/queries/useNftHoldings.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { useApi } from '@/common/api/client';
-import { getNextPageParam } from '@/common/utils';
-import { UseQueryOptions, useInfiniteQuery, useQuery } from '@tanstack/react-query';
-
-import { NonFungibleTokenHoldingsList } from '@stacks/stacks-blockchain-api-types';
-
-import { ONE_MINUTE } from './query-stale-time';
-
-export const useNftHoldings = (
-  api: ReturnType<typeof useApi>,
-  { address = '' }: { address?: string },
-  options: UseQueryOptions<any, any, NonFungibleTokenHoldingsList, any> = {}
-) => {
-  return useQuery(
-    ['nftHoldings', address],
-    () =>
-      api.nonFungibleTokensApi.getNftHoldings({
-        principal: address,
-        limit: 200,
-      }),
-    {
-      getNextPageParam,
-      staleTime: ONE_MINUTE,
-      enabled: !!address,
-      ...options,
-    }
-  );
-};
diff --git a/src/app/common/queries/useNftMetadata.ts b/src/app/common/queries/useNftMetadata.ts
deleted file mode 100644
index 0b1b73a0f..000000000
--- a/src/app/common/queries/useNftMetadata.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { useApi } from '@/common/api/client';
-import { NftMetadataResponse } from '@hirosystems/token-metadata-api-client';
-import { UseQueryOptions, useQuery } from '@tanstack/react-query';
-
-export const useNftMetadata = (
-  api: ReturnType<typeof useApi>,
-  { contractId, tokenId }: { contractId: string; tokenId: number },
-  options: UseQueryOptions<any, any, NftMetadataResponse, any> = {}
-) => {
-  return useQuery(
-    ['contractNftMetadata', contractId, tokenId],
-    () => api.tokenMetadataApi?.getNftMetadata(contractId, tokenId),
-    {
-      retry: false,
-      staleTime: Infinity,
-      suspense: false,
-      refetchOnWindowFocus: false,
-      ...options,
-    }
-  );
-};
diff --git a/src/app/common/queries/useTxById.ts b/src/app/common/queries/useTxById.ts
deleted file mode 100644
index bc730e24c..000000000
--- a/src/app/common/queries/useTxById.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { useApi } from '@/common/api/client';
-import { DEFAULT_TX_EVENTS_LIMIT } from '@/common/constants';
-import { UseQueryOptions, useQuery } from '@tanstack/react-query';
-
-export const useTxById = (
-  api: ReturnType<typeof useApi>,
-  { txId }: { txId: string },
-  options: UseQueryOptions<any, any, any, any> = {}
-) => {
-  return useQuery(
-    ['txById', txId],
-    () =>
-      api.transactionsApi.getTransactionById({
-        txId,
-        eventLimit: DEFAULT_TX_EVENTS_LIMIT,
-        eventOffset: 0,
-      }),
-    { staleTime: Infinity, ...options }
-  );
-};
diff --git a/src/app/common/server-calls/fetchClaritySyntax.ts b/src/app/common/server-calls/fetchClaritySyntax.ts
deleted file mode 100644
index ac93de7af..000000000
--- a/src/app/common/server-calls/fetchClaritySyntax.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export async function fetchClaritySyntax() {
-  const response = await fetch(
-    'https://raw.githubusercontent.com/hirosystems/clarinet/main/components/clarity-vscode/syntaxes/clarity.tmLanguage.json'
-  );
-  return response.text();
-}
diff --git a/src/app/common/styles/border.ts b/src/app/common/styles/border.ts
deleted file mode 100644
index 1f150a06a..000000000
--- a/src/app/common/styles/border.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { useColorMode } from '@chakra-ui/react';
-import { css } from '@emotion/css';
-
-export const useVerticallyStackedElementsBorderStyle = () =>
-  css`
-    > * {
-      border-bottom: 1px solid var(--stacks-colors-border-${useColorMode().colorMode});
-      &:last-child {
-        border-bottom: none;
-      }
-    }
-  `;
diff --git a/src/app/common/utils/__tests__/validateUrl.test.ts b/src/app/common/utils/__tests__/validateUrl.test.ts
deleted file mode 100644
index fcb915625..000000000
--- a/src/app/common/utils/__tests__/validateUrl.test.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { validateUrl } from '../validateUrl';
-
-describe('validateUrl', () => {
-  it('should return true if the url is valid', () => {
-    expect(validateUrl('https://www.google.com')).toBe(true);
-  });
-  it('should return false if the url is invalid', () => {
-    expect(validateUrl('INVALID_URL')).toBe(false);
-  });
-});
diff --git a/src/app/common/utils/buildUrl.ts b/src/app/common/utils/buildUrl.ts
deleted file mode 100644
index 11a417f36..000000000
--- a/src/app/common/utils/buildUrl.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Network } from '@/common/types/network';
-import { LinkProps } from 'next/link';
-
-export const getQueryParams = (network: Network): string => {
-  const suffix = `?chain=${encodeURIComponent(network?.mode)}`;
-  if (network?.isSubnet) {
-    return `${suffix}&subnet=${network.url}`;
-  }
-  if (network?.isCustomNetwork) {
-    return `${suffix}&api=${network.url}`;
-  }
-  return suffix;
-};
-
-export const buildUrl = (href: LinkProps['href'], network: Network): string => {
-  return `${href}${getQueryParams(network)}`;
-};
diff --git a/src/app/common/utils/head.ts b/src/app/common/utils/head.ts
deleted file mode 100644
index 8488cd29c..000000000
--- a/src/app/common/utils/head.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { TxStatus } from '@/common/types/tx';
-
-export const useFaviconName = (txStatus?: TxStatus) => {
-  const suffix = txStatus === 'pending' ? 'pending' : txStatus === 'failed' ? 'failed' : 'success';
-  return `favicon${txStatus ? `-${suffix}` : ''}`;
-};
diff --git a/src/app/common/utils/sandbox.ts b/src/app/common/utils/sandbox.ts
deleted file mode 100644
index ab1bca865..000000000
--- a/src/app/common/utils/sandbox.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * Predicate that a function of a contract should be shown.
- *
- * Functions that are private should NOT be shown
- * Functions that are pox-2.stacks-increase should NOT be
- * shown as it is invalid since Stacks 2.2
- *
- * @param contractId the contract id
- * @param abiFn the abi of the function or
- * @returns true if the provided function should be shown in the explorer.
- */
-export function showFn(contractId: string, abiFn: any) {
-  return (
-    abiFn.access !== 'private' &&
-    (abiFn.name !== 'stack-increase' ||
-      (contractId !== 'SP000000000000000000002Q6VF78.pox-2' &&
-        contractId !== 'ST000000000000000000002AMW42H.pox-2'))
-  );
-}
diff --git a/src/app/common/utils/validateUrl.ts b/src/app/common/utils/validateUrl.ts
deleted file mode 100644
index 7898f1856..000000000
--- a/src/app/common/utils/validateUrl.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export const validateUrl = (url: string) => {
-  try {
-    new URL(url);
-    return true;
-  } catch (_) {
-    return false;
-  }
-};
diff --git a/src/app/components/BlockList/AnimatedBlockAndMicroblocksItem.tsx b/src/app/components/BlockList/AnimatedBlockAndMicroblocksItem.tsx
deleted file mode 100644
index a1c2e1093..000000000
--- a/src/app/components/BlockList/AnimatedBlockAndMicroblocksItem.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { FC, memo, useEffect, useState } from 'react';
-import { BlockAndMicroblocksItem } from './BlockAndMicroblocksItem';
-import { Collapse } from '@/ui/components';
-import { EnhancedBlock } from '@/app/components/BlockList/types';
-
-export const animationDuration = 0.25;
-
-export const AnimatedBlockAndMicroblocksItem: FC<{
-  block: EnhancedBlock;
-  onAnimationExit?: () => void;
-}> = memo(
-  ({ block, onAnimationExit }) => {
-    const [show, setShow] = useState(!block.animate);
-    useEffect(() => {
-      if (block.animate) {
-        setShow(true);
-      }
-    }, [block.animate]);
-    useEffect(() => {
-      if (block.destroy) {
-        setShow(false);
-      }
-    }, [block.destroy]);
-
-    return (
-      <Collapse
-        in={show}
-        animateOpacity
-        transition={{
-          enter: { duration: animationDuration },
-          exit: { duration: animationDuration },
-        }}
-        onAnimationComplete={state => {
-          if (state === 'exit') {
-            onAnimationExit?.();
-          }
-        }}
-        data-testid={`block-item-${block.hash}`}
-      >
-        <BlockAndMicroblocksItem block={block} />
-      </Collapse>
-    );
-  },
-  (prevProps, currentProps) =>
-    prevProps.block.hash === currentProps.block.hash &&
-    prevProps.block.destroy === currentProps.block.destroy
-);
diff --git a/src/app/components/BlockList/BlockAndMicroblocksItem.tsx b/src/app/components/BlockList/BlockAndMicroblocksItem.tsx
deleted file mode 100644
index 7e94c572a..000000000
--- a/src/app/components/BlockList/BlockAndMicroblocksItem.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { AccordionItem } from '@/ui/AccordionItem';
-import { Flex } from '@/ui/Flex';
-import { AccordionButton } from '@/ui/AccordionButton';
-import { AccordionIcon } from '@/ui/AccordionIcon';
-import { AccordionPanel } from '@/ui/AccordionPanel';
-import { useVerticallyStackedElementsBorderStyle } from '@/app/common/styles/border';
-import { MicroblockListItem } from './MicroblockListItem';
-import { Text } from '@/ui/Text';
-import React, { memo } from 'react';
-import { Block } from '@stacks/stacks-blockchain-api-types';
-import { BlockListItem } from './BlockListItem';
-
-export const BlockAndMicroblocksItem: React.FC<{ block: Block }> = memo(
-  ({ block }) => {
-    return (
-      <AccordionItem pl={'20px'} border={'none'}>
-        <Flex gap={'6px'}>
-          <BlockListItem block={block} data-test={`block-${block.hash}`} />
-          <AccordionButton
-            flexGrow={0}
-            flexShrink={0}
-            width={'30px'}
-            ml={'auto'}
-            p={0}
-            justifyContent={'center'}
-          >
-            <AccordionIcon />
-          </AccordionButton>
-        </Flex>
-        <AccordionPanel p={'0 30px 0 0'} css={useVerticallyStackedElementsBorderStyle}>
-          {!!block.microblocks_accepted?.length ? (
-            block.microblocks_accepted.map((microblockHash, microblockIndex) => (
-              <MicroblockListItem
-                blockTime={block.burn_block_time}
-                hash={microblockHash}
-                index={microblockIndex}
-                key={microblockHash}
-              />
-            ))
-          ) : (
-            <Text fontSize={'14px'} p={'20px'} align={'center'}>
-              No Microblocks
-            </Text>
-          )}
-        </AccordionPanel>
-      </AccordionItem>
-    );
-  },
-  (prevProps, currentProps) => prevProps.block.hash === currentProps.block.hash
-);
diff --git a/src/app/components/BlockList/BlockListItem.tsx b/src/app/components/BlockList/BlockListItem.tsx
deleted file mode 100644
index 06ec02b81..000000000
--- a/src/app/components/BlockList/BlockListItem.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import { TwoColsListItem } from '@/common/components/TwoColumnsListItem';
-import { addSepBetweenStrings, toRelativeTime, truncateMiddle } from '@/common/utils';
-import { BtcStxBlockLinks } from '@/components/btc-stx-block-links';
-import { BlockLink } from '@/components/links';
-import { Circle, Flex, FlexProps, Icon } from '@/ui/components';
-import { CheckIcon } from '@/ui/icons';
-import { Caption, Text } from '@/ui/typography';
-import pluralize from 'pluralize';
-import React from 'react';
-
-import { Block } from '@stacks/stacks-blockchain-api-types';
-
-export const BlockListItem: React.FC<{ block: Block } & FlexProps> = React.memo(
-  ({ block, ...rest }) => {
-    return (
-      <TwoColsListItem
-        icon={
-          <BlockLink hash={block.hash}>
-            <Circle size="40px">
-              <Icon as={CheckIcon} size="16px" color={'textCaption.light'} />
-            </Circle>
-          </BlockLink>
-        }
-        leftContent={{
-          title: (
-            <Flex
-              onClick={e => {
-                e.stopPropagation();
-              }}
-              color={'textTitle'}
-              alignItems="center"
-            >
-              <BtcStxBlockLinks
-                btcBlockHeight={block.burn_block_height}
-                stxBlockHeight={block.height}
-                stxBlockHash={block.hash}
-                fontSize={'16px'}
-              />
-            </Flex>
-          ),
-          subtitle: (
-            <Caption display="block">
-              {addSepBetweenStrings([
-                `${block?.microblocks_accepted?.length || 0} ${pluralize(
-                  'microblock',
-                  block?.microblocks_accepted?.length || 0
-                )}`,
-              ]) +
-                ' · ' +
-                addSepBetweenStrings([
-                  `${block?.txs?.length || 0} ${pluralize('transaction', block?.txs?.length || 0)}`,
-                ])}
-            </Caption>
-          ),
-        }}
-        rightContent={{
-          title: (
-            <Text
-              fontSize="14px"
-              width="100%"
-              textAlign="right"
-              color={'textBody'}
-              display="block"
-              suppressHydrationWarning={true}
-            >
-              {toRelativeTime(block.burn_block_time * 1000)}
-            </Text>
-          ),
-          subtitle: <Caption display="block">{truncateMiddle(block.hash)}</Caption>,
-        }}
-        {...rest}
-      />
-    );
-  }
-);
diff --git a/src/app/components/BlockList/MicroblockListItem.tsx b/src/app/components/BlockList/MicroblockListItem.tsx
deleted file mode 100644
index 55f330218..000000000
--- a/src/app/components/BlockList/MicroblockListItem.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import { toRelativeTime } from '@/common/utils';
-import { MicroBlockLink } from '@/components/links';
-import { Circle, Flex, Icon, Stack } from '@/ui/components';
-import { Caption, Text, Title } from '@/ui/typography';
-import { useColorMode } from '@chakra-ui/react';
-import React from 'react';
-import { FiZap } from 'react-icons/fi';
-
-export const MicroblockListItem: React.FC<{
-  blockTime: number;
-  hash: string;
-  index: number;
-}> = ({ blockTime, hash, index, ...rest }) => {
-  return (
-    <Flex
-      justifyContent="space-between"
-      py="24px"
-      color={'textBody'}
-      _hover={{
-        borderLeftColor: 'accent',
-      }}
-      {...rest}
-    >
-      <Stack as="span" isInline alignItems="center" spacing="16px" minWidth={0}>
-        <Circle size="40px" flexShrink={0}>
-          <Icon as={FiZap} size="16px" fill={'textCaption.light'} color={'textCaption.light'} />
-        </Circle>
-        <Stack spacing="8px" as="span" minWidth={0}>
-          <Flex alignItems="center" minWidth={0}>
-            <MicroBlockLink hash={hash}>
-              <Title
-                display="block"
-                fontSize={'14px'}
-                as="a"
-                color={`links.${useColorMode().colorMode}`}
-                _hover={{
-                  cursor: 'pointer',
-                  textDecoration: 'underline',
-                }}
-                minWidth={0}
-                textOverflow={'ellipsis'}
-                overflow={'hidden'}
-                whiteSpace={'nowrap'}
-              >
-                {hash}
-              </Title>
-            </MicroBlockLink>
-          </Flex>
-          <Caption display="block">Microblock</Caption>
-        </Stack>
-      </Stack>
-      <Stack spacing="8px" textAlign="right" as="span" minWidth={'80px'}>
-        <Text
-          fontSize="14px"
-          width="100%"
-          textAlign="right"
-          display="block"
-          suppressHydrationWarning={true}
-        >
-          {toRelativeTime(blockTime * 1000)}
-        </Text>
-      </Stack>
-    </Flex>
-  );
-};
diff --git a/src/app/components/BlockList/__tests__/BlocksListBase.test.tsx b/src/app/components/BlockList/__tests__/BlocksListBase.test.tsx
deleted file mode 100644
index fcfc41d21..000000000
--- a/src/app/components/BlockList/__tests__/BlocksListBase.test.tsx
+++ /dev/null
@@ -1,172 +0,0 @@
-import React from 'react';
-import { render, screen, fireEvent, waitFor, act } from '@testing-library/react';
-import BlocksListBase from '../';
-import { useBlockListInfinite as useBlockListInfiniteActual } from '@/app/common/queries/useBlockListInfinite';
-import { connectWebSocketClient as connectWebSocketClientActual } from '@stacks/blockchain-api-client';
-import { Block } from '@stacks/stacks-blockchain-api-types';
-import { StacksApiWebSocketClient } from '@stacks/blockchain-api-client';
-
-import { EnhancedBlock } from '@/app/components/BlockList/types';
-
-const useBlockListInfinite = useBlockListInfiniteActual as jest.MockedFunction<
-  typeof useBlockListInfiniteActual
->;
-
-const connectWebSocketClient = connectWebSocketClientActual as jest.MockedFunction<
-  typeof connectWebSocketClientActual
->;
-jest.mock('@/common/api/client', () => ({
-  useApi: jest.fn(),
-}));
-
-jest.mock('@stacks/blockchain-api-client', () => ({
-  connectWebSocketClient: jest.fn(),
-}));
-
-jest.mock('@/app/common/queries/useBlockListInfinite', () => ({
-  useBlockListInfinite: jest.fn(() => ({})),
-}));
-
-window.scrollTo = jest.fn();
-
-const LIMIT = 10;
-
-describe('BlocksListBase component', () => {
-  let mockSubscribeBlocksCallback: (event: Block) => any;
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-
-    const mockClient = {
-      subscribeBlocks: jest.fn(callback => {
-        mockSubscribeBlocksCallback = callback;
-        return {
-          unsubscribe: async () => {
-            await new Promise(res => setTimeout(res, 50));
-          },
-        };
-      }),
-    };
-
-    connectWebSocketClient.mockResolvedValue(mockClient as unknown as StacksApiWebSocketClient);
-  });
-
-  it('renders without crashing', () => {
-    render(<BlocksListBase limit={LIMIT} />);
-  });
-
-  it('displays error when blocks fetching fails', () => {
-    useBlockListInfinite.mockReturnValue({
-      isError: true,
-    } as any);
-
-    render(<BlocksListBase limit={LIMIT} />);
-    expect(screen.getByText('Failed to load blocks')).toBeInTheDocument();
-  });
-
-  it('displays skeleton loader when blocks are not available', () => {
-    useBlockListInfinite.mockReturnValue({} as any);
-
-    render(<BlocksListBase limit={LIMIT} />);
-    expect(screen.getByTestId('skeleton-block-list')).toBeInTheDocument();
-  });
-
-  it('toggles live view on switch click', async () => {
-    useBlockListInfinite.mockReturnValue({
-      data: { pages: [{ results: [{ hash: '1' }, { hash: '2' }] }] },
-    } as any);
-
-    render(<BlocksListBase limit={LIMIT} />);
-
-    const switchElement = screen.getByRole('checkbox', { name: /live view/i });
-    expect(switchElement).toBeInTheDocument();
-
-    act(() => {
-      fireEvent.click(switchElement);
-    });
-    await waitFor(() => {
-      expect(switchElement).toBeChecked();
-    });
-  });
-
-  it('renders blocks from WebSocket correctly and removes old blocks', async () => {
-    const mockResult = [
-      { hash: '1', height: 1 },
-      { hash: '2', height: 2 },
-    ];
-
-    useBlockListInfinite.mockReturnValue({
-      data: {
-        pages: [
-          {
-            results: mockResult,
-          },
-        ],
-      },
-    } as any);
-
-    render(<BlocksListBase limit={LIMIT} />);
-
-    const switchElement = screen.getByRole('checkbox', { name: /live view/i });
-
-    act(() => {
-      fireEvent.click(switchElement);
-    });
-
-    expect(switchElement).toBeChecked();
-
-    const mockBlock = {
-      hash: '3',
-      height: 3,
-    } as EnhancedBlock;
-
-    await act(async () => {
-      await Promise.resolve().then(() => mockSubscribeBlocksCallback(mockBlock));
-    });
-
-    // check if the new block is added to the list
-    await waitFor(() => {
-      expect(screen.getByText('#1')).toBeInTheDocument();
-      expect(screen.getByText('#2')).toBeInTheDocument();
-      expect(screen.getByText(`#${mockBlock.height}`)).toBeInTheDocument();
-    });
-
-    // add more blocks to the list up to the limit
-    await act(async () => {
-      await Promise.all(
-        Array.from(
-          { length: LIMIT - mockResult.length - 1 },
-          (_, i) => i + mockResult.length + 1
-        ).map(i =>
-          Promise.resolve().then(() => {
-            mockSubscribeBlocksCallback({
-              hash: `${i + 1}`,
-              height: i + 1,
-            } as EnhancedBlock);
-          })
-        )
-      );
-    });
-
-    // check if first and last block are visible in the list
-    await waitFor(() => {
-      expect(screen.getByText('#1')).toBeInTheDocument();
-      expect(screen.getByText('#10')).toBeInTheDocument();
-    });
-
-    // add one more block to the list to trigger the removal of the oldest block
-    await act(async () => {
-      await Promise.resolve().then(() =>
-        mockSubscribeBlocksCallback({
-          hash: '11',
-          height: 11,
-        } as EnhancedBlock)
-      );
-    });
-
-    // check if the first block is removed from the list
-    await waitFor(() => {
-      expect(screen.queryByText('#1')).not.toBeInTheDocument();
-    });
-  });
-});
diff --git a/src/app/components/BlockList/__tests__/MicroblockListItem.test.tsx b/src/app/components/BlockList/__tests__/MicroblockListItem.test.tsx
deleted file mode 100644
index d813c548b..000000000
--- a/src/app/components/BlockList/__tests__/MicroblockListItem.test.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { MicroblockListItem } from '../MicroblockListItem';
-
-jest.mock('@/common/utils', () => ({
-  toRelativeTime: jest.fn(time => `MockRelativeTime${time}`),
-}));
-
-describe('MicroblockListItem component', () => {
-  it('renders correctly', () => {
-    const { asFragment } = render(
-      <MicroblockListItem blockTime={1619047871} hash="mockHash" index={1} />
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-});
diff --git a/src/app/components/BlockList/__tests__/__snapshots__/MicroblockListItem.test.tsx.snap b/src/app/components/BlockList/__tests__/__snapshots__/MicroblockListItem.test.tsx.snap
deleted file mode 100644
index df2e6590e..000000000
--- a/src/app/components/BlockList/__tests__/__snapshots__/MicroblockListItem.test.tsx.snap
+++ /dev/null
@@ -1,64 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`MicroblockListItem component renders correctly 1`] = `
-<DocumentFragment>
-  <div
-    class="css-brzhns"
-  >
-    <span
-      class="chakra-stack css-1h7m9p5"
-    >
-      <div
-        class="css-1gqk193"
-      >
-        <svg
-          class="chakra-icon css-1bc6rbx"
-          fill="none"
-          focusable="false"
-          height="16px"
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          viewBox="0 0 24 24"
-          width="16px"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <polygon
-            points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"
-          />
-        </svg>
-      </div>
-      <span
-        class="chakra-stack css-x6ucgl"
-      >
-        <div
-          class="css-1exw3s2"
-        >
-          <a
-            class="chakra-text css-jqqks0"
-            href="/microblock/mockHash?chain=mainnet"
-          >
-            mockHash
-          </a>
-        </div>
-        <span
-          class="chakra-text css-1h2w9sn"
-          style="user-select: none;"
-        >
-          Microblock
-        </span>
-      </span>
-    </span>
-    <span
-      class="chakra-stack css-afdpdg"
-    >
-      <span
-        class="chakra-text css-zousv3"
-      >
-        MockRelativeTime1619047871000
-      </span>
-    </span>
-  </div>
-</DocumentFragment>
-`;
diff --git a/src/app/components/BlockList/hooks/useBlockList.ts b/src/app/components/BlockList/hooks/useBlockList.ts
deleted file mode 100644
index 6c042c9e1..000000000
--- a/src/app/components/BlockList/hooks/useBlockList.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { getNextPageParam } from '@/common/utils';
-import { BlockQueryKeys } from '@/features/block/query-keys';
-import { useHomeQueries } from '@/features/home/useHomeQueries';
-import { useInfiniteQuery } from '@tanstack/react-query';
-
-export function useBlockList(limit: number) {
-  const queries = useHomeQueries();
-  const { data: blocks, ...actions } = useInfiniteQuery(
-    [BlockQueryKeys.blocks],
-    ({ pageParam }) => queries.fetchBlocks(limit, pageParam || 0)(),
-    { getNextPageParam, refetchOnWindowFocus: true }
-  );
-  return { blocks, actions };
-}
diff --git a/src/app/components/BlockList/index.tsx b/src/app/components/BlockList/index.tsx
deleted file mode 100644
index 18f0f430e..000000000
--- a/src/app/components/BlockList/index.tsx
+++ /dev/null
@@ -1,131 +0,0 @@
-'use client';
-
-import { useApi } from '@/common/api/client';
-import { SkeletonBlockList } from '@/components/loaders/skeleton-text';
-import { Section } from '@/components/section';
-import { SectionFooterAction } from '@/components/section-footer-button';
-import { Accordion } from '@/ui/Accordion';
-import { FormControl, FormLabel, Switch } from '@/ui/components';
-import { Text } from '@/ui/typography';
-import dynamic from 'next/dynamic';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-
-import { Block } from '@stacks/stacks-blockchain-api-types';
-import { connectWebSocketClient } from '@stacks/blockchain-api-client';
-
-import { useInfiniteQueryResult } from '../../common/hooks/useInfiniteQueryResult';
-import { useBlockListInfinite } from '../../common/queries/useBlockListInfinite';
-import { useGlobalContext } from '@/common/context/useAppContext';
-import { AnimatedBlockAndMicroblocksItem } from '@/app/components/BlockList/AnimatedBlockAndMicroblocksItem';
-import { EnhancedBlock } from '@/app/components/BlockList/types';
-import { DEFAULT_LIST_LIMIT } from '@/common/constants';
-import { BlockAndMicroblocksItem } from '@/app/components/BlockList/BlockAndMicroblocksItem';
-
-const BlocksListBase: React.FC<{
-  limit?: number;
-}> = ({ limit }) => {
-  const [isLive, setIsLive] = React.useState(false);
-  const [initialBlocks, setInitialBlocks] = useState<EnhancedBlock[]>([]);
-  const [latestBlocks, setLatestBlocks] = useState<EnhancedBlock[]>([]);
-  const activeNetwork = useGlobalContext().activeNetwork;
-  const api = useApi();
-  const response = useBlockListInfinite(api);
-  const { isError, isFetchingNextPage, fetchNextPage, hasNextPage } = response;
-
-  const blocks = useInfiniteQueryResult<Block>(response, limit);
-
-  useEffect(() => {
-    setInitialBlocks(blocks);
-  }, [blocks]);
-
-  useEffect(() => {
-    if (!isLive) return;
-    let sub: {
-      unsubscribe?: () => Promise<void>;
-    };
-    const subscribe = async () => {
-      const client = await connectWebSocketClient(activeNetwork.url.replace('https://', 'wss://'));
-      sub = await client.subscribeBlocks((block: any) => {
-        setLatestBlocks(prevLatestBlocks => [
-          { ...block, microblock_tx_count: {}, animate: true },
-          ...prevLatestBlocks,
-        ]);
-      });
-    };
-    void subscribe();
-    return () => {
-      if (sub?.unsubscribe) {
-        void sub.unsubscribe();
-      }
-    };
-  }, [activeNetwork.url, isLive]);
-
-  const [counter, setCounter] = useState(10000000);
-
-  const allBlocks = useMemo(() => {
-    return [...latestBlocks, ...initialBlocks]
-      .sort((a, b) => (b.height || 0) - (a.height || 0))
-      .reduce((acc: EnhancedBlock[], block, index) => {
-        if (!acc.some(b => b.height === block.height)) {
-          acc.push({ ...block, destroy: index >= (limit || DEFAULT_LIST_LIMIT) });
-        }
-        return acc;
-      }, []);
-  }, [initialBlocks, latestBlocks, limit]);
-
-  const removeOldBlock = useCallback((block: EnhancedBlock) => {
-    setInitialBlocks(prevBlocks => prevBlocks.filter(b => b.height !== block.height));
-    setLatestBlocks(prevBlocks => prevBlocks.filter(b => b.height !== block.height));
-  }, []);
-
-  if (isError) return <Text>Failed to load blocks</Text>;
-
-  if (!allBlocks?.length) return <SkeletonBlockList />;
-
-  return (
-    <Section
-      title="Recent Blocks"
-      gridColumnStart={['1', '1', '2']}
-      gridColumnEnd={['2', '2', '3']}
-      minWidth={0}
-      topRight={
-        <FormControl display="flex" alignItems="center">
-          <FormLabel htmlFor="blocks-live-view-switch" mb="0">
-            live view
-          </FormLabel>
-          <Switch id="blocks-live-view-switch" onChange={() => setIsLive(!isLive)} />
-        </FormControl>
-      }
-    >
-      <Accordion allowMultiple>
-        {allBlocks?.map(block =>
-          isLive ? (
-            <AnimatedBlockAndMicroblocksItem
-              block={block}
-              key={block.hash}
-              onAnimationExit={() => removeOldBlock(block)}
-            />
-          ) : (
-            <BlockAndMicroblocksItem block={block} key={block.hash} />
-          )
-        )}
-      </Accordion>
-      {!isLive && (
-        <SectionFooterAction
-          isLoading={isFetchingNextPage}
-          hasNextPage={hasNextPage}
-          href={limit ? '/blocks' : undefined}
-          fetchNextPage={limit ? undefined : fetchNextPage}
-          label={'blocks'}
-        />
-      )}
-    </Section>
-  );
-};
-
-export default BlocksListBase;
-
-export const BlocksList = dynamic(() => import('.'), {
-  loading: () => <SkeletonBlockList />,
-  ssr: false,
-});
diff --git a/src/app/components/BlockList/types.ts b/src/app/components/BlockList/types.ts
deleted file mode 100644
index 563ec6a8f..000000000
--- a/src/app/components/BlockList/types.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { Block } from '@stacks/stacks-blockchain-api-types';
-
-export type EnhancedBlock = Block & { destroy?: boolean; animate?: boolean };
diff --git a/src/app/components/NavBar/DesktopNav.tsx b/src/app/components/NavBar/DesktopNav.tsx
deleted file mode 100644
index 554b2b3ab..000000000
--- a/src/app/components/NavBar/DesktopNav.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import { Stack } from '@/ui/Stack';
-import { Box } from '@/ui/Box';
-import { Popover } from '@/ui/Popover';
-import { PopoverTrigger } from '@/ui/PopoverTrigger';
-import { PopoverContent } from '@/ui/PopoverContent';
-import { FC } from 'react';
-import { DesktopSubNav } from './DesktopSubNav';
-import { NavItem } from './types';
-import { Flex } from '@/ui/Flex';
-import { useColorMode } from '@chakra-ui/react';
-import { BsChevronDown } from 'react-icons/bs';
-import { Icon } from '@/ui/Icon';
-
-export const DesktopNav: FC<{ navItems: NavItem[] }> = ({ navItems }) => {
-  const colorMode = useColorMode().colorMode;
-  return (
-    <Stack direction={'row'} spacing={4}>
-      {navItems.map(navItem => (
-        <Flex key={navItem.id} alignItems={'center'}>
-          <Popover trigger={'hover'} placement={'bottom-start'} isLazy>
-            <PopoverTrigger>
-              <Flex alignItems={'center'} gap={'2px'}>
-                <Box
-                  as="a"
-                  href={navItem.href ?? '#'}
-                  color={'#fff'}
-                  fontSize="14px"
-                  fontWeight={500}
-                  _hover={{
-                    textDecoration: navItem.children ? 'none' : 'underline',
-                  }}
-                >
-                  {navItem.label}
-                </Box>
-                {navItem.children && (
-                  <Icon
-                    as={BsChevronDown}
-                    transition={'all .25s ease-in-out'}
-                    transform={false ? 'rotate(180deg)' : ''}
-                    size={3}
-                    color={'#fff'}
-                    position={'relative'}
-                    top={'2px'}
-                  />
-                )}
-              </Flex>
-            </PopoverTrigger>
-            {navItem.children && (
-              <PopoverContent boxShadow={'xl'} bg={`bg.${colorMode}`} rounded={'xl'} mt={'16px'}>
-                <Flex direction={'column'}>
-                  {navItem.children.map((child, index) => (
-                    <DesktopSubNav
-                      key={child.id}
-                      hasDivider={index < (navItem.children?.length || 0) - 1}
-                      {...child}
-                    />
-                  ))}
-                </Flex>
-              </PopoverContent>
-            )}
-          </Popover>
-        </Flex>
-      ))}
-    </Stack>
-  );
-};
diff --git a/src/app/components/NavBar/DesktopSubNav.tsx b/src/app/components/NavBar/DesktopSubNav.tsx
deleted file mode 100644
index 22595fc7a..000000000
--- a/src/app/components/NavBar/DesktopSubNav.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { Box } from '@/ui/Box';
-import { Stack } from '@/ui/Stack';
-import { Flex } from '@/ui/Flex';
-import React from 'react';
-import { NavItem } from './types';
-
-export const DesktopSubNav = ({
-  label,
-  href,
-  onClick,
-  hasDivider,
-}: NavItem & { hasDivider: boolean }) => {
-  const as = onClick ? 'button' : href ? 'a' : 'div';
-  return (
-    <Flex alignItems={'center'} borderBottomWidth={hasDivider ? '1px' : '0px'}>
-      <Box
-        as={as}
-        {...(as === 'button' ? { onClick } : { href })}
-        role={'group'}
-        display={'block'}
-        rounded={'md'}
-        color={`midnight`}
-        width={'100%'}
-        padding={'0 20px'}
-      >
-        <Stack direction={'row'} align={'center'}>
-          <Box width={'100%'}>{label}</Box>
-        </Stack>
-      </Box>
-    </Flex>
-  );
-};
diff --git a/src/app/components/NavBar/Logo.tsx b/src/app/components/NavBar/Logo.tsx
deleted file mode 100644
index 66b1ff668..000000000
--- a/src/app/components/NavBar/Logo.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { FC } from 'react';
-import { ExplorerLink } from '@/components/links';
-import { IconButton } from '@/ui/IconButton';
-import { StxIcon } from '@/ui/icons';
-
-export const Logo: FC = () => {
-  return (
-    <ExplorerLink href={'/'}>
-      <a>
-        <IconButton
-          size="42px"
-          icon={<StxIcon strokeWidth={1.5} size="24px" color="white" />}
-          flexShrink={0}
-          aria-label="Homepage"
-          title="Stacks Explorer"
-          as="span"
-        />
-      </a>
-    </ExplorerLink>
-  );
-};
diff --git a/src/app/components/NavBar/MobileNav.tsx b/src/app/components/NavBar/MobileNav.tsx
deleted file mode 100644
index 19045cce8..000000000
--- a/src/app/components/NavBar/MobileNav.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { Stack } from '@/ui/Stack';
-import React, { FC } from 'react';
-import { MobileNavItem } from '@/app/components/NavBar/MobileNavItem';
-import { NavItem } from './types';
-import { useColorMode } from '@chakra-ui/react';
-import { TbX } from 'react-icons/tb';
-import { IconButton } from '@/ui/IconButton';
-import { ColorModeButton } from '@/components/color-mode-button';
-import { Flex } from '@/ui/Flex';
-
-export const MobileNav: FC<{ navItems: NavItem[]; close: () => void }> = ({ navItems, close }) => {
-  const colorMode = useColorMode().colorMode;
-  return (
-    <Stack
-      display={{ md: 'none' }}
-      position="fixed"
-      top={0}
-      left={0}
-      height="100vh"
-      width="100vw"
-      zIndex={2}
-      backgroundColor={`bg.${colorMode}`}
-      padding={'0 32px'}
-    >
-      <Flex justifyContent={'space-between'} padding={'16px 0'} height={'64px'} mb={'10px'}>
-        <ColorModeButton
-          aria-label={'Change color mode'}
-          color={`invert.${colorMode}`}
-          borderWidth={'1px'}
-        />
-        <IconButton
-          onClick={close}
-          size="40px"
-          color={`invert.${colorMode}`}
-          icon={<TbX size={'32px'} />}
-          aria-label={'Close menu'}
-        />
-      </Flex>
-      <Flex direction={'column'} gap={'16px'}>
-        {navItems.map(navItem => (
-          <MobileNavItem key={navItem.id} {...navItem} />
-        ))}
-      </Flex>
-    </Stack>
-  );
-};
diff --git a/src/app/components/NavBar/MobileNavItem.tsx b/src/app/components/NavBar/MobileNavItem.tsx
deleted file mode 100644
index 9d5e47860..000000000
--- a/src/app/components/NavBar/MobileNavItem.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import { useDisclosure } from '@/ui/hooks/useDisclosure';
-import { Stack } from '@/ui/Stack';
-import { Box } from '@/ui/Box';
-import { Text } from '@/ui/Text';
-import { Icon } from '@/ui/Icon';
-import { BsChevronDown } from 'react-icons/bs';
-import { Collapse } from '@/ui/Collapse';
-import { NavItem } from './types';
-import { FC } from 'react';
-import { Flex } from '@/ui/Flex';
-
-export const MobileNavItem: FC<NavItem> = ({ label, onClick, children, href }) => {
-  const { isOpen, onToggle } = useDisclosure();
-
-  return (
-    <Stack spacing={4} onClick={children && onToggle}>
-      <Flex
-        as="a"
-        href={href ?? '#'}
-        justifyContent="space-between"
-        alignItems="center"
-        _hover={{
-          textDecoration: 'none',
-        }}
-      >
-        <Text fontSize={'24px'}>{label}</Text>
-        {children && (
-          <Icon
-            as={BsChevronDown}
-            transition={'all .25s ease-in-out'}
-            transform={isOpen ? 'rotate(180deg)' : ''}
-            w={4}
-            h={4}
-          />
-        )}
-      </Flex>
-
-      <Collapse in={isOpen} animateOpacity style={{ marginTop: '0 !important' }}>
-        <Stack
-          mt={2}
-          pl={4}
-          borderLeft={1}
-          borderStyle={'solid'}
-          borderColor={'pink'}
-          align={'start'}
-        >
-          {children &&
-            children.map(child => {
-              const as = child.onClick ? 'button' : child.href ? 'a' : 'div';
-              return (
-                <Box
-                  as={as}
-                  key={child.id}
-                  width={'100%'}
-                  {...(as === 'button' ? { onClick: child.onClick } : { href: child.href })}
-                >
-                  {child.label}
-                </Box>
-              );
-            })}
-        </Stack>
-      </Collapse>
-    </Stack>
-  );
-};
diff --git a/src/app/components/NavBar/NavLabel.tsx b/src/app/components/NavBar/NavLabel.tsx
deleted file mode 100644
index 2681711a6..000000000
--- a/src/app/components/NavBar/NavLabel.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import React, { FC, ReactNode } from 'react';
-import { Flex } from '@/ui/Flex';
-import { Text } from '@/ui/Text';
-import { useColorMode } from '@chakra-ui/react';
-import { Icon } from '@/ui/Icon';
-import { BsChevronRight } from 'react-icons/bs';
-
-export const NavLabel: FC<{ children: ReactNode }> = ({ children }) => (
-  <Flex height={'50px'} alignItems={'center'}>
-    <Text
-      color={`textTitle.${useColorMode().colorMode}`}
-      _groupHover={{ textDecoration: 'underline' }}
-      fontWeight={500}
-      fontSize={'13px'}
-      textAlign={'left'}
-    >
-      {children}
-    </Text>
-    <Flex
-      transition={'all .3s ease'}
-      transform={'translateX(-10px)'}
-      opacity={0}
-      _groupHover={{ opacity: '100%', transform: 'translateX(0)' }}
-      justify={'flex-end'}
-      align={'center'}
-      flex={1}
-    >
-      <Icon w={3} h={3} as={BsChevronRight} color={`textCaption.${useColorMode().colorMode}`} />
-    </Flex>
-  </Flex>
-);
diff --git a/src/app/components/NavBar/NetworkLabel.tsx b/src/app/components/NavBar/NetworkLabel.tsx
deleted file mode 100644
index 3d56f122b..000000000
--- a/src/app/components/NavBar/NetworkLabel.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-import React, { FC } from 'react';
-import { useGlobalContext } from '@/common/context/useAppContext';
-import { useColorMode } from '@chakra-ui/react';
-import { ChainID } from '@stacks/transactions';
-import { useQuery } from '@tanstack/react-query';
-import { CoreNodeInfoResponse } from '@stacks/blockchain-api-client/src/generated/models';
-import { ONE_MINUTE } from '@/app/common/queries/query-stale-time';
-import { getNetworkModeFromNetworkId } from '@/common/api/utils';
-import { getCustomNetworkApiInfo } from '@/app/components/NavBar/getCustomNetworkApiInfo';
-import { Flex } from '@/ui/Flex';
-import { Caption, Title } from '@/ui/typography';
-import { Badge } from '@/common/components/Badge';
-import { Stack } from '@/ui/Stack';
-import { Network } from '@/common/types/network';
-import { Tooltip } from '@/ui/Tooltip';
-import { IconButton } from '@/ui/IconButton';
-import { TbCheck, TbTrash } from 'react-icons/tb';
-import { Spinner } from '@/ui/Spinner';
-import { Box } from '@/ui/Box';
-import { buildUrl } from '@/app/common/utils/buildUrl';
-import { DEFAULT_DEVNET_SERVER } from '@/common/constants';
-
-export const NetworkLabel: FC<{ network: Network }> = ({ network }) => {
-  const {
-    activeNetwork,
-    removeCustomNetwork,
-    apiUrls: { mainnet, testnet },
-  } = useGlobalContext();
-  const colorMode = useColorMode().colorMode;
-  const isMainnet = network.url === mainnet;
-  const isTestnet = network.url === testnet;
-  const isDevnet = network.url === DEFAULT_DEVNET_SERVER;
-  const isDefault = isMainnet || isTestnet;
-  let itemNetworkId: ChainID.Mainnet | ChainID.Testnet = isMainnet
-    ? ChainID.Mainnet
-    : ChainID.Testnet;
-
-  const { data, error, isFetching } = useQuery<CoreNodeInfoResponse, Error>(
-    ['customNetworkApiInfo', network.url],
-    getCustomNetworkApiInfo(network.url),
-    {
-      staleTime: ONE_MINUTE,
-      enabled: !!network.url && !isDefault,
-      suspense: false,
-      useErrorBoundary: false,
-    }
-  );
-
-  const isDisabled = isFetching || !!error;
-
-  if (!isDefault && data) {
-    itemNetworkId = data?.network_id && parseInt(data.network_id.toString());
-  }
-
-  const itemNetworkMode = getNetworkModeFromNetworkId(itemNetworkId);
-  const isActive = activeNetwork.url === network.url;
-  const networkHref = buildUrl('/', network);
-
-  return (
-    <Flex
-      justifyContent={'space-between'}
-      width={'100%'}
-      padding={'15px 0'}
-      opacity={isDisabled ? 0.5 : 1}
-      cursor={isDisabled ? 'not-allowed' : 'unset'}
-    >
-      <Stack
-        as={isDisabled || isActive ? 'div' : 'a'}
-        {...(!!networkHref && (!isDisabled || isActive) ? { href: networkHref } : {})}
-        flexGrow={1}
-        cursor={isDisabled ? 'not-allowed' : isActive ? 'unset' : 'pointer'}
-      >
-        <Flex alignItems="center">
-          <Title display="block" fontSize={'14px'}>
-            {network.label}
-          </Title>
-          {network.isSubnet ? (
-            <Badge bg={`bg4.${colorMode}`} ml="8px" color={`textCaption.${colorMode}`}>
-              subnet
-            </Badge>
-          ) : itemNetworkMode ? (
-            <Badge bg={`bg4.${colorMode}`} ml="8px" color={`textCaption.${colorMode}`}>
-              {itemNetworkMode}
-            </Badge>
-          ) : null}
-        </Flex>
-        <Caption display="block">
-          {network?.url?.includes('//') ? network?.url?.split('//')[1] : network?.url}
-        </Caption>
-      </Stack>
-      <Flex alignItems="center" position={'relative'}>
-        {isFetching ? (
-          <Spinner size="18px" opacity={0.5} color={'#666'} data-testid="spinner" />
-        ) : !!error ? (
-          <Caption color={`feedbackError.${colorMode}`}>Offline</Caption>
-        ) : network.isCustomNetwork && !isDevnet && !isActive ? (
-          <Tooltip label="Remove network">
-            <IconButton
-              disabled={isDisabled}
-              position="relative"
-              color={`textCaption.${colorMode}`}
-              size={'21px'}
-              icon={
-                <span>
-                  <TbTrash size={'21px'} />
-                </span>
-              }
-              onClick={() => removeCustomNetwork(network)}
-              aria-label={'Remove network'}
-              _hover={{ bg: 'rgba(255, 255, 255, 0.25)' }}
-            />
-          </Tooltip>
-        ) : isActive ? (
-          <Box as={TbCheck} color={`feedbackSuccess.${colorMode}`} size="18px" />
-        ) : null}
-      </Flex>
-    </Flex>
-  );
-};
diff --git a/src/app/components/NavBar/__tests__/DesktopNav.test.tsx b/src/app/components/NavBar/__tests__/DesktopNav.test.tsx
deleted file mode 100644
index 5db35d6af..000000000
--- a/src/app/components/NavBar/__tests__/DesktopNav.test.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { DesktopNav } from '../DesktopNav';
-import '@testing-library/jest-dom';
-
-describe('DesktopNav', () => {
-  it('should render correctly', () => {
-    const mockNavItems = [
-      {
-        id: '1',
-        label: 'Sample Item 1',
-        href: '#',
-        children: [
-          {
-            id: '1.1',
-            label: 'Sub Item 1',
-            href: '#',
-          },
-        ],
-      },
-      {
-        id: '2',
-        label: 'Sample Item 2',
-        href: '#',
-      },
-    ];
-
-    const { asFragment } = render(<DesktopNav navItems={mockNavItems} />);
-    expect(asFragment()).toMatchSnapshot();
-  });
-});
diff --git a/src/app/components/NavBar/__tests__/MobileNav.test.tsx b/src/app/components/NavBar/__tests__/MobileNav.test.tsx
deleted file mode 100644
index d8fd92bbb..000000000
--- a/src/app/components/NavBar/__tests__/MobileNav.test.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { MobileNav } from '../MobileNav';
-import '@testing-library/jest-dom';
-
-describe('MobileNav', () => {
-  it('should render correctly', () => {
-    const mockNavItems = [
-      {
-        id: '1',
-        label: 'Mobile Sample Item 1',
-        href: '#',
-        children: [
-          {
-            id: '1.1',
-            label: 'Mobile Sub Item 1',
-            href: '#',
-          },
-        ],
-      },
-      {
-        id: '2',
-        label: 'Mobile Sample Item 2',
-        href: '#',
-      },
-    ];
-
-    const mockClose = jest.fn();
-
-    const { asFragment } = render(<MobileNav navItems={mockNavItems} close={mockClose} />);
-    expect(asFragment()).toMatchSnapshot();
-  });
-});
diff --git a/src/app/components/NavBar/__tests__/NetworkLabel.test.tsx b/src/app/components/NavBar/__tests__/NetworkLabel.test.tsx
deleted file mode 100644
index 471045b18..000000000
--- a/src/app/components/NavBar/__tests__/NetworkLabel.test.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-import { fireEvent, getByTestId, render } from '@testing-library/react';
-import { NetworkLabel } from '../NetworkLabel';
-import { useQuery } from '@tanstack/react-query';
-import '@testing-library/jest-dom';
-import { useGlobalContext } from '@/common/context/useAppContext';
-import { ChainID } from '@stacks/transactions';
-import { Network, NetworkModes } from '@/common/types/network';
-
-jest.mock('@/common/context/useAppContext', () => ({
-  useGlobalContext: jest.fn().mockReturnValue({
-    activeNetwork: { url: 'testUrl' },
-    removeCustomNetwork: jest.fn(),
-    apiUrls: { mainnet: 'mainnetUrl', testnet: 'testnetUrl' },
-  }),
-}));
-
-jest.mock('@chakra-ui/react', () => {
-  const original = jest.requireActual('@chakra-ui/react');
-  return {
-    ...original,
-    useColorMode: jest.fn().mockReturnValue({ colorMode: 'light' }),
-  };
-});
-
-jest.mock('@tanstack/react-query', () => ({
-  useQuery: jest.fn(),
-}));
-
-const network: Network = {
-  label: 'Mainnet',
-  url: 'mainnetUrl',
-  mode: NetworkModes.Mainnet,
-  networkId: ChainID.Mainnet,
-};
-
-const customNetwork = {
-  label: 'Custom',
-  url: 'customUrl',
-  isCustomNetwork: true,
-  mode: NetworkModes.Testnet,
-  networkId: ChainID.Testnet,
-};
-
-const subnetNetwork = {
-  label: 'Subnet',
-  url: 'subnetUrl',
-  isSubnet: true,
-  mode: NetworkModes.Testnet,
-  networkId: ChainID.Testnet,
-};
-
-describe('NetworkLabel', () => {
-  beforeEach(() => {
-    (useQuery as jest.Mock).mockReturnValue({
-      data: null,
-      error: null,
-      isFetching: false,
-    });
-  });
-
-  it('renders mainnet badge for mainnet network', () => {
-    const { getByText } = render(<NetworkLabel network={network} />);
-    expect(getByText('Mainnet')).toBeInTheDocument();
-    expect(getByText('mainnet')).toBeInTheDocument();
-  });
-
-  it('renders spinner while fetching custom network info', () => {
-    (useQuery as jest.Mock).mockReturnValue({
-      isFetching: true,
-    });
-
-    const { getByTestId } = render(<NetworkLabel network={customNetwork} />);
-    expect(getByTestId('spinner')).toBeInTheDocument();
-  });
-
-  it('renders error when there is an issue fetching custom network info', () => {
-    (useQuery as jest.Mock).mockReturnValue({
-      isFetching: false,
-      error: new Error('Failed fetching'),
-    });
-
-    const { getByText } = render(<NetworkLabel network={customNetwork} />);
-    expect(getByText('Offline')).toBeInTheDocument();
-  });
-
-  it('renders subnet badge for a subnet network', () => {
-    const { getByText } = render(<NetworkLabel network={subnetNetwork} />);
-    expect(getByText('subnet')).toBeInTheDocument();
-  });
-
-  it('triggers removeCustomNetwork when remove button is clicked', () => {
-    const removeCustomNetworkMock = jest.fn();
-    (useGlobalContext as jest.Mock).mockReturnValue({
-      activeNetwork: { url: 'testUrl' },
-      removeCustomNetwork: removeCustomNetworkMock,
-      apiUrls: { mainnet: 'mainnetUrl', testnet: 'testnetUrl' },
-    });
-
-    const { getByLabelText } = render(<NetworkLabel network={customNetwork} />);
-    const button = getByLabelText('Remove network');
-    fireEvent.click(button);
-
-    expect(removeCustomNetworkMock).toHaveBeenCalled();
-  });
-});
diff --git a/src/app/components/NavBar/__tests__/__snapshots__/DesktopNav.test.tsx.snap b/src/app/components/NavBar/__tests__/__snapshots__/DesktopNav.test.tsx.snap
deleted file mode 100644
index 4edf505e7..000000000
--- a/src/app/components/NavBar/__tests__/__snapshots__/DesktopNav.test.tsx.snap
+++ /dev/null
@@ -1,74 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`DesktopNav should render correctly 1`] = `
-<DocumentFragment>
-  <div
-    class="chakra-stack css-1yubk4m"
-  >
-    <div
-      class="css-1txr7ua"
-    >
-      <div
-        aria-controls="popover-content-:r1:"
-        aria-expanded="false"
-        aria-haspopup="dialog"
-        class="css-1dz1cl"
-        id="popover-trigger-:r1:"
-      >
-        <a
-          class="css-qrie7s"
-          href="#"
-        >
-          Sample Item 1
-        </a>
-        <svg
-          class="chakra-icon css-ys7se3"
-          fill="currentColor"
-          focusable="false"
-          height="3"
-          stroke="currentColor"
-          stroke-width="0"
-          viewBox="0 0 16 16"
-          width="3"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"
-            fill-rule="evenodd"
-          />
-        </svg>
-      </div>
-      <div
-        class="chakra-popover__popper css-0"
-        style="visibility: hidden; position: absolute; min-width: max-content; inset: 0 auto auto 0;"
-      >
-        <section
-          class="chakra-popover__content css-ztk6kg"
-          id="popover-content-:r1:"
-          role="tooltip"
-          style="transform-origin: var(--popper-transform-origin); opacity: 0; visibility: hidden; transform: scale(0.95) translateZ(0);"
-          tabindex="-1"
-        />
-      </div>
-    </div>
-    <div
-      class="css-1txr7ua"
-    >
-      <div
-        aria-controls="popover-content-:r3:"
-        aria-expanded="false"
-        aria-haspopup="dialog"
-        class="css-1dz1cl"
-        id="popover-trigger-:r3:"
-      >
-        <a
-          class="css-kk07nh"
-          href="#"
-        >
-          Sample Item 2
-        </a>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
diff --git a/src/app/components/NavBar/__tests__/__snapshots__/MobileNav.test.tsx.snap b/src/app/components/NavBar/__tests__/__snapshots__/MobileNav.test.tsx.snap
deleted file mode 100644
index 5ccb52c89..000000000
--- a/src/app/components/NavBar/__tests__/__snapshots__/MobileNav.test.tsx.snap
+++ /dev/null
@@ -1,151 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`MobileNav should render correctly 1`] = `
-<DocumentFragment>
-  <div
-    class="chakra-stack css-4xpai1"
-  >
-    <div
-      class="css-sw0q0z"
-    >
-      <button
-        aria-label="Change color mode"
-        class="chakra-button css-wulgol"
-        title="Toggle color mode"
-        type="button"
-      >
-        <svg
-          aria-hidden="true"
-          fill="none"
-          focusable="false"
-          height="1em"
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          viewBox="0 0 24 24"
-          width="1em"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M0 0h24v24H0z"
-            fill="none"
-            stroke="none"
-          />
-          <path
-            d="M3 3l18 18"
-          />
-          <path
-            d="M16 12a4 4 0 0 0 -4 -4m-2.834 1.177a4 4 0 0 0 5.66 5.654"
-          />
-          <path
-            d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7"
-          />
-        </svg>
-      </button>
-      <button
-        aria-label="Close menu"
-        class="chakra-button css-11sr1fv"
-        type="button"
-      >
-        <svg
-          aria-hidden="true"
-          fill="none"
-          focusable="false"
-          height="32px"
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          viewBox="0 0 24 24"
-          width="32px"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M0 0h24v24H0z"
-            fill="none"
-            stroke="none"
-          />
-          <path
-            d="M18 6l-12 12"
-          />
-          <path
-            d="M6 6l12 12"
-          />
-        </svg>
-      </button>
-    </div>
-    <div
-      class="css-xar605"
-    >
-      <div
-        class="chakra-stack css-bi0nzx"
-      >
-        <a
-          class="css-3xyie7"
-          href="#"
-        >
-          <span
-            class="chakra-text css-pjr8e0"
-          >
-            Mobile Sample Item 1
-          </span>
-          <svg
-            class="chakra-icon css-3tv48m"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            stroke="currentColor"
-            stroke-width="0"
-            viewBox="0 0 16 16"
-            width="1em"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"
-              fill-rule="evenodd"
-            />
-          </svg>
-        </a>
-        <div
-          class="chakra-collapse"
-          style="overflow: hidden; display: none; opacity: 0; height: 0px;"
-        >
-          <div
-            class="chakra-stack css-k96o6u"
-          >
-            <a
-              class="css-9sazr8"
-              href="#"
-            >
-              Mobile Sub Item 1
-            </a>
-          </div>
-        </div>
-      </div>
-      <div
-        class="chakra-stack css-bi0nzx"
-      >
-        <a
-          class="css-3xyie7"
-          href="#"
-        >
-          <span
-            class="chakra-text css-pjr8e0"
-          >
-            Mobile Sample Item 2
-          </span>
-        </a>
-        <div
-          class="chakra-collapse"
-          style="overflow: hidden; display: none; opacity: 0; height: 0px;"
-        >
-          <div
-            class="chakra-stack css-k96o6u"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
diff --git a/src/app/components/NavBar/getCustomNetworkApiInfo.ts b/src/app/components/NavBar/getCustomNetworkApiInfo.ts
deleted file mode 100644
index adb7b40b9..000000000
--- a/src/app/components/NavBar/getCustomNetworkApiInfo.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { DEFAULT_V2_INFO_ENDPOINT } from '@/common/constants';
-
-export const getCustomNetworkApiInfo = (baseUrl: string) => () =>
-  fetch(`${baseUrl}${DEFAULT_V2_INFO_ENDPOINT}`).then(res => res.json());
diff --git a/src/app/components/NavBar/index.tsx b/src/app/components/NavBar/index.tsx
deleted file mode 100644
index 6b3e7819c..000000000
--- a/src/app/components/NavBar/index.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-'use client';
-
-import { Box, Flex, Icon, IconButton } from '@/ui/components';
-
-import { RxHamburgerMenu } from 'react-icons/rx';
-import { useDisclosure } from '@/ui/hooks/useDisclosure';
-import { FC, useMemo } from 'react';
-import { Logo } from './Logo';
-import { SearchComponent } from '@/features/search/search';
-import { DesktopNav } from '@/app/components/NavBar/DesktopNav';
-import { NavItem } from '@/app/components/NavBar/types';
-import { buildUrl } from '@/app/common/utils/buildUrl';
-import { useGlobalContext } from '@/common/context/useAppContext';
-import { NetworkModeBanner } from '@/components/network-mode-banner';
-import { BtcStxPrice } from '@/components/btc-stx-price';
-import { MODALS, PAGE_MAX_WIDTH } from '@/common/constants';
-import { ColorModeButton } from '@/components/color-mode-button';
-import { openModal } from '@/components/modals/modal-slice';
-import { useAppDispatch } from '@/common/state/hooks';
-import { Network } from '@/common/types/network';
-import { useColorMode } from '@chakra-ui/react';
-import { NetworkLabel } from '@/app/components/NavBar/NetworkLabel';
-import { NavLabel } from '@/app/components/NavBar/NavLabel';
-import { MobileNav } from '@/app/components/NavBar/MobileNav';
-
-export const NavBar: FC = () => {
-  const { isOpen, onToggle } = useDisclosure();
-  const {
-    networks,
-    activeNetwork,
-    apiUrls: { mainnet, testnet },
-  } = useGlobalContext();
-  const dispatch = useAppDispatch();
-  const colorMode = useColorMode().colorMode;
-
-  const navItems: NavItem[] = useMemo(
-    () => [
-      {
-        id: 'blockchain',
-        label: 'Blockchain',
-        children: [
-          {
-            id: 'transactions',
-            label: <NavLabel>Transactions</NavLabel>,
-            href: buildUrl('/transactions', activeNetwork),
-          },
-          {
-            id: 'blocks',
-            label: <NavLabel>Blocks</NavLabel>,
-            href: buildUrl('/blocks', activeNetwork),
-          },
-        ],
-      },
-      {
-        id: 'tokens',
-        label: 'Tokens',
-        href: buildUrl('/tokens', activeNetwork),
-      },
-      {
-        id: 'sandbox',
-        label: 'Sandbox',
-        href: buildUrl('/sandbox/deploy', activeNetwork),
-      },
-      {
-        id: 'network',
-        label: 'Network',
-        children: [
-          ...Object.values<Network>(networks).map((network, key) => {
-            return {
-              id: network.url,
-              label: <NetworkLabel network={network} key={key} />,
-            };
-          }),
-          {
-            id: 'add-network',
-            label: <NavLabel>Add a network</NavLabel>,
-            onClick: () => {
-              dispatch(openModal(MODALS.ADD_NETWORK));
-            },
-          },
-        ],
-      },
-    ],
-    [activeNetwork, networks, dispatch]
-  );
-
-  return (
-    <Box
-      width="100%"
-      maxWidth={PAGE_MAX_WIDTH}
-      margin={'auto'}
-      padding={{ base: '0 16px', md: '0 32px' }}
-    >
-      <Flex align={'center'} justifyContent={'space-between'}>
-        <Flex
-          flex={{ base: 1 }}
-          alignItems={'center'}
-          height={'64px'}
-          gap={'16px'}
-          justifyContent={'space-between'}
-        >
-          <Logo />
-          <SearchComponent
-            display={['none', 'none', 'block', 'block']}
-            variant="small"
-            width="100%"
-            maxWidth="760px"
-          />
-          <NetworkModeBanner />
-          <Flex display={{ base: 'none', md: 'flex' }} gap={'16px'}>
-            <ColorModeButton aria-label={'Change color mode'} />
-            <DesktopNav navItems={navItems} />
-            <BtcStxPrice />
-          </Flex>
-        </Flex>
-
-        <Flex display={{ base: 'flex', md: 'none' }}>
-          <IconButton
-            onClick={onToggle}
-            icon={<Icon as={RxHamburgerMenu} w={5} h={5} color={'#fff'} />}
-            variant={'ghost'}
-            aria-label={'Toggle Navigation'}
-          />
-        </Flex>
-      </Flex>
-      {isOpen && <MobileNav navItems={navItems} close={onToggle} />}
-    </Box>
-  );
-};
diff --git a/src/app/components/NavBar/types.ts b/src/app/components/NavBar/types.ts
deleted file mode 100644
index d784738b1..000000000
--- a/src/app/components/NavBar/types.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { ReactNode } from 'react';
-
-export interface NavItem {
-  id: string;
-  label: string | ReactNode;
-  children?: NavItem[];
-  href?: string;
-  onClick?: () => void;
-}
diff --git a/src/app/error.tsx b/src/app/error.tsx
deleted file mode 100644
index ee68d32b8..000000000
--- a/src/app/error.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-'use client';
-
-import { MessageWithIcon } from '@/components/message-with-icon';
-import { Section } from '@/components/section';
-import { Box, Grid, Stack } from '@/ui/components';
-import { Title } from '@/ui/typography';
-import * as Sentry from '@sentry/nextjs';
-import * as React from 'react';
-import { useEffect } from 'react';
-import { TbAlertOctagon } from 'react-icons/tb';
-
-export default function Error({ error, reset }: { error: any; reset: () => void }) {
-  useEffect(() => {
-    console.error(error);
-    if (error.status === 404) return;
-    Sentry.captureException(error);
-  }, [error]);
-  return (
-    <>
-      <Title mb={['16px', '16px', '0']} mt="64px" as="h1" color="white" fontSize="36px">
-        Something went wrong!
-      </Title>
-      <Section mt="32px">
-        <Grid placeItems="center" p="32px" minHeight="350px">
-          <Box>
-            <MessageWithIcon
-              icon={TbAlertOctagon}
-              title="Something went wrong!"
-              message="Try to refresh this page or try again later."
-              action={
-                <Stack isInline spacing="16px">
-                  <Box>
-                    <a href="/">Go home</a>
-                  </Box>
-                  <Box>
-                    <button onClick={() => reset()}>Try again</button>
-                  </Box>
-                </Stack>
-              }
-            />
-          </Box>
-        </Grid>
-      </Section>
-    </>
-  );
-}
diff --git a/src/app/init.ts b/src/app/init.ts
new file mode 100644
index 000000000..ab81496a8
--- /dev/null
+++ b/src/app/init.ts
@@ -0,0 +1,39 @@
+import { NetworkModes } from '@/common/types/network';
+import { IS_BROWSER } from '@/common/constants';
+import {
+  NetworkModeBtcAddressBaseUrlMap,
+  NetworkModeBtcBlockBaseUrlMap,
+  NetworkModeBtcTxBaseUrlMap,
+  NetworkModeUrlMap,
+} from '@/common/constants/network';
+import { headers } from 'next/headers';
+
+export function init(query: any) {
+  const headersList = headers();
+  const queryNetworkMode = ((Array.isArray(query.chain) ? query.chain[0] : query.chain) ||
+    NetworkModes.Mainnet) as NetworkModes;
+  const queryApiUrl = Array.isArray(query.api) ? query.api[0] : query.api;
+  const querySubnet = Array.isArray(query.subnet) ? query.subnet[0] : query.subnet;
+  const queryBtcBlockBaseUrl = Array.isArray(query.queryBtcBlockBaseUrl)
+    ? query.queryBtcBlockBaseUrl[0]
+    : query.queryBtcBlockBaseUrl;
+  const queryBtcTxBaseUrl = Array.isArray(query.queryBtcTxBaseUrl)
+    ? query.queryBtcTxBaseUrl[0]
+    : query.queryBtcTxBaseUrl;
+  const queryBtcAddressBaseUrl = Array.isArray(query.queryBtcAddressBaseUrl)
+    ? query.queryBtcAddressBaseUrl[0]
+    : query.queryBtcAddressBaseUrl;
+  return {
+    cookies: headersList.get('cookie') || (IS_BROWSER ? document?.cookie : ''),
+    // apiUrls: NetworkModeUrlMap,
+    // btcBlockBaseUrls: NetworkModeBtcBlockBaseUrlMap,
+    // btcTxBaseUrls: NetworkModeBtcTxBaseUrlMap,
+    // btcAddressBaseUrls: NetworkModeBtcAddressBaseUrlMap,
+    queryNetworkMode,
+    queryApiUrl,
+    queryBtcBlockBaseUrl,
+    queryBtcTxBaseUrl,
+    queryBtcAddressBaseUrl,
+    querySubnet,
+  };
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
deleted file mode 100644
index a62511424..000000000
--- a/src/app/layout.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { PageWrapper } from '@/app/PageWrapper';
-import { cookies } from 'next/headers';
-
-import { Providers } from './Providers';
-import './global-style/code-editor.css';
-import './global-style/global.css';
-import './global-style/prism-theme.css';
-
-const colorModeCookieName = 'chakra-ui-color-mode';
-
-export default function RootLayout({ children }: any) {
-  const colorModeCookie = cookies().get(colorModeCookieName) || {
-    name: colorModeCookieName,
-    value: 'light',
-  };
-  return (
-    <html lang="en">
-      <head />
-      <body>
-        <Providers colorModeCookie={`${colorModeCookie.name}=${colorModeCookie.value}`}>
-          <PageWrapper>{children}</PageWrapper>
-        </Providers>
-      </body>
-    </html>
-  );
-}
diff --git a/src/app/microblock/[hash]/error.tsx b/src/app/microblock/[hash]/error.tsx
deleted file mode 100644
index e1c9f17e5..000000000
--- a/src/app/microblock/[hash]/error.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-'use client';
-
-import { MessageWithIcon } from '@/components/message-with-icon';
-import { Meta } from '@/components/meta-head';
-import { Section } from '@/components/section';
-import { ButtonLink } from '@/ui/ButtonLink';
-import { Box, Grid, Stack } from '@/ui/components';
-import { Title } from '@/ui/typography';
-import * as Sentry from '@sentry/nextjs';
-import * as React from 'react';
-import { useEffect } from 'react';
-import { TbAlertOctagon } from 'react-icons/tb';
-
-export default function Error({ error }: { error: any; reset: () => void }) {
-  useEffect(() => {
-    console.error(error);
-    if (error.status === 404) return;
-    Sentry.captureException(error);
-  }, [error]);
-  return (
-    <>
-      <Meta title="Microblock hash not found" />
-      <Title mb={['16px', '16px', '0']} mt="64px" as="h1" color="white" fontSize="36px">
-        Microblock not found
-      </Title>
-      <Section mt="32px">
-        <Grid placeItems="center" p="32px" minHeight="350px">
-          <Box>
-            <MessageWithIcon
-              icon={TbAlertOctagon}
-              title="This hash doesn't seem right."
-              message="This page isn't available, and it looks like the microblock hash provided isn't correct."
-              action={
-                <Stack isInline spacing="16px">
-                  <Box>
-                    <ButtonLink href="/" mt="24px">
-                      Go home
-                    </ButtonLink>
-                  </Box>
-                  <Box>
-                    <ButtonLink href="/blocks" variant="secondary" mt="24px">
-                      All blocks
-                    </ButtonLink>
-                  </Box>
-                </Stack>
-              }
-            />
-          </Box>
-        </Grid>
-      </Section>
-    </>
-  );
-}
diff --git a/src/app/microblock/[hash]/head.tsx b/src/app/microblock/[hash]/head.tsx
deleted file mode 100644
index 7cf5c67c3..000000000
--- a/src/app/microblock/[hash]/head.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { truncateMiddle } from '@/common/utils';
-
-import { DefaultHeadTags } from '../../DefaultHeadTags';
-
-export default function Head({ params: { hash } }: any) {
-  const title = `Microblock ${truncateMiddle(hash)}`;
-  return (
-    <>
-      <title>{title}</title>
-      <meta property="og:title" content={title} />
-      <DefaultHeadTags />
-    </>
-  );
-}
diff --git a/src/app/microblock/[hash]/page.tsx b/src/app/microblock/[hash]/page.tsx
deleted file mode 100644
index ffb1cea1d..000000000
--- a/src/app/microblock/[hash]/page.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-'use client';
-
-import { PageTitle } from '@/app/common/components/PageTitle';
-import { MicroblockTxsList } from '@/app/microblock/[hash]/tx-lists/MicroblockTxsList';
-import { useGlobalContext } from '@/common/context/useAppContext';
-import { toRelativeTime, truncateMiddle } from '@/common/utils';
-import { SkeletonTransactionList } from '@/components/loaders/skeleton-transaction';
-import { Meta } from '@/components/meta-head';
-import { PageWrapper } from '@/components/page-wrapper';
-import { Section } from '@/components/section';
-import { BlockQueryKeys, blockQK } from '@/features/block/query-keys';
-import { getBlockQueries } from '@/features/block/use-block-queries';
-import { MicroblockQueryKeys, microblockQK } from '@/features/microblock/query-keys';
-import { getMicroblockQueries } from '@/features/microblock/use-microblock-queries';
-import { getTransactionQueries } from '@/features/transaction/use-transaction-queries';
-import { Box, Flex, Icon, Stack, Tooltip } from '@/ui/components';
-import * as React from 'react';
-import { AiOutlineClockCircle } from 'react-icons/ai';
-import { useQueries, useQuery } from '@tanstack/react-query';
-
-import { Transaction } from '@stacks/stacks-blockchain-api-types';
-
-import { KeyValueHorizontal } from '../../common/components/KeyValueHorizontal';
-import { Value } from '../../common/components/Value';
-import { useVerticallyStackedElementsBorderStyle } from '../../common/styles/border';
-
-export default function MicroblockSinglePage({ params: { hash } }: any) {
-  const networkUrl = useGlobalContext().activeNetwork.url;
-  const queries = getMicroblockQueries(networkUrl);
-  const transactionQueries = getTransactionQueries(networkUrl);
-  const blockQueries = getBlockQueries(networkUrl);
-
-  const queryOptions = {
-    refetchOnWindowFocus: true,
-    retry: 0,
-  };
-
-  const { data: microblock } = useQuery(
-    microblockQK(MicroblockQueryKeys.microblock, hash),
-    queries.fetchMicroblock(hash),
-    queryOptions
-  );
-
-  const { data: block } = useQuery(
-    blockQK(BlockQueryKeys.block, microblock?.block_hash || ''),
-    blockQueries.fetchBlock(microblock?.block_hash),
-    { ...queryOptions, enabled: !!microblock }
-  );
-
-  if (!microblock || !block) return null;
-
-  const title = `Microblock ${truncateMiddle(microblock.microblock_hash)}`;
-
-  const readableTs = `${new Date(block.burn_block_time * 1000).toLocaleTimeString()} ${new Date(
-    block.burn_block_time * 1000
-  ).toLocaleDateString()}`;
-
-  return (
-    <>
-      <Meta title={title} />
-      <PageTitle>{title}</PageTitle>
-      <Stack gap="16px">
-        <PageWrapper fullWidth>
-          <Section title="Summary">
-            <Box px="16px" css={useVerticallyStackedElementsBorderStyle}>
-              <KeyValueHorizontal label={'Hash'} value={<Value>{hash}</Value>} copyValue={hash} />
-              <KeyValueHorizontal
-                label={'Block height'}
-                value={<Value>{microblock.block_height}</Value>}
-                copyValue={microblock.block_height.toString()}
-              />
-              <KeyValueHorizontal
-                label={'Accepted'}
-                value={
-                  <Box>
-                    <Tooltip label={readableTs}>
-                      <Flex alignItems="center">
-                        <Icon as={AiOutlineClockCircle} size="16px" mr="4px" />
-                        <Value>{toRelativeTime(block.burn_block_time * 1000)}</Value>
-                      </Flex>
-                    </Tooltip>
-                  </Box>
-                }
-                copyValue={readableTs}
-              />
-              <KeyValueHorizontal
-                label={'Accepted by'}
-                value={<Value>{block.hash}</Value>}
-                copyValue={block.hash}
-              />
-              <KeyValueHorizontal
-                label={'Transactions'}
-                value={<Value>{microblock.txs.length}</Value>}
-              />
-            </Box>
-          </Section>
-        </PageWrapper>
-        {microblock.txs?.length ? (
-          <MicroblockTxsList microblockHash={hash} />
-        ) : (
-          <Section title={'Transactions'} mt={'32px'}>
-            <Box px="24px">
-              <SkeletonTransactionList length={microblock?.txs.length} />
-            </Box>
-          </Section>
-        )}
-      </Stack>
-    </>
-  );
-}
diff --git a/src/app/microblock/[hash]/tx-lists/MicroblockTxsList.tsx b/src/app/microblock/[hash]/tx-lists/MicroblockTxsList.tsx
deleted file mode 100644
index 24309b095..000000000
--- a/src/app/microblock/[hash]/tx-lists/MicroblockTxsList.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import { TxIcon } from '@/app/common/components/TxIcon';
-import { useMicroblockByHash } from '@/app/common/queries/useMicroblockByHash';
-import { useApi } from '@/common/api/client';
-import { TwoColsListItem } from '@/common/components/TwoColumnsListItem';
-import { truncateMiddle } from '@/common/utils';
-import { TxLink } from '@/components/links';
-import { SkeletonGenericTransactionList } from '@/components/loaders/skeleton-transaction';
-import { Section } from '@/components/section';
-import { Box, Grid } from '@/ui/components';
-import { Text, Title } from '@/ui/typography';
-import * as React from 'react';
-import { FC, memo } from 'react';
-
-interface MicroblockTxsListProps {
-  microblockHash: string;
-  limit?: number;
-}
-
-export const MicroblockTxsList: FC<MicroblockTxsListProps> = memo(({ microblockHash, limit }) => {
-  const api = useApi();
-  const { isLoading, data } = useMicroblockByHash(api, { microblockHash });
-
-  if (isLoading) {
-    return <SkeletonGenericTransactionList />;
-  }
-
-  const txIds = data?.txs || [];
-
-  return (
-    <Section title={'Transactions'}>
-      <Box px="20px">
-        {!!txIds.length ? (
-          txIds.map((txId: string) => (
-            <TwoColsListItem
-              key={txId}
-              icon={<TxIcon txType={'token_transfer'} />}
-              leftContent={{
-                title: (
-                  <Title fontWeight="500" display="block" fontSize="15px">
-                    <TxLink txId={txId}>{truncateMiddle(txId)}</TxLink>
-                  </Title>
-                ),
-                subtitle: null,
-              }}
-            />
-          ))
-        ) : (
-          <Grid placeItems="center" px="16px" py="32px">
-            <Text color={'textCaption'} mt="32px">
-              No transactions yet
-            </Text>
-          </Grid>
-        )}
-      </Box>
-    </Section>
-  );
-});
diff --git a/src/app/sandbox/components/Argument/ListArgumentInput.tsx b/src/app/sandbox/components/Argument/ListArgumentInput.tsx
deleted file mode 100644
index a3aeb30fd..000000000
--- a/src/app/sandbox/components/Argument/ListArgumentInput.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-'use client';
-
-import { Box, Button, Flex, Icon } from '@/ui/components';
-import { Text } from '@/ui/typography';
-import { FieldArray } from 'formik';
-import React, { FC } from 'react';
-import { RiCloseLine } from 'react-icons/ri';
-
-import { ClarityAbiTypeList } from '@stacks/transactions';
-
-import { ListValueType } from '../../types/values';
-import { getTuple } from '../../utils';
-import { Argument } from './index';
-import { CommonArgumentInputProps } from './types';
-
-export const ListArgumentInput: FC<
-  CommonArgumentInputProps & {
-    type: ClarityAbiTypeList;
-    value: ListValueType;
-  }
-> = ({ name, type, handleChange, error, value }) => {
-  const listItemsType = type.list.type;
-  const maxLength = type.list.length;
-  const listTuple = getTuple(listItemsType);
-  const emptyEntry = !!listTuple
-    ? listTuple.reduce((tupleAcc, tupleEntry) => {
-        tupleAcc[tupleEntry.name] = '';
-        return tupleAcc;
-      }, {} as Record<string, string | number>)
-    : '';
-  return (
-    <FieldArray name={name}>
-      {({ push, remove }) => (
-        <Box>
-          <Text
-            fontSize="12px"
-            fontWeight="500"
-            display="block"
-            as={'label'}
-            htmlFor={name}
-            mb="8px"
-          >
-            {name}
-          </Text>
-          {value.map((listItemValue, i) => (
-            <Flex mb="32px" alignItems={'center'} gap={'10px'}>
-              <Argument
-                name={`${name}.${i}`}
-                type={listItemsType}
-                handleChange={handleChange}
-                error={error}
-                value={listItemValue}
-              />
-              <Icon
-                as={RiCloseLine}
-                size={3}
-                mt={'14px'}
-                color={'textCaption'}
-                style={{ cursor: 'pointer' }}
-                onClick={() => remove(i)}
-              />
-            </Flex>
-          ))}
-          <Button
-            type={'button'}
-            onClick={() => push(emptyEntry)}
-            isDisabled={value.length >= maxLength}
-          >
-            {value.length >= maxLength ? 'Maximum list size reached' : '+ Add list item'}
-          </Button>
-        </Box>
-      )}
-    </FieldArray>
-  );
-};
diff --git a/src/app/sandbox/components/Argument/PrimitiveArgumentInput.tsx b/src/app/sandbox/components/Argument/PrimitiveArgumentInput.tsx
deleted file mode 100644
index 606cb507a..000000000
--- a/src/app/sandbox/components/Argument/PrimitiveArgumentInput.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-'use client';
-
-import { Box, Input } from '@/ui/components';
-import { Caption, Text } from '@/ui/typography';
-import React, { FC } from 'react';
-
-import { ClarityAbiType, getTypeString } from '@stacks/transactions';
-
-import { CommonArgumentInputProps } from './types';
-
-export const PrimitiveArgumentInput: FC<
-  CommonArgumentInputProps & {
-    type: ClarityAbiType;
-    value: string;
-  }
-> = ({ name, type, handleChange, error, value }) => (
-  <Box>
-    <Text
-      fontSize="12px"
-      fontWeight="500"
-      display="block"
-      color={'textCaption'}
-      as={'label'}
-      htmlFor={name}
-      mb="8px"
-    >
-      {name}
-    </Text>
-    <Box width="100%">
-      <Input
-        width="100%"
-        type={getTypeString(type).includes('int') ? 'number' : 'text'}
-        name={name}
-        id={name}
-        onChange={handleChange}
-        value={value}
-        placeholder={`${getTypeString(type)}`}
-      />
-      {error && <Caption color={'feedbackError'}>{error}</Caption>}
-    </Box>
-  </Box>
-);
diff --git a/src/app/sandbox/components/Argument/TupleArgumentInput.tsx b/src/app/sandbox/components/Argument/TupleArgumentInput.tsx
deleted file mode 100644
index 5cea98384..000000000
--- a/src/app/sandbox/components/Argument/TupleArgumentInput.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-'use client';
-
-import { Box, Input, Stack } from '@/ui/components';
-import { Caption, Text } from '@/ui/typography';
-import React, { FC } from 'react';
-
-import { ClarityAbiTypeTuple, getTypeString, isClarityAbiOptional } from '@stacks/transactions';
-
-import { TupleValueType } from '../../types/values';
-import { CommonArgumentInputProps } from './types';
-
-export const TupleArgumentInput: FC<
-  CommonArgumentInputProps & {
-    type: ClarityAbiTypeTuple;
-    value: TupleValueType;
-    tuple: ClarityAbiTypeTuple['tuple'];
-  }
-> = ({ name, type, handleChange, error, value, tuple }) => {
-  const isOptional = isClarityAbiOptional(type);
-  const tupleType = isOptional ? (type.optional as ClarityAbiTypeTuple) : type;
-  return (
-    <Box>
-      <Stack id={name} isInline spacing="16px" width="100%">
-        {tuple.map((tupleEntry, i) => (
-          <Box flexGrow={1} key={tupleEntry.name}>
-            <Text
-              fontSize="12px"
-              fontWeight="500"
-              display="block"
-              color={'textCaption'}
-              as={'label'}
-              htmlFor={name}
-              mb="8px"
-            >
-              ({name}): {tupleEntry.name}
-              {isOptional ? ' (optional)' : ''}
-            </Text>
-            <Box width="100%">
-              <Input
-                width="100%"
-                type={getTypeString(tupleType.tuple[i].type).includes('int') ? 'number' : 'text'}
-                name={`${name}.${tupleEntry.name}`}
-                id={name}
-                onChange={handleChange}
-                value={value[tupleEntry.name]}
-                placeholder={`${getTypeString(tupleType.tuple[i].type)}`}
-              />
-              {error && <Caption color={'feedbackError'}>{error}</Caption>}
-            </Box>
-          </Box>
-        ))}
-      </Stack>
-    </Box>
-  );
-};
diff --git a/src/app/sandbox/components/Argument/index.tsx b/src/app/sandbox/components/Argument/index.tsx
deleted file mode 100644
index b05fdc814..000000000
--- a/src/app/sandbox/components/Argument/index.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-'use client';
-
-import React, { FC } from 'react';
-
-import { ClarityAbiTypeTuple, isClarityAbiList } from '@stacks/transactions';
-
-import { ListValueType, TupleValueType } from '../../types/values';
-import { getTuple } from '../../utils';
-import { ListArgumentInput } from './ListArgumentInput';
-import { PrimitiveArgumentInput } from './PrimitiveArgumentInput';
-import { TupleArgumentInput } from './TupleArgumentInput';
-import { ArgumentInputProps, CommonArgumentInputProps } from './types';
-
-export const Argument: FC<CommonArgumentInputProps & ArgumentInputProps> = ({
-  name,
-  type,
-  handleChange,
-  error,
-  value,
-}) => {
-  const tuple = getTuple(type);
-  const isList = isClarityAbiList(type);
-  if (isList) {
-    return (
-      <ListArgumentInput
-        name={name}
-        type={type}
-        handleChange={handleChange}
-        error={error}
-        value={value as ListValueType}
-      />
-    );
-  }
-  if (!!tuple) {
-    return (
-      <TupleArgumentInput
-        name={name}
-        type={type as ClarityAbiTypeTuple}
-        handleChange={handleChange}
-        error={error}
-        value={value as TupleValueType}
-        tuple={tuple}
-      />
-    );
-  }
-  return (
-    <PrimitiveArgumentInput
-      name={name}
-      type={type}
-      handleChange={handleChange}
-      error={error}
-      value={value as string}
-    />
-  );
-};
diff --git a/src/app/sandbox/components/Argument/types.ts b/src/app/sandbox/components/Argument/types.ts
deleted file mode 100644
index bc8634155..000000000
--- a/src/app/sandbox/components/Argument/types.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-
-import { ClarityAbiType } from '@stacks/transactions';
-
-import { ListValueType, ValueType } from '../../types/values';
-
-export interface ArgumentInputProps {
-  type: ClarityAbiType;
-  value: ValueType | ListValueType;
-}
-
-export interface CommonArgumentInputProps {
-  name: string;
-  handleChange: (e: React.FormEvent<HTMLInputElement>) => void;
-  error: any;
-}
diff --git a/src/app/sandbox/components/ClarityIcon.tsx b/src/app/sandbox/components/ClarityIcon.tsx
deleted file mode 100644
index 856afbe7c..000000000
--- a/src/app/sandbox/components/ClarityIcon.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-'use client';
-
-import { Box, BoxProps } from '@/ui/components';
-import React from 'react';
-
-export function ClarityIcon(props: BoxProps) {
-  return (
-    <Box as="svg" viewBox="0 0 24 24" fill="none" {...props}>
-      <path
-        d="M12 24C18.5683 24 24 18.5683 24 12C24 5.41974 18.5683 0 11.988 0C5.41974 0 0 5.41974 0 12C0 18.5683 5.4317 24 12 24ZM1.55533 12C1.55533 6.20937 6.20937 1.54337 11.988 1.54337C17.7787 1.54337 22.4447 6.20937 22.4566 12C22.4566 13.4716 22.1575 14.8594 21.6072 16.1276H2.40479C1.85444 14.8594 1.55533 13.4716 1.55533 12ZM12 22.4447C8.24327 22.4447 4.9651 20.4826 3.1346 17.5274H20.8774C19.0349 20.4826 15.7567 22.4447 12 22.4447Z"
-        fill="currentColor"
-      />
-    </Box>
-  );
-}
diff --git a/src/app/sandbox/components/ContractCall/AvailableFunctionsView.tsx b/src/app/sandbox/components/ContractCall/AvailableFunctionsView.tsx
deleted file mode 100644
index eb47bba2f..000000000
--- a/src/app/sandbox/components/ContractCall/AvailableFunctionsView.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-'use client';
-
-import { showFn } from '@/app/common/utils/sandbox';
-import { Badge } from '@/common/components/Badge';
-import { ContractWithParsedAbi } from '@/common/types/contract';
-import { ArrowRightIcon } from '@/components/icons/arrow-right';
-import { ExplorerLink } from '@/components/links';
-import { Section } from '@/components/section';
-import { Flex, Grid } from '@/ui/components';
-import { Text } from '@/ui/typography';
-import { forwardRef, useColorMode } from '@chakra-ui/react';
-import { mdiApi, mdiFunction } from '@mdi/js';
-import Icon from '@mdi/react';
-import { FC } from 'react';
-
-export const AbiFunction = forwardRef<
-  {
-    abiFn: { access: string; name: string };
-    onClick?: () => void;
-  },
-  'div'
->(({ abiFn, onClick }, ref) => {
-  const colorMode = useColorMode().colorMode;
-  return (
-    <Flex
-      ref={ref}
-      justifyContent="space-between"
-      p="16px"
-      _hover={{
-        cursor: 'pointer',
-        bg: `bgAlt.${useColorMode().colorMode}`,
-      }}
-      onClick={onClick}
-    >
-      <Flex alignItems="center">
-        <Flex alignItems="center">
-          <Grid
-            placeItems="center"
-            borderWidth="1px"
-            borderRadius="100%"
-            size="32px"
-            color={'textCaption'}
-          >
-            {abiFn.access === 'read_only' ? (
-              <Icon path={mdiApi} size="20px" />
-            ) : (
-              <Icon path={mdiFunction} size="20px" />
-            )}
-          </Grid>
-          <Text
-            fontSize="14px"
-            fontFamily={`"Fira Code", monospace`}
-            ml="16px"
-            fontWeight="500"
-            color={'textBody'}
-          >
-            {abiFn.name}
-          </Text>
-        </Flex>
-        {abiFn.access === 'read_only' && (
-          <Badge ml="16px" bg={`bg.${colorMode}`} color={`textCaption.${colorMode}`}>
-            {abiFn.access}
-          </Badge>
-        )}
-      </Flex>
-      <ArrowRightIcon width={'18px'} />
-    </Flex>
-  );
-});
-
-export const AvailableFunctionsView: FC<{
-  contract: ContractWithParsedAbi;
-  contractId: string;
-}> = ({ contractId, contract }) => (
-  <Section overflowY="auto" flexGrow={1} title="Available functions">
-    {contract?.abi?.functions.map(
-      (abiFn: any) =>
-        showFn(contractId, abiFn) && (
-          <ExplorerLink
-            href={`/sandbox/contract-call/${contractId}/${abiFn.name}`}
-            key={abiFn.name}
-          >
-            <AbiFunction abiFn={abiFn} />
-          </ExplorerLink>
-        )
-    )}
-  </Section>
-);
diff --git a/src/app/sandbox/components/ContractCall/DefaultView/PopularContracts.tsx b/src/app/sandbox/components/ContractCall/DefaultView/PopularContracts.tsx
deleted file mode 100644
index ca5dd5825..000000000
--- a/src/app/sandbox/components/ContractCall/DefaultView/PopularContracts.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-'use client';
-
-import { ExplorerLink } from '@/components/links';
-import { Section } from '@/components/section';
-import { Circle, Stack } from '@/ui/components';
-import { Caption, Title } from '@/ui/typography';
-import React, { FC } from 'react';
-import { TbChartBar, TbCurrencyBitcoin, TbCurrencyDollar, TbSignature } from 'react-icons/tb';
-
-const defaultContracts = (address: string) => [
-  {
-    name: 'pox-3',
-    address,
-    description: '',
-    icon: TbCurrencyBitcoin,
-  },
-  {
-    name: 'bns',
-    address,
-    description: '',
-    icon: TbSignature,
-  },
-  {
-    name: 'cost-voting',
-    address,
-    description: '',
-    icon: TbChartBar,
-  },
-  {
-    name: 'costs-3',
-    address,
-    description: '',
-    icon: TbCurrencyDollar,
-  },
-];
-
-export const PopularContracts: FC<{ rootContractAddress: string }> = ({ rootContractAddress }) => (
-  <>
-    <Title fontWeight={400}>Or select from one of these</Title>
-    <Stack mt="24px" spacing="24px">
-      {defaultContracts(rootContractAddress).map(({ name, address, icon: Icon }) => (
-        <ExplorerLink href={`/sandbox/contract-call/${address}.${name}`} key={name}>
-          <Section color={'textTitle'} p="24px" _hover={{ cursor: 'pointer', color: 'brand' }}>
-            <Stack isInline spacing="16px">
-              <Circle>
-                <Icon />
-              </Circle>
-              <Stack>
-                <Title color="currentColor">{name}</Title>
-                <Caption>{address}</Caption>
-              </Stack>
-            </Stack>
-          </Section>
-        </ExplorerLink>
-      ))}
-    </Stack>
-  </>
-);
diff --git a/src/app/sandbox/components/ContractCall/DefaultView/SearchContractsForm.tsx b/src/app/sandbox/components/ContractCall/DefaultView/SearchContractsForm.tsx
deleted file mode 100644
index daf1a43c2..000000000
--- a/src/app/sandbox/components/ContractCall/DefaultView/SearchContractsForm.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-'use client';
-
-import { buildUrl } from '@/app/common/utils/buildUrl';
-import { useGlobalContext } from '@/common/context/useAppContext';
-import { onPaste, validateStacksAddress } from '@/common/utils';
-import { Box, Button, Flex, Input, Stack, TextLink } from '@/ui/components';
-import { Caption, Text, Title } from '@/ui/typography';
-import { useColorMode } from '@chakra-ui/react';
-import { Form, Formik } from 'formik';
-import { useRouter } from 'next/navigation';
-import React, { FC } from 'react';
-
-export const SearchContractsForm: FC<{ rootContractAddress: string }> = ({
-  rootContractAddress,
-}) => {
-  const router = useRouter();
-  const network = useGlobalContext().activeNetwork;
-  const { colorMode } = useColorMode();
-
-  return (
-    <Formik
-      validateOnChange={false}
-      validateOnBlur={false}
-      enableReinitialize={true}
-      initialValues={{
-        principal: rootContractAddress,
-        contract_name: 'pox-3',
-      }}
-      validate={values => {
-        const errors: any = {};
-        const validPrincipal = validateStacksAddress(values.principal);
-        if (!validPrincipal) {
-          errors['principal'] = 'Invalid Stacks address.';
-        }
-        if (!values.contract_name) {
-          errors['contract_name'] = 'Contract name required.';
-        }
-        return errors;
-      }}
-      onSubmit={({ principal, contract_name }) => {
-        router.push(buildUrl(`/sandbox/contract-call/${principal}.${contract_name}`, network));
-      }}
-      render={({ handleChange, handleBlur, values, setValues, errors, handleSubmit }) => (
-        <Form>
-          <Flex flexDirection="column" p="24px">
-            <Box as="form">
-              <Stack spacing="16px">
-                <Title fontSize="24px">Call a contract</Title>
-                <Text color={'textBody'} maxWidth="42ch" lineHeight="1.6" display="block" my={0}>
-                  Manually enter contract details below, or load a contract from your transactions
-                  to see available functions.
-                </Text>
-                <Caption>
-                  Hint: you can paste the{' '}
-                  <TextLink
-                    display="inline"
-                    textDecoration="underline"
-                    href="https://docs.blockstack.org/smart-contracts/principals#smart-contracts-as-principals"
-                    target="_blank"
-                  >
-                    smart contracts' identifier
-                  </TextLink>{' '}
-                  in this format: [principal].[contract-name]
-                </Caption>
-                {Object.keys(errors)?.length ? (
-                  <Box
-                    borderRadius="6px"
-                    bg="rgba(207,0,0,0.05)"
-                    border="1px solid rgba(207,0,0,0.1)"
-                    px="16px"
-                    py="8px"
-                    color="red"
-                    lineHeight="1.8"
-                    fontSize="14px"
-                    wordBreak="break-all"
-                  >
-                    {errors?.principal || errors?.contract_name}
-                  </Box>
-                ) : null}
-                <Input
-                  id="principal"
-                  name="principal"
-                  type="text"
-                  onChange={handleChange}
-                  onBlur={handleBlur}
-                  value={values.principal}
-                  placeholder="Enter the contract address"
-                  color={colorMode === 'light' ? '#000000' : '#FFFFFF'}
-                  onPaste={(e: React.ClipboardEvent<HTMLInputElement>) =>
-                    onPaste(e, (value: string) => {
-                      const cleanValue = value.trim().toString();
-                      if (cleanValue.includes('.')) {
-                        const [principal, contract_name] = cleanValue.split('.');
-
-                        setTimeout(() => {
-                          void setValues({
-                            principal,
-                            contract_name,
-                          });
-                        }, 0);
-                      }
-                    })
-                  }
-                />
-                <Input
-                  id="contract_name"
-                  name="contract_name"
-                  type="text"
-                  onChange={handleChange}
-                  onBlur={handleBlur}
-                  value={values.contract_name}
-                  placeholder="Enter the contract name"
-                  color={colorMode === 'light' ? '#000000' : '#FFFFFF'}
-                />
-                <Box>
-                  <Button onClick={() => handleSubmit()}>Get contract</Button>
-                </Box>
-              </Stack>
-            </Box>
-          </Flex>
-        </Form>
-      )}
-    />
-  );
-};
diff --git a/src/app/sandbox/components/ContractCall/DefaultView/index.tsx b/src/app/sandbox/components/ContractCall/DefaultView/index.tsx
deleted file mode 100644
index acd4c4128..000000000
--- a/src/app/sandbox/components/ContractCall/DefaultView/index.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-'use client';
-
-import { Box, Grid } from '@/ui/components';
-import React, { FC } from 'react';
-
-import { PopularContracts } from './PopularContracts';
-import { SearchContractsForm } from './SearchContractsForm';
-
-export const DefaultView: FC<{
-  rootContractAddress: string;
-}> = ({ rootContractAddress }) => (
-  <Grid
-    minHeight="600px"
-    width="calc((1142px / 3) * 2)"
-    gridTemplateColumns="repeat(2, 1fr)"
-    flexGrow={1}
-    flexShrink={1}
-  >
-    <Box borderRightWidth="1px">
-      <SearchContractsForm rootContractAddress={rootContractAddress} />
-    </Box>
-    <Box p="16px">
-      <PopularContracts rootContractAddress={rootContractAddress} />
-    </Box>
-  </Grid>
-);
diff --git a/src/app/sandbox/components/ContractCall/FunctionView.tsx b/src/app/sandbox/components/ContractCall/FunctionView.tsx
deleted file mode 100644
index aa7bc6bc1..000000000
--- a/src/app/sandbox/components/ContractCall/FunctionView.tsx
+++ /dev/null
@@ -1,196 +0,0 @@
-'use client';
-
-import { showFn } from '@/app/common/utils/sandbox';
-import { CONNECT_AUTH_ORIGIN } from '@/common/constants';
-import { validateStacksAddress } from '@/common/utils';
-import { Section } from '@/components/section';
-import { Text } from '@/ui/Text';
-import { Box, Button, Flex, Stack } from '@/ui/components';
-import { Form, Formik } from 'formik';
-import { FC, ReactNode, useMemo, useState } from 'react';
-import { useQueryClient } from '@tanstack/react-query';
-
-import { openContractCall } from '@stacks/connect';
-import {
-  ClarityAbiFunction,
-  ClarityValue,
-  encodeClarityValue,
-  isClarityAbiList,
-  isClarityAbiOptional,
-  isClarityAbiPrimitive,
-  listCV,
-} from '@stacks/transactions';
-
-import { useStacksNetwork } from '../../../common/hooks/use-stacks-network';
-import { ListValueType, NonTupleValueType, TupleValueType, ValueType } from '../../types/values';
-import { encodeOptional, encodeOptionalTuple, encodeTuple, getTuple } from '../../utils';
-import { Argument } from '../Argument';
-import { ReadOnlyField } from './ReadOnlyField';
-
-interface FunctionViewProps {
-  fn: ClarityAbiFunction;
-  contractId: string;
-  cancelButton: ReactNode;
-}
-
-type FormType = Record<string, ValueType | ListValueType>;
-
-export const FunctionView: FC<FunctionViewProps> = ({ fn, contractId, cancelButton }) => {
-  const [readOnlyValue, setReadonlyValue] = useState<ClarityValue[]>();
-  const network = useStacksNetwork();
-  const queryClient = useQueryClient();
-
-  const initialValues = useMemo(
-    () =>
-      fn.args.reduce((argsAcc, arg) => {
-        const tuple = getTuple(arg.type);
-        const isList = isClarityAbiList(arg.type);
-        argsAcc[arg.name] = !!tuple
-          ? tuple.reduce((tupleAcc, tupleEntry) => {
-              tupleAcc[tupleEntry.name] = '';
-              return tupleAcc;
-            }, {} as Record<string, string | number>)
-          : isList
-          ? []
-          : '';
-        return argsAcc;
-      }, {} as FormType),
-    [fn]
-  );
-
-  if (!showFn(contractId, fn)) {
-    return (
-      <Section
-        overflowY="auto"
-        flexGrow={1}
-        title={`${fn.name} (${fn.access} function)`}
-        borderRadius={'0'}
-      >
-        <Box p="32px">
-          <Stack>
-            <Text>Invalid function for {contractId}.</Text>
-            {cancelButton}
-          </Stack>
-        </Box>
-      </Section>
-    );
-  }
-
-  return (
-    <Formik
-      initialValues={initialValues}
-      validateOnChange={false}
-      validateOnBlur={false}
-      validate={values => {
-        const errors: Record<string, string> = {};
-        Object.keys(values).forEach(arg => {
-          const type = fn.args.find(({ name }) => name === arg)?.type;
-          const isOptional = type && isClarityAbiOptional(type);
-          const optionalTypeIsPrincipal =
-            isOptional && isClarityAbiPrimitive(type.optional) && type.optional === 'principal';
-          if (type === 'principal' || (optionalTypeIsPrincipal && !!values[arg])) {
-            const validPrincipal = validateStacksAddress(
-              (values[arg] as NonTupleValueType).toString().split('.')[0]
-            );
-            if (!validPrincipal) {
-              errors[arg] = 'Invalid Stacks address.';
-            }
-          }
-        });
-        return errors;
-      }}
-      onSubmit={values => {
-        const final: Record<string, ClarityValue> = {};
-        Object.keys(values).forEach(arg => {
-          const type = fn.args.find(({ name }) => name === arg)?.type;
-          if (!type) return;
-          const tuple = getTuple(type);
-          const isList = isClarityAbiList(type);
-          const optionalType = isClarityAbiOptional(type) ? type?.optional : undefined;
-          if (tuple) {
-            if (optionalType) {
-              final[arg] = encodeOptionalTuple(tuple, values[arg] as TupleValueType);
-            } else {
-              final[arg] = encodeTuple(tuple, values[arg] as TupleValueType);
-            }
-          } else if (isList) {
-            const listValues = values[arg] as ListValueType;
-            const listType = type.list.type;
-            const optionalListType = isClarityAbiOptional(listType)
-              ? listType?.optional
-              : undefined;
-            const listTuple = getTuple(listType);
-            const listData = listValues.map(listValue =>
-              listTuple
-                ? encodeTuple(listTuple, listValue as TupleValueType)
-                : encodeClarityValue(
-                    optionalListType || listType,
-                    (listValue as NonTupleValueType).toString()
-                  )
-            );
-            final[arg] = listCV(listData);
-          } else if (optionalType) {
-            final[arg] = encodeOptional(optionalType, values[arg] as NonTupleValueType);
-          } else {
-            final[arg] = encodeClarityValue(type, (values[arg] as NonTupleValueType).toString());
-          }
-        });
-        if (fn.access === 'public') {
-          void openContractCall({
-            contractAddress: contractId.split('.')[0],
-            contractName: contractId.split('.')[1],
-            functionName: encodeURIComponent(fn.name),
-            functionArgs: Object.values(final),
-            network,
-            authOrigin: CONNECT_AUTH_ORIGIN,
-            onFinish: () => {
-              void queryClient.invalidateQueries({ queryKey: ['addressMempoolTxsInfinite'] });
-            },
-          });
-        } else {
-          setReadonlyValue(Object.values(final));
-        }
-      }}
-      render={({ handleChange, values, errors }) => (
-        <Section
-          overflowY="auto"
-          flexGrow={1}
-          title={`${fn.name} (${fn.access} function)`}
-          borderRadius={'0'}
-        >
-          {readOnlyValue ? (
-            <ReadOnlyField
-              fn={fn}
-              readOnlyValue={readOnlyValue}
-              contractId={contractId}
-              cancelButton={cancelButton}
-            />
-          ) : (
-            <Form>
-              <Box p="32px">
-                {fn.args.length ? (
-                  <Stack mb="32px" spacing="16px">
-                    {fn.args.map(({ name, type }) => (
-                      <Argument
-                        handleChange={handleChange}
-                        name={name}
-                        type={type}
-                        error={errors[name]}
-                        key={name}
-                        value={values[name]}
-                      />
-                    ))}
-                  </Stack>
-                ) : null}
-                <Flex flexDirection="column" alignItems="center" justifyContent="center">
-                  <Button type="submit">Call function</Button>
-                  {cancelButton}
-                </Flex>
-              </Box>
-            </Form>
-          )}
-        </Section>
-      )}
-    />
-  );
-};
diff --git a/src/app/sandbox/components/ContractCall/ReadOnlyField.tsx b/src/app/sandbox/components/ContractCall/ReadOnlyField.tsx
deleted file mode 100644
index a130b7aaa..000000000
--- a/src/app/sandbox/components/ContractCall/ReadOnlyField.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-'use client';
-
-import { Section } from '@/components/section';
-import { CodeEditor } from '@/ui/CodeEditor';
-import { Box, Flex } from '@/ui/components';
-import React, { FC, ReactNode } from 'react';
-import { useQuery } from '@tanstack/react-query';
-
-import { ClarityAbiFunction, ClarityValue } from '@stacks/transactions';
-
-import { useStacksNetwork } from '../../../common/hooks/use-stacks-network';
-import { useUser } from '../../hooks/useUser';
-import { callReadOnlyFunction, parseReadOnlyResponse } from '../../utils';
-
-interface ReadOnlyProps {
-  readOnlyValue: ClarityValue[];
-  contractId: string;
-  fn: ClarityAbiFunction;
-  cancelButton: ReactNode;
-}
-
-export const ReadOnlyField: FC<ReadOnlyProps> = ({
-  readOnlyValue,
-  contractId,
-  fn,
-  cancelButton,
-}) => {
-  const { stxAddress } = useUser();
-  const stacksNetwork = useStacksNetwork();
-
-  const { data } = useQuery(
-    ['readonly', contractId, fn.name],
-    () =>
-      callReadOnlyFunction({
-        contractName: contractId.split('.')[1],
-        contractAddress: contractId.split('.')[0],
-        functionName: fn.name,
-        functionArgs: readOnlyValue,
-        network: stacksNetwork,
-        senderAddress: stxAddress,
-      }),
-    {
-      suspense: false,
-      staleTime: 0,
-      cacheTime: 0,
-    }
-  );
-
-  if (!data) return null;
-
-  return (
-    <Box p="16px">
-      {data.okay ? (
-        <Section title="Response">
-          <CodeEditor code={parseReadOnlyResponse(data)} />
-        </Section>
-      ) : (
-        <Box>{data.result}</Box>
-      )}
-      <Flex alignItems="center" justifyContent="center" pt="16px">
-        {cancelButton}
-      </Flex>
-    </Box>
-  );
-};
diff --git a/src/app/sandbox/components/ContractCall/SelectedContractView.tsx b/src/app/sandbox/components/ContractCall/SelectedContractView.tsx
deleted file mode 100644
index b73a20254..000000000
--- a/src/app/sandbox/components/ContractCall/SelectedContractView.tsx
+++ /dev/null
@@ -1,161 +0,0 @@
-'use client';
-
-import { buildUrl } from '@/app/common/utils/buildUrl';
-import { useGlobalContext } from '@/common/context/useAppContext';
-import { useAppSelector } from '@/common/state/hooks';
-import { ContractWithParsedAbi } from '@/common/types/contract';
-import { truncateMiddle } from '@/common/utils';
-import { ArrowLeftIcon } from '@/components/icons/arrow-left';
-import { FungibleTokenIcon } from '@/components/icons/fungible-token';
-import { TxLink } from '@/components/links';
-import { PluralizedCaption } from '@/components/pluralized-caption';
-import { Section } from '@/components/section';
-import { Box, Flex, Grid, Icon, Stack } from '@/ui/components';
-import { FunctionIcon } from '@/ui/icons';
-import { Caption, Title } from '@/ui/typography';
-import NextLink from 'next/link';
-import React, { FC } from 'react';
-import { BiAtom, BiLinkExternal } from 'react-icons/bi';
-import { MdOutlineChecklistRtl } from 'react-icons/md';
-
-import { ClarityAbiFunction } from '@stacks/transactions';
-
-import { TxIcon } from '../../../common/components/TxIcon';
-import { selectShowRightPanel } from '../../sandbox-slice';
-import { AvailableFunctionsView } from './AvailableFunctionsView';
-import { FunctionView } from './FunctionView';
-
-const BackLink: React.FC<{ href: string }> = ({ href }) => {
-  return (
-    <NextLink href={href} passHref>
-      <Flex alignItems="center" mb="16px" _hover={{ cursor: 'pointer' }}>
-        <ArrowLeftIcon mr={'8px'} width={18} />
-        <Box color={'textBody'} transform={'none'} fontSize="14px">
-          Back to search
-        </Box>
-      </Flex>
-    </NextLink>
-  );
-};
-
-interface ContractInfoProps {
-  contract: ContractWithParsedAbi;
-}
-
-const ContractInfo: FC<ContractInfoProps> = ({ contract: { contract_id, abi } }) => {
-  return (
-    <Section
-      topRight={
-        <TxLink txId={contract_id}>
-          <Flex
-            as="a"
-            target="_blank"
-            color={'textCaption'}
-            _hover={{ color: 'textBody' }}
-            alignItems="center"
-          >
-            <Caption transform="translateY(1px)" color="currentColor">
-              Go to transaction
-            </Caption>
-            <Icon as={BiLinkExternal} ml="8px" color="currentColor" size="16px" />
-          </Flex>
-        </TxLink>
-      }
-      flexShrink={0}
-      mb="32px"
-      title="Contract details"
-    >
-      <Box>
-        <Flex p="16px" justifyContent="space-between" alignItems="center">
-          <Flex alignItems="center">
-            <TxIcon size="64px" />
-            <Box ml="16px">
-              <Title mb="8px" display="block" mt="0" as="h3">
-                {contract_id.split('.')[1]}
-              </Title>
-              <Caption display="block"> {truncateMiddle(contract_id.split('.')[0], 8)}</Caption>
-            </Box>
-          </Flex>
-        </Flex>
-        <Stack p="16px">
-          <Flex alignItems="center">
-            <Box opacity={0.6} size="20px">
-              <Icon as={FunctionIcon} color={'textCaption'} size="20px" />
-            </Box>
-            <PluralizedCaption ml="8px" array={abi?.functions} label="function" />
-          </Flex>
-          <Flex alignItems="center">
-            <Box opacity={0.6} size="20px">
-              <Icon as={BiAtom} color={'textCaption'} size="20px" />
-            </Box>
-            <PluralizedCaption ml="8px" array={abi?.variables} label="variable" />
-          </Flex>
-          <Flex alignItems="center">
-            <Box opacity={0.6} size="20px">
-              <Icon as={MdOutlineChecklistRtl} color={'textCaption'} size="20px" />
-            </Box>
-            <PluralizedCaption ml="8px" array={abi?.maps} label="map" />
-          </Flex>
-          <Flex alignItems="center">
-            <Box opacity={0.6} size="20px">
-              <Icon as={FungibleTokenIcon} color={'textCaption'} size="20px" />
-            </Box>
-            <PluralizedCaption
-              ml="8px"
-              array={[...(abi?.fungible_tokens || []), ...(abi?.non_fungible_tokens || [])]}
-              label="token"
-            />
-          </Flex>
-        </Stack>
-      </Box>
-    </Section>
-  );
-};
-
-export const SelectedContractView: FC<{
-  contract: ContractWithParsedAbi;
-  functionName?: string;
-  contractId: string;
-}> = ({ contract, functionName, contractId }) => {
-  const network = useGlobalContext().activeNetwork;
-  const showRightPanel = useAppSelector(selectShowRightPanel);
-  const activeNetwork = useGlobalContext().activeNetwork;
-  return (
-    <Grid
-      minHeight="600px"
-      width={showRightPanel ? 'calc((1142px / 3) * 2)' : '100%'}
-      gridTemplateColumns={showRightPanel ? '1fr 1fr' : '1fr 2fr'}
-      flexGrow={1}
-      flexShrink={1}
-    >
-      <Box borderRightWidth="1px" p="16px">
-        <BackLink href={buildUrl(`/sandbox/contract-call`, network)} />
-        <ContractInfo contract={contract} />
-      </Box>
-      <Box overflow="auto" maxHeight="calc(100vh - 217px)" p="16px">
-        {functionName ? (
-          <FunctionView
-            contractId={contractId}
-            fn={
-              contract?.abi?.functions?.find(
-                (fn: any) => fn.name === functionName
-              ) as unknown as ClarityAbiFunction
-            }
-            cancelButton={
-              <NextLink
-                href={buildUrl(`/sandbox/contract-call/${contractId}`, activeNetwork)}
-                passHref
-              >
-                <Caption _hover={{ cursor: 'pointer', color: 'textTitle' }} mt="16px">
-                  Cancel
-                </Caption>
-              </NextLink>
-            }
-          />
-        ) : (
-          <AvailableFunctionsView contract={contract} contractId={contractId} />
-        )}
-      </Box>
-    </Grid>
-  );
-};
diff --git a/src/app/sandbox/components/Toolbar.tsx b/src/app/sandbox/components/Toolbar.tsx
deleted file mode 100644
index f06dd5e46..000000000
--- a/src/app/sandbox/components/Toolbar.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-'use client';
-
-import { helloWorldContract } from '@/common/contracts/hello-world-contract';
-import { kvStoreContract } from '@/common/contracts/kv-store';
-import { statusContract } from '@/common/contracts/status';
-import { streamContract } from '@/common/contracts/stream';
-import { useAppDispatch, useAppSelector } from '@/common/state/hooks';
-import { Box, Flex, IconButton, Select, Stack, Tooltip } from '@/ui/components';
-import { Caption } from '@/ui/typography';
-import { useClipboard } from '@chakra-ui/react';
-import { useMonaco } from '@monaco-editor/react';
-import React from 'react';
-import { AiOutlineCopy } from 'react-icons/ai';
-import { RiCloseLine } from 'react-icons/ri';
-
-import { useUser } from '../hooks/useUser';
-import {
-  selectCodeBody,
-  selectShowCodeToolbar,
-  setCodeBody,
-  toggleCodeToolbar,
-} from '../sandbox-slice';
-
-export const Sample = () => {
-  const { stxAddress } = useUser();
-  const dispatch = useAppDispatch();
-  const monaco = useMonaco();
-
-  return (
-    <Select
-      name="codeBody"
-      placeholder="Choose from sample"
-      onChange={e => {
-        dispatch(setCodeBody({ codeBody: e.target.value.trim() }));
-        if (monaco) {
-          const model = monaco.editor.getModels();
-          model[0].setValue(e.target.value.trim());
-        }
-      }}
-      flexGrow={1}
-      bg={'white'}
-      color={`black`}
-    >
-      {[helloWorldContract, kvStoreContract, statusContract, streamContract].map(
-        ({ name, source }, key: number) => (
-          <option
-            key={name}
-            label={name}
-            value={
-              key === 0
-                ? source.replace('SM2J6ZY48GV1EZ5V2V5RB9MP66SW86PYKKQVX8X0G', stxAddress as string)
-                : source
-            }
-          >
-            {name}
-          </option>
-        )
-      )}
-    </Select>
-  );
-};
-
-export const Toolbar: React.FC<any> = () => {
-  const codeBody = useAppSelector(selectCodeBody);
-  const dispatch = useAppDispatch();
-  const { onCopy, hasCopied } = useClipboard(codeBody);
-
-  const showCodeToolbar = useAppSelector(selectShowCodeToolbar);
-  return showCodeToolbar ? (
-    <Flex
-      alignItems="center"
-      justifyContent="space-between"
-      p="16px"
-      borderBottomWidth="1px"
-      bg="ink"
-      borderBottomColor="rgba(255,255,255,0.15)"
-    >
-      <Flex alignItems="center">
-        <Caption mr="8px">Samples</Caption>
-        <Box
-          _hover={{
-            cursor: 'pointer',
-          }}
-          maxWidth="320px"
-        >
-          <Sample />
-        </Box>
-      </Flex>
-      <Stack ml="auto" isInline>
-        <Box onClick={onCopy}>
-          <Tooltip label={hasCopied ? 'Copied!' : 'Copy contract code'}>
-            <IconButton
-              icon={<AiOutlineCopy strokeWidth={1.75} size={'20px'} color={'textBody'} />}
-              aria-label={'copy'}
-            />
-          </Tooltip>
-        </Box>
-        <IconButton
-          icon={<RiCloseLine strokeWidth={1.75} size={'20px'} color={'textBody'} />}
-          onClick={() => dispatch(toggleCodeToolbar())}
-          aria-label={'close'}
-        />
-      </Stack>
-    </Flex>
-  ) : null;
-};
diff --git a/src/app/sandbox/components/TransactionsPanel.tsx b/src/app/sandbox/components/TransactionsPanel.tsx
deleted file mode 100644
index 3d6910921..000000000
--- a/src/app/sandbox/components/TransactionsPanel.tsx
+++ /dev/null
@@ -1,344 +0,0 @@
-'use client';
-
-import { buildUrl } from '@/app/common/utils/buildUrl';
-import { Badge } from '@/common/components/Badge';
-import { useGlobalContext } from '@/common/context/useAppContext';
-import { useAppDispatch } from '@/common/state/hooks';
-import { FilterPanel, FilteredMessage } from '@/components/filter-panel';
-import { InfoCircleIcon } from '@/components/icons/info-circle';
-import { ExplorerLink } from '@/components/links';
-import { TransactionQueryKeys, transactionQK } from '@/features/transaction/query-keys';
-import { useTransactionQueries } from '@/features/transaction/use-transaction-queries';
-import { Accordion } from '@/ui/Accordion';
-import { AccordionButton } from '@/ui/AccordionButton';
-import { AccordionIcon } from '@/ui/AccordionIcon';
-import { AccordionItem } from '@/ui/AccordionItem';
-import { AccordionPanel } from '@/ui/AccordionPanel';
-import { Box, Flex, Icon, IconButton, Stack } from '@/ui/components';
-import { FunctionIcon } from '@/ui/icons';
-import { Caption, Text, Title } from '@/ui/typography';
-import { useColorMode } from '@chakra-ui/react';
-import { useRouter } from 'next/navigation';
-import React, { FC } from 'react';
-import { BsChevronDown } from 'react-icons/bs';
-import { FiFilter } from 'react-icons/fi';
-import { useQuery } from '@tanstack/react-query';
-
-import { MempoolTransaction, Transaction } from '@stacks/stacks-blockchain-api-types';
-
-import { MempoolTxListItemMini } from '../../common/components/tx-lists/list-items/MempoolTxListItemMini';
-import { TxListItemMini } from '../../common/components/tx-lists/list-items/TxListItemMini';
-import { useFilterState } from '../../common/hooks/use-filter-state';
-import { useVerticallyStackedElementsBorderStyle } from '../../common/styles/border';
-import { setCodeBody, toggleRightPanel } from '../sandbox-slice';
-
-const PanelHeader: React.FC = () => {
-  const { toggleFilterVisibility } = useFilterState();
-  return (
-    <>
-      <Flex
-        justifyContent="space-between"
-        px="16px"
-        borderBottomWidth="1px"
-        py="8px"
-        bg={`bg.${useColorMode().colorMode}`}
-      >
-        <Caption>Transactions</Caption>
-
-        <Caption
-          display="flex"
-          alignItems="center"
-          _hover={{ cursor: 'pointer', color: 'textTitle' }}
-          onClick={toggleFilterVisibility}
-          gap={'4px'}
-        >
-          <Icon as={FiFilter} color="currentColor" />
-          Filter transactions
-        </Caption>
-      </Flex>
-    </>
-  );
-};
-
-const LoadButton = ({ codeBody }: { codeBody: string }) => {
-  const router = useRouter();
-  const network = useGlobalContext().activeNetwork;
-  const [loaded, setLoaded] = React.useState(false);
-  const [clicked, setClicked] = React.useState(false);
-  const dispatch = useAppDispatch();
-  const colorMode = useColorMode().colorMode;
-  return loaded ? (
-    <Badge userSelect="none" color={`textCaption.${colorMode}`}>
-      Loaded!
-    </Badge>
-  ) : !clicked ? (
-    <Badge
-      userSelect="none"
-      _hover={{ cursor: 'pointer', color: `textTitle.${colorMode}` }}
-      color={`textCaption.${colorMode}`}
-      onClick={() => setClicked(true)}
-    >
-      Load in editor
-    </Badge>
-  ) : (
-    <Badge userSelect="none" color={`textCaption.${colorMode}`}>
-      <Flex>
-        <Box
-          _hover={{ cursor: 'pointer', color: `textTitle.${colorMode}` }}
-          pr="8px"
-          onClick={() => setClicked(false)}
-        >
-          Cancel
-        </Box>
-        <Box
-          _hover={{ cursor: 'pointer', color: `textTitle.${colorMode}` }}
-          pl="8px"
-          borderWidth="1px"
-          onClick={() => {
-            setClicked(false);
-            dispatch(setCodeBody({ codeBody }));
-            setLoaded(true);
-            void router.push(buildUrl('/sandbox/deploy', network));
-            setTimeout(() => {
-              setLoaded(false);
-            }, 3000);
-          }}
-        >
-          Confirm
-        </Box>
-      </Flex>
-    </Badge>
-  );
-};
-
-const TxDetailsFunctions = ({
-  hasFunctionsAvailable,
-  contractInterface,
-  contractId,
-  status,
-}: any) => {
-  const [fnsVisible, setFnsVisibility] = React.useState(false);
-  const dispatch = useAppDispatch();
-  const colorMode = useColorMode().colorMode;
-
-  return hasFunctionsAvailable ? (
-    <>
-      <Flex
-        justifyContent="space-between"
-        alignItems="center"
-        borderBottomWidth={fnsVisible ? '1px' : undefined}
-        px="16px"
-        pb="8px"
-        pt="12px"
-      >
-        <Caption fontWeight="500" color={'textBody'}>
-          Call contract
-        </Caption>
-        <Stack isInline spacing="8px" alignItems="center">
-          <ExplorerLink href={`/sandbox/contract-call/${contractId}`}>
-            <Badge
-              userSelect="none"
-              _hover={{
-                cursor: 'pointer',
-                color: `textTitle.${colorMode}`,
-              }}
-              color={`textCaption.${colorMode}`}
-            >
-              Load contract
-            </Badge>
-          </ExplorerLink>
-          <IconButton
-            size="24px"
-            onClick={() => {
-              setFnsVisibility(s => !s);
-            }}
-            icon={
-              <BsChevronDown size={'16px'} transform={!fnsVisible ? 'none' : 'rotate(180deg)'} />
-            }
-            aria-label={'toggle function'}
-          />
-        </Stack>
-      </Flex>
-      {fnsVisible ? (
-        <Stack maxHeight="120px" overflowX="auto" spacing="0">
-          {contractInterface?.abi?.functions?.map((func: any, index: number, arr: any[]) => {
-            return func.access !== 'private' ? (
-              <Flex
-                borderBottomWidth={index === arr.length - 1 ? undefined : '1px'}
-                px="16px"
-                py="8px"
-                alignItems="center"
-                justifyContent="space-between"
-              >
-                <Flex alignItems="center" color={`textCaption.${colorMode}`}>
-                  {func.access === 'read_only' ? (
-                    <InfoCircleIcon size="18px" />
-                  ) : (
-                    <FunctionIcon size="18px" />
-                  )}
-                  <Caption color={`textBody.${colorMode}`} ml="4px">
-                    {func.name}
-                  </Caption>
-                </Flex>
-                {status === 'success' ? (
-                  <ExplorerLink href={`/sandbox/contract-call/${contractId}/${func.name}`}>
-                    <Badge
-                      _hover={{ color: `textTitle.${colorMode}`, cursor: 'pointer' }}
-                      color={`textCaption.${colorMode}`}
-                      onClick={() => {
-                        dispatch(toggleRightPanel());
-                      }}
-                    >
-                      Load function
-                    </Badge>
-                  </ExplorerLink>
-                ) : null}
-              </Flex>
-            ) : null;
-          })}
-        </Stack>
-      ) : null}
-    </>
-  ) : null;
-};
-
-const TxDetails: React.FC<{ tx: Transaction }> = React.memo(({ tx }) => {
-  const contractId =
-    tx.tx_type === 'smart_contract'
-      ? tx.smart_contract.contract_id
-      : tx.tx_type === 'contract_call'
-      ? tx.contract_call.contract_id
-      : '';
-  const queries = useTransactionQueries();
-  const colorMode = useColorMode().colorMode;
-
-  const { data: contract } = useQuery(
-    transactionQK(TransactionQueryKeys.contract, contractId),
-    queries.fetchContract(contractId),
-    { staleTime: Infinity, enabled: !!contractId }
-  );
-
-  const hasFunctionsAvailable =
-    tx.tx_type === 'smart_contract' &&
-    tx.tx_status === 'success' &&
-    !!contract?.abi?.functions?.length;
-
-  if (!contract)
-    return (
-      <Text fontSize={'14px'} p={'20px'} align={'center'}>
-        Nothing to show
-      </Text>
-    );
-
-  return (
-    <>
-      <Box>
-        <Box>
-          <Flex
-            justifyContent="space-between"
-            borderWidth={hasFunctionsAvailable ? '1px' : undefined}
-            px="16px"
-            py="8px"
-            alignItems="center"
-          >
-            <Caption fontWeight="500" color={`textBody.${colorMode}`}>
-              Redeploy contract
-            </Caption>
-            <LoadButton codeBody={contract.source_code} />
-          </Flex>
-          <TxDetailsFunctions
-            contractId={contractId}
-            status={tx.tx_status}
-            hasFunctionsAvailable={hasFunctionsAvailable}
-            contractInterface={contract}
-          />
-        </Box>
-      </Box>
-    </>
-  );
-});
-
-export const TransactionsPanel: FC<{
-  transactions: Transaction[];
-  mempoolTransactions: MempoolTransaction[];
-  stxAddress: string;
-}> = React.memo(({ transactions, mempoolTransactions, stxAddress }) => {
-  const { activeFilters } = useFilterState();
-
-  const filteredTxs = (transactions || []).filter(tx => activeFilters[tx.tx_type]);
-  const hasTxButIsFiltered = transactions?.length && filteredTxs?.length === 0;
-
-  const pendingList = React.useMemo(
-    () =>
-      mempoolTransactions?.map(tx => (
-        <Flex>
-          <MempoolTxListItemMini key={tx.tx_id} tx={tx} />
-        </Flex>
-      )),
-    [mempoolTransactions]
-  );
-
-  const txList = React.useMemo(
-    () =>
-      filteredTxs.map(tx => (
-        <AccordionItem key={tx.tx_id} border={'none'}>
-          <Flex gap={'6px'}>
-            <TxListItemMini tx={tx} />
-            <AccordionButton
-              flexGrow={0}
-              flexShrink={0}
-              width={'30px'}
-              ml={'auto'}
-              p={0}
-              justifyContent={'center'}
-            >
-              <AccordionIcon />
-            </AccordionButton>
-          </Flex>
-          <AccordionPanel css={useVerticallyStackedElementsBorderStyle} borderTopWidth="1px">
-            <TxDetails tx={tx} />
-          </AccordionPanel>
-        </AccordionItem>
-      )),
-    [filteredTxs]
-  );
-
-  return (
-    <Flex
-      position="relative"
-      flexDirection="column"
-      flexGrow={1}
-      bg={`bgAlt.${useColorMode().colorMode}`}
-      borderBottomRightRadius="12px"
-      overflow="hidden"
-    >
-      <PanelHeader />
-      <FilterPanel />
-      <Flex
-        flexDirection="column"
-        flexGrow={1}
-        overflow="auto"
-        bg={`bg.${useColorMode().colorMode}`}
-        position="relative"
-        pl={'20px'}
-        css={useVerticallyStackedElementsBorderStyle}
-      >
-        <>
-          {pendingList}
-          {filteredTxs?.length ? (
-            <Accordion allowMultiple>{txList}</Accordion>
-          ) : hasTxButIsFiltered ? (
-            <FilteredMessage />
-          ) : (
-            <Flex flexGrow={1} flexDirection="column" alignItems="center" justifyContent="center">
-              <Stack textAlign="center">
-                <Title>No Transactions</Title>
-                <Caption>Your list of transactions will display here.</Caption>
-              </Stack>
-            </Flex>
-          )}
-        </>
-      </Flex>
-    </Flex>
-  );
-});
diff --git a/src/app/sandbox/contract-call/[[...params]]/page.tsx b/src/app/sandbox/contract-call/[[...params]]/page.tsx
deleted file mode 100644
index 430e605c1..000000000
--- a/src/app/sandbox/contract-call/[[...params]]/page.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-'use client';
-
-import { useApi } from '@/common/api/client';
-import { useGlobalContext } from '@/common/context/useAppContext';
-import { TransactionQueryKeys, transactionQK } from '@/features/transaction/query-keys';
-import { getTransactionQueries } from '@/features/transaction/use-transaction-queries';
-import { FC } from 'react';
-import { useQuery } from '@tanstack/react-query';
-
-import { DefaultView } from '../../components/ContractCall/DefaultView';
-import { SelectedContractView } from '../../components/ContractCall/SelectedContractView';
-
-const ContractCall: FC<any> = ({ params: { params } }) => {
-  const contractId = params?.[0] || '';
-  const functionName = params?.[1] || '';
-  const { infoApi } = useApi();
-  const { data: poxInfo } = useQuery(['pox-info'], () => infoApi.getPoxInfo(), { staleTime: 5000 });
-  const rootContractAddress = poxInfo?.contract_id?.split('.')?.[0];
-  const { url: activeNetworkUrl } = useGlobalContext().activeNetwork;
-
-  const queries = getTransactionQueries(activeNetworkUrl);
-
-  const { data: contract } = useQuery(
-    transactionQK(TransactionQueryKeys.contract, contractId),
-    queries.fetchContract(contractId),
-    {
-      enabled: !!contractId,
-    }
-  );
-
-  if (!rootContractAddress) return null;
-
-  if (!!contract) {
-    return (
-      <SelectedContractView
-        contract={contract}
-        functionName={functionName}
-        contractId={contractId}
-      />
-    );
-  }
-
-  return <DefaultView rootContractAddress={rootContractAddress} />;
-};
-
-export default ContractCall;
diff --git a/src/app/sandbox/deploy/DeployPage.tsx b/src/app/sandbox/deploy/DeployPage.tsx
deleted file mode 100644
index 7ba9243e5..000000000
--- a/src/app/sandbox/deploy/DeployPage.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-'use client';
-
-import { Flex } from '@/ui/Flex';
-import { Grid } from '@/ui/Grid';
-import { FC } from 'react';
-
-import { LeftSection } from './LeftSection';
-import { RightSection } from './RightSection';
-
-export const DeployPage: FC<{ claritySyntax: Record<string, any> }> = ({ claritySyntax }) => (
-  <Grid minHeight="600px" gridTemplateColumns="365px 1fr" flexGrow={1} flexShrink={1}>
-    <Flex flexDirection="column" flexGrow={1} p="24px">
-      <LeftSection />
-    </Flex>
-    <Flex flexDirection="column" bg={`black`} pt="16px" flexGrow={1} flexShrink={1}>
-      <RightSection claritySyntax={claritySyntax} />
-    </Flex>
-  </Grid>
-);
diff --git a/src/app/sandbox/deploy/LeftSection.tsx b/src/app/sandbox/deploy/LeftSection.tsx
deleted file mode 100644
index e432b8173..000000000
--- a/src/app/sandbox/deploy/LeftSection.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-'use client';
-
-import { CONNECT_AUTH_ORIGIN } from '@/common/constants';
-import { useAppDispatch, useAppSelector } from '@/common/state/hooks';
-import { Box, Button, Flex, IconButton, Input, Stack, Tooltip } from '@/ui/components';
-import { Caption, Title } from '@/ui/typography';
-import React, { FC, useState } from 'react';
-import { RiCloseLine } from 'react-icons/ri';
-import { TbTools } from 'react-icons/tb';
-import { useQueryClient } from '@tanstack/react-query';
-import { FiExternalLink } from 'react-icons/fi';
-
-import { openContractDeploy } from '@stacks/connect';
-
-import { useRandomName } from '../../common/hooks/use-random-name';
-import { useStacksNetwork } from '../../common/hooks/use-stacks-network';
-import { useUser } from '../hooks/useUser';
-import { selectCodeBody, setUserData, toggleCodeToolbar } from '../sandbox-slice';
-
-export const LeftSection: FC = () => {
-  const dispatch = useAppDispatch();
-  const randomName = useRandomName();
-  const { isConnected, connect } = useUser();
-  const network = useStacksNetwork();
-  const [contractName, setContractName] = useState(randomName());
-  const codeBody = useAppSelector(selectCodeBody);
-  const queryClient = useQueryClient();
-
-  const onDeploy = React.useCallback(() => {
-    void openContractDeploy({
-      network,
-      postConditionMode: 0x01,
-      codeBody,
-      contractName,
-      authOrigin: CONNECT_AUTH_ORIGIN,
-      onFinish: () => {
-        void queryClient.invalidateQueries({ queryKey: ['addressMempoolTxsInfinite'] });
-      },
-    });
-  }, [codeBody, contractName, network, queryClient]);
-  return (
-    <>
-      <Title mb="32px" fontSize="24px">
-        Write & Deploy
-      </Title>
-      <Caption mb="8px">Contract name</Caption>
-      <Flex
-        border="1px solid transparent"
-        alignItems="center"
-        borderRadius="24px"
-        position="relative"
-      >
-        <Input
-          as="input"
-          value={contractName}
-          onChange={(e: any) => setContractName(e.target?.value as string)}
-          placeholder="Name your contract"
-          pr="84px"
-          color={'textBody'}
-        />
-        <Flex position="absolute" right="44px">
-          <IconButton
-            color={'textBody'}
-            onClick={() => {
-              setContractName('');
-            }}
-            icon={<RiCloseLine size={'16px'} />}
-            aria-label={'clear contract name field'}
-            size={'30px'}
-          />
-        </Flex>
-        <Box onClick={() => dispatch(toggleCodeToolbar())}>
-          <Tooltip label="Contract tools">
-            <IconButton
-              icon={<TbTools size={'16px'} />}
-              aria-label={'contract tools'}
-              size={'40px'}
-            />
-          </Tooltip>
-        </Box>
-      </Flex>
-      <Stack alignItems="center" justifyContent={'center'} isInline spacing="8px" mt="20px">
-        <Button
-          onClick={() =>
-            isConnected
-              ? onDeploy()
-              : connect({
-                  onFinish: authData => {
-                    dispatch(setUserData({ userData: authData.userSession.loadUserData() }));
-                  },
-                })
-          }
-          width="100%"
-        >
-          {isConnected ? 'Deploy' : 'Connect Stacks Wallet'}
-        </Button>
-      </Stack>
-      <Stack mt={'10px'}>
-        <Button
-          color={'textBody'}
-          variant="outline"
-          _hover={{ background: '#F9F9FA' }}
-          bg={'bg'}
-          rightIcon={<FiExternalLink />}
-          onClick={() => {
-            const paramsBase64 = { name: contractName, sourceCode: codeBody };
-            const state = btoa(JSON.stringify(paramsBase64));
-
-            // 'state' param is used by Auth0 to forward the params after the login portal
-            window.open(`https://platform.hiro.so/projects/import?state=${state}`);
-          }}
-          width="100%"
-        >
-          Save Contract in Hiro Platform
-        </Button>
-      </Stack>
-    </>
-  );
-};
diff --git a/src/app/sandbox/deploy/RightSection.tsx b/src/app/sandbox/deploy/RightSection.tsx
deleted file mode 100644
index b126d6ab1..000000000
--- a/src/app/sandbox/deploy/RightSection.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-'use client';
-
-import { useAppDispatch, useAppSelector } from '@/common/state/hooks';
-import { Box, Stack } from '@/ui/components';
-import { Caption } from '@/ui/typography';
-import Editor, { Monaco } from '@monaco-editor/react';
-import { FC, useCallback, useState } from 'react';
-
-import { ClarityIcon } from '../components/ClarityIcon';
-import { Toolbar } from '../components/Toolbar';
-import { autocomplete, hover } from '../editor-config/autocomplete';
-import { defineTheme } from '../editor-config/define-theme';
-import { liftOff } from '../editor-config/init';
-import { configLanguage } from '../editor-config/language';
-import { selectCodeBody, setCodeBody } from '../sandbox-slice';
-
-interface LeftSectionProps {
-  claritySyntax: Record<string, any>;
-}
-
-export const RightSection: FC<LeftSectionProps> = ({ claritySyntax }) => {
-  const [loaded, setLoaded] = useState(false);
-  const dispatch = useAppDispatch();
-  const codeBody = useAppSelector(selectCodeBody);
-  const handleEditorWillMount = useCallback(
-    async (monaco: Monaco) => {
-      if (!loaded) {
-        configLanguage(monaco);
-        hover(monaco);
-        autocomplete(monaco);
-        defineTheme(monaco);
-        await liftOff(monaco, claritySyntax);
-
-        setLoaded(true);
-      }
-    },
-    [loaded, claritySyntax]
-  );
-  return (
-    <>
-      <Box
-        px="32px"
-        pb="16px"
-        borderBottomWidth="1px"
-        borderBottomColor="rgba(255,255,255,0.1)"
-        color="white"
-      >
-        <Stack alignItems="center" isInline>
-          <ClarityIcon size="16px" />
-          <Caption transform="translateY(1px)" color="white">
-            Clarity code editor
-          </Caption>
-        </Stack>
-      </Box>
-      <Box size="100%" position="relative">
-        <Toolbar />
-        <Editor
-          beforeMount={handleEditorWillMount}
-          onMount={editor => {
-            editor.updateOptions({
-              wordSeparators: '`~!@#$%^&*()=+[{]}\\|;:\'",.<>/?',
-            });
-          }}
-          wrapperProps={{
-            className: 'clarity-editor-wrapper',
-          }}
-          className="clarity-editor"
-          defaultLanguage="clarity"
-          theme="vs-dark"
-          defaultValue={codeBody}
-          value={codeBody}
-          onChange={updatedCodeBody => dispatch(setCodeBody({ codeBody: updatedCodeBody || '' }))}
-          options={{
-            fontLigatures: true,
-            fontSize: 14,
-            minimap: {
-              enabled: false,
-            },
-          }}
-        />
-      </Box>
-    </>
-  );
-};
diff --git a/src/app/sandbox/deploy/page.tsx b/src/app/sandbox/deploy/page.tsx
deleted file mode 100644
index 7aef8ee28..000000000
--- a/src/app/sandbox/deploy/page.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { DeployPage } from './DeployPage';
-
-function Deploy({ claritySyntax }: { claritySyntax: Record<string, any> }) {
-  return <DeployPage claritySyntax={claritySyntax} />;
-}
-
-export default Deploy;
diff --git a/src/app/sandbox/editor-config/autocomplete.ts b/src/app/sandbox/editor-config/autocomplete.ts
deleted file mode 100644
index f25908a4f..000000000
--- a/src/app/sandbox/editor-config/autocomplete.ts
+++ /dev/null
@@ -1,202 +0,0 @@
-import { Monaco } from '@monaco-editor/react';
-import { IRange, Position, editor, languages } from 'monaco-editor/esm/vs/editor/editor.api';
-
-import { clarity } from './clarity-reference';
-
-const getToken = (line: string, replacer: string) =>
-  line
-    .replace(`${replacer}`, '')
-    .split(' ')
-    .map(t => t.replace(new RegExp(/\)/, 'g'), ''))
-    .filter(t => t !== ' ')
-    .filter(t => t !== '')
-    .filter(t => t)[0];
-
-export function autocomplete(monaco: Monaco) {
-  const provider: languages.CompletionItemProvider = {
-    triggerCharacters: ['(', "'", '"', ' '],
-    provideCompletionItems: (model: editor.ITextModel, position: Position) => {
-      // // Get all the text content before the cursor
-      const textUntilPosition = model.getValueInRange({
-        startLineNumber: 1,
-        startColumn: 1,
-        endLineNumber: position.lineNumber,
-        endColumn: position.column,
-      });
-      const fullRange = model.getFullModelRange();
-      const text = model.getValueInRange(fullRange);
-      const word = model.getWordUntilPosition(position);
-      const lines = text.split('\n');
-      const nfts = new Set<string>([]);
-      const fts = new Set<string>([]);
-      const functions = new Set<string>([]);
-      const principals = new Set<string>([]);
-      const DEFINE_NFT = `(define-non-fungible-token`;
-      const DEFINE_FT = `(define-fungible-token`;
-      const DEFINE_PUBLIC = `(define-public (`;
-      const DEFINE_READ_ONLY = `(define-read-only (`;
-
-      lines.forEach(line => {
-        if (line.includes(" '")) {
-          const token = line.split(" '").map(t => t.replace(new RegExp(/\)/, 'g'), ''))[1];
-          if (token) {
-            principals.add(token);
-          }
-        }
-        if (line.includes(DEFINE_NFT)) {
-          const token = getToken(line, `${DEFINE_NFT} `);
-          if (token) {
-            nfts.add(token);
-          }
-        }
-        if (line.includes(DEFINE_FT)) {
-          const token = getToken(line, `${DEFINE_FT} `);
-          fts.add(token);
-        }
-        if (line.includes(DEFINE_PUBLIC)) {
-          const token = getToken(line, `${DEFINE_PUBLIC}`);
-          functions.add(token);
-        }
-        if (line.includes(DEFINE_READ_ONLY)) {
-          const token = getToken(line, `${DEFINE_READ_ONLY}`);
-          functions.add(token);
-        }
-      });
-
-      const range: IRange = {
-        startLineNumber: position.lineNumber,
-        endLineNumber: position.lineNumber,
-        startColumn: word.startColumn,
-        endColumn: word.endColumn,
-      };
-
-      if (
-        /(nft-get-balance|nft-get-supply|nft-mint|nft-burn|nft-get-owner|nft-transfer)\?\s$/.exec(
-          textUntilPosition
-        ) &&
-        [...nfts].length > 0
-      ) {
-        return {
-          suggestions: [...nfts].map(nft => ({
-            label: nft,
-            insertText: nft,
-            kind: monaco.languages.CompletionItemKind.Constant,
-            range,
-          })),
-        };
-      }
-      if (
-        /(ft-get-balance|ft-get-supply|ft-mint|ft-burn|ft-get-owner|ft-transfer)\?\s$/.exec(
-          textUntilPosition
-        ) &&
-        [...fts].length > 0
-      ) {
-        return {
-          suggestions: [...fts].map(nft => ({
-            label: nft,
-            insertText: nft,
-            kind: monaco.languages.CompletionItemKind.Constant,
-            range,
-          })),
-        };
-      }
-
-      if (textUntilPosition.endsWith('(')) {
-        return {
-          suggestions: clarity.functions.map(func => ({
-            label: func.name,
-            detail: func.input_type,
-            documentation: func.description,
-            insertText: func.name.split(' ')[0],
-            kind: monaco.languages.CompletionItemKind.Function,
-            range,
-          })),
-        };
-      }
-
-      return;
-    },
-  };
-  monaco.languages.registerCompletionItemProvider('clarity', provider);
-}
-
-export function hover(monaco: Monaco) {
-  monaco.languages.registerHoverProvider('clarity', {
-    provideHover: (model: editor.ITextModel, position: Position) => {
-      const word = model.getWordAtPosition(position);
-      const hyphenWordPattern = new RegExp(/((?:\w+-)+\w+)/, 'g');
-      const wordsWithHyphens: string[] = [
-        ...new Set([
-          ...[...model.getLineContent(position.lineNumber).matchAll(hyphenWordPattern)].flat(),
-        ]),
-      ];
-
-      const token =
-        (word?.word && wordsWithHyphens?.find(t => t.includes(word.word))) || word?.word;
-
-      const functions = clarity.functions.find(
-        func => func.name === token || func.name === `${token}?`
-      );
-
-      if (functions) {
-        const foundWord =
-          model.findMatches(`${token}?`, false, false, false, null, false).find(i => {
-            if (i.range.startLineNumber === position.lineNumber) {
-              if (position.column >= i.range.startColumn && position.column <= i.range.endColumn) {
-                return true;
-              }
-            }
-          }) ||
-          model.findMatches(`${token}`, false, false, false, null, false).find(i => {
-            if (i.range.startLineNumber === position.lineNumber) {
-              if (position.column >= i.range.startColumn && position.column <= i.range.endColumn) {
-                return true;
-              }
-            }
-          });
-        if (!foundWord) return;
-        return {
-          range: foundWord?.range || undefined,
-          contents: [
-            { value: `**${functions.name}**` },
-            ...(functions.input_type !== 'Not Applicable'
-              ? [{ value: `**Input type** \`${functions.input_type}\`` }]
-              : []),
-            ...(functions.output_type !== 'Not Applicable'
-              ? [{ value: `**Output type** \`${functions.output_type}\`` }]
-              : []),
-            { value: `**Signature** \`${functions.signature}\`` },
-            { value: functions.description },
-          ].filter(t => t),
-        };
-      }
-
-      const keywords = clarity.keywords.find(keyword => keyword.name === token);
-      if (keywords) {
-        const foundWord = model
-          .findMatches(`${token}`, false, false, false, null, false)
-          .find(i => {
-            if (i.range.startLineNumber === position.lineNumber) {
-              if (position.column >= i.range.startColumn && position.column <= i.range.endColumn) {
-                return true;
-              }
-            }
-          });
-        if (!foundWord) return;
-        return {
-          range: foundWord?.range || undefined,
-          contents: [
-            { value: `**${keywords.name}**` },
-            ...(keywords.output_type !== 'Not Applicable'
-              ? [{ value: `**Output type** \`${keywords.output_type}\`` }]
-              : []),
-            { value: `\`${keywords.example}\`` },
-            { value: keywords.description },
-          ].filter(t => t),
-        };
-      }
-
-      return;
-    },
-  });
-}
diff --git a/src/app/sandbox/editor-config/clarity-reference.ts b/src/app/sandbox/editor-config/clarity-reference.ts
deleted file mode 100644
index 68fe673bf..000000000
--- a/src/app/sandbox/editor-config/clarity-reference.ts
+++ /dev/null
@@ -1,967 +0,0 @@
-export const clarity = {
-  functions: [
-    {
-      name: '+ (add)',
-      input_type: 'int, ... | uint, ...',
-      output_type: 'int | uint',
-      signature: '(+ i1 i2...)',
-      description:
-        'Adds a variable number of integer inputs and returns the result. In the event of an _overflow_, throws a runtime error.',
-      example: '(+ 1 2 3) ;; Returns 6',
-    },
-    {
-      name: '- (subtract)',
-      input_type: 'int, ... | uint, ...',
-      output_type: 'int | uint',
-      signature: '(- i1 i2...)',
-      description:
-        'Subtracts a variable number of integer inputs and returns the result. In the event of an _underflow_, throws a runtime error.',
-      example: '(- 2 1 1) ;; Returns 0\n(- 0 3) ;; Returns -3\n',
-    },
-    {
-      name: '* (multiply)',
-      input_type: 'int, ... | uint, ...',
-      output_type: 'int | uint',
-      signature: '(* i1 i2...)',
-      description:
-        'Multiplies a variable number of integer inputs and returns the result. In the event of an _overflow_, throws a runtime error.',
-      example: '(* 2 3) ;; Returns 6\n(* 5 2) ;; Returns 10\n(* 2 2 2) ;; Returns 8\n',
-    },
-    {
-      name: '/ (divide)',
-      input_type: 'int, ... | uint, ...',
-      output_type: 'int | uint',
-      signature: '(/ i1 i2...)',
-      description:
-        'Integer divides a variable number of integer inputs and returns the result. In the event of division by zero, throws a runtime error.',
-      example: '(/ 2 3) ;; Returns 0\n(/ 5 2) ;; Returns 2\n(/ 4 2 2) ;; Returns 1\n',
-    },
-    {
-      name: '>= (greater than or equal)',
-      input_type: 'int, int | uint, uint',
-      output_type: 'bool',
-      signature: '(>= i1 i2)',
-      description:
-        'Compares two integers, returning `true` if `i1` is greater than or equal to `i2` and `false` otherwise.',
-      example: '(>= 1 1) ;; Returns true\n(>= 5 2) ;; Returns true\n',
-    },
-    {
-      name: '<= (less than or equal)',
-      input_type: 'int, int | uint, uint',
-      output_type: 'bool',
-      signature: '(<= i1 i2)',
-      description:
-        'Compares two integers, returning true if `i1` is less than or equal to `i2` and `false` otherwise.',
-      example: '(<= 1 1) ;; Returns true\n(<= 5 2) ;; Returns false\n',
-    },
-    {
-      name: '< (less than)',
-      input_type: 'int, int | uint, uint',
-      output_type: 'bool',
-      signature: '(< i1 i2)',
-      description:
-        'Compares two integers, returning `true` if `i1` is less than `i2` and `false` otherwise.',
-      example: '(< 1 2) ;; Returns true\n(< 5 2) ;; Returns false\n',
-    },
-    {
-      name: '> (greater than)',
-      input_type: 'int, int | uint, uint',
-      output_type: 'bool',
-      signature: '(> i1 i2)',
-      description:
-        'Compares two integers, returning `true` if `i1` is greater than `i2` and false otherwise.',
-      example: '(> 1 2) ;; Returns false\n(> 5 2) ;; Returns true\n',
-    },
-    {
-      name: 'to-int',
-      input_type: 'uint',
-      output_type: 'int',
-      signature: '(to-int u)',
-      description:
-        'Tries to convert the `uint` argument to an `int`. Will cause a runtime error and abort if the supplied argument is >= `pow(2, 127)`',
-      example: '(to-int u238) ;; Returns 238',
-    },
-    {
-      name: 'to-uint',
-      input_type: 'int',
-      output_type: 'uint',
-      signature: '(to-uint i)',
-      description:
-        'Tries to convert the `int` argument to a `uint`. Will cause a runtime error and abort if the supplied argument is negative.',
-      example: '(to-uint 238) ;; Returns u238',
-    },
-    {
-      name: 'mod',
-      input_type: 'int, int | uint, uint',
-      output_type: 'int | uint',
-      signature: '(mod i1 i2)',
-      description:
-        'Returns the integer remainder from integer dividing `i1` by `i2`. In the event of a division by zero, throws a runtime error.',
-      example: '(mod 2 3) ;; Returns 2\n(mod 5 2) ;; Returns 1\n(mod 7 1) ;; Returns 0\n',
-    },
-    {
-      name: 'pow',
-      input_type: 'int, int | uint, uint',
-      output_type: 'int | uint',
-      signature: '(pow i1 i2)',
-      description:
-        'Returns the result of raising `i1` to the power of `i2`. In the event of an _overflow_, throws a runtime error.',
-      example: '(pow 2 3) ;; Returns 8\n(pow 2 2) ;; Returns 4\n(pow 7 1) ;; Returns 7\n',
-    },
-    {
-      name: 'sqrti',
-      input_type: 'int | uint',
-      output_type: 'int | uint',
-      signature: '(sqrti n)',
-      description:
-        'Returns the largest integer that is less than or equal to the square root of `n`.  Fails on a negative numbers.',
-      example:
-        '(sqrti u11) ;; Returns u3\n(sqrti 1000000) ;; Returns 1000\n(sqrti u1) ;; Returns u1\n(sqrti 0) ;; Returns 0\n',
-    },
-    {
-      name: 'log2',
-      input_type: 'int | uint',
-      output_type: 'int | uint',
-      signature: '(log2 n)',
-      description:
-        'Returns the power to which the number 2 must be raised to to obtain the value `n`, rounded down to the nearest integer. Fails on a negative numbers.',
-      example:
-        '(log2 u8) ;; Returns u3\n(log2 8) ;; Returns 3\n(log2 u1) ;; Returns u0\n(log2 1000) ;; Returns 9\n',
-    },
-    {
-      name: 'xor',
-      input_type: 'int, int | uint, uint',
-      output_type: 'int | uint',
-      signature: '(xor i1 i2)',
-      description: "Returns the result of bitwise exclusive or'ing `i1` with `i2`.",
-      example: '(xor 1 2) ;; Returns 3\n(xor 120 280) ;; Returns 352\n',
-    },
-    {
-      name: 'and',
-      input_type: 'bool, ...',
-      output_type: 'bool',
-      signature: '(and b1 b2 ...)',
-      description:
-        'Returns `true` if all boolean inputs are `true`. Importantly, the supplied arguments are evaluated in-order and lazily. Lazy evaluation means that if one of the arguments returns `false`, the function short-circuits, and no subsequent arguments are evaluated.',
-      example:
-        '(and true false) ;; Returns false\n(and (is-eq (+ 1 2) 1) (is-eq 4 4)) ;; Returns false\n(and (is-eq (+ 1 2) 3) (is-eq 4 4)) ;; Returns true\n',
-    },
-    {
-      name: 'or',
-      input_type: 'bool, ...',
-      output_type: 'bool',
-      signature: '(or b1 b2 ...)',
-      description:
-        'Returns `true` if any boolean inputs are `true`. Importantly, the supplied arguments are evaluated in-order and lazily. Lazy evaluation means that if one of the arguments returns `false`, the function short-circuits, and no subsequent arguments are evaluated.',
-      example:
-        '(or true false) ;; Returns true\n(or (is-eq (+ 1 2) 1) (is-eq 4 4)) ;; Returns true\n(or (is-eq (+ 1 2) 1) (is-eq 3 4)) ;; Returns false\n(or (is-eq (+ 1 2) 3) (is-eq 4 4)) ;; Returns true\n',
-    },
-    {
-      name: 'not',
-      input_type: 'bool',
-      output_type: 'bool',
-      signature: '(not b1)',
-      description: 'Returns the inverse of the boolean input.',
-      example: '(not true) ;; Returns false\n(not (is-eq 1 2)) ;; Returns true\n',
-    },
-    {
-      name: 'is-eq',
-      input_type: 'A, A, ...',
-      output_type: 'bool',
-      signature: '(is-eq v1 v2...)',
-      description:
-        'Compares the inputted values, returning `true` if they are all equal. Note that \n_unlike_ the `(and ...)` function, `(is-eq ...)` will _not_ short-circuit. All values supplied to\nis-eq _must_ be the same type.',
-      example:
-        '(is-eq 1 1) ;; Returns true\n(is-eq true false) ;; Returns false\n(is-eq "abc" 234 234) ;; Throws type error\n',
-    },
-    {
-      name: 'if',
-      input_type: 'bool, A, A',
-      output_type: 'A',
-      signature: '(if bool1 expr1 expr2)',
-      description:
-        'The `if` function admits a boolean argument and two expressions\nwhich must return the same type. In the case that the boolean input is `true`, the\n`if` function evaluates and returns `expr1`. If the boolean input is `false`, the\n`if` function evaluates and returns `expr2`.',
-      example: '(if true 1 2) ;; Returns 1\n(if (> 1 2) 1 2) ;; Returns 2',
-    },
-    {
-      name: 'let',
-      input_type: '((name2 AnyType) (name2 AnyType) ...), AnyType, ... A',
-      output_type: 'A',
-      signature: '(let ((name1 expr1) (name2 expr2) ...) expr-body1 expr-body2 ... expr-body-last)',
-      description:
-        'The `let` function accepts a list of `variable name` and `expression` pairs,\nevaluating each expression and _binding_ it to the corresponding variable name.\n`let` bindings are sequential: when a `let` binding is evaluated, it may refer to prior binding.\nThe _context_ created by this set of bindings is used for evaluating its body expressions.\n The let expression returns the value of the last such body expression.\nNote: intermediary statements returning a response type must be checked',
-      example:
-        '(let ((a 2) (b (+ 5 6 7))) (print a) (print b) (+ a b)) ;; Returns 20\n(let ((a 5) (c (+ a 1)) (d (+ c 1)) (b (+ a c d))) (print a) (print b) (+ a b)) ;; Returns 23',
-    },
-    {
-      name: 'map',
-      input_type:
-        'Function(A, B, ..., N) -> X, (list A1 A2 ... Am), (list B1 B2 ... Bm), ..., (list N1 N2 ... Nm)',
-      output_type: '(list X)',
-      signature: '(map func list-A list-B ... list-N)',
-      description:
-        'The `map` function applies the input function `func` to each element of the\ninput lists, and outputs a list containing the _outputs_ from those function applications.',
-      example:
-        '\n(map not (list true false true false)) ;; Returns (false true false true)\n(map + (list 1 2 3) (list 1 2 3) (list 1 2 3)) ;; Returns (3 6 9)',
-    },
-    {
-      name: 'fold',
-      input_type: 'Function(A, B) -> B, (list A), B',
-      output_type: 'B',
-      signature: '(fold func list initial-value)',
-      description:
-        'The `fold` special form applies the input function `func` to each element of the\ninput list _and_ the output of the previous application of the `fold` function. When invoked on\nthe first list element, it uses the `initial-value` as the second input. `fold` returns the last\nvalue returned by the successive applications. Note that the first argument is not evaluated thus\nhas to be a literal function name.',
-      example:
-        '(fold * (list 2 2 2) 1) ;; Returns 8\n(fold * (list 2 2 2) 0) ;; Returns 0\n;; calculates (- 11 (- 7 (- 3 2)))\n(fold - (list 3 7 11) 2) ;; Returns 5 \n(fold concat "cdef" "ab")   ;; Returns "fedcab"\n(fold concat (list "cd" "ef") "ab")   ;; Returns "efcdab"',
-    },
-    {
-      name: 'append',
-      input_type: 'list A, A',
-      output_type: 'list',
-      signature: '(append (list 1 2 3 4) 5)',
-      description:
-        'The `append` function takes a list and another value with the same entry type,\nand outputs a list of the same type with max_len += 1.',
-      example: '(append (list 1 2 3 4) 5) ;; Returns (1 2 3 4 5)',
-    },
-    {
-      name: 'concat',
-      input_type: '(buff, buff)|(list, list)',
-      output_type: 'buff|list',
-      signature: '(concat buff-a buff-b)',
-      description:
-        'The `concat` function takes two buffers or two lists with the same entry type,\nand returns a concatenated buffer or list of the same entry type, with max_len = max_len_a + max_len_b.',
-      example: '(concat "hello " "world") ;; Returns "hello world"',
-    },
-    {
-      name: 'as-max-len?',
-      input_type: 'buff|list, uint',
-      output_type: '(optional buff|list)',
-      signature: '(as-max-len? buffer u10)',
-      description:
-        'The `as-max-len?` function takes a length N (must be a literal) and a buffer or list argument, which must be typed as a list\nor buffer of length M and outputs that same list or buffer, but typed with max length N.\n\nThis function returns an optional type with the resulting sequence. If the input sequence is less than\nor equal to the supplied max-len, it returns `(some <sequence>)`, otherwise it returns `none`.',
-      example:
-        '(as-max-len? (list 2 2 2) u3) ;; Returns (some (2 2 2))\n(as-max-len? (list 1 2 3) u2) ;; Returns none',
-    },
-    {
-      name: 'len',
-      input_type: 'buff|list',
-      output_type: 'uint',
-      signature: '(len buffer)',
-      description: 'The `len` function returns the length of a given buffer or list.',
-      example: '(len "blockstack") ;; Returns u10\n(len (list 1 2 3 4 5)) ;; Returns u5\n',
-    },
-    {
-      name: 'element-at',
-      input_type: 'buff|list A, uint',
-      output_type: '(optional buff|A)',
-      signature: '(element-at sequence index)',
-      description:
-        'The `element-at` function returns the element at `index` in the provided sequence.\nIf `index` is greater than or equal to `(len sequence)`, this function returns `none`.\nFor strings and buffers, this function will return 1-length strings or buffers.',
-      example:
-        '(element-at "blockstack" u5) ;; Returns (some "s")\n(element-at (list 1 2 3 4 5) u5) ;; Returns none\n(element-at (list 1 2 3 4 5) (+ u1 u2)) ;; Returns (some 4)\n(element-at "abcd" u1) ;; Returns (some "b")\n(element-at 0xfb01 u1) ;; Returns (some 0x01)\n',
-    },
-    {
-      name: 'index-of',
-      input_type: 'buff|list A, buff|A',
-      output_type: '(optional uint)',
-      signature: '(index-of sequence item)',
-      description:
-        'The `index-of` function returns the first index at which `item` can be\nfound in the provided sequence (using `is-eq` checks).\n\nIf this item is not found in the sequence (or an empty string/buffer is supplied), this\nfunction returns `none`.',
-      example:
-        '(index-of "blockstack" "b") ;; Returns (some u0)\n(index-of "blockstack" "k") ;; Returns (some u4)\n(index-of "blockstack" "") ;; Returns none\n(index-of (list 1 2 3 4 5) 6) ;; Returns none\n(index-of 0xfb01 0x01) ;; Returns (some u1)\n',
-    },
-    {
-      name: 'list',
-      input_type: 'A, ...',
-      output_type: '(list A)',
-      signature: '(list expr1 expr2 expr3 ...)',
-      description:
-        'The `list` function constructs a list composed of the inputted values. Each\nsupplied value must be of the same type.',
-      example: '(list (+ 1 2) 4 5) ;; Returns (3 4 5)',
-    },
-    {
-      name: 'var-get',
-      input_type: 'VarName',
-      output_type: 'A',
-      signature: '(var-get var-name)',
-      description:
-        "The `var-get` function looks up and returns an entry from a contract's data map.\nThe value is looked up using `var-name`.",
-      example: '(define-data-var cursor int 6)\n(var-get cursor) ;; Returns 6',
-    },
-    {
-      name: 'var-set',
-      input_type: 'VarName, AnyType',
-      output_type: 'bool',
-      signature: '(var-set var-name expr1)',
-      description:
-        'The `var-set` function sets the value associated with the input variable to the\ninputted value.',
-      example:
-        '\n(define-data-var cursor int 6)\n(var-get cursor) ;; Returns 6\n(var-set cursor (+ (var-get cursor) 1)) ;; Returns true\n(var-get cursor) ;; Returns 7',
-    },
-    {
-      name: 'map-get?',
-      input_type: 'MapName, tuple',
-      output_type: '(optional (tuple))',
-      signature: '(map-get? map-name key-tuple)',
-      description:
-        "The `map-get?` function looks up and returns an entry from a contract's data map.\nThe value is looked up using `key-tuple`.\nIf there is no value associated with that key in the data map, the function returns a `none` option. Otherwise,\nit returns `(some value)`.",
-      example:
-        '(define-map names-map { name: (string-ascii 10) } { id: int })\n(map-set names-map { name: "blockstack" } { id: 1337 })\n(map-get? names-map (tuple (name "blockstack"))) ;; Returns (some (tuple (id 1337)))\n(map-get? names-map { name: "blockstack" }) ;; Same command, using a shorthand for constructing the tuple\n',
-    },
-    {
-      name: 'map-set',
-      input_type: 'MapName, tuple_A, tuple_B',
-      output_type: 'bool',
-      signature: '(map-set map-name key-tuple value-tuple)',
-      description:
-        'The `map-set` function sets the value associated with the input key to the\ninputted value. This function performs a _blind_ update; whether or not a value is already associated\nwith the key, the function overwrites that existing association.\n\nNote: the `value-tuple` requires 1 additional byte for storage in the materialized blockchain state,\nand therefore the maximum size of a value that may be inserted into a map is MAX_CLARITY_VALUE - 1.',
-      example:
-        '(define-map names-map { name: (string-ascii 10) } { id: int })\n(map-set names-map { name: "blockstack" } { id: 1337 }) ;; Returns true\n(map-set names-map (tuple (name "blockstack")) (tuple (id 1337))) ;; Same command, using a shorthand for constructing the tuple\n',
-    },
-    {
-      name: 'map-insert',
-      input_type: 'MapName, tuple_A, tuple_B',
-      output_type: 'bool',
-      signature: '(map-insert map-name key-tuple value-tuple)',
-      description:
-        'The `map-insert` function sets the value associated with the input key to the\ninputted value if and only if there is not already a value associated with the key in the map.\nIf an insert occurs, the function returns `true`. If a value already existed for\nthis key in the data map, the function returns `false`.\n\nNote: the `value-tuple` requires 1 additional byte for storage in the materialized blockchain state,\nand therefore the maximum size of a value that may be inserted into a map is MAX_CLARITY_VALUE - 1.',
-      example:
-        '(define-map names-map { name: (string-ascii 10) } { id: int })\n(map-insert names-map { name: "blockstack" } { id: 1337 }) ;; Returns true\n(map-insert names-map { name: "blockstack" } { id: 1337 }) ;; Returns false\n(map-insert names-map (tuple (name "blockstack")) (tuple (id 1337))) ;; Same command, using a shorthand for constructing the tuple\n',
-    },
-    {
-      name: 'map-delete',
-      input_type: 'MapName, tuple',
-      output_type: 'bool',
-      signature: '(map-delete map-name key-tuple)',
-      description:
-        'The `map-delete` function removes the value associated with the input key for\nthe given map. If an item exists and is removed, the function returns `true`.\nIf a value did not exist for this key in the data map, the function returns `false`.',
-      example:
-        '(define-map names-map { name: (string-ascii 10) } { id: int })\n(map-insert names-map { name: "blockstack" } { id: 1337 }) ;; Returns true\n(map-delete names-map { name: "blockstack" }) ;; Returns true\n(map-delete names-map { name: "blockstack" }) ;; Returns false\n(map-delete names-map (tuple (name "blockstack"))) ;; Same command, using a shorthand for constructing the tuple\n',
-    },
-    {
-      name: 'tuple',
-      input_type: '(key-name A), (key-name-2 B), ...',
-      output_type: '(tuple (key-name A) (key-name-2 B) ...)',
-      signature: '(tuple (key0 expr0) (key1 expr1) ...)',
-      description:
-        "The `tuple` special form constructs a typed tuple from the supplied key and expression pairs.\nA `get` function can use typed tuples as input to select specific values from a given tuple.\nKey names may not appear multiple times in the same tuple definition. Supplied expressions are evaluated and\nassociated with the expressions' paired key name.\n\nThere is a shorthand using curly brackets of the form {key0: expr0, key1: expr, ...}",
-      example:
-        '(tuple (name "blockstack") (id 1337)) ;; using tuple\n    {name: "blockstack", id: 1337} ;; using curly brackets',
-    },
-    {
-      name: 'get',
-      input_type: 'KeyName, (tuple) | (optional (tuple))',
-      output_type: 'A',
-      signature: '(get key-name tuple)',
-      description:
-        'The `get` function fetches the value associated with a given key from the supplied typed tuple.\nIf an `Optional` value is supplied as the inputted tuple, `get` returns an `Optional` type of the specified key in\nthe tuple. If the supplied option is a `(none)` option, get returns `(none)`.',
-      example:
-        '(define-map names-map { name: (string-ascii 12) } { id: int })\n(map-insert names-map { name: "blockstack" } { id: 1337 }) ;; Returns true\n(get id (tuple (name "blockstack") (id 1337))) ;; Returns 1337\n(get id (map-get? names-map (tuple (name "blockstack")))) ;; Returns (some 1337)\n(get id (map-get? names-map (tuple (name "non-existent")))) ;; Returns none\n',
-    },
-    {
-      name: 'merge',
-      input_type: 'tuple, tuple',
-      output_type: 'tuple',
-      signature: '(merge tuple { key1: val1 })',
-      description:
-        'The `merge` function returns a new tuple with the combined fields, without mutating the supplied tuples.',
-      example:
-        '(define-map users { id: int } { name: (string-ascii 12), address: (optional principal) })\n(map-insert users { id: 1337 } { name: "john", address: none }) ;; Returns true\n(let ((user (unwrap-panic (map-get? users { id: 1337 }))))\n    (merge user { address: (some \'SPAXYA5XS51713FDTQ8H94EJ4V579CXMTRNBZKSF) })) ;; Returns (tuple (address (some SPAXYA5XS51713FDTQ8H94EJ4V579CXMTRNBZKSF)) (name "john"))',
-    },
-    {
-      name: 'begin',
-      input_type: 'AnyType, ... A',
-      output_type: 'A',
-      signature: '(begin expr1 expr2 expr3 ... expr-last)',
-      description:
-        'The `begin` function evaluates each of its input expressions, returning the\nreturn value of the last such expression.\nNote: intermediary statements returning a response type must be checked.',
-      example: '(begin (+ 1 2) 4 5) ;; Returns 5',
-    },
-    {
-      name: 'hash160',
-      input_type: 'buff|uint|int',
-      output_type: '(buff 20)',
-      signature: '(hash160 value)',
-      description:
-        'The `hash160` function computes `RIPEMD160(SHA256(x))` of the inputted value.\nIf an integer (128 bit) is supplied the hash is computed over the little-endian representation of the\ninteger.',
-      example: '(hash160 0) ;; Returns 0xe4352f72356db555721651aa612e00379167b30f',
-    },
-    {
-      name: 'sha256',
-      input_type: 'buff|uint|int',
-      output_type: '(buff 32)',
-      signature: '(sha256 value)',
-      description:
-        'The `sha256` function computes `SHA256(x)` of the inputted value.\nIf an integer (128 bit) is supplied the hash is computed over the little-endian representation of the\ninteger.',
-      example:
-        '(sha256 0) ;; Returns 0x374708fff7719dd5979ec875d56cd2286f6d3cf7ec317a3b25632aab28ec37bb',
-    },
-    {
-      name: 'sha512',
-      input_type: 'buff|uint|int',
-      output_type: '(buff 64)',
-      signature: '(sha512 value)',
-      description:
-        'The `sha512` function computes `SHA512(x)` of the inputted value.\nIf an integer (128 bit) is supplied the hash is computed over the little-endian representation of the\ninteger.',
-      example:
-        '(sha512 1) ;; Returns 0x6fcee9a7b7a7b821d241c03c82377928bc6882e7a08c78a4221199bfa220cdc55212273018ee613317c8293bb8d1ce08d1e017508e94e06ab85a734c99c7cc34',
-    },
-    {
-      name: 'sha512/256',
-      input_type: 'buff|uint|int',
-      output_type: '(buff 32)',
-      signature: '(sha512/256 value)',
-      description:
-        'The `sha512/256` function computes `SHA512/256(x)` (the SHA512 algorithm with the 512/256 initialization vector, truncated\nto 256 bits) of the inputted value.\nIf an integer (128 bit) is supplied the hash is computed over the little-endian representation of the\ninteger.',
-      example:
-        '(sha512/256 1) ;; Returns 0x515a7e92e7c60522db968d81ff70b80818fc17aeabbec36baf0dda2812e94a86',
-    },
-    {
-      name: 'keccak256',
-      input_type: 'buff|uint|int',
-      output_type: '(buff 32)',
-      signature: '(keccak256 value)',
-      description:
-        'The `keccak256` function computes `KECCAK256(value)` of the inputted value.\nNote that this differs from the `NIST SHA-3` (that is, FIPS 202) standard. If an integer (128 bit)\nis supplied the hash is computed over the little-endian representation of the integer.',
-      example:
-        '(keccak256 0) ;; Returns 0xf490de2920c8a35fabeb13208852aa28c76f9be9b03a4dd2b3c075f7a26923b4',
-    },
-    {
-      name: 'secp256k1-recover?',
-      input_type: '(buff 32), (buff 65)',
-      output_type: '(response (buff 33) uint)',
-      signature: '(secp256k1-recover? message-hash signature)',
-      description:
-        'The `secp256k1-recover?` function recovers the public key used to sign the message  which sha256 is `message-hash`\n    with the provided `signature`.\n    If the signature does not match, it will return the error code `(err u1).`.\n    If the signature is invalid, it will return the error code `(err u2).`.\n    The signature includes 64 bytes plus an additional recovery id (00..03) for a total of 65 bytes.',
-      example:
-        '(secp256k1-recover? 0xde5b9eb9e7c5592930eb2e30a01369c36586d872082ed8181ee83d2a0ec20f04\n 0x8738487ebe69b93d8e51583be8eee50bb4213fc49c767d329632730cc193b873554428fc936ca3569afc15f1c9365f6591d6251a89fee9c9ac661116824d3a1301)\n ;; Returns (ok 0x03adb8de4bfb65db2cfd6120d55c6526ae9c52e675db7e47308636534ba7786110)',
-    },
-    {
-      name: 'secp256k1-verify',
-      input_type: '(buff 32), (buff 64) | (buff 65), (buff 33)',
-      output_type: 'bool',
-      signature: '(secp256k1-verify message-hash signature public-key)',
-      description:
-        'The `secp256k1-verify` function verifies that the provided signature of the message-hash\nwas signed with the private key that generated the public key.\nThe `message-hash` is the `sha256` of the message.\nThe signature includes 64 bytes plus an optional additional recovery id (00..03) for a total of 64 or 65 bytes.',
-      example:
-        '(secp256k1-verify 0xde5b9eb9e7c5592930eb2e30a01369c36586d872082ed8181ee83d2a0ec20f04\n 0x8738487ebe69b93d8e51583be8eee50bb4213fc49c767d329632730cc193b873554428fc936ca3569afc15f1c9365f6591d6251a89fee9c9ac661116824d3a1301\n 0x03adb8de4bfb65db2cfd6120d55c6526ae9c52e675db7e47308636534ba7786110) ;; Returns true\n(secp256k1-verify 0xde5b9eb9e7c5592930eb2e30a01369c36586d872082ed8181ee83d2a0ec20f04\n 0x8738487ebe69b93d8e51583be8eee50bb4213fc49c767d329632730cc193b873554428fc936ca3569afc15f1c9365f6591d6251a89fee9c9ac661116824d3a13\n 0x03adb8de4bfb65db2cfd6120d55c6526ae9c52e675db7e47308636534ba7786110) ;; Returns true\n(secp256k1-verify 0x0000000000000000000000000000000000000000000000000000000000000000\n 0x0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000\n 0x03adb8de4bfb65db2cfd6120d55c6526ae9c52e675db7e47308636534ba7786110) ;; Returns false',
-    },
-    {
-      name: 'print',
-      input_type: 'A',
-      output_type: 'A',
-      signature: '(print expr)',
-      description:
-        'The `print` function evaluates and returns its input expression. On Stacks Core\nnodes configured for development (as opposed to production mining nodes), this function prints the resulting value to `STDOUT` (standard output).',
-      example: '(print (+ 1 2 3)) ;; Returns 6',
-    },
-    {
-      name: 'contract-call?',
-      input_type: 'ContractName, PublicFunctionName, Arg0, ...',
-      output_type: '(response A B)',
-      signature: '(contract-call? .contract-name function-name arg0 arg1 ...)',
-      description:
-        'The `contract-call?` function executes the given public function of the given contract.\nYou _may not_ use this function to call a public function defined in the current contract. If the public\nfunction returns _err_, any database changes resulting from calling `contract-call?` are aborted.\nIf the function returns _ok_, database changes occurred.',
-      example:
-        '\n;; instantiate the sample-contracts/tokens.clar contract first!\n(as-contract (contract-call? .tokens mint! u19)) ;; Returns (ok u19)',
-    },
-    {
-      name: 'as-contract',
-      input_type: 'A',
-      output_type: 'A',
-      signature: '(as-contract expr)',
-      description:
-        "The `as-contract` function switches the current context's `tx-sender` value to the _contract's_\nprincipal and executes `expr` with that context. It returns the resulting value of `expr`.",
-      example:
-        '(as-contract tx-sender) ;; Returns S1G2081040G2081040G2081040G208105NK8PE5.docs-test',
-    },
-    {
-      name: 'contract-of',
-      input_type: 'Trait',
-      output_type: 'principal',
-      signature: '(contract-of .contract-name)',
-      description:
-        'The `contract-of` function returns the principal of the contract implementing the trait.',
-      example:
-        "\n(use-trait token-a-trait 'SPAXYA5XS51713FDTQ8H94EJ4V579CXMTRNBZKSF.token-a.token-trait)\n(define-public (forward-get-balance (user principal) (contract <token-a-trait>))\n  (begin\n    (ok (contract-of contract)))) ;; returns the principal of the contract implementing <token-a-trait>\n",
-    },
-    {
-      name: 'principal-of?',
-      input_type: '(buff 33)',
-      output_type: '(response principal uint)',
-      signature: '(principal-of? public-key)',
-      description:
-        'The `principal-of?` function returns the principal derived from the provided public key.\n    If the `public-key` is invalid, it will return the error code `(err u1).`.\n    ',
-      example:
-        '(principal-of? 0x03adb8de4bfb65db2cfd6120d55c6526ae9c52e675db7e47308636534ba7786110) ;; Returns (ok ST1AW6EKPGT61SQ9FNVDS17RKNWT8ZP582VF9HSCP)',
-    },
-    {
-      name: 'at-block',
-      input_type: '(buff 32), A',
-      output_type: 'A',
-      signature: '(at-block id-block-hash expr)',
-      description:
-        'The `at-block` function evaluates the expression `expr` _as if_ it were evaluated at the end of the\nblock indicated by the _block-hash_ argument. The `expr` closure must be read-only.\n\nNote: The block identifying hash must be a hash returned by the `id-header-hash` block information\nproperty. This hash uniquely identifies Stacks blocks and is unique across Stacks forks. While the hash returned by\n`header-hash` is unique within the context of a single fork, it is not unique across Stacks forks.\n\nThe function returns the result of evaluating `expr`.\n',
-      example:
-        "\n(define-data-var data int 1)\n(at-block 0x0000000000000000000000000000000000000000000000000000000000000000 block-height) ;; Returns u0\n(at-block (get-block-info? id-header-hash 0) (var-get data)) ;; Throws NoSuchDataVariable because `data` wasn't initialized at block height 0",
-    },
-    {
-      name: 'get-block-info?',
-      input_type: 'BlockInfoPropertyName, BlockHeightInt',
-      output_type: '(optional buff) | (optional uint)',
-      signature: '(get-block-info? prop-name block-height-expr)',
-      description:
-        'The `get-block-info?` function fetches data for a block of the given block height. The\nvalue and type returned are determined by the specified `BlockInfoPropertyName`. If the provided `BlockHeightInt` does\nnot correspond to an existing block prior to the current block, the function returns `none`. The currently available property names\nare `time`, `header-hash`, `burnchain-header-hash`, `id-header-hash`, `miner-address`, and `vrf-seed`.\n\nThe `time` property returns an integer value of the block header time field. This is a Unix epoch timestamp in seconds\nwhich roughly corresponds to when the block was mined. **Warning**: this does not increase monotonically with each block\nand block times are accurate only to within two hours. See [BIP113](https://github.com/bitcoin/bips/blob/master/bip-0113.mediawiki) for more information.\n\nThe `header-hash`, `burnchain-header-hash`, `id-header-hash`, and `vrf-seed` properties return a 32-byte buffer.\n\nThe `miner-address` property returns a `principal` corresponding to the miner of the given block.\n\nThe `id-header-hash` is the block identifier value that must be used as input to the `at-block` function.\n',
-      example:
-        '(get-block-info? time u0) ;; Returns (some u1557860301)\n(get-block-info? header-hash u0) ;; Returns (some 0x374708fff7719dd5979ec875d56cd2286f6d3cf7ec317a3b25632aab28ec37bb)\n(get-block-info? vrf-seed u0) ;; Returns (some 0xf490de2920c8a35fabeb13208852aa28c76f9be9b03a4dd2b3c075f7a26923b4)\n',
-    },
-    {
-      name: 'err',
-      input_type: 'A',
-      output_type: '(response A B)',
-      signature: '(err value)',
-      description:
-        'The `err` function constructs a response type from the input value. Use `err` for\ncreating return values in public functions. An _err_ value indicates that any database changes during\nthe processing of the function should be rolled back.',
-      example: '(err true) ;; Returns (err true)',
-    },
-    {
-      name: 'ok',
-      input_type: 'A',
-      output_type: '(response A B)',
-      signature: '(ok value)',
-      description:
-        'The `ok` function constructs a response type from the input value. Use `ok` for\ncreating return values in public functions. An _ok_ value indicates that any database changes during\nthe processing of the function should materialize.',
-      example: '(ok 1) ;; Returns (ok 1)',
-    },
-    {
-      name: 'some',
-      input_type: 'A',
-      output_type: '(optional A)',
-      signature: '(some value)',
-      description: 'The `some` function constructs a `optional` type from the input value.',
-      example: '(some 1) ;; Returns (some 1)\n(is-none (some 2)) ;; Returns false',
-    },
-    {
-      name: 'default-to',
-      input_type: 'A, (optional A)',
-      output_type: 'A',
-      signature: '(default-to default-value option-value)',
-      description:
-        "The `default-to` function attempts to 'unpack' the second argument: if the argument is\na `(some ...)` option, it returns the inner value of the option. If the second argument is a `(none)` value,\n`default-to` it returns the value of `default-value`.",
-      example:
-        '\n(define-map names-map { name: (string-ascii 12) } { id: int })\n(map-set names-map { name: "blockstack" } { id: 1337 })\n(default-to 0 (get id (map-get? names-map (tuple (name "blockstack"))))) ;; Returns 1337\n(default-to 0 (get id (map-get? names-map (tuple (name "non-existant"))))) ;; Returns 0\n',
-    },
-    {
-      name: 'asserts!',
-      input_type: 'bool, C',
-      output_type: 'bool',
-      signature: '(asserts! bool-expr thrown-value)',
-      description:
-        'The `asserts!` function admits a boolean argument and asserts its evaluation:\nif bool-expr is `true`, `asserts!` returns `true` and proceeds in the program execution.\nIf the supplied argument is returning a false value, `asserts!` _returns_ `thrown-value` and exits the current\ncontrol-flow.',
-      example: '(asserts! (is-eq 1 1) (err 1)) ;; Returns true',
-    },
-    {
-      name: 'unwrap!',
-      input_type: '(optional A) | (response A B), C',
-      output_type: 'A',
-      signature: '(unwrap! option-input thrown-value)',
-      description:
-        "The `unwrap!` function attempts to 'unpack' the first argument: if the argument is\nan option type, and the argument is a `(some ...)` option, `unwrap!` returns the inner value of the\noption. If the argument is a response type, and the argument is an `(ok ...)` response, `unwrap!` returns\n the inner value of the `ok`. If the supplied argument is either an `(err ...)` or a `(none)` value,\n`unwrap!` _returns_ `thrown-value` from the current function and exits the current control-flow.",
-      example:
-        '\n(define-map names-map { name: (string-ascii 12) } { id: int })\n(map-set names-map { name: "blockstack" } { id: 1337 })\n(define-private (get-name-or-err (name (string-ascii 12)))\n  (let ((raw-name (unwrap! (map-get? names-map { name: name }) (err 1))))\n       (ok raw-name)))\n\n(get-name-or-err "blockstack") ;; Returns (ok (tuple (id 1337)))\n(get-name-or-err "non-existant") ;; Returns (err 1)',
-    },
-    {
-      name: 'unwrap-err!',
-      input_type: '(response A B), C',
-      output_type: 'B',
-      signature: '(unwrap-err! response-input thrown-value)',
-      description:
-        "The `unwrap-err!` function attempts to 'unpack' the first argument: if the argument\nis an `(err ...)` response, `unwrap-err!` returns the inner value of the `err`.\nIf the supplied argument is an `(ok ...)` value,\n`unwrap-err!` _returns_ `thrown-value` from the current function and exits the current control-flow.",
-      example: '(unwrap-err! (err 1) false) ;; Returns 1',
-    },
-    {
-      name: 'unwrap-panic',
-      input_type: '(optional A) | (response A B)',
-      output_type: 'A',
-      signature: '(unwrap-panic option-input)',
-      description:
-        "The `unwrap` function attempts to 'unpack' its argument: if the argument is\nan option type, and the argument is a `(some ...)` option, this function returns the inner value of the\noption. If the argument is a response type, and the argument is an `(ok ...)` response, it returns\n the inner value of the `ok`. If the supplied argument is either an `(err ...)` or a `(none)` value,\n`unwrap` throws a runtime error, aborting any further processing of the current transaction.",
-      example:
-        '\n(define-map names-map { name: (string-ascii 12) } { id: int })\n(map-set names-map { name: "blockstack" } { id: 1337 })\n(unwrap-panic (map-get? names-map { name: "blockstack" })) ;; Returns (tuple (id 1337))\n(unwrap-panic (map-get? names-map { name: "non-existant" })) ;; Throws a runtime exception\n',
-    },
-    {
-      name: 'unwrap-err-panic',
-      input_type: '(response A B)',
-      output_type: 'B',
-      signature: '(unwrap-err-panic response-input)',
-      description:
-        "The `unwrap-err` function attempts to 'unpack' the first argument: if the argument\nis an `(err ...)` response, `unwrap` returns the inner value of the `err`.\nIf the supplied argument is an `(ok ...)` value,\n`unwrap-err` throws a runtime error, aborting any further processing of the current transaction.",
-      example:
-        '(unwrap-err-panic (err 1)) ;; Returns 1\n(unwrap-err-panic (ok 1)) ;; Throws a runtime exception',
-    },
-    {
-      name: 'match',
-      input_type:
-        '(optional A) name expression expression | (response A B) name expression name expression',
-      output_type: 'C',
-      signature:
-        '(match opt-input some-binding-name some-branch none-branch) |\n(match-resp input ok-binding-name ok-branch err-binding-name err-branch)',
-      description:
-        'The `match` function is used to test and destructure optional and response types.\n\nIf the `input` is an optional, it tests whether the provided\n`input` is a `some` or `none` option, and evaluates `some-branch` or\n`none-branch` in each respective case.\n\nWithin the `some-branch`, the _contained value_ of the `input`\nargument is bound to the provided `some-binding-name` name.\n\nOnly _one_ of the branches will be evaluated (similar to `if` statements).\n\nIf the `input` is a response, it tests whether the provided `input` is\nan `ok` or `err` response type, and evaluates `ok-branch` or\n`err-branch` in each respective case.\n\nWithin the `ok-branch`, the _contained ok value_ of the `input`\nargument is bound to the provided `ok-binding-name` name.\n\nWithin the `err-branch`, the _contained err value_ of the `input`\nargument is bound to the provided `err-binding-name` name.\n\nOnly _one_ of the branches will be evaluated (similar to `if` statements).\n\nNote: Type checking requires that the type of both the ok and err parts of the\nresponse object be determinable. For situations in which one of the parts of a response\nis untyped, you should use `unwrap-panic` or `unwrap-err-panic` instead of `match`.',
-      example:
-        '\n(define-private (add-10 (x (optional int)))\n  (match x\n  value (+ 10 value)\n  10))\n(add-10 (some 5)) ;; Returns 15\n(add-10 none) ;; Returns 10\n\n(define-private (add-or-pass-err (x (response int (string-ascii 10))) (to-add int))\n  (match x\n   value (+ to-add value)\n   err-value (err err-value)))\n(add-or-pass-err (ok 5) 20) ;; Returns 25\n(add-or-pass-err (err "ERROR") 20) ;; Returns (err "ERROR")\n',
-    },
-    {
-      name: 'try!',
-      input_type: '(optional A) | (response A B)',
-      output_type: 'A',
-      signature: '(try! option-input)',
-      description:
-        "The `try!` function attempts to 'unpack' the first argument: if the argument is\nan option type, and the argument is a `(some ...)` option, `try!` returns the inner value of the\noption. If the argument is a response type, and the argument is an `(ok ...)` response, `try!` returns\n the inner value of the `ok`. If the supplied argument is either an `(err ...)` or a `none` value,\n`try!` _returns_ either `none` or the `(err ...)` value from the current function and exits the current control-flow.",
-      example:
-        '\n(define-map names-map { name: (string-ascii 12) } { id: int })\n(map-set names-map { name: "blockstack" } { id: 1337 })\n(try! (map-get? names-map { name: "blockstack" })) ;; Returns (tuple (id 1337))\n(define-private (checked-even (x int))\n  (if (is-eq (mod x 2) 0)\n      (ok x)\n      (err false)))\n(define-private (double-if-even (x int))\n  (ok (* 2 (try! (checked-even x)))))\n(double-if-even 10) ;; Returns (ok 20)\n(double-if-even 3) ;; Returns (err false)\n',
-    },
-    {
-      name: 'is-ok',
-      input_type: '(response A B)',
-      output_type: 'bool',
-      signature: '(is-ok value)',
-      description:
-        '`is-ok` tests a supplied response value, returning `true` if the response was `ok`,\nand `false` if it was an `err`.',
-      example: '(is-ok (ok 1)) ;; Returns true\n(is-ok (err 1)) ;; Returns false',
-    },
-    {
-      name: 'is-none',
-      input_type: '(optional A)',
-      output_type: 'bool',
-      signature: '(is-none value)',
-      description:
-        '`is-none` tests a supplied option value, returning `true` if the option value is `(none)`,\nand `false` if it is a `(some ...)`.',
-      example:
-        '\n(define-map names-map { name: (string-ascii 12) } { id: int })\n(map-set names-map { name: "blockstack" } { id: 1337 })\n(is-none (get id (map-get? names-map { name: "blockstack" }))) ;; Returns false\n(is-none (get id (map-get? names-map { name: "non-existant" }))) ;; Returns true',
-    },
-    {
-      name: 'is-err',
-      input_type: '(response A B)',
-      output_type: 'bool',
-      signature: '(is-err value)',
-      description:
-        '`is-err` tests a supplied response value, returning `true` if the response was an `err`,\nand `false` if it was an `ok`.',
-      example: '(is-err (ok 1)) ;; Returns false\n(is-err (err 1)) ;; Returns true',
-    },
-    {
-      name: 'is-some',
-      input_type: '(optional A)',
-      output_type: 'bool',
-      signature: '(is-some value)',
-      description:
-        '`is-some` tests a supplied option value, returning `true` if the option value is `(some ...)`,\nand `false` if it is a `none`.',
-      example:
-        '\n(define-map names-map { name: (string-ascii 12) } { id: int })\n(map-set names-map { name: "blockstack" } { id: 1337 })\n(is-some (get id (map-get? names-map { name: "blockstack" }))) ;; Returns true\n(is-some (get id (map-get? names-map { name: "non-existant" }))) ;; Returns false',
-    },
-    {
-      name: 'filter',
-      input_type: 'Function(A) -> bool, (list A)',
-      output_type: '(list A)',
-      signature: '(filter func list)',
-      description:
-        'The `filter` function applies the input function `func` to each element of the\ninput list, and returns the same list with any elements removed for which the `func` returned `false`.',
-      example: '(filter not (list true false true false)) ;; Returns (false false)',
-    },
-    {
-      name: 'ft-get-balance',
-      input_type: 'TokenName, principal',
-      output_type: 'uint',
-      signature: '(ft-get-balance token-name principal)',
-      description:
-        '`ft-get-balance` returns `token-name` balance of the principal `principal`.\nThe token type must have been defined using `define-fungible-token`.',
-      example:
-        "\n(define-fungible-token stackaroo)\n(ft-mint? stackaroo u100 'SZ2J6ZY48GV1EZ5V2V5RB9MP66SW86PYKKQ9H6DPR)\n(ft-get-balance stackaroo 'SZ2J6ZY48GV1EZ5V2V5RB9MP66SW86PYKKQ9H6DPR) ;; Returns u100\n",
-    },
-    {
-      name: 'nft-get-owner?',
-      input_type: 'AssetName, A',
-      output_type: '(optional principal)',
-      signature: '(nft-get-owner? asset-class asset-identifier)',
-      description:
-        '`nft-get-owner?` returns the owner of an asset, identified by `asset-identifier`, or `none` if the asset does not exist.\nThe asset type must have been defined using `define-non-fungible-token`, and the supplied `asset-identifier` must be of the same type specified in\nthat definition.',
-      example:
-        '\n(define-non-fungible-token stackaroo (string-ascii 40))\n(nft-mint? stackaroo "Roo" \'SPAXYA5XS51713FDTQ8H94EJ4V579CXMTRNBZKSF)\n(nft-get-owner? stackaroo "Roo") ;; Returns (some SPAXYA5XS51713FDTQ8H94EJ4V579CXMTRNBZKSF)\n(nft-get-owner? stackaroo "Too") ;; Returns none\n',
-    },
-    {
-      name: 'ft-transfer?',
-      input_type: 'TokenName, uint, principal, principal',
-      output_type: '(response bool uint)',
-      signature: '(ft-transfer? token-name amount sender recipient)',
-      description:
-        '`ft-transfer?` is used to increase the token balance for the `recipient` principal for a token\ntype defined using `define-fungible-token` by debiting the `sender` principal.\n\nThis function returns (ok true) if the transfer is successful. In the event of an unsuccessful transfer it returns\none of the following error codes:\n\n`(err u1)` -- `sender` does not have enough balance to transfer\n`(err u2)` -- `sender` and `recipient` are the same principal\n`(err u3)` -- amount to send is non-positive\n',
-      example:
-        "\n(define-fungible-token stackaroo)\n(ft-mint? stackaroo u100 'SZ2J6ZY48GV1EZ5V2V5RB9MP66SW86PYKKQ9H6DPR)\n(ft-transfer? stackaroo u50 'SZ2J6ZY48GV1EZ5V2V5RB9MP66SW86PYKKQ9H6DPR 'SPAXYA5XS51713FDTQ8H94EJ4V579CXMTRNBZKSF) ;; Returns (ok true)\n(ft-transfer? stackaroo u60 'SZ2J6ZY48GV1EZ5V2V5RB9MP66SW86PYKKQ9H6DPR 'SPAXYA5XS51713FDTQ8H94EJ4V579CXMTRNBZKSF) ;; Returns (err u1)\n",
-    },
-    {
-      name: 'nft-transfer?',
-      input_type: 'AssetName, A, principal, principal',
-      output_type: '(response bool uint)',
-      signature: '(nft-transfer? asset-class asset-identifier sender recipient)',
-      description:
-        '`nft-transfer?` is used to change the owner of an asset identified by `asset-identifier`\nfrom `sender` to `recipient`. The `asset-class` must have been defined by `define-non-fungible-token` and `asset-identifier`\nmust be of the type specified in that definition.\n\nThis function returns (ok true) if the transfer is successful. In the event of an unsuccessful transfer it returns\none of the following error codes:\n\n`(err u1)` -- `sender` does not own the asset\n`(err u2)` -- `sender` and `recipient` are the same principal\n`(err u3)` -- asset identified by asset-identifier does not exist\n',
-      example:
-        '\n(define-non-fungible-token stackaroo (string-ascii 40))\n(nft-mint? stackaroo "Roo" \'SZ2J6ZY48GV1EZ5V2V5RB9MP66SW86PYKKQ9H6DPR)\n(nft-transfer? stackaroo "Roo" \'SZ2J6ZY48GV1EZ5V2V5RB9MP66SW86PYKKQ9H6DPR \'SPAXYA5XS51713FDTQ8H94EJ4V579CXMTRNBZKSF) ;; Returns (ok true)\n(nft-transfer? stackaroo "Roo" \'SZ2J6ZY48GV1EZ5V2V5RB9MP66SW86PYKKQ9H6DPR \'SPAXYA5XS51713FDTQ8H94EJ4V579CXMTRNBZKSF) ;; Returns (err u1)\n(nft-transfer? stackaroo "Stacka" \'SZ2J6ZY48GV1EZ5V2V5RB9MP66SW86PYKKQ9H6DPR \'SPAXYA5XS51713FDTQ8H94EJ4V579CXMTRNBZKSF) ;; Returns (err u3)\n',
-    },
-    {
-      name: 'nft-mint?',
-      input_type: 'AssetName, A, principal',
-      output_type: '(response bool uint)',
-      signature: '(nft-mint? asset-class asset-identifier recipient)',
-      description:
-        "`nft-mint?` is used to instantiate an asset and set that asset's owner to the `recipient` principal.\nThe asset must have been defined using `define-non-fungible-token`, and the supplied `asset-identifier` must be of the same type specified in\nthat definition.\n\nIf an asset identified by `asset-identifier` _already exists_, this function will return an error with the following error code:\n\n`(err u1)`\n\nOtherwise, on successfuly mint, it returns `(ok true)`.\n",
-      example:
-        '\n(define-non-fungible-token stackaroo (string-ascii 40))\n(nft-mint? stackaroo "Roo" \'SPAXYA5XS51713FDTQ8H94EJ4V579CXMTRNBZKSF) ;; Returns (ok true)\n',
-    },
-    {
-      name: 'ft-mint?',
-      input_type: 'TokenName, uint, principal',
-      output_type: '(response bool uint)',
-      signature: '(ft-mint? token-name amount recipient)',
-      description:
-        '`ft-mint?` is used to increase the token balance for the `recipient` principal for a token\ntype defined using `define-fungible-token`. The increased token balance is _not_ transfered from another principal, but\nrather minted.  \n\nIf a non-positive amount is provided to mint, this function returns `(err 1)`. Otherwise, on successfuly mint, it\nreturns `(ok true)`.\n',
-      example:
-        "\n(define-fungible-token stackaroo)\n(ft-mint? stackaroo u100 'SPAXYA5XS51713FDTQ8H94EJ4V579CXMTRNBZKSF) ;; Returns (ok true)\n",
-    },
-    {
-      name: 'ft-get-supply',
-      input_type: 'TokenName',
-      output_type: 'uint',
-      signature: '(ft-get-supply token-name)',
-      description:
-        '`ft-get-balance` returns `token-name` circulating supply.\nThe token type must have been defined using `define-fungible-token`.',
-      example:
-        "\n(define-fungible-token stackaroo)\n(ft-mint? stackaroo u100 'SZ2J6ZY48GV1EZ5V2V5RB9MP66SW86PYKKQ9H6DPR)\n(ft-get-supply stackaroo) ;; Returns u100\n",
-    },
-    {
-      name: 'ft-burn?',
-      input_type: 'TokenName, uint, principal',
-      output_type: '(response bool uint)',
-      signature: '(ft-burn? token-name amount sender)',
-      description:
-        '`ft-burn?` is used to decrease the token balance for the `sender` principal for a token\ntype defined using `define-fungible-token`. The decreased token balance is _not_ transfered to another principal, but\nrather destroyed, reducing the circulating supply.  \n\nIf a non-positive amount is provided to burn, this function returns `(err 1)`. Otherwise, on successfuly burn, it\nreturns `(ok true)`.\n',
-      example:
-        "\n(define-fungible-token stackaroo)\n(ft-mint? stackaroo u100 'SPAXYA5XS51713FDTQ8H94EJ4V579CXMTRNBZKSF) ;; Returns (ok true)\n(ft-burn? stackaroo u50 'SPAXYA5XS51713FDTQ8H94EJ4V579CXMTRNBZKSF) ;; Returns (ok true)\n",
-    },
-    {
-      name: 'nft-burn?',
-      input_type: 'AssetName, A, principal',
-      output_type: '(response bool uint)',
-      signature: '(nft-burn? asset-class asset-identifier recipient)',
-      description:
-        "`nft-burn?` is used to burn an asset and remove that asset's owner from the `recipient` principal.\nThe asset must have been defined using `define-non-fungible-token`, and the supplied `asset-identifier` must be of the same type specified in\nthat definition.\n\nIf an asset identified by `asset-identifier` _doesn't exist_, this function will return an error with the following error code:\n\n`(err u1)`\n\nOtherwise, on successfuly burn, it returns `(ok true)`.\n",
-      example:
-        '\n(define-non-fungible-token stackaroo (string-ascii 40))\n(nft-mint? stackaroo "Roo" \'SPAXYA5XS51713FDTQ8H94EJ4V579CXMTRNBZKSF) ;; Returns (ok true)\n(nft-burn? stackaroo "Roo" \'SPAXYA5XS51713FDTQ8H94EJ4V579CXMTRNBZKSF) ;; Returns (ok true)\n',
-    },
-    {
-      name: 'stx-get-balance',
-      input_type: 'principal',
-      output_type: 'uint',
-      signature: '(stx-get-balance owner)',
-      description:
-        "`stx-get-balance` is used to query the STX balance of the `owner` principal.\n\nThis function returns the STX balance of the `owner` principal. In the event that the `owner`\nprincipal isn't materialized, it returns 0.\n",
-      example:
-        "\n(stx-get-balance 'SZ2J6ZY48GV1EZ5V2V5RB9MP66SW86PYKKQ9H6DPR) ;; Returns u0\n(stx-get-balance (as-contract tx-sender)) ;; Returns u1000\n",
-    },
-    {
-      name: 'stx-transfer?',
-      input_type: 'uint, principal, principal',
-      output_type: '(response bool uint)',
-      signature: '(stx-transfer? amount sender recipient)',
-      description:
-        "`stx-transfer?` is used to increase the STX balance for the `recipient` principal\nby debiting the `sender` principal. The `sender` principal _must_ be equal to the current context's `tx-sender`.\n\nThis function returns (ok true) if the transfer is successful. In the event of an unsuccessful transfer it returns\none of the following error codes:\n\n`(err u1)` -- `sender` does not have enough balance to transfer\n`(err u2)` -- `sender` and `recipient` are the same principal\n`(err u3)` -- amount to send is non-positive\n`(err u4)` -- the `sender` principal is not the current `tx-sender`\n",
-      example:
-        "\n(as-contract\n  (stx-transfer? u60 tx-sender 'SZ2J6ZY48GV1EZ5V2V5RB9MP66SW86PYKKQ9H6DPR)) ;; Returns (ok true)\n(as-contract\n  (stx-transfer? u50 'SZ2J6ZY48GV1EZ5V2V5RB9MP66SW86PYKKQ9H6DPR tx-sender)) ;; Returns (err u4)\n",
-    },
-    {
-      name: 'stx-burn?',
-      input_type: 'uint, principal',
-      output_type: '(response bool uint)',
-      signature: '(stx-burn? amount sender)',
-      description:
-        "`stx-burn?` debits the `sender` principal's STX holdings by `amount`, destroying\nthe STX. The `sender` principal _must_ be equal to the current context's `tx-sender`.\n\nThis function returns (ok true) if the transfer is successful. In the event of an unsuccessful transfer it returns\none of the following error codes:\n\n`(err u1)` -- `sender` does not have enough balance to transfer\n`(err u3)` -- amount to send is non-positive\n`(err u4)` -- the `sender` principal is not the current `tx-sender`\n",
-      example:
-        "\n(as-contract\n  (stx-burn? u60 tx-sender)) ;; Returns (ok true)\n(as-contract\n  (stx-burn? u50 'SZ2J6ZY48GV1EZ5V2V5RB9MP66SW86PYKKQ9H6DPR)) ;; Returns (err u4)\n",
-    },
-    {
-      name: 'define-constant',
-      input_type: 'MethodSignature, MethodBody',
-      output_type: 'Not Applicable',
-      signature: '(define-constant name expression)',
-      description:
-        '`define-constant` is used to define a private constant value in a smart contract.\nThe expression passed into the definition is evaluated at contract launch, in the order that it is\nsupplied in the contract. This can lead to undefined function or undefined variable errors in the\nevent that a function or variable used in the expression has not been defined before the constant.\n\nLike other kinds of definition statements, `define-constant` may only be used at the top level of a smart contract\ndefinition (i.e., you cannot put a define statement in the middle of a function body).\n',
-      example: '\n(define-constant four (+ 2 2))\n(+ 4 four) ;; Returns 8\n',
-    },
-    {
-      name: 'define-private',
-      input_type: 'MethodSignature, MethodBody',
-      output_type: 'Not Applicable',
-      signature:
-        '(define-private (function-name (arg-name-0 arg-type-0) (arg-name-1 arg-type-1) ...) function-body)',
-      description:
-        '`define-private` is used to define _private_ functions for a smart contract. Private\nfunctions may not be called from other smart contracts, nor may they be invoked directly by users.\nInstead, these functions may only be invoked by other functions defined in the same smart contract.\n\nLike other kinds of definition statements, `define-private` may only be used at the top level of a smart contract\ndefinition (i.e., you cannot put a define statement in the middle of a function body).\n\nPrivate functions may return any type.',
-      example:
-        '\n(define-private (max-of (i1 int) (i2 int))\n  (if (> i1 i2)\n      i1\n      i2))\n(max-of 4 6) ;; Returns 6\n',
-    },
-    {
-      name: 'define-public',
-      input_type: 'MethodSignature, MethodBody',
-      output_type: 'Not Applicable',
-      signature:
-        '(define-public (function-name (arg-name-0 arg-type-0) (arg-name-1 arg-type-1) ...) function-body)',
-      description:
-        '`define-public` is used to define a _public_ function and transaction for a smart contract. Public\nfunctions are callable from other smart contracts and may be invoked directly by users by submitting a transaction\nto the Stacks blockchain.\n\nLike other kinds of definition statements, `define-public` may only be used at the top level of a smart contract\ndefinition (i.e., you cannot put a define statement in the middle of a function body).\n\nPublic functions _must_ return a ResponseType (using either `ok` or `err`). Any datamap modifications performed by\na public function is aborted if the function returns an `err` type. Public functions may be invoked by other\ncontracts via `contract-call?`.',
-      example:
-        '\n(define-public (hello-world (input int))\n  (begin (print (+ 2 input))\n         (ok input)))\n',
-    },
-    {
-      name: 'define-read-only',
-      input_type: 'MethodSignature, MethodBody',
-      output_type: 'Not Applicable',
-      signature:
-        '(define-read-only (function-name (arg-name-0 arg-type-0) (arg-name-1 arg-type-1) ...) function-body)',
-      description:
-        '`define-read-only` is used to define a _public read-only_ function for a smart contract. Such\nfunctions are callable from other smart contracts.\n\nLike other kinds of definition statements, `define-read-only` may only be used at the top level of a smart contract\ndefinition (i.e., you cannot put a define statement in the middle of a function body).\n\nRead-only functions may return any type. However, read-only functions\nmay not perform any datamap modifications, or call any functions which\nperform such modifications. This is enforced both during type checks and during\nthe execution of the function. Public read-only functions may\nbe invoked by other contracts via `contract-call?`.',
-      example: '\n(define-read-only (just-return-one-hundred)\n  (* 10 10))',
-    },
-    {
-      name: 'define-map',
-      input_type: 'MapName, KeyTupleDefinition, MapTupleDefinition',
-      output_type: 'Not Applicable',
-      signature:
-        '(define-map map-name ((key-name-0 key-type-0) ...) ((val-name-0 val-type-0) ...))',
-      description:
-        '`define-map` is used to define a new datamap for use in a smart contract. Such\nmaps are only modifiable by the current smart contract.\n\nMaps are defined with a key tuple type and value tuple type. These are defined using a list\nof name and type pairs, e.g., a key type might be `((id int))`, which is a tuple with a single "id"\nfield of type `int`.\n\nLike other kinds of definition statements, `define-map` may only be used at the top level of a smart contract\ndefinition (i.e., you cannot put a define statement in the middle of a function body).',
-      example:
-        '\n(define-map squares { x: int } { square: int })\n(define-private (add-entry (x int))\n  (map-insert squares { x: 2 } { square: (* x x) }))\n(add-entry 1)\n(add-entry 2)\n(add-entry 3)\n(add-entry 4)\n(add-entry 5)\n',
-    },
-    {
-      name: 'define-data-var',
-      input_type: 'VarName, TypeDefinition, Value',
-      output_type: 'Not Applicable',
-      signature: '(define-data-var var-name type value)',
-      description:
-        '`define-data-var` is used to define a new persisted variable for use in a smart contract. Such\nvariable are only modifiable by the current smart contract.\n\nPersisted variable are defined with a type and a value.\n\nLike other kinds of definition statements, `define-data-var` may only be used at the top level of a smart contract\ndefinition (i.e., you cannot put a define statement in the middle of a function body).',
-      example:
-        '\n(define-data-var size int 0)\n(define-private (set-size (value int))\n  (var-set size value))\n(set-size 1)\n(set-size 2)\n',
-    },
-    {
-      name: 'define-fungible-token',
-      input_type: 'TokenName, <uint>',
-      output_type: 'Not Applicable',
-      signature: '(define-fungible-token token-name <total-supply>)',
-      description:
-        '`define-fungible-token` is used to define a new fungible token class for use in the current contract.\n\nThe second argument, if supplied, defines the total supply of the fungible token. This ensures that all calls to the `ft-mint?`\nfunction will never be able to create more than `total-supply` tokens. If any such call were to increase the total supply\nof tokens passed that amount, that invocation of `ft-mint?` will result in a runtime error and abort.\n\nLike other kinds of definition statements, `define-fungible-token` may only be used at the top level of a smart contract\ndefinition (i.e., you cannot put a define statement in the middle of a function body).\n\nTokens defined using `define-fungible-token` may be used in `ft-transfer?`, `ft-mint?`, and `ft-get-balance` functions',
-      example:
-        '\n(define-fungible-token stacks)\n(define-fungible-token limited-supply-stacks u100)\n',
-    },
-    {
-      name: 'define-non-fungible-token',
-      input_type: 'AssetName, TypeSignature',
-      output_type: 'Not Applicable',
-      signature: '(define-non-fungible-token asset-name asset-identifier-type)',
-      description:
-        '`define-non-fungible-token` is used to define a new non-fungible token class for use in the current contract.\nIndividual assets are identified by their asset identifier, which must be of the type `asset-identifier-type`. Asset\nidentifiers are _unique_ identifiers.\n\nLike other kinds of definition statements, `define-non-fungible-token` may only be used at the top level of a smart contract\ndefinition (i.e., you cannot put a define statement in the middle of a function body).\n\nAssets defined using `define-non-fungible-token` may be used in `nft-transfer?`, `nft-mint?`, and `nft-get-owner?` functions',
-      example: '\n(define-non-fungible-token names (buff 50))\n',
-    },
-    {
-      name: 'define-trait',
-      input_type: 'VarName, [MethodSignature]',
-      output_type: 'Not Applicable',
-      signature: '(define-trait trait-name ((func1-name (arg1-type arg2-type ...) (return-type))))',
-      description:
-        '`define-trait` is used to define a new trait definition for use in a smart contract. Other contracts\ncan implement a given trait and then have their contract identifier being passed as function arguments in order to be called\ndynamically with `contract-call?`.\n\nTraits are defined with a name, and a list functions defined with a name, a list of argument types, and return type.\n\nLike other kinds of definition statements, `define-trait` may only be used at the top level of a smart contract\ndefinition (i.e., you cannot put a define statement in the middle of a function body).\n',
-      example:
-        '\n(define-trait token-trait\n    ((transfer? (principal principal uint) (response uint uint))\n     (get-balance (principal) (response uint uint))))\n',
-    },
-    {
-      name: 'use-trait',
-      input_type: 'VarName, TraitIdentifier',
-      output_type: 'Not Applicable',
-      signature: '(use-trait trait-alias trait-identifier)',
-      description:
-        "`use-trait` is used to bring a trait, defined in another contract, to the current contract. Subsequent\nreferences to an imported trait are signaled with the syntax `<trait-alias>`.\n\nTraits import are defined with a name, used as an alias, and a trait identifier. Trait identifiers can either be\nusing the sugared syntax (.token-a.token-trait), or be fully qualified ('SPAXYA5XS51713FDTQ8H94EJ4V579CXMTRNBZKSF.token-a.token-trait).\n\nLike other kinds of definition statements, `use-trait` may only be used at the top level of a smart contract\ndefinition (i.e., you cannot put such a statement in the middle of a function body).\n    ",
-      example:
-        "\n(use-trait token-a-trait 'SPAXYA5XS51713FDTQ8H94EJ4V579CXMTRNBZKSF.token-a.token-trait)\n(define-public (forward-get-balance (user principal) (contract <token-a-trait>))\n  (begin\n    (ok 1)))\n",
-    },
-    {
-      name: 'impl-trait',
-      input_type: 'TraitIdentifier',
-      output_type: 'Not Applicable',
-      signature: '(impl-trait trait-identifier)',
-      description:
-        "`impl-trait` can be use for asserting that a contract is fully implementing a given trait.\nAdditional checks are being performed when the contract is being published, rejecting the deployment if the\ncontract is violating the trait specification.\n\nTrait identifiers can either be using the sugared syntax (.token-a.token-trait), or be fully qualified\n('SPAXYA5XS51713FDTQ8H94EJ4V579CXMTRNBZKSF.token-a.token-trait).\n\nLike other kinds of definition statements, `impl-trait` may only be used at the top level of a smart contract\ndefinition (i.e., you cannot put such a statement in the middle of a function body).\n",
-      example: "\n(impl-trait 'SPAXYA5XS51713FDTQ8H94EJ4V579CXMTRNBZKSF.token-a.token-trait)\n",
-    },
-  ],
-  keywords: [
-    {
-      name: 'contract-caller',
-      output_type: 'principal',
-      description:
-        "Returns the caller of the current contract context. If this contract is the first one called by a signed transaction,\nthe caller will be equal to the signing principal. If `contract-call?` was used to invoke a function from a new contract, `contract-caller`\nchanges to the _calling_ contract's principal. If `as-contract` is used to change the `tx-sender` context, `contract-caller` _also_ changes\nto the same contract principal.",
-      example:
-        '(print contract-caller) ;; Will print out a Stacks address of the transaction sender',
-    },
-    {
-      name: 'tx-sender',
-      output_type: 'principal',
-      description:
-        'Returns the original sender of the current transaction, or if `as-contract` was called to modify the sending context, it returns that\ncontract principal.',
-      example: '(print tx-sender) ;; Will print out a Stacks address of the transaction sender',
-    },
-    {
-      name: 'block-height',
-      output_type: 'uint',
-      description: 'Returns the current block height of the Stacks blockchain as an uint',
-      example:
-        '(> block-height 1000) ;; returns true if the current block-height has passed 1000 blocks.',
-    },
-    {
-      name: 'burn-block-height',
-      output_type: 'uint',
-      description: 'Returns the current block height of the underlying burn blockchain as a uint',
-      example:
-        '(> burn-block-height 1000) ;; returns true if the current height of the underlying burn blockchain has passed 1000 blocks.',
-    },
-    {
-      name: 'none',
-      output_type: '(optional ?)',
-      description:
-        'Represents the _none_ option indicating no value for a given optional (analogous to a null value).',
-      example:
-        '\n(define-public (only-if-positive (a int))\n  (if (> a 0)\n      (some a)\n      none))\n(only-if-positive 4) ;; Returns (some 4)\n(only-if-positive (- 3)) ;; Returns none\n',
-    },
-    {
-      name: 'true',
-      output_type: 'bool',
-      description: 'Boolean true constant.',
-      example: '\n(and true false) ;; Evaluates to false\n(or false true)  ;; Evaluates to true\n',
-    },
-    {
-      name: 'false',
-      output_type: 'bool',
-      description: 'Boolean false constant.',
-      example: '\n(and true false) ;; Evaluates to false\n(or false true)  ;; Evaluates to true\n',
-    },
-    {
-      name: 'stx-liquid-supply',
-      output_type: 'uint',
-      description:
-        'Returns the total number of micro-STX (uSTX) that are liquid in the system as of this block.',
-      example: '(print stx-liquid-supply) ;; Will print out the total number of liquid uSTX',
-    },
-    {
-      name: 'is-in-regtest',
-      output_type: 'bool',
-      description: 'Returns whether or not the code is running in a regression test',
-      example:
-        "(print is-in-regtest) ;; Will print 'true' if the code is running in a regression test",
-    },
-  ],
-};
diff --git a/src/app/sandbox/editor-config/define-theme.ts b/src/app/sandbox/editor-config/define-theme.ts
deleted file mode 100644
index 6996f3cd4..000000000
--- a/src/app/sandbox/editor-config/define-theme.ts
+++ /dev/null
@@ -1,394 +0,0 @@
-import { Monaco } from '@monaco-editor/react';
-
-export function defineTheme(monaco: Monaco) {
-  monaco.editor.defineTheme('vs-dark', {
-    inherit: true,
-    base: 'vs-dark',
-    colors: {
-      'activityBar.background': '#2f333d',
-      'activityBar.foreground': '#d7dae0',
-      'activityBarBadge.background': '#528bff',
-      'activityBarBadge.foreground': '#f8fafd',
-      'button.background': '#528bff',
-      'diffEditor.insertedTextBackground': '#00809b33',
-      'dropdown.background': '#1d1f23',
-      'dropdown.border': '#181a1f',
-      'editor.background': '#000000',
-      'editor.findMatchBackground': '#42557b',
-      'editor.findMatchHighlightBackground': '#314365',
-      'editor.lineHighlightBackground': '#383e4a',
-      'editor.selectionBackground': '#3e4451',
-      'editorCursor.foreground': '#f8f8f0',
-      'editorError.foreground': '#c24038',
-      'editorGroup.emptyBackground': '#181a1f',
-      'editorGroup.border': '#181a1f',
-      'editorGroupHeader.tabsBackground': '#21252b',
-      'editorIndentGuide.background': '#3b4048',
-      'editorHoverWidget.background': '#21252b',
-      'editorHoverWidget.border': '#181a1f',
-      'editorLineNumber.foreground': '#495162',
-      'editorRuler.foreground': '#484848',
-      'editorSuggestWidget.background': '#21252b',
-      'editorSuggestWidget.border': '#181a1f',
-      'editorSuggestWidget.selectedBackground': '#2c313a',
-      'editorUnnecessaryCode.opacity': '#000000c0',
-      'editorWhitespace.foreground': '#484a50',
-      'editorWidget.background': '#21252b',
-      'input.background': '#1d1f23',
-      'list.activeSelectionBackground': '#2c313a',
-      'list.activeSelectionForeground': '#d7dae0',
-      'list.focusBackground': '#383e4a',
-      'list.highlightForeground': '#c5c5c5',
-      'list.hoverBackground': '#292d35',
-      'list.inactiveSelectionBackground': '#2c313a',
-      'list.inactiveSelectionForeground': '#d7dae0',
-      'notifications.background': '#21252b',
-      'scrollbarSlider.activeBackground': '#747d9180',
-      'scrollbarSlider.background': '#4e566680',
-      'scrollbarSlider.hoverBackground': '#5a637580',
-      'sideBar.background': '#21252b',
-      'sideBarSectionHeader.background': '#282c34',
-      'statusBar.background': '#21252b',
-      'statusBar.foreground': '#9da5b4',
-      'statusBarItem.hoverBackground': '#2c313a',
-      'statusBar.noFolderBackground': '#21252b',
-      'statusBar.debuggingBackground': '#21252b',
-      'tab.activeBackground': '#383e4a',
-      'tab.border': '#181a1f',
-      'tab.inactiveBackground': '#21252b',
-      'terminal.foreground': '#abb2bf',
-      'terminal.ansiBlack': '#2d3139',
-      'terminal.ansiBlue': '#528bff',
-      'terminal.ansiGreen': '#98c379',
-      'terminal.ansiYellow': '#e5c07b',
-      'terminal.ansiCyan': '#56b6c2',
-      'terminal.ansiMagenta': '#c678dd',
-      'terminal.ansiRed': '#e06c75',
-      'terminal.ansiWhite': '#d7dae0',
-      'terminal.ansiBrightBlack': '#7f848e',
-      'terminal.ansiBrightBlue': '#528bff',
-      'terminal.ansiBrightGreen': '#98c379',
-      'terminal.ansiBrightYellow': '#e5c07b',
-      'terminal.ansiBrightCyan': '#56b6c2',
-      'terminal.ansiBrightMagenta': '#7e0097',
-      'terminal.ansiBrightRed': '#f44747',
-      'terminal.ansiBrightWhite': '#d7dae0',
-      'titleBar.activeBackground': '#282c34',
-      'titleBar.activeForeground': '#9da5b4',
-      'titleBar.inactiveBackground': '#282c34',
-      'titleBar.inactiveForeground': '#6b717d',
-    },
-    rules: [
-      { foreground: '#676f7d', token: 'comment' },
-      {
-        foreground: '#676f7d',
-        token: 'string.comment',
-      },
-      { foreground: '#e5c07b', token: 'string' },
-      {
-        foreground: '#e5c07b',
-        token: 'string.template',
-      },
-      { foreground: '#c678dd', token: 'constant.numeric' },
-      {
-        foreground: '#c678dd',
-        token: 'string.embedded.begin',
-      },
-      { foreground: '#c678dd', token: 'string.embedded.end' },
-      {
-        foreground: '#c678dd',
-        token: 'punctuation.definition.template-expression',
-      },
-      { foreground: '#c678dd', token: 'punctuation.section.embedded' },
-      {
-        foreground: '#abb2bf',
-        token: 'punctuation.section.embedded.begin.js',
-      },
-      { foreground: '#abb2bf', token: 'punctuation.section.embedded.end.js' },
-      {
-        foreground: '#abb2bf',
-        token: 'punctuation.section.embedded.begin.erb',
-      },
-      { foreground: '#abb2bf', token: 'punctuation.section.embedded.end.erb' },
-      {
-        foreground: '#abb2bf',
-        token: 'source.elixir.embedded',
-      },
-      { foreground: '#abb2bf', token: 'punctuation.separator' },
-      {
-        foreground: '#abb2bf',
-        token: 'punctuation.accessor',
-      },
-      { foreground: '#abb2bf', token: 'meta.brace' },
-      {
-        foreground: '#56b6c2',
-        token: 'constant.language',
-      },
-      { foreground: '#56b6c2', token: 'constant.character' },
-      {
-        foreground: '#56b6c2',
-        token: 'constant.other',
-      },
-      { foreground: '#e06c75', token: 'variable.language' },
-      {
-        foreground: '#e06c75',
-        token: 'keyword',
-      },
-      { foreground: '#e06c75', token: 'keyword.operator.logical' },
-      {
-        foreground: '#e06c75',
-        token: 'keyword.operator.constructor',
-      },
-      { foreground: '#e06c75', token: 'keyword.operator' },
-      {
-        foreground: '#e06c75',
-        token: 'storage',
-      },
-      { foreground: '#56b6c2', token: 'storage.type' },
-      {
-        foreground: '#61afef',
-        token: 'entity.name.class',
-      },
-      { foreground: '#61afef', token: 'entity.name.module' },
-      {
-        foreground: '#61afef',
-        token: 'entity.name.type',
-      },
-      { foreground: '#61afef', token: 'storage.identifier' },
-      {
-        foreground: '#61afef',
-        token: 'support.class',
-      },
-      { foreground: '#61afef', token: 'variable.other.object' },
-      {
-        foreground: '#61afef',
-        token: 'variable.other.constant',
-      },
-      { foreground: '#61afef', token: 'variable.other.global' },
-      {
-        foreground: '#61afef',
-        token: 'variable.other.readwrite.class',
-      },
-      { foreground: '#61afef', token: 'variable.other.readwrite.instance' },
-      {
-        foreground: '#61afef',
-        token: 'variable.other.readwrite.batchfile',
-      },
-      { foreground: '#61afef', token: 'variable.readwrite' },
-      {
-        foreground: '#61afef',
-        token: 'variable.readwrite.other.block',
-      },
-      { foreground: '#abb2bf', token: 'variable.other' },
-      {
-        foreground: '#abb2bf',
-        token: 'variable.other.property',
-      },
-      { foreground: '#abb2bf', token: 'variable.other.block' },
-      {
-        foreground: '#98c379',
-        token: 'entity.other.inherited-class',
-      },
-      { foreground: '#61afef', token: 'storage.modifier.import' },
-      {
-        foreground: '#61afef',
-        token: 'storage.modifier.package',
-      },
-      { foreground: '#98c379', token: 'entity.name.function' },
-      {
-        foreground: '#98c379',
-        token: 'support.function',
-      },
-      { fontStyle: 'italic', foreground: '#d19a66', token: 'variable.parameter' },
-      {
-        fontStyle: 'italic',
-        foreground: '#d19a66',
-        token: 'entity.name.variable.parameter',
-      },
-      { fontStyle: 'italic', foreground: '#d19a66', token: 'parameter.variable' },
-      {
-        foreground: '#abb2bf',
-        token: 'entity.name.function-call',
-      },
-      { foreground: '#98c379', token: 'function.support.builtin' },
-      {
-        foreground: '#98c379',
-        token: 'function.support.core',
-      },
-      { foreground: '#e06c75', token: 'entity.name.tag' },
-      {
-        foreground: '#e06c75',
-        token: 'entity.name.tag.class.js',
-      },
-      { foreground: '#56b6c2', token: 'entity.name.tag.class' },
-      {
-        foreground: '#56b6c2',
-        token: 'entity.name.tag.id',
-      },
-      { foreground: '#98c379', token: 'entity.other.attribute-name' },
-      {
-        foreground: '#56b6c2',
-        token: 'support.constant',
-      },
-      { foreground: '#56b6c2', token: 'support.type' },
-      {
-        foreground: '#56b6c2',
-        token: 'support.variable',
-      },
-      { foreground: '#56b6c2', token: 'support.dictionary.json' },
-      {
-        foreground: '#abb2bf',
-        token: 'support.type.property-name.css',
-      },
-      { foreground: '#abb2bf', token: 'support.type.property-name.scss' },
-      {
-        foreground: '#abb2bf',
-        token: 'support.type.property-name.less',
-      },
-      { foreground: '#abb2bf', token: 'support.type.property-name.sass' },
-      {
-        foreground: '#56b6c2',
-        token: 'entity.other.attribute-name.pseudo-class.css',
-      },
-      { foreground: '#56b6c2', token: 'entity.other.attribute-name.pseudo-class.scss' },
-      {
-        foreground: '#56b6c2',
-        token: 'entity.other.attribute-name.pseudo-class.less',
-      },
-      { foreground: '#56b6c2', token: 'entity.other.attribute-name.pseudo-class.sass' },
-      {
-        foreground: '#56b6c2',
-        token: 'entity.other.attribute-name.pseudo-element.css',
-      },
-      { foreground: '#56b6c2', token: 'entity.other.attribute-name.pseudo-element.scss' },
-      {
-        foreground: '#56b6c2',
-        token: 'entity.other.attribute-name.pseudo-element.less',
-      },
-      { foreground: '#56b6c2', token: 'entity.other.attribute-name.pseudo-element.sass' },
-      {
-        foreground: '#98c379',
-        token: 'support.constant.css',
-      },
-      { foreground: '#98c379', token: 'support.constant.scss' },
-      {
-        foreground: '#98c379',
-        token: 'support.constant.less',
-      },
-      { foreground: '#98c379', token: 'support.constant.sass' },
-      {
-        foreground: '#56b6c2',
-        token: 'variable.css',
-      },
-      { foreground: '#56b6c2', token: 'variable.scss' },
-      {
-        foreground: '#56b6c2',
-        token: 'variable.less',
-      },
-      { foreground: '#56b6c2', token: 'variable.sass' },
-      {
-        foreground: '#e5c07b',
-        token: 'variable.css.string',
-      },
-      { foreground: '#e5c07b', token: 'variable.scss.string' },
-      {
-        foreground: '#e5c07b',
-        token: 'variable.less.string',
-      },
-      { foreground: '#e5c07b', token: 'variable.sass.string' },
-      {
-        foreground: '#c678dd',
-        token: 'unit.css',
-      },
-      { foreground: '#c678dd', token: 'unit.scss' },
-      {
-        foreground: '#c678dd',
-        token: 'unit.less',
-      },
-      { foreground: '#c678dd', token: 'unit.sass' },
-      {
-        foreground: '#56b6c2',
-        token: 'function.css',
-      },
-      { foreground: '#56b6c2', token: 'function.scss' },
-      {
-        foreground: '#56b6c2',
-        token: 'function.less',
-      },
-      { foreground: '#56b6c2', token: 'function.sass' },
-      {
-        fontStyle: '',
-        token: 'support.other.variable',
-      },
-      { background: '#c678dd', foreground: '#f8f8f0', token: 'invalid' },
-      {
-        background: '#56b6c2',
-        foreground: '#f8f8f0',
-        token: 'invalid.deprecated',
-      },
-      { foreground: '#56b6c2', token: 'support.type.property-name.json' },
-      {
-        foreground: '#61afef',
-        token: 'string.detected-link',
-      },
-      { foreground: '#75715e', token: 'meta.diff' },
-      {
-        foreground: '#75715e',
-        token: 'meta.diff.header',
-      },
-      { foreground: '#e06c75', token: 'markup.deleted' },
-      {
-        foreground: '#98c379',
-        token: 'markup.inserted',
-      },
-      { foreground: '#e5c07b', token: 'markup.changed' },
-      {
-        foreground: '#56b6c2a0',
-        token: 'constant.numeric.line-number.find-in-files - match',
-      },
-      { foreground: '#e5c07b', token: 'entity.name.filename.find-in-files' },
-      {
-        fontStyle: 'italic',
-        token: 'markup.italic',
-      },
-      { fontStyle: 'italic', token: ' markup.italic.markdown' },
-      {
-        foreground: '#676f7d',
-        token: 'punctuation.definition.italic.markdown',
-      },
-      { foreground: '#676f7d', token: 'punctuation.definition.bold.markdown' },
-      {
-        foreground: '#676f7d',
-        token: 'punctuation.definition.heading.markdown',
-      },
-      { fontStyle: 'italic', token: 'punctuation.definition.italic.markdown' },
-      {
-        foreground: '#61afef',
-        token: 'markup.underline.link.markdown',
-      },
-      { fontStyle: 'bold', token: 'markup.bold.markdown' },
-      {
-        fontStyle: 'bold',
-        foreground: '#e06c75',
-        token: 'markup.heading.markdown',
-      },
-      { foreground: '#98c379', token: 'markup.quote.markdown' },
-      {
-        foreground: '#c678dd',
-        fontStyle: 'bold',
-        token: 'meta.separator.markdown',
-      },
-      { foreground: '#56b6c2', token: 'markup.raw.inline.markdown' },
-      {
-        foreground: '#56b6c2',
-        token: 'markup.raw.block.markdown',
-      },
-      {
-        fontStyle: 'bold',
-        foreground: '#ffffff',
-        token: 'punctuation.definition.list_item.markdown',
-      },
-    ],
-    encodedTokensColors: [],
-  });
-}
diff --git a/src/app/sandbox/editor-config/init.ts b/src/app/sandbox/editor-config/init.ts
deleted file mode 100644
index 788e327c2..000000000
--- a/src/app/sandbox/editor-config/init.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Monaco } from '@monaco-editor/react';
-import { wireTmGrammars } from 'monaco-editor-textmate';
-import { IGrammarDefinition, Registry } from 'monaco-textmate';
-import { loadWASM } from 'onigasm';
-
-export async function liftOff(monaco: Monaco, claritySyntax: Record<string, any>) {
-  try {
-    await loadWASM(`/onigasm.wasm`);
-    const registry = new Registry({
-      getGrammarDefinition: scopeName =>
-        Promise.resolve({
-          format: 'json',
-          content: claritySyntax,
-        } as IGrammarDefinition),
-    });
-
-    const grammars = new Map();
-    grammars.set('clarity', 'source.clarity');
-    await wireTmGrammars(monaco, registry, grammars);
-    return true;
-  } catch (e) {}
-}
diff --git a/src/app/sandbox/editor-config/language.ts b/src/app/sandbox/editor-config/language.ts
deleted file mode 100644
index 1fd73efac..000000000
--- a/src/app/sandbox/editor-config/language.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { Monaco } from '@monaco-editor/react';
-
-export function configLanguage(monaco: Monaco) {
-  monaco.languages.register({
-    id: 'clarity',
-    extensions: ['.clar'],
-  });
-  monaco.languages.setLanguageConfiguration('clarity', {
-    wordPattern: /(-?\d*\.\d\w*)|([^`~!#%^&*()=+\[{\]}\\|;:'",>?\s]+)/g,
-    comments: {
-      lineComment: ';;',
-    },
-    brackets: [['(', ')']],
-    autoClosingPairs: [
-      {
-        open: '(',
-        close: ')',
-      },
-      {
-        open: '"',
-        close: '"',
-      },
-      {
-        open: '{',
-        close: '}',
-      },
-    ],
-    surroundingPairs: [
-      { open: '(', close: ')' },
-      {
-        open: '{',
-        close: '}',
-      },
-      { open: '"', close: '"' },
-    ],
-  });
-}
diff --git a/src/app/sandbox/faucet/page.tsx b/src/app/sandbox/faucet/page.tsx
deleted file mode 100644
index 077be5851..000000000
--- a/src/app/sandbox/faucet/page.tsx
+++ /dev/null
@@ -1,171 +0,0 @@
-'use client';
-
-import { useApi } from '@/common/api/client';
-import { Badge } from '@/common/components/Badge';
-import { DropIcon } from '@/components/icons/drop';
-import { Box, Button, Grid, Stack } from '@/ui/components';
-import { StxIcon } from '@/ui/icons/StxIcon';
-import { Text, Title } from '@/ui/typography';
-import type { NextPage } from 'next';
-import React from 'react';
-import { useMutation } from '@tanstack/react-query';
-
-import { useUser } from '../hooks/useUser';
-
-function getErrorMessage(error: any) {
-  if (!error) return '';
-  const defaultErrorMessage = 'Something went wrong, please try again later.';
-  if (!!error?.message) {
-    return error.message;
-  }
-  if (!!error?.status) {
-    switch (error.status) {
-      case 429:
-        return 'Too many requests, please try again later.';
-      default:
-        return defaultErrorMessage;
-    }
-  } else {
-    return defaultErrorMessage;
-  }
-}
-
-const Faucet: NextPage = () => {
-  const { faucetsApi } = useApi();
-  const { stxAddress } = useUser();
-  const [stackingIndex, setIndex] = React.useState(0);
-  const {
-    mutate: runFaucetStx,
-    error,
-    isError,
-    isSuccess,
-  } = useMutation((staking?: boolean) =>
-    faucetsApi.runFaucetStx({ address: stxAddress, ...(staking ? { staking: true } : {}) })
-  );
-  const errorMessage = getErrorMessage(error);
-  const handleStackingRequest = () => {
-    if (stackingIndex <= 3) {
-      setIndex(i => ++i);
-      if (stackingIndex === 3) {
-        void runFaucetStx(true);
-      }
-    }
-  };
-  const getStackingLabel = () => {
-    switch (stackingIndex) {
-      case 4:
-        return 'Okay, STX requested!';
-      case 3:
-        return 'To confirm, you actually want to do this?';
-      case 2:
-        return 'You can only do this once a day.';
-      case 1:
-        return 'Are you sure?';
-      default:
-        return 'I want to stack';
-    }
-  };
-  return (
-    <Grid minHeight="600px" placeItems="center" flexDirection="column">
-      <Box mb="20px">
-        <Grid
-          placeItems="center"
-          mb="32px"
-          mx="auto"
-          size="120px"
-          borderWidth="1px"
-          borderRadius="100%"
-          position="relative"
-          justifyContent="center"
-        >
-          <Grid
-            placeItems="center"
-            position="absolute"
-            bottom="-5px"
-            left="-5px"
-            size="42px"
-            borderRadius="100%"
-            bg={'bg'}
-          >
-            <Grid placeItems="center" size="42px" borderRadius="100%">
-              <DropIcon fill={'accent'} color="blue" size="20px" />
-            </Grid>
-          </Grid>
-          <StxIcon color={'invert'} size="48px" />
-        </Grid>
-        <Title mb="16px" width="100%" mx="auto" fontSize="24px" textAlign="center">
-          STX Faucet
-        </Title>
-        <Text
-          mx="auto"
-          width="100%"
-          textAlign="center"
-          color={'textBody'}
-          maxWidth="24ch"
-          lineHeight="1.8"
-          display="block"
-          mb={0}
-        >
-          Need STX to test the network? The faucet can top you up!
-        </Text>
-        {!!errorMessage ? (
-          <Box
-            mt="16px"
-            borderRadius="6px"
-            bg="rgba(207,0,0,0.05)"
-            border="1px solid rgba(207,0,0,0.1)"
-            p="16px"
-            color="red"
-            textAlign="center"
-            lineHeight="1.8"
-            wordBreak="break-all"
-          >
-            {errorMessage}
-          </Box>
-        ) : null}
-
-        {isSuccess ? (
-          <Box
-            mt="16px"
-            borderRadius="6px"
-            bg={'bgAlt'}
-            borderWidth="1px"
-            p="16px"
-            color={'textBody'}
-            textAlign="center"
-          >
-            <Stack justifyContent="center" isInline spacing="16px">
-              <Box>💰</Box>
-              <Box>STX coming your way shortly!</Box>
-              <Box>💰</Box>
-            </Stack>
-          </Box>
-        ) : null}
-
-        <Stack spacing="16px" justifyContent="center" mt="16px">
-          <Button mx="auto" onClick={() => runFaucetStx(undefined)}>
-            Request STX
-          </Button>
-          <Badge
-            color={'textBody'}
-            mx="auto"
-            onClick={() => handleStackingRequest()}
-            userSelect="none"
-            _hover={
-              stackingIndex !== 4
-                ? {
-                    bg: 'bgAlt',
-                    cursor: 'pointer',
-                  }
-                : {}
-            }
-          >
-            {getStackingLabel()}
-          </Badge>
-        </Stack>
-      </Box>
-    </Grid>
-  );
-};
-
-export default Faucet;
diff --git a/src/app/sandbox/head.tsx b/src/app/sandbox/head.tsx
deleted file mode 100644
index f898afaa6..000000000
--- a/src/app/sandbox/head.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { DefaultHeadTags } from '../DefaultHeadTags';
-
-export default function Head() {
-  const title = `Sandbox - Stacks Explorer by Hiro`;
-  return (
-    <>
-      <title>{title}</title>
-      <meta property="og:title" content={title} />
-      <DefaultHeadTags />
-    </>
-  );
-}
diff --git a/src/app/sandbox/hooks/useUser.ts b/src/app/sandbox/hooks/useUser.ts
deleted file mode 100644
index a6aa1ed31..000000000
--- a/src/app/sandbox/hooks/useUser.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-'use client';
-
-import { useApi } from '@/common/api/client';
-import { useGlobalContext } from '@/common/context/useAppContext';
-import { useAppDispatch, useAppSelector } from '@/common/state/hooks';
-import { useAddressQueries } from '@/features/address/use-address-queries';
-import { TransactionQueryKeys, transactionQK } from '@/features/transaction/query-keys';
-import { useEffect, useMemo, useState } from 'react';
-import { useQuery } from '@tanstack/react-query';
-
-import { AuthOptions } from '@stacks/connect/dist/types/types/auth';
-import {
-  AddressTransactionWithTransfers,
-  MempoolTransaction,
-} from '@stacks/stacks-blockchain-api-types';
-
-import { useInfiniteQueryResult } from '../../common/hooks/useInfiniteQueryResult';
-import { useAddressConfirmedTxsWithTransfersInfinite } from '../../common/queries/useAddressConfirmedTxsWithTransfersInfinite';
-import { useAddressMempoolTxsInfinite } from '../../common/queries/useAddressMempoolTxsInfinite';
-import {
-  connect,
-  disconnect,
-  selectUserData,
-  selectUserSession,
-  setUserData,
-} from '../sandbox-slice';
-
-export const useUser = () => {
-  const api = useApi();
-  const dispatch = useAppDispatch();
-  const activeNetworkMode = useGlobalContext().activeNetwork.mode;
-  const userSession = useAppSelector(selectUserSession);
-  const userData = useAppSelector(selectUserData);
-  const [mounted, setMounted] = useState(false);
-  const queries = useAddressQueries();
-
-  useEffect(() => setMounted(true), []);
-
-  useEffect(() => {
-    if (userSession.isUserSignedIn()) {
-      dispatch(setUserData({ userData: userSession.loadUserData() }));
-    }
-  }, []);
-
-  const isConnected = mounted && !!userData;
-  const stxAddress = userData?.profile?.stxAddress?.[activeNetworkMode];
-
-  const confirmedTxsResponse = useAddressConfirmedTxsWithTransfersInfinite(
-    api,
-    {
-      address: stxAddress,
-    },
-    { suspense: false }
-  );
-
-  const mempoolTxsResponse = useAddressMempoolTxsInfinite(api, { address: stxAddress });
-
-  const { data: balance } = useQuery(
-    transactionQK(TransactionQueryKeys.accountBalance, stxAddress),
-    () => queries.fetchAccountBalance(stxAddress)(),
-    { enabled: !!stxAddress, suspense: false }
-  );
-
-  const transactionsWithTransfers =
-    useInfiniteQueryResult<AddressTransactionWithTransfers>(confirmedTxsResponse);
-  const transactions = useMemo(
-    () => transactionsWithTransfers.map(tx => tx.tx),
-    [transactionsWithTransfers]
-  );
-  const mempoolTransactions = useInfiniteQueryResult<MempoolTransaction>(mempoolTxsResponse);
-
-  return {
-    isConnected,
-    userData,
-    stxAddress,
-    transactions,
-    mempoolTransactions,
-    balance,
-    userSession,
-    refetchTransactions: confirmedTxsResponse.refetch,
-    refetchMempoolTransactions: mempoolTxsResponse.refetch,
-    hasTransactions: !!transactions.length || !!mempoolTransactions.length,
-    connect: (authOptions?: Partial<AuthOptions>) =>
-      dispatch(connect({ activeNetworkMode: activeNetworkMode, authOptions: authOptions })),
-    disconnect: () => dispatch(disconnect()),
-  };
-};
diff --git a/src/app/sandbox/layout.tsx b/src/app/sandbox/layout.tsx
deleted file mode 100644
index bacdad023..000000000
--- a/src/app/sandbox/layout.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-'use client';
-
-import { getQueryParams } from '@/app/common/utils/buildUrl';
-import { useGlobalContext } from '@/common/context/useAppContext';
-import { useAppSelector } from '@/common/state/hooks';
-import { Flex, Grid } from '@/ui/components';
-import { useColorMode } from '@chakra-ui/react';
-import { useRouter } from 'next/router';
-import React, { FC } from 'react';
-
-import { useUser } from './hooks/useUser';
-import { ConnectToStacks } from './layout/ConnectToStacks';
-import { Header } from './layout/Header';
-import { RightPanel } from './layout/RightPanel';
-import { SideNav } from './layout/SideNav';
-import { selectShowRightPanel } from './sandbox-slice';
-
-const Layout: FC = ({ children }) => {
-  const { isConnected } = useUser();
-  const router = useRouter();
-  const colorMode = useColorMode().colorMode;
-  const { activeNetwork } = useGlobalContext();
-  const showRightPanel = useAppSelector(selectShowRightPanel);
-
-  if (activeNetwork.isSubnet) {
-    void router.replace(`/${getQueryParams(activeNetwork)}`);
-    return null;
-  }
-
-  return (
-    <>
-      <Flex
-        borderWidth={'1px'}
-        borderRadius="12px"
-        bg={`bg.${colorMode}`}
-        flexDirection="column"
-        flexGrow={1}
-        flexShrink={1}
-        mb="32px"
-      >
-        <Header />
-        <Grid
-          gridTemplateColumns={showRightPanel ? `72px 1fr calc(1142px / 3)` : '72px 1fr'}
-          minHeight="calc(100vh - 217px)"
-          flexGrow={1}
-          flexShrink={1}
-        >
-          <SideNav />
-          {isConnected ? children : <ConnectToStacks />}
-          <RightPanel />
-        </Grid>
-      </Flex>
-    </>
-  );
-};
-
-export default Layout;
diff --git a/src/app/sandbox/layout/ConnectToStacks.tsx b/src/app/sandbox/layout/ConnectToStacks.tsx
deleted file mode 100644
index 3fb91f856..000000000
--- a/src/app/sandbox/layout/ConnectToStacks.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { useAppDispatch } from '@/common/state/hooks';
-import { Button } from '@/ui/Button';
-import { Flex } from '@/ui/Flex';
-import { Stack } from '@/ui/Stack';
-import { Title } from '@/ui/typography';
-import React, { FC } from 'react';
-
-import { useUser } from '../hooks/useUser';
-import { setUserData } from '../sandbox-slice';
-
-export const ConnectToStacks: FC = () => {
-  const dispatch = useAppDispatch();
-  const { connect } = useUser();
-
-  return (
-    <Flex
-      flexGrow={1}
-      alignItems="center"
-      justifyContent="flex-start"
-      pt="120px"
-      flexDirection="column"
-      maxWidth="300px"
-      mx="auto"
-    >
-      <Stack spacing="32px" textAlign="center">
-        <Title fontSize={'20px'}>Welcome to the sandbox</Title>
-        <Title>Please sign in to continue</Title>
-        <Button
-          onClick={() =>
-            connect({
-              onFinish: authData => {
-                dispatch(setUserData({ userData: authData.userSession.loadUserData() }));
-              },
-            })
-          }
-          width="100%"
-        >
-          Connect Stacks Wallet
-        </Button>
-      </Stack>
-    </Flex>
-  );
-};
diff --git a/src/app/sandbox/layout/Header.tsx b/src/app/sandbox/layout/Header.tsx
deleted file mode 100644
index 5967437e3..000000000
--- a/src/app/sandbox/layout/Header.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import { useAppDispatch } from '@/common/state/hooks';
-import { Box } from '@/ui/Box';
-import { Button } from '@/ui/Button';
-import { Circle } from '@/ui/Circle';
-import { Flex } from '@/ui/Flex';
-import { IconButton } from '@/ui/IconButton';
-import { Stack } from '@/ui/Stack';
-import { Caption } from '@/ui/typography';
-import React, { FC } from 'react';
-import { TbMenu2, TbUser } from 'react-icons/tb';
-
-import { useUser } from '../hooks/useUser';
-import { setUserData, toggleRightPanel } from '../sandbox-slice';
-
-export const Header: FC = () => {
-  const dispatch = useAppDispatch();
-  const { isConnected, userData, connect } = useUser();
-  return (
-    <Flex alignItems="center" justifyContent="space-between" borderBottomWidth="1px">
-      <Box p="16px" color={'textTitle'}>
-        Stacks Explorer Sandbox
-      </Box>
-      <Flex alignItems="center" px="16px">
-        {!isConnected ? (
-          <Button
-            onClick={() =>
-              connect({
-                onFinish: authData => {
-                  dispatch(setUserData({ userData: authData.userSession.loadUserData() }));
-                },
-              })
-            }
-            size="sm"
-          >
-            Connect Stacks Wallet
-          </Button>
-        ) : (
-          <Stack spacing="24px" isInline>
-            <Stack isInline alignItems="center">
-              <Circle color={'textBody'} size="20px">
-                <TbUser size="14px" />
-              </Circle>
-              <Caption>{userData?.identityAddress}</Caption>
-            </Stack>
-            <Stack isInline alignItems="center">
-              <IconButton
-                color={'textTitle'}
-                onClick={() => dispatch(toggleRightPanel())}
-                icon={<TbMenu2 />}
-                aria-label={'Toggle right panel'}
-              />
-            </Stack>
-          </Stack>
-        )}
-      </Flex>
-    </Flex>
-  );
-};
diff --git a/src/app/sandbox/layout/NavItem.tsx b/src/app/sandbox/layout/NavItem.tsx
deleted file mode 100644
index 14e8e0090..000000000
--- a/src/app/sandbox/layout/NavItem.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { Grid } from '@/ui/Grid';
-import { Tooltip } from '@/ui/Tooltip';
-import { useColorMode } from '@chakra-ui/react';
-import Link from 'next/link';
-import { FC, ReactNode } from 'react';
-
-export const NavItem: FC<{ label: string; icon: ReactNode; isSelected?: boolean; url: string }> = ({
-  label,
-  icon,
-  isSelected,
-  url,
-}) => {
-  const colorMode = useColorMode().colorMode;
-  return (
-    <Tooltip placement="left" label={label} key={url}>
-      <Link href={url} passHref style={{ margin: '0' }}>
-        <Grid
-          bg={isSelected ? `block.${colorMode}` : `bg.${colorMode}`}
-          borderBottomWidth="1px"
-          borderRightWidth="1px"
-          size="72px"
-          placeItems="center"
-          justifyContent="center"
-          color={`textTitle.${colorMode}`}
-          _hover={{
-            cursor: 'pointer',
-            bg: `block.${colorMode}`,
-          }}
-        >
-          {icon}
-        </Grid>
-      </Link>
-    </Tooltip>
-  );
-};
diff --git a/src/app/sandbox/layout/RightPanel.tsx b/src/app/sandbox/layout/RightPanel.tsx
deleted file mode 100644
index 74b5e8ddc..000000000
--- a/src/app/sandbox/layout/RightPanel.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import { SkeletonRightPanel } from '@/app/sandbox/layout/SkeletonRightPanel';
-import { useAppSelector } from '@/common/state/hooks';
-import { microToStacks, truncateMiddle } from '@/common/utils';
-import { Box } from '@/ui/Box';
-import { Flex } from '@/ui/Flex';
-import { IconButton } from '@/ui/IconButton';
-import { Stack } from '@/ui/Stack';
-import { Tooltip } from '@/ui/Tooltip';
-import { StxIcon } from '@/ui/icons/StxIcon';
-import { Caption, Text } from '@/ui/typography';
-import dynamic from 'next/dynamic';
-import React, { FC } from 'react';
-import { MdOutlineLogout } from 'react-icons/md';
-
-import { TransactionsPanel } from '../components/TransactionsPanel';
-import { useUser } from '../hooks/useUser';
-import { selectShowRightPanel } from '../sandbox-slice';
-
-const RightPanelBase: FC = () => {
-  const { isConnected, disconnect, stxAddress, transactions, mempoolTransactions, balance } =
-    useUser();
-  const showRightPanel = useAppSelector(selectShowRightPanel);
-  if (!showRightPanel || !isConnected) return null;
-
-  return (
-    <Flex flexGrow={1} flexDirection="column" borderLeftWidth={'1px'}>
-      {balance ? (
-        <Box bg={'bg'} borderBottomWidth="1px" p="24px">
-          <Stack spacing="16px">
-            <Stack textAlign="right">
-              <Caption>Account balance</Caption>
-              <Flex
-                flexShrink={0}
-                flexGrow={1}
-                alignItems="center"
-                position="relative"
-                justifyContent="flex-end"
-                color={'textTitle'}
-                gap={'8px'}
-              >
-                <StxIcon strokeWidth={2} color="currentColor" size="18px" />
-                <Text fontWeight={600} fontSize={'24px'} display="block" position="relative">
-                  {balance?.stx?.balance ? microToStacks(balance.stx.balance) : 0} STX
-                </Text>
-              </Flex>
-            </Stack>
-            {stxAddress && (
-              <Flex textAlign="right" justifyContent="flex-end" alignItems="center">
-                <Caption _hover={{ cursor: 'pointer' }}>{truncateMiddle(stxAddress, 12)}</Caption>
-                <Box
-                  _hover={{ cursor: 'pointer' }}
-                  onClick={() => {
-                    disconnect();
-                  }}
-                  position="relative"
-                  ml="8px"
-                >
-                  <Tooltip placement="bottom" label="Sign out">
-                    <IconButton
-                      size="20px"
-                      color={'textBody'}
-                      icon={<MdOutlineLogout size={'14px'} />}
-                      aria-label={'sign out'}
-                    />
-                  </Tooltip>
-                </Box>
-              </Flex>
-            )}
-          </Stack>
-        </Box>
-      ) : null}
-      <TransactionsPanel
-        transactions={transactions || []}
-        mempoolTransactions={mempoolTransactions || []}
-        stxAddress={stxAddress}
-      />
-    </Flex>
-  );
-};
-
-export default RightPanelBase;
-
-export const RightPanel = dynamic(() => import('./RightPanel'), {
-  loading: () => <SkeletonRightPanel />,
-});
diff --git a/src/app/sandbox/layout/SideNav.tsx b/src/app/sandbox/layout/SideNav.tsx
deleted file mode 100644
index 4b5db3e5a..000000000
--- a/src/app/sandbox/layout/SideNav.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-'use client';
-
-import { buildUrl } from '@/app/common/utils/buildUrl';
-import { useGlobalContext } from '@/common/context/useAppContext';
-import { DropIcon } from '@/components/icons/drop';
-import { Icon, Stack, StackProps } from '@/ui/components';
-import { FunctionIcon } from '@/ui/icons';
-import { StxIcon } from '@/ui/icons/StxIcon';
-import { useColorMode } from '@chakra-ui/react';
-import { usePathname } from 'next/navigation';
-import React from 'react';
-
-import { ClarityIcon } from '../components/ClarityIcon';
-import { useUser } from '../hooks/useUser';
-import { NavItem } from './NavItem';
-
-export const SideNav: React.FC<StackProps> = () => {
-  const network = useGlobalContext().activeNetwork;
-  const pathname = usePathname();
-  const { isConnected } = useUser();
-  const { colorMode } = useColorMode();
-  const iconColor = colorMode === 'dark' ? { color: 'brand' } : {};
-  return (
-    <Stack borderRightWidth={'1px'}>
-      <NavItem
-        label={'Write & Deploy Contracts'}
-        url={buildUrl(`/sandbox/deploy`, network)}
-        icon={<ClarityIcon size="24px" {...iconColor} />}
-        isSelected={pathname?.startsWith('/sandbox/deploy')}
-      />
-      <NavItem
-        label={'Call Functions'}
-        url={buildUrl(`/sandbox/contract-call`, network)}
-        icon={<Icon as={FunctionIcon} size="24px" {...iconColor} />}
-        isSelected={pathname?.startsWith('/sandbox/contract-call')}
-      />
-      <NavItem
-        label={'STX Transfer'}
-        url={buildUrl(`/sandbox/transfer`, network)}
-        icon={<Icon as={StxIcon} size="20px" {...iconColor} />}
-        isSelected={pathname?.startsWith('/sandbox/transfer')}
-      />
-      {isConnected && network.mode === 'testnet' && (
-        <NavItem
-          label={'Testnet Faucet'}
-          url={buildUrl(`/sandbox/faucet`, network)}
-          icon={<Icon as={DropIcon} size="24px" {...iconColor} />}
-          isSelected={pathname?.startsWith('/sandbox/faucet')}
-        />
-      )}
-    </Stack>
-  );
-};
diff --git a/src/app/sandbox/layout/SkeletonRightPanel.tsx b/src/app/sandbox/layout/SkeletonRightPanel.tsx
deleted file mode 100644
index 063ac0c69..000000000
--- a/src/app/sandbox/layout/SkeletonRightPanel.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import { useVerticallyStackedElementsBorderStyle } from '@/app/common/styles/border';
-import { ExplorerSkeletonLoader } from '@/components/loaders/skeleton-common';
-import { SkeletonTxListItemMini } from '@/components/loaders/skeleton-transaction';
-import { Box } from '@/ui/Box';
-import { Flex } from '@/ui/Flex';
-import { Stack } from '@/ui/Stack';
-import { useColorMode } from '@chakra-ui/react';
-import React, { FC } from 'react';
-
-export const SkeletonRightPanel: FC = () => {
-  return (
-    <Flex flexGrow={1} flexDirection="column" borderLeftWidth={'1px'}>
-      <Box bg={'bg'} borderBottomWidth="1px" p="24px">
-        <Stack spacing="16px">
-          <Stack textAlign="right" alignItems={'flex-end'}>
-            <ExplorerSkeletonLoader width={'90px'} height={'12px'} />
-            <Flex
-              flexShrink={0}
-              flexGrow={1}
-              alignItems="center"
-              position="relative"
-              justifyContent="flex-end"
-              gap={'8px'}
-            >
-              <ExplorerSkeletonLoader width={'18px'} height={'18px'} />
-              <ExplorerSkeletonLoader width={'185px'} height={'24px'} />
-            </Flex>
-          </Stack>
-          <Flex textAlign="right" justifyContent="flex-end" alignItems="center">
-            <ExplorerSkeletonLoader width={'185px'} height={'12px'} />
-            <Box position="relative" ml="8px">
-              <ExplorerSkeletonLoader width={'14px'} height={'14px'} />
-            </Box>
-          </Flex>
-        </Stack>
-      </Box>
-      <Flex
-        position="relative"
-        flexDirection="column"
-        flexGrow={1}
-        bg={`bgAlt.${useColorMode().colorMode}`}
-        borderBottomRightRadius="12px"
-        overflow="hidden"
-      >
-        <Flex px="16px" borderBottomWidth="1px" py="8px" bg={`bg.${useColorMode().colorMode}`}>
-          <ExplorerSkeletonLoader width={'90px'} height={'12px'} />
-        </Flex>
-        <Flex
-          flexDirection="column"
-          flexGrow={1}
-          overflow="auto"
-          bg={`bg.${useColorMode().colorMode}`}
-          position="relative"
-          pl={'20px'}
-          css={useVerticallyStackedElementsBorderStyle}
-        >
-          <SkeletonTxListItemMini />
-          <SkeletonTxListItemMini />
-          <SkeletonTxListItemMini />
-          <SkeletonTxListItemMini />
-          <SkeletonTxListItemMini />
-          <SkeletonTxListItemMini />
-          <SkeletonTxListItemMini />
-          <SkeletonTxListItemMini />
-        </Flex>
-      </Flex>
-    </Flex>
-  );
-};
diff --git a/src/app/sandbox/sandbox-slice.ts b/src/app/sandbox/sandbox-slice.ts
deleted file mode 100644
index 6487f9a91..000000000
--- a/src/app/sandbox/sandbox-slice.ts
+++ /dev/null
@@ -1,99 +0,0 @@
-'use client';
-
-import { APP_DETAILS } from '@/common/constants';
-import { helloWorldContract } from '@/common/contracts/hello-world-contract';
-import { RootState } from '@/common/state/store';
-import { PayloadAction, createSelector, createSlice } from '@reduxjs/toolkit';
-
-import { AppConfig, UserData, UserSession, showConnect } from '@stacks/connect';
-import { AuthOptions } from '@stacks/connect/dist/types/types/auth';
-
-export interface ConnectState {
-  userSession: UserSession;
-  userData: UserData | undefined;
-  codeBody: string;
-  showRightPanel: boolean;
-  showCodeToolbar: boolean;
-}
-
-const initialState: ConnectState = {
-  userSession: new UserSession({ appConfig: new AppConfig(['store_write', 'publish_data']) }),
-  userData: undefined,
-  codeBody: helloWorldContract.source,
-  showRightPanel: false,
-  showCodeToolbar: false,
-};
-
-export const sandboxSlice = createSlice({
-  name: 'connect',
-  initialState,
-  reducers: {
-    connect: (
-      state,
-      action: PayloadAction<{
-        activeNetworkMode: string;
-        authOptions?: Partial<AuthOptions>;
-      }>
-    ) => {
-      const defaultOptions: AuthOptions = {
-        appDetails: APP_DETAILS,
-        userSession: state.userSession,
-      };
-      showConnect(Object.assign(defaultOptions, action.payload.authOptions || {}));
-    },
-    disconnect: state => {
-      console.log('[debug] disconnect');
-      state.userSession.signUserOut();
-      state.userData = undefined;
-      state.showRightPanel = false;
-    },
-    setUserData: (state, action: PayloadAction<{ userData: UserData }>) => {
-      state.userData = action.payload.userData;
-    },
-    setCodeBody: (state, action: PayloadAction<{ codeBody: string }>) => {
-      state.codeBody = action.payload.codeBody;
-    },
-    toggleRightPanel: state => {
-      state.showRightPanel = !state.showRightPanel;
-    },
-    toggleCodeToolbar: state => {
-      state.showCodeToolbar = !state.showCodeToolbar;
-    },
-  },
-});
-
-export const {
-  connect,
-  disconnect,
-  setUserData,
-  setCodeBody,
-  toggleRightPanel,
-  toggleCodeToolbar,
-} = sandboxSlice.actions;
-
-export const selectConnectSlice = (state: RootState) => state.connect;
-
-export const selectUserSession = createSelector(
-  [selectConnectSlice],
-  connectSlice => connectSlice.userSession
-);
-
-export const selectUserData = createSelector(
-  [selectConnectSlice],
-  connectSlice => connectSlice.userData
-);
-
-export const selectCodeBody = createSelector(
-  [selectConnectSlice],
-  connectSlice => connectSlice.codeBody
-);
-
-export const selectShowRightPanel = createSelector(
-  [selectConnectSlice],
-  connectSlice => connectSlice.showRightPanel
-);
-
-export const selectShowCodeToolbar = createSelector(
-  [selectConnectSlice],
-  connectSlice => connectSlice.showCodeToolbar
-);
diff --git a/src/app/sandbox/transfer/page.tsx b/src/app/sandbox/transfer/page.tsx
deleted file mode 100644
index f2622143d..000000000
--- a/src/app/sandbox/transfer/page.tsx
+++ /dev/null
@@ -1,163 +0,0 @@
-'use client';
-
-import { useApi } from '@/common/api/client';
-import { Badge } from '@/common/components/Badge';
-import { CONNECT_AUTH_ORIGIN } from '@/common/constants';
-import { microToStacks, stacksToMicro, validateStacksAddress } from '@/common/utils';
-import { Input } from '@/ui/Input';
-import { Box, Button, Flex, Grid, Stack } from '@/ui/components';
-import { Caption, Text, Title } from '@/ui/typography';
-import { useColorMode } from '@chakra-ui/react';
-import { BigNumber } from 'bignumber.js';
-import { Form, Formik } from 'formik';
-import type { NextPage } from 'next';
-import React from 'react';
-import { useQuery } from '@tanstack/react-query';
-
-import { openSTXTransfer } from '@stacks/connect';
-
-import { useStacksNetwork } from '../../common/hooks/use-stacks-network';
-import { useUser } from '../hooks/useUser';
-
-const Page: NextPage = () => {
-  const { feesApi } = useApi();
-  const { data: feeData } = useQuery(['transfer-fees'], () => feesApi.getFeeTransfer());
-  const network = useStacksNetwork();
-  const { isConnected, balance, stxAddress } = useUser();
-  const fee = feeData ? new BigNumber(feeData as any).multipliedBy(180) : 0;
-  const colorMode = useColorMode().colorMode;
-
-  return (
-    <Formik
-      validateOnBlur={false}
-      validateOnChange={false}
-      initialValues={{
-        recipient: '',
-        memo: '',
-        amount: null,
-      }}
-      validate={values => {
-        const _errors: any = {};
-        const validPrincipal = validateStacksAddress(values.recipient);
-        if (!validPrincipal) {
-          _errors.recipient = 'Invalid Stacks address.';
-        } else if (values.recipient === stxAddress) {
-          _errors.recipient = 'You cannot send yourself STX ;)';
-        }
-
-        if (!values.amount) {
-          _errors.amount = 'You need to specify an amount to send.';
-        }
-        if ((balance?.stx?.balance || 0) < (values.amount || 0)) {
-          _errors.amount = "Sorry, you don't have enough STX to make this transfer.";
-        }
-        return _errors;
-      }}
-      onSubmit={({ recipient, amount, memo }) => {
-        void openSTXTransfer({
-          network,
-          recipient,
-          amount: stacksToMicro(amount || 0).toString(),
-          memo,
-          authOrigin: CONNECT_AUTH_ORIGIN,
-        });
-      }}
-      render={({ handleChange, handleBlur, values, errors, setFieldValue }) => (
-        <Grid minHeight="600px" gridTemplateColumns="760px" flexGrow={1} flexShrink={1}>
-          <Flex flexGrow={1} flexDirection="column" p="24px">
-            <Form>
-              <Stack spacing="16px">
-                <Title fontSize="24px">Send STX</Title>
-                <Text color={'textBody'} maxWidth="42ch" lineHeight="1.6" display="block">
-                  Enter a STX address and an amount you'd like to send.
-                </Text>
-                {Object.keys(errors)?.length ? (
-                  <Box
-                    px="16px"
-                    py="8px"
-                    color="red"
-                    lineHeight="1.8"
-                    fontSize="14px"
-                    wordBreak="break-all"
-                  >
-                    {errors?.recipient || errors?.amount}
-                  </Box>
-                ) : null}
-                <Input
-                  id="recipient"
-                  name="recipient"
-                  type="text"
-                  onChange={handleChange}
-                  onBlur={handleBlur}
-                  value={values.recipient}
-                  placeholder="Recipient STX address"
-                />
-                <Box>
-                  <Flex alignItems="center" position="relative">
-                    {balance?.stx?.balance ? (
-                      <Badge
-                        color={`textCaption.${colorMode}`}
-                        position="absolute"
-                        right="68px"
-                        onClick={() => {
-                          const total = BigInt(balance?.stx?.balance || 0) - BigInt(fee.toString());
-                          void setFieldValue('amount', microToStacks(total.toString(), false));
-                        }}
-                        _hover={{
-                          bg: 'bgAlt',
-                          cursor: 'pointer',
-                          color: 'textTitle',
-                        }}
-                      >
-                        Send max
-                      </Badge>
-                    ) : null}
-                    <Input
-                      id="amount"
-                      name="amount"
-                      type="number"
-                      onChange={handleChange}
-                      onBlur={handleBlur}
-                      value={values.amount || 0}
-                      placeholder="0.000000"
-                      flexGrow={1}
-                    />
-                    <Grid
-                      bg={'bg'}
-                      position="absolute"
-                      right="1px"
-                      top="1px"
-                      borderLeftWidth={'1px'}
-                      placeItems="center"
-                      borderRadius="0 4px 4px 0"
-                      height={'100%'}
-                      px={'16px'}
-                    >
-                      <Caption>STX</Caption>
-                    </Grid>
-                  </Flex>
-                </Box>
-                <Input
-                  id="memo"
-                  name="memo"
-                  type="text"
-                  onChange={handleChange}
-                  onBlur={handleBlur}
-                  value={values.memo}
-                  placeholder="Optional message (memo)"
-                />
-                <Box>
-                  <Button type="submit">
-                    {isConnected ? 'Send STX' : 'Connect Stacks Wallet'}
-                  </Button>
-                </Box>
-              </Stack>
-            </Form>
-          </Flex>
-        </Grid>
-      )}
-    />
-  );
-};
-
-export default Page;
diff --git a/src/app/sandbox/types/values.ts b/src/app/sandbox/types/values.ts
deleted file mode 100644
index 3f2424e2e..000000000
--- a/src/app/sandbox/types/values.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export type TupleValueType = Record<string, string | number>;
-
-export type NonTupleValueType = string | number;
-
-export type ValueType = TupleValueType | NonTupleValueType;
-
-export type ListValueType = ValueType[];
diff --git a/src/app/sandbox/utils.ts b/src/app/sandbox/utils.ts
deleted file mode 100644
index 27afc1d92..000000000
--- a/src/app/sandbox/utils.ts
+++ /dev/null
@@ -1,122 +0,0 @@
-import { HIRO_HEADERS } from '@/common/constants';
-
-import { StacksNetwork } from '@stacks/network';
-import {
-  ClarityAbiType,
-  ClarityAbiTypeTuple,
-  ClarityValue,
-  cvToHex,
-  cvToString,
-  deserializeCV,
-  encodeClarityValue,
-  isClarityAbiOptional,
-  isClarityAbiTuple,
-  noneCV,
-  someCV,
-  tupleCV,
-} from '@stacks/transactions';
-
-import { NonTupleValueType, TupleValueType } from './types/values';
-
-export interface ClarityFunctionArg {
-  name: string;
-  type: ClarityAbiType;
-}
-
-interface ReadOnlyResponse {
-  okay: boolean;
-  result: string;
-}
-
-interface ReadOnlyOptions {
-  senderAddress: string;
-  contractName: string;
-  contractAddress: string;
-  functionName: string;
-  functionArgs: ClarityValue[];
-  network: StacksNetwork;
-}
-
-export const callReadOnlyFunction = async ({
-  senderAddress,
-  contractName,
-  contractAddress,
-  functionName,
-  functionArgs,
-  network,
-}: ReadOnlyOptions): Promise<ReadOnlyResponse> => {
-  const url = `${
-    network.coreApiUrl
-  }/v2/contracts/call-read/${contractAddress}/${contractName}/${encodeURIComponent(functionName)}`;
-
-  const args = functionArgs.map(arg => cvToHex(arg));
-
-  const body = JSON.stringify({
-    sender: senderAddress,
-    arguments: args,
-  });
-
-  const response = await fetch(url, {
-    method: 'POST',
-    body,
-    headers: {
-      'Content-Type': 'application/json',
-      ...HIRO_HEADERS,
-    },
-  });
-
-  return response.json();
-};
-
-export const parseReadOnlyResponse = ({ result }: ReadOnlyResponse) => {
-  const hex = result.slice(2);
-  const bufferCv = Buffer.from(hex, 'hex');
-  const clarityValue = deserializeCV(bufferCv);
-  return cvToString(clarityValue);
-};
-
-export const getTuple = (type?: ClarityAbiType): ClarityAbiTypeTuple['tuple'] | undefined => {
-  if (!type) return;
-  const isTuple = isClarityAbiTuple(type);
-  if (isTuple) return type?.tuple;
-  const isOptional = isClarityAbiOptional(type);
-  if (isOptional && isClarityAbiTuple(type?.optional)) return type?.optional?.tuple;
-};
-
-export const encodeTuple = (
-  tuple: ClarityAbiTypeTuple['tuple'],
-  value: TupleValueType
-): ClarityValue => {
-  const tupleData = tuple.reduce((acc, tupleEntry) => {
-    const _type = tupleEntry.type;
-    acc[tupleEntry.name] = encodeClarityValue(_type, value[tupleEntry.name].toString());
-    return acc;
-  }, {} as Record<string, ClarityValue>);
-  return tupleCV(tupleData);
-};
-
-export const encodeOptional = (
-  optionalType: ClarityAbiType,
-  value: NonTupleValueType
-): ClarityValue => {
-  if (value) {
-    return someCV(encodeClarityValue(optionalType, value.toString()));
-  } else {
-    return noneCV();
-  }
-};
-
-const allValuesNotEmpty = (value: TupleValueType) => {
-  return Object.values(value).reduce((previous, value) => previous && value !== '', true);
-};
-
-export const encodeOptionalTuple = (
-  optionalType: ClarityAbiTypeTuple['tuple'],
-  value: TupleValueType
-): ClarityValue => {
-  if (allValuesNotEmpty(value)) {
-    return someCV(encodeTuple(optionalType, value));
-  } else {
-    return noneCV();
-  }
-};
diff --git a/src/app/stats/CurrentStackingCycle/index.tsx b/src/app/stats/CurrentStackingCycle/index.tsx
deleted file mode 100644
index 6ad91cac5..000000000
--- a/src/app/stats/CurrentStackingCycle/index.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { SkeletonStatSection } from '@/app/stats/SkeletonStatSection';
-import { InfoCircleIcon } from '@/components/icons/info-circle';
-import { Flex, GridProps, Tooltip } from '@/ui/components';
-import { Text } from '@/ui/typography';
-import dynamic from 'next/dynamic';
-import * as React from 'react';
-import { FC, useMemo } from 'react';
-
-import { StackingCycle } from '../StackingCycle';
-import { useCurrentStackingCycle } from './useCurrentStackingCycle';
-
-const CurrentStackingCycleBase: FC<GridProps> = props => {
-  const { currentCycleStackedSTX, blocksTilNextCycle, approximateDaysTilNextCycle } =
-    useCurrentStackingCycle();
-  const currentCycleCaption = useMemo(() => {
-    if (!blocksTilNextCycle) return null;
-    return (
-      <Flex fontSize={'12px'} color={'textTitle'} fontWeight="500" alignItems={'center'}>
-        <Text fontSize={'12px'} color={'textCaption'}>
-          Next cycle starts in
-        </Text>
-        &nbsp;
-        <Tooltip
-          label={`Next cycle starts in ${blocksTilNextCycle} block${
-            blocksTilNextCycle !== 1 ? 's' : ''
-          }. Calculation is based on ~10 minutes block time.`}
-        >
-          <Flex alignItems={'center'}>
-            {approximateDaysTilNextCycle} day{approximateDaysTilNextCycle !== 1 ? 's' : ''}
-            &nbsp;
-            <InfoCircleIcon width="18px" height="18px" />
-          </Flex>
-        </Tooltip>
-      </Flex>
-    );
-  }, [approximateDaysTilNextCycle, blocksTilNextCycle]);
-  return (
-    <StackingCycle
-      title="Current Stacking Cycle"
-      stackedSTX={currentCycleStackedSTX}
-      caption={currentCycleCaption}
-      {...props}
-    />
-  );
-};
-
-export default CurrentStackingCycleBase;
-
-export const CurrentStackingCycle = dynamic(() => import('.'), {
-  loading: () => <SkeletonStatSection borderRightWidth={['0px', '0px', '1px', '1px']} />,
-  ssr: false,
-});
diff --git a/src/app/stats/CurrentStackingCycle/useCurrentStackingCycle.ts b/src/app/stats/CurrentStackingCycle/useCurrentStackingCycle.ts
deleted file mode 100644
index 21db29007..000000000
--- a/src/app/stats/CurrentStackingCycle/useCurrentStackingCycle.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { useGlobalContext } from '@/common/context/useAppContext';
-import { MICROSTACKS_IN_STACKS } from '@/common/utils';
-import { useQuery } from '@tanstack/react-query';
-
-export const useCurrentStackingCycle = () => {
-  const { url: activeNetworkUrl } = useGlobalContext().activeNetwork;
-
-  const { data: poxData } = useQuery(
-    ['pox-info-raw'],
-    () => fetch(`${activeNetworkUrl}/v2/pox`).then(res => res.json()),
-    {
-      suspense: true,
-      staleTime: 30 * 60 * 1000,
-    }
-  );
-  const numberOfTenMinutesInDay = (24 * 60) / 10;
-  const { current_cycle, next_reward_cycle_in, next_cycle } = poxData || {};
-  const currentCycleStackedSTX = (current_cycle?.stacked_ustx || 0) / MICROSTACKS_IN_STACKS;
-  const blocksTilNextCycle = next_reward_cycle_in || 0;
-  const blocksTilNextCyclePreparePhase = next_cycle?.blocks_until_prepare_phase || 0;
-  const blocksTilNextCycleRewardPhase = next_cycle?.blocks_until_reward_phase || 0;
-  const approximateDaysTilNextCycle = Math.floor(blocksTilNextCycle / numberOfTenMinutesInDay);
-  const approximateDaysTilNextCyclePreparePhase = Math.floor(
-    blocksTilNextCyclePreparePhase / numberOfTenMinutesInDay
-  );
-  const approximateDaysTilNextCycleRewardPhase = Math.floor(
-    blocksTilNextCycleRewardPhase / numberOfTenMinutesInDay
-  );
-  const displayPreparePhaseInfo = approximateDaysTilNextCyclePreparePhase > 0;
-  return {
-    currentCycleStackedSTX,
-    blocksTilNextCycle,
-    approximateDaysTilNextCycle,
-  };
-};
diff --git a/src/app/stats/LastBlock/index.tsx b/src/app/stats/LastBlock/index.tsx
deleted file mode 100644
index 6403eae94..000000000
--- a/src/app/stats/LastBlock/index.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { useApi } from '@/common/api/client';
-import { Circle } from '@/components/circle';
-import { Box, Flex, GridProps, Icon } from '@/ui/components';
-import { Text } from '@/ui/typography';
-import dynamic from 'next/dynamic';
-import * as React from 'react';
-import { FC } from 'react';
-import { FaBitcoin } from 'react-icons/fa';
-
-import { useBlockListInfinite } from '../../common/queries/useBlockListInfinite';
-import { SkeletonStatSection } from '../SkeletonStatSection';
-import { StatSection } from '../StatSection';
-
-const LastBlockBase: FC<GridProps> = props => {
-  const api = useApi();
-  const { data: blocks } = useBlockListInfinite(api);
-  const lastBlockHeight = blocks?.pages?.[0]?.results?.[0]?.height;
-  const lastBurnBlockHeight = blocks?.pages?.[0]?.results?.[0]?.burn_block_height;
-  const lastBlockTxsCount = blocks?.pages?.[0]?.results?.[0]?.txs?.length;
-
-  return (
-    <StatSection
-      title="Last Block"
-      bodyMainText={`#${lastBlockHeight}`}
-      bodySecondaryText={
-        <Flex alignItems={'center'}>
-          <Circle size={18} mr={'3px'}>
-            <Icon as={FaBitcoin} color={'icon'} size={18} />
-          </Circle>
-          {lastBurnBlockHeight}
-        </Flex>
-      }
-      caption={
-        <Box fontSize={'12px'} color={'textCaption'} fontWeight="500">
-          <Text color={'textTitle'} display={'inline-block'}>
-            {lastBlockTxsCount}
-          </Text>{' '}
-          transaction
-          {lastBlockTxsCount !== 1 ? 's' : ''}
-        </Box>
-      }
-      {...props}
-    />
-  );
-};
-
-export default LastBlockBase;
-
-export const LastBlock = dynamic(() => import('.'), {
-  loading: () => <SkeletonStatSection borderRightWidth={['0px', '0px', '0px', '1px']} />,
-  ssr: false,
-});
diff --git a/src/app/stats/NextStackingCycle/index.tsx b/src/app/stats/NextStackingCycle/index.tsx
deleted file mode 100644
index e988dd70a..000000000
--- a/src/app/stats/NextStackingCycle/index.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import { SkeletonStatSection } from '@/app/stats/SkeletonStatSection';
-import { InfoCircleIcon } from '@/components/icons/info-circle';
-import { Flex, GridProps, Tooltip } from '@/ui/components';
-import { Text } from '@/ui/typography';
-import dynamic from 'next/dynamic';
-import * as React from 'react';
-import { FC, useMemo } from 'react';
-
-import { StackingCycle } from '../StackingCycle';
-import { useNextStackingCycle } from './useNextStackingCycle';
-
-const NextStackingCycleBase: FC<GridProps> = props => {
-  const {
-    nextCycleStackedSTX,
-    approximateDaysTilNextCycleRewardPhase,
-    displayPreparePhaseInfo,
-    blocksTilNextCyclePreparePhase,
-    blocksTilNextCycleRewardPhase,
-    approximateDaysTilNextCyclePreparePhase,
-  } = useNextStackingCycle();
-  const nextCycleCaption = useMemo(() => {
-    return (
-      <Flex fontSize={'12px'} color={'textTitle'} fontWeight="500" alignItems={'center'}>
-        <Text fontSize={'12px'} color={'textCaption'}>
-          {displayPreparePhaseInfo ? 'Prepare' : 'Reward'} phase starts in
-        </Text>
-        &nbsp;
-        <Tooltip
-          label={`${displayPreparePhaseInfo ? 'Prepare' : 'Reward'} phase starts in ${
-            displayPreparePhaseInfo ? blocksTilNextCyclePreparePhase : blocksTilNextCycleRewardPhase
-          } block${
-            (displayPreparePhaseInfo
-              ? blocksTilNextCyclePreparePhase
-              : blocksTilNextCycleRewardPhase) !== 1
-              ? 's'
-              : ''
-          }. Calculation is based on ~10 minutes block time.`}
-        >
-          <Flex alignItems={'center'}>
-            {displayPreparePhaseInfo
-              ? approximateDaysTilNextCyclePreparePhase
-              : approximateDaysTilNextCycleRewardPhase}{' '}
-            day
-            {(displayPreparePhaseInfo
-              ? approximateDaysTilNextCyclePreparePhase
-              : approximateDaysTilNextCycleRewardPhase) !== 1
-              ? 's'
-              : ''}
-            &nbsp;
-            <InfoCircleIcon width="18px" height="18px" />
-          </Flex>
-        </Tooltip>
-      </Flex>
-    );
-  }, [
-    approximateDaysTilNextCyclePreparePhase,
-    approximateDaysTilNextCycleRewardPhase,
-    blocksTilNextCyclePreparePhase,
-    blocksTilNextCycleRewardPhase,
-    displayPreparePhaseInfo,
-  ]);
-  return (
-    <StackingCycle
-      title="Next Stacking Cycle"
-      stackedSTX={nextCycleStackedSTX}
-      caption={nextCycleCaption}
-      {...props}
-    />
-  );
-};
-
-export default NextStackingCycleBase;
-
-export const NextStackingCycle = dynamic(() => import('.'), {
-  loading: () => <SkeletonStatSection />,
-  ssr: false,
-});
diff --git a/src/app/stats/NextStackingCycle/useNextStackingCycle.ts b/src/app/stats/NextStackingCycle/useNextStackingCycle.ts
deleted file mode 100644
index 72331d66c..000000000
--- a/src/app/stats/NextStackingCycle/useNextStackingCycle.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { useGlobalContext } from '@/common/context/useAppContext';
-import { MICROSTACKS_IN_STACKS } from '@/common/utils';
-import { useQuery } from '@tanstack/react-query';
-
-export const useNextStackingCycle = () => {
-  const { url: activeNetworkUrl } = useGlobalContext().activeNetwork;
-
-  const { data: poxData } = useQuery(
-    ['pox-info-raw'],
-    () => fetch(`${activeNetworkUrl}/v2/pox`).then(res => res.json()),
-    {
-      suspense: true,
-      staleTime: 30 * 60 * 1000,
-    }
-  );
-  const { next_cycle } = poxData || {};
-  const nextCycleStackedSTX = (next_cycle?.stacked_ustx || 0) / MICROSTACKS_IN_STACKS;
-  const blocksTilNextCyclePreparePhase = next_cycle?.blocks_until_prepare_phase || 0;
-  const blocksTilNextCycleRewardPhase = next_cycle?.blocks_until_reward_phase || 0;
-
-  const numberOfTenMinutesInDay = (24 * 60) / 10;
-  const approximateDaysTilNextCyclePreparePhase = Math.floor(
-    blocksTilNextCyclePreparePhase / numberOfTenMinutesInDay
-  );
-  const approximateDaysTilNextCycleRewardPhase = Math.floor(
-    blocksTilNextCycleRewardPhase / numberOfTenMinutesInDay
-  );
-  const displayPreparePhaseInfo = approximateDaysTilNextCyclePreparePhase > 0;
-  return {
-    nextCycleStackedSTX,
-    approximateDaysTilNextCycleRewardPhase,
-    displayPreparePhaseInfo,
-    blocksTilNextCyclePreparePhase,
-    blocksTilNextCycleRewardPhase,
-    approximateDaysTilNextCyclePreparePhase,
-  };
-};
diff --git a/src/app/stats/SkeletonStatSection.tsx b/src/app/stats/SkeletonStatSection.tsx
deleted file mode 100644
index 5e2e392a9..000000000
--- a/src/app/stats/SkeletonStatSection.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { ExplorerSkeletonLoader } from '@/components/loaders/skeleton-common';
-import { GridProps } from '@/ui/components';
-import * as React from 'react';
-import { FC } from 'react';
-
-import { StatSection } from './StatSection';
-
-export const SkeletonStatSection: FC<GridProps> = props => (
-  <StatSection
-    title={<ExplorerSkeletonLoader width={'75%'} />}
-    bodyMainText={<ExplorerSkeletonLoader width={'80px'} />}
-    bodySecondaryText={<ExplorerSkeletonLoader width={'60px'} />}
-    caption={<ExplorerSkeletonLoader width={'90%'} />}
-    {...props}
-  />
-);
diff --git a/src/app/stats/StackingCycle.tsx b/src/app/stats/StackingCycle.tsx
deleted file mode 100644
index 7e3cb518f..000000000
--- a/src/app/stats/StackingCycle.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { numberToString } from '@/common/utils';
-import { GridProps } from '@/ui/Grid';
-import * as React from 'react';
-import { FC, ReactNode } from 'react';
-
-import { SkeletonStatSection } from './SkeletonStatSection';
-import { StatSection } from './StatSection';
-
-export const StackingCycle: FC<
-  {
-    title: string;
-    stackedSTX?: number;
-    caption: ReactNode;
-  } & GridProps
-> = ({ title, stackedSTX, caption, ...rest }) => {
-  return (
-    <StatSection
-      title={title}
-      bodyMainText={stackedSTX ? numberToString(stackedSTX) : '0'}
-      bodySecondaryText=" STX stacked"
-      caption={caption}
-      {...rest}
-    />
-  );
-};
diff --git a/src/app/stats/StatSection.tsx b/src/app/stats/StatSection.tsx
deleted file mode 100644
index e7b2d908d..000000000
--- a/src/app/stats/StatSection.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { Box, Flex, Grid } from '@/ui/components';
-import * as React from 'react';
-import { FC, ReactNode } from 'react';
-
-export const StatSection: FC<{
-  title: ReactNode;
-  bodyMainText: ReactNode;
-  bodySecondaryText: ReactNode;
-  caption: ReactNode;
-}> = ({ title, bodyMainText, bodySecondaryText, caption, ...rest }) => (
-  <Grid p={'24px'} height={'131px'} {...rest}>
-    <Box fontWeight="500" mb={'9px'} style={{ whiteSpace: 'nowrap' }}>
-      {title}
-    </Box>
-    <Flex fontSize={'27px'} mb={'6px'} alignItems={'baseline'} wrap={'nowrap'} minW={'0'}>
-      <Box
-        fontSize={'27px'}
-        mr={'6px'}
-        style={{ whiteSpace: 'nowrap' }}
-        textOverflow={'ellipsis'}
-        overflow={'hidden'}
-        whiteSpace={'nowrap'}
-      >
-        {bodyMainText}{' '}
-      </Box>
-      <Box fontSize={'14px'} style={{ whiteSpace: 'nowrap' }}>
-        {bodySecondaryText}
-      </Box>
-    </Flex>
-    {caption}
-  </Grid>
-);
diff --git a/src/app/stats/Stats.tsx b/src/app/stats/Stats.tsx
deleted file mode 100644
index 8c5172b3a..000000000
--- a/src/app/stats/Stats.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-'use client';
-
-import { Card } from '@/components/card';
-import * as React from 'react';
-import { FC } from 'react';
-import { ErrorBoundary } from 'react-error-boundary';
-
-import { CurrentStackingCycle } from './CurrentStackingCycle';
-import { LastBlock } from './LastBlock';
-import { NextStackingCycle } from './NextStackingCycle';
-import { StxSupply } from './StxSupply';
-
-export const Stats: FC = () => {
-  return (
-    <ErrorBoundary fallbackRender={() => null}>
-      <Card
-        display={'grid'}
-        gridColumnStart={'1'}
-        gridColumnEnd={['2', '2', '3']}
-        gridTemplateColumns={['100%', '100%', '1fr 1fr', '1fr 1fr 1fr 1fr']}
-      >
-        <StxSupply borderRightWidth={['0px', '0px', '1px', '1px']} />
-        <LastBlock borderRightWidth={['0px', '0px', '0px', '1px']} />
-        <CurrentStackingCycle borderRightWidth={['0px', '0px', '1px', '1px']} />
-        <NextStackingCycle />
-      </Card>
-    </ErrorBoundary>
-  );
-};
diff --git a/src/app/stats/StxSupply/index.tsx b/src/app/stats/StxSupply/index.tsx
deleted file mode 100644
index df9b8057e..000000000
--- a/src/app/stats/StxSupply/index.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { numberToString } from '@/common/utils';
-import { Flex, GridProps } from '@/ui/components';
-import { Text } from '@/ui/typography';
-import dynamic from 'next/dynamic';
-import * as React from 'react';
-import { FC } from 'react';
-
-import { SkeletonStatSection } from '../SkeletonStatSection';
-import { StatSection } from '../StatSection';
-import { useStxSupply } from './useStxSupply';
-
-const StxSupplyBase: FC<GridProps> = props => {
-  const { unlockedStx, totalStx, unlockedPercent } = useStxSupply();
-  return (
-    <StatSection
-      title="STX Supply"
-      bodyMainText={numberToString(unlockedStx ? Number(unlockedStx) : 0)}
-      bodySecondaryText={`/ ${numberToString(totalStx ? Number(totalStx) : 0)}`}
-      caption={
-        <Flex fontSize={'12px'} color={'textTitle'} fontWeight="500" alignItems={'center'}>
-          {Number(unlockedPercent || 0).toFixed(2)}%&nbsp;
-          <Text fontSize={'12px'} color={'textCaption'}>
-            {' '}
-            is unlocked
-          </Text>
-        </Flex>
-      }
-      {...props}
-    />
-  );
-};
-
-export default StxSupplyBase;
-
-export const StxSupply = dynamic(() => import('.'), {
-  loading: () => <SkeletonStatSection borderRightWidth={['0px', '0px', '1px', '1px']} />,
-  ssr: false,
-});
diff --git a/src/app/stats/StxSupply/useStxSupply.ts b/src/app/stats/StxSupply/useStxSupply.ts
deleted file mode 100644
index b0e3e5580..000000000
--- a/src/app/stats/StxSupply/useStxSupply.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { useApi } from '@/common/api/client';
-import { useQuery } from '@tanstack/react-query';
-
-export const useStxSupply = () => {
-  const { infoApi } = useApi();
-  const { data: stxSupplyData } = useQuery(['stx-supply'], () => infoApi.getStxSupply({}), {
-    suspense: true,
-    staleTime: 30 * 60 * 1000,
-  });
-  const { total_stx, unlocked_stx, unlocked_percent } = stxSupplyData || {};
-  return {
-    totalStx: total_stx,
-    unlockedStx: unlocked_stx,
-    unlockedPercent: unlocked_percent,
-  };
-};
diff --git a/src/app/test/error.tsx b/src/app/test/error.tsx
new file mode 100644
index 000000000..d4252da24
--- /dev/null
+++ b/src/app/test/error.tsx
@@ -0,0 +1,47 @@
+'use client';
+
+import { MessageWithIcon } from '@/components/message-with-icon';
+import { Section } from '@/components/section';
+import { Box, Grid, Stack } from '@/ui/components';
+import { Title } from '@/ui/typography';
+import * as Sentry from '@sentry/nextjs';
+import * as React from 'react';
+import { useEffect } from 'react';
+import { TbAlertOctagon } from 'react-icons/tb';
+
+export default function Error({ error, reset }: { error: any; reset: () => void }) {
+  useEffect(() => {
+    console.error(error);
+    if (error.status === 404) return;
+    Sentry.captureException(error);
+  }, [error]);
+  return <h1>Error!!!!!</h1>;
+  // return (
+  //   <>
+  //     <Title mb={['16px', '16px', '0']} mt="64px" as="h1" color="white" fontSize="36px">
+  //       Something went wrong!
+  //     </Title>
+  //     <Section mt="32px">
+  //       <Grid placeItems="center" p="32px" minHeight="350px">
+  //         <Box>
+  //           <MessageWithIcon
+  //             icon={TbAlertOctagon}
+  //             title="Something went wrong!"
+  //             message="Try to refresh this page or try again later."
+  //             action={
+  //               <Stack isInline spacing="16px">
+  //                 <Box>
+  //                   <a href="/">Go home</a>
+  //                 </Box>
+  //                 <Box>
+  //                   <button onClick={() => reset()}>Try again</button>
+  //                 </Box>
+  //               </Stack>
+  //             }
+  //           />
+  //         </Box>
+  //       </Grid>
+  //     </Section>
+  //   </>
+  // );
+}
diff --git a/src/app/head.tsx b/src/app/test/head.tsx
similarity index 59%
rename from src/app/head.tsx
rename to src/app/test/head.tsx
index 80fa8ff33..324dee9fe 100644
--- a/src/app/head.tsx
+++ b/src/app/test/head.tsx
@@ -1,5 +1,5 @@
-import { DefaultHeadTags } from './DefaultHeadTags';
-import { defaultTitle } from './common/consts/head';
+import { DefaultHeadTags } from '@/app-pages/DefaultHeadTags';
+import { defaultTitle } from '@/app-pages/common/consts/head';
 
 export default function Head() {
   return (
diff --git a/src/app/test/layout.tsx b/src/app/test/layout.tsx
new file mode 100644
index 000000000..42fb9e443
--- /dev/null
+++ b/src/app/test/layout.tsx
@@ -0,0 +1,45 @@
+import { PageWrapper } from '@/app-pages/PageWrapper';
+import { headers } from 'next/headers';
+
+import { Providers } from '@/app-pages/Providers';
+import AppError from '@/app-pages/error';
+import * as React from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import { AppContextProvider } from '@/common/context/GlobalContext';
+import { IS_BROWSER } from '@/common/constants';
+import {
+  NetworkModeBtcAddressBaseUrlMap,
+  NetworkModeBtcBlockBaseUrlMap,
+  NetworkModeBtcTxBaseUrlMap,
+  NetworkModeUrlMap,
+} from '@/common/constants/network';
+
+export default function RootLayout(all: any) {
+  const headersList = headers();
+  console.log('NetworkModeUrlMap', NetworkModeUrlMap);
+  return (
+    <html lang="en">
+      <head />
+      <body>
+        <ErrorBoundary
+          fallbackRender={async ({ error, resetErrorBoundary }) => {
+            'use server';
+            return <AppError error={error} reset={resetErrorBoundary} />;
+          }}
+        >
+          <AppContextProvider
+            cookies={headersList.get('cookie') || (IS_BROWSER ? document?.cookie : '')}
+            apiUrls={NetworkModeUrlMap}
+            btcBlockBaseUrls={NetworkModeBtcBlockBaseUrlMap}
+            btcTxBaseUrls={NetworkModeBtcTxBaseUrlMap}
+            btcAddressBaseUrls={NetworkModeBtcAddressBaseUrlMap}
+          >
+            <Providers cookies={headersList.get('cookie') || (IS_BROWSER ? document?.cookie : '')}>
+              <PageWrapper>{all.children}</PageWrapper>
+            </Providers>
+          </AppContextProvider>
+        </ErrorBoundary>
+      </body>
+    </html>
+  );
+}
diff --git a/src/app/loading.tsx b/src/app/test/loading.tsx
similarity index 55%
rename from src/app/loading.tsx
rename to src/app/test/loading.tsx
index 1c04ca7e8..371dbd921 100644
--- a/src/app/loading.tsx
+++ b/src/app/test/loading.tsx
@@ -1,3 +1,3 @@
 export default function Loading() {
-  return <>loading...</>;
+  return <h1>loading...</h1>;
 }
diff --git a/src/app/page.tsx b/src/app/test/page.tsx
similarity index 67%
rename from src/app/page.tsx
rename to src/app/test/page.tsx
index 23afc7942..dec0ac525 100644
--- a/src/app/page.tsx
+++ b/src/app/test/page.tsx
@@ -1,11 +1,11 @@
-import { HomeClient } from '@/app/HomeClient';
+import { HomeClient } from '@/app-pages/HomeClient';
 import { FC } from 'react';
 
 const Home: FC<{
   params: { slug: string };
   searchParams?: { [key: string]: string | string[] | undefined };
 }> = ({ params, searchParams }) => {
-  console.log('[DEBUG] rendering home');
+  console.log('[DEBUG] test page', params, searchParams);
   return <HomeClient />;
 };
 
diff --git a/src/app/token/[tokenId]/LinksGroup.tsx b/src/app/token/[tokenId]/LinksGroup.tsx
deleted file mode 100644
index b9a4af221..000000000
--- a/src/app/token/[tokenId]/LinksGroup.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { MenuGroup } from '@/ui/MenuGroup';
-import { MenuItem } from '@/ui/MenuItem';
-import { TextLink } from '@/ui/TextLink';
-import { Icon } from '@/ui/Icon';
-import { Text } from '@/ui/Text';
-import { getLinkIcon, getUrlName, isExplorerLink } from '@/app/token/[tokenId]/utils';
-
-export const LinksGroup = ({ title, links }: { title: string; links: string[] }) => {
-  if (!links.length) return null;
-  return (
-    <MenuGroup title={title}>
-      {links.map(link => {
-        return (
-          <MenuItem
-            key={link}
-            as={TextLink}
-            href={link}
-            gap={'5px'}
-            target={!isExplorerLink(link) ? '_blank' : undefined}
-          >
-            <Icon as={getLinkIcon(link)} color="currentColor" size="12px" />
-            <Text fontSize={'14px'} lineHeight={'1em'}>
-              {getUrlName(link)}
-            </Text>
-          </MenuItem>
-        );
-      })}
-    </MenuGroup>
-  );
-};
diff --git a/src/app/token/[tokenId]/LinksMenu.tsx b/src/app/token/[tokenId]/LinksMenu.tsx
deleted file mode 100644
index d472af494..000000000
--- a/src/app/token/[tokenId]/LinksMenu.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { TokenInfoProps } from '@/pages/token/[tokenId]';
-import { useColorMode } from '@chakra-ui/react';
-import { Menu } from '@/ui/Menu';
-import { MenuButton } from '@/ui/MenuButton';
-import { Button } from '@/ui/Button';
-import { Icon } from '@/ui/Icon';
-import { BsChevronDown } from 'react-icons/bs';
-import { MenuList } from '@/ui/MenuList';
-import React from 'react';
-import { LinksGroup } from '@/app/token/[tokenId]/LinksGroup';
-import { MenuDivider } from '@/ui/MenuDivider';
-
-export function LinksMenu(props: { links: TokenInfoProps['extended']['links'] }) {
-  const colorMode = useColorMode().colorMode;
-  return (
-    <Menu>
-      <MenuButton
-        as={Button}
-        backgroundColor={colorMode === 'light' ? 'white' : 'transparent'}
-        variant={colorMode === 'light' ? undefined : 'outline'}
-        color={'textTitle.light'}
-        rightIcon={<Icon as={BsChevronDown} size="11px" color={'textCaption.light'} />}
-        _hover={{ backgroundColor: colorMode === 'light' ? 'white' : 'transparent' }}
-      >
-        Links
-      </MenuButton>
-      <MenuList>
-        {[
-          { title: 'Websites', links: props.links.websites },
-          { title: 'Blockchain', links: props.links.blockchain },
-          { title: 'Chat', links: props.links.chat },
-          { title: 'Forums', links: props.links.forums },
-          { title: 'Announcements', links: props.links.announcements },
-          { title: 'Repos', links: props.links.repos },
-          { title: 'Social', links: props.links.social },
-        ].map((group, i, arr) => (
-          <React.Fragment key={group.title}>
-            <LinksGroup title={group.title} links={group.links} />
-            {group.links.length > 0 && i < arr.length - 1 && arr[i + 1].links.length > 0 && (
-              <MenuDivider />
-            )}
-          </React.Fragment>
-        ))}
-      </MenuList>
-    </Menu>
-  );
-}
diff --git a/src/app/token/[tokenId]/Tabs/DeveloperStat.tsx b/src/app/token/[tokenId]/Tabs/DeveloperStat.tsx
deleted file mode 100644
index 802bc1393..000000000
--- a/src/app/token/[tokenId]/Tabs/DeveloperStat.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { FC } from 'react';
-import { As, useColorMode } from '@chakra-ui/react';
-import { Flex, FlexProps } from '@/ui/Flex';
-import { Text } from '@/ui/Text';
-import { Icon } from '@/ui/Icon';
-
-export const DeveloperStat: FC<
-  {
-    value: number | string;
-    label: string;
-    icon: As | null;
-  } & FlexProps
-> = ({ value, label, icon, border, ...flexProps }) => {
-  const colorMode = useColorMode().colorMode;
-  return (
-    <Flex direction={'column'} gap={'20px'} alignItems={'center'} my={'20px'} {...flexProps}>
-      <Text fontSize={'24px'} color={`textTitle.${colorMode}`}>
-        {value}
-      </Text>
-      <Flex gap={'8px'}>
-        {icon && <Icon as={icon} color={`textTitle.${colorMode}`} />}
-        <Text fontSize={'12px'} color={`textTitle.${colorMode}`}>
-          {label}
-        </Text>
-      </Flex>
-    </Flex>
-  );
-};
diff --git a/src/app/token/[tokenId]/Tabs/Developers.tsx b/src/app/token/[tokenId]/Tabs/Developers.tsx
deleted file mode 100644
index d1404d570..000000000
--- a/src/app/token/[tokenId]/Tabs/Developers.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import { FC } from 'react';
-import { AiOutlineEye, AiOutlineStar } from 'react-icons/ai';
-import { TokenInfoProps } from '@/pages/token/[tokenId]';
-import { PiGitCommitDuotone, PiGitForkDuotone, PiGitMergeDuotone } from 'react-icons/pi';
-import { Flex } from '@/ui/Flex';
-import { MdPeopleOutline } from 'react-icons/md';
-import { VscDiffAdded, VscDiffRemoved } from 'react-icons/vsc';
-import { DeveloperStat } from './DeveloperStat';
-
-export const Developers: FC<{ developerData: TokenInfoProps['extended']['developerData'] }> = ({
-  developerData,
-}) => {
-  const developerStat = [
-    {
-      value: developerData?.forks || 0,
-      label: 'Forks',
-      icon: PiGitForkDuotone,
-    },
-    {
-      value: developerData?.stars || 0,
-      label: 'Stars',
-      icon: AiOutlineStar,
-    },
-    {
-      value: developerData?.subscribers || 0,
-      label: 'Subscribers',
-      icon: AiOutlineEye,
-    },
-    {
-      value: `${developerData?.closed_issues || 0} / ${developerData?.total_issues || 0}`,
-      label: 'Closed issues / Total issues',
-      icon: null,
-    },
-    {
-      value: developerData?.pull_requests_merged || 0,
-      label: 'PRs merged',
-      icon: PiGitMergeDuotone,
-    },
-    {
-      value: developerData?.pull_request_contributors || 0,
-      label: 'PR contributors',
-      icon: MdPeopleOutline,
-    },
-    {
-      value: developerData?.commit_count_4_weeks || 0,
-      label: 'Commits (4 weeks)',
-      icon: PiGitCommitDuotone,
-    },
-    {
-      value: developerData?.code_additions_deletions_4_weeks?.additions || 0,
-      label: 'Additions (4 weeks)',
-      icon: VscDiffAdded,
-    },
-    {
-      value: developerData?.code_additions_deletions_4_weeks?.deletions || 0,
-      label: 'Deletions (4 weeks)',
-      icon: VscDiffRemoved,
-    },
-  ];
-  return (
-    <Flex width="100%" flexWrap={'wrap'} justifyContent={'center'} p={['0px', '0px', '20px']}>
-      {developerStat.map(({ icon, label, value }, index) => (
-        <DeveloperStat
-          value={value}
-          label={label}
-          icon={icon}
-          flex={['0 0 calc(50% - 20px)', '0 0 calc(50% - 20px)', '0 0 calc(33.33% - 20px)']}
-          borderRightWidth={[
-            (index + 1) % 2 !== 0 && index < developerStat.length - 1 ? '1px' : '0px',
-            (index + 1) % 2 !== 0 && index < developerStat.length - 1 ? '1px' : '0px',
-            (index + 1) % 3 !== 0 && index < developerStat.length - 1 ? '1px' : '0px',
-          ]}
-        />
-      ))}
-    </Flex>
-  );
-};
diff --git a/src/app/token/[tokenId]/Tabs/index.tsx b/src/app/token/[tokenId]/Tabs/index.tsx
deleted file mode 100644
index b681e9e31..000000000
--- a/src/app/token/[tokenId]/Tabs/index.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-'use client';
-
-import { TabsProps } from '@/ui/Tabs';
-import { FC } from 'react';
-import { TabsContainer } from '@/app/common/components/TabsContainer';
-import { AddressConfirmedTxsList } from '@/app/common/components/tx-lists/address-lists/AddressConfirmedTxsList';
-import { AddressMempoolTxsList } from '@/app/common/components/tx-lists/address-lists/AddressMempoolTxsList';
-import { useApi } from '@/common/api/client';
-import { useContractById } from '@/app/common/queries/useContractById';
-import { claritySyntax } from '@/app/common/claritySyntax';
-import { CodeEditor } from '@/ui/CodeEditor';
-import { ContractAvailableFunctions } from '@/app/common/components/ContractAvailableFunctions';
-import { TokenInfoProps } from '@/pages/token/[tokenId]';
-import { Developers } from '@/app/token/[tokenId]/Tabs/Developers';
-
-export const Tabs: FC<
-  {
-    tokenId: string;
-    developerData?: TokenInfoProps['extended']['developerData'];
-  } & Partial<TabsProps>
-> = ({ tokenId, developerData, ...tabsProps }) => {
-  const api = useApi();
-  const { data: contract } = useContractById(api, { contractId: tokenId }, { enabled: !!tokenId });
-  const source = contract?.source_code;
-  return (
-    <TabsContainer
-      tabs={[
-        {
-          title: 'Confirmed',
-          content: <AddressConfirmedTxsList address={tokenId} />,
-        },
-        {
-          title: 'Pending',
-          content: <AddressMempoolTxsList address={tokenId} />,
-        },
-        ...(!!source
-          ? [
-              {
-                title: 'Source code',
-                content: <CodeEditor code={source} claritySyntax={claritySyntax} height={500} />,
-              },
-            ]
-          : []),
-        ...(!!contract
-          ? [
-              {
-                title: 'Available functions',
-                content: <ContractAvailableFunctions contractId={tokenId} contract={contract} />,
-              },
-            ]
-          : []),
-        ...(!!developerData
-          ? [
-              {
-                title: 'Developers',
-                content: <Developers developerData={developerData} />,
-              },
-            ]
-          : []),
-      ]}
-      actions={null}
-      gridColumnEnd={'3'}
-      {...tabsProps}
-    />
-  );
-};
diff --git a/src/app/token/[tokenId]/TokenInfo/MarketCap.tsx b/src/app/token/[tokenId]/TokenInfo/MarketCap.tsx
deleted file mode 100644
index 1f888c97b..000000000
--- a/src/app/token/[tokenId]/TokenInfo/MarketCap.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { Flex, GridProps } from '@/ui/components';
-import { FC } from 'react';
-
-import { TrendArrow } from '@/app/token/[tokenId]/TokenInfo/TrendArrow';
-import { numberToString } from '@/common/utils';
-import { StatSection } from '@/app/stats/StatSection';
-
-export const MarketCap: FC<
-  GridProps & {
-    marketCap: number | null;
-    tradingVolume24h: number | null;
-    tradingVolumeChangePercentage24h: number | null;
-  }
-> = ({ marketCap, tradingVolumeChangePercentage24h, tradingVolume24h, ...gridProps }) => {
-  return (
-    <StatSection
-      title="Market Cap"
-      bodyMainText={marketCap ? `$${numberToString(marketCap)}` : 'N/A'}
-      bodySecondaryText={null}
-      caption={
-        <Flex
-          fontSize={'12px'}
-          color={'textCaption'}
-          fontWeight="500"
-          alignItems={'center'}
-          gap={'6px'}
-        >
-          Trading Volume: ${tradingVolume24h ? numberToString(tradingVolume24h) : 'N/A'}
-          {tradingVolumeChangePercentage24h ? (
-            <TrendArrow change={tradingVolumeChangePercentage24h} size={'11px'} />
-          ) : null}
-        </Flex>
-      }
-      {...gridProps}
-    />
-  );
-};
diff --git a/src/app/token/[tokenId]/TokenInfo/Price.tsx b/src/app/token/[tokenId]/TokenInfo/Price.tsx
deleted file mode 100644
index 8bb84b362..000000000
--- a/src/app/token/[tokenId]/TokenInfo/Price.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { Flex, GridProps } from '@/ui/components';
-import { FC } from 'react';
-import { useColorMode } from '@chakra-ui/react';
-import { TrendArrow } from '@/app/token/[tokenId]/TokenInfo/TrendArrow';
-import { StatSection } from '@/app/stats/StatSection';
-
-export const Price: FC<
-  GridProps & {
-    currentPrice: number | null;
-    priceChangePercentage24h: number | null;
-    currentPriceInBtc: number | null;
-    priceInBtcChangePercentage24h: number | null;
-  }
-> = ({
-  currentPrice,
-  priceChangePercentage24h,
-  currentPriceInBtc,
-  priceInBtcChangePercentage24h,
-  ...gridProps
-}) => {
-  const colorMode = useColorMode().colorMode;
-  return (
-    <StatSection
-      title="Price"
-      bodyMainText={currentPrice ? `$${currentPrice}` : 'N/A'}
-      bodySecondaryText={
-        priceChangePercentage24h ? (
-          <TrendArrow change={priceChangePercentage24h} size={'16px'} />
-        ) : null
-      }
-      caption={
-        <Flex
-          fontSize={'12px'}
-          color={'textCaption'}
-          fontWeight="500"
-          alignItems={'center'}
-          gap={'6px'}
-        >
-          {currentPriceInBtc ? `${currentPriceInBtc.toFixed(8)} BTC` : 'N/A'}
-          {priceInBtcChangePercentage24h ? (
-            <TrendArrow change={priceInBtcChangePercentage24h} size={'11px'} />
-          ) : null}
-        </Flex>
-      }
-      {...gridProps}
-    />
-  );
-};
diff --git a/src/app/token/[tokenId]/TokenInfo/Supply.tsx b/src/app/token/[tokenId]/TokenInfo/Supply.tsx
deleted file mode 100644
index 4f6b14c8a..000000000
--- a/src/app/token/[tokenId]/TokenInfo/Supply.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { numberToString } from '@/common/utils';
-import { Flex, GridProps } from '@/ui/components';
-import { FC } from 'react';
-import { StatSection } from '@/app/stats/StatSection';
-
-export const Supply: FC<
-  GridProps & { circulatingSupply: number | null; totalSupply: number | null }
-> = ({ circulatingSupply, totalSupply, ...gridProps }) => {
-  return (
-    <StatSection
-      title="Circulating Supply"
-      bodyMainText={circulatingSupply ? numberToString(circulatingSupply) : <>N/A</>}
-      bodySecondaryText={null}
-      caption={
-        <Flex fontSize={'12px'} color={'textTitle'} fontWeight="500" alignItems={'center'}>
-          Total Supply: {totalSupply ? numberToString(totalSupply) : 'N/A'}
-        </Flex>
-      }
-      {...gridProps}
-    />
-  );
-};
diff --git a/src/app/token/[tokenId]/TokenInfo/Transaction.tsx b/src/app/token/[tokenId]/TokenInfo/Transaction.tsx
deleted file mode 100644
index ccdbd6b73..000000000
--- a/src/app/token/[tokenId]/TokenInfo/Transaction.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { Box, Flex, GridProps } from '@/ui/components';
-import { FC } from 'react';
-import { TxLink } from '@/components/links';
-import { useColorMode } from '@chakra-ui/react';
-import { numberToString } from '@/common/utils';
-import { StatSection } from '@/app/stats/StatSection';
-
-export const Transaction: FC<GridProps & { txId: string; tvl: number | null }> = ({
-  tvl,
-  txId,
-  ...gridProps
-}) => {
-  const colorMode = useColorMode().colorMode;
-  return (
-    <StatSection
-      title="Contract transaction"
-      bodyMainText={
-        <Box
-          textOverflow={'ellipsis'}
-          overflow={'hidden'}
-          whiteSpace={'nowrap'}
-          color={`links.${colorMode}`}
-          _hover={{ textDecoration: 'underline' }}
-        >
-          <TxLink txId={txId}>{txId}</TxLink>
-        </Box>
-      }
-      bodySecondaryText={null}
-      caption={
-        <Flex fontSize={'12px'} color={'textCaption'} fontWeight="500">
-          TVL: {tvl ? `$${numberToString(tvl)}` : 'N/A'}
-        </Flex>
-      }
-      {...gridProps}
-    />
-  );
-};
diff --git a/src/app/token/[tokenId]/TokenInfo/TrendArrow.tsx b/src/app/token/[tokenId]/TokenInfo/TrendArrow.tsx
deleted file mode 100644
index 9954addfb..000000000
--- a/src/app/token/[tokenId]/TokenInfo/TrendArrow.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { FC } from 'react';
-import { Icon } from '@/ui/Icon';
-import { useColorMode } from '@chakra-ui/react';
-import { Text } from '@/ui/Text';
-import { Flex } from '@/ui/Flex';
-import { AiOutlineCaretUp, AiOutlineCaretDown } from 'react-icons/ai';
-
-export const TrendArrow: FC<{ change: number; size: string }> = ({ change, size }) => {
-  const colorMode = useColorMode().colorMode;
-  return (
-    <Flex alignItems={'center'}>
-      {change >= 0 ? (
-        <Icon
-          as={AiOutlineCaretUp}
-          size={size}
-          fill={`feedbackSuccess.${colorMode}`}
-          color={`feedbackSuccess.${colorMode}`}
-        />
-      ) : (
-        <Icon
-          as={AiOutlineCaretDown}
-          size={size}
-          fill={`feedbackError.${colorMode}`}
-          color={`feedbackError.${colorMode}`}
-        />
-      )}
-      &nbsp;
-      <Text color={change >= 0 ? `feedbackSuccess.${colorMode}` : `feedbackError.${colorMode}`}>
-        {Math.round(change * 10) / 10}%
-      </Text>
-    </Flex>
-  );
-};
diff --git a/src/app/token/[tokenId]/TokenInfo/index.tsx b/src/app/token/[tokenId]/TokenInfo/index.tsx
deleted file mode 100644
index a02dce1a3..000000000
--- a/src/app/token/[tokenId]/TokenInfo/index.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-'use client';
-
-import { Card } from '@/components/card';
-import * as React from 'react';
-import { FC } from 'react';
-import { ErrorBoundary } from 'react-error-boundary';
-
-import { MarketCap } from './MarketCap';
-import { Price } from './Price';
-import { Transaction } from './Transaction';
-import { Supply } from './Supply';
-import { TokenInfoProps } from '@/pages/token/[tokenId]';
-
-export const TokenInfo: FC<{ tokenInfo: TokenInfoProps; txId: string }> = ({ tokenInfo, txId }) => {
-  return (
-    <ErrorBoundary fallbackRender={() => null}>
-      <Card
-        display={'grid'}
-        gridColumnStart={'1'}
-        gridColumnEnd={['2', '2', '3']}
-        gridTemplateColumns={['100%', '100%', '1fr 1fr', '1fr 1fr 1fr 1fr']}
-      >
-        <Supply
-          borderRightWidth={['0px', '0px', '1px', '1px']}
-          circulatingSupply={tokenInfo.extended?.circulatingSupply}
-          totalSupply={tokenInfo.basic?.totalSupply}
-        />
-        <Price
-          currentPrice={tokenInfo.extended?.currentPrice}
-          priceChangePercentage24h={tokenInfo.extended?.priceChangePercentage24h}
-          currentPriceInBtc={tokenInfo.extended?.currentPriceInBtc}
-          priceInBtcChangePercentage24h={tokenInfo.extended?.priceInBtcChangePercentage24h}
-          borderRightWidth={['0px', '0px', '0px', '1px']}
-        />
-        <MarketCap
-          marketCap={tokenInfo.extended?.marketCap}
-          tradingVolume24h={tokenInfo.extended?.tradingVolume24h}
-          tradingVolumeChangePercentage24h={tokenInfo.extended?.tradingVolumeChangePercentage24h}
-          borderRightWidth={['0px', '0px', '1px', '1px']}
-        />
-        <Transaction txId={txId} tvl={tokenInfo.extended?.tvl} />
-      </Card>
-    </ErrorBoundary>
-  );
-};
diff --git a/src/app/token/[tokenId]/__tests__/utils.test.ts b/src/app/token/[tokenId]/__tests__/utils.test.ts
deleted file mode 100644
index 214c873ef..000000000
--- a/src/app/token/[tokenId]/__tests__/utils.test.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import { StxIcon } from '@/ui/icons';
-import { isExplorerLink, getUrlName, getLinkIcon } from '../utils';
-import { BsDiscord, BsTwitter } from 'react-icons/bs';
-import { BiLinkExternal, BiLogoTelegram } from 'react-icons/bi';
-
-describe('isExplorerLink', () => {
-  it('should return true for stacks.co explorer url', () => {
-    expect(isExplorerLink('https://explorer.stacks.co')).toBe(true);
-  });
-
-  it('should return true for hiro.so explorer url', () => {
-    expect(isExplorerLink('https://explorer.hiro.so')).toBe(true);
-  });
-
-  it('should return false for non explorer url', () => {
-    expect(isExplorerLink('https://github.com')).toBe(false);
-  });
-});
-
-describe('getUrlName', () => {
-  it('should return hostname without protocol and www', () => {
-    expect(getUrlName('https://www.github.com')).toBe('github.com');
-  });
-
-  it('should return hostname without protocol for urls without www', () => {
-    expect(getUrlName('https://twitter.com')).toBe('twitter.com');
-  });
-
-  it('should return undefined for invalid urls', () => {
-    expect(getUrlName('notAUrl')).toBe(undefined);
-  });
-});
-
-describe('getLinkIcon', () => {
-  it('should return BsDiscord for discord url', () => {
-    expect(getLinkIcon('https://discord.com/')).toBe(BsDiscord);
-  });
-
-  it('should return StxIcon for explorer url', () => {
-    expect(getLinkIcon('https://explorer.stacks.co')).toBe(StxIcon);
-  });
-
-  it('should return BsTwitter for twitter url', () => {
-    expect(getLinkIcon('https://twitter.com/')).toBe(BsTwitter);
-  });
-
-  it('should return BiLogoTelegram for telegram url', () => {
-    expect(getLinkIcon('https://t.me/')).toBe(BiLogoTelegram);
-  });
-
-  it('should return BiLinkExternal for any other url', () => {
-    expect(getLinkIcon('https://github.com')).toBe(BiLinkExternal);
-  });
-});
diff --git a/src/app/token/[tokenId]/error.tsx b/src/app/token/[tokenId]/error.tsx
deleted file mode 100644
index 83fcaacdf..000000000
--- a/src/app/token/[tokenId]/error.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-'use client';
-
-import { PageTitle } from '@/app/common/components/PageTitle';
-import { buildUrl } from '@/app/common/utils/buildUrl';
-import { useGlobalContext } from '@/common/context/useAppContext';
-import { MessageWithIcon } from '@/components/message-with-icon';
-import { Meta } from '@/components/meta-head';
-import { Section } from '@/components/section';
-import { ButtonLink } from '@/ui/ButtonLink';
-import { Box, Grid, Stack } from '@/ui/components';
-import * as Sentry from '@sentry/nextjs';
-import * as React from 'react';
-import { useEffect } from 'react';
-import { TbAlertOctagon } from 'react-icons/tb';
-
-export default function Error({ error }: { error: any; reset: () => void }) {
-  useEffect(() => {
-    console.error(error);
-    if (error.status === 404) return;
-    Sentry.captureException(error);
-  }, [error]);
-  const network = useGlobalContext().activeNetwork;
-  return (
-    <>
-      <Meta title="Token not found" />
-      <PageTitle>Token not found</PageTitle>
-      <Section>
-        <Grid placeItems="center" p="32px" minHeight="350px">
-          <Box>
-            <MessageWithIcon
-              icon={TbAlertOctagon}
-              title="This ID doesn't seem right."
-              message="It looks like the token ID provided isn't correct."
-              action={
-                <Stack isInline spacing="16px">
-                  <Box>
-                    <ButtonLink href={buildUrl('/', network)} mt="24px">
-                      Go home
-                    </ButtonLink>
-                  </Box>
-                  <Box>
-                    <ButtonLink href={buildUrl('/tokens', network)} variant="secondary" mt="24px">
-                      All tokens
-                    </ButtonLink>
-                  </Box>
-                </Stack>
-              }
-            />
-          </Box>
-        </Grid>
-      </Section>
-    </>
-  );
-}
diff --git a/src/app/token/[tokenId]/head.tsx b/src/app/token/[tokenId]/head.tsx
deleted file mode 100644
index 90e0181be..000000000
--- a/src/app/token/[tokenId]/head.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { DefaultHeadTags } from '../../DefaultHeadTags';
-import { defaultTitle } from '../../common/consts/head';
-
-export default function Head() {
-  const title = `Token - ${defaultTitle}`;
-  return (
-    <>
-      <title>{title}</title>
-      <meta property="og:title" content={title} />
-      <DefaultHeadTags />
-    </>
-  );
-}
diff --git a/src/app/token/[tokenId]/index.tsx b/src/app/token/[tokenId]/index.tsx
deleted file mode 100644
index 2a3bcb214..000000000
--- a/src/app/token/[tokenId]/index.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import dynamic from 'next/dynamic';
-import { SkeletonPageWithTagsAndTwoColumns } from '@/components/loaders/skeleton-transaction';
-import { useRouter } from 'next/router';
-import { ErrorBoundary } from 'react-error-boundary';
-import AppTokenPageError from '@/app/token/[tokenId]/error';
-import { TokenInfoProps } from '@/pages/token/[tokenId]';
-
-const renderLoadingComponent = () => <SkeletonPageWithTagsAndTwoColumns />;
-
-const renderErrorComponent = ({
-  error,
-  resetErrorBoundary,
-}: {
-  error: Error;
-  resetErrorBoundary: () => void;
-}) => <AppTokenPageError error={error} reset={resetErrorBoundary} />;
-
-export const TokenPageLazy = dynamic(() => import('./page'), {
-  loading: renderLoadingComponent,
-  ssr: true,
-});
-
-export function TokenPage(props: TokenInfoProps) {
-  const { query } = useRouter();
-  const tokenId = query.tokenId as string;
-  return (
-    <ErrorBoundary fallbackRender={renderErrorComponent}>
-      <TokenPageLazy tokenId={tokenId} tokenInfo={props} />
-    </ErrorBoundary>
-  );
-}
diff --git a/src/app/token/[tokenId]/page.tsx b/src/app/token/[tokenId]/page.tsx
deleted file mode 100644
index 64464c939..000000000
--- a/src/app/token/[tokenId]/page.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import { Flex } from '@/ui/components';
-import { Title } from '@/ui/typography';
-import { TokenInfo } from './TokenInfo';
-import { TokenInfoProps } from '@/pages/token/[tokenId]';
-import { useRouter } from 'next/router';
-import { StyledBadge } from '@/components/status';
-import { Stack } from '@/ui/Stack';
-import { Tabs } from './Tabs';
-import React from 'react';
-import { LinksMenu } from '@/app/token/[tokenId]/LinksMenu';
-
-function TokenPage({ tokenId, tokenInfo }: { tokenId: string; tokenInfo: TokenInfoProps }) {
-  if (!tokenInfo.basic) throw new Error('Could not find token info');
-
-  const { name, symbol } = tokenInfo.basic;
-  const categories = tokenInfo.extended?.categories || [];
-
-  const { query } = useRouter();
-
-  return (
-    <Flex mt="72px" gap="24px" width="100%" direction={'column'}>
-      <Stack gap={'16px'}>
-        <Flex alignItems={'center'} justifyContent={'space-between'} width={'100%'}>
-          <Title
-            as="h1"
-            fontSize="36px"
-            display="block"
-            width="100%"
-            textAlign={['center', 'left']}
-            data-test="homepage-title"
-            color="white"
-            gridColumnStart={'1'}
-            gridColumnEnd={['2', '2', '3']}
-          >
-            {name} ({symbol})
-          </Title>
-          {!!tokenInfo.extended?.links && <LinksMenu links={tokenInfo.extended.links} />}
-        </Flex>
-        {!!categories.length && (
-          <Stack isInline spacing="8px" mt={'0px !important'}>
-            {categories.map(category => (
-              <StyledBadge>{category}</StyledBadge>
-            ))}
-          </Stack>
-        )}
-      </Stack>
-      <TokenInfo tokenInfo={tokenInfo} txId={query.tokenId as string} />
-      <Tabs
-        tokenId={tokenId}
-        developerData={
-          !!tokenInfo.extended?.links?.repos?.length ? tokenInfo.extended?.developerData : undefined
-        }
-      />
-    </Flex>
-  );
-}
-
-export default TokenPage;
diff --git a/src/app/token/[tokenId]/utils.ts b/src/app/token/[tokenId]/utils.ts
deleted file mode 100644
index 75e16ab01..000000000
--- a/src/app/token/[tokenId]/utils.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { BsDiscord, BsTwitter } from 'react-icons/bs';
-import { StxIcon } from '@/ui/icons';
-import { BiLinkExternal, BiLogoTelegram } from 'react-icons/bi';
-
-export const isExplorerLink = (url: string) => {
-  return url.includes('explorer.stacks.co') || url.includes('explorer.hiro.so');
-};
-
-export const getUrlName = (url: string) => {
-  try {
-    const urlObj = new URL(url);
-    return urlObj.hostname.replace('http://', '').replace('https://', '').replace('www.', '');
-  } catch (_) {
-    return undefined;
-  }
-};
-
-export const getLinkIcon = (url: string) => {
-  if (url.includes('discord.com/')) {
-    return BsDiscord;
-  }
-  if (isExplorerLink(url)) {
-    return StxIcon;
-  }
-  if (url.includes('twitter.com/')) {
-    return BsTwitter;
-  }
-  if (url.includes('/t.me/')) {
-    return BiLogoTelegram;
-  }
-  return BiLinkExternal;
-};
diff --git a/src/app/tokens/TokenRow/index.tsx b/src/app/tokens/TokenRow/index.tsx
deleted file mode 100644
index a5a7a5a05..000000000
--- a/src/app/tokens/TokenRow/index.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-'use client';
-
-import { FC } from 'react';
-import { Tr } from '@/ui/Tr';
-import { Td } from '@/ui/Td';
-import { numberToString } from '@/common/utils';
-import { Circle } from '@/ui/Circle';
-import { Image } from '@/ui/Image';
-import { Flex } from '@/ui/Flex';
-import { Text } from '@/ui/typography';
-import { useColorMode } from '@chakra-ui/react';
-import { TokenLink, TxLink } from '@/components/links';
-import { Show } from '@/ui/Show';
-import { Th } from '@/ui/Th';
-
-export const TokenRow: FC<{
-  name: string;
-  txId: string;
-  tokenId: string;
-  imgUrl?: string;
-  symbol?: string;
-  totalSupply?: string;
-}> = ({ symbol, imgUrl, name, totalSupply, txId, tokenId }) => {
-  const colorMode = useColorMode().colorMode;
-  return (
-    <Tr>
-      <Td padding={'10px 20px 10px 16px'} width={['auto', 'auto', '30%']}>
-        <Flex alignItems={'center'} gap={'8px'}>
-          <Image
-            width={'36px'}
-            height={'36px'}
-            src={imgUrl}
-            fallback={
-              <Circle size="36px" flexShrink={'0'}>
-                {name[0].toUpperCase()}
-              </Circle>
-            }
-          />
-          <TokenLink tokenId={tokenId}>
-            <Text
-              as={'a'}
-              fontSize={'15px'}
-              whiteSpace={'nowrap'}
-              textOverflow={'ellipsis'}
-              overflow={'hidden'}
-              color={`links.${colorMode}`}
-              cursor={'pointer'}
-            >
-              {name} ({symbol})
-            </Text>
-          </TokenLink>
-        </Flex>
-      </Td>
-      <Td padding={'10px'} display={['none', 'none', 'table-cell']}>
-        <Text
-          fontSize={'15px'}
-          whiteSpace={'nowrap'}
-          textOverflow={'ellipsis'}
-          overflow={'hidden'}
-          color={`links.${colorMode}`}
-        >
-          <TxLink txId={txId}>{txId}</TxLink>
-        </Text>
-      </Td>
-      <Td isNumeric width={'130px'} padding={'10px 16px 10px 20px'}>
-        <Text whiteSpace={'nowrap'} textOverflow={'ellipsis'} overflow={'hidden'} fontSize={'15px'}>
-          {numberToString(totalSupply ? Number(totalSupply) : 0)}
-        </Text>
-      </Td>
-    </Tr>
-  );
-};
diff --git a/src/app/tokens/TokenRow/loading.tsx b/src/app/tokens/TokenRow/loading.tsx
deleted file mode 100644
index 661fd5b27..000000000
--- a/src/app/tokens/TokenRow/loading.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { ExplorerSkeletonLoader } from '@/components/loaders/skeleton-common';
-import { Box } from '@/ui/Box';
-import { Flex } from '@/ui/Flex';
-import React, { FC } from 'react';
-import { Td } from '@/ui/Td';
-import { Tr } from '@/ui/Tr';
-import { Show } from '@/ui/components';
-
-export const Loading: FC = () => {
-  return (
-    <Tr>
-      <Td padding={'10px 20px 10px 16px'} width={['auto', 'auto', '30%']}>
-        <Flex alignItems={'center'} gap={'8px'}>
-          <ExplorerSkeletonLoader width={'36px'} height={'36px'} />
-          <Box width={'100%'} maxWidth={'120px'}>
-            <ExplorerSkeletonLoader height={'15px'} />
-          </Box>
-        </Flex>
-      </Td>
-      <Td padding={'10px'} display={['none', 'none', 'table-cell']}>
-        <Box maxWidth={'500px'}>
-          <ExplorerSkeletonLoader height={'15px'} />
-        </Box>
-      </Td>
-      <Td isNumeric width={'130px'} padding={'10px 16px 10px 20px'}>
-        <Box maxWidth={'70px'} marginLeft={'auto'}>
-          <ExplorerSkeletonLoader height={'15px'} />
-        </Box>
-      </Td>
-    </Tr>
-  );
-};
diff --git a/src/app/tokens/TokensList/TokensList.tsx b/src/app/tokens/TokensList/TokensList.tsx
deleted file mode 100644
index 44d277b3b..000000000
--- a/src/app/tokens/TokensList/TokensList.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-'use client';
-
-import { FC } from 'react';
-import {
-  Grid,
-  Icon,
-  Input,
-  InputGroup,
-  InputRightElement,
-  Table,
-  TableContainer,
-  Tbody,
-  Th,
-  Thead,
-  Tr,
-} from '@/ui/components';
-import { Section } from '@/components/section';
-import { TokenRow } from '@/app/tokens/TokenRow';
-import { SectionFooterAction } from '@/components/section-footer-button';
-import { TbSearch } from 'react-icons/tb';
-import { useColorMode } from '@chakra-ui/react';
-import { Text } from '@/ui/Text';
-import { useTokens } from '@/app/tokens/useTokens';
-
-const TokensList: FC = () => {
-  const colorMode = useColorMode().colorMode;
-  const { searchTerm, setSearchTerm, allFtTokensDeduped, isLoading, hasMore, loadMore } =
-    useTokens();
-
-  return (
-    <Section
-      title={'Tokens'}
-      gridColumnStart={['1', '1', '2']}
-      gridColumnEnd={['2', '2', '3']}
-      minWidth={0}
-      topRight={
-        <InputGroup>
-          <InputRightElement pointerEvents="none">
-            <Icon as={TbSearch} color={`textCaption.${colorMode}`} />
-          </InputRightElement>
-          <Input
-            type="text"
-            placeholder="Token name, symbol or address"
-            _placeholder={{ color: `textCaption.${colorMode}` }}
-            width={['200px', '300px']}
-            paddingRight={'35px'}
-            value={searchTerm}
-            onChange={e => setSearchTerm(e.target.value)}
-          />
-        </InputGroup>
-      }
-    >
-      {!!allFtTokensDeduped.length ? (
-        <TableContainer>
-          <Table
-            variant="simple"
-            overflowX={'auto'}
-            __css={{ tableLayout: 'fixed', width: 'full' }}
-          >
-            <Thead>
-              <Tr>
-                <Th padding={'10px 20px 10px 16px'} width={['auto', 'auto', '30%']}>
-                  Token
-                </Th>
-                <Th padding={'10px'} display={['none', 'none', 'table-cell']}>
-                  Tx ID
-                </Th>
-                <Th isNumeric width={'130px'} padding={'10px 16px 10px 20px'}>
-                  Total supply
-                </Th>
-              </Tr>
-            </Thead>
-            <Tbody>
-              {allFtTokensDeduped.map(
-                (ftToken, i) =>
-                  !!ftToken.name && (
-                    <TokenRow
-                      key={ftToken.tx_id}
-                      name={ftToken.name}
-                      txId={ftToken.tx_id}
-                      symbol={ftToken.symbol}
-                      totalSupply={ftToken.total_supply}
-                      imgUrl={ftToken.image_uri}
-                      tokenId={(ftToken as any).contract_principal}
-                    />
-                  )
-              )}
-            </Tbody>
-          </Table>
-          <SectionFooterAction
-            isLoading={isLoading}
-            hasNextPage={hasMore}
-            fetchNextPage={loadMore}
-            label={'tokens'}
-          />
-        </TableContainer>
-      ) : (
-        <Grid placeItems="center" px="16px" py="32px" width={'100%'}>
-          <Text color={'textCaption'} mt="32px">
-            No tokens found
-          </Text>
-        </Grid>
-      )}
-    </Section>
-  );
-};
-
-export default TokensList;
diff --git a/src/app/tokens/TokensList/index.tsx b/src/app/tokens/TokensList/index.tsx
deleted file mode 100644
index f48f3324a..000000000
--- a/src/app/tokens/TokensList/index.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import dynamic from 'next/dynamic';
-import { ErrorBoundary } from 'react-error-boundary';
-import { QueryErrorResetBoundary } from '@tanstack/react-query';
-import { Loading } from './loading';
-import { FC } from 'react';
-
-const renderLoadingComponent = () => <Loading />;
-const renderErrorComponent = () => null;
-
-const TokensListLazy = dynamic(() => import('./TokensList'), {
-  loading: renderLoadingComponent,
-  ssr: false,
-});
-
-export const TokensList: FC = () => (
-  <QueryErrorResetBoundary>
-    {({ reset }) => (
-      <ErrorBoundary
-        fallbackRender={renderErrorComponent}
-        onError={error => {
-          // TODO: log error to error reporting service
-          console.log(error);
-        }}
-        onReset={reset}
-      >
-        <TokensListLazy />
-      </ErrorBoundary>
-    )}
-  </QueryErrorResetBoundary>
-);
diff --git a/src/app/tokens/TokensList/loading.tsx b/src/app/tokens/TokensList/loading.tsx
deleted file mode 100644
index 250b3f027..000000000
--- a/src/app/tokens/TokensList/loading.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { InputGroup } from '@/ui/InputGroup';
-import { InputRightElement } from '@/ui/InputRightElement';
-import { Icon } from '@/ui/Icon';
-import { TbSearch } from 'react-icons/tb';
-import { TableContainer } from '@/ui/TableContainer';
-import { Table } from '@/ui/Table';
-import { Thead } from '@/ui/Thead';
-import { Tr } from '@/ui/Tr';
-import { Th } from '@/ui/Th';
-import { Tbody } from '@/ui/Tbody';
-import { Section } from '@/components/section';
-import { ExplorerSkeletonLoader } from '@/components/loaders/skeleton-common';
-import { FC } from 'react';
-import { useColorMode } from '@chakra-ui/react';
-import { Loading as TokenRowLoading } from '../TokenRow/loading';
-import { Show } from '@/ui/components';
-
-export const Loading: FC = () => {
-  const colorMode = useColorMode().colorMode;
-  return (
-    <Section
-      title={'Tokens'}
-      gridColumnStart={['1', '1', '2']}
-      gridColumnEnd={['2', '2', '3']}
-      minWidth={0}
-      topRight={
-        <InputGroup>
-          <InputRightElement pointerEvents="none">
-            <Icon as={TbSearch} color={`textCaption.${colorMode}`} />
-          </InputRightElement>
-          <ExplorerSkeletonLoader width={'200px'} height={'40px'} />
-        </InputGroup>
-      }
-    >
-      <TableContainer>
-        <Table variant="simple" __css={{ tableLayout: 'fixed', width: 'full' }}>
-          <Thead>
-            <Tr>
-              <Th padding={'10px 20px 10px 16px'} width={['auto', 'auto', '30%']}>
-                Token
-              </Th>
-              <Th padding={'10px'} display={['none', 'none', 'table-cell']}>
-                Tx ID
-              </Th>
-              <Th isNumeric width={'130px'} padding={'10px 16px 10px 20px'}>
-                Total supply
-              </Th>
-            </Tr>
-          </Thead>
-          <Tbody>
-            {Array.from({ length: 30 }).map((_, index) => (
-              <TokenRowLoading key={index} />
-            ))}
-          </Tbody>
-        </Table>
-      </TableContainer>
-    </Section>
-  );
-};
diff --git a/src/app/tokens/__tests__/TokenRow.test.tsx b/src/app/tokens/__tests__/TokenRow.test.tsx
deleted file mode 100644
index 5d8b65a90..000000000
--- a/src/app/tokens/__tests__/TokenRow.test.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import renderer from 'react-test-renderer';
-import { TokenRow } from '../TokenRow';
-import { Table } from '@/ui/Table';
-
-describe('TokenRow', () => {
-  it('renders correctly', () => {
-    const tree = renderer
-      .create(
-        <Table>
-          <TokenRow
-            name="TestToken"
-            txId="0x1234"
-            tokenId="0x5678"
-            imgUrl="https://example.com/token.png"
-            symbol="TT"
-            totalSupply="1000000"
-          />
-        </Table>
-      )
-      .toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-});
diff --git a/src/app/tokens/__tests__/__snapshots__/TokenRow.test.tsx.snap b/src/app/tokens/__tests__/__snapshots__/TokenRow.test.tsx.snap
deleted file mode 100644
index 866af1ed5..000000000
--- a/src/app/tokens/__tests__/__snapshots__/TokenRow.test.tsx.snap
+++ /dev/null
@@ -1,63 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`TokenRow renders correctly 1`] = `
-<table
-  className="chakra-table css-1dupj0l"
->
-  <tr
-    className="css-1dupj0l"
-  >
-    <td
-      className="css-xbj9s6"
-    >
-      <div
-        className="css-fj90sq"
-      >
-        <div
-          className="css-n9bdsq"
-        >
-          T
-        </div>
-        <a
-          className="chakra-text css-1pdvkva"
-          href="/token/0x5678?chain=mainnet"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          onTouchStart={[Function]}
-        >
-          TestToken
-           (
-          TT
-          )
-        </a>
-      </div>
-    </td>
-    <td
-      className="css-1hpakfx"
-    >
-      <span
-        className="chakra-text css-1s346xd"
-      >
-        <a
-          href="/txid/0x1234?chain=mainnet"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          onTouchStart={[Function]}
-        >
-          0x1234
-        </a>
-      </span>
-    </td>
-    <td
-      className="css-oz02zu"
-      data-is-numeric={true}
-    >
-      <span
-        className="chakra-text css-1tlynor"
-      >
-        1.00M
-      </span>
-    </td>
-  </tr>
-</table>
-`;
diff --git a/src/app/tokens/__tests__/useTokens.test.tsx b/src/app/tokens/__tests__/useTokens.test.tsx
deleted file mode 100644
index 755b91034..000000000
--- a/src/app/tokens/__tests__/useTokens.test.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { renderHook, act } from '@testing-library/react-hooks';
-import { useTokens } from '../useTokens';
-import { FC } from 'react';
-import { useInfiniteQueryResult } from '@/app/common/hooks/useInfiniteQueryResult';
-import { useFtTokens } from '@/app/tokens/useFtTokens';
-
-jest.mock('@/app/tokens/useFtTokens');
-jest.mock('@/app/common/hooks/useInfiniteQueryResult');
-
-describe('useTokens', () => {
-  const queryClient = new QueryClient();
-  const wrapper: FC = ({ children }) => (
-    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
-  );
-
-  beforeEach(() => {
-    (useFtTokens as jest.Mock).mockReturnValue({
-      data: {
-        pages: [
-          {
-            results: [],
-          },
-        ],
-      },
-    });
-    (useInfiniteQueryResult as jest.Mock).mockImplementation(
-      response => response.data.pages[0].results
-    );
-  });
-
-  it('initializes with default values', () => {
-    const { result } = renderHook(() => useTokens(), { wrapper });
-
-    expect(result.current.searchTerm).toBe('');
-    expect(result.current.allFtTokensDeduped).toEqual([]);
-    expect(result.current.isLoading).toBe(false);
-    expect(result.current.hasMore).toBe(false);
-    expect(typeof result.current.loadMore).toBe('function');
-  });
-
-  it('updates searchTerm correctly', () => {
-    const { result } = renderHook(() => useTokens(), { wrapper });
-
-    act(() => {
-      result.current.setSearchTerm('new term');
-    });
-    expect(result.current.searchTerm).toBe('new term');
-  });
-
-  it('returns deduped tokens', () => {
-    const tokens = [
-      { tx_id: 'token1', name: 'token1', symbol: 'token1' },
-      { tx_id: 'token2', name: 'token2', symbol: 'token2' },
-    ];
-
-    (useFtTokens as jest.Mock).mockImplementationOnce(params => {
-      return {
-        data: {
-          pages: [
-            {
-              results: [
-                ...tokens,
-                tokens[0], // duplicate token
-              ],
-            },
-          ],
-        },
-      };
-    });
-
-    const { result } = renderHook(() => useTokens(), { wrapper });
-    expect(result.current.allFtTokensDeduped).toEqual(tokens);
-  });
-});
diff --git a/src/app/tokens/head.tsx b/src/app/tokens/head.tsx
deleted file mode 100644
index 3433d5ebf..000000000
--- a/src/app/tokens/head.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { DefaultHeadTags } from '../DefaultHeadTags';
-
-export default function Head() {
-  const title = `Token Tracker`;
-  return (
-    <>
-      <title>{title}</title>
-      <meta property="og:title" content={title} />
-      <DefaultHeadTags />
-    </>
-  );
-}
diff --git a/src/app/tokens/page.tsx b/src/app/tokens/page.tsx
deleted file mode 100644
index 30e4c484d..000000000
--- a/src/app/tokens/page.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-'use client';
-
-import { PageTitle } from '@/app/common/components/PageTitle';
-import type { NextPage } from 'next';
-import { TokensList } from '@/app/tokens/TokensList';
-
-const TokensPage: NextPage = () => (
-  <>
-    <PageTitle>Token Tracker</PageTitle>
-    <TokensList />
-  </>
-);
-
-export default TokensPage;
diff --git a/src/app/tokens/useFtTokens.ts b/src/app/tokens/useFtTokens.ts
deleted file mode 100644
index 8913c8c6e..000000000
--- a/src/app/tokens/useFtTokens.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import { useApi } from '@/common/api/client';
-import { useInfiniteQuery, UseQueryOptions } from '@tanstack/react-query';
-import { DEFAULT_LIST_LIMIT } from '@/common/constants';
-import { getNextPageParam } from '@/common/utils';
-import { FIVE_MINUTES } from '@/app/common/queries/query-stale-time';
-
-export const useFtTokens = (
-  {
-    name,
-    symbol,
-    address,
-    order_by,
-    order,
-  }: {
-    name?: string;
-    symbol?: string;
-    address?: string;
-    order_by?: any;
-    order?: any;
-  },
-  options: UseQueryOptions<any, any, any, any> = {}
-) => {
-  const { tokenMetadataApi } = useApi();
-  return useInfiniteQuery(
-    ['ftTokens', name, symbol, address, order_by, order],
-    async ({ pageParam }) => {
-      return tokenMetadataApi?.getFungibleTokens(
-        name,
-        symbol,
-        address,
-        pageParam || 0,
-        DEFAULT_LIST_LIMIT,
-        order_by,
-        order
-      );
-    },
-    {
-      getNextPageParam,
-      staleTime: FIVE_MINUTES,
-      ...options,
-    }
-  );
-};
diff --git a/src/app/tokens/useTokens.ts b/src/app/tokens/useTokens.ts
deleted file mode 100644
index 8483e2868..000000000
--- a/src/app/tokens/useTokens.ts
+++ /dev/null
@@ -1,99 +0,0 @@
-import { useCallback, useMemo, useState } from 'react';
-import { useDebounce } from '@/app/common/hooks/use-debounce';
-import { useFtTokens } from '@/app/tokens/useFtTokens';
-import { useInfiniteQueryResult } from '@/app/common/hooks/useInfiniteQueryResult';
-import { FtBasicMetadataResponse } from '@hirosystems/token-metadata-api-client';
-
-export const useTokens = (): {
-  searchTerm: string;
-  setSearchTerm: (searchTerm: string) => void;
-  allFtTokensDeduped: FtBasicMetadataResponse[];
-  isLoading: boolean;
-  hasMore: boolean;
-  loadMore: () => void;
-} => {
-  const [searchTerm, setSearchTerm] = useState<string>('');
-  const debouncedSearchTerm = useDebounce(searchTerm, 500);
-
-  const searchByNameResponse = useFtTokens({ name: debouncedSearchTerm || undefined });
-
-  const searchBySymbol = !!debouncedSearchTerm;
-  const searchByAddress = new RegExp('^[0123456789ABCDEFGHJKMNPQRSTVWXYZ]{28,41}').test(
-    debouncedSearchTerm
-  );
-
-  const searchBySymbolResponse = useFtTokens(
-    { symbol: debouncedSearchTerm },
-    { enabled: !!searchBySymbol }
-  );
-  const searchByAddressResponse = useFtTokens(
-    { address: debouncedSearchTerm },
-    { enabled: searchByAddress }
-  );
-
-  const ftTokensSearchedByName =
-    useInfiniteQueryResult<FtBasicMetadataResponse>(searchByNameResponse);
-  const ftTokensSearchedBySymbol =
-    useInfiniteQueryResult<FtBasicMetadataResponse>(searchBySymbolResponse);
-  const ftTokensSearchedByAddress =
-    useInfiniteQueryResult<FtBasicMetadataResponse>(searchByAddressResponse);
-
-  const allFtTokensDeduped = useMemo(() => {
-    const allFtTokens = [
-      ...ftTokensSearchedByName,
-      ...ftTokensSearchedBySymbol,
-      ...ftTokensSearchedByAddress,
-    ];
-    const uniqueFtTokens = new Map<string, FtBasicMetadataResponse>();
-    allFtTokens.forEach(ftToken => {
-      uniqueFtTokens.set(ftToken.tx_id, ftToken);
-    });
-    return Array.from(uniqueFtTokens.values());
-  }, [ftTokensSearchedByAddress, ftTokensSearchedByName, ftTokensSearchedBySymbol]);
-
-  const loadMore = useCallback(() => {
-    void searchByNameResponse.fetchNextPage();
-    if (searchBySymbol) {
-      void searchBySymbolResponse.fetchNextPage();
-    }
-    if (searchByAddress) {
-      void searchByAddressResponse.fetchNextPage();
-    }
-  }, [
-    searchByAddress,
-    searchByAddressResponse,
-    searchByNameResponse,
-    searchBySymbol,
-    searchBySymbolResponse,
-  ]);
-
-  const hasMore = useMemo(() => {
-    return !!(
-      searchByNameResponse.hasNextPage ||
-      (searchBySymbol && searchBySymbolResponse.hasNextPage) ||
-      (searchByAddress && searchByAddressResponse.hasNextPage)
-    );
-  }, [
-    searchByAddress,
-    searchByAddressResponse.hasNextPage,
-    searchByNameResponse.hasNextPage,
-    searchBySymbol,
-    searchBySymbolResponse.hasNextPage,
-  ]);
-
-  const isLoading = useMemo(() => {
-    return (
-      searchByNameResponse.isFetching ||
-      (searchBySymbol && searchBySymbolResponse.isFetching) ||
-      (searchByAddress && searchByAddressResponse.isFetching)
-    );
-  }, [
-    searchByAddress,
-    searchByAddressResponse.isFetching,
-    searchByNameResponse.isFetching,
-    searchBySymbol,
-    searchBySymbolResponse.isFetching,
-  ]);
-
-  return { searchTerm, setSearchTerm, allFtTokensDeduped, isLoading, hasMore, loadMore };
-};
diff --git a/src/app/transactions/head.tsx b/src/app/transactions/head.tsx
deleted file mode 100644
index eadcd23aa..000000000
--- a/src/app/transactions/head.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { DefaultHeadTags } from '../DefaultHeadTags';
-
-export default function Head() {
-  const title = `Recent transactions`;
-  return (
-    <>
-      <title>{title}</title>
-      <meta property="og:title" content={title} />
-      <DefaultHeadTags />
-    </>
-  );
-}
diff --git a/src/app/transactions/loading.tsx b/src/app/transactions/loading.tsx
deleted file mode 100644
index 4206ef957..000000000
--- a/src/app/transactions/loading.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import { TxListTabs } from '@/app/common/components/tx-lists/tabs/TxListTabs';
-import { ExplorerSkeletonLoader } from '@/components/loaders/skeleton-common';
-import { Box } from '@/ui/Box';
-import { Flex } from '@/ui/Flex';
-import { Title } from '@/ui/typography';
-import React from 'react';
-
-function SSRSkeletonTxList() {
-  return (
-    <Box position={'relative'} px={'20px'}>
-      {[...Array(10)].map((_, i) => (
-        <Flex flexGrow={1} gap={'16px'} alignItems={'center'} py={'24px'} minWidth={0}>
-          <Box width={'40px'}>
-            <ExplorerSkeletonLoader width={'40px'} height={'40px'} circle={true} />
-          </Box>
-          <Flex direction={'column'} gap={'6px'} minWidth={0}>
-            <Flex direction={'column'} minHeight={'24px'} justifyContent={'center'}>
-              <ExplorerSkeletonLoader width={'275px'} height={'20px'} />
-            </Flex>
-            <Box>
-              <ExplorerSkeletonLoader width={'212px'} height={'16px'} />
-            </Box>
-          </Flex>
-          <Flex direction={'column'} gap={'8px'} ml={'auto'} flexShrink={0}>
-            <Box alignSelf={'flex-end'}>
-              <ExplorerSkeletonLoader width={'79px'} height={'14px'} />
-            </Box>
-            <Box alignSelf={'flex-end'}>
-              <ExplorerSkeletonLoader width={'185px'} height={'12px'} />
-            </Box>
-          </Flex>
-        </Flex>
-      ))}
-    </Box>
-  );
-}
-
-export default function Loading() {
-  return (
-    <>
-      <Box mb="32px">
-        <Title mt="72px" color="white" as="h1" fontSize="36px">
-          Transactions
-        </Title>
-      </Box>
-      <TxListTabs confirmedList={<SSRSkeletonTxList />} mempoolList={<SSRSkeletonTxList />} />
-    </>
-  );
-}
diff --git a/src/app/transactions/page.tsx b/src/app/transactions/page.tsx
deleted file mode 100644
index 88cfbafab..000000000
--- a/src/app/transactions/page.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-'use client';
-
-import { PageTitle } from '@/app/common/components/PageTitle';
-import { Box } from '@/ui/components';
-import { Title } from '@/ui/typography';
-import { NextPage } from 'next';
-import React from 'react';
-
-import { DefaultTxListTabs } from '../common/components/tx-lists/tabs/DefaultTxListTabs';
-
-const TransactionsPage: NextPage = () => {
-  return (
-    <>
-      <PageTitle>Transactions</PageTitle>
-      <DefaultTxListTabs />
-    </>
-  );
-};
-
-export default TransactionsPage;
diff --git a/src/app/txid/TransactionPageComponent.tsx b/src/app/txid/TransactionPageComponent.tsx
deleted file mode 100644
index 5849a4277..000000000
--- a/src/app/txid/TransactionPageComponent.tsx
+++ /dev/null
@@ -1,139 +0,0 @@
-'use client';
-
-import { getTransactionTypeLabel } from '@/app/common/components/tx-lists/utils/tx';
-import { useContractById } from '@/app/common/queries/useContractById';
-import { useTxById } from '@/app/common/queries/useTxById';
-import { useApi } from '@/common/api/client';
-import { TransactionStatus } from '@/common/constants';
-import { getContractId, toRelativeTime } from '@/common/utils';
-import { getTransactionStatus } from '@/common/utils/transactions';
-import { Meta } from '@/components/meta-head';
-import { getDescription, getOgTitle } from '@/components/meta/transactions';
-import dynamic from 'next/dynamic';
-import * as React from 'react';
-import { FC, useMemo } from 'react';
-
-import { SkeletonPageWithTagsAndTwoColumns } from '../../components/loaders/skeleton-transaction';
-import { useBlockByHash } from '../common/queries/useBlockByHash';
-import { CoinbasePage } from './[txid]/CoinbasePage';
-import { ContractCallPage } from './[txid]/ContractCall';
-import { PoisonMicroblock } from './[txid]/PoisonMicroblock';
-import { SmartContractPage } from './[txid]/SmartContractPage';
-import { TokenTransferPage } from './[txid]/TokenTransfer';
-
-const TransactionPageComponentBase: FC<{ txId: string; claritySyntax: Record<string, any> }> = ({
-  txId,
-  claritySyntax,
-}) => {
-  const api = useApi();
-
-  const isContractId = txId.includes('.');
-
-  const { data: mainTx } = useTxById(
-    api,
-    { txId: txId },
-    { enabled: !isContractId, refetchOnWindowFocus: true }
-  );
-  const { data: contract } = useContractById(api, { contractId: txId }, { enabled: isContractId });
-  const { data: contractTx } = useTxById(
-    api,
-    { txId: contract?.tx_id || '' },
-    { enabled: !!contract?.tx_id }
-  );
-
-  const tx = isContractId ? contractTx : mainTx;
-  const hasBlockHash = tx && 'block_hash' in tx && tx.block_hash !== '0x';
-
-  const { data: block } = useBlockByHash(
-    api,
-    { hash: hasBlockHash ? tx.block_hash : '' },
-    { enabled: hasBlockHash }
-  );
-
-  const contractId = getContractId(txId, tx);
-  const txStatus = useMemo(() => getTransactionStatus(tx), [tx]);
-  const pageTitle = `${getTransactionTypeLabel(tx.tx_type)}${
-    txStatus === TransactionStatus.PENDING ? ' (Pending)' : ''
-  }${txStatus === TransactionStatus.FAILED ? ' (Failed) ' : ''}`;
-  const ogTitle = getOgTitle(tx);
-  const ogUrl = `/txid/${tx.tx_id}`;
-  const ogDescription = getDescription(tx);
-  const labels =
-    'burn_block_time' in tx
-      ? [
-          {
-            label: 'Confirmed',
-            data: `${toRelativeTime(tx.burn_block_time * 1000)}, in block #${tx.block_height}`,
-          },
-        ]
-      : undefined;
-
-  const TxMeta = () => (
-    <Meta
-      title={pageTitle}
-      ogTitle={ogTitle}
-      description={ogDescription}
-      url={ogUrl}
-      txStatus={txStatus}
-      key={tx.tx_status}
-      labels={labels}
-    />
-  );
-
-  switch (tx?.tx_type) {
-    case 'coinbase':
-      return (
-        <>
-          <TxMeta />
-          <CoinbasePage tx={tx} block={block} />
-        </>
-      );
-    case 'token_transfer':
-      return (
-        <>
-          <TxMeta />
-          <TokenTransferPage tx={tx} block={block} />
-        </>
-      );
-    case 'contract_call':
-      return (
-        <>
-          <TxMeta />
-          <ContractCallPage
-            tx={tx}
-            block={block}
-            contractId={contractId}
-            claritySyntax={claritySyntax}
-          />
-        </>
-      );
-    case 'smart_contract':
-      return (
-        <>
-          <TxMeta />
-          <SmartContractPage
-            tx={tx}
-            block={block}
-            contractId={contractId}
-            claritySyntax={claritySyntax}
-          />
-        </>
-      );
-    case 'poison_microblock':
-      return (
-        <>
-          <TxMeta />
-          <PoisonMicroblock tx={tx} block={block} />
-        </>
-      );
-    default:
-      return null;
-  }
-};
-
-export default TransactionPageComponentBase;
-
-export const TransactionPageComponent = dynamic(() => import('./TransactionPageComponent'), {
-  loading: () => <SkeletonPageWithTagsAndTwoColumns />,
-  ssr: false,
-});
diff --git a/src/app/txid/[txid]/Cards/BtcAnchorBlockCard.tsx b/src/app/txid/[txid]/Cards/BtcAnchorBlockCard.tsx
deleted file mode 100644
index 33eef795c..000000000
--- a/src/app/txid/[txid]/Cards/BtcAnchorBlockCard.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { useGlobalContext } from '@/common/context/useAppContext';
-import { NetworkModes } from '@/common/types/network';
-import { truncateMiddle } from '@/common/utils';
-import { Section } from '@/components/section';
-import { Box, TextLink } from '@/ui/components';
-import { Text } from '@/ui/typography';
-import { FC } from 'react';
-
-import { Block } from '@stacks/stacks-blockchain-api-types';
-
-import { KeyValueVertical } from '../../../common/components/KeyValueVertical';
-import { useVerticallyStackedElementsBorderStyle } from '../../../common/styles/border';
-
-export const BtcAnchorBlockCard: FC<{ block: Block }> = ({ block }) => {
-  const { btcBlockBaseUrl, btcTxBaseUrl } = useGlobalContext().activeNetwork;
-
-  return (
-    <Section title="Bitcoin anchor">
-      <Box px="16px" css={useVerticallyStackedElementsBorderStyle}>
-        <KeyValueVertical
-          label={'Bitcoin block height'}
-          value={
-            <TextLink as="a" target="_blank" href={`${btcBlockBaseUrl}/${block.burn_block_height}`}>
-              <Text fontSize={'14px'} fontWeight={500}>
-                #{block.burn_block_height}
-              </Text>
-            </TextLink>
-          }
-          copyValue={block.burn_block_height.toString()}
-        />
-        <KeyValueVertical
-          label={'Bitcoin block hash'}
-          value={
-            <TextLink
-              as="a"
-              target="_blank"
-              href={`${btcBlockBaseUrl}/${block.burn_block_hash.replace('0x', '')}`}
-            >
-              <Text fontSize={'14px'} fontWeight={500}>
-                {truncateMiddle(block.burn_block_hash, 8)}
-              </Text>
-            </TextLink>
-          }
-          copyValue={block.burn_block_hash}
-        />
-        <KeyValueVertical
-          label={'Anchor transaction ID'}
-          value={
-            <TextLink
-              as="a"
-              target="_blank"
-              href={`${btcTxBaseUrl}/${block.miner_txid.replace('0x', '')}`}
-            >
-              <Text fontSize={'14px'} fontWeight={500}>
-                {truncateMiddle(block.miner_txid, 8)}
-              </Text>
-            </TextLink>
-          }
-          copyValue={block.miner_txid}
-        />
-      </Box>
-    </Section>
-  );
-};
diff --git a/src/app/txid/[txid]/Cards/ContractDetailsCard.tsx b/src/app/txid/[txid]/Cards/ContractDetailsCard.tsx
deleted file mode 100644
index b056ff87c..000000000
--- a/src/app/txid/[txid]/Cards/ContractDetailsCard.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-import { getContractName, truncateMiddle } from '@/common/utils';
-import { TxLink } from '@/components/links';
-import { Section } from '@/components/section';
-import { TransactionQueryKeys, transactionQK } from '@/features/transaction/query-keys';
-import { useTransactionQueries } from '@/features/transaction/use-transaction-queries';
-import { Box, Circle, Flex, Grid, Icon, Stack } from '@/ui/components';
-import { FunctionIcon } from '@/ui/icons';
-import { Caption, Text, TextProps, Title } from '@/ui/typography';
-import pluralize from 'pluralize';
-import * as React from 'react';
-import { BiAtom, BiLinkExternal } from 'react-icons/bi';
-import { BsCodeSlash } from 'react-icons/bs';
-import { MdOutlineChecklistRtl } from 'react-icons/md';
-import { RxTokens } from 'react-icons/rx';
-import { useQuery } from '@tanstack/react-query';
-
-const PluralizedItem: React.FC<TextProps & { array: any[]; label: string }> = ({
-  array,
-  label,
-  ...rest
-}) => (
-  <Text color={'textBody'} fontSize="14px" {...rest}>
-    {array.length} {pluralize(label, array.length)}
-  </Text>
-);
-
-export const ContractDetailsCard: React.FC<{ contractId: string }> = ({ contractId }) => {
-  const queries = useTransactionQueries();
-
-  const { data: contract } = useQuery(
-    transactionQK(TransactionQueryKeys.contract, contractId),
-    queries.fetchContract(contractId),
-    { enabled: !!contractId, suspense: false }
-  );
-
-  if (!contract) return null;
-
-  return (
-    <Section flexShrink={0} minWidth="200px" title="Contract details">
-      <Box px="16px">
-        <Flex borderBottomWidth="1px" py="16px" justifyContent="space-between" alignItems="center">
-          <Flex alignItems="center">
-            <Circle>
-              <Icon as={BsCodeSlash} color={'textTitle'} position="relative" size="16px" />
-            </Circle>
-            <Box ml="16px">
-              <Title mb="8px" display="block" mt="0" as="h4">
-                {getContractName(contractId)}
-              </Title>
-              <Caption display="block">{truncateMiddle(contract?.tx_id, 8)}</Caption>
-            </Box>
-          </Flex>
-        </Flex>
-        <Stack spacing="8px" py="16px">
-          <Flex alignItems="center">
-            <Box opacity={0.6} size="20px">
-              <FunctionIcon color={'textCaption'} size="20px" />
-            </Box>
-            <PluralizedItem ml="8px" array={contract?.abi?.functions || []} label="function" />
-          </Flex>
-          <Flex alignItems="center">
-            <Box opacity={0.6} size="20px">
-              <BiAtom color={'textCaption'} size="20px" />
-            </Box>
-            <PluralizedItem ml="8px" array={contract?.abi?.variables || []} label="variable" />
-          </Flex>
-          <Flex alignItems="center">
-            <Box opacity={0.6} size="20px">
-              <MdOutlineChecklistRtl color={'textCaption'} size="20px" />
-            </Box>
-            <PluralizedItem ml="8px" array={contract?.abi?.maps || []} label="map" />
-          </Flex>
-          <Flex alignItems="center">
-            <Box opacity={0.6} size="20px">
-              <RxTokens color={'textCaption'} size="20px" />
-            </Box>
-            <PluralizedItem
-              ml="8px"
-              array={[
-                ...(contract?.abi?.fungible_tokens || []),
-                ...(contract?.abi?.non_fungible_tokens || []),
-              ]}
-              label="token"
-            />
-          </Flex>
-        </Stack>
-        <Grid borderTopWidth="1px" placeItems="center" py="16px">
-          <TxLink txId={contractId}>
-            <Flex
-              as="a"
-              target="_blank"
-              color={'accent'}
-              textDecoration="none"
-              _hover={{ textDecoration: 'underline' }}
-              alignItems="center"
-              gap={'8px'}
-            >
-              <Caption transform="translateY(1px)" color="currentColor">
-                View deployment
-              </Caption>
-              <BiLinkExternal color={'textCaption'} size="16px" />
-            </Flex>
-          </TxLink>
-        </Grid>
-      </Box>
-    </Section>
-  );
-};
diff --git a/src/app/txid/[txid]/CoinbasePage/TxDetails.tsx b/src/app/txid/[txid]/CoinbasePage/TxDetails.tsx
deleted file mode 100644
index 944ed4ca9..000000000
--- a/src/app/txid/[txid]/CoinbasePage/TxDetails.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { Section } from '@/components/section';
-import { Box, Flex } from '@/ui/components';
-import * as React from 'react';
-
-import {
-  Block,
-  CoinbaseTransaction,
-  MempoolCoinbaseTransaction,
-} from '@stacks/stacks-blockchain-api-types';
-
-import { useVerticallyStackedElementsBorderStyle } from '../../../common/styles/border';
-import { BlockHash } from '../TxDetails/BlockHash';
-import { BlockHeight } from '../TxDetails/BlockHeight';
-import { Fees } from '../TxDetails/Fees';
-import { ID } from '../TxDetails/ID';
-import { NonCanonical } from '../TxDetails/NonCanonical';
-import { Nonce } from '../TxDetails/Nonce';
-import { Sender } from '../TxDetails/Sender';
-
-interface TxDetailsProps {
-  tx: CoinbaseTransaction | MempoolCoinbaseTransaction;
-  block?: Block;
-}
-
-export const TxDetails: React.FC<TxDetailsProps> = ({ tx, block }) => {
-  return (
-    <>
-      <Section title="Summary">
-        <Flex px="16px" width="100%" flexDirection={['column', 'column', 'row']}>
-          <Box width={['100%']} css={useVerticallyStackedElementsBorderStyle}>
-            <ID tx={tx} />
-            <Sender tx={tx} />
-            <Fees tx={tx} />
-            <Nonce tx={tx} />
-            <BlockHeight tx={tx} block={block} />
-            <BlockHash tx={tx} />
-            <NonCanonical tx={tx} />
-          </Box>
-        </Flex>
-      </Section>
-    </>
-  );
-};
diff --git a/src/app/txid/[txid]/CoinbasePage/index.tsx b/src/app/txid/[txid]/CoinbasePage/index.tsx
deleted file mode 100644
index 769cbddbf..000000000
--- a/src/app/txid/[txid]/CoinbasePage/index.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { FC } from 'react';
-
-import {
-  Block,
-  CoinbaseTransaction,
-  MempoolCoinbaseTransaction,
-} from '@stacks/stacks-blockchain-api-types';
-
-import { TxPage } from '../TxPage';
-import { TxDetails } from './TxDetails';
-
-export const CoinbasePage: FC<{
-  tx: CoinbaseTransaction | MempoolCoinbaseTransaction;
-  block?: Block;
-}> = ({ tx, block }) => {
-  return <TxPage tx={tx} block={block} txDetails={<TxDetails tx={tx} block={block} />} />;
-};
diff --git a/src/app/txid/[txid]/ContractCall/TxDetails.tsx b/src/app/txid/[txid]/ContractCall/TxDetails.tsx
deleted file mode 100644
index e80d75583..000000000
--- a/src/app/txid/[txid]/ContractCall/TxDetails.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { Section } from '@/components/section';
-import { Box, Flex } from '@/ui/components';
-import * as React from 'react';
-
-import {
-  Block,
-  ContractCallTransaction,
-  MempoolContractCallTransaction,
-} from '@stacks/stacks-blockchain-api-types';
-
-import { useVerticallyStackedElementsBorderStyle } from '../../../common/styles/border';
-import { BlockHash } from '../TxDetails/BlockHash';
-import { BlockHeight } from '../TxDetails/BlockHeight';
-import { Broadcast } from '../TxDetails/Broadcast';
-import { ContractName } from '../TxDetails/ContractName';
-import { Fees } from '../TxDetails/Fees';
-import { ID } from '../TxDetails/ID';
-import { NonCanonical } from '../TxDetails/NonCanonical';
-import { Nonce } from '../TxDetails/Nonce';
-import { Sender } from '../TxDetails/Sender';
-
-interface TxDetailsProps {
-  tx: ContractCallTransaction | MempoolContractCallTransaction;
-  block?: Block;
-}
-
-export const TxDetails: React.FC<TxDetailsProps> = ({ tx, block }) => {
-  return (
-    <>
-      <Section title="Summary">
-        <Flex px="16px" width="100%" flexDirection={['column', 'column', 'row']}>
-          <Box width={['100%']} css={useVerticallyStackedElementsBorderStyle}>
-            <ContractName tx={tx} />
-            <ID tx={tx} />
-            <Sender tx={tx} />
-            <Fees tx={tx} />
-            <Nonce tx={tx} />
-            <BlockHeight tx={tx} block={block} />
-            <Broadcast tx={tx} />
-            <BlockHash tx={tx} />
-            <NonCanonical tx={tx} />
-          </Box>
-        </Flex>
-      </Section>
-    </>
-  );
-};
diff --git a/src/app/txid/[txid]/ContractCall/index.tsx b/src/app/txid/[txid]/ContractCall/index.tsx
deleted file mode 100644
index 6e8fa3416..000000000
--- a/src/app/txid/[txid]/ContractCall/index.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import { useContractById } from '@/app/common/queries/useContractById';
-import { useApi } from '@/common/api/client';
-import { getTransactionStatus } from '@/common/utils/transactions';
-import { ContractSource } from '@/components/contract-source';
-import { FunctionSummarySection } from '@/components/function-summary/function-summary';
-import { PostConditions } from '@/components/post-conditions';
-import { FC, useMemo } from 'react';
-
-import {
-  Block,
-  ContractCallTransaction,
-  MempoolContractCallTransaction,
-} from '@stacks/stacks-blockchain-api-types';
-
-import { TxPage } from '../TxPage';
-import { TxDetails } from './TxDetails';
-
-export const ContractCallPage: FC<{
-  tx: ContractCallTransaction | MempoolContractCallTransaction;
-  block?: Block;
-  contractId?: string;
-  claritySyntax: Record<string, any>;
-}> = ({ tx, block, contractId = '', claritySyntax }) => {
-  const api = useApi();
-
-  const { data: contract } = useContractById(api, { contractId }, { enabled: !!contractId });
-
-  const txStatus = useMemo(() => getTransactionStatus(tx), [tx]);
-  const result = 'tx_result' in tx && tx.tx_result;
-
-  const source = contract?.source_code;
-  if (!contractId) return null;
-  return (
-    <TxPage
-      tx={tx}
-      block={block}
-      contractId={contractId}
-      txDetails={<TxDetails tx={tx} block={block} />}
-    >
-      <FunctionSummarySection
-        result={result}
-        summary={tx.contract_call}
-        btc={null}
-        txStatus={txStatus}
-      />
-      <PostConditions tx={tx} />
-      <ContractSource
-        sourceTx={tx.contract_call.contract_id}
-        source={source}
-        contractCall={tx.contract_call}
-        claritySyntax={claritySyntax}
-      />
-    </TxPage>
-  );
-};
diff --git a/src/app/txid/[txid]/PoisonMicroblock/TxDetails.tsx b/src/app/txid/[txid]/PoisonMicroblock/TxDetails.tsx
deleted file mode 100644
index 7eab0fc5f..000000000
--- a/src/app/txid/[txid]/PoisonMicroblock/TxDetails.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { Section } from '@/components/section';
-import { Box, Flex } from '@/ui/components';
-import * as React from 'react';
-
-import {
-  Block,
-  MempoolPoisonMicroblockTransaction,
-  PoisonMicroblockTransaction,
-} from '@stacks/stacks-blockchain-api-types';
-
-import { useVerticallyStackedElementsBorderStyle } from '../../../common/styles/border';
-import { BlockHash } from '../TxDetails/BlockHash';
-import { BlockHeight } from '../TxDetails/BlockHeight';
-import { Fees } from '../TxDetails/Fees';
-import { ID } from '../TxDetails/ID';
-import { NonCanonical } from '../TxDetails/NonCanonical';
-import { Nonce } from '../TxDetails/Nonce';
-import { Sender } from '../TxDetails/Sender';
-
-interface TxDetailsProps {
-  tx: PoisonMicroblockTransaction | MempoolPoisonMicroblockTransaction;
-  block?: Block;
-}
-
-export const TxDetails: React.FC<TxDetailsProps> = ({ tx, block }) => {
-  return (
-    <>
-      <Section title="Summary">
-        <Flex px="16px" width="100%" flexDirection={['column', 'column', 'row']}>
-          <Box width={['100%']} css={useVerticallyStackedElementsBorderStyle}>
-            <Sender tx={tx} />
-            <ID tx={tx} />
-            <Fees tx={tx} />
-            <Nonce tx={tx} />
-            <BlockHeight tx={tx} block={block} />
-            <BlockHash tx={tx} />
-            <NonCanonical tx={tx} />
-          </Box>
-        </Flex>
-      </Section>
-    </>
-  );
-};
diff --git a/src/app/txid/[txid]/PoisonMicroblock/index.tsx b/src/app/txid/[txid]/PoisonMicroblock/index.tsx
deleted file mode 100644
index 72f5e2a9f..000000000
--- a/src/app/txid/[txid]/PoisonMicroblock/index.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import * as React from 'react';
-
-import {
-  Block,
-  MempoolPoisonMicroblockTransaction,
-  PoisonMicroblockTransaction,
-} from '@stacks/stacks-blockchain-api-types';
-
-import { TxPage } from '../TxPage';
-import { TxDetails } from './TxDetails';
-
-export const PoisonMicroblock: React.FC<{
-  tx: PoisonMicroblockTransaction | MempoolPoisonMicroblockTransaction;
-  block?: Block;
-}> = ({ tx, block }) => {
-  return <TxPage tx={tx} block={block} txDetails={<TxDetails tx={tx} block={block} />} />;
-};
diff --git a/src/app/txid/[txid]/SmartContractPage/ContractTabs.tsx b/src/app/txid/[txid]/SmartContractPage/ContractTabs.tsx
deleted file mode 100644
index 1739ca422..000000000
--- a/src/app/txid/[txid]/SmartContractPage/ContractTabs.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { useVerticallyStackedElementsBorderStyle } from '@/app/common/styles/border';
-import { ContractWithParsedAbi } from '@/common/types/contract';
-import { CodeEditor } from '@/ui/CodeEditor';
-import { Tab, TabList, TabPanel, TabPanels, Tabs } from '@/ui/components';
-import { FC } from 'react';
-import { ContractAvailableFunctions } from '@/app/common/components/ContractAvailableFunctions';
-
-export const ContractTabs: FC<{
-  contractId: string;
-  source?: string;
-  contract?: ContractWithParsedAbi;
-  claritySyntax: Record<string, any>;
-}> = ({ contractId, source, contract, claritySyntax }) => {
-  const verticallyStackedElementsBorderStyle = useVerticallyStackedElementsBorderStyle();
-
-  if (!contract) return null;
-
-  return (
-    <Tabs variant={'soft-rounded'} isLazy>
-      <TabList>
-        {source && <Tab>Source code</Tab>}
-        <Tab>Available functions</Tab>
-      </TabList>
-      <TabPanels>
-        {source && (
-          <TabPanel>
-            <CodeEditor code={source} claritySyntax={claritySyntax} />
-          </TabPanel>
-        )}
-        <TabPanel css={verticallyStackedElementsBorderStyle}>
-          <ContractAvailableFunctions contractId={contractId} contract={contract} />
-        </TabPanel>
-      </TabPanels>
-    </Tabs>
-  );
-  return null;
-};
diff --git a/src/app/txid/[txid]/SmartContractPage/TxDetails.tsx b/src/app/txid/[txid]/SmartContractPage/TxDetails.tsx
deleted file mode 100644
index 603f8f613..000000000
--- a/src/app/txid/[txid]/SmartContractPage/TxDetails.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { Section } from '@/components/section';
-import { Box, Flex } from '@/ui/components';
-import * as React from 'react';
-
-import {
-  Block,
-  MempoolSmartContractTransaction,
-  SmartContractTransaction,
-} from '@stacks/stacks-blockchain-api-types';
-
-import { useVerticallyStackedElementsBorderStyle } from '../../../common/styles/border';
-import { BlockHash } from '../TxDetails/BlockHash';
-import { BlockHeight } from '../TxDetails/BlockHeight';
-import { ClarityVersion } from '../TxDetails/ClarityVersion';
-import { ContractName } from '../TxDetails/ContractName';
-import { Fees } from '../TxDetails/Fees';
-import { ID } from '../TxDetails/ID';
-import { NonCanonical } from '../TxDetails/NonCanonical';
-import { Nonce } from '../TxDetails/Nonce';
-import { Sender } from '../TxDetails/Sender';
-
-interface TxDetailsProps {
-  tx: SmartContractTransaction | MempoolSmartContractTransaction;
-  block?: Block;
-}
-
-export const TxDetails: React.FC<TxDetailsProps> = ({ tx, block }) => {
-  return (
-    <>
-      <Section title="Summary">
-        <Flex px="16px" width="100%" flexDirection={['column', 'column', 'row']}>
-          <Box width={['100%']} css={useVerticallyStackedElementsBorderStyle}>
-            <ContractName tx={tx} />
-            <ID tx={tx} />
-            <Sender tx={tx} />
-            <Fees tx={tx} />
-            <Nonce tx={tx} />
-            <BlockHeight tx={tx} block={block} />
-            <BlockHash tx={tx} />
-            <ClarityVersion tx={tx} />
-            <NonCanonical tx={tx} />
-          </Box>
-        </Flex>
-      </Section>
-    </>
-  );
-};
diff --git a/src/app/txid/[txid]/SmartContractPage/index.tsx b/src/app/txid/[txid]/SmartContractPage/index.tsx
deleted file mode 100644
index c857c4b52..000000000
--- a/src/app/txid/[txid]/SmartContractPage/index.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import { IS_BROWSER } from '@/common/constants';
-import { PostConditions } from '@/components/post-conditions';
-import { TransactionQueryKeys, transactionQK } from '@/features/transaction/query-keys';
-import { useTransactionQueries } from '@/features/transaction/use-transaction-queries';
-import * as React from 'react';
-import { useQuery } from '@tanstack/react-query';
-
-import {
-  Block,
-  MempoolSmartContractTransaction,
-  SmartContractTransaction,
-} from '@stacks/stacks-blockchain-api-types';
-
-import { AddressTxListTabs } from '../../../common/components/tx-lists/tabs/AddressTxListTabs';
-import { TxPage } from '../TxPage';
-import { ContractTabs } from './ContractTabs';
-import { TxDetails } from './TxDetails';
-
-export const SmartContractPage: React.FC<{
-  tx: SmartContractTransaction | MempoolSmartContractTransaction;
-  block?: Block;
-  contractId?: string;
-  claritySyntax: Record<string, any>;
-}> = ({ tx, block, contractId, claritySyntax }) => {
-  const queries = useTransactionQueries();
-
-  const { data: contract } = useQuery(
-    transactionQK(TransactionQueryKeys.contract, contractId),
-    queries.fetchContract(contractId),
-    { enabled: !!contractId, suspense: false }
-  );
-
-  const source = contract?.source_code;
-
-  if (!contractId) return null;
-  return (
-    <TxPage
-      tx={tx}
-      block={block}
-      contractId={contractId}
-      txDetails={<TxDetails tx={tx} block={block} />}
-    >
-      <PostConditions tx={tx} />
-      <ContractTabs
-        source={source}
-        contract={contract}
-        contractId={contractId}
-        claritySyntax={claritySyntax}
-      />
-      <AddressTxListTabs address={contractId} />
-    </TxPage>
-  );
-};
diff --git a/src/app/txid/[txid]/TokenTransfer/TxDetails.tsx b/src/app/txid/[txid]/TokenTransfer/TxDetails.tsx
deleted file mode 100644
index 1a28dd29d..000000000
--- a/src/app/txid/[txid]/TokenTransfer/TxDetails.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import { Section } from '@/components/section';
-import { Box, Flex } from '@/ui/components';
-import * as React from 'react';
-
-import {
-  Block,
-  MempoolTokenTransferTransaction,
-  TokenTransferTransaction,
-} from '@stacks/stacks-blockchain-api-types';
-
-import { useVerticallyStackedElementsBorderStyle } from '../../../common/styles/border';
-import { Amount } from '../TxDetails/Amount';
-import { BlockHash } from '../TxDetails/BlockHash';
-import { BlockHeight } from '../TxDetails/BlockHeight';
-import { Fees } from '../TxDetails/Fees';
-import { ID } from '../TxDetails/ID';
-import { Memo } from '../TxDetails/Memo';
-import { NonCanonical } from '../TxDetails/NonCanonical';
-import { Nonce } from '../TxDetails/Nonce';
-import { Recipient } from '../TxDetails/Recipient';
-import { Sender } from '../TxDetails/Sender';
-
-interface TxDetailsProps {
-  tx: TokenTransferTransaction | MempoolTokenTransferTransaction;
-  block?: Block;
-}
-
-export const TxDetails: React.FC<TxDetailsProps> = ({ tx, block }) => {
-  return (
-    <>
-      <Section title="Summary">
-        <Flex px="16px" width="100%" flexDirection={['column', 'column', 'row']}>
-          <Box width={['100%']} css={useVerticallyStackedElementsBorderStyle}>
-            <Amount tx={tx} />
-            <Sender tx={tx} />
-            <Recipient tx={tx} />
-            <ID tx={tx} />
-            <Fees tx={tx} />
-            <Nonce tx={tx} />
-            <BlockHeight tx={tx} block={block} />
-            <BlockHash tx={tx} />
-            <Memo tx={tx} />
-            <NonCanonical tx={tx} />
-          </Box>
-        </Flex>
-      </Section>
-    </>
-  );
-};
diff --git a/src/app/txid/[txid]/TokenTransfer/index.tsx b/src/app/txid/[txid]/TokenTransfer/index.tsx
deleted file mode 100644
index 43ddfa361..000000000
--- a/src/app/txid/[txid]/TokenTransfer/index.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import * as React from 'react';
-
-import {
-  Block,
-  MempoolTokenTransferTransaction,
-  TokenTransferTransaction,
-} from '@stacks/stacks-blockchain-api-types';
-
-import { TxPage } from '../TxPage';
-import { TxDetails } from './TxDetails';
-
-export const TokenTransferPage: React.FC<{
-  tx: TokenTransferTransaction | MempoolTokenTransferTransaction;
-  block?: Block;
-}> = ({ tx, block }) => {
-  return <TxPage tx={tx} block={block} txDetails={<TxDetails tx={tx} block={block} />} />;
-};
diff --git a/src/app/txid/[txid]/TxDetails/Amount.tsx b/src/app/txid/[txid]/TxDetails/Amount.tsx
deleted file mode 100644
index 1c449bed2..000000000
--- a/src/app/txid/[txid]/TxDetails/Amount.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { microToStacks } from '@/common/utils';
-import { Circle } from '@/components/circle';
-import { Box, Stack } from '@/ui/components';
-import { StxIcon } from '@/ui/icons/StxIcon';
-import { Text } from '@/ui/typography';
-import * as React from 'react';
-import { FC } from 'react';
-
-import {
-  MempoolTokenTransferTransaction,
-  TokenTransferTransaction,
-} from '@stacks/stacks-blockchain-api-types';
-
-import { KeyValueHorizontal } from '../../../common/components/KeyValueHorizontal';
-import { StxPriceButton } from '../../../common/components/StxPriceButton';
-
-export const Amount: FC<{ tx: TokenTransferTransaction | MempoolTokenTransferTransaction }> = ({
-  tx,
-}) => {
-  const stxValue = microToStacks(tx.token_transfer.amount);
-  return (
-    <KeyValueHorizontal
-      label={'Amount'}
-      value={
-        <>
-          <Stack alignItems="flex-start" isInline spacing="8px">
-            <Box width="24px" position="relative">
-              <Circle position="absolute" left={0} size="24px" bg={'accent'}>
-                <StxIcon strokeWidth={2} size="14px" color="white" />
-              </Circle>
-            </Box>
-            <Text fontSize="16px" color={'textTitle'} fontWeight="500">
-              {stxValue}{' '}
-              <Text as="span" display="inline" opacity="0.5">
-                STX
-              </Text>
-            </Text>
-          </Stack>
-          <StxPriceButton tx={tx} value={Number(tx.token_transfer.amount)} />
-        </>
-      }
-      copyValue={stxValue.toString()}
-    />
-  );
-};
diff --git a/src/app/txid/[txid]/TxDetails/BlockHash.tsx b/src/app/txid/[txid]/TxDetails/BlockHash.tsx
deleted file mode 100644
index e779e26bd..000000000
--- a/src/app/txid/[txid]/TxDetails/BlockHash.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { BlockLink } from '@/components/links';
-import { TextLink } from '@/ui/components';
-import * as React from 'react';
-import { FC } from 'react';
-
-import { MempoolTransaction, Transaction } from '@stacks/stacks-blockchain-api-types';
-
-import { KeyValueHorizontal } from '../../../common/components/KeyValueHorizontal';
-
-export const BlockHash: FC<{
-  tx: Transaction | MempoolTransaction;
-}> = ({ tx }) => {
-  if (
-    !('block_hash' in tx) ||
-    typeof tx.block_hash === 'undefined' ||
-    (tx?.tx_status === 'success' && tx.is_unanchored)
-  )
-    return null;
-  return (
-    <KeyValueHorizontal
-      label={'Block hash'}
-      value={
-        <BlockLink hash={tx.block_hash}>
-          <TextLink fontSize={'14px'} fontWeight={500}>
-            {tx.block_hash}
-          </TextLink>
-        </BlockLink>
-      }
-      copyValue={tx.block_hash}
-    />
-  );
-};
diff --git a/src/app/txid/[txid]/TxDetails/BlockHeight.tsx b/src/app/txid/[txid]/TxDetails/BlockHeight.tsx
deleted file mode 100644
index fa7ca7805..000000000
--- a/src/app/txid/[txid]/TxDetails/BlockHeight.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { toRelativeTime } from '@/common/utils';
-import { BtcStxBlockLinks } from '@/components/btc-stx-block-links';
-import { Box, Flex, Icon, Tooltip } from '@/ui/components';
-import { useMediaQuery } from '@/ui/hooks/useMediaQuery';
-import * as React from 'react';
-import { FC } from 'react';
-import { AiOutlineClockCircle } from 'react-icons/ai';
-
-import { Block, MempoolTransaction, Transaction } from '@stacks/stacks-blockchain-api-types';
-
-import { KeyValueHorizontal } from '../../../common/components/KeyValueHorizontal';
-import { Value } from '../../../common/components/Value';
-import { isInMempool, isInMicroblock } from '../utils';
-
-export const BlockHeight: FC<{
-  tx: Transaction | MempoolTransaction;
-  block?: Block;
-}> = ({ tx, block }) => {
-  const [isOnTouchScreen] = useMediaQuery('(hover: none)');
-
-  if (isInMempool(tx) || isInMicroblock(tx)) return null;
-
-  const ts = tx.parent_burn_block_time || tx.burn_block_time;
-  if (!ts) return null;
-
-  const readableTs = `${new Date(ts * 1000).toLocaleTimeString()} ${new Date(
-    ts * 1000
-  ).toLocaleDateString()}`;
-
-  return (
-    <KeyValueHorizontal
-      label={'Block height'}
-      value={
-        <>
-          <BtcStxBlockLinks
-            btcBlockHeight={block?.burn_block_height}
-            stxBlockHeight={tx.block_height}
-            stxBlockHash={tx.block_hash}
-          />
-          <Box ml="16px">
-            {isOnTouchScreen ? (
-              <Flex alignItems="center">
-                <Icon as={AiOutlineClockCircle} size="16px" mr="4px" />
-                <Value>
-                  {toRelativeTime(ts * 1000)} - {readableTs}
-                </Value>
-              </Flex>
-            ) : (
-              <Tooltip label={readableTs}>
-                <Flex alignItems="center">
-                  <Icon as={AiOutlineClockCircle} size="16px" mr="4px" />
-                  <Value>{toRelativeTime(ts * 1000)}</Value>
-                </Flex>
-              </Tooltip>
-            )}
-          </Box>
-        </>
-      }
-      copyValue={readableTs}
-    />
-  );
-};
diff --git a/src/app/txid/[txid]/TxDetails/Broadcast.tsx b/src/app/txid/[txid]/TxDetails/Broadcast.tsx
deleted file mode 100644
index 39df8fde3..000000000
--- a/src/app/txid/[txid]/TxDetails/Broadcast.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { toRelativeTime } from '@/common/utils';
-import { Box, Flex, Icon, Tooltip } from '@/ui/components';
-import * as React from 'react';
-import { FC } from 'react';
-import { AiOutlineClockCircle } from 'react-icons/ai';
-
-import { Transaction, MempoolTransaction } from '@stacks/stacks-blockchain-api-types';
-
-import { KeyValueHorizontal } from '../../../common/components/KeyValueHorizontal';
-import { Value } from '../../../common/components/Value';
-import { isInMempool } from '../utils';
-
-export const Broadcast: FC<{
-  tx: Transaction | MempoolTransaction;
-}> = ({ tx }) => {
-  if (!isInMempool(tx)) return null;
-
-  const ts = tx.receipt_time;
-  if (!ts) return null;
-
-  const readableTs = `${new Date(ts * 1000).toLocaleTimeString()} ${new Date(
-    ts * 1000
-  ).toLocaleDateString()}`;
-
-  return (
-    <KeyValueHorizontal
-      label={'Broadcast'}
-      value={
-        <>
-          <Box>
-            <Tooltip label={readableTs}>
-              <Flex alignItems="center">
-                <Icon as={AiOutlineClockCircle} size="16px" mr="4px" />
-                <Value>{toRelativeTime(ts * 1000)}</Value>
-              </Flex>
-            </Tooltip>
-          </Box>
-        </>
-      }
-      copyValue={readableTs}
-    />
-  );
-};
diff --git a/src/app/txid/[txid]/TxDetails/ClarityVersion.tsx b/src/app/txid/[txid]/TxDetails/ClarityVersion.tsx
deleted file mode 100644
index 50ac3ef9b..000000000
--- a/src/app/txid/[txid]/TxDetails/ClarityVersion.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import * as React from 'react';
-import { FC } from 'react';
-
-import {
-  MempoolSmartContractTransaction,
-  SmartContractTransaction,
-} from '@stacks/stacks-blockchain-api-types';
-
-import { KeyValueHorizontal } from '../../../common/components/KeyValueHorizontal';
-import { Value } from '../../../common/components/Value';
-
-export const ClarityVersion: FC<{
-  tx: SmartContractTransaction | MempoolSmartContractTransaction;
-}> = ({ tx }) => {
-  const clarityVersion = tx.smart_contract?.clarity_version || 1;
-  return (
-    <KeyValueHorizontal
-      label={'Clarity version'}
-      value={<Value>{clarityVersion}</Value>}
-      copyValue={clarityVersion.toString()}
-    />
-  );
-};
diff --git a/src/app/txid/[txid]/TxDetails/ContractName.tsx b/src/app/txid/[txid]/TxDetails/ContractName.tsx
deleted file mode 100644
index e3424003a..000000000
--- a/src/app/txid/[txid]/TxDetails/ContractName.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { TxLink } from '@/components/links';
-import { TextLink } from '@/ui/components';
-import * as React from 'react';
-import { FC } from 'react';
-
-import {
-  ContractCallTransaction,
-  MempoolContractCallTransaction,
-  MempoolSmartContractTransaction,
-  SmartContractTransaction,
-} from '@stacks/stacks-blockchain-api-types';
-
-import { KeyValueHorizontal } from '../../../common/components/KeyValueHorizontal';
-import { Value } from '../../../common/components/Value';
-
-export const ContractName: FC<{
-  tx:
-    | ContractCallTransaction
-    | MempoolContractCallTransaction
-    | SmartContractTransaction
-    | MempoolSmartContractTransaction;
-}> = ({ tx }) => {
-  if (tx.tx_type === 'contract_call') {
-    return (
-      <KeyValueHorizontal
-        label={'Contract'}
-        value={
-          <TxLink txId={tx.contract_call.contract_id}>
-            <TextLink as="a">
-              <Value>{tx.contract_call.contract_id}</Value>
-            </TextLink>
-          </TxLink>
-        }
-        copyValue={tx.contract_call.contract_id}
-      />
-    );
-  }
-  if (tx.tx_type === 'smart_contract') {
-    return (
-      <KeyValueHorizontal
-        label={'Contract'}
-        value={
-          <TxLink txId={tx.smart_contract.contract_id}>
-            <TextLink as="a">
-              <Value>{tx.smart_contract.contract_id}</Value>
-            </TextLink>
-          </TxLink>
-        }
-        copyValue={tx.smart_contract.contract_id}
-      />
-    );
-  }
-  return null;
-};
diff --git a/src/app/txid/[txid]/TxDetails/Fees.tsx b/src/app/txid/[txid]/TxDetails/Fees.tsx
deleted file mode 100644
index 31817a498..000000000
--- a/src/app/txid/[txid]/TxDetails/Fees.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { Badge } from '@/common/components/Badge';
-import { microToStacks } from '@/common/utils';
-import { Flex } from '@/ui/components';
-import * as React from 'react';
-import { FC } from 'react';
-
-import { MempoolTransaction, Transaction } from '@stacks/stacks-blockchain-api-types';
-
-import { KeyValueHorizontal } from '../../../common/components/KeyValueHorizontal';
-import { StxPriceButton } from '../../../common/components/StxPriceButton';
-import { Value } from '../../../common/components/Value';
-
-export const Fees: FC<{ tx: Transaction | MempoolTransaction }> = ({ tx }) => {
-  const stxValue = microToStacks(tx.fee_rate);
-  return (
-    <KeyValueHorizontal
-      label={'Fees'}
-      value={
-        <>
-          <Flex
-            flexDirection={['column', 'column', 'row']}
-            alignItems={['flex-start', 'flex-start', 'center']}
-          >
-            <Value>{stxValue} STX</Value>
-            <StxPriceButton tx={tx} value={Number(tx.fee_rate)} />
-          </Flex>
-          {tx.sponsored ? (
-            <Badge ml="16px" bg="ink.300" border={'none'}>
-              Sponsored
-            </Badge>
-          ) : null}
-        </>
-      }
-      copyValue={stxValue.toString()}
-    />
-  );
-};
diff --git a/src/app/txid/[txid]/TxDetails/ID.tsx b/src/app/txid/[txid]/TxDetails/ID.tsx
deleted file mode 100644
index f2001f768..000000000
--- a/src/app/txid/[txid]/TxDetails/ID.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { Flex } from '@/ui/components';
-import * as React from 'react';
-import { FC } from 'react';
-
-import { MempoolTransaction, Transaction } from '@stacks/stacks-blockchain-api-types';
-
-import { KeyValueHorizontal } from '../../../common/components/KeyValueHorizontal';
-import { Value } from '../../../common/components/Value';
-
-export const ID: FC<{ tx: Transaction | MempoolTransaction }> = ({ tx }) => (
-  <KeyValueHorizontal
-    label={'Transaction ID'}
-    value={
-      <Flex alignItems={'center'}>
-        <Value>{tx.tx_id}</Value>
-      </Flex>
-    }
-    copyValue={tx.tx_id}
-  />
-);
diff --git a/src/app/txid/[txid]/TxDetails/Memo.tsx b/src/app/txid/[txid]/TxDetails/Memo.tsx
deleted file mode 100644
index 40fe8640b..000000000
--- a/src/app/txid/[txid]/TxDetails/Memo.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { getMemoString } from '@/common/utils';
-import * as React from 'react';
-import { FC } from 'react';
-
-import {
-  MempoolTokenTransferTransaction,
-  TokenTransferTransaction,
-} from '@stacks/stacks-blockchain-api-types';
-
-import { KeyValueHorizontal } from '../../../common/components/KeyValueHorizontal';
-import { Value } from '../../../common/components/Value';
-
-export const Memo: FC<{ tx: TokenTransferTransaction | MempoolTokenTransferTransaction }> = ({
-  tx,
-}) => {
-  const memo = getMemoString(tx.token_transfer.memo);
-  if (!memo) return null;
-  return <KeyValueHorizontal label={'Memo'} value={<Value>{memo}</Value>} copyValue={memo} />;
-};
diff --git a/src/app/txid/[txid]/TxDetails/NonCanonical.tsx b/src/app/txid/[txid]/TxDetails/NonCanonical.tsx
deleted file mode 100644
index 01b89dc16..000000000
--- a/src/app/txid/[txid]/TxDetails/NonCanonical.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { TransactionStatus } from '@/common/constants';
-import { Box, Flex, IconButton } from '@/ui/components';
-import QuestionMarkCircleOutlineIcon from 'mdi-react/QuestionMarkCircleOutlineIcon';
-import * as React from 'react';
-import { FC } from 'react';
-
-import { MempoolTransaction, Transaction } from '@stacks/stacks-blockchain-api-types';
-
-import { KeyValueHorizontal } from '../../../common/components/KeyValueHorizontal';
-
-export const NonCanonical: FC<{
-  tx: Transaction | MempoolTransaction;
-}> = ({ tx }) => {
-  const showNonCanonical =
-    (tx.tx_status !== TransactionStatus.PENDING && 'canonical' in tx && !tx.canonical) ||
-    ('microblock_canonical' in tx && !tx.microblock_canonical);
-  if (!showNonCanonical) return null;
-  return (
-    <KeyValueHorizontal
-      label={'Non-canonical'}
-      value={
-        <Flex alignItems="center">
-          <Box>
-            Transaction is in a non-canonical fork. It has been orphaned by the canonical chain.
-          </Box>
-          <IconButton
-            ml="8px"
-            icon={<QuestionMarkCircleOutlineIcon />}
-            as="a"
-            href="https://github.com/stacksgov/sips/blob/main/sips/sip-001/sip-001-burn-election.md#committing-to-a-chain-tip"
-            target="_blank"
-            aria-label={'sip-001'}
-          />
-        </Flex>
-      }
-    />
-  );
-};
diff --git a/src/app/txid/[txid]/TxDetails/Nonce.tsx b/src/app/txid/[txid]/TxDetails/Nonce.tsx
deleted file mode 100644
index d2665059a..000000000
--- a/src/app/txid/[txid]/TxDetails/Nonce.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import * as React from 'react';
-import { FC } from 'react';
-
-import { MempoolTransaction, Transaction } from '@stacks/stacks-blockchain-api-types';
-
-import { KeyValueHorizontal } from '../../../common/components/KeyValueHorizontal';
-import { Value } from '../../../common/components/Value';
-
-export const Nonce: FC<{ tx: Transaction | MempoolTransaction }> = ({ tx }) => (
-  <KeyValueHorizontal
-    label={'Nonce'}
-    value={<Value>{tx.nonce}</Value>}
-    copyValue={tx.nonce.toString()}
-  />
-);
diff --git a/src/app/txid/[txid]/TxDetails/Recipient.tsx b/src/app/txid/[txid]/TxDetails/Recipient.tsx
deleted file mode 100644
index 395cd3617..000000000
--- a/src/app/txid/[txid]/TxDetails/Recipient.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { ExplorerLink } from '@/components/links';
-import { Box, Stack, TextLink } from '@/ui/components';
-import * as React from 'react';
-import { FC } from 'react';
-import { TbArrowDownRight } from 'react-icons/tb';
-
-import {
-  MempoolTokenTransferTransaction,
-  TokenTransferTransaction,
-} from '@stacks/stacks-blockchain-api-types';
-
-import { KeyValueHorizontal } from '../../../common/components/KeyValueHorizontal';
-
-export const Recipient: FC<{ tx: TokenTransferTransaction | MempoolTokenTransferTransaction }> = ({
-  tx,
-}) => (
-  <KeyValueHorizontal
-    label={'Recipient'}
-    value={
-      <Stack isInline>
-        <Box color={'textCaption'}>
-          <TbArrowDownRight size="16px" />
-        </Box>
-        <ExplorerLink href={`/address/${encodeURIComponent(tx.token_transfer.recipient_address)}`}>
-          <TextLink as="a" fontSize={'14px'} fontWeight={500}>
-            {tx.token_transfer.recipient_address}
-          </TextLink>
-        </ExplorerLink>
-      </Stack>
-    }
-    copyValue={tx.token_transfer.recipient_address}
-  />
-);
diff --git a/src/app/txid/[txid]/TxDetails/Sender.tsx b/src/app/txid/[txid]/TxDetails/Sender.tsx
deleted file mode 100644
index 50c36e709..000000000
--- a/src/app/txid/[txid]/TxDetails/Sender.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { ExplorerLink } from '@/components/links';
-import { Box, Stack, TextLink } from '@/ui/components';
-import * as React from 'react';
-import { FC } from 'react';
-import { TbArrowUpRight } from 'react-icons/tb';
-
-import { MempoolTransaction, Transaction } from '@stacks/stacks-blockchain-api-types';
-
-import { KeyValueHorizontal } from '../../../common/components/KeyValueHorizontal';
-import { getSenderName } from '../utils';
-
-export const Sender: FC<{ tx: Transaction | MempoolTransaction }> = ({ tx }) => (
-  <KeyValueHorizontal
-    label={getSenderName(tx.tx_type)}
-    value={
-      <Stack isInline>
-        <Box color={'textCaption'}>
-          <TbArrowUpRight size="16px" />
-        </Box>
-        <ExplorerLink href={`/address/${encodeURIComponent(tx.sender_address)}`}>
-          <TextLink as="a" fontSize={'14px'} fontWeight={500}>
-            {tx.sender_address}
-          </TextLink>
-        </ExplorerLink>
-      </Stack>
-    }
-    copyValue={tx.sender_address}
-  />
-);
diff --git a/src/app/txid/[txid]/TxDetails/__tests__/Broadcast.test.tsx b/src/app/txid/[txid]/TxDetails/__tests__/Broadcast.test.tsx
deleted file mode 100644
index 369d3007a..000000000
--- a/src/app/txid/[txid]/TxDetails/__tests__/Broadcast.test.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { Broadcast } from '../Broadcast';
-import '@testing-library/jest-dom/extend-expect';
-import { Transaction } from '@stacks/stacks-blockchain-api-types';
-
-describe('<Broadcast />', () => {
-  it('renders correctly', () => {
-    const hardcodedDate = new Date('2023-01-01T12:00:00Z');
-
-    const mockTx = {
-      receipt_time: Math.floor(hardcodedDate.getTime() / 1000),
-    } as unknown as Transaction;
-
-    const { asFragment } = render(<Broadcast tx={mockTx} />);
-    expect(asFragment()).toMatchSnapshot();
-  });
-});
diff --git a/src/app/txid/[txid]/TxDetails/__tests__/__snapshots__/Broadcast.test.tsx.snap b/src/app/txid/[txid]/TxDetails/__tests__/__snapshots__/Broadcast.test.tsx.snap
deleted file mode 100644
index 5fee13058..000000000
--- a/src/app/txid/[txid]/TxDetails/__tests__/__snapshots__/Broadcast.test.tsx.snap
+++ /dev/null
@@ -1,72 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<Broadcast /> renders correctly 1`] = `
-<DocumentFragment>
-  <div
-    class="css-1vao8g8"
-  >
-    <div
-      class="css-wasqz"
-    >
-      Broadcast
-    </div>
-    <div
-      class="css-1q1jcsf"
-    >
-      <div
-        class="css-1dupj0l"
-      >
-        <div
-          class="css-1txr7ua"
-        >
-          <svg
-            class="chakra-icon css-1p0vfbv"
-            fill="currentColor"
-            focusable="false"
-            height="16px"
-            stroke="currentColor"
-            stroke-width="0"
-            viewBox="0 0 1024 1024"
-            width="16px"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
-            />
-            <path
-              d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"
-            />
-          </svg>
-          <span
-            class="chakra-text css-14nx52v"
-          >
-            10 months ago
-          </span>
-        </div>
-      </div>
-    </div>
-    <button
-      aria-label="copy row"
-      class="chakra-button fancy-copy css-13ha820"
-      type="button"
-    >
-      <svg
-        aria-hidden="true"
-        color="textBody"
-        fill="currentColor"
-        focusable="false"
-        height="20px"
-        stroke="currentColor"
-        stroke-width="1.75"
-        viewBox="0 0 1024 1024"
-        width="20px"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z"
-        />
-      </svg>
-    </button>
-  </div>
-</DocumentFragment>
-`;
diff --git a/src/app/txid/[txid]/TxPage.tsx b/src/app/txid/[txid]/TxPage.tsx
deleted file mode 100644
index e552dbdf1..000000000
--- a/src/app/txid/[txid]/TxPage.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import { useGlobalContext } from '@/common/context/useAppContext';
-import { hasStxBalance, hasTokenBalance } from '@/common/utils/accounts';
-import { getTransactionStatus } from '@/common/utils/transactions';
-import { TokenBalancesCard } from '@/components/balances/principal-token-balances';
-import { StxBalances } from '@/components/balances/stx-balance-card';
-import { TxAlerts } from '@/components/page';
-import { Section } from '@/components/section';
-import { Events } from '@/components/tx-events';
-import { TxTitle } from '@/components/tx-title';
-import { BlocksVisualizer } from '@/features/blocks-visualizer';
-import { TransactionQueryKeys, transactionQK } from '@/features/transaction/query-keys';
-import { useTransactionQueries } from '@/features/transaction/use-transaction-queries';
-import { Box, Flex } from '@/ui/components';
-import * as React from 'react';
-import { ReactNode } from 'react';
-import { useQuery } from '@tanstack/react-query';
-
-import { Block, MempoolTransaction, Transaction } from '@stacks/stacks-blockchain-api-types';
-
-import { TwoColumnPage } from '../../common/components/TwoColumnPage';
-import { BtcAnchorBlockCard } from './Cards/BtcAnchorBlockCard';
-import { ContractDetailsCard } from './Cards/ContractDetailsCard';
-
-export const TxPage: React.FC<{
-  tx: Transaction | MempoolTransaction;
-  block?: Block;
-  contractId?: string;
-  txDetails: ReactNode;
-}> = ({ tx, block, contractId, txDetails, children }) => {
-  const txStatus = getTransactionStatus(tx);
-  const queries = useTransactionQueries();
-  const { activeNetwork } = useGlobalContext();
-
-  const showBlocksVisualizer =
-    !activeNetwork.isSubnet && (txStatus === 'success_microblock' || txStatus === 'pending');
-
-  const { data: balance } = useQuery(
-    transactionQK(TransactionQueryKeys.accountBalance, contractId),
-    queries.fetchAccountBalance(contractId),
-    { enabled: !!contractId }
-  );
-
-  const isEmptyRightContent = !contractId && !block && !(contractId && balance);
-
-  return (
-    <TwoColumnPage
-      title={
-        <>
-          <TxTitle data-test="txid-title" tx={tx} />
-          <TxAlerts tx={tx} />
-        </>
-      }
-      leftContent={
-        <>
-          {txDetails}
-          {showBlocksVisualizer && (
-            <Section title="Blocks">
-              <Flex px="16px" width="100%" flexDirection={['column', 'column', 'row']}>
-                <Box width={['100%']} margin={'24px 0'}>
-                  <BlocksVisualizer />
-                </Box>
-              </Flex>
-            </Section>
-          )}
-          {'events' in tx && <Events tx={tx} />}
-          {children}
-        </>
-      }
-      rightContent={
-        !isEmptyRightContent && (
-          <>
-            {contractId && <ContractDetailsCard contractId={contractId} />}
-            {block && <BtcAnchorBlockCard block={block} />}
-            {contractId && balance && (
-              <>
-                {hasStxBalance(balance) && (
-                  <Box mb={block ? '32px' : 'unset'}>
-                    <StxBalances balances={balance} principal={contractId} />
-                  </Box>
-                )}
-                {hasTokenBalance(balance) && <TokenBalancesCard balances={balance} />}
-              </>
-            )}
-          </>
-        )
-      }
-    />
-  );
-};
diff --git a/src/app/txid/[txid]/error.tsx b/src/app/txid/[txid]/error.tsx
deleted file mode 100644
index a400d08e4..000000000
--- a/src/app/txid/[txid]/error.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-'use client';
-
-import { PageTitle } from '@/app/common/components/PageTitle';
-import { buildUrl } from '@/app/common/utils/buildUrl';
-import { useGlobalContext } from '@/common/context/useAppContext';
-import { MessageWithIcon } from '@/components/message-with-icon';
-import { Meta } from '@/components/meta-head';
-import { Section } from '@/components/section';
-import { ButtonLink } from '@/ui/ButtonLink';
-import { Box, Grid, Stack } from '@/ui/components';
-import * as Sentry from '@sentry/nextjs';
-import * as React from 'react';
-import { useEffect } from 'react';
-import { TbAlertOctagon } from 'react-icons/tb';
-
-export default function Error({ error }: { error: any; reset: () => void }) {
-  useEffect(() => {
-    console.error(error);
-    if (error.status === 404) return;
-    Sentry.captureException(error);
-  }, [error]);
-  const network = useGlobalContext().activeNetwork;
-  return (
-    <>
-      <Meta title="Transaction not found" />
-      <PageTitle>Transaction not found</PageTitle>
-      <Section>
-        <Grid placeItems="center" p="32px" minHeight="350px">
-          <Box>
-            <MessageWithIcon
-              icon={TbAlertOctagon}
-              title="This ID doesn't seem right."
-              message="This page isn't available, and it looks like the Transaction ID provided isn't correct."
-              action={
-                <Stack isInline spacing="16px">
-                  <Box>
-                    <ButtonLink href={buildUrl('/', network)} mt="24px">
-                      Go home
-                    </ButtonLink>
-                  </Box>
-                  <Box>
-                    <ButtonLink
-                      href={buildUrl('/transactions', network)}
-                      variant="secondary"
-                      mt="24px"
-                    >
-                      All transactions
-                    </ButtonLink>
-                  </Box>
-                </Stack>
-              }
-            />
-          </Box>
-        </Grid>
-      </Section>
-    </>
-  );
-}
diff --git a/src/app/txid/[txid]/head.tsx b/src/app/txid/[txid]/head.tsx
deleted file mode 100644
index d583a2ab3..000000000
--- a/src/app/txid/[txid]/head.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { DefaultHeadTags } from '../../DefaultHeadTags';
-import { defaultTitle } from '../../common/consts/head';
-
-export default function Head() {
-  const title = `Transaction - ${defaultTitle}`;
-  return (
-    <>
-      <title>{title}</title>
-      <meta property="og:title" content={title} />
-      <DefaultHeadTags />
-    </>
-  );
-}
diff --git a/src/app/txid/[txid]/page.tsx b/src/app/txid/[txid]/page.tsx
deleted file mode 100644
index eeda5f9cc..000000000
--- a/src/app/txid/[txid]/page.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { TransactionPageComponent } from '@/app/txid/TransactionPageComponent';
-import { UnlockingScheduleModal } from '@/components/modals/unlocking-schedule';
-import * as React from 'react';
-
-function TransactionPage({
-  params: { txid },
-  claritySyntax,
-}: {
-  params: { txid: string };
-  claritySyntax: Record<string, any>;
-}) {
-  return (
-    <>
-      <UnlockingScheduleModal />
-      <TransactionPageComponent txId={txid} claritySyntax={claritySyntax} />
-    </>
-  );
-}
-
-export default TransactionPage;
diff --git a/src/app/txid/[txid]/utils.ts b/src/app/txid/[txid]/utils.ts
deleted file mode 100644
index e30d3c3ab..000000000
--- a/src/app/txid/[txid]/utils.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { MempoolTransaction, Transaction } from '@stacks/stacks-blockchain-api-types';
-
-export const getSenderName = (txType: Transaction['tx_type']) => {
-  switch (txType) {
-    case 'smart_contract':
-      return 'Deployed by';
-    case 'contract_call':
-      return 'Called by';
-    default:
-      return 'Sender address';
-  }
-};
-
-export const isInMicroblock = (tx: Transaction | MempoolTransaction) =>
-  tx?.tx_status === 'success' && tx.is_unanchored;
-
-export const isInMempool = (tx: Transaction | MempoolTransaction): tx is MempoolTransaction => {
-  return !('block_height' in tx);
-};
diff --git a/src/common/context/GlobalContext.tsx b/src/common/context/GlobalContext.tsx
index bdffb1f27..392ca8b44 100644
--- a/src/common/context/GlobalContext.tsx
+++ b/src/common/context/GlobalContext.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { DEFAULT_DEVNET_SERVER, IS_BROWSER } from '@/common/constants';
 import {
   NetworkIdModeMap,
@@ -16,6 +18,8 @@ import {
   buildCustomNetworkUrl,
   fetchCustomNetworkId,
 } from '@/components/modals/AddNetwork/AddNetworkForm';
+import { useSearchQuery } from '@/features/search/use-search';
+import { useSearchParams } from 'next/navigation';
 
 interface GlobalContextProps {
   cookies: string;
@@ -53,18 +57,28 @@ export const GlobalContext = createContext<GlobalContextProps>({
 
 export const AppContextProvider: FC<any> = ({
   cookies,
-  queryNetworkMode,
-  queryApiUrl,
   apiUrls,
   btcBlockBaseUrls,
   btcTxBaseUrls,
   btcAddressBaseUrls,
-  querySubnet,
-  queryBtcBlockBaseUrl,
-  queryBtcTxBaseUrl,
-  queryBtcAddressBaseUrl,
   children,
 }) => {
+  console.log('apiUrls1', apiUrls);
+  const { chain, api, subnet, btcBlockBaseUrl, btcTxBaseUrl, btcAddressBaseUrl } =
+    useSearchParams();
+
+  const queryNetworkMode = ((Array.isArray(chain) ? chain[0] : chain) ||
+    NetworkModes.Mainnet) as NetworkModes;
+  const queryApiUrl = Array.isArray(api) ? api[0] : api;
+  const querySubnet = Array.isArray(subnet) ? subnet[0] : subnet;
+  const queryBtcBlockBaseUrl = Array.isArray(btcBlockBaseUrl)
+    ? btcBlockBaseUrl[0]
+    : btcBlockBaseUrl;
+  const queryBtcTxBaseUrl = Array.isArray(btcTxBaseUrl) ? btcTxBaseUrl[0] : btcTxBaseUrl;
+  const queryBtcAddressBaseUrl = Array.isArray(btcAddressBaseUrl)
+    ? btcAddressBaseUrl[0]
+    : btcAddressBaseUrl;
+
   if (IS_BROWSER && (window as any)?.location?.search?.includes('err=1'))
     throw new Error('test error');
   const customNetworksCookie = JSON.parse(cookie.parse(cookies || '').customNetworks || '{}');
diff --git a/src/common/hooks/useTxsCSVData.ts b/src/common/hooks/useTxsCSVData.ts
index 588df8fa6..f1c29c2a6 100644
--- a/src/common/hooks/useTxsCSVData.ts
+++ b/src/common/hooks/useTxsCSVData.ts
@@ -5,7 +5,7 @@ import {
 } from '@stacks/stacks-blockchain-api-types';
 import { InfiniteData, useQueryClient } from '@tanstack/react-query';
 
-import { useFilterState } from '@/app/common/hooks/use-filter-state';
+import { useFilterState } from '@/app-pages/common/hooks/use-filter-state';
 import { microStxToStx, microToStacks } from '../utils';
 
 export type CSVDownloadObjectType = {
diff --git a/src/common/state/store.ts b/src/common/state/store.ts
index 65d0b0a75..51734a034 100644
--- a/src/common/state/store.ts
+++ b/src/common/state/store.ts
@@ -6,7 +6,7 @@ import {
 } from '@/features/transactions-filter/transactions-filter-slice';
 import { combineReducers, configureStore } from '@reduxjs/toolkit';
 
-import { ConnectState, sandboxSlice } from '../../app/sandbox/sandbox-slice';
+import { ConnectState, sandboxSlice } from '@/app-pages/sandbox/sandbox-slice';
 
 const rootReducer = combineReducers({
   modal: modalSlice.reducer,
diff --git a/src/components/app-config.tsx b/src/components/app-config.tsx
index 581f21791..667976da5 100644
--- a/src/components/app-config.tsx
+++ b/src/components/app-config.tsx
@@ -4,13 +4,13 @@ import { useAppSelector } from '@/common/state/hooks';
 import { NetworkMode } from '@/common/types/network';
 import { cache } from '@emotion/css';
 import { CacheProvider } from '@emotion/react';
-import { useRouter } from 'next/router';
+import { useRouter } from 'next/navigation';
 import React, { useEffect } from 'react';
 import toast from 'react-hot-toast';
 
 import { Connect } from '@stacks/connect-react';
 
-import { selectUserSession } from '../app/sandbox/sandbox-slice';
+import { selectUserSession } from '@/app-pages/sandbox/sandbox-slice';
 
 declare const window: any;
 
@@ -59,7 +59,7 @@ export const AppConfig: React.FC<{
         userSession,
       }}
     >
-      <CacheProvider value={cache}>{children}</CacheProvider>
+      {children}
     </Connect>
   );
 };
diff --git a/src/components/balances/principal-token-balances.tsx b/src/components/balances/principal-token-balances.tsx
index c4c3792ee..6cbaa4d30 100644
--- a/src/components/balances/principal-token-balances.tsx
+++ b/src/components/balances/principal-token-balances.tsx
@@ -1,4 +1,4 @@
-import { useVerticallyStackedElementsBorderStyle } from '@/app/common/styles/border';
+import { useVerticallyStackedElementsBorderStyle } from '@/app-pages/common/styles/border';
 import { hexToString } from '@/common/utils';
 import { TokenAssetListItem } from '@/components/balances/token-asset-list-item';
 import { Section } from '@/components/section';
diff --git a/src/components/balances/stx-balance-card.tsx b/src/components/balances/stx-balance-card.tsx
index 82763383f..e5d7bfb15 100644
--- a/src/components/balances/stx-balance-card.tsx
+++ b/src/components/balances/stx-balance-card.tsx
@@ -19,7 +19,7 @@ import { TbQrcode, TbX } from 'react-icons/tb';
 
 import { AddressBalanceResponse } from '@stacks/stacks-blockchain-api-types';
 
-import { useCurrentStxPrice } from '../../app/common/hooks/use-current-prices';
+import { useCurrentStxPrice } from '@/app-pages/common/hooks/use-current-prices';
 
 export const BalanceItem = ({ balance, ...rest }: any) => {
   const { data: stxPrice } = useCurrentStxPrice();
diff --git a/src/components/balances/token-asset-list-item.tsx b/src/components/balances/token-asset-list-item.tsx
index aaf5d5c50..03c708e8b 100644
--- a/src/components/balances/token-asset-list-item.tsx
+++ b/src/components/balances/token-asset-list-item.tsx
@@ -1,7 +1,7 @@
 'use client';
 
-import { useFtMetadata } from '@/app/common/queries/useFtMetadata';
-import { useNftMetadata } from '@/app/common/queries/useNftMetadata';
+import { useFtMetadata } from '@/app-pages/common/queries/useFtMetadata';
+import { useNftMetadata } from '@/app-pages/common/queries/useNftMetadata';
 import { useApi } from '@/common/api/client';
 import { ftDecimals, getAssetNameParts, initBigNumber } from '@/common/utils';
 import { TokenLink } from '@/components/links';
diff --git a/src/components/btc-stx-price.tsx b/src/components/btc-stx-price.tsx
index 72abbb4d5..d5afcf10d 100644
--- a/src/components/btc-stx-price.tsx
+++ b/src/components/btc-stx-price.tsx
@@ -1,14 +1,18 @@
+'use client';
+
 import { usdFormatter } from '@/common/utils';
 import { Circle } from '@/components/circle';
 import { Box, Icon, Flex } from '@/ui/components';
 import { BitcoinIcon } from '@/ui/icons';
 import { StxIcon } from '@/ui/icons/StxIcon';
 import { css } from '@emotion/react';
-import dynamic from 'next/dynamic';
 import * as React from 'react';
 import { FC, Fragment } from 'react';
 
-import { useCurrentBtcPrice, useCurrentStxPrice } from '../app/common/hooks/use-current-prices';
+import {
+  useCurrentBtcPrice,
+  useCurrentStxPrice,
+} from '@/app-pages/common/hooks/use-current-prices';
 import { ExplorerSkeletonLoader } from '@/components/loaders/skeleton-common';
 
 const wrapperStyle = css`
@@ -44,7 +48,6 @@ export const BtcStxPrice: FC = () => {
   } = useCurrentStxPrice();
   const formattedBtcPrice = btcPrice ? usdFormatter.format(btcPrice) : '';
   const formattedStxPrice = stxPrice ? usdFormatter.format(stxPrice) : '';
-
   return (
     <Fragment>
       <Box css={wrapperStyle}>
diff --git a/src/components/filter-button.tsx b/src/components/filter-button.tsx
index eb4a18fbf..aba37d164 100644
--- a/src/components/filter-button.tsx
+++ b/src/components/filter-button.tsx
@@ -6,7 +6,7 @@ import React, { memo } from 'react';
 import { FiFilter } from 'react-icons/fi';
 import { useColorMode } from '@chakra-ui/react';
 
-import { useFilterState } from '../app/common/hooks/use-filter-state';
+import { useFilterState } from '@/app-pages/common/hooks/use-filter-state';
 
 export const FilterButton = memo(() => {
   const { toggleFilterVisibility } = useFilterState();
diff --git a/src/components/filter-panel.tsx b/src/components/filter-panel.tsx
index 9e3cb0572..a2054f226 100644
--- a/src/components/filter-panel.tsx
+++ b/src/components/filter-panel.tsx
@@ -11,7 +11,7 @@ import { RiCloseLine } from 'react-icons/ri';
 
 import { GetTransactionListTypeEnum } from '@stacks/blockchain-api-client';
 
-import { useFilterState } from '../app/common/hooks/use-filter-state';
+import { useFilterState } from '@/app-pages/common/hooks/use-filter-state';
 
 const FILTERABLE_TYPES: GetTransactionListTypeEnum[] = [
   GetTransactionListTypeEnum.smart_contract,
diff --git a/src/components/footer.tsx b/src/components/footer.tsx
index bc7ae477b..55013176f 100644
--- a/src/components/footer.tsx
+++ b/src/components/footer.tsx
@@ -1,4 +1,4 @@
-import { buildUrl } from '@/app/common/utils/buildUrl';
+import { buildUrl } from '@/app-pages/common/utils/buildUrl';
 import { useGlobalContext } from '@/common/context/useAppContext';
 import { Box, Flex, TextLink } from '@/ui/components';
 import Link, { LinkProps } from 'next/link';
diff --git a/src/components/function-summary/args.tsx b/src/components/function-summary/args.tsx
index 2b716d560..4fbf6278b 100644
--- a/src/components/function-summary/args.tsx
+++ b/src/components/function-summary/args.tsx
@@ -7,7 +7,7 @@ import * as React from 'react';
 
 import { ContractCallTransaction } from '@stacks/stacks-blockchain-api-types';
 
-import { useVerticallyStackedElementsBorderStyle } from '../../app/common/styles/border';
+import { useVerticallyStackedElementsBorderStyle } from '@/app-pages/common/styles/border';
 
 type FunctionArg = Singleton<
   Required<Required<ContractCallTransaction['contract_call']>['function_args']>
diff --git a/src/components/function-summary/function-summary.tsx b/src/components/function-summary/function-summary.tsx
index 41e2b97a6..67ce8ccf3 100644
--- a/src/components/function-summary/function-summary.tsx
+++ b/src/components/function-summary/function-summary.tsx
@@ -8,8 +8,8 @@ import { memo } from 'react';
 
 import { ContractCallTransaction } from '@stacks/stacks-blockchain-api-types';
 
-import { KeyValueHorizontal } from '../../app/common/components/KeyValueHorizontal';
-import { useVerticallyStackedElementsBorderStyle } from '../../app/common/styles/border';
+import { KeyValueHorizontal } from '@/app-pages/common/components/KeyValueHorizontal';
+import { useVerticallyStackedElementsBorderStyle } from '@/app-pages/common/styles/border';
 
 export const FunctionSummarySection = memo<{
   result?: any;
diff --git a/src/components/function-summary/value.tsx b/src/components/function-summary/value.tsx
index f0a3da677..93e899a05 100644
--- a/src/components/function-summary/value.tsx
+++ b/src/components/function-summary/value.tsx
@@ -9,7 +9,7 @@ import * as React from 'react';
 
 import { cvToJSON, hexToCV } from '@stacks/transactions';
 
-import { Value } from '../../app/common/components/Value';
+import { Value } from '@/app-pages/common/components/Value';
 
 const getPrettyClarityValueType = (type: any) => {
   if (type === 'bool' || type === 'int' || type === 'principal' || type === 'uint') {
diff --git a/src/components/links.tsx b/src/components/links.tsx
index 3542d356a..85613776b 100644
--- a/src/components/links.tsx
+++ b/src/components/links.tsx
@@ -1,4 +1,4 @@
-import { buildUrl } from '@/app/common/utils/buildUrl';
+import { buildUrl } from '@/app-pages/common/utils/buildUrl';
 import { useGlobalContext } from '@/common/context/useAppContext';
 import { Network } from '@/common/types/network';
 import { forwardRef } from '@chakra-ui/react';
diff --git a/src/components/loaders/skeleton-transaction.tsx b/src/components/loaders/skeleton-transaction.tsx
index e3c4880b0..1dc5d4d32 100644
--- a/src/components/loaders/skeleton-transaction.tsx
+++ b/src/components/loaders/skeleton-transaction.tsx
@@ -1,12 +1,12 @@
-import { PageTitle } from '@/app/common/components/PageTitle';
-import { TwoColumnPage } from '@/app/common/components/TwoColumnPage';
-import { ConnectToStacks } from '@/app/sandbox/layout/ConnectToStacks';
-import { Header } from '@/app/sandbox/layout/Header';
-import { RightPanel } from '@/app/sandbox/layout/RightPanel';
-import { SideNav } from '@/app/sandbox/layout/SideNav';
-import { setUserData, toggleRightPanel } from '@/app/sandbox/sandbox-slice';
-import { BtcAnchorBlockCard } from '@/app/txid/[txid]/Cards/BtcAnchorBlockCard';
-import { ContractDetailsCard } from '@/app/txid/[txid]/Cards/ContractDetailsCard';
+import { PageTitle } from '@/app-pages/common/components/PageTitle';
+import { TwoColumnPage } from '@/app-pages/common/components/TwoColumnPage';
+import { ConnectToStacks } from '@/app-pages/sandbox/layout/ConnectToStacks';
+import { Header } from '@/app-pages/sandbox/layout/Header';
+import { RightPanel } from '@/app-pages/sandbox/layout/RightPanel';
+import { SideNav } from '@/app-pages/sandbox/layout/SideNav';
+import { setUserData, toggleRightPanel } from '@/app-pages/sandbox/sandbox-slice';
+import { BtcAnchorBlockCard } from '@/app-pages/txid/[txid]/Cards/BtcAnchorBlockCard';
+import { ContractDetailsCard } from '@/app-pages/txid/[txid]/Cards/ContractDetailsCard';
 import { TwoColsListItem } from '@/common/components/TwoColumnsListItem';
 import { hasStxBalance, hasTokenBalance } from '@/common/utils/accounts';
 import { TokenBalancesCard } from '@/components/balances/principal-token-balances';
diff --git a/src/components/modals/AddNetwork/AddNetworkForm.tsx b/src/components/modals/AddNetwork/AddNetworkForm.tsx
index 1e1d3ecce..f1b32b251 100644
--- a/src/components/modals/AddNetwork/AddNetworkForm.tsx
+++ b/src/components/modals/AddNetwork/AddNetworkForm.tsx
@@ -1,4 +1,4 @@
-import { getQueryParams } from '@/app/common/utils/buildUrl';
+import { getQueryParams } from '@/app-pages/common/utils/buildUrl';
 import { fetchFromApi } from '@/common/api/fetch';
 import { DEFAULT_V2_INFO_ENDPOINT } from '@/common/constants';
 import { NetworkIdModeMap } from '@/common/constants/network';
diff --git a/src/components/network-items.tsx b/src/components/network-items.tsx
index 0758a79fe..8425ca6ac 100644
--- a/src/components/network-items.tsx
+++ b/src/components/network-items.tsx
@@ -1,7 +1,7 @@
 'use client';
 
-import { ONE_MINUTE } from '@/app/common/queries/query-stale-time';
-import { getQueryParams } from '@/app/common/utils/buildUrl';
+import { ONE_MINUTE } from '@/app-pages/common/queries/query-stale-time';
+import { getQueryParams } from '@/app-pages/common/utils/buildUrl';
 import { getNetworkModeFromNetworkId } from '@/common/api/utils';
 import { Badge } from '@/common/components/Badge';
 import { DEFAULT_V2_INFO_ENDPOINT, MODALS } from '@/common/constants';
diff --git a/src/components/post-conditions.tsx b/src/components/post-conditions.tsx
index 4e420562a..c491bc0f5 100644
--- a/src/components/post-conditions.tsx
+++ b/src/components/post-conditions.tsx
@@ -27,9 +27,9 @@ import {
   Transaction,
 } from '@stacks/stacks-blockchain-api-types';
 
-import { ListItem } from '../app/common/components/ListItem';
-import { useVerticallyStackedElementsBorderStyle } from '../app/common/styles/border';
-import { StxPriceButton } from '@/app/common/components/StxPriceButton';
+import { ListItem } from '@/app-pages/common/components/ListItem';
+import { useVerticallyStackedElementsBorderStyle } from '@/app-pages/common/styles/border';
+import { StxPriceButton } from '@/app-pages/common/components/StxPriceButton';
 
 const getConditionType = (type: PostCondition['type']) => {
   switch (type) {
diff --git a/src/components/timestamp.tsx b/src/components/timestamp.tsx
index 2c6d08dd4..69e2530ef 100644
--- a/src/components/timestamp.tsx
+++ b/src/components/timestamp.tsx
@@ -3,7 +3,7 @@ import { Box, Flex, Tooltip } from '@/ui/components';
 import * as React from 'react';
 import { TbClock } from 'react-icons/tb';
 
-import { Value } from '../app/common/components/Value';
+import { Value } from '@/app-pages/common/components/Value';
 
 interface TimestampProps {
   ts: number;
diff --git a/src/components/transaction-item.tsx b/src/components/transaction-item.tsx
index 4afbb3ce0..8608ec4d6 100644
--- a/src/components/transaction-item.tsx
+++ b/src/components/transaction-item.tsx
@@ -1,4 +1,4 @@
-import { buildUrl } from '@/app/common/utils/buildUrl';
+import { buildUrl } from '@/app-pages/common/utils/buildUrl';
 import { useGlobalContext } from '@/common/context/useAppContext';
 import { toRelativeTime, truncateMiddle } from '@/common/utils';
 import { getTransactionStatus } from '@/common/utils/transactions';
@@ -12,9 +12,9 @@ import { HiOutlineArrowSmRight } from 'react-icons/hi';
 
 import { MempoolTransaction, Transaction } from '@stacks/stacks-blockchain-api-types';
 
-import { TxIcon, getTxTypeIcon } from '../app/common/components/TxIcon';
-import { useTxTitle } from '../app/common/components/tx-lists/common/utils/tx';
-import { getTransactionTypeLabel } from '../app/common/components/tx-lists/utils/tx';
+import { TxIcon, getTxTypeIcon } from '@/app-pages/common/components/TxIcon';
+import { useTxTitle } from '@/app-pages/common/components/tx-lists/common/utils/tx';
+import { getTransactionTypeLabel } from '@/app-pages/common/components/tx-lists/utils/tx';
 
 export { getTxTypeIcon };
 
diff --git a/src/components/transaction-list.tsx b/src/components/transaction-list.tsx
index 201d77129..8ca94dd78 100644
--- a/src/components/transaction-list.tsx
+++ b/src/components/transaction-list.tsx
@@ -13,7 +13,7 @@ import {
   TransactionResults,
 } from '@stacks/stacks-blockchain-api-types';
 
-import { useFilterState } from '../app/common/hooks/use-filter-state';
+import { useFilterState } from '@/app-pages/common/hooks/use-filter-state';
 
 const Item: React.FC<
   { tx: MempoolTransaction | Transaction; isLast?: boolean; principal?: string } & BoxProps
diff --git a/src/components/tx-events.tsx b/src/components/tx-events.tsx
index 01c3132dd..0ba5c8794 100644
--- a/src/components/tx-events.tsx
+++ b/src/components/tx-events.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useFtMetadata } from '@/app/common/queries/useFtMetadata';
+import { useFtMetadata } from '@/app-pages/common/queries/useFtMetadata';
 import { useApi } from '@/common/api/client';
 import {
   addSepBetweenStrings,
@@ -26,8 +26,8 @@ import {
   TransactionEventAssetType,
 } from '@stacks/stacks-blockchain-api-types';
 
-import { ListItem } from '../app/common/components/ListItem';
-import { useVerticallyStackedElementsBorderStyle } from '../app/common/styles/border';
+import { ListItem } from '@/app-pages/common/components/ListItem';
+import { useVerticallyStackedElementsBorderStyle } from '@/app-pages/common/styles/border';
 import { Pending } from './status';
 import { deserialize, prettyPrint } from '@stacks/transactions/dist/cl';
 
diff --git a/src/components/tx-title.tsx b/src/components/tx-title.tsx
index c95c1c1ef..1eeef3cd8 100644
--- a/src/components/tx-title.tsx
+++ b/src/components/tx-title.tsx
@@ -1,4 +1,4 @@
-import { PageTitle } from '@/app/common/components/PageTitle';
+import { PageTitle } from '@/app-pages/common/components/PageTitle';
 import { TxStatus } from '@/common/types/tx';
 import { getContractName, getFunctionName, microToStacks } from '@/common/utils';
 import { getTransactionStatus } from '@/common/utils/transactions';
diff --git a/src/features/address-page/address-summary.tsx b/src/features/address-page/address-summary.tsx
index 151ec9740..e43c6c9bc 100644
--- a/src/features/address-page/address-summary.tsx
+++ b/src/features/address-page/address-summary.tsx
@@ -3,9 +3,9 @@ import { TokenBalancesRow } from '@/components/balances/token-balances-row';
 import { Section } from '@/components/section';
 import { Box, Flex } from '@/ui/components';
 
-import { KeyValueHorizontal } from '../../app/common/components/KeyValueHorizontal';
-import { Value } from '../../app/common/components/Value';
-import { useVerticallyStackedElementsBorderStyle } from '../../app/common/styles/border';
+import { KeyValueHorizontal } from '@/app-pages/common/components/KeyValueHorizontal';
+import { Value } from '@/app-pages/common/components/Value';
+import { useVerticallyStackedElementsBorderStyle } from '@/app-pages/common/styles/border';
 
 export const AddressSummary = ({
   principal,
diff --git a/src/features/blocks-visualizer/index.tsx b/src/features/blocks-visualizer/index.tsx
index 643220a11..df91413e1 100644
--- a/src/features/blocks-visualizer/index.tsx
+++ b/src/features/blocks-visualizer/index.tsx
@@ -1,4 +1,4 @@
-import { buildUrl } from '@/app/common/utils/buildUrl';
+import { buildUrl } from '@/app-pages/common/utils/buildUrl';
 import { useApi } from '@/common/api/client';
 import { useGlobalContext } from '@/common/context/useAppContext';
 import { Box, Icon, Spinner, Tooltip } from '@/ui/components';
@@ -13,7 +13,7 @@ import { TbCurrencyBitcoin } from 'react-icons/tb';
 
 import { Block as BlockType } from '@stacks/stacks-blockchain-api-types';
 
-import { useBlockListInfinite } from '../../app/common/queries/useBlockListInfinite';
+import { useBlockListInfinite } from '@/app-pages/common/queries/useBlockListInfinite';
 
 const wrapperStyle = css`
   display: flex;
diff --git a/src/features/search/items/block-result-item.tsx b/src/features/search/items/block-result-item.tsx
index 7c2013356..f295f9a77 100644
--- a/src/features/search/items/block-result-item.tsx
+++ b/src/features/search/items/block-result-item.tsx
@@ -1,4 +1,4 @@
-import { BlockListItem } from '@/app/components/BlockList/BlockListItem';
+import { BlockListItem } from '@/app-pages/components/BlockList/BlockListItem';
 import { FoundResult } from '@/common/types/search-results';
 import { Box } from '@/ui/components';
 import { css } from '@emotion/react';
diff --git a/src/features/search/items/result-item-wrapper.tsx b/src/features/search/items/result-item-wrapper.tsx
index 28e39095b..1140bc5c5 100644
--- a/src/features/search/items/result-item-wrapper.tsx
+++ b/src/features/search/items/result-item-wrapper.tsx
@@ -3,7 +3,7 @@ import React, { FC } from 'react';
 import { forwardRef } from '@chakra-ui/react';
 import Link, { LinkProps } from 'next/link';
 import { useGlobalContext } from '@/common/context/useAppContext';
-import { buildUrl } from '@/app/common/utils/buildUrl';
+import { buildUrl } from '@/app-pages/common/utils/buildUrl';
 
 export const ResultItemWrapper = forwardRef<FlexProps, 'div'>(({ children, ...rest }, ref) => (
   <Flex ref={ref}>
diff --git a/src/features/search/items/tx-result-item.tsx b/src/features/search/items/tx-result-item.tsx
index 7f322f338..d8c8b212a 100644
--- a/src/features/search/items/tx-result-item.tsx
+++ b/src/features/search/items/tx-result-item.tsx
@@ -1,5 +1,5 @@
-import { MempoolTxListItem } from '@/app/common/components/tx-lists/list-items/MempoolTxListItem';
-import { TxListItem } from '@/app/common/components/tx-lists/list-items/TxListItem';
+import { MempoolTxListItem } from '@/app-pages/common/components/tx-lists/list-items/MempoolTxListItem';
+import { TxListItem } from '@/app-pages/common/components/tx-lists/list-items/TxListItem';
 import { FoundResult } from '@/common/types/search-results';
 import { Box } from '@/ui/components';
 import { css } from '@emotion/react';
diff --git a/src/features/search/use-search.ts b/src/features/search/use-search.ts
index 9009d4c88..4eed8c3f7 100644
--- a/src/features/search/use-search.ts
+++ b/src/features/search/use-search.ts
@@ -15,7 +15,7 @@ import { useQuery } from '@tanstack/react-query';
 import { Block } from '@stacks/stacks-blockchain-api-types';
 import { bufferCVFromString, cvToHex, tupleCV } from '@stacks/transactions';
 
-import { useDebounce } from '../../app/common/hooks/use-debounce';
+import { useDebounce } from '@/app-pages/common/hooks/use-debounce';
 
 export const useSearchQuery = (id: string) => {
   const { searchApi, blocksApi, nonFungibleTokensApi } = useApi();
diff --git a/src/global-styles.tsx b/src/global-styles.tsx
index e5729f5f9..5e572e72b 100644
--- a/src/global-styles.tsx
+++ b/src/global-styles.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { Global, css } from '@emotion/react';
 import * as React from 'react';
 
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 7bb185b26..e9fd552b6 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,6 +1,6 @@
-import { PageWrapper } from '@/app/PageWrapper';
-import { Providers } from '@/app/Providers';
-import AppError from '@/app/error';
+import { PageWrapper } from '@/app-pages/PageWrapper';
+import { Providers } from '@/app-pages/Providers';
+import AppError from '@/app-pages/error';
 import { IS_BROWSER } from '@/common/constants';
 import {
   NetworkModeBtcBlockBaseUrlMap,
@@ -29,6 +29,7 @@ function ExplorerApp({
   querySubnet,
   pageProps,
 }: any) {
+  console.log('APP');
   return (
     <ErrorBoundary
       fallbackRender={({ error, resetErrorBoundary }) => (
@@ -64,34 +65,35 @@ function ExplorerApp({
   );
 }
 
-ExplorerApp.getInitialProps = (appContext: AppContext) => {
-  const query = appContext.ctx.query;
-  const queryNetworkMode = ((Array.isArray(query.chain) ? query.chain[0] : query.chain) ||
-    NetworkModes.Mainnet) as NetworkModes;
-  const queryApiUrl = Array.isArray(query.api) ? query.api[0] : query.api;
-  const querySubnet = Array.isArray(query.subnet) ? query.subnet[0] : query.subnet;
-  const queryBtcBlockBaseUrl = Array.isArray(query.queryBtcBlockBaseUrl)
-    ? query.queryBtcBlockBaseUrl[0]
-    : query.queryBtcBlockBaseUrl;
-  const queryBtcTxBaseUrl = Array.isArray(query.queryBtcTxBaseUrl)
-    ? query.queryBtcTxBaseUrl[0]
-    : query.queryBtcTxBaseUrl;
-  const queryBtcAddressBaseUrl = Array.isArray(query.queryBtcAddressBaseUrl)
-    ? query.queryBtcAddressBaseUrl[0]
-    : query.queryBtcAddressBaseUrl;
-  return {
-    cookies: appContext.ctx.req?.headers?.cookie || (IS_BROWSER ? document?.cookie : ''),
-    apiUrls: NetworkModeUrlMap,
-    btcBlockBaseUrls: NetworkModeBtcBlockBaseUrlMap,
-    btcTxBaseUrls: NetworkModeBtcTxBaseUrlMap,
-    btcAddressBaseUrls: NetworkModeBtcAddressBaseUrlMap,
-    queryNetworkMode,
-    queryApiUrl,
-    queryBtcBlockBaseUrl,
-    queryBtcTxBaseUrl,
-    queryBtcAddressBaseUrl,
-    querySubnet,
-  };
-};
+// ExplorerApp.getInitialProps = (appContext: AppContext) => {
+//   console.log('[DEBUG] getInitialProps');
+//   const query = appContext.ctx.query;
+//   const queryNetworkMode = ((Array.isArray(query.chain) ? query.chain[0] : query.chain) ||
+//     NetworkModes.Mainnet) as NetworkModes;
+//   const queryApiUrl = Array.isArray(query.api) ? query.api[0] : query.api;
+//   const querySubnet = Array.isArray(query.subnet) ? query.subnet[0] : query.subnet;
+//   const queryBtcBlockBaseUrl = Array.isArray(query.queryBtcBlockBaseUrl)
+//     ? query.queryBtcBlockBaseUrl[0]
+//     : query.queryBtcBlockBaseUrl;
+//   const queryBtcTxBaseUrl = Array.isArray(query.queryBtcTxBaseUrl)
+//     ? query.queryBtcTxBaseUrl[0]
+//     : query.queryBtcTxBaseUrl;
+//   const queryBtcAddressBaseUrl = Array.isArray(query.queryBtcAddressBaseUrl)
+//     ? query.queryBtcAddressBaseUrl[0]
+//     : query.queryBtcAddressBaseUrl;
+//   return {
+//     cookies: appContext.ctx.req?.headers?.cookie || (IS_BROWSER ? document?.cookie : ''),
+//     apiUrls: NetworkModeUrlMap,
+//     btcBlockBaseUrls: NetworkModeBtcBlockBaseUrlMap,
+//     btcTxBaseUrls: NetworkModeBtcTxBaseUrlMap,
+//     btcAddressBaseUrls: NetworkModeBtcAddressBaseUrlMap,
+//     queryNetworkMode,
+//     queryApiUrl,
+//     queryBtcBlockBaseUrl,
+//     queryBtcTxBaseUrl,
+//     queryBtcAddressBaseUrl,
+//     querySubnet,
+//   };
+// };
 
 export default ExplorerApp;
diff --git a/src/pages/address/[principal].tsx b/src/pages/address/[principal].tsx
index f2d74a482..ebf891653 100644
--- a/src/pages/address/[principal].tsx
+++ b/src/pages/address/[principal].tsx
@@ -1,11 +1,11 @@
-import AppAddressPageError from '@/app/address/[principal]/error';
+import AppAddressPageError from '@/app-pages/address/[principal]/error';
 import { SkeletonPageWithTwoColumns } from '@/components/loaders/skeleton-transaction';
 import dynamic from 'next/dynamic';
 import { useRouter } from 'next/router';
 import * as React from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 
-const AppAddressPage = dynamic(() => import('../../app/address/[principal]/page'), {
+const AppAddressPage = dynamic(() => import('@/app-pages/address/[principal]/page'), {
   loading: () => <SkeletonPageWithTwoColumns />,
   ssr: false,
 });
diff --git a/src/pages/block/[hash].tsx b/src/pages/block/[hash].tsx
index 3f0495739..f5668256a 100644
--- a/src/pages/block/[hash].tsx
+++ b/src/pages/block/[hash].tsx
@@ -1,4 +1,4 @@
-import AppBlockPageError from '@/app/block/[hash]/error';
+import AppBlockPageError from '@/app-pages/block/[hash]/error';
 import { SkeletonPageWithTwoColumns } from '@/components/loaders/skeleton-transaction';
 import { Meta } from '@/components/meta-head';
 import dynamic from 'next/dynamic';
@@ -6,7 +6,7 @@ import { useRouter } from 'next/router';
 import * as React from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 
-const AppBlockPage = dynamic(() => import('../../app/block/[hash]/page'), {
+const AppBlockPage = dynamic(() => import('@/app-pages/block/[hash]/page'), {
   loading: () => <SkeletonPageWithTwoColumns />,
   ssr: false,
 });
diff --git a/src/pages/blocks.tsx b/src/pages/blocks.tsx
index 9d25c2566..efd2c3e66 100644
--- a/src/pages/blocks.tsx
+++ b/src/pages/blocks.tsx
@@ -1,7 +1,7 @@
 import { Meta } from '@/components/meta-head';
 import * as React from 'react';
 
-import AppBlocksPage from '../app/blocks/page';
+import AppBlocksPage from '@/app-pages/blocks/page';
 
 export default function BlocksPage() {
   return (
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 9fb31663d..dbaec1aa7 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,4 +1,4 @@
-import { HomeClient } from '@/app/HomeClient';
+import { HomeClient } from '@/app-pages/HomeClient';
 import { Meta } from '@/components/meta-head';
 import { FC } from 'react';
 
diff --git a/src/pages/microblock/[hash].tsx b/src/pages/microblock/[hash].tsx
index 4e2d907e8..d3c9d9e68 100644
--- a/src/pages/microblock/[hash].tsx
+++ b/src/pages/microblock/[hash].tsx
@@ -1,11 +1,11 @@
-import AppMicroblockPageError from '@/app/microblock/[hash]/error';
+import AppMicroblockPageError from '@/app-pages/microblock/[hash]/error';
 import { SkeletonPageWithOneColumn } from '@/components/loaders/skeleton-transaction';
 import dynamic from 'next/dynamic';
 import { useRouter } from 'next/router';
 import * as React from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 
-const AppMicroblockPage = dynamic(() => import('../../app/microblock/[hash]/page'), {
+const AppMicroblockPage = dynamic(() => import('@/app-pages/microblock/[hash]/page'), {
   loading: () => <SkeletonPageWithOneColumn />,
   ssr: false,
 });
diff --git a/src/pages/sandbox/contract-call/[[...params]].tsx b/src/pages/sandbox/contract-call/[[...params]].tsx
index ab9a3f0d8..deb3c6d48 100644
--- a/src/pages/sandbox/contract-call/[[...params]].tsx
+++ b/src/pages/sandbox/contract-call/[[...params]].tsx
@@ -5,7 +5,7 @@ import { useRouter } from 'next/router';
 import * as React from 'react';
 
 const AppSandboxContractPage = dynamic(
-  () => import('../../../app/sandbox/contract-call/[[...params]]/page'),
+  () => import('@/app-pages/sandbox/contract-call/[[...params]]/page'),
   {
     loading: () => <Spinner alignSelf={'center'} justifySelf={'center'} size={'32px'} />,
     ssr: false,
diff --git a/src/pages/sandbox/deploy.tsx b/src/pages/sandbox/deploy.tsx
index dd65500ee..279a1c6ba 100644
--- a/src/pages/sandbox/deploy.tsx
+++ b/src/pages/sandbox/deploy.tsx
@@ -1,15 +1,15 @@
-import { claritySyntax } from '@/app/common/claritySyntax';
+import { claritySyntax } from '@/app-pages/common/claritySyntax';
 import { SkeletonSandbox } from '@/components/loaders/skeleton-transaction';
 import { Spinner } from '@/ui/Spinner';
 import dynamic from 'next/dynamic';
 import * as React from 'react';
 
-const AppSandboxDeployPage = dynamic(() => import('../../app/sandbox/deploy/page'), {
+const AppSandboxDeployPage = dynamic(() => import('@/app-pages/sandbox/deploy/page'), {
   loading: () => <Spinner alignSelf={'center'} justifySelf={'center'} size={'32px'} />,
   ssr: false,
 });
 
-const Layout = dynamic(() => import('@/app/sandbox/layout'), {
+const Layout = dynamic(() => import('@/app-pages/sandbox/layout'), {
   loading: () => <SkeletonSandbox />,
   ssr: false,
 });
diff --git a/src/pages/sandbox/faucet.tsx b/src/pages/sandbox/faucet.tsx
index f99fb9056..70554eed3 100644
--- a/src/pages/sandbox/faucet.tsx
+++ b/src/pages/sandbox/faucet.tsx
@@ -3,12 +3,12 @@ import { Spinner } from '@/ui/Spinner';
 import dynamic from 'next/dynamic';
 import * as React from 'react';
 
-const AppSandboxFaucetPage = dynamic(() => import('../../app/sandbox/faucet/page'), {
+const AppSandboxFaucetPage = dynamic(() => import('@/app-pages/sandbox/faucet/page'), {
   loading: () => <Spinner alignSelf={'center'} justifySelf={'center'} size={'32px'} />,
   ssr: false,
 });
 
-const Layout = dynamic(() => import('@/app/sandbox/layout'), {
+const Layout = dynamic(() => import('@/app-pages/sandbox/layout'), {
   loading: () => <SkeletonSandbox />,
   ssr: false,
 });
diff --git a/src/pages/sandbox/transfer.tsx b/src/pages/sandbox/transfer.tsx
index 2b25c1cde..9d33d268f 100644
--- a/src/pages/sandbox/transfer.tsx
+++ b/src/pages/sandbox/transfer.tsx
@@ -3,12 +3,12 @@ import { Spinner } from '@/ui/Spinner';
 import dynamic from 'next/dynamic';
 import * as React from 'react';
 
-const AppSandboxTransferPage = dynamic(() => import('../../app/sandbox/transfer/page'), {
+const AppSandboxTransferPage = dynamic(() => import('@/app-pages/sandbox/transfer/page'), {
   loading: () => <Spinner alignSelf={'center'} justifySelf={'center'} size={'32px'} />,
   ssr: false,
 });
 
-const Layout = dynamic(() => import('@/app/sandbox/layout'), {
+const Layout = dynamic(() => import('@/app-pages/sandbox/layout'), {
   loading: () => <SkeletonSandbox />,
   ssr: false,
 });
diff --git a/src/pages/token/[tokenId].tsx b/src/pages/token/[tokenId].tsx
index 6c3baa1b2..d104e1e1f 100644
--- a/src/pages/token/[tokenId].tsx
+++ b/src/pages/token/[tokenId].tsx
@@ -3,7 +3,7 @@ import { apiClients, createConfig } from '@/common/api/client';
 import { DEFAULT_MAINNET_SERVER } from '@/common/constants';
 import { Configuration as TokenMetadataApiConfiguration } from '@hirosystems/token-metadata-api-client';
 
-import { TokenPage } from '@/app/token/[tokenId]';
+import { TokenPage } from '@/app-pages/token/[tokenId]';
 import { getCacheClient } from '@/common/utils/cache-client';
 
 interface TokenLinks {
diff --git a/src/pages/tokens.tsx b/src/pages/tokens.tsx
index f0c8d03af..1a77931a1 100644
--- a/src/pages/tokens.tsx
+++ b/src/pages/tokens.tsx
@@ -1,10 +1,10 @@
 import { Meta } from '@/components/meta-head';
 
 import dynamic from 'next/dynamic';
-import { PageTitle } from '@/app/common/components/PageTitle';
-import { Loading as TokenListLoading } from '@/app/tokens/TokensList/loading';
+import { PageTitle } from '@/app-pages/common/components/PageTitle';
+import { Loading as TokenListLoading } from '@/app-pages/tokens/TokensList/loading';
 
-const AppTokensPage = dynamic(() => import('../app/tokens/page'), {
+const AppTokensPage = dynamic(() => import('@/app-pages/tokens/page'), {
   loading: () => (
     <>
       <PageTitle>Token Tracker</PageTitle>
diff --git a/src/pages/transactions.tsx b/src/pages/transactions.tsx
index bb75a0dd5..c95d0bc61 100644
--- a/src/pages/transactions.tsx
+++ b/src/pages/transactions.tsx
@@ -1,6 +1,6 @@
 import { Meta } from '@/components/meta-head';
 
-import AppTransactionsPage from '../app/transactions/page';
+import AppTransactionsPage from '@/app-pages/transactions/page';
 
 export default function TransactionsPage() {
   return (
diff --git a/src/pages/txid/[txid].tsx b/src/pages/txid/[txid].tsx
index 9ef5d1c26..44295e334 100644
--- a/src/pages/txid/[txid].tsx
+++ b/src/pages/txid/[txid].tsx
@@ -1,13 +1,13 @@
-import { claritySyntax } from '@/app/common/claritySyntax';
+import { claritySyntax } from '@/app-pages/common/claritySyntax';
 import { SkeletonPageWithTagsAndTwoColumns } from '@/components/loaders/skeleton-transaction';
 import dynamic from 'next/dynamic';
 import { useRouter } from 'next/router';
 import * as React from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 
-import AppTxidPageError from '../../app/txid/[txid]/error';
+import AppTxidPageError from '@/app-pages/txid/[txid]/error';
 
-export const AppTxidPage = dynamic(() => import('../../app/txid/[txid]/page'), {
+export const AppTxidPage = dynamic(() => import('@/app-pages/txid/[txid]/page'), {
   loading: () => <SkeletonPageWithTagsAndTwoColumns />,
   ssr: false,
 });
diff --git a/src/pages/_document.tsx b/src/pages/x_document.tsx
similarity index 100%
rename from src/pages/_document.tsx
rename to src/pages/x_document.tsx
diff --git a/src/ui/CodeEditor/index.tsx b/src/ui/CodeEditor/index.tsx
index e350231b3..2d64d34a7 100644
--- a/src/ui/CodeEditor/index.tsx
+++ b/src/ui/CodeEditor/index.tsx
@@ -4,11 +4,10 @@ import Prism from 'prismjs';
 import 'prismjs/components/prism-json';
 import { FC, memo, useState } from 'react';
 
-import { autocomplete, hover } from '../../app/sandbox/editor-config/autocomplete';
-import { defineTheme } from '../../app/sandbox/editor-config/define-theme';
-import { liftOff } from '../../app/sandbox/editor-config/init';
-import { configLanguage } from '../../app/sandbox/editor-config/language';
-import { Button } from '@/ui/Button';
+import { autocomplete, hover } from '@/app-pages/sandbox/editor-config/autocomplete';
+import { defineTheme } from '@/app-pages/sandbox/editor-config/define-theme';
+import { liftOff } from '@/app-pages/sandbox/editor-config/init';
+import { configLanguage } from '@/app-pages/sandbox/editor-config/language';
 import { Box } from '@/ui/Box';
 import { MdExpand } from 'react-icons/md';
 import { IconButton } from '@/ui/IconButton';
diff --git a/src/ui/UIProvider.tsx b/src/ui/UIProvider.tsx
index 56d483236..6ca0dd9cd 100644
--- a/src/ui/UIProvider.tsx
+++ b/src/ui/UIProvider.tsx
@@ -1,5 +1,8 @@
+'use client';
+
 import { theme } from '@/ui/theme/theme';
 import { ChakraProvider, ChakraProviderProps, cookieStorageManagerSSR } from '@chakra-ui/react';
+import { CacheProvider } from '@chakra-ui/next-js';
 import { FC } from 'react';
 
 export interface UIProviderProps extends ChakraProviderProps {
@@ -9,8 +12,10 @@ export const UIProvider: FC<UIProviderProps> = props => {
   const { cookies = '', children } = props;
   const colorModeManager = cookieStorageManagerSSR(cookies);
   return (
-    <ChakraProvider colorModeManager={colorModeManager} theme={theme}>
-      {children}
-    </ChakraProvider>
+    <CacheProvider>
+      <ChakraProvider colorModeManager={colorModeManager} theme={theme}>
+        {children}
+      </ChakraProvider>
+    </CacheProvider>
   );
 };