First commit

2026-01-02 13:33:06 +00:00 · 2024-08-22 17:41:44 +02:00 · 2024-08-22 17:41:44 +02:00 · 270bdaf83a
commit 270bdaf83a
85 changed files with 7312 additions and 0 deletions
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/README.md
+++ b/README.md
@ -0,0 +1,30 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default {
+  // other rules...
+  parserOptions: {
+    ecmaVersion: "latest",
+    sourceType: "module",
+    project: ["./tsconfig.json", "./tsconfig.node.json", "./tsconfig.app.json"],
+    tsconfigRootDir: __dirname,
+  },
+};
+```
+
+- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
+- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
--- a/index.html
+++ b/index.html
@ -0,0 +1,23 @@
+<!doctype html>
+<html lang="en" data-theme="dark">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="view-transition" content="same-origin" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;display=swap"
+      rel="stylesheet" />
+
+    <title>Vite + React + TS</title>
+  </head>
+
+  <body>
+    <div id="root" class="root"></div>
+
+    <!--   <h1>Vite is running in %MODE%</h1> -->
+
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,56 @@
+{
+  "name": "@codex/marketplace-ui",
+  "description": "Marketplace UI for Codex decentralized storage network.",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/codex-storage/codex-marketplace-ui"
+  },
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview",
+    "format": "prettier --write ./src"
+  },
+  "keywords": [
+    "Codex",
+    "Javascript",
+    "Components",
+    "UI",
+    "React"
+  ],
+  "dependencies": {
+    "@tanstack/react-query": "^5.51.15",
+    "@tanstack/react-router": "^1.45.7",
+    "classnames": "^2.5.1",
+    "idb-keyval": "^6.2.1",
+    "lucide-react": "^0.424.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "@codex/sdk-js": "@codex/marketplace-ui#master",
+    "@codex/marketplace-ui-components": "@codex/marketplace-ui-components#master"
+  },
+  "devDependencies": {
+    "@tanstack/router-devtools": "^1.45.7",
+    "@tanstack/router-plugin": "^1.45.7",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^7.15.0",
+    "@typescript-eslint/parser": "^7.15.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-refresh": "^0.4.7",
+    "prettier": "^3.3.3",
+    "typescript": "^5.2.2",
+    "vite": "^5.3.4"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "author": "Codex team",
+  "readme": "README.md",
+  "license": "MIT"
+}
--- a/prettier.config.cjs
+++ b/prettier.config.cjs
@ -0,0 +1,4 @@
+module.exports = {
+  trailingComma: 'es5',
+  bracketSameLine: true,
+};
--- a/public/button-loader.svg
+++ b/public/button-loader.svg
@ -0,0 +1,23 @@
+<svg
+  version="1.1"
+  id="loader-1"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink"
+  x="0px"
+  y="0px"
+  viewBox="0 0 50 50"
+  style="enable-background: new 0 0 50 50"
+  xml:space="preserve">
+  <path
+    fill="#FFF"
+    d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z">
+    <animateTransform
+      attributeType="xml"
+      attributeName="transform"
+      type="rotate"
+      from="0 25 25"
+      to="360 25 25"
+      dur="0.6s"
+      repeatCount="indefinite"></animateTransform>
+  </path>
+</svg>
--- a/public/vite.svg
+++ b/public/vite.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/src/App.css
+++ b/src/App.css
--- a/src/App.tsx
+++ b/src/App.tsx
@ -0,0 +1,24 @@
+import { ReactNode, useEffect } from "react";
+import "./App.css";
+import { useNetwork } from "./network/useNetwork.ts";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+const queryClient = new QueryClient();
+
+interface Props {
+  children: ReactNode;
+}
+
+function App({ children }: Props) {
+  const online = useNetwork();
+
+  useEffect(() => {
+    console.info("The network is now", online ? "online" : "offline");
+  }, [online]);
+
+  return (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+}
+
+export default App;
--- a/src/assets/css/container.css
+++ b/src/assets/css/container.css
@ -0,0 +1,8 @@
+.container {
+  padding: 1.5rem;
+  flex: 1;
+}
+
+.container-fluid {
+  padding-inline: 1.5rem;
+}
--- a/src/assets/css/indicator.css
+++ b/src/assets/css/indicator.css
@ -0,0 +1,35 @@
+.indicator {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.indicator-point {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  animation-duration: 3s;
+  animation-name: flash;
+  animation-iteration-count: infinite;
+  transition: none;
+}
+
+.indicator-point-online {
+  background-color: var(--codex-color-primary);
+}
+
+.indicator-point-offline {
+  background-color: rgb(217, 53, 38);
+}
+
+@keyframes flash {
+  0% {
+    opacity: 1;
+  }
+  40% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
--- a/src/assets/css/text.css
+++ b/src/assets/css/text.css
@ -0,0 +1,27 @@
+.text-contrast {
+  color: white;
+}
+
+.text-secondary {
+  mix-blend-mode: difference;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text--primary {
+  color: var(--codex-color-primary);
+}
+
+.text--error {
+  color: var(--codex-color-error);
+}
+
+.text--spacing {
+  margin-bottom: 0.75rem;
+}
+
+.text--warning {
+  color: var(--codex-color-warning);
+}
--- a/src/assets/error-placeholder.svg
+++ b/src/assets/error-placeholder.svg
@ -0,0 +1,16 @@
+<svg width="250" height="200" viewBox="0 0 250 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="250" height="200" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M63 134H154C154.515 134 155.017 133.944 155.5 133.839C155.983 133.944 156.485 134 157 134H209C212.866 134 216 130.866 216 127C216 123.134 212.866 120 209 120H203C199.134 120 196 116.866 196 113C196 109.134 199.134 106 203 106H222C225.866 106 229 102.866 229 99C229 95.134 225.866 92 222 92H200C203.866 92 207 88.866 207 85C207 81.134 203.866 78 200 78H136C139.866 78 143 74.866 143 71C143 67.134 139.866 64 136 64H79C75.134 64 72 67.134 72 71C72 74.866 75.134 78 79 78H39C35.134 78 32 81.134 32 85C32 88.866 35.134 92 39 92H64C67.866 92 71 95.134 71 99C71 102.866 67.866 106 64 106H24C20.134 106 17 109.134 17 113C17 116.866 20.134 120 24 120H63C59.134 120 56 123.134 56 127C56 130.866 59.134 134 63 134ZM226 134C229.866 134 233 130.866 233 127C233 123.134 229.866 120 226 120C222.134 120 219 123.134 219 127C219 130.866 222.134 134 226 134Z" fill="#C1F0A4" fill-opacity="0.5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M92 140C79.8497 140 70 130.374 70 118.5C70 106.626 79.8497 97 92 97C92.5167 97 93.0292 97.0174 93.537 97.0517C93.1842 95.0878 93 93.0654 93 91C93 72.2223 108.222 57 127 57C141.991 57 154.716 66.702 159.239 80.1695C160.31 80.0575 161.398 80 162.5 80C179.345 80 193 93.4315 193 110C193 125.741 180.675 138.727 165 139.978V140H108.508H92ZM103.996 140H97.0314Z" fill="white"/>
+<path d="M103.996 140H97.0314M92 140C79.8497 140 70 130.374 70 118.5C70 106.626 79.8497 97 92 97C92.5167 97 93.0292 97.0174 93.537 97.0517C93.1842 95.0878 93 93.0654 93 91C93 72.2223 108.222 57 127 57C141.991 57 154.716 66.702 159.239 80.1695C160.31 80.0575 161.398 80 162.5 80C179.345 80 193 93.4315 193 110C193 125.741 180.675 138.727 165 139.978V140H108.508H92Z" stroke="#56CE0C" stroke-width="2.5" stroke-linecap="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M116.612 64.3426C116.612 96.5657 145.633 123.118 183 126.703C178.317 132.461 171.086 136.367 162.847 136.981V137H95.7431C87.6013 137 74 133.57 74 118.548C74 103.527 84.5742 100.097 95.7431 100.097C96.218 100.097 96.6891 100.112 97.1559 100.141C96.8316 98.4556 96.7746 96.7184 96.6623 94.9474C95.9038 82.9842 101.123 67.907 116.63 63C116.618 63.4473 116.612 63.8944 116.612 64.3426ZM127.116 114.758C124.078 114.758 121.614 117.192 121.614 120.195C121.614 123.198 124.078 125.632 127.116 125.632C130.155 125.632 132.618 123.198 132.618 120.195C132.618 117.192 130.155 114.758 127.116 114.758Z" fill="#C1F0A4" fill-opacity="0.5"/>
+<path d="M127.5 126C130.538 126 133 123.538 133 120.5C133 117.462 130.538 115 127.5 115C124.462 115 122 117.462 122 120.5C122 123.538 124.462 126 127.5 126Z" stroke="#56CE0C" stroke-width="2.5"/>
+<path d="M112 109L119 103.507L112 98.2776" stroke="#56CE0C" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M143 109L136 103.507L143 98.2776" stroke="#56CE0C" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M137 67C143.509 68.7226 148.648 73.8129 150.44 80.2932" stroke="#56CE0C" stroke-width="2.5" stroke-linecap="round"/>
+<path d="M158 50C159.657 50 161 48.6569 161 47C161 45.3431 159.657 44 158 44C156.343 44 155 45.3431 155 47C155 48.6569 156.343 50 158 50Z" stroke="#56CE0C" stroke-width="2"/>
+<path d="M189 66C190.657 66 192 64.6569 192 63C192 61.3431 190.657 60 189 60C187.343 60 186 61.3431 186 63C186 64.6569 187.343 66 189 66Z" fill="#56CE0C"/>
+<path d="M165.757 57.7573L174.116 66.1156M174.243 57.7573L165.884 66.1156L174.243 57.7573Z" stroke="#56CE0C" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M71.4038 75.5962L77.4038 81.5962M77.4038 75.5962L71.4038 81.5962L77.4038 75.5962Z" stroke="#56CE0C" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M85 69C86.6569 69 88 67.6569 88 66C88 64.3431 86.6569 63 85 63C83.3431 63 82 64.3431 82 66C82 67.6569 83.3431 69 85 69Z" fill="#56CE0C"/>
+</svg>
--- a/src/assets/loader.svg
+++ b/src/assets/loader.svg
@ -0,0 +1,23 @@
+<svg
+  version="1.1"
+  id="loader-1"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink"
+  x="0px"
+  y="0px"
+  viewBox="0 0 50 50"
+  style="enable-background: new 0 0 50 50"
+  xml:space="preserve">
+  <path
+    fill="#FFF"
+    d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z">
+    <animateTransform
+      attributeType="xml"
+      attributeName="transform"
+      type="rotate"
+      from="0 25 25"
+      to="360 25 25"
+      dur="0.6s"
+      repeatCount="indefinite"></animateTransform>
+  </path>
+</svg>
--- a/src/assets/logo-inverse.svg
+++ b/src/assets/logo-inverse.svg
@ -0,0 +1,11 @@
+
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_274_4287)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.7001 32.7386C19.7705 32.7792 19.8502 32.8001 19.9306 32.8001C20.0111 32.8001 20.188 32.7225 20.188 32.7225L30.85 26.581C30.8555 26.5783 30.8632 26.5744 30.8706 26.5701C30.942 26.5295 31.0002 26.4707 31.0406 26.4008C31.0819 26.3302 31.1036 26.25 31.1036 26.1685C31.1036 26.1588 31.1032 26.1499 31.1028 26.1432V13.8597C31.1036 13.8486 31.1036 13.8387 31.1036 13.8337L31.1036 13.8324C31.1036 13.7507 31.0818 13.671 31.0413 13.6009C31.0008 13.5302 30.9421 13.4718 30.872 13.4313C30.8644 13.4268 30.8564 13.4225 30.8484 13.4186L20.1868 7.27756C20.179 7.27228 20.1714 7.26767 20.165 7.26389L20.1644 7.26354C20.0937 7.22255 20.0136 7.20151 19.9325 7.20151H19.9306C19.8495 7.20151 19.77 7.22295 19.701 7.26233C19.692 7.26733 19.6837 7.27257 19.6762 7.27763L9.01204 13.4202C9.00655 13.4229 8.99886 13.4269 8.99144 13.4311C8.92049 13.4717 8.86173 13.531 8.82123 13.6011C8.78067 13.6712 8.75879 13.7509 8.75879 13.8327C8.75879 13.8425 8.75919 13.8513 8.75956 13.858V26.1419C8.75876 26.153 8.75878 26.1629 8.75879 26.1679L8.75879 26.1692C8.75879 26.2508 8.78058 26.3312 8.82193 26.4018C8.86238 26.4712 8.92065 26.5296 8.98909 26.5693L8.99047 26.5701L8.99187 26.5708C9.00023 26.5754 9.00781 26.5793 9.01357 26.5822L19.6768 32.7241C19.6818 32.7275 19.6906 32.7332 19.7001 32.7386ZM30.8023 26.4503C30.7969 26.4533 30.7908 26.4564 30.7847 26.4594C30.788 26.4578 30.7915 26.4561 30.7946 26.4544C30.7973 26.4531 30.7999 26.4517 30.8023 26.4503ZM30.9649 26.1472C30.9651 26.1495 30.9652 26.152 30.9653 26.1545C30.9655 26.1589 30.9657 26.1636 30.9657 26.1685C30.9657 26.167 30.9657 26.1655 30.9656 26.164C30.9655 26.158 30.9652 26.1523 30.9649 26.1472ZM20.3983 26.9771L24.3592 29.2549L20.3951 31.538L20.3983 26.9771ZM15.5034 29.2548L19.4645 26.9769L19.4676 31.538L15.5034 29.2548ZM25.7528 23.8924L29.7137 26.1701L25.7497 28.4532L25.7528 23.8924ZM20.3984 25.3628V20.8084L24.3514 23.0856L20.3984 25.3628ZM15.0439 22.2784V17.724L18.9969 20.0012L15.0439 22.2784ZM20.3984 19.1932V14.6388L24.3514 16.916L20.3984 19.1932ZM19.4649 13.0247L15.5038 10.7468L19.468 8.4636L19.4649 13.0247ZM10.1491 26.1701L14.1131 28.4532L14.11 23.8921L10.1491 26.1701ZM24.8194 23.8927L24.8225 28.4527L20.8658 26.1705L24.8194 23.8927ZM15.0438 23.8927L15.0406 28.4527L18.9974 26.1705L15.0438 23.8927ZM26.2198 23.0856L30.178 20.8025V25.3687L26.2198 23.0856ZM9.68483 20.8025V25.3687L13.643 23.0856L9.68483 20.8025ZM15.5111 23.085L19.4644 25.3624V20.8076L15.5111 23.085ZM29.7125 20.0004L25.7529 17.7227V22.2781L29.7125 20.0004ZM10.1503 20.0008L14.1099 22.2785V17.7231L10.1503 20.0008ZM24.8189 17.7232V22.278L20.8656 20.0006L24.8189 17.7232ZM30.178 14.6329V19.1991L26.2198 16.916L30.178 14.6329ZM13.643 16.916L9.68483 19.1991V14.6329L13.643 16.916ZM19.4644 14.6384V19.1928L15.5114 16.9156L19.4644 14.6384ZM29.7141 13.8315L25.7497 11.5482L25.7528 16.1095L29.7141 13.8315ZM14.1135 11.5484L14.1104 16.1095L10.1491 13.8315L14.1135 11.5484ZM24.8225 11.5489L24.8194 16.1089L20.8658 13.8311L24.8225 11.5489ZM18.9974 13.8311L15.0438 16.1089L15.0406 11.5489L18.9974 13.8311ZM24.3596 10.7467L20.3951 8.46359L20.3983 13.0247L24.3596 10.7467Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_274_4287">
+<rect width="40" height="40" fill="black"/>
+</clipPath>
+</defs>
+</svg>
--- a/src/assets/logo.svg
+++ b/src/assets/logo.svg
@ -0,0 +1,11 @@
+
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_274_4287)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.7001 32.7386C19.7705 32.7792 19.8502 32.8001 19.9306 32.8001C20.0111 32.8001 20.188 32.7225 20.188 32.7225L30.85 26.581C30.8555 26.5783 30.8632 26.5744 30.8706 26.5701C30.942 26.5295 31.0002 26.4707 31.0406 26.4008C31.0819 26.3302 31.1036 26.25 31.1036 26.1685C31.1036 26.1588 31.1032 26.1499 31.1028 26.1432V13.8597C31.1036 13.8486 31.1036 13.8387 31.1036 13.8337L31.1036 13.8324C31.1036 13.7507 31.0818 13.671 31.0413 13.6009C31.0008 13.5302 30.9421 13.4718 30.872 13.4313C30.8644 13.4268 30.8564 13.4225 30.8484 13.4186L20.1868 7.27756C20.179 7.27228 20.1714 7.26767 20.165 7.26389L20.1644 7.26354C20.0937 7.22255 20.0136 7.20151 19.9325 7.20151H19.9306C19.8495 7.20151 19.77 7.22295 19.701 7.26233C19.692 7.26733 19.6837 7.27257 19.6762 7.27763L9.01204 13.4202C9.00655 13.4229 8.99886 13.4269 8.99144 13.4311C8.92049 13.4717 8.86173 13.531 8.82123 13.6011C8.78067 13.6712 8.75879 13.7509 8.75879 13.8327C8.75879 13.8425 8.75919 13.8513 8.75956 13.858V26.1419C8.75876 26.153 8.75878 26.1629 8.75879 26.1679L8.75879 26.1692C8.75879 26.2508 8.78058 26.3312 8.82193 26.4018C8.86238 26.4712 8.92065 26.5296 8.98909 26.5693L8.99047 26.5701L8.99187 26.5708C9.00023 26.5754 9.00781 26.5793 9.01357 26.5822L19.6768 32.7241C19.6818 32.7275 19.6906 32.7332 19.7001 32.7386ZM30.8023 26.4503C30.7969 26.4533 30.7908 26.4564 30.7847 26.4594C30.788 26.4578 30.7915 26.4561 30.7946 26.4544C30.7973 26.4531 30.7999 26.4517 30.8023 26.4503ZM30.9649 26.1472C30.9651 26.1495 30.9652 26.152 30.9653 26.1545C30.9655 26.1589 30.9657 26.1636 30.9657 26.1685C30.9657 26.167 30.9657 26.1655 30.9656 26.164C30.9655 26.158 30.9652 26.1523 30.9649 26.1472ZM20.3983 26.9771L24.3592 29.2549L20.3951 31.538L20.3983 26.9771ZM15.5034 29.2548L19.4645 26.9769L19.4676 31.538L15.5034 29.2548ZM25.7528 23.8924L29.7137 26.1701L25.7497 28.4532L25.7528 23.8924ZM20.3984 25.3628V20.8084L24.3514 23.0856L20.3984 25.3628ZM15.0439 22.2784V17.724L18.9969 20.0012L15.0439 22.2784ZM20.3984 19.1932V14.6388L24.3514 16.916L20.3984 19.1932ZM19.4649 13.0247L15.5038 10.7468L19.468 8.4636L19.4649 13.0247ZM10.1491 26.1701L14.1131 28.4532L14.11 23.8921L10.1491 26.1701ZM24.8194 23.8927L24.8225 28.4527L20.8658 26.1705L24.8194 23.8927ZM15.0438 23.8927L15.0406 28.4527L18.9974 26.1705L15.0438 23.8927ZM26.2198 23.0856L30.178 20.8025V25.3687L26.2198 23.0856ZM9.68483 20.8025V25.3687L13.643 23.0856L9.68483 20.8025ZM15.5111 23.085L19.4644 25.3624V20.8076L15.5111 23.085ZM29.7125 20.0004L25.7529 17.7227V22.2781L29.7125 20.0004ZM10.1503 20.0008L14.1099 22.2785V17.7231L10.1503 20.0008ZM24.8189 17.7232V22.278L20.8656 20.0006L24.8189 17.7232ZM30.178 14.6329V19.1991L26.2198 16.916L30.178 14.6329ZM13.643 16.916L9.68483 19.1991V14.6329L13.643 16.916ZM19.4644 14.6384V19.1928L15.5114 16.9156L19.4644 14.6384ZM29.7141 13.8315L25.7497 11.5482L25.7528 16.1095L29.7141 13.8315ZM14.1135 11.5484L14.1104 16.1095L10.1491 13.8315L14.1135 11.5484ZM24.8225 11.5489L24.8194 16.1089L20.8658 13.8311L24.8225 11.5489ZM18.9974 13.8311L15.0438 16.1089L15.0406 11.5489L18.9974 13.8311ZM24.3596 10.7467L20.3951 8.46359L20.3983 13.0247L24.3596 10.7467Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_274_4287">
+<rect width="40" height="40" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/src/assets/network-error.svg
+++ b/src/assets/network-error.svg
@ -0,0 +1,89 @@
+<svg
+  width="119"
+  height="110"
+  viewBox="0 0 119 110"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M103.25 26.99V31.3"
+    stroke="#4A5059"
+    stroke-linecap="round"
+    stroke-linejoin="round" />
+  <path
+    d="M101.1 29.15H105.4"
+    stroke="#4A5059"
+    stroke-linecap="round"
+    stroke-linejoin="round" />
+  <path
+    d="M15.09 10.36V14.67"
+    stroke="#4A5059"
+    stroke-linecap="round"
+    stroke-linejoin="round" />
+  <path
+    d="M12.9301 12.51H17.2401"
+    stroke="#4A5059"
+    stroke-linecap="round"
+    stroke-linejoin="round" />
+  <path
+    d="M48.5499 2.28996C49.0912 2.28996 49.5299 1.85119 49.5299 1.30996C49.5299 0.768717 49.0912 0.329956 48.5499 0.329956C48.0087 0.329956 47.5699 0.768717 47.5699 1.30996C47.5699 1.85119 48.0087 2.28996 48.5499 2.28996Z"
+    fill="#4A5059" />
+  <path
+    d="M79.97 41.25C71.59 41.25 63.08 40.92 55.11 38.7C47.29 36.5 40.15 32.32 33.71 27.5C29.51 24.32 25.71 21.8 20.26 22.18C14.9469 22.4538 9.8614 24.4235 5.75001 27.8C-1.17999 33.86 -0.129995 45.07 2.64001 52.95C6.8 64.82 19.5 73.07 30.22 78.44C42.65 84.65 56.3 88.26 70 90.33C82 92.16 97.41 93.48 107.81 85.64C117.37 78.44 119.99 62 117.65 50.9C117.081 47.6187 115.331 44.6591 112.73 42.58C106.02 37.67 96.02 40.95 88.48 41.11C85.68 41.17 82.83 41.24 79.97 41.25Z"
+    fill="#272933" />
+  <path
+    d="M59.48 109.79C79.7544 109.79 96.19 108.765 96.19 107.5C96.19 106.235 79.7544 105.21 59.48 105.21C39.2056 105.21 22.77 106.235 22.77 107.5C22.77 108.765 39.2056 109.79 59.48 109.79Z"
+    fill="#272933" />
+  <path
+    d="M75.0746 3.65264L26.1993 10.2608C24.634 10.4725 23.5367 11.913 23.7483 13.4783L33.2265 83.5804C33.4381 85.1457 34.8786 86.2431 36.4439 86.0314L85.3192 79.4232C86.8845 79.2116 87.9818 77.7711 87.7702 76.2058L78.292 6.10365C78.0804 4.53836 76.6399 3.44101 75.0746 3.65264Z"
+    fill="#4A5059" />
+  <path
+    d="M91.32 13.95H42C40.4205 13.95 39.14 15.2304 39.14 16.81V87.55C39.14 89.1295 40.4205 90.41 42 90.41H91.32C92.8995 90.41 94.18 89.1295 94.18 87.55V16.81C94.18 15.2304 92.8995 13.95 91.32 13.95Z"
+    fill="#2D333E"
+    stroke="#4A5059"
+    stroke-miterlimit="10" />
+  <path
+    d="M78.5099 68.86H54.7999C53.9108 68.86 53.1899 69.5808 53.1899 70.47V70.48C53.1899 71.3692 53.9108 72.09 54.7999 72.09H78.5099C79.3991 72.09 80.1199 71.3692 80.1199 70.48V70.47C80.1199 69.5808 79.3991 68.86 78.5099 68.86Z"
+    fill="#4A5059" />
+  <path
+    d="M77.66 82.0601H54.91C54.6394 82.0601 54.42 82.2794 54.42 82.5501V82.7001C54.42 82.9707 54.6394 83.1901 54.91 83.1901H77.66C77.9307 83.1901 78.15 82.9707 78.15 82.7001V82.5501C78.15 82.2794 77.9307 82.0601 77.66 82.0601Z"
+    fill="#4A5059" />
+  <path
+    d="M83.46 76.77H49.95C49.5911 76.77 49.3 77.061 49.3 77.42C49.3 77.779 49.5911 78.07 49.95 78.07H83.46C83.819 78.07 84.11 77.779 84.11 77.42C84.11 77.061 83.819 76.77 83.46 76.77Z"
+    fill="#4A5059" />
+  <path
+    d="M89.59 16.27H43.73C42.5923 16.27 41.67 17.1923 41.67 18.33V58.1C41.67 59.2377 42.5923 60.16 43.73 60.16H89.59C90.7277 60.16 91.65 59.2377 91.65 58.1V18.33C91.65 17.1923 90.7277 16.27 89.59 16.27Z"
+    fill="#2D333E"
+    stroke="#4A5059"
+    stroke-miterlimit="10" />
+  <path
+    d="M72.78 47.84C73.1093 47.8378 73.4299 47.7339 73.698 47.5427C73.9661 47.3514 74.1687 47.0821 74.2781 46.7715C74.3875 46.4608 74.3983 46.124 74.3092 45.807C74.22 45.49 74.0352 45.2082 73.78 45C71.6916 43.278 69.0631 42.347 66.3563 42.3708C63.6496 42.3946 61.0378 43.3715 58.98 45.13C58.7303 45.345 58.5526 45.6314 58.4709 45.9506C58.3891 46.2697 58.4073 46.6063 58.5228 46.9148C58.6384 47.2233 58.8458 47.489 59.1171 47.6759C59.3884 47.8628 59.7105 47.962 60.04 47.96L72.78 47.84Z"
+    stroke="#4A5059"
+    stroke-width="0.71"
+    stroke-linecap="round"
+    stroke-linejoin="round" />
+  <path
+    d="M80.95 37.82L75.12 34.46L80.95 31.1"
+    stroke="#4A5059"
+    stroke-width="0.71"
+    stroke-linecap="round"
+    stroke-linejoin="round" />
+  <path
+    d="M51.89 37.82L57.71 34.46L51.89 31.1"
+    stroke="#4A5059"
+    stroke-width="0.71"
+    stroke-linecap="round"
+    stroke-linejoin="round" />
+  <path
+    d="M19.92 59.16V63.46"
+    stroke="#4A5059"
+    stroke-linecap="round"
+    stroke-linejoin="round" />
+  <path
+    d="M17.77 61.3101H22.07"
+    stroke="#4A5059"
+    stroke-linecap="round"
+    stroke-linejoin="round" />
+  <path
+    d="M101.42 62.2C101.961 62.2 102.4 61.7612 102.4 61.22C102.4 60.6788 101.961 60.24 101.42 60.24C100.879 60.24 100.44 60.6788 100.44 61.22C100.44 61.7612 100.879 62.2 101.42 62.2Z"
+    fill="#4A5059" />
+</svg>
--- a/src/assets/react.svg
+++ b/src/assets/react.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
--- a/src/components/AppBar/AppBar.css
+++ b/src/components/AppBar/AppBar.css
@ -0,0 +1,32 @@
+.appBar {
+  height: 40px;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--codex-border-color);
+  view-transition-name: main-header;
+  display: flex;
+  padding: 0.75rem 1.5rem;
+}
+
+.appBar-burger {
+  cursor: pointer;
+  color: var(--codex-color);
+  display: flex;
+}
+
+.appBar,
+.appBar-left,
+.appBar-right {
+  display: flex;
+  align-items: center;
+}
+
+.appBar-left,
+.appBar-right {
+  gap: 0.75rem;
+}
+
+@media (min-width: 1000px) {
+  .appBar-burger {
+    display: none;
+  }
+}
--- a/src/components/AppBar/AppBar.tsx
+++ b/src/components/AppBar/AppBar.tsx
@ -0,0 +1,26 @@
+import { Menu } from "lucide-react";
+import { NetworkIndicator } from "../NetworkIndicator/NetworkIndicator";
+import { NodeIndicator } from "../NodeIndicator/NodeIndicator";
+import "./AppBar.css";
+import { ICON_SIZE } from "../../utils/constants";
+
+type Props = {
+  onExpand: () => void;
+};
+
+export function AppBar({ onExpand }: Props) {
+  return (
+    <div className="appBar">
+      <div className="appBar-left">
+        <a className="appBar-burger" href="#">
+          <Menu onClick={onExpand} size={ICON_SIZE} />
+        </a>
+        <span>Home</span>
+      </div>
+      <div className="appBar-right">
+        <NodeIndicator />
+        <NetworkIndicator />
+      </div>
+    </div>
+  );
+}
--- a/src/components/CardNumbers/CardNumbers.css
+++ b/src/components/CardNumbers/CardNumbers.css
@ -0,0 +1,31 @@
+.cardNumber {
+  border-radius: var(--codex-border-radius);
+  border: 1px solid var(--codex-border-color);
+  font-family: var(--codex-font-family);
+  padding: 1.5rem;
+  background-color: rgb(56 56 56);
+}
+
+.cardNumber-title {
+  display: inline-block;
+}
+
+.cardNumber-data {
+  font-size: 3rem;
+  color: var(--codex-color-primary);
+}
+
+.cardNumber-data:focus-visible {
+  outline: 1px solid var(--codex-border-color);
+  outline-offset: 0.25rem;
+}
+
+.cardNumber-dataContainer {
+  position: relative;
+}
+
+.cardNumber-dataIcon {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+}
--- a/src/components/CardNumbers/CardNumbers.tsx
+++ b/src/components/CardNumbers/CardNumbers.tsx
@ -0,0 +1,33 @@
+import { SimpleText } from "@codex/marketplace-ui-components";
+import "./CardNumbers.css";
+import { Pencil } from "lucide-react";
+
+type Props = {
+  title: string;
+  data: string;
+  comment?: string;
+  editable?: boolean;
+};
+
+export function CardNumbers({ title, data, comment, editable }: Props) {
+  return (
+    <div className="cardNumber">
+      <b className="cardNumber-title">{title}</b>
+      <div className="cardNumber-dataContainer">
+        <p className="cardNumber-data" contentEditable={editable}>
+          {data}
+        </p>
+        {editable && (
+          <div className="cardNumber-dataIcon">
+            <Pencil size={"0.85rem"} />
+          </div>
+        )}
+      </div>
+      {comment && (
+        <SimpleText variant="light" size="small">
+          {comment}
+        </SimpleText>
+      )}
+    </div>
+  );
+}
--- a/src/components/Debug/Debug.tsx
+++ b/src/components/Debug/Debug.tsx
@ -0,0 +1,34 @@
+import { useQuery } from "@tanstack/react-query";
+import Loader from "../../assets/loader.svg";
+import { CodexSdk } from "../../sdk/codex";
+import { Card } from "@codex/marketplace-ui-components";
+
+export function Debug() {
+  const { data, isPending } = useQuery({
+    queryFn: () => CodexSdk.debug().then((debug) => debug.info()),
+    queryKey: ["debug"],
+  });
+
+  if (isPending) {
+    return (
+      <Card title="Debug">
+        <img src={Loader} width={24} height={24} alt="Loader" />
+      </Card>
+    );
+  }
+
+  if (data?.error) {
+    // TODO display error
+    return (
+      <Card title="Debug">
+        <p>{data?.data.message || ""}</p>
+      </Card>
+    );
+  }
+
+  return (
+    <Card title="Debug">
+      <pre>{JSON.stringify(data, null, 2)}</pre>
+    </Card>
+  );
+}
--- a/src/components/Dialog/Dialog.css
+++ b/src/components/Dialog/Dialog.css
@ -0,0 +1,11 @@
+.dialog::backdrop {
+  background: rgba(70, 70, 70, 0.75);
+  backdrop-filter: blur(2px);
+}
+
+.dialog {
+  background-color: var(--codex-background-secondary);
+  border: none;
+  color: var(--codex-color);
+  min-width: 200px;
+}
--- a/src/components/Dialog/Dialog.tsx
+++ b/src/components/Dialog/Dialog.tsx
@ -0,0 +1,28 @@
+import { ReactNode, useEffect, useRef } from "react";
+import "./Dialog.css";
+import { Button } from "@codex/marketplace-ui-components";
+
+type Props = {
+  open: boolean;
+  children: ReactNode;
+  onClose: () => void;
+};
+
+export function Dialog({ open, children, onClose }: Props) {
+  const ref = useRef<HTMLDialogElement | null>(null);
+
+  useEffect(() => {
+    if (open) {
+      ref.current?.showModal();
+    } else {
+      ref.current?.close();
+    }
+  }, [open]);
+
+  return (
+    <dialog ref={ref} onCancel={onClose} className="dialog">
+      <div>{children}</div>
+      <Button onClick={onClose} label="Close"></Button>
+    </dialog>
+  );
+}
--- a/src/components/ErrorBoundary/ErrorBoundary.tsx
+++ b/src/components/ErrorBoundary/ErrorBoundary.tsx
@ -0,0 +1,70 @@
+import React, { ErrorInfo, ReactNode } from "react";
+import { ErrorBoundaryContext } from "../../contexts/ErrorBoundaryContext";
+
+type State = {
+  hasError: boolean;
+};
+
+type Props = {
+  fallback: ({
+    children,
+    error,
+  }: {
+    children: ReactNode;
+    error: string;
+  }) => ReactNode;
+  children: ReactNode;
+};
+
+export class ErrorBoundary extends React.Component<Props, State> {
+  state = {
+    hasError: false,
+  };
+
+  static getDerivedStateFromError() {
+    // Update state so the next render will show the fallback UI.
+    return { hasError: true };
+  }
+
+  componentDidCatch(error: Error, info: ErrorInfo) {
+    // Example 'componentStack':
+    //   in ComponentThatThrows (created by App)
+    //   in ErrorBoundary (created by App)
+    //   in div (created by App)
+    //   in App
+    //logErrorToMyService(error, info.componentStack);
+    // TODO set Sentry here
+    console.error("Got error", error, info);
+  }
+
+  private catch(error: Error) {
+    //logErrorToMyService(error);
+    console.error(error);
+    this.setState({ hasError: true });
+  }
+
+  render() {
+    if (this.state.hasError) {
+      const Fallback = this.props.fallback;
+
+      return (
+        <Fallback
+          error={
+            "Something went wrong, please try to load the component again."
+          }>
+          <button
+            onClick={() => this.setState({ hasError: false })}
+            className="button">
+            Retry
+          </button>
+        </Fallback>
+      );
+    }
+
+    return (
+      <ErrorBoundaryContext.Provider value={(error) => this.catch(error)}>
+        {this.props.children}
+      </ErrorBoundaryContext.Provider>
+    );
+  }
+}
--- a/src/components/LogLevel/LogLevel.css
+++ b/src/components/LogLevel/LogLevel.css
@ -0,0 +1,7 @@
+.logLevel {
+  flex-grow: 1;
+}
+
+.logLevel-select {
+  margin-bottom: 0.75rem;
+}
--- a/src/components/LogLevel/LogLevel.tsx
+++ b/src/components/LogLevel/LogLevel.tsx
@ -0,0 +1,78 @@
+import { CodexLogLevel } from "@codex/sdk-js";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useContext, useState } from "react";
+import { ErrorBoundaryContext } from "../../contexts/ErrorBoundaryContext";
+import { CodexSdk } from "../../sdk/codex";
+import "./LogLevel.css";
+import { Button, Card, Select, Toast } from "@codex/marketplace-ui-components";
+import { CircleCheck } from "lucide-react";
+
+export function LogLevel() {
+  const queryClient = useQueryClient();
+  const [level, setLevel] = useState<CodexLogLevel>("DEBUG");
+  const report = useContext(ErrorBoundaryContext);
+  const { mutateAsync, isPending, isError, error } = useMutation({
+    mutationKey: ["debug"],
+    mutationFn: (level: CodexLogLevel) =>
+      CodexSdk.debug().then((debug) => debug.setLogLevel(level)),
+    onSuccess: () => {
+      setToast({
+        message: "The log level has been updated successfully.",
+        time: Date.now(),
+      });
+      queryClient.invalidateQueries({ queryKey: ["debug"] });
+    },
+  });
+  const [toast, setToast] = useState({ time: 0, message: "" });
+
+  if (isError) {
+    // TODO remove this
+    report(new Error(error.message));
+    return "";
+  }
+
+  function onChange(e: React.FormEvent<HTMLSelectElement>) {
+    const value = e.currentTarget.value;
+    if (value) {
+      setLevel(value as CodexLogLevel);
+    }
+  }
+
+  const onClick = () => {
+    mutateAsync(level);
+  };
+
+  const levels = [
+    ["DEBUG", "DEBUG"],
+    ["TRACE", "TRACE"],
+    ["INFO", "INFO"],
+    ["NOTICE", "NOTICE"],
+    ["WARN", "WARN"],
+    ["ERROR", "ERROR"],
+    ["FATAL", "FATAL"],
+  ] satisfies [string, string][];
+
+  const Check = () => (
+    <CircleCheck
+      size="1.25rem"
+      fill="var(--codex-color-primary)"
+      stroke="var(--codex-background-light)"></CircleCheck>
+  );
+
+  return (
+    <Card className="logLevel" title="Debug">
+      <Select
+        className="logLevel-select"
+        id="level"
+        label="Log level"
+        options={levels}
+        onChange={onChange}></Select>
+      <Button
+        variant="primary"
+        label="Save changes"
+        fetching={isPending}
+        onClick={onClick}></Button>
+      <Toast message={toast.message} time={toast.time} Icon={Check} />
+    </Card>
+  );
+}
--- a/src/components/Manifests/Manitests.css
+++ b/src/components/Manifests/Manitests.css
@ -0,0 +1,129 @@
+.manifest {
+  padding: 0.75rem;
+  border-radius: var(--codex-border-radius);
+  background-color: var(--codex-background-secondary);
+  margin-bottom: 1.5rem;
+}
+
+.manifest-content {
+  display: flex;
+  gap: 0.75rem;
+}
+
+.manifest-icon {
+  padding: 0.5rem;
+  border: 1px solid var(--codex-border-color);
+  border-radius: var(--codex-border-radius);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+}
+
+.manifest-data {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-grow: 1;
+}
+
+.manifest-actions {
+  display: flex;
+  align-items: center;
+  border: 1px solid var(--codex-border-color);
+  border-radius: var(--codex-border-radius);
+  padding: 0.5rem;
+  gap: 0.75rem;
+}
+
+.manifest-details {
+  position: fixed;
+  transition: transform 0.25s;
+  background-color: var(--codex-background-secondary);
+  z-index: 2;
+}
+
+.manifest-detailsHeaderTitle {
+  flex-grow: 1;
+}
+
+.manifest-backdrop {
+  z-index: 2;
+}
+
+.manifest-details {
+  justify-content: space-between;
+}
+
+.manifest-detailsHeader {
+  padding: 0.75rem 1.5rem;
+  border-bottom: 1px solid var(--codex-border-color);
+  display: flex;
+  align-items: center;
+}
+
+.manifest-detailsBody {
+  padding: 0;
+}
+
+.manifest-detailsGrid {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  display: grid;
+  padding: 0.75rem 1.5rem;
+  border-bottom: 1px solid var(--codex-border-color);
+}
+
+.manifest-detailsGridColumn {
+  grid-column: span 2 / span 2;
+  color: var(--codex-text-contrast);
+}
+
+.manifest-detailsActions {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding: 0.75rem 1.5rem;
+}
+
+.manifest-star {
+  transition:
+    fill 0.35s,
+    stroke 0.35s;
+}
+
+.manifest-favorite {
+  fill: yellow;
+  stroke: yellow;
+}
+
+@media (min-width: 1000px) {
+  .manifest-details {
+    width: 300px;
+    height: 100%;
+    bottom: 0;
+    top: 0;
+    transform: translatex(300px);
+    right: 0;
+  }
+
+  .manifest-details[aria-expanded] {
+    transform: translatex(0);
+  }
+}
+
+@media (max-width: 999px) {
+  .manifest-details {
+    width: 100%;
+    height: auto;
+    bottom: 0;
+    top: auto;
+    transform: translatey(1000px);
+    left: 0;
+    padding-bottom: 1.5rem;
+  }
+
+  .manifest-details[aria-expanded] {
+    transform: translatey(0);
+  }
+}
--- a/src/components/Manifests/Manitests.tsx
+++ b/src/components/Manifests/Manitests.tsx
@ -0,0 +1,256 @@
+import { CodexDataContent } from "@codex/sdk-js";
+import { useQuery } from "@tanstack/react-query";
+import {
+  Copy,
+  Download,
+  DownloadIcon,
+  ReceiptText,
+  Star,
+  X,
+} from "lucide-react";
+import { useRef, useState } from "react";
+import { CodexSdk } from "../../sdk/codex";
+import { attributes } from "../../utils/attributes.ts";
+import { BrowserStorage } from "../../utils/browser-storage.ts";
+import { PrettyBytes } from "../../utils/bytes";
+import { Dates } from "../../utils/dates.ts";
+import "./Manitests.css";
+import {
+  COPY_DURATION,
+  ICON_SIZE,
+  SIDE_DURATION,
+} from "../../utils/constants.ts";
+import {
+  Button,
+  ButtonIcon,
+  WebFileIcon,
+} from "@codex/marketplace-ui-components";
+
+type StarIconProps = {
+  favorites: string;
+  cid: string;
+};
+
+function StarIcon({ favorites, cid }: StarIconProps) {
+  if (favorites.includes(cid)) {
+    return (
+      <Star size={ICON_SIZE} className="manifest-favorite manifest-star" />
+    );
+  }
+
+  return <Star size={ICON_SIZE} className="manifest-star" />;
+}
+
+export function Manifests() {
+  const { data } = useQuery({
+    queryFn: () => CodexSdk.data().then((data) => data.cids()),
+    queryKey: ["cids"],
+    // refetchOnWindowFocus: false,
+    // refetchOnMount: false,
+  });
+  const cid = useRef<string | null>("");
+  const [expanded, setExpanded] = useState(false);
+
+  const onClose = () => {
+    setExpanded(false);
+
+    setTimeout(() => {
+      cid.current = "";
+    }, SIDE_DURATION);
+  };
+
+  const onDetails = (id: string) => {
+    // router.navigate({
+    //   to: "/dashboard/about",
+    //   params: data?.data.content.find((c) => c.cid === cid) || {},
+    //   state: data?.data.content.find((c) => c.cid === cid) || true,
+    // });
+
+    cid.current = id;
+    setExpanded(true);
+  };
+
+  const onToggleFavorite = (cid: string) =>
+    BrowserStorage.toggle("favorites", cid);
+
+  if (data?.error) {
+    // TODO error
+    return "";
+  }
+
+  const details = data?.data.content.find((c) => c.cid === cid.current);
+
+  const url = import.meta.env.VITE_CODEX_API_URL + "/api/codex/v1/data/";
+  const favorites = BrowserStorage.values("favorites");
+
+  return (
+    <>
+      {data?.data.content.map((c) => (
+        <div className="manifest" key={c.cid}>
+          <div className="manifest-content">
+            <div className="manifest-icon">
+              <WebFileIcon type={c.manifest.mimetype} />
+            </div>
+            <div className="manifest-data">
+              <div>
+                <b>{c.manifest.filename}</b>
+                <div>
+                  <small className="manifest-meta">
+                    {PrettyBytes(c.manifest.datasetSize)} -{" "}
+                    {Dates.format(c.manifest.uploadedAt).toString()} - ...
+                    {c.cid.slice(-5)}
+                  </small>
+                </div>
+              </div>
+              <div className="manifest-actions">
+                <ButtonIcon
+                  variant="small"
+                  onClick={() => window.open(url + c.cid, "_blank")}
+                  Icon={() => <Download size={ICON_SIZE} />}></ButtonIcon>
+
+                <ButtonIcon
+                  variant="small"
+                  onClick={() => onToggleFavorite(c.cid)}
+                  Icon={() => (
+                    <StarIcon favorites={favorites} cid={c.cid} />
+                  )}></ButtonIcon>
+
+                <ButtonIcon
+                  variant="small"
+                  onClick={() => onDetails(c.cid)}
+                  Icon={() => <ReceiptText size={ICON_SIZE} />}></ButtonIcon>
+              </div>
+            </div>
+          </div>
+        </div>
+      ))}
+
+      <ManifestDetails
+        onClose={onClose}
+        details={details}
+        expanded={expanded}
+      />
+    </>
+  );
+}
+
+type ManifestDetailsProps = {
+  details: CodexDataContent | undefined;
+  onClose: () => void;
+  expanded: boolean;
+};
+
+function ManifestDetails({ onClose, details, expanded }: ManifestDetailsProps) {
+  const attr = attributes({ "aria-expanded": expanded });
+  const url = import.meta.env.VITE_CODEX_API_URL + "/api/codex/v1/data/";
+
+  const Icon = () => <X size={ICON_SIZE} onClick={onClose} />;
+
+  const onDownload = () => window.open(url + details?.cid, "_target");
+
+  return (
+    <>
+      <div
+        className="manifest-backdrop backdrop"
+        onClick={onClose}
+        {...attr}></div>
+
+      <div className="manifest-details" {...attr}>
+        {details && (
+          <>
+            <div className="manifest-detailsHeader">
+              <b className="manifest-detailsHeaderTitle">File details</b>
+              <ButtonIcon variant="small" Icon={Icon}></ButtonIcon>
+            </div>
+
+            <div className="manifest-detailsBody">
+              <div className="manifest-detailsGrid">
+                <p className="text-secondary">CID:</p>
+                <p className="manifest-detailsGridColumn">{details.cid}</p>
+              </div>
+
+              <div className="manifest-detailsGrid">
+                <p className="text-secondary">File name:</p>
+                <p className="manifest-detailsGridColumn">
+                  {details.manifest.filename}
+                </p>
+              </div>
+
+              <div className="manifest-detailsGrid">
+                <p className="text-secondary">Date:</p>
+                <p className="manifest-detailsGridColumn">
+                  {Dates.format(details.manifest.uploadedAt).toString()}
+                </p>
+              </div>
+
+              <div className="manifest-detailsGrid">
+                <p className="text-secondary">Mimetype:</p>
+                <p className="manifest-detailsGridColumn">
+                  {details.manifest.mimetype}
+                </p>
+              </div>
+
+              <div className="manifest-detailsGrid">
+                <p className="text-secondary">Size:</p>
+                <p className="manifest-detailsGridColumn">
+                  {PrettyBytes(details.manifest.datasetSize)}
+                </p>
+              </div>
+
+              <div className="manifest-detailsGrid">
+                <p className="text-secondary">Protected:</p>
+                <p className="manifest-detailsGridColumn">
+                  {details.manifest.protected ? "Yes" : "No"}
+                </p>
+              </div>
+
+              <div className="manifest-detailsActions">
+                <CopyButton cid={details.cid} />
+
+                <Button
+                  Icon={() => <DownloadIcon size={ICON_SIZE} />}
+                  label="Download"
+                  onClick={onDownload}></Button>
+              </div>
+            </div>
+          </>
+        )}
+      </div>
+    </>
+  );
+}
+
+type CopyButtonProps = {
+  cid: string;
+};
+
+function CopyButton({ cid }: CopyButtonProps) {
+  const [copied, setCopied] = useState(false);
+  const timeout = useRef<number | null>(null);
+
+  const onCopy = () => {
+    if (timeout.current) {
+      clearTimeout(timeout.current);
+    }
+
+    navigator.clipboard.writeText(cid);
+
+    setCopied(true);
+
+    timeout.current = setTimeout(() => {
+      setCopied(false);
+    }, COPY_DURATION);
+  };
+
+  const label = copied ? "Copied !" : "Copy CID";
+
+  const Icon = () => <Copy size={ICON_SIZE} />;
+
+  return (
+    <Button
+      label={label}
+      variant="outline"
+      onClick={onCopy}
+      Icon={Icon}></Button>
+  );
+}
--- a/src/components/Menu/Menu.css
+++ b/src/components/Menu/Menu.css
@ -0,0 +1,64 @@
+.menu {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--codex-background-secondary);
+  border-radius: var(--codex-border-radius);
+  transform: translatex(-224px);
+  transition: transform 0.25s;
+  position: fixed;
+  min-width: 200px;
+  z-index: 1;
+  view-transition-name: main-menu;
+  height: 100%;
+}
+
+.menu-container {
+  padding: 0.75rem;
+}
+
+.menu-backdrop {
+  display: none;
+}
+
+.menu[aria-expanded] {
+  transform: translatex(0);
+  min-width: 200px;
+}
+
+.menu-header {
+  margin-bottom: 0.75rem;
+}
+
+.menu-item,
+.menu-header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.menu-item {
+  padding: 0.75rem;
+  color: var(--codex-color);
+  margin-bottom: 0.75rem;
+}
+
+.menu-item:hover,
+.menu-item.active {
+  background-color: var(--codex-background-light);
+}
+
+.menu-title {
+  text-transform: uppercase;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  padding-left: 0.75rem;
+  display: inline-block;
+  font-weight: 500;
+}
+
+@media (min-width: 1000px) {
+  .menu {
+    transform: translatex(0px);
+    position: inherit;
+  }
+}
--- a/src/components/Menu/Menu.tsx
+++ b/src/components/Menu/Menu.tsx
@ -0,0 +1,83 @@
+import {
+  Home,
+  Star,
+  Server,
+  Settings,
+  HelpCircle,
+  ShoppingBag,
+} from "lucide-react";
+import { attributes } from "../../utils/attributes";
+import { Link } from "@tanstack/react-router";
+import "./Menu.css";
+import logo from "../../assets/logo-inverse.svg";
+import { ICON_SIZE } from "../../utils/constants";
+
+type Props = {
+  expanded: boolean;
+  onClose: () => void;
+};
+
+export function Menu({ expanded, onClose }: Props) {
+  const attr = attributes({ "aria-expanded": expanded });
+
+  return (
+    <>
+      <div className="backdrop" onClick={onClose} {...attr}></div>
+
+      <aside className="menu" {...attr}>
+        <div className="menu-container">
+          <div className="menu-header">
+            <img width="50" height="50" src={logo} alt="Logo" />
+            <span className="menu-separator">|</span>
+            <span className="menu-name">Codex</span>
+          </div>
+          <Link
+            onClick={onClose}
+            to="/dashboard"
+            activeOptions={{ exact: true }}
+            className="menu-item">
+            <Home size={ICON_SIZE} />
+            Dashboard
+          </Link>
+          <Link
+            onClick={onClose}
+            to="/dashboard/favorites"
+            className="menu-item">
+            <Star size={ICON_SIZE} />
+            Favorites
+          </Link>
+          <hr />
+          <small className="menu-title">Rent</small>
+          <Link
+            onClick={onClose}
+            to="/dashboard/purchases"
+            className="menu-item">
+            <ShoppingBag size={ICON_SIZE} />
+            Purchases
+          </Link>
+          <hr />
+          <small className="menu-title">Hosts</small>
+          <Link
+            onClick={onClose}
+            to="/dashboard/availabilities"
+            className="menu-item">
+            <Server size={ICON_SIZE} />
+            Availabilities
+          </Link>
+          <Link
+            onClick={onClose}
+            to="/dashboard/settings"
+            className="menu-item">
+            <Settings size={ICON_SIZE} />
+            Settings
+          </Link>
+          <hr />
+          <Link onClick={onClose} to="/dashboard/help" className="menu-item">
+            <HelpCircle size={ICON_SIZE} />
+            Help
+          </Link>
+        </div>
+      </aside>
+    </>
+  );
+}
--- a/src/components/NetworkIndicator/NetworkIndicator.tsx
+++ b/src/components/NetworkIndicator/NetworkIndicator.tsx
@ -0,0 +1,21 @@
+import { useNetwork } from "../../network/useNetwork";
+
+export function NetworkIndicator() {
+  const online = useNetwork();
+
+  if (online) {
+    return (
+      <div className="indicator">
+        <div className="indicator-point indicator-point-online"></div>
+        <span>Online</span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="indicator">
+      <div className="indicator-point indicator-point-offline"></div>
+      <span>Offline</span>
+    </div>
+  );
+}
--- a/src/components/NodeIndicator/NodeIndicator.tsx
+++ b/src/components/NodeIndicator/NodeIndicator.tsx
@ -0,0 +1,46 @@
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useEffect } from "react";
+import { CodexSdk } from "../../sdk/codex";
+import { Promises } from "../../utils/promises";
+
+function useNodeNetwork() {
+  const { data, isError } = useQuery({
+    queryKey: ["spr"],
+    queryFn: async () =>
+      CodexSdk.node()
+        .then((node) => node.spr())
+        .then(Promises.rejectOnError),
+    retry: false,
+    refetchInterval: 5000,
+  });
+
+  return !isError && !!data;
+}
+
+export function NodeIndicator() {
+  const queryClient = useQueryClient();
+  const isCodexOnline = useNodeNetwork();
+
+  useEffect(() => {
+    queryClient.invalidateQueries({
+      type: "active",
+      refetchType: "all",
+    });
+  }, [queryClient, isCodexOnline]);
+
+  if (!isCodexOnline) {
+    return (
+      <div className="indicator">
+        <div className="indicator-point indicator-point-offline"></div>
+        <span>Codex node</span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="indicator">
+      <div className="indicator-point indicator-point-online"></div>
+      <span>Codex node</span>
+    </div>
+  );
+}
--- a/src/components/NodeSpaceAllocation/NodeSpaceAllocation.tsx
+++ b/src/components/NodeSpaceAllocation/NodeSpaceAllocation.tsx
@ -0,0 +1,48 @@
+import { useQuery } from "@tanstack/react-query";
+import Loader from "../../assets/loader.svg";
+import { CodexSdk } from "../../sdk/codex";
+import { SpaceAllocation } from "@codex/marketplace-ui-components";
+
+export function NodeSpaceAllocation() {
+  const { data: space, isPending } = useQuery({
+    queryFn: () => CodexSdk.data().then((data) => data.space()),
+    queryKey: ["space"],
+    refetchOnMount: true,
+  });
+
+  if (isPending || !space) {
+    return <img src={Loader} width={24} height={24} alt="Loader" />;
+  }
+
+  if (space.error) {
+    // TODO error
+    return "";
+  }
+
+  const {
+    quotaMaxBytes = 0,
+    quotaReservedBytes = 0,
+    quotaUsedBytes = 0,
+  } = space.data;
+
+  return (
+    <SpaceAllocation
+      data={[
+        {
+          title: "Maximum storage space used by the node",
+          percent: 60,
+          size: quotaMaxBytes,
+        },
+        {
+          title: "Amount of storage space currently in use",
+          percent: (quotaUsedBytes / quotaMaxBytes) * 100,
+          size: quotaUsedBytes,
+        },
+        {
+          title: "Amount of storage space reserved",
+          percent: (quotaReservedBytes / quotaMaxBytes) * 100,
+          size: quotaReservedBytes,
+        },
+      ]}></SpaceAllocation>
+  );
+}
--- a/src/components/StorageRequestSetup/StorageRequestAvailability.css
+++ b/src/components/StorageRequestSetup/StorageRequestAvailability.css
@ -0,0 +1,23 @@
+.storageRequestAvailability {
+  flex: 1;
+  display: flex;
+  align-items: center;
+}
+
+.storageRequestFileChooser-dropdown-success {
+  animation-duration: 3s;
+  animation-name: cid-selected;
+  border-radius: var(--codex-border-radius);
+}
+
+@keyframes cid-selected {
+  0% {
+    box-shadow: 0 0 0 0px var(--codex-color-primary-variant);
+  }
+  50% {
+    box-shadow: 0 0 0 3px var(--codex-color-primary-variant);
+  }
+  100% {
+    box-shadow: 0 0 0 0px var(--codex-color-primary-variant);
+  }
+}
--- a/src/components/StorageRequestSetup/StorageRequestAvailability.tsx
+++ b/src/components/StorageRequestSetup/StorageRequestAvailability.tsx
@ -0,0 +1,82 @@
+import { ChangeEvent, useEffect, useRef, useState } from "react";
+import "./StorageRequestAvailability.css";
+import { WebStorage } from "../../utils/web-storage";
+import { StorageAvailabilityUnit, StorageAvailabilityValue } from "./types";
+import { InputGroup } from "@codex/marketplace-ui-components";
+
+type Props = {
+  onToggleNext: (next: boolean) => void;
+};
+
+export function StorageRequestAvailability({ onToggleNext }: Props) {
+  const [unit, setUnit] = useState<StorageAvailabilityUnit>("minutes");
+  const [value, setValue] = useState(0);
+  const cache = useRef<StorageAvailabilityValue | null>(null);
+
+  useEffect(() => {
+    if (cache.current) {
+      return;
+    }
+
+    WebStorage.get<StorageAvailabilityValue>("storage-request-step-2").then(
+      (val) => {
+        if (val) {
+          cache.current = val;
+          setUnit(val.unit);
+          setValue(val.value);
+          onToggleNext(true);
+        }
+      }
+    );
+
+    return () => {
+      WebStorage.set("storage-request-step-2", cache.current);
+    };
+  }, [onToggleNext]);
+
+  const onChange = (e: ChangeEvent<HTMLInputElement>) => {
+    if (!cache.current) {
+      cache.current = { unit: "months", value: 0 };
+    }
+
+    cache.current.value = parseInt(e.currentTarget.value, 10);
+
+    setValue(parseInt(e.currentTarget.value, 10));
+    onToggleNext(!!e.currentTarget.value);
+  };
+
+  const onUnitChange = (e: ChangeEvent<HTMLSelectElement>) => {
+    if (!cache.current) {
+      cache.current = { unit: "months", value: 0 };
+    }
+
+    setUnit(e.currentTarget.value as StorageAvailabilityUnit);
+    cache.current.unit = e.currentTarget.value as StorageAvailabilityUnit;
+  };
+
+  return (
+    <>
+      <span className="storageRequest-title">
+        How long do you want to store your file?
+      </span>
+
+      <InputGroup
+        id="availability"
+        label="Availability"
+        type="number"
+        className="storageRequestAvailability"
+        group={[
+          ["years", "Years"],
+          ["months", "Months"],
+          ["days", "Days"],
+          ["hours", "Hours"],
+          ["minutes", "Minutes"],
+        ]}
+        value={value.toString()}
+        groupValue={unit}
+        onChange={onChange}
+        onGroupChange={onUnitChange}
+      />
+    </>
+  );
+}
--- a/src/components/StorageRequestSetup/StorageRequestDurability.tsx
+++ b/src/components/StorageRequestSetup/StorageRequestDurability.tsx
@ -0,0 +1,128 @@
+import { ChangeEvent, useEffect, useRef, useState } from "react";
+import { WebStorage } from "../../utils/web-storage";
+import { StorageDurabilityStepValue } from "./types";
+import { InputGroup } from "@codex/marketplace-ui-components";
+
+type Props = {
+  onToggleNext: (next: boolean) => void;
+};
+
+type Cache = { tolerance: number; nodes: number; proofProbability: number };
+
+export function StorageRequestDurability({ onToggleNext }: Props) {
+  const [tolerance, setTolerance] = useState("");
+  const [proofProbability, setProofProbability] = useState("");
+  const [nodes, setNodes] = useState("");
+  const cache = useRef<Cache | null>(null);
+
+  useEffect(() => {
+    if (cache.current) {
+      return;
+    }
+
+    WebStorage.get<StorageDurabilityStepValue>("storage-request-step-3").then(
+      (val) => {
+        if (val) {
+          cache.current = val;
+          setTolerance(val.tolerance.toString());
+          setProofProbability(val.proofProbability.toString());
+          setNodes(val.nodes.toString());
+          onToggleNext(shouldEnableNext());
+        }
+      }
+    );
+
+    return () => {
+      WebStorage.set("storage-request-step-3", cache.current);
+    };
+  }, [onToggleNext]);
+
+  const shouldEnableNext = () => {
+    return (
+      cache.current?.tolerance != undefined &&
+      !!cache.current.proofProbability != undefined &&
+      !!cache.current.nodes
+    );
+  };
+
+  const updateCache = (data: Partial<Cache>) => {
+    if (!cache.current) {
+      cache.current = { nodes: 0, proofProbability: 0, tolerance: 0 };
+    }
+
+    cache.current = { ...cache.current, ...data };
+  };
+
+  const onChangeTolerance = (e: ChangeEvent<HTMLInputElement>) => {
+    setTolerance(e.currentTarget.value);
+    updateCache({ tolerance: parseInt(e.currentTarget.value || "0", 10) });
+    onToggleNext(shouldEnableNext());
+  };
+
+  const onChangeProofProbability = (e: ChangeEvent<HTMLInputElement>) => {
+    setProofProbability(e.currentTarget.value);
+    updateCache({
+      proofProbability: parseInt(e.currentTarget.value || "0", 10),
+    });
+    onToggleNext(shouldEnableNext());
+  };
+
+  const onChangeNodes = (e: ChangeEvent<HTMLInputElement>) => {
+    setNodes(e.currentTarget.value);
+    updateCache({ nodes: parseInt(e.currentTarget.value || "0", 10) });
+    onToggleNext(shouldEnableNext());
+  };
+
+  return (
+    <div>
+      <span className="storageRequest-title">
+        Define your criteria to make your data durable
+      </span>
+      <div className="input-spacing">
+        <InputGroup
+          label="Nodes"
+          id="nodes"
+          value={nodes}
+          onChange={onChangeNodes}
+          group={"nodes"}
+        />
+        <div>
+          <span className="input-helper-text text-secondary input-full">
+            Minimal number of nodes the content should be stored on
+          </span>
+        </div>
+      </div>
+
+      <div className="input-spacing">
+        <InputGroup
+          label="Tolerance"
+          id="tolerance"
+          value={tolerance}
+          onChange={onChangeTolerance}
+          group={"nodes"}
+        />
+        <div>
+          <span className="input-helper-text text-secondary">
+            Additional number of nodes on top of the nodes property that can be
+            lost before pronouncing the content lost
+          </span>
+        </div>
+      </div>
+
+      <div className="input-spacing">
+        <InputGroup
+          label="Proof probability"
+          id="proofProbability"
+          value={proofProbability}
+          onChange={onChangeProofProbability}
+          group={"seconds"}
+        />
+        <div>
+          <span className="input-helper-text text-secondary">
+            How often storage proofs are required as decimal string
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/src/components/StorageRequestSetup/StorageRequestFileChooser.css
+++ b/src/components/StorageRequestSetup/StorageRequestFileChooser.css
@ -0,0 +1,22 @@
+.storageRequestFileChooser-hr {
+  margin: 1.5rem 0;
+}
+
+.storageRequestFileChooser-input {
+  width: 100%;
+}
+
+.storageRequestFileChooser-separator {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 0;
+}
+
+.storageRequestFileChooser-or {
+  font-size: 1.25rem;
+}
+
+.storageRequestFileChooser-dropdown .dropdown-input {
+  width: 100%;
+}
--- a/src/components/StorageRequestSetup/StorageRequestFileChooser.tsx
+++ b/src/components/StorageRequestSetup/StorageRequestFileChooser.tsx
@ -0,0 +1,124 @@
+import { useQuery } from "@tanstack/react-query";
+import { CodexSdk } from "../../sdk/codex";
+import "./StorageRequestFileChooser.css";
+import { ChangeEvent, useEffect, useRef, useState } from "react";
+import { WebStorage } from "../../utils/web-storage";
+import { classnames } from "../../utils/classnames";
+import {
+  Dropdown,
+  DropdownOption,
+  Upload,
+  WebFileIcon,
+} from "@codex/marketplace-ui-components";
+
+type Props = {
+  onToggleNext: (enable: boolean) => void;
+};
+
+export function StorageRequestFileChooser({ onToggleNext }: Props) {
+  const { data } = useQuery({
+    queryFn: () => CodexSdk.data().then((data) => data.cids()),
+    queryKey: ["cids"],
+    refetchOnWindowFocus: false,
+    refetchOnMount: false,
+  });
+  const [cid, setCid] = useState("");
+  const cache = useRef("");
+
+  useEffect(() => {
+    WebStorage.get<string>("storage-request-step-1").then((val) => {
+      cache.current = val || "";
+
+      setCid(val || "");
+      onToggleNext(!!val);
+    });
+
+    return () => {
+      WebStorage.set("storage-request-step-1", cache.current || "");
+    };
+  }, [onToggleNext]);
+
+  if (data?.error) {
+    // TODO error
+    return "";
+  }
+
+  const onSelected = (o: DropdownOption) => {
+    onToggleNext(!!o.subtitle);
+    setCid(o.subtitle || "");
+    cache.current = o.subtitle || "";
+  };
+
+  const onChange = (e: ChangeEvent<HTMLInputElement>) => {
+    onToggleNext(!!e.currentTarget.value);
+    setCid(e.currentTarget.value);
+    cache.current = e.currentTarget.value;
+  };
+
+  const onSuccess = (data: string) => {
+    onToggleNext(true);
+    setCid(data);
+    cache.current = data;
+  };
+
+  const onDelete = () => {
+    setCid("");
+    onToggleNext(false);
+  };
+
+  const options =
+    data?.data.content.map((c) => {
+      return {
+        Icon: () => <WebFileIcon type={c.manifest.mimetype} size={24} />,
+        title: c.manifest.filename,
+        subtitle: c.cid,
+      };
+    }) || [];
+
+  return (
+    <>
+      <span className="storageRequest-title">Choose a CID</span>
+
+      <label className="label" htmlFor="cid">
+        CID
+      </label>
+
+      <Dropdown
+        placeholder="Select or type your CID"
+        onChange={onChange}
+        value={cid}
+        options={options}
+        onSelected={onSelected}
+        className={classnames(
+          ["storageRequestFileChooser-dropdown"],
+          ["storageRequestFileChooser-dropdown-success", !!cid]
+        )}
+      />
+
+      <div className="storageRequestFileChooser-separator">
+        <hr className="storageRequestFileChooser-hr" />
+        <span className="storageRequestFileChooser-or">OR</span>
+        <hr className="storageRequestFileChooser-hr" />
+      </div>
+
+      <span className="storageRequest-title">
+        <div>
+          <span>Upload a file</span>
+        </div>
+        <span className="input-helper-text text-secondary">
+          The CID will be automatically copied after your upload.
+        </span>
+      </span>
+
+      <Upload
+        onSuccess={onSuccess}
+        editable={false}
+        onDeleteItem={onDelete}
+        provider={() =>
+          CodexSdk.data().then((data) => data.upload.bind(CodexSdk))
+        }
+        useWorker={false}
+      />
+    </>
+  );
+}
--- a/src/components/StorageRequestSetup/StorageRequestPrice.tsx
+++ b/src/components/StorageRequestSetup/StorageRequestPrice.tsx
@ -0,0 +1,134 @@
+import { useState, useRef, useEffect, ChangeEvent } from "react";
+import { WebStorage } from "../../utils/web-storage";
+import { StoragePriceStepValue } from "./types";
+import { InputGroup } from "@codex/marketplace-ui-components";
+
+type Props = {
+  onToggleNext: (next: boolean) => void;
+};
+
+export function StorageRequestPrice({ onToggleNext }: Props) {
+  const [reward, setReward] = useState("");
+  const [collateral, setCollateral] = useState("");
+  const [expiration, setExpiration] = useState("");
+  const cache = useRef<StoragePriceStepValue | null>(null);
+
+  useEffect(() => {
+    if (cache.current) {
+      return;
+    }
+
+    WebStorage.get<StoragePriceStepValue>("storage-request-step-4").then(
+      (val) => {
+        if (val) {
+          cache.current = val;
+          setReward(val.reward.toString());
+          setCollateral(val.collateral.toString());
+          setExpiration(val.expiration.toString());
+          onToggleNext(shouldEnableNext());
+        }
+      }
+    );
+
+    return () => {
+      WebStorage.set("storage-request-step-4", cache.current);
+    };
+  }, [onToggleNext]);
+
+  const updateCache = (data: Partial<StoragePriceStepValue>) => {
+    if (!cache.current) {
+      cache.current = { collateral: 0, expiration: 0, reward: 0 };
+    }
+
+    cache.current = { ...cache.current, ...data };
+  };
+
+  const shouldEnableNext = () => {
+    return (
+      !!cache.current?.reward &&
+      !!cache.current.collateral &&
+      !!cache.current.expiration
+    );
+  };
+
+  const onChangeReward = (e: ChangeEvent<HTMLInputElement>) => {
+    setReward(e.currentTarget.value);
+    updateCache({ reward: parseFloat(e.currentTarget.value || "0") });
+    onToggleNext(shouldEnableNext());
+  };
+
+  const onChangeCollateral = (e: ChangeEvent<HTMLInputElement>) => {
+    setCollateral(e.currentTarget.value);
+    updateCache({ collateral: parseFloat(e.currentTarget.value || "0") });
+    onToggleNext(shouldEnableNext());
+  };
+
+  const onChangeExpiration = (e: ChangeEvent<HTMLInputElement>) => {
+    setExpiration(e.currentTarget.value);
+    updateCache({ expiration: parseFloat(e.currentTarget.value || "0") });
+    onToggleNext(shouldEnableNext());
+  };
+
+  return (
+    <div>
+      <span className="storageRequest-title">
+        Define your criteria for the payments
+      </span>
+      <div className="input-spacing">
+        <InputGroup
+          label="Reward"
+          id="reward"
+          value={reward}
+          onChange={onChangeReward}
+          group={"tokens"}
+          type={"number"}
+          step="0.1"
+        />
+        <div>
+          <span className="input-helper-text text-secondary">
+            The maximum amount of tokens paid per second per slot to hosts the
+            client is willing to pay
+          </span>
+        </div>
+      </div>
+
+      <div className="input-spacing">
+        <InputGroup
+          label="Collateral"
+          id="collateral"
+          value={collateral}
+          onChange={onChangeCollateral}
+          group={"tokens"}
+          type={"number"}
+          step="0.1"
+        />
+        <div>
+          <span className="input-helper-text text-secondary">
+            Number as decimal string that represents how much collateral is
+            asked from hosts that wants to fill a slots
+          </span>
+        </div>
+      </div>
+
+      <div className="input-spacing">
+        <InputGroup
+          label="Expiration"
+          id="expiration"
+          value={expiration}
+          onChange={onChangeExpiration}
+          group={"minutes"}
+          type={"number"}
+        />
+        <div>
+          <span className="input-helper-text text-secondary">
+            Number as decimal string that represents expiry threshold in seconds
+            from when the Request is submitted. When the threshold is reached
+            and the Request does not find requested amount of nodes to host the
+            data, the Request is voided. The number of seconds can not be higher
+            then the Request's duration itself.
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/src/components/StorageRequestSetup/StorageRequestReview.css
+++ b/src/components/StorageRequestSetup/StorageRequestReview.css
@ -0,0 +1,65 @@
+.storageRequestReview-bar {
+  background-image: linear-gradient(to right, #ef4444, #facc15, #2dd4bf);
+  border-radius: var(--codex-border-radius);
+  height: 10px;
+  position: relative;
+  margin-top: 1rem;
+}
+
+.storageRequestReview-barIndicator {
+  position: absolute;
+  border: 2px solid rgb(38 38 38);
+  background-color: rgb(249 115 22);
+  height: 1.25rem;
+  width: 0.5rem;
+  top: -6px;
+  bottom: 0;
+  transform: translateX(270px);
+}
+
+.storageRequestReview-legendItem,
+.storageRequestReview-legend {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.storageRequestReview-legend {
+  justify-content: space-between;
+  margin-bottom: 0.25rem;
+  margin-top: 0.75rem;
+}
+
+.storageRequestReview-legendItemColor {
+  border-radius: 2px;
+  height: 10px;
+  width: 10px;
+  display: inline-block;
+  background-color: var(--codex-storage-request-review-legend-item-color);
+}
+
+.storageRequestReview-legendItemColor-cheap {
+  --codex-storage-request-review-legend-item-color: rgb(239 68 68);
+}
+
+.storageRequestReview-legendItemColor-average {
+  --codex-storage-request-review-legend-item-color: rgb(249 115 22);
+}
+
+.storageRequestReview-legendItemColor-good {
+  --codex-storage-request-review-legend-item-color: rgb(254 240 138);
+}
+
+.storageRequestReview-legendItemColor-excellent {
+  --codex-storage-request-review-legend-item-color: rgb(45 212 191);
+}
+
+.storageRequestReview-hr {
+  margin: 1.5rem 0;
+}
+
+.storageRequestReview-numbers {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 0.5rem;
+}
--- a/src/components/StorageRequestSetup/StorageRequestReview.tsx
+++ b/src/components/StorageRequestSetup/StorageRequestReview.tsx
@ -0,0 +1,151 @@
+import { useEffect, useState } from "react";
+import { WebStorage } from "../../utils/web-storage";
+import {
+  StorageAvailabilityValue,
+  StorageDurabilityStepValue,
+  StoragePriceStepValue,
+} from "./types";
+import "./StorageRequestReview.css";
+import { Alert, SimpleText } from "@codex/marketplace-ui-components";
+import { CardNumbers } from "../CardNumbers/CardNumbers";
+
+const plurals = (type: "node" | "token" | "second" | "minute", value: number) =>
+  `${value} ${type}` + (value > 1 ? "s" : "");
+
+type Props = {
+  onToggleNext: (next: boolean) => void;
+};
+
+export function StorageRequestReview({ onToggleNext }: Props) {
+  const [cid, setCid] = useState("");
+  const [availability, setAvailability] = useState<StorageAvailabilityValue>({
+    unit: "days",
+    value: 0,
+  });
+  const [durability, setDurability] = useState<StorageDurabilityStepValue>({
+    nodes: 0,
+    proofProbability: 0,
+    tolerance: 0,
+  });
+  const [price, setPrice] = useState<StoragePriceStepValue>({
+    collateral: 0,
+    expiration: 0,
+    reward: 0,
+  });
+
+  useEffect(() => {
+    Promise.all([
+      WebStorage.get<string>("storage-request-step-1"),
+      WebStorage.get<StorageAvailabilityValue>("storage-request-step-2"),
+      WebStorage.get<StorageDurabilityStepValue>("storage-request-step-3"),
+      WebStorage.get<StoragePriceStepValue>("storage-request-step-4"),
+    ]).then(([cid, availability, durability, price]) => {
+      setCid(cid || "");
+
+      if (availability) {
+        setAvailability(availability);
+      }
+
+      if (durability) {
+        setDurability(durability);
+      }
+
+      if (price) {
+        setPrice(price);
+      }
+
+      onToggleNext(true);
+    });
+  }, [onToggleNext]);
+
+  return (
+    <div>
+      <span className="storageRequest-title">Review your request</span>
+
+      <div className="storageRequestReview-numbers">
+        <CardNumbers
+          title={"Contract duration"}
+          data={availability.value.toString()}
+          comment={"Contract duration in " + availability.unit}
+          editable></CardNumbers>
+
+        <CardNumbers
+          title={"Nodes"}
+          data={durability.nodes.toString()}
+          comment={"Storage nodes required"}
+          editable></CardNumbers>
+
+        <CardNumbers
+          title={"Tolerance"}
+          data={durability.tolerance.toString()}
+          comment={"Failure nodes tolerated"}
+          editable></CardNumbers>
+
+        <CardNumbers
+          title={"Proof probability"}
+          data={durability.proofProbability.toString()}
+          comment={"Proof request frequency"}
+          editable></CardNumbers>
+
+        <CardNumbers
+          title={"Reward"}
+          data={price.reward.toString()}
+          comment={"Reward tokens"}
+          editable></CardNumbers>
+
+        <CardNumbers
+          title={"Collateral"}
+          data={price.reward.toString()}
+          comment={"Penality tokens"}
+          editable></CardNumbers>
+      </div>
+
+      <p>
+        <SimpleText variant="light">This request with CID </SimpleText>{" "}
+        <b>{cid}</b> <SimpleText variant="light">will expire in </SimpleText>
+        <b>{plurals("minute", price.expiration)} </b>
+        <SimpleText variant="light">after the start.</SimpleText>
+      </p>
+
+      <Alert
+        message="If no suitable hosts are found matching your storage
+        requirements, you will incur a charge of X tokens."
+        variant="warning"
+      />
+
+      <hr className="storageRequestReview-hr" />
+
+      <p className="text-center">
+        <b className=" storageRequestReview-title">
+          Price comparaison with the market
+        </b>
+      </p>
+
+      <div className="storageRequestReview-legend">
+        <div className="storageRequestReview-legendItem">
+          <span className="storageRequestReview-legendItemColor storageRequestReview-legendItemColor-cheap"></span>
+          <span>Cheap</span>
+        </div>
+
+        <div className="storageRequestReview-legendItem">
+          <span className="storageRequestReview-legendItemColor storageRequestReview-legendItemColor-average"></span>
+          <span>Average</span>
+        </div>
+
+        <div className="storageRequestReview-legendItem">
+          <span className="storageRequestReview-legendItemColor storageRequestReview-legendItemColor-good"></span>
+          <span>Good</span>
+        </div>
+
+        <div className="storageRequestReview-legendItem">
+          <span className="storageRequestReview-legendItemColor storageRequestReview-legendItemColor-excellent"></span>
+          <span>Excellent</span>
+        </div>
+      </div>
+
+      <div className="storageRequestReview-bar">
+        <div className="storageRequestReview-barIndicator"></div>
+      </div>
+    </div>
+  );
+}
--- a/src/components/StorageRequestSetup/StorageRequestSetup.css
+++ b/src/components/StorageRequestSetup/StorageRequestSetup.css
@ -0,0 +1,100 @@
+.storageRequest {
+  background-color: var(--codex-background);
+  background-color: var(--codex-background);
+  padding: 0.5rem 1rem;
+  border-radius: var(--codex-border-radius);
+  transition: transform 0.15s;
+  position: fixed;
+  max-width: 800px;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%) scale(0);
+  overflow-y: auto;
+  opacity: 0;
+}
+
+.storageRequest-open {
+  transform: translate(-50%, -50%) scale(1);
+  opacity: 1;
+}
+
+.storageRequest-title {
+  margin-bottom: 0.5rem;
+  font-weight: 600;
+}
+
+.storageRequest-intro {
+  margin-bottom: 0.5rem;
+}
+
+.storageRequest-steps {
+  margin-top: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.storageRequest-step {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.storageRequest-stepText {
+  flex: 1;
+}
+
+.storageRequest-stepCompleted {
+  text-decoration: line-through;
+  mix-blend-mode: difference;
+}
+
+.storageRequest-stepDisabled {
+  background-color: var(--codex-border-color);
+  color: var(--codex-text-disabled);
+  border: none;
+  border-radius: var(--codex-border-radius);
+  padding: 0.25rem 0.75rem;
+  opacity: 0.7;
+}
+
+.storageRequest-step-action {
+  background-color: var(--codex-border-color);
+  color: var(--codex-text-disabled);
+  border: none;
+  border-radius: var(--codex-border-radius);
+  padding: 0.25rem 0.75rem;
+  cursor: pointer;
+  transition: opacity 0.35s;
+}
+
+.storageRequest-step-action:hover {
+  opacity: 0.8;
+}
+
+.storageRequest-title {
+  font-size: 1rem;
+  font-weight: 600;
+  width: 100%;
+  display: inline-block;
+  margin-bottom: 0.75rem;
+  text-align: center;
+}
+
+.storageRequest .inputGroup-input {
+  width: 100%;
+}
+
+@media (max-width: 800px) {
+  .storageRequest {
+    margin: auto;
+    width: 100%;
+  }
+}
+
+@media (min-width: 801px) {
+  .storageRequest {
+    margin: auto;
+    width: 85%;
+  }
+}
--- a/src/components/StorageRequestSetup/StorageRequestSetup.tsx
+++ b/src/components/StorageRequestSetup/StorageRequestSetup.tsx
@ -0,0 +1,84 @@
+import { CircleCheck, Database, Server } from "lucide-react";
+import { ICON_SIZE } from "../../utils/constants";
+import "./StorageRequestSetup.css";
+
+export function StorageRequestSetup() {
+  return (
+    <div className="storageRequest">
+      <h2 className="storageRequest-title">Storage setup</h2>
+      <p className="text-secondary storageRequest-intro">
+        You need to follow these steps to start a new request storage.
+      </p>
+      <p>
+        <b>3 of 5 completed</b>
+      </p>
+      <div className="storageRequest-steps">
+        <div className="storageRequest-step">
+          <CircleCheck
+            size={ICON_SIZE}
+            fill="currentColor"
+            className="primary upload-progress-check"
+            stroke="var(--codex-background)"></CircleCheck>
+          <span className="storageRequest-stepText storageRequest-step-completed">
+            Offers storage for sale
+          </span>
+          <button className="storageRequest-stepDisabled" disabled>
+            Action
+          </button>
+        </div>
+        <div className="storageRequest-step">
+          <CircleCheck
+            size={ICON_SIZE}
+            fill="currentColor"
+            className="primary upload-progress-check"
+            stroke="var(--codex-background)"></CircleCheck>
+          <span className="storageRequest-stepText storageRequest-step-completed">
+            Updates availability
+          </span>
+          <button className="storageRequest-stepDisabled" disabled>
+            Action
+          </button>
+        </div>
+        <div className="storageRequest-step">
+          <CircleCheck
+            size={ICON_SIZE}
+            fill="currentColor"
+            className="primary upload-progress-check"
+            stroke="var(--codex-background)"></CircleCheck>
+          <span className="storageRequest-stepText storageRequest-step-completed">
+            Get availability's reservations
+          </span>
+          <button className="storageRequest-stepDisabled" disabled>
+            Action
+          </button>
+        </div>
+        <div className="storageRequest-step">
+          <Database
+            size={ICON_SIZE}
+            fill="currentColor"
+            className="upload-progress-check"
+            stroke="var(--codex-background)"></Database>
+          <span className="storageRequest-stepText">
+            Check list of purchase IDs
+          </span>
+          <button className="storageRequest-step-action" disabled>
+            Action
+          </button>
+        </div>
+        <div className="storageRequest-step">
+          <Server
+            size={ICON_SIZE}
+            fill="currentColor"
+            className="upload-progress-check"
+            stroke="var(--codex-background)"></Server>
+          <span className="storageRequest-stepText">
+            Check storage that is for sale
+          </span>
+          <button className="storageRequest-step-action" disabled>
+            Action
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/src/components/StorageRequestSetup/StorageRequestStepper.tsx
+++ b/src/components/StorageRequestSetup/StorageRequestStepper.tsx
@ -0,0 +1,176 @@
+import { StorageRequestFileChooser } from "../../components/StorageRequestSetup/StorageRequestFileChooser";
+import { useEffect, useRef, useState } from "react";
+import { StorageRequestAvailability } from "../../components/StorageRequestSetup/StorageRequestAvailability";
+import { StorageRequestDurability } from "../../components/StorageRequestSetup/StorageRequestDurability";
+import { StorageRequestPrice } from "../../components/StorageRequestSetup/StorageRequestPrice";
+import { WebStorage } from "../../utils/web-storage";
+import { STEPPER_DURATION } from "../../utils/constants";
+import { StorageRequestReview } from "./StorageRequestReview";
+import { CodexCreateStorageRequestInput } from "@codex/sdk-js";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { CodexSdk } from "../../sdk/codex";
+import {
+  StorageAvailabilityValue,
+  StorageDurabilityStepValue,
+  StoragePriceStepValue,
+} from "./types";
+import { Backdrop, Stepper } from "@codex/marketplace-ui-components";
+import { classnames } from "../../utils/classnames";
+
+function calculateAvailability(value: StorageAvailabilityValue) {
+  switch (value.unit) {
+    case "minutes":
+      return 60 * value.value;
+    case "hours":
+      return 60 * 60 * value.value;
+    case "days":
+      return 24 * 60 * 60 * value.value;
+    case "months":
+      return 30 * 24 * 60 * 60 * value.value;
+    case "years":
+      return 365 * 30 * 60 * 60 * value.value;
+  }
+}
+
+type Props = {
+  open: boolean;
+  onClose: () => void;
+  className?: string;
+};
+
+export function StorageRequestStepper({ className, open, onClose }: Props) {
+  const [progress, setProgress] = useState(true);
+  const [step, setStep] = useState(0);
+  const steps = useRef([
+    "File",
+    "Availability",
+    "Durability",
+    "Price",
+    "Review",
+  ]);
+  const [isNextDisable, setIsNextDisable] = useState(true);
+  const queryClient = useQueryClient();
+  const { mutateAsync, isPending, isError, error } = useMutation({
+    mutationKey: ["debug"],
+    mutationFn: (input: CodexCreateStorageRequestInput) =>
+      CodexSdk.marketplace().then((marketplace) =>
+        marketplace.createStorageRequest(input)
+      ),
+    onSuccess: async (data) => {
+      if (data.error) {
+        // TODO report error
+        console.error(data);
+      } else {
+        await Promise.all([
+          WebStorage.delete("storage-request-step"),
+          WebStorage.delete("storage-request-step-1"),
+          WebStorage.delete("storage-request-step-2"),
+          WebStorage.delete("storage-request-step-3"),
+          WebStorage.delete("storage-request-step-4"),
+        ]);
+
+        setStep(0);
+        queryClient.invalidateQueries({ queryKey: ["purchases"] });
+        onClose();
+      }
+    },
+  });
+
+  useEffect(() => {
+    WebStorage.get<number>("storage-request-step").then((value) => {
+      setStep(value || 0);
+
+      setTimeout(() => {
+        setProgress(false);
+      }, STEPPER_DURATION);
+    });
+  }, []);
+
+  if (isError) {
+    // TODO Report error
+    console.error(error);
+    return "";
+  }
+
+  const components = [
+    StorageRequestFileChooser,
+    StorageRequestAvailability,
+    StorageRequestDurability,
+    StorageRequestPrice,
+    StorageRequestReview,
+  ];
+
+  const onChangeStep = async (s: number, state: "before" | "end") => {
+    if (state === "before") {
+      setProgress(true);
+      return;
+    }
+
+    if (s === -1) {
+      setIsNextDisable(true);
+      setProgress(false);
+      onClose();
+      return;
+    }
+
+    if (s === steps.current.length) {
+      setIsNextDisable(true);
+      setProgress(false);
+
+      const [cid, availability, durability, price] = await Promise.all([
+        WebStorage.get<string>("storage-request-step-1"),
+        WebStorage.get<StorageAvailabilityValue>("storage-request-step-2"),
+        WebStorage.get<StorageDurabilityStepValue>("storage-request-step-3"),
+        WebStorage.get<StoragePriceStepValue>("storage-request-step-4"),
+      ]);
+
+      if (!cid || !availability || !durability || !price) {
+        return;
+      }
+
+      const { reward, collateral, expiration } = price;
+      const { nodes, proofProbability, tolerance } = durability;
+
+      mutateAsync({
+        cid,
+        collateral,
+        duration: calculateAvailability(availability),
+        expiry: expiration * 60,
+        nodes,
+        proofProbability,
+        tolerance,
+        reward,
+      });
+
+      return;
+    }
+
+    WebStorage.set("storage-request-step", s);
+
+    setIsNextDisable(true);
+    setProgress(false);
+    setStep(s);
+  };
+
+  const Body = components[step];
+
+  return (
+    <>
+      <Backdrop open={open} onClose={onClose} />
+      <div
+        className={classnames(
+          ["storageRequest"],
+          ["storageRequest-open", open],
+          [className || ""]
+        )}>
+        <Stepper
+          titles={steps.current}
+          Body={() => <Body onToggleNext={() => setIsNextDisable(false)} />}
+          step={step}
+          onChangeStep={onChangeStep}
+          progress={progress || isPending}
+          isNextDisable={progress || isNextDisable}></Stepper>
+      </div>
+    </>
+  );
+}
--- a/src/components/StorageRequestSetup/types.ts
+++ b/src/components/StorageRequestSetup/types.ts
@ -0,0 +1,23 @@
+export type StorageDurabilityStepValue = {
+  tolerance: number;
+  proofProbability: number;
+  nodes: number;
+};
+
+export type StoragePriceStepValue = {
+  reward: number;
+  collateral: number;
+  expiration: number;
+};
+
+export type StorageAvailabilityUnit =
+  | "days"
+  | "months"
+  | "years"
+  | "minutes"
+  | "hours";
+
+export type StorageAvailabilityValue = {
+  value: number;
+  unit: StorageAvailabilityUnit;
+};
--- a/src/contexts/ErrorBoundaryContext.ts
+++ b/src/contexts/ErrorBoundaryContext.ts
@ -0,0 +1,5 @@
+import { createContext } from "react";
+
+export const ErrorBoundaryContext = createContext<(error: Error) => void>(
+  () => ""
+);
--- a/src/index.css
+++ b/src/index.css
@ -0,0 +1,127 @@
+@import url(./assets/css/container.css);
+@import url(./assets/css/indicator.css);
+@import url(./assets/css/text.css);
+
+:root {
+  --codex-background: rgb(23 23 23);
+  --codex-color: #e1e4d9;
+  --codex-color-contrast: #f8f8f8;
+  --codex-color-error: #f85723;
+  --codex-color-primary: #c1f0a4;
+  --codex-color-primary-variant: #c1f0a4cc;
+  --codex-color-on-primary: #333;
+  --codex-color-disabled: #717171;
+  --codex-color-light: rgb(150 150 150);
+  --codex-border-color: rgb(82 82 82);
+  --codex-background-secondary: rgb(38 38 38);
+  --codex-background-light: rgb(64 64 64);
+  --codex-background-backdrop: rgba(70, 70, 70, 0.75);
+  --codex-border-radius: 0.5rem;
+  --codex-font-size: 0.875rem;
+  --codex-font-family: Inter, ui-sans-serif, system-ui, -apple-system,
+    BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans,
+    sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol,
+    Noto Color Emoji;
+  --codex-color-warning: rgb(234 179 8);
+
+  -webkit-tap-highlight-color: transparent;
+  -webkit-text-size-adjust: 100%;
+
+  font-family: var(--codex-font-family);
+  font-feature-settings: normal;
+  font-variation-settings: normal;
+  tab-size: 4;
+  font-size: 0.875rem;
+  font-size: var(--codex-font-size);
+  color-scheme: dark;
+  color: var(--codex-color);
+  background-color: var(--codex-background);
+}
+
+::selection {
+  background: var(--codex-color-primary);
+  color: #3a0b5a;
+}
+
+::-webkit-scrollbar {
+  height: 12px;
+  width: 8px;
+  background: #aaa;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #444;
+  -webkit-border-radius: 1ex;
+  -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
+}
+
+::-webkit-scrollbar-corner {
+  background: #000;
+}
+
+html {
+  min-height: 100%;
+  display: flex;
+}
+
+body {
+  margin: 0;
+  flex: 1;
+  display: flex;
+}
+
+ul,
+h1,
+p,
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  overflow-wrap: break-word;
+  margin: 0;
+}
+
+ul {
+  padding: 0;
+}
+
+main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+hr {
+  border: 0.1px solid var(--codex-border-color);
+  width: 100%;
+}
+
+ul {
+  margin: 0;
+  padding: 0;
+}
+
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+pre {
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+a {
+  text-decoration: inherit;
+  color: var(--codex-color);
+}
+
+.root {
+  display: flex;
+  flex: 1;
+}
--- a/src/main.tsx
+++ b/src/main.tsx
@ -0,0 +1,46 @@
+import { RouterProvider, createRouter } from "@tanstack/react-router";
+import { StrictMode } from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+
+// Import the generated route tree
+import App from "./App.tsx";
+import { routeTree } from "./routeTree.gen";
+import { Failure } from "@codex/marketplace-ui-components";
+
+// Create a new router instance
+const router = createRouter({
+  routeTree,
+  defaultNotFoundComponent: () => {
+    return (
+      <Failure
+        title="Page not found"
+        code={404}
+        message="The page is not found"
+        button="Go back to home"
+        onClick={() => {}}
+      />
+    );
+  },
+});
+
+// Register the router instance for type safety
+declare module "@tanstack/react-router" {
+  interface Register {
+    router: typeof router;
+  }
+}
+
+// Render the app
+const rootElement = document.getElementById("root")!;
+
+if (rootElement) {
+  const root = ReactDOM.createRoot(rootElement);
+  root.render(
+    <StrictMode>
+      <App>
+        <RouterProvider router={router} />
+      </App>
+    </StrictMode>
+  );
+}
--- a/src/network/useNetwork.ts
+++ b/src/network/useNetwork.ts
@ -0,0 +1,20 @@
+import { useEffect, useState } from "react";
+
+export function useNetwork() {
+  const [online, setOnline] = useState(navigator.onLine);
+
+  useEffect(() => {
+    const onOffline = () => setOnline(false);
+    window.addEventListener("offline", onOffline);
+
+    const onOnline = () => setOnline(true);
+    window.addEventListener("online", onOnline);
+
+    return () => {
+      window.removeEventListener("offline", onOffline);
+      window.removeEventListener("online", onOnline);
+    };
+  }, []);
+
+  return online;
+}
--- a/src/routeTree.gen.ts
+++ b/src/routeTree.gen.ts
@ -0,0 +1,232 @@
+/* prettier-ignore-start */
+
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file is auto-generated by TanStack Router
+
+// Import Routes
+
+import { Route as rootRoute } from './routes/__root'
+import { Route as DashboardImport } from './routes/dashboard'
+import { Route as IndexImport } from './routes/index'
+import { Route as DashboardIndexImport } from './routes/dashboard/index'
+import { Route as DashboardSettingsImport } from './routes/dashboard/settings'
+import { Route as DashboardRequestsImport } from './routes/dashboard/requests'
+import { Route as DashboardPurchasesImport } from './routes/dashboard/purchases'
+import { Route as DashboardHelpImport } from './routes/dashboard/help'
+import { Route as DashboardFavoritesImport } from './routes/dashboard/favorites'
+import { Route as DashboardAvailabilitiesImport } from './routes/dashboard/availabilities'
+import { Route as DashboardAboutImport } from './routes/dashboard/about'
+
+// Create/Update Routes
+
+const DashboardRoute = DashboardImport.update({
+  path: '/dashboard',
+  getParentRoute: () => rootRoute,
+} as any)
+
+const IndexRoute = IndexImport.update({
+  path: '/',
+  getParentRoute: () => rootRoute,
+} as any)
+
+const DashboardIndexRoute = DashboardIndexImport.update({
+  path: '/',
+  getParentRoute: () => DashboardRoute,
+} as any)
+
+const DashboardSettingsRoute = DashboardSettingsImport.update({
+  path: '/settings',
+  getParentRoute: () => DashboardRoute,
+} as any)
+
+const DashboardRequestsRoute = DashboardRequestsImport.update({
+  path: '/requests',
+  getParentRoute: () => DashboardRoute,
+} as any)
+
+const DashboardPurchasesRoute = DashboardPurchasesImport.update({
+  path: '/purchases',
+  getParentRoute: () => DashboardRoute,
+} as any)
+
+const DashboardHelpRoute = DashboardHelpImport.update({
+  path: '/help',
+  getParentRoute: () => DashboardRoute,
+} as any)
+
+const DashboardFavoritesRoute = DashboardFavoritesImport.update({
+  path: '/favorites',
+  getParentRoute: () => DashboardRoute,
+} as any)
+
+const DashboardAvailabilitiesRoute = DashboardAvailabilitiesImport.update({
+  path: '/availabilities',
+  getParentRoute: () => DashboardRoute,
+} as any)
+
+const DashboardAboutRoute = DashboardAboutImport.update({
+  path: '/about',
+  getParentRoute: () => DashboardRoute,
+} as any)
+
+// Populate the FileRoutesByPath interface
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/': {
+      id: '/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof IndexImport
+      parentRoute: typeof rootRoute
+    }
+    '/dashboard': {
+      id: '/dashboard'
+      path: '/dashboard'
+      fullPath: '/dashboard'
+      preLoaderRoute: typeof DashboardImport
+      parentRoute: typeof rootRoute
+    }
+    '/dashboard/about': {
+      id: '/dashboard/about'
+      path: '/about'
+      fullPath: '/dashboard/about'
+      preLoaderRoute: typeof DashboardAboutImport
+      parentRoute: typeof DashboardImport
+    }
+    '/dashboard/availabilities': {
+      id: '/dashboard/availabilities'
+      path: '/availabilities'
+      fullPath: '/dashboard/availabilities'
+      preLoaderRoute: typeof DashboardAvailabilitiesImport
+      parentRoute: typeof DashboardImport
+    }
+    '/dashboard/favorites': {
+      id: '/dashboard/favorites'
+      path: '/favorites'
+      fullPath: '/dashboard/favorites'
+      preLoaderRoute: typeof DashboardFavoritesImport
+      parentRoute: typeof DashboardImport
+    }
+    '/dashboard/help': {
+      id: '/dashboard/help'
+      path: '/help'
+      fullPath: '/dashboard/help'
+      preLoaderRoute: typeof DashboardHelpImport
+      parentRoute: typeof DashboardImport
+    }
+    '/dashboard/purchases': {
+      id: '/dashboard/purchases'
+      path: '/purchases'
+      fullPath: '/dashboard/purchases'
+      preLoaderRoute: typeof DashboardPurchasesImport
+      parentRoute: typeof DashboardImport
+    }
+    '/dashboard/requests': {
+      id: '/dashboard/requests'
+      path: '/requests'
+      fullPath: '/dashboard/requests'
+      preLoaderRoute: typeof DashboardRequestsImport
+      parentRoute: typeof DashboardImport
+    }
+    '/dashboard/settings': {
+      id: '/dashboard/settings'
+      path: '/settings'
+      fullPath: '/dashboard/settings'
+      preLoaderRoute: typeof DashboardSettingsImport
+      parentRoute: typeof DashboardImport
+    }
+    '/dashboard/': {
+      id: '/dashboard/'
+      path: '/'
+      fullPath: '/dashboard/'
+      preLoaderRoute: typeof DashboardIndexImport
+      parentRoute: typeof DashboardImport
+    }
+  }
+}
+
+// Create and export the route tree
+
+export const routeTree = rootRoute.addChildren({
+  IndexRoute,
+  DashboardRoute: DashboardRoute.addChildren({
+    DashboardAboutRoute,
+    DashboardAvailabilitiesRoute,
+    DashboardFavoritesRoute,
+    DashboardHelpRoute,
+    DashboardPurchasesRoute,
+    DashboardRequestsRoute,
+    DashboardSettingsRoute,
+    DashboardIndexRoute,
+  }),
+})
+
+/* prettier-ignore-end */
+
+/* ROUTE_MANIFEST_START
+{
+  "routes": {
+    "__root__": {
+      "filePath": "__root.tsx",
+      "children": [
+        "/",
+        "/dashboard"
+      ]
+    },
+    "/": {
+      "filePath": "index.tsx"
+    },
+    "/dashboard": {
+      "filePath": "dashboard.tsx",
+      "children": [
+        "/dashboard/about",
+        "/dashboard/availabilities",
+        "/dashboard/favorites",
+        "/dashboard/help",
+        "/dashboard/purchases",
+        "/dashboard/requests",
+        "/dashboard/settings",
+        "/dashboard/"
+      ]
+    },
+    "/dashboard/about": {
+      "filePath": "dashboard/about.tsx",
+      "parent": "/dashboard"
+    },
+    "/dashboard/availabilities": {
+      "filePath": "dashboard/availabilities.tsx",
+      "parent": "/dashboard"
+    },
+    "/dashboard/favorites": {
+      "filePath": "dashboard/favorites.tsx",
+      "parent": "/dashboard"
+    },
+    "/dashboard/help": {
+      "filePath": "dashboard/help.tsx",
+      "parent": "/dashboard"
+    },
+    "/dashboard/purchases": {
+      "filePath": "dashboard/purchases.tsx",
+      "parent": "/dashboard"
+    },
+    "/dashboard/requests": {
+      "filePath": "dashboard/requests.tsx",
+      "parent": "/dashboard"
+    },
+    "/dashboard/settings": {
+      "filePath": "dashboard/settings.tsx",
+      "parent": "/dashboard"
+    },
+    "/dashboard/": {
+      "filePath": "dashboard/index.tsx",
+      "parent": "/dashboard"
+    }
+  }
+}
+ROUTE_MANIFEST_END */
--- a/src/routes/__root.tsx
+++ b/src/routes/__root.tsx
@ -0,0 +1,25 @@
+import { createRootRoute, Outlet } from "@tanstack/react-router";
+import React from "react";
+
+const TanStackRouterDevtools =
+  process.env.NODE_ENV === "production"
+    ? () => null // Render nothing in production
+    : React.lazy(() =>
+        // Lazy load in development
+        import("@tanstack/router-devtools").then((res) => ({
+          default: res.TanStackRouterDevtools,
+          // For Embedded Mode
+          // default: res.TanStackRouterDevtoolsPanel
+        }))
+      );
+
+export const Route = createRootRoute({
+  component: () => {
+    return (
+      <>
+        <Outlet />
+        <TanStackRouterDevtools />
+      </>
+    );
+  },
+});
--- a/src/routes/dashboard.css
+++ b/src/routes/dashboard.css
@ -0,0 +1,12 @@
+.dashboard {
+  padding: 1.5rem;
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 0.75rem;
+}
+
+@media (min-width: 1000px) {
+  .dashboard {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
--- a/src/routes/dashboard.tsx
+++ b/src/routes/dashboard.tsx
@ -0,0 +1,28 @@
+import { createFileRoute, Outlet } from "@tanstack/react-router";
+import { useState } from "react";
+import "./dashboard.css";
+import { Menu } from "../components/Menu/Menu";
+import { AppBar } from "../components/AppBar/AppBar";
+
+const Layout = () => {
+  const [expanded, setExpanded] = useState(false);
+
+  const onExpand = () => setExpanded(true);
+
+  const onClose = () => setExpanded(false);
+
+  return (
+    <>
+      <Menu expanded={expanded} onClose={onClose} />
+
+      <main>
+        <AppBar onExpand={onExpand} />
+        <Outlet />
+      </main>
+    </>
+  );
+};
+
+export const Route = createFileRoute("/dashboard")({
+  component: Layout,
+});
--- a/src/routes/dashboard/about.tsx
+++ b/src/routes/dashboard/about.tsx
@ -0,0 +1,104 @@
+import { CodexDataContent } from "@codex/sdk-js";
+import { createFileRoute, useRouterState } from "@tanstack/react-router";
+import { PrettyBytes } from "../../utils/bytes.ts";
+import { Button, WebFileIcon } from "@codex/marketplace-ui-components";
+
+function ProtectedIcon({ isProtected }: { isProtected: boolean }) {
+  if (isProtected) {
+    return (
+      <span title="Protected" className="material-symbols-outlined primary">
+        lock
+      </span>
+    );
+  }
+
+  return (
+    <span title="Not protected" className="material-symbols-outlined error">
+      lock_open
+    </span>
+  );
+}
+
+const About = () => {
+  {
+    const c = useRouterState({
+      select: (s) => s.location.state,
+    }) as CodexDataContent;
+
+    if (!c.cid) {
+      return <div className="container"></div>;
+    }
+
+    return (
+      <div className="container manifest-main-content">
+        <div className="manifest" key={c.cid}>
+          <div className="row">
+            <WebFileIcon type={c.manifest.mimetype} />
+            <div className="manifest-data grow">
+              <div>
+                <b>{c.manifest.filename}</b>
+                <div>
+                  <small className="manifest-meta">
+                    {PrettyBytes(c.manifest.datasetSize)} -{" "}
+                    {c.manifest.uploadedAt} - ...{c.cid.slice(-5)}
+                  </small>
+                </div>
+              </div>
+              <div className="row row-center">
+                {ProtectedIcon({ isProtected: c.manifest.protected })}
+                <a href="#" className="row row-center">
+                  <span className="material-symbols-outlined primary">
+                    expand_circle_right
+                  </span>
+                </a>
+              </div>
+            </div>
+          </div>
+
+          <h2>File details</h2>
+          <div className="manifest-details-meta">
+            <p className="manifest-details-info">
+              <b className="manifest-details-label">Cid: </b>
+              <span>{c.cid}</span>
+            </p>
+
+            <p className="manifest-details-info">
+              <b className="manifest-details-label">Name: </b>
+              <span>{c.manifest.filename}</span>
+            </p>
+
+            <p className="manifest-details-info">
+              <b className="manifest-details-label">Uploaded: </b>
+              <span>{c.manifest.uploadedAt}</span>
+            </p>
+
+            <p className="manifest-details-info">
+              <b className="manifest-details-label">File size: </b>
+              <span>{PrettyBytes(c.manifest.datasetSize)}</span>
+            </p>
+
+            <p className="manifest-details-info">
+              <b className="manifest-details-label">Protected: </b>
+              <span>{c.manifest.protected ? "Yes" : "No"}</span>
+            </p>
+
+            <div className="row row-center">
+              <Button label="Cache" variant="outline"></Button>
+
+              <a
+                className="button"
+                target="_blank"
+                href={"http://localhost:8002/api/codex/v1/data/" + c.cid}>
+                Download
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+};
+
+export const Route = createFileRoute("/dashboard/about")({
+  component: () => About,
+});
--- a/src/routes/dashboard/availabilities.tsx
+++ b/src/routes/dashboard/availabilities.tsx
@ -0,0 +1,7 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/dashboard/availabilities")({
+  component: () => () => {
+    return <div>Hello /dashboard/availabilities!</div>;
+  },
+});
--- a/src/routes/dashboard/favorites.tsx
+++ b/src/routes/dashboard/favorites.tsx
@ -0,0 +1,15 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { ErrorBoundary } from "../../components/ErrorBoundary/ErrorBoundary";
+import { Manifests } from "../../components/Manifests/Manitests";
+
+export const Route = createFileRoute("/dashboard/favorites")({
+  component: () => (
+    <>
+      <ErrorBoundary fallback={() => ""}>
+        <div className="container">
+          <Manifests />
+        </div>
+      </ErrorBoundary>
+    </>
+  ),
+});
--- a/src/routes/dashboard/help.tsx
+++ b/src/routes/dashboard/help.tsx
@ -0,0 +1,5 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/dashboard/help")({
+  component: () => <div className="container">Hello /dashboard/help!</div>,
+});
--- a/src/routes/dashboard/index.tsx
+++ b/src/routes/dashboard/index.tsx
@ -0,0 +1,67 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { Debug } from "../../components/Debug/Debug.tsx";
+import { ErrorBoundary } from "../../components/ErrorBoundary/ErrorBoundary.tsx";
+import { LogLevel } from "../../components/LogLevel/LogLevel.tsx";
+import { Manifests } from "../../components/Manifests/Manitests.tsx";
+import { NodeSpaceAllocation } from "../../components/NodeSpaceAllocation/NodeSpaceAllocation.tsx";
+import {
+  Card,
+  EmptyPlaceholder,
+  Upload,
+} from "@codex/marketplace-ui-components";
+import { CodexSdk } from "../../sdk/codex.ts";
+
+export const Route = createFileRoute("/dashboard/")({
+  component: About,
+});
+
+function About() {
+  return (
+    <>
+      <div className="dashboard">
+        <ErrorBoundary fallback={() => ""}>
+          <Card title="Upload a file">
+            <Upload
+              multiple
+              provider={() =>
+                CodexSdk.data().then((data) => data.upload.bind(CodexSdk))
+              }
+              useWorker={false}
+            />
+          </Card>
+        </ErrorBoundary>
+
+        <ErrorBoundary fallback={() => ""}>
+          <LogLevel />
+        </ErrorBoundary>
+
+        <ErrorBoundary fallback={() => ""}>
+          <Card title="Node space allocation">
+            <NodeSpaceAllocation />
+          </Card>
+        </ErrorBoundary>
+
+        <ErrorBoundary fallback={() => ""}>
+          <Card title="Empty state">
+            <EmptyPlaceholder
+              title="Nothing to show"
+              message="No data here yet. We will notify you when there's an update."
+            />
+          </Card>
+        </ErrorBoundary>
+      </div>
+
+      <div className="container-fluid">
+        <ErrorBoundary fallback={() => ""}>
+          <Manifests />
+        </ErrorBoundary>
+      </div>
+
+      <div className="container-fluid">
+        <ErrorBoundary fallback={() => ""}>
+          <Debug />
+        </ErrorBoundary>
+      </div>
+    </>
+  );
+}
--- a/src/routes/dashboard/purchases.css
+++ b/src/routes/dashboard/purchases.css
@ -0,0 +1,16 @@
+.purchases-modal {
+  z-index: -1;
+  position: fixed;
+  margin: auto;
+}
+
+.purchases-modal-open {
+  z-index: 1;
+}
+
+.purchases-actions {
+  padding: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
--- a/src/routes/dashboard/purchases.tsx
+++ b/src/routes/dashboard/purchases.tsx
@ -0,0 +1,93 @@
+import { useQuery } from "@tanstack/react-query";
+import { createFileRoute } from "@tanstack/react-router";
+import { CodexSdk } from "../../sdk/codex";
+import { Plus } from "lucide-react";
+import { useState } from "react";
+import {
+  BreakCellRender,
+  Button,
+  DefaultCellRender,
+  DurationCellRender,
+  StateCellRender,
+  Table,
+} from "@codex/marketplace-ui-components";
+import { StorageRequestStepper } from "../../components/StorageRequestSetup/StorageRequestStepper";
+import "./purchases.css";
+import { classnames } from "../../utils/classnames";
+
+const Purchases = () => {
+  const [open, setOpen] = useState(false);
+  const { data, isPending } = useQuery({
+    queryFn: () =>
+      CodexSdk.marketplace().then((marketplace) => marketplace.purchases()),
+    queryKey: ["purchases"],
+  });
+
+  if (isPending) {
+    return <div>Pending</div>;
+  }
+
+  if (data?.error) {
+    console.error(data.data);
+    return <div>Error: {data.data.message}</div>;
+    // TODO Manage error
+  }
+
+  const headers = [
+    "id",
+    "state",
+    "duration",
+    "slots",
+    "reward",
+    "proof probability",
+    "error",
+  ];
+
+  const cells = [
+    BreakCellRender,
+    StateCellRender({ cancelling: "success" }),
+    DurationCellRender,
+    DefaultCellRender,
+    DefaultCellRender,
+    DefaultCellRender,
+    DefaultCellRender,
+  ];
+
+  const purchases =
+    data?.data.map((p) => [
+      p.requestId.toString(),
+      p.state,
+      p.request.ask.duration.toString(),
+      p.request.ask.slots.toString(),
+      p.request.ask.reward.toString(),
+      p.request.ask.proofProbability.toString(),
+      p.error,
+    ]) || [];
+
+  return (
+    <div className="container">
+      <div className="purchases-actions">
+        <Button
+          label="Storage Request"
+          Icon={Plus}
+          onClick={() => setOpen(true)}
+          variant="primary"
+        />
+      </div>
+
+      <StorageRequestStepper
+        className={classnames(
+          ["purchases-modal"],
+          ["purchases-modal-open", open]
+        )}
+        open={open}
+        onClose={() => setOpen(false)}
+      />
+      <Table headers={headers} data={purchases} cells={cells} />
+    </div>
+  );
+};
+
+export const Route = createFileRoute("/dashboard/purchases")({
+  component: Purchases,
+});
--- a/src/routes/dashboard/requests.css
+++ b/src/routes/dashboard/requests.css
@ -0,0 +1,7 @@
+.requests {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--codex-background-light);
+}
--- a/src/routes/dashboard/requests.tsx
+++ b/src/routes/dashboard/requests.tsx
@ -0,0 +1,18 @@
+import { createFileRoute } from "@tanstack/react-router";
+import "./requests.css";
+import { StorageRequestSetup } from "../../components/StorageRequestSetup/StorageRequestSetup";
+import { StorageRequestStepper } from "../../components/StorageRequestSetup/StorageRequestStepper";
+
+export const Route = createFileRoute("/dashboard/requests")({
+  component: () => {
+    return (
+      <div className="container requests">
+        <div className="stepper-container">
+          <StorageRequestStepper />
+        </div>
+
+        <StorageRequestSetup />
+      </div>
+    );
+  },
+});
--- a/src/routes/dashboard/settings.css
+++ b/src/routes/dashboard/settings.css
@ -0,0 +1,5 @@
+.settings {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
--- a/src/routes/dashboard/settings.tsx
+++ b/src/routes/dashboard/settings.tsx
@ -0,0 +1,40 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { ErrorBoundary } from "../../components/ErrorBoundary/ErrorBoundary";
+import "./settings.css";
+
+export const Route = createFileRoute("/dashboard/settings")({
+  component: () => (
+    <>
+      <ErrorBoundary fallback={() => ""}>
+        <div className="container">
+          <p>Settings</p>
+
+          {/* <div className="input-floating">
+              <input
+                className="input input-floating-input"
+                id="input-floating"
+                placeholder=""
+              />
+              <label className="input-floating-label" htmlFor="input-floating">
+                Floating
+              </label>
+            </div>
+
+            <div className="input-floating">
+              <input
+                className="input input-floating-input"
+                id="input-floating-with-value"
+                placeholder=""
+                value="Some value"
+              />
+              <label
+                className="input-floating-label"
+                htmlFor="input-floating-with-value">
+                Floating
+              </label>
+            </div> */}
+        </div>
+      </ErrorBoundary>
+    </>
+  ),
+});
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@ -0,0 +1,15 @@
+import { createFileRoute, Link } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/")({
+  component: Index,
+});
+
+function Index() {
+  return (
+    <div className="p-2">
+      <h3>Welcome Home!</h3>
+
+      <Link to="/dashboard/index">Go to dashboard</Link>
+    </div>
+  );
+}
--- a/src/sdk/codex.ts
+++ b/src/sdk/codex.ts
@ -0,0 +1,3 @@
+import { Codex } from "@codex/sdk-js";
+
+export const CodexSdk = new Codex(import.meta.env.VITE_CODEX_API_URL);
--- a/src/utils/attributes.ts
+++ b/src/utils/attributes.ts
@ -0,0 +1,6 @@
+type Attributes = Record<string, string | boolean>;
+
+export const attributes = (attributes: Attributes) =>
+  Object.keys(attributes)
+    .filter((key) => attributes[key] !== false)
+    .reduce((prev, key) => ({ ...prev, [key]: attributes[key] }), {});
--- a/src/utils/browser-storage.ts
+++ b/src/utils/browser-storage.ts
@ -0,0 +1,18 @@
+// TODO remove this for WebStorage
+export const BrowserStorage = {
+  toggle(key: string, value: string) {
+    const previous = JSON.parse(window.localStorage.getItem(key) || "[]");
+
+    if (previous.includes(value)) {
+      const values = previous.filter((v: string) => v !== value);
+      window.localStorage.setItem(key, JSON.stringify(values));
+      return;
+    }
+
+    window.localStorage.setItem(key, JSON.stringify([...previous, value]));
+  },
+
+  values(key: string) {
+    return JSON.parse(window.localStorage.getItem(key) || "[]");
+  },
+};
--- a/src/utils/bytes.ts
+++ b/src/utils/bytes.ts
@ -0,0 +1,14 @@
+export const PrettyBytes = (bytes: number) => {
+  const sizes = ["bytes", "KB", "MB", "GB", "TB"];
+  if (bytes == 0) {
+    return "0 b";
+  }
+
+  const i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)).toString());
+
+  if (i == 0) {
+    return bytes + " " + sizes[i];
+  }
+
+  return (bytes / Math.pow(1024, i)).toFixed(1) + " " + sizes[i];
+};
--- a/src/utils/classnames.ts
+++ b/src/utils/classnames.ts
@ -0,0 +1,7 @@
+export type Classname = [string, boolean?];
+
+export const classnames = (...classnames: Classname[]) =>
+  classnames
+    .filter(([, visible = true]) => visible)
+    .map(([name]) => name)
+    .join(" ");
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@ -0,0 +1,9 @@
+export const TOAST_DURATION = 3000;
+
+export const COPY_DURATION = 3000;
+
+export const SIDE_DURATION = 3000;
+
+export const ICON_SIZE = "1.25rem";
+
+export const STEPPER_DURATION = 500;
--- a/src/utils/dates.ts
+++ b/src/utils/dates.ts
@ -0,0 +1,8 @@
+export const Dates = {
+	format(date: string) {
+		return new Intl.DateTimeFormat("en-GB", {
+			dateStyle: "medium",
+			timeStyle: "short",
+		}).format(new Date(date));
+	},
+};
--- a/src/utils/files.ts
+++ b/src/utils/files.ts
@ -0,0 +1,5 @@
+export const Files = {
+	isImage(type: string) {
+		return type.startsWith("image");
+	},
+};
--- a/src/utils/promises.ts
+++ b/src/utils/promises.ts
@ -0,0 +1,6 @@
+import { SafeValue } from "@codex/sdk-js";
+
+export const Promises = {
+  rejectOnError: <T>(safe: SafeValue<T>) =>
+    safe.error ? Promise.reject(safe.data) : Promise.resolve(safe.data),
+};
--- a/src/utils/web-storage.ts
+++ b/src/utils/web-storage.ts
@ -0,0 +1,15 @@
+import { del, get, set } from "idb-keyval";
+
+export const WebStorage = {
+  set(key: string, value: unknown) {
+    return set(key, value);
+  },
+
+  get<T>(key: string) {
+    return get<T>(key);
+  },
+
+  delete(key: string) {
+    return del(key);
+  },
+};
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@ -0,0 +1,9 @@
+/// <reference types='vite/client' />
+
+interface ImportMetaEnv {
+  VITE_CODEX_API_URL: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
--- a/src/workers/upload-worker.ts
+++ b/src/workers/upload-worker.ts
@ -0,0 +1,39 @@
+import { Codex } from "@codex/sdk-js";
+
+const codex = new Codex(import.meta.env.VITE_CODEX_API_URL);
+let abort: () => void;
+
+self.addEventListener("message", function (e) {
+  const { type, ...rest } = e.data;
+
+  if (type === "abort") {
+    console.debug("Aborting request");
+
+    abort?.();
+
+    return;
+  }
+
+  const onProgress = (loaded: number, total: number) => {
+    self.postMessage({
+      type: "progress",
+      loaded,
+      total,
+    });
+  };
+
+  return codex
+    .data()
+    .then((data) => data.upload(rest.file, onProgress))
+    .then((result) => {
+      abort = result.abort;
+
+      return result.result;
+    })
+    .then((value) => {
+      self.postMessage({
+        type: "completed",
+        value,
+      });
+    });
+});
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+  },
+  "include": ["src"]
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,11 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
+}
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "noEmit": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@ -0,0 +1,8 @@
+import { TanStackRouterVite } from "@tanstack/router-plugin/vite";
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [TanStackRouterVite(), react()],
+});
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>