From 7e559cb05159eacc2e6f31d24acca765eda5c497 Mon Sep 17 00:00:00 2001
From: Dmitry Lobachevsky <dmitriylobachevskiy@gmail.com>
Date: Tue, 10 Sep 2024 19:04:40 +0200
Subject: [PATCH 01/12] feat(dHEDGE V1 Withdraw): set up dHEDGE v1 withdraw app

---
 apps/dhedge/.eslintrc.json                    |  18 +
 apps/dhedge/index.html                        |  15 +
 apps/dhedge/project.json                      |  99 +++++
 apps/dhedge/public/favicon.ico                | Bin 0 -> 15086 bytes
 apps/dhedge/src/App.tsx                       |  34 ++
 apps/dhedge/src/clients/google-analytics.ts   |  12 +
 apps/dhedge/src/clients/index.ts              |   3 +
 apps/dhedge/src/clients/react-query.ts        |  15 +
 apps/dhedge/src/clients/wagmi.ts              |  75 ++++
 apps/dhedge/src/components/Footer.tsx         |  74 ++++
 apps/dhedge/src/components/Topnav.tsx         |  57 +++
 apps/dhedge/src/main.tsx                      |  54 +++
 apps/dhedge/tsconfig.app.json                 |  23 ++
 apps/dhedge/tsconfig.json                     |  27 ++
 apps/dhedge/tsconfig.spec.json                |  23 ++
 apps/dhedge/vite.config.ts                    |  63 ++++
 libs/dhedge/theme/.eslintrc.json              |  18 +
 libs/dhedge/theme/README.md                   |   7 +
 libs/dhedge/theme/package.json                |  12 +
 libs/dhedge/theme/project.json                |  40 ++
 libs/dhedge/theme/src/constants.ts            | 110 ++++++
 libs/dhedge/theme/src/index.ts                |   2 +
 libs/dhedge/theme/src/mui/breakpoints.ts      |  13 +
 .../dhedge/theme/src/mui/components/Alert.tsx | 107 ++++++
 .../dhedge/theme/src/mui/components/AppBar.ts |  29 ++
 .../dhedge/theme/src/mui/components/Avatar.ts |  33 ++
 .../dhedge/theme/src/mui/components/Button.ts | 112 ++++++
 .../theme/src/mui/components/ButtonBase.ts    |  12 +
 .../theme/src/mui/components/ButtonGroup.ts   |  71 ++++
 .../theme/src/mui/components/CSSBaseline.ts   |  31 ++
 libs/dhedge/theme/src/mui/components/Card.ts  |  16 +
 .../theme/src/mui/components/CardHeader.ts    |  13 +
 .../theme/src/mui/components/Checkbox.tsx     |  23 ++
 libs/dhedge/theme/src/mui/components/Chip.ts  | 107 ++++++
 .../dhedge/theme/src/mui/components/Dialog.ts |  22 ++
 .../theme/src/mui/components/DialogActions.ts |  16 +
 .../theme/src/mui/components/DialogContent.ts |  16 +
 .../theme/src/mui/components/DialogTitle.ts   |  18 +
 .../theme/src/mui/components/Divider.ts       |  34 ++
 .../theme/src/mui/components/FormControl.ts   |  89 +++++
 .../src/mui/components/FormControlLabel.ts    |  18 +
 .../theme/src/mui/components/FormGroup.ts     |  20 +
 .../src/mui/components/FormHelperText.ts      |  20 +
 .../theme/src/mui/components/FormLabel.ts     |  18 +
 .../theme/src/mui/components/InputBase.ts     | 107 ++++++
 .../theme/src/mui/components/InputLabel.ts    |  22 ++
 libs/dhedge/theme/src/mui/components/Link.ts  |  19 +
 libs/dhedge/theme/src/mui/components/Menu.ts  |  24 ++
 .../theme/src/mui/components/MenuItem.ts      |  69 ++++
 .../theme/src/mui/components/OutlinedInput.ts |  93 +++++
 libs/dhedge/theme/src/mui/components/Paper.ts |  16 +
 .../dhedge/theme/src/mui/components/Radio.tsx |  23 ++
 .../dhedge/theme/src/mui/components/Select.ts |  71 ++++
 libs/dhedge/theme/src/mui/components/Tab.ts   |  13 +
 .../theme/src/mui/components/TableCell.ts     |  13 +
 .../theme/src/mui/components/TextField.ts     |  13 +
 .../theme/src/mui/components/ToggleButton.ts  |  34 ++
 .../src/mui/components/ToggleButtonGroup.ts   |  82 +++++
 .../theme/src/mui/components/Tooltip.ts       |  29 ++
 .../theme/src/mui/components/Typography.ts    |  11 +
 libs/dhedge/theme/src/mui/icons/check.svg     |  12 +
 .../theme/src/mui/icons/indeterminate.svg     |  12 +
 libs/dhedge/theme/src/mui/icons/index.tsx     |  19 +
 libs/dhedge/theme/src/mui/icons/uncheck.svg   |   4 +
 libs/dhedge/theme/src/mui/index.ts            |   2 +
 libs/dhedge/theme/src/mui/mixins.ts           |  36 ++
 libs/dhedge/theme/src/mui/palette.ts          | 134 +++++++
 libs/dhedge/theme/src/mui/shadows.ts          |  63 ++++
 libs/dhedge/theme/src/mui/shape.ts            |   7 +
 libs/dhedge/theme/src/mui/theme.ts            | 103 ++++++
 libs/dhedge/theme/src/mui/types.ts            | 348 ++++++++++++++++++
 libs/dhedge/theme/src/mui/typography.ts       | 186 ++++++++++
 libs/dhedge/theme/src/mui/utils.ts            |  30 ++
 libs/dhedge/theme/src/rainbowkit/index.ts     |  28 ++
 libs/dhedge/theme/tsconfig.json               |  24 ++
 libs/dhedge/theme/tsconfig.lib.json           |  22 ++
 libs/dhedge/theme/vite.config.ts              |  49 +++
 libs/dhedge/withdraw/.eslintrc.json           |  18 +
 libs/dhedge/withdraw/README.md                |   7 +
 libs/dhedge/withdraw/package.json             |  12 +
 libs/dhedge/withdraw/project.json             |  40 ++
 libs/dhedge/withdraw/src/index.ts             |   1 +
 libs/dhedge/withdraw/src/views/Withdraw.tsx   |   5 +
 libs/dhedge/withdraw/tsconfig.json            |  24 ++
 libs/dhedge/withdraw/tsconfig.lib.json        |  22 ++
 libs/dhedge/withdraw/vite.config.ts           |  49 +++
 package.json                                  |   2 +
 tsconfig.base.json                            |   2 +
 88 files changed, 3519 insertions(+)
 create mode 100644 apps/dhedge/.eslintrc.json
 create mode 100644 apps/dhedge/index.html
 create mode 100644 apps/dhedge/project.json
 create mode 100644 apps/dhedge/public/favicon.ico
 create mode 100644 apps/dhedge/src/App.tsx
 create mode 100644 apps/dhedge/src/clients/google-analytics.ts
 create mode 100644 apps/dhedge/src/clients/index.ts
 create mode 100644 apps/dhedge/src/clients/react-query.ts
 create mode 100644 apps/dhedge/src/clients/wagmi.ts
 create mode 100644 apps/dhedge/src/components/Footer.tsx
 create mode 100644 apps/dhedge/src/components/Topnav.tsx
 create mode 100644 apps/dhedge/src/main.tsx
 create mode 100644 apps/dhedge/tsconfig.app.json
 create mode 100644 apps/dhedge/tsconfig.json
 create mode 100644 apps/dhedge/tsconfig.spec.json
 create mode 100644 apps/dhedge/vite.config.ts
 create mode 100644 libs/dhedge/theme/.eslintrc.json
 create mode 100644 libs/dhedge/theme/README.md
 create mode 100644 libs/dhedge/theme/package.json
 create mode 100644 libs/dhedge/theme/project.json
 create mode 100644 libs/dhedge/theme/src/constants.ts
 create mode 100644 libs/dhedge/theme/src/index.ts
 create mode 100644 libs/dhedge/theme/src/mui/breakpoints.ts
 create mode 100644 libs/dhedge/theme/src/mui/components/Alert.tsx
 create mode 100644 libs/dhedge/theme/src/mui/components/AppBar.ts
 create mode 100644 libs/dhedge/theme/src/mui/components/Avatar.ts
 create mode 100644 libs/dhedge/theme/src/mui/components/Button.ts
 create mode 100644 libs/dhedge/theme/src/mui/components/ButtonBase.ts
 create mode 100644 libs/dhedge/theme/src/mui/components/ButtonGroup.ts
 create mode 100644 libs/dhedge/theme/src/mui/components/CSSBaseline.ts
 create mode 100644 libs/dhedge/theme/src/mui/components/Card.ts
 create mode 100644 libs/dhedge/theme/src/mui/components/CardHeader.ts
 create mode 100644 libs/dhedge/theme/src/mui/components/Checkbox.tsx
 create mode 100644 libs/dhedge/theme/src/mui/components/Chip.ts
 create mode 100644 libs/dhedge/theme/src/mui/components/Dialog.ts
 create mode 100644 libs/dhedge/theme/src/mui/components/DialogActions.ts
 create mode 100644 libs/dhedge/theme/src/mui/components/DialogContent.ts
 create mode 100644 libs/dhedge/theme/src/mui/components/DialogTitle.ts
 create mode 100644 libs/dhedge/theme/src/mui/components/Divider.ts
 create mode 100644 libs/dhedge/theme/src/mui/components/FormControl.ts
 create mode 100644 libs/dhedge/theme/src/mui/components/FormControlLabel.ts
 create mode 100644 libs/dhedge/theme/src/mui/components/FormGroup.ts
 create mode 100644 libs/dhedge/theme/src/mui/components/FormHelperText.ts
 create mode 100644 libs/dhedge/theme/src/mui/components/FormLabel.ts
 create mode 100644 libs/dhedge/theme/src/mui/components/InputBase.ts
 create mode 100644 libs/dhedge/theme/src/mui/components/InputLabel.ts
 create mode 100644 libs/dhedge/theme/src/mui/components/Link.ts
 create mode 100644 libs/dhedge/theme/src/mui/components/Menu.ts
 create mode 100644 libs/dhedge/theme/src/mui/components/MenuItem.ts
 create mode 100644 libs/dhedge/theme/src/mui/components/OutlinedInput.ts
 create mode 100644 libs/dhedge/theme/src/mui/components/Paper.ts
 create mode 100644 libs/dhedge/theme/src/mui/components/Radio.tsx
 create mode 100644 libs/dhedge/theme/src/mui/components/Select.ts
 create mode 100644 libs/dhedge/theme/src/mui/components/Tab.ts
 create mode 100644 libs/dhedge/theme/src/mui/components/TableCell.ts
 create mode 100644 libs/dhedge/theme/src/mui/components/TextField.ts
 create mode 100644 libs/dhedge/theme/src/mui/components/ToggleButton.ts
 create mode 100644 libs/dhedge/theme/src/mui/components/ToggleButtonGroup.ts
 create mode 100644 libs/dhedge/theme/src/mui/components/Tooltip.ts
 create mode 100644 libs/dhedge/theme/src/mui/components/Typography.ts
 create mode 100644 libs/dhedge/theme/src/mui/icons/check.svg
 create mode 100644 libs/dhedge/theme/src/mui/icons/indeterminate.svg
 create mode 100644 libs/dhedge/theme/src/mui/icons/index.tsx
 create mode 100644 libs/dhedge/theme/src/mui/icons/uncheck.svg
 create mode 100644 libs/dhedge/theme/src/mui/index.ts
 create mode 100644 libs/dhedge/theme/src/mui/mixins.ts
 create mode 100644 libs/dhedge/theme/src/mui/palette.ts
 create mode 100644 libs/dhedge/theme/src/mui/shadows.ts
 create mode 100644 libs/dhedge/theme/src/mui/shape.ts
 create mode 100644 libs/dhedge/theme/src/mui/theme.ts
 create mode 100644 libs/dhedge/theme/src/mui/types.ts
 create mode 100644 libs/dhedge/theme/src/mui/typography.ts
 create mode 100644 libs/dhedge/theme/src/mui/utils.ts
 create mode 100644 libs/dhedge/theme/src/rainbowkit/index.ts
 create mode 100644 libs/dhedge/theme/tsconfig.json
 create mode 100644 libs/dhedge/theme/tsconfig.lib.json
 create mode 100644 libs/dhedge/theme/vite.config.ts
 create mode 100644 libs/dhedge/withdraw/.eslintrc.json
 create mode 100644 libs/dhedge/withdraw/README.md
 create mode 100644 libs/dhedge/withdraw/package.json
 create mode 100644 libs/dhedge/withdraw/project.json
 create mode 100644 libs/dhedge/withdraw/src/index.ts
 create mode 100644 libs/dhedge/withdraw/src/views/Withdraw.tsx
 create mode 100644 libs/dhedge/withdraw/tsconfig.json
 create mode 100644 libs/dhedge/withdraw/tsconfig.lib.json
 create mode 100644 libs/dhedge/withdraw/vite.config.ts

diff --git a/apps/dhedge/.eslintrc.json b/apps/dhedge/.eslintrc.json
new file mode 100644
index 00000000..bd661168
--- /dev/null
+++ b/apps/dhedge/.eslintrc.json
@@ -0,0 +1,18 @@
+{
+  "extends": ["plugin:@nrwl/nx/react", "../../.eslintrc.base.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}
diff --git a/apps/dhedge/index.html b/apps/dhedge/index.html
new file mode 100644
index 00000000..c762c8ac
--- /dev/null
+++ b/apps/dhedge/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Dhedge</title>
+    <base href="/" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/apps/dhedge/project.json b/apps/dhedge/project.json
new file mode 100644
index 00000000..05571a83
--- /dev/null
+++ b/apps/dhedge/project.json
@@ -0,0 +1,99 @@
+{
+  "name": "dhedge",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "apps/dhedge/src",
+  "projectType": "application",
+  "targets": {
+    "build": {
+      "executor": "@nrwl/vite:build",
+      "outputs": ["{options.outputPath}"],
+      "defaultConfiguration": "production",
+      "options": {
+        "outputPath": "dist/apps/dhedge",
+        "dependsOn": ["^build", "i18n-compile"]
+      },
+      "configurations": {
+        "development": {
+          "mode": "development"
+        },
+        "production": {
+          "mode": "production"
+        }
+      }
+    },
+    "serve": {
+      "executor": "@nrwl/vite:dev-server",
+      "defaultConfiguration": "development",
+      "options": {
+        "buildTarget": "dhedge:build"
+      },
+      "configurations": {
+        "development": {
+          "buildTarget": "dhedge:build:development",
+          "hmr": true
+        },
+        "production": {
+          "buildTarget": "dhedge:build:production",
+          "hmr": false
+        }
+      }
+    },
+    "preview": {
+      "executor": "@nrwl/vite:preview-server",
+      "defaultConfiguration": "development",
+      "options": {
+        "buildTarget": "dhedge:build"
+      },
+      "configurations": {
+        "development": {
+          "buildTarget": "dhedge:build:development"
+        },
+        "production": {
+          "buildTarget": "dhedge:build:production"
+        }
+      }
+    },
+    "test": {
+      "executor": "@nrwl/vite:test",
+      "outputs": ["coverage/apps/dhedge"],
+      "options": {
+        "passWithNoTests": true,
+        "reportsDirectory": "../../coverage/apps/dhedge"
+      }
+    },
+    "lint": {
+      "executor": "@nrwl/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["apps/dhedge/**/*.{ts,tsx,js,jsx}"]
+      }
+    },
+    "i18n-extract": {
+      "executor": "nx:run-commands",
+      "options": {
+        "commands": [
+          "yarn run formatjs extract 'apps/dhedge/src/**/*.{ts,tsx}' --out-file i18n-extractions/apps-dhedge.json --id-interpolation-pattern '[sha512:contenthash:base64:6]'"
+        ]
+      }
+    },
+    "i18n-clear": {
+      "executor": "nx:run-commands",
+      "options": {
+        "commands": ["yarn rimraf i18n-extractions"]
+      }
+    },
+    "i18n-compile": {
+      "executor": "nx:run-commands",
+      "dependsOn": ["i18n-clear", "i18n-extract", "^i18n-extract"],
+      "options": {
+        "commands": [
+          "jq -rs 'reduce .[] as $item ({}; . * $item)' i18n-extractions/* > apps/dhedge/i18n/en.json",
+          "yarn run formatjs compile apps/dhedge/i18n/en.json --ast --out-file apps/dhedge/src/assets/lang/en.json",
+          "yarn run nx format:write --files apps/dhedge/src/assets/lang/*.json"
+        ],
+        "parallel": false
+      }
+    }
+  },
+  "tags": []
+}
diff --git a/apps/dhedge/public/favicon.ico b/apps/dhedge/public/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..317ebcb2336e0833a22dddf0ab287849f26fda57
GIT binary patch
literal 15086
zcmeI332;<p632UzfWZqabw#Bx7P_!_0dhki0VLs6ku&5D2}uYcfO5%@G2s;D7LY@f
zc(GokAnWR)DHUDuUROCpjmsH4pjZ`wkZ*te^4>U^%p|z7g|#(P)qFEA@4f!_@qOK2
z_lJl}!lhL!VT_U|uN7%8B2iKH??xhDa;*`g{yjTFWHvXn;2s{4R7kH|pKGdy(7z!K
zgftM+Ku7~24TLlh(!g)gz|foI94G^t2^IO$uvX$3(OR0<_5L2sB)lMAMy|+`xodJ{
z_Uh_1m)~h?a;2W{dmhM;u!YGo=)OdmId_B<%^V^{o<UMHeV`Og=_iGE^^rgN-XH8c
zcrSonhm1cBZ!ITAw2}V7o^`H|ik40(UF5*b;bPY1iFs&D4f>vI@y`7^g1_V9G}*f#
zNzA<oVrCB$Q*?(I_ibXP4UktS^^r?_?+^Ap7=Cnb(EW*on`_5Eu9uvb8!Jzxb`g^j
zEoNy(P#NAphQ^8mTQpjkC7Y1JEKU`3KQhc4A!g=KG1%Z+_pQ=17+(MDwc$@_BPT}I
zjelf*FFBSID`t2HG2{A(S({r!|7w#;sOaIb;$obLPn|>tvou}I!W1#{M^@ROc(BZ!
z+F!!_aR&Px3_reO(EW+TwlW~tv*2zr?iP7(d~a~yA|@*a89IUke+c472NXM0wiX{-
zl`UrZC^1XYyf%1u)-Y)jj9;MZ!SLfd2Hl?o|80Su%Z?To_=^g_Jt0oa#CT*tjx>BI
z16wec&AOWNK<#i0Qd=1O$fymLRoUR*%;h@*@v7}wApDl^w*h}!sYq%kw+DKDY)@&A
z@9$ULEB3qkR#85`lb8#WZw=@})#kQig9oqy^I$dj&k4jU&^2(M3q{n1AKeGUKPFbr
z1^<)aH;VsG@J|B&l>UtU#Ejv3GIqERzYgL@UOAWtW<{p#zy`WyJgpCy8$c_e%wYJL
zyGHRRx38)HyjU3y{-4z6)pzb>&Q1pR)B&u01F-|&Gx4EZWK$nkUkOI|(D4UHOXg_-
zw{OBf!oWQUn)Pe(=f=nt=zkmdjpO^o8ZZ9o_|4tW1ni+Un9iCW47*-ut$KQOww!;u
z`0q)$s6IZO!~9$e_P9X!hqLxu`fpcL|2f^I5d4*a@Dq28;@2271v_N+5HqYZ>x;&O
z05*7JT)mUe&%S0@UD)@&8SmQrMtsDfZT;fkdA!r(S=}Oz>iP)w=W508=Rc#nNn7ym
z1;42c|8($ALY8#a({%1#IXbWn9-Y|0eDY$_L&j{63?{?AH{);Ezcqf<!MFQ9x99b^
z@1DK4rAh7R(%7o_Ukrp_*B^iXAJs(~WJSwk+1;6+e)#eKWB7lW`oH?lRCGTU-%svF
zZa{1eHiz~4`%lFm`)1d&`Q<xTH!a_>ydD$@-B`Y3<%IIj7S7rK_N}je^=dEk%JQ4c
z!tBdTPE3Tse;oYF>cnrapWq*o)m47X1`~6@(!Y29#>-#8zm&LXrXa(3=7Z)ElaQqj
z-#0JJy3Fi(C#Rx(`=VXtJ63E2_bZGCz+QRa{W0e2(m3<b<R<WQnM~H@G~%P;$A5kX
zdr~m`<Zaga!@akqca}>sI?LOcUBx)~^YCqZ{XEPX)C>G>U4tfqeH8L(3|pQR*zbL1
zT9e~4Tb5p9_G}$y4t`i*4t_Mr9QYvL9C&Ah*}t`q*}S+VYh0M6GxTTSXI)hMpMpIq
zD1ImYqJLzbj0}~EpE-aH#VCH_udYEW#`P2zYmi&xSPs_{n6tBj=MY|-XrA;SGA_>y
zGtU$?HXm$gYj*!N)_nQ59%lQdXtQZS3*#PC-{iB_sm+ytD*7j`D*k(P&IH2GHT}Eh
z5697eQECVIGQAUe#eU2I!yI<zz;0~NQr|N^PTU%|61cC99Bv=_KdCmbW0yDoS&$NL
zmX1EpEE#=)nKLrdOzGz`6PQPeUwJD36mmpxeE`0zYQ<kQhbyqvzLfS-seXqK8MUG9
zLlxLyyuL#}xjn?4!rv0%QA-Z}Ik<a5n=IY4E@=+ED3w^9C}z%Zdk>&%0CP#>%6MWV
z@zS!p@+Y1i1b^QuuEF*1<Us0cJY(4nAF}4q=qekOvJQFo807!%A>3CuB<Ol`0^E7Z
zm%Qg1;_@p_?ztejY7aAu{Qn-^!+@VXn3b3498=%1e7}?I2TQ^o*He<VKf(OR$A_%>
zu69dve5k7&Wgb+^s|UB08Dr3u`h@yM0NTj4h7MnHo-4@xmyr7(*4$rpPwsCDZ@2be
zRz9V^GnV;;?^Lk%ynzq&K(Aix`mWmW`^152Hoy<pVuSh)79DeX%8W&6LDw72`#byI
zuiwcz>$CTYVehpD-S1-W^#k#{0^L`V6CN+<CFS_e7W_3E{FnMaufOZUZ|?(su|Y>E
z!w+xte;2vu4AmVNEFUOBmrBL>6MK@!O2*N|2=d|Y;oN&A&qv=qKn73lD<dYxNnd>D
zI(+oJAdgv>Yr}8(&@ZuAZE%XUXmX(U!N+Z_sjL<1vjy1R+1IeHt`79fnYdOL{$ci7
z%3f0A*;Zt@ED&Gjm|OFTYBDe%bbo*xXAQsFz+Q`fVBH!N2)kaxN8P$c>sp~QXnv>b
zwq=W3&Mtmih7xkR$YA)1Yi?avHNR6C99!u6fh=cL|KQ&PwF!n@ud^n(HNI<nwsH(x
z4qKM9iN6x;Git-Ge<QzeYkbrg?<<GKYW(VK;@<}TE9%0}y5!azL-V9+a#Y#me~G_7
z_y$7-P`)3H<9Cg?6G#?vr1r=#4jJ;1As-p?v4v7WW|z~i2L^g~=vqhvAq|8y5YoVz
z*MPA;B4>ImHD!h87!i*t?G|p0o+eelJ?B@A64_9%SBhNaJ64EvKgD&%LjLCYnNfc;
znj?%*p@*?dq#NqcQFmmX($wms@CSAr9#>hUR^=I+=<d%GUe;81{*2u{g^cHvbvMet
zq2G9w{o5J4+rJB|kH1xKEr1^d#X#P3T8;P-`h+wP(!lRV1LVP1Lc^g%o06y@-V_L6
z|LdjRj60+cXBkqdN2S;_lHZp*_b*D3i|<dAq12rcshK6-Jy4RVdtC4Q-G78<Kj;TY
z`wo@Xp1QRZ`QN9%Igij|bgX>0B)vvGX%T&#h$kmX*s=^M2E!@N9#m?LhMvz}YB+kd
zG~mbP|D(;{s_#;hsKK9lbVK&Lo734x7SIFJ9<NU=?g-!eQa_AcHCny_gVFO3=-?Ff
zpQ!;E+ZX-$+jXg8|7WNdWKr`tkx%U-6%4aR)Tn2E2!?mH{;IuaYG~T~e~tQ?w-)OE
zPW|o6Uu!aUe`l8Oy~y1R{-0{yNNcxwV92JHv^=wh9W0$_ZxbDS$2peXzVGq<4qx4$
zomY*&*0iVxQCs)&XP+Am{{`BU)INarGA2_)&ZdSk^|op@@Y(}^)ZXuX$RD&e2j7;^
zG=Kioa;ovC-VsBs;~V9#{ao!u<I@&~EHDJ>V_}2$@q?zm^7?*XH94w5Qae{7zOMUF
z^?%F%)c1Y)Q?Iy?I>kn<wOIXdo4@ulwHK&57|S*7*E_zrF3)A2E52%lFF*bMb!l%G
zy}qa;9}evE=KA)}jOrS348HHx%0F5%s4*N@{+9gIUXlNZB|rTz?W4}2#$2t3ivPX3
z;^uwd?pi$L&=(snEZ?=}lJcEvdLR7wt}*oM{;}o3)<4b5xYVk<BCnoLswTf}|6=yn
zO{sT$qO~)vo7wi?jQuw`_Me0u)ZZQ1b=2P*rZqIXUrRoE=(D-o%D3PDQTacMe%kl<
zgvuv8S5vbJvwBt9>w*8gYW#ok|2gdS=YYZLiD=CW|Nj;n^x!<jBV+M}EHEt_<tMvs
z2W)RP+<me6;Lp)!_m%->=S#iJ#`~Ld79+xXpVmUK^B(xO_vO!btA9y7w3L3-0j-y4
z?M-V{%z;JI`bk7yFDcP}OcCd*{Q9S5$iGA7*E1@tfkyjAi!;wP^O71cZ^Ep)qrQ)N
z#wqw0_HS;T7x3y|`P==i3hEwK%|>fZ)c&@kgKO1~5<5xBSk?iZV?KI6&i72H6S9A*
z=U(*e)EqEs?Oc04)V-~K5AUmh|62H4*`UAtItO$O(q5?6jj+K<YInKHn~#h06D6E4
zGY{ug$#47Kv+%ag8gORiMr412_5ZN7{xetf3<>^oD!04r=6#dsxp?~}{`?&sXn#q2
zGuY~7>O2=!u@@Kfu7q=W*4egu@qPMRM>(eyYyaIE<|j%d=iWNdGsx%c!902v#ngNg
z@#U-O_4xN$s_9?(`{>{>7~-6FgWpBpqXb`Ydc3OFL#&I}Irse9F_8R@4zSS*Y*o*B
zXL?6*Aw!AfkNCgcr#*yj&p3ZDe2y>v$>FUdKIy_2N~}6AbHc7gA3`6$g@1o|dE>vz
z4pl(j9;kyMsjaw}lO?(?Xg%4k!5%^<zlDDcygq_<+VnZ&Gf<7VJ+h6sSQqBwlV5;i
zCw{q${^Q$V`LF*641DyQ>t#@5n=WVc&JRa+XT$~#@rldv<HlfUj4u8F@xOCIpO6NA
zy#}i448i{`KGLeNxU7{aE~DpK>N3S1rEpU$;XgxVny7mki3<w%v}zUZDd^bHQ&8C5
zbEMEH-2)Zd6o`w~DKrp8LEbvW|DiWCr<+4vh%GJ2v8))B+*#`1mn3b-AEVjNSn-{>
z-Hh|jUCHrUXuLr!)`w>wgO0N%KTB-1di>cj(x3Ba<?I9X?CUltmc0Kh`u0bO`)SUz
zI`Zt(kjD0x$i3<j4=*8~D%HKjoCGVDSMdD5bnn34<pnTY=seGJdM@*6jf=!2>v`7v
z3G7EIbU$z>`Nad7Rk_&OT-W{;qg)-GXV-aJT#(o<Y^cxkn^`Yg6Fa`(`BTK_6MC*|
zK4(2Nm)J1vqV0R$o7U>zdmnA~Rq3GQ_3mby(>q6Ocb-RgTUhTN)))x>m&eD;$J5Bg
zo&DhY36Yg=J=$Z>t}RJ>o|@hAcwWzN#r(WJ52^g$lh^!63@hh+dR$&_dEGu&^CR*<
z!oFqSqO@>xZ*nC2oiOd0eS*F^IL~W-rsrO`J`ej{=ou_q^_(<$&-3f^<pOjU!=7&~
zXC+=DZ(jt~8+`R|WB7!1Jc_^TdE2d4ZXGA{9G&SoadMXW<Ql&A*O;WS@i_a$QF<>J
z&L^MSYWIe{&pYq&9eGaArA~*kA<MSpHuZ@k$zXI7$6|f&|Gj<JTB<KKxmBbwQL-^L
X*GBfq^a!*Sks)$E_17kl@BRM)`^nwN

literal 0
HcmV?d00001

diff --git a/apps/dhedge/src/App.tsx b/apps/dhedge/src/App.tsx
new file mode 100644
index 00000000..c2a4da05
--- /dev/null
+++ b/apps/dhedge/src/App.tsx
@@ -0,0 +1,34 @@
+import { Stack } from '@mui/material';
+
+import { Footer } from './components/Footer';
+import { Topnav } from './components/Topnav';
+import { Withdraw } from '@frontend/dhedge-withdraw';
+
+export const App = () => {
+  return (
+    <Stack
+      direction="column"
+      sx={{
+        width: 1,
+        height: 1,
+      }}
+    >
+      <Topnav />
+      <Stack
+        direction="column"
+        sx={(theme) => ({
+          width: 1,
+          height: 1,
+          pb: { xs: 2, md: 4 },
+          px: theme.mixins.paddings.page.paddingX,
+          minHeight: '84vh',
+        })}
+      >
+        <Withdraw />
+      </Stack>
+      <Footer
+        sx={(theme) => ({ py: 4, px: theme.mixins.paddings.page.paddingX })}
+      />
+    </Stack>
+  );
+};
diff --git a/apps/dhedge/src/clients/google-analytics.ts b/apps/dhedge/src/clients/google-analytics.ts
new file mode 100644
index 00000000..89fc0c89
--- /dev/null
+++ b/apps/dhedge/src/clients/google-analytics.ts
@@ -0,0 +1,12 @@
+import { initializeApp } from 'firebase/app';
+
+const firebaseConfig = Object.freeze({
+  apiKey: 'AIzaSyBi3nU0ysQmIqPHumwSaaUzxq8i9xOuP_c',
+  authDomain: 'apps-lts.firebaseapp.com',
+  projectId: 'apps-lts',
+  storageBucket: 'apps-lts.appspot.com',
+  messagingSenderId: '558241704832',
+  appId: '1:558241704832:web:baad7ec7c6061efdd32f65',
+  measurementId: 'G-R1530ER4M9',
+});
+export const firebaseApp = initializeApp(firebaseConfig);
diff --git a/apps/dhedge/src/clients/index.ts b/apps/dhedge/src/clients/index.ts
new file mode 100644
index 00000000..ab0c49a3
--- /dev/null
+++ b/apps/dhedge/src/clients/index.ts
@@ -0,0 +1,3 @@
+export * from './react-query';
+export * from './wagmi';
+export * from './google-analytics';
diff --git a/apps/dhedge/src/clients/react-query.ts b/apps/dhedge/src/clients/react-query.ts
new file mode 100644
index 00000000..7c5749d3
--- /dev/null
+++ b/apps/dhedge/src/clients/react-query.ts
@@ -0,0 +1,15 @@
+import { QueryClient } from '@tanstack/react-query';
+
+const DEFAULT_STALE_TIME = 0;
+const DEFAULT_CACHE_TIME = 1000 * 60 * 60 * 24; // 24 hours
+
+export const reactQueryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+      staleTime: DEFAULT_STALE_TIME,
+      cacheTime: DEFAULT_CACHE_TIME,
+      retry: false,
+    },
+  },
+});
diff --git a/apps/dhedge/src/clients/wagmi.ts b/apps/dhedge/src/clients/wagmi.ts
new file mode 100644
index 00000000..6c67a4e7
--- /dev/null
+++ b/apps/dhedge/src/clients/wagmi.ts
@@ -0,0 +1,75 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import '@rainbow-me/rainbowkit/styles.css';
+
+import { SafeConnector } from '@gnosis.pm/safe-apps-wagmi';
+import { connectorsForWallets } from '@rainbow-me/rainbowkit';
+import {
+  argentWallet,
+  braveWallet,
+  coinbaseWallet,
+  imTokenWallet,
+  injectedWallet,
+  metaMaskWallet,
+  rainbowWallet,
+  walletConnectWallet,
+} from '@rainbow-me/rainbowkit/wallets';
+import { configureChains, createClient } from 'wagmi';
+import { mainnet, optimism, polygon } from 'wagmi/chains';
+import { alchemyProvider } from 'wagmi/providers/alchemy';
+
+import type { Wallet } from '@rainbow-me/rainbowkit';
+import type { Chain, Connector } from 'wagmi';
+
+const POLLING_INTERVAL = 15_000;
+
+export const { chains, provider } = configureChains(
+  [mainnet],
+  [
+    alchemyProvider({ apiKey: process.env['NX_ALCHEMY_MAIN_API_KEY'] }),
+    alchemyProvider({ apiKey: process.env['NX_ALCHEMY_FALLBACK_API_KEY'] }),
+  ],
+  { pollingInterval: POLLING_INTERVAL },
+);
+
+const gnosisSafeWallet = ({ chains }: { chains: Chain[] }): Wallet => ({
+  id: 'safe',
+  name: 'Gnosis Safe',
+  iconUrl:
+    'https://raw.githubusercontent.com/safe-global/safe-react/dev/src/assets/logo.svg',
+  iconBackground: '#ffffff',
+  createConnector: () => ({
+    connector: new SafeConnector({ chains }) as Connector<any, any, any>,
+  }),
+});
+
+// Wallet Connect projectId https://cloud.walletconnect.com/app/project?uuid=aa89105e-0365-4b96-a7b2-c3cd7afacc5b
+const projectId = '702366804c7fa1aa184b4fb22e21c58c';
+
+const connectors = connectorsForWallets([
+  {
+    groupName: 'Recommended',
+    wallets: [
+      metaMaskWallet({ chains, shimDisconnect: true, projectId }),
+      // ledgerWallet({ chains, projectId }),
+      walletConnectWallet({ chains, projectId }),
+      coinbaseWallet({ appName: 'mStable', chains }),
+    ],
+  },
+  {
+    groupName: 'Others',
+    wallets: [
+      injectedWallet({ chains, shimDisconnect: true }),
+      gnosisSafeWallet({ chains }),
+      rainbowWallet({ chains, projectId }),
+      braveWallet({ chains, shimDisconnect: true }),
+      argentWallet({ chains, projectId }),
+      imTokenWallet({ chains, projectId }),
+    ],
+  },
+]);
+
+export const wagmiClient = createClient({
+  autoConnect: true,
+  connectors,
+  provider,
+});
diff --git a/apps/dhedge/src/components/Footer.tsx b/apps/dhedge/src/components/Footer.tsx
new file mode 100644
index 00000000..4b38ebc2
--- /dev/null
+++ b/apps/dhedge/src/components/Footer.tsx
@@ -0,0 +1,74 @@
+import {
+  DISCORD,
+  EMAIL,
+  GITHUB,
+  MEDIUM,
+  TWITTER,
+} from '@frontend/shared-constants';
+import { Discord, Email, Github, Twitter } from '@frontend/shared-icons';
+import { IconButton, Stack } from '@mui/material';
+import { MediumLogo } from 'phosphor-react';
+import { useIntl } from 'react-intl';
+
+import type { StackProps } from '@mui/material';
+
+export const Footer = (props: StackProps) => {
+  const intl = useIntl();
+
+  const socialIcons = [
+    {
+      title: intl.formatMessage({ defaultMessage: 'Github', id: 'Vn76qV' }),
+      icon: <Github />,
+      href: GITHUB,
+    },
+    {
+      title: intl.formatMessage({ defaultMessage: 'Discord', id: 'FvmV6q' }),
+      icon: <Discord />,
+      href: DISCORD,
+    },
+    {
+      title: intl.formatMessage({ defaultMessage: 'Twitter', id: '8ywLSf' }),
+      icon: <Twitter />,
+      href: TWITTER,
+    },
+    {
+      title: intl.formatMessage({ defaultMessage: 'Medium', id: 'ovJ26C' }),
+      icon: <MediumLogo size={24} weight="fill" />,
+      href: MEDIUM,
+    },
+    {
+      title: intl.formatMessage({ defaultMessage: 'Email', id: 'sy+pv5' }),
+      icon: <Email />,
+      href: EMAIL,
+    },
+  ];
+
+  return (
+    <Stack
+      direction={{ xs: 'column', md: 'row' }}
+      alignItems="center"
+      spacing={1.5}
+      {...props}
+    >
+      <Stack
+        direction="row"
+        flexGrow={1}
+        justifyContent="flex-end"
+        alignItems="center"
+        spacing={0.5}
+      >
+        {socialIcons.map((social) => (
+          <IconButton
+            color="secondary"
+            key={social.title}
+            href={social.href}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {social.icon}
+          </IconButton>
+        ))}
+      </Stack>
+    </Stack>
+  );
+};
diff --git a/apps/dhedge/src/components/Topnav.tsx b/apps/dhedge/src/components/Topnav.tsx
new file mode 100644
index 00000000..a9c6186c
--- /dev/null
+++ b/apps/dhedge/src/components/Topnav.tsx
@@ -0,0 +1,57 @@
+import { MSTABLE_LANDING_PAGE_URL } from '@frontend/shared-constants';
+import {
+  OpenAccountModalButton,
+  OpenNetworkModalButton,
+} from '@frontend/shared-providers';
+import {
+  alpha,
+  AppBar,
+  Button,
+  Stack,
+  useMediaQuery,
+  useTheme,
+} from '@mui/material';
+
+export const Topnav = () => {
+  const theme = useTheme();
+  const wide = useMediaQuery(theme.breakpoints.up('sm'));
+
+  return (
+    <AppBar position="sticky" color="transparent">
+      <Stack
+        direction="row"
+        sx={{
+          width: 1,
+          display: 'flex',
+          alignItems: 'stretch',
+          py: 1,
+          px: (theme) => theme.mixins.paddings.page.paddingX,
+          borderBottom: (theme) => `1px solid ${theme.palette.divider}`,
+          backgroundColor: (theme) =>
+            alpha(theme.palette.background.default, 0.5),
+          backdropFilter: 'blur(20px)',
+        }}
+      >
+        <Button
+          variant="text"
+          color="inherit"
+          href={MSTABLE_LANDING_PAGE_URL}
+          rel="noopener noreferrer"
+          sx={{ ml: -2 }}
+        >
+          Button
+        </Button>
+        <Stack
+          flexGrow={1}
+          direction="row"
+          justifyContent="flex-end"
+          alignItems="center"
+          spacing={2}
+        >
+          <OpenAccountModalButton sx={{ maxWidth: 180, maxHeight: 36 }} />
+          <OpenNetworkModalButton sx={{ height: 36, width: 36 }} />
+        </Stack>
+      </Stack>
+    </AppBar>
+  );
+};
diff --git a/apps/dhedge/src/main.tsx b/apps/dhedge/src/main.tsx
new file mode 100644
index 00000000..eaddb3b5
--- /dev/null
+++ b/apps/dhedge/src/main.tsx
@@ -0,0 +1,54 @@
+import { StrictMode } from 'react';
+import * as ReactDOM from 'react-dom/client';
+
+import {
+  dark,
+  light,
+  rbkDarkTheme,
+  rbkLightTheme,
+} from '@frontend/dhedge-theme';
+import {
+  GoogleAnalyticsProvider,
+  I18nProvider,
+  ModalsProvider,
+  NotificationsProvider,
+  ThemeProvider,
+  WagmiProvider,
+  WalletGoogleAnalyticsProvider,
+} from '@frontend/shared-providers';
+import { composeContexts } from '@frontend/shared-utils';
+import { QueryClientProvider } from '@tanstack/react-query';
+import { setAutoFreeze } from 'immer';
+
+import { App } from './App';
+import { chains, firebaseApp, reactQueryClient, wagmiClient } from './clients';
+
+// https://github.com/dai-shi/proxy-compare/pull/8
+setAutoFreeze(false);
+
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement,
+);
+root.render(
+  composeContexts(
+    [
+      [StrictMode],
+      [GoogleAnalyticsProvider, { client: firebaseApp }],
+      [QueryClientProvider, { client: reactQueryClient }],
+      [I18nProvider],
+      [ThemeProvider, { themes: { light, dark } }],
+      [NotificationsProvider],
+      [
+        WagmiProvider,
+        {
+          client: wagmiClient,
+          chains: chains,
+          rbkThemes: { dark: rbkDarkTheme, light: rbkLightTheme },
+        },
+      ],
+      [WalletGoogleAnalyticsProvider],
+      [ModalsProvider],
+    ],
+    <App />,
+  ),
+);
diff --git a/apps/dhedge/tsconfig.app.json b/apps/dhedge/tsconfig.app.json
new file mode 100644
index 00000000..682de515
--- /dev/null
+++ b/apps/dhedge/tsconfig.app.json
@@ -0,0 +1,23 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": ["node", "vite/client"]
+  },
+  "files": [
+    "../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
+    "../../node_modules/@nrwl/react/typings/image.d.ts",
+    "../../libs/dhedge/theme/src/mui/types.ts"
+  ],
+  "exclude": [
+    "src/**/*.spec.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.js",
+    "src/**/*.test.js",
+    "src/**/*.spec.jsx",
+    "src/**/*.test.jsx"
+  ],
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
+}
diff --git a/apps/dhedge/tsconfig.json b/apps/dhedge/tsconfig.json
new file mode 100644
index 00000000..a7797ff8
--- /dev/null
+++ b/apps/dhedge/tsconfig.json
@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "jsx": "react-jsx",
+    "jsxImportSource": "@emotion/react",
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitOverride": true,
+    "noImplicitReturns": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "resolveJsonModule": true,
+    "strict": false
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../../tsconfig.base.json"
+}
diff --git a/apps/dhedge/tsconfig.spec.json b/apps/dhedge/tsconfig.spec.json
new file mode 100644
index 00000000..b784f1c9
--- /dev/null
+++ b/apps/dhedge/tsconfig.spec.json
@@ -0,0 +1,23 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": ["vitest/globals", "vitest/importMeta", "vite/client", "node"]
+  },
+  "include": [
+    "vite.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ],
+  "files": [
+    "../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
+    "../../node_modules/@nrwl/react/typings/image.d.ts"
+  ]
+}
diff --git a/apps/dhedge/vite.config.ts b/apps/dhedge/vite.config.ts
new file mode 100644
index 00000000..3721ad6b
--- /dev/null
+++ b/apps/dhedge/vite.config.ts
@@ -0,0 +1,63 @@
+/// <reference types="vitest" />
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import viteTsConfigPaths from 'vite-tsconfig-paths';
+import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill';
+import rollupNodePolyFill from 'rollup-plugin-node-polyfills';
+import svgr from 'vite-plugin-svgr';
+
+export default defineConfig({
+  cacheDir: '../../node_modules/.vite/dhedge',
+
+  server: {
+    port: 4202,
+    host: 'localhost',
+  },
+
+  preview: {
+    port: 4302,
+    host: 'localhost',
+  },
+
+  define: {
+    'process.env': Object.entries(process.env).reduce(
+      (acc, [key, value]) => ({
+        ...acc,
+        ...((key.startsWith('NX') || ['NODE_ENV'].includes(key)) && {
+          [key]: value,
+        }),
+      }),
+      {},
+    ),
+  },
+
+  optimizeDeps: {
+    esbuildOptions: {
+      define: {
+        global: 'globalThis',
+      },
+      plugins: [
+        NodeGlobalsPolyfillPlugin({
+          process: true,
+          buffer: true,
+        }),
+      ],
+    },
+  },
+
+  build: {
+    chunkSizeWarningLimit: 2500,
+    rollupOptions: {
+      plugins: [rollupNodePolyFill()],
+    },
+  },
+
+  plugins: [
+    svgr(),
+    react(),
+    viteTsConfigPaths({
+      root: '../../',
+      projects: ['tsconfig.base.json'],
+    }),
+  ],
+});
diff --git a/libs/dhedge/theme/.eslintrc.json b/libs/dhedge/theme/.eslintrc.json
new file mode 100644
index 00000000..df3772fb
--- /dev/null
+++ b/libs/dhedge/theme/.eslintrc.json
@@ -0,0 +1,18 @@
+{
+  "extends": ["plugin:@nrwl/nx/react", "../../../.eslintrc.base.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}
diff --git a/libs/dhedge/theme/README.md b/libs/dhedge/theme/README.md
new file mode 100644
index 00000000..aa94bcba
--- /dev/null
+++ b/libs/dhedge/theme/README.md
@@ -0,0 +1,7 @@
+# dhedge-theme
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test dhedge-theme` to execute the unit tests via [Vitest](https://vitest.dev/).
diff --git a/libs/dhedge/theme/package.json b/libs/dhedge/theme/package.json
new file mode 100644
index 00000000..80fc0551
--- /dev/null
+++ b/libs/dhedge/theme/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "@frontend/dhedge-theme",
+  "version": "0.0.1",
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./index.mjs",
+      "require": "./index.js"
+    }
+  }
+}
diff --git a/libs/dhedge/theme/project.json b/libs/dhedge/theme/project.json
new file mode 100644
index 00000000..03200f67
--- /dev/null
+++ b/libs/dhedge/theme/project.json
@@ -0,0 +1,40 @@
+{
+  "name": "dhedge-theme",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/dhedge/theme/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "lint": {
+      "executor": "@nrwl/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["libs/dhedge/theme/**/*.{ts,tsx,js,jsx}"]
+      }
+    },
+    "build": {
+      "executor": "@nrwl/vite:build",
+      "outputs": ["{options.outputPath}"],
+      "defaultConfiguration": "production",
+      "options": {
+        "outputPath": "dist/libs/dhedge/theme"
+      },
+      "configurations": {
+        "development": {
+          "mode": "development"
+        },
+        "production": {
+          "mode": "production"
+        }
+      }
+    },
+    "i18n-extract": {
+      "executor": "nx:run-commands",
+      "options": {
+        "commands": [
+          "yarn run formatjs extract 'libs/dhedge/theme/src/**/*.{ts,tsx}' --out-file i18n-extractions/libs-dhedge-theme.json --id-interpolation-pattern '[sha512:contenthash:base64:6]'"
+        ]
+      }
+    }
+  }
+}
diff --git a/libs/dhedge/theme/src/constants.ts b/libs/dhedge/theme/src/constants.ts
new file mode 100644
index 00000000..cf55842f
--- /dev/null
+++ b/libs/dhedge/theme/src/constants.ts
@@ -0,0 +1,110 @@
+export const colors = {
+  black: '#000',
+  blue01: '#587ff1',
+  blue02: '#2F5FEE',
+  blue03: '#2042A6',
+  green01: '#7effa4',
+  green02: '#45D074',
+  green03: '#009e47',
+  black50: '#F8FAFF',
+  black100: '#EAEBFF',
+  black200: '#DEDFFF',
+  black300: '#CCCDF4',
+  black400: '#A7A9CE',
+  black500: '#8688AC',
+  black600: '#5E6183',
+  black700: '#4B4E6E',
+  black800: '#2C304E',
+  black900: '#0A102C',
+  pink01: '#ffbaff',
+  pink02: '#FB88D7',
+  pink03: '#c657a5',
+  purple01: '#d1c6ff',
+  purple02: '#9D95FF',
+  purple03: '#6a67cb',
+  red01: '#ff8d86',
+  red02: '#FF5959',
+  red03: '#c61e30',
+  skyBlue01: '#91ffff',
+  skyBlue02: '#55D5FF',
+  skyBlue03: '#00a4cc',
+  white: '#FFF',
+  yellow01: '#fff6a1',
+  yellow02: '#FAC371',
+  yellow03: '#c49343',
+
+  // Off palette
+  coolBlue01: '#92C7FF',
+  coolBlue02: '#4AA1FF',
+  coolBlue03: '#2C6199',
+  coolMint: '#85F2BE',
+  darkBlue01: '#1E437C',
+  darkBlue02: '#1B3C70',
+  darkBlue03: '#183663',
+  darkBlue04: '#152F57',
+  darkBlue05: '#12284B',
+  darkBlue06: '#0C1B32',
+  darkBlue07: '#091426',
+  darkBlue08: '#060E19',
+  darkBlue09: '#03070D',
+  darkBlue10: '#000001',
+  gold01: '#FFCE7B',
+  gold02: '#FFB334',
+  gold03: '#BF8627',
+  lightGrey01: '#EBEBEB',
+  lightGrey02: '#D9D9D9',
+  lightGrey03: '#B5B5B5',
+  lightGrey04: '#929292',
+  darkGrey01: '#5d6470',
+  darkGrey02: '#494e57',
+  darkGrey03: '#292c31',
+  darkGrey04: '#1e2024',
+  offBlack: '#25272D',
+  offBlackAccent: '#3F434D',
+  orange01: '#FD7600',
+  orange02: '#CA5E00',
+  orange03: '#B15200',
+  squidInk01: '#11479e',
+  squidInk02: '#0d3678',
+  squidInk03: '#092552',
+  squidInk04: '#05142C',
+};
+
+export const fontWeights = {
+  regular: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700,
+  extrabold: 800,
+};
+
+export const fontSizes = {
+  xs: 12,
+  s: 14,
+  m: 16,
+  l: 18,
+  xl: 20,
+  xxl: 24,
+};
+
+export const lineHeights = {
+  xs: '14px',
+  s: '16px',
+  m: '20px',
+  l: '24px',
+  xl: '28px',
+  xxl: '36px',
+};
+
+export const letterSpacings = {
+  short: '0.00714em',
+  normal: 'normal',
+  space: '0.08333em',
+};
+
+export const fontFamilies = {
+  main: ['Plus Jakarta SansVariable', 'Plus Jakarta Sans', 'sans-serif'].join(
+    ',',
+  ),
+  code: ['Red Hat MonoVariable', 'Red Hat Mono', 'monospace'].join(','),
+};
diff --git a/libs/dhedge/theme/src/index.ts b/libs/dhedge/theme/src/index.ts
new file mode 100644
index 00000000..16ef5de4
--- /dev/null
+++ b/libs/dhedge/theme/src/index.ts
@@ -0,0 +1,2 @@
+export * from './mui';
+export * from './rainbowkit';
diff --git a/libs/dhedge/theme/src/mui/breakpoints.ts b/libs/dhedge/theme/src/mui/breakpoints.ts
new file mode 100644
index 00000000..774c2066
--- /dev/null
+++ b/libs/dhedge/theme/src/mui/breakpoints.ts
@@ -0,0 +1,13 @@
+import type { ThemeOptions } from '@mui/system';
+
+export const breakpointsOptions: ThemeOptions = {
+  breakpoints: {
+    values: {
+      xs: 0,
+      sm: 600,
+      md: 900,
+      lg: 1400,
+      xl: 1650,
+    },
+  },
+};
diff --git a/libs/dhedge/theme/src/mui/components/Alert.tsx b/libs/dhedge/theme/src/mui/components/Alert.tsx
new file mode 100644
index 00000000..2d6d7649
--- /dev/null
+++ b/libs/dhedge/theme/src/mui/components/Alert.tsx
@@ -0,0 +1,107 @@
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import InfoIcon from '@mui/icons-material/InfoRounded';
+import ReportIcon from '@mui/icons-material/ReportRounded';
+import WarningIcon from '@mui/icons-material/WarningRounded';
+import { lighten } from '@mui/material';
+
+import type { Theme, ThemeOptions } from '@mui/material';
+
+export const getAlert = (base: Theme): ThemeOptions => ({
+  components: {
+    MuiAlertTitle: {
+      styleOverrides: {
+        root: {
+          ...base.typography.buttonLarge,
+          marginTop: 0,
+          marginBottom: 0,
+        },
+      },
+    },
+    MuiAlert: {
+      defaultProps: {
+        variant: 'standard',
+        iconMapping: {
+          info: <InfoIcon />,
+          error: <ReportIcon />,
+          success: <CheckCircleIcon />,
+          warning: <WarningIcon />,
+        },
+      },
+      styleOverrides: {
+        root: {
+          flex: 1,
+          borderRadius: '8px',
+          padding: base.spacing(2),
+
+          '.MuiAlert-icon': {
+            width: base.spacing(2.5),
+            height: base.spacing(2.5),
+            padding: 0,
+            marginRight: base.spacing(2),
+          },
+          '.MuiAlert-message': {
+            overflow: 'hidden',
+            padding: 0,
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+          },
+        },
+        action: {
+          paddingTop: 0,
+          '.MuiIconButton-root': {
+            margin: base.spacing(-0.5),
+          },
+        },
+        standard: {
+          color:
+            base.palette.mode === 'light'
+              ? base.palette.text.primary
+              : base.palette.grey[900],
+        },
+        standardInfo: {
+          backgroundColor: lighten(base.palette.info.main, 0.8),
+          '.MuiAlert-icon': {
+            color: base.palette.info.main,
+          },
+        },
+        standardError: {
+          backgroundColor: lighten(base.palette.error.main, 0.8),
+          '.MuiAlert-icon': {
+            color: base.palette.error.main,
+          },
+        },
+        standardSuccess: {
+          backgroundColor: lighten(base.palette.success.main, 0.8),
+          '.MuiAlert-icon': {
+            color: base.palette.success.main,
+          },
+        },
+        standardWarning: {
+          backgroundColor: lighten(base.palette.warning.main, 0.8),
+          '.MuiAlert-icon': {
+            color: base.palette.warning.main,
+          },
+        },
+        filled: {
+          color: base.palette.common.white,
+          '.MuiAlert-icon': {
+            color: base.palette.common.white,
+          },
+        },
+        filledInfo: {
+          backgroundColor: base.palette.info.main,
+        },
+        filledError: {
+          backgroundColor: base.palette.error.main,
+        },
+        filledSuccess: {
+          backgroundColor: base.palette.success.main,
+        },
+        filledWarning: {
+          backgroundColor: base.palette.warning.main,
+        },
+      },
+    },
+  },
+});
diff --git a/libs/dhedge/theme/src/mui/components/AppBar.ts b/libs/dhedge/theme/src/mui/components/AppBar.ts
new file mode 100644
index 00000000..a9c8ddcc
--- /dev/null
+++ b/libs/dhedge/theme/src/mui/components/AppBar.ts
@@ -0,0 +1,29 @@
+import type { Theme, ThemeOptions } from '@mui/material';
+
+export const getAppBar = (base: Theme): ThemeOptions => ({
+  components: {
+    MuiAppBar: {
+      defaultProps: {
+        color: 'default',
+        elevation: 0,
+      },
+      styleOverrides: {
+        root: {
+          '.MuiToolbar-root': {
+            minHeight: base.mixins.toolbar.minHeight,
+            [base.breakpoints.up('lg')]: {
+              padding: base.spacing(1, 4),
+            },
+            [base.breakpoints.down('lg')]: {
+              padding: base.spacing(1, 2.5),
+            },
+          },
+        },
+        colorDefault: {
+          color: base.palette.text.primary,
+          backgroundColor: base.palette.background.default,
+        },
+      },
+    },
+  },
+});
diff --git a/libs/dhedge/theme/src/mui/components/Avatar.ts b/libs/dhedge/theme/src/mui/components/Avatar.ts
new file mode 100644
index 00000000..7d317725
--- /dev/null
+++ b/libs/dhedge/theme/src/mui/components/Avatar.ts
@@ -0,0 +1,33 @@
+import type { Theme, ThemeOptions } from '@mui/material';
+
+export const getAvatar = (base: Theme): ThemeOptions => ({
+  components: {
+    MuiAvatar: {
+      styleOverrides: {
+        root: {
+          width: 24,
+          height: 24,
+          fontSize: 18,
+          '.MuiSvgIcon-root': {
+            width: 16,
+            height: 16,
+            color:
+              base.palette.mode === 'light'
+                ? base.palette.grey[900]
+                : base.palette.grey[50],
+          },
+        },
+        colorDefault: {
+          color:
+            base.palette.mode === 'light'
+              ? base.palette.grey[900]
+              : base.palette.grey[50],
+          backgroundColor:
+            base.palette.mode === 'light'
+              ? base.palette.grey[50]
+              : base.palette.grey[900],
+        },
+      },
+    },
+  },
+});
diff --git a/libs/dhedge/theme/src/mui/components/Button.ts b/libs/dhedge/theme/src/mui/components/Button.ts
new file mode 100644
index 00000000..cfd8e2b5
--- /dev/null
+++ b/libs/dhedge/theme/src/mui/components/Button.ts
@@ -0,0 +1,112 @@
+import type { Theme, ThemeOptions } from '@mui/material';
+
+export const getButton = (base: Theme): ThemeOptions => ({
+  components: {
+    MuiButton: {
+      defaultProps: {
+        disableElevation: true,
+        variant: 'contained',
+      },
+      styleOverrides: {
+        root: {
+          textTransform: 'none',
+        },
+        outlinedSecondary: {
+          borderColor: base.palette.divider,
+          color: base.palette.text.primary,
+        },
+
+        containedPrimary: {
+          backgroundSize: '200% 200%',
+          backgroundImage: `linear-gradient(135deg, ${
+            base.palette.primary.main
+          } 0%, ${base.palette.primary.main} 51%, ${
+            base.palette.mode === 'light'
+              ? base.palette.primary.dark
+              : base.palette.primary.light
+          } 100%)`,
+          transition: 'all .2s ease',
+          ':hover': {
+            backgroundPosition: '100% 100%',
+          },
+          svg: {
+            color: base.palette.primary.contrastText,
+          },
+          '&.Mui-disabled': {
+            backgroundImage: 'none',
+            color: base.palette.text.disabled,
+            backgroundColor: base.palette.action.disabledBackground,
+            svg: {
+              color: base.palette.text.disabled,
+            },
+          },
+        },
+
+        containedSecondary: {
+          color: base.palette.text.primary,
+          backgroundColor:
+            base.palette.mode === 'light'
+              ? base.palette.grey[100]
+              : base.palette.grey[800],
+          ':hover': {
+            backgroundColor:
+              base.palette.mode === 'light'
+                ? base.palette.grey[200]
+                : base.palette.grey[700],
+          },
+          svg: {
+            color: base.palette.text.primary,
+          },
+          '&.Mui-disabled': {
+            color: base.palette.text.disabled,
+            backgroundColor: base.palette.action.disabledBackground,
+            svg: {
+              color: base.palette.text.disabled,
+            },
+          },
+        },
+
+        text: {
+          color: base.palette.text.primary,
+          ':hover': {
+            color: base.palette.text.primary,
+          },
+          svg: {
+            color: base.palette.text.primary,
+            ':hover': {
+              color: base.palette.text.primary,
+            },
+          },
+          '&.Mui-disabled': {
+            color: base.palette.text.disabled,
+            svg: {
+              color: base.palette.text.disabled,
+            },
+          },
+        },
+
+        sizeSmall: {
+          ...base.typography.buttonSmall,
+          padding: base.spacing(1, 1.5),
+          borderRadius: '8px',
+          minHeight: 34,
+          minWidth: 34,
+        },
+        sizeMedium: {
+          ...base.typography.buttonMedium,
+          padding: base.spacing(1.5, 2),
+          borderRadius: '10px',
+          minHeight: 40,
+          minWidth: 40,
+        },
+        sizeLarge: {
+          ...base.typography.buttonLarge,
+          padding: base.spacing(2, 2.5),
+          borderRadius: '12px',
+          minHeight: 46,
+          minWidth: 46,
+        },
+      },
+    },
+  },
+});
diff --git a/libs/dhedge/theme/src/mui/components/ButtonBase.ts b/libs/dhedge/theme/src/mui/components/ButtonBase.ts
new file mode 100644
index 00000000..2202671e
--- /dev/null
+++ b/libs/dhedge/theme/src/mui/components/ButtonBase.ts
@@ -0,0 +1,12 @@
+import type { Theme, ThemeOptions } from '@mui/material';
+
+export const getButtonBase = (base: Theme): ThemeOptions => ({
+  components: {
+    MuiButtonBase: {
+      defaultProps: {
+        disableRipple: true,
+        disableTouchRipple: true,
+      },
+    },
+  },
+});
diff --git a/libs/dhedge/theme/src/mui/components/ButtonGroup.ts b/libs/dhedge/theme/src/mui/components/ButtonGroup.ts
new file mode 100644
index 00000000..4abd8f23
--- /dev/null
+++ b/libs/dhedge/theme/src/mui/components/ButtonGroup.ts
@@ -0,0 +1,71 @@
+import type { Theme, ThemeOptions } from '@mui/material';
+
+export const getButtonGroup = (base: Theme): ThemeOptions => ({
+  components: {
+    MuiButtonGroup: {
+      defaultProps: {
+        variant: 'outlined',
+        disableElevation: true,
+      },
+      styleOverrides: {
+        root: {
+          borderWidth: 2,
+        },
+        groupedOutlined: {
+          color:
+            base.palette.mode === 'light'
+              ? base.palette.grey[600]
+              : base.palette.grey[500],
+          borderColor:
+            base.palette.mode === 'light'
+              ? base.palette.grey[100]
+              : base.palette.grey[800],
+          svg: {
+            color:
+              base.palette.mode === 'light'
+                ? base.palette.grey[600]
+                : base.palette.grey[500],
+          },
+          '&:hover': {
+            backgroundColor:
+              base.palette.mode === 'light'
+                ? base.palette.grey[200]
+                : base.palette.grey[700],
+            borderColor:
+              base.palette.mode === 'light'
+                ? base.palette.grey[100]
+                : base.palette.grey[800],
+          },
+          '&.Mui-selected': {
+            backgroundColor:
+              base.palette.mode === 'light'
+                ? base.palette.grey[100]
+                : base.palette.grey[800],
+            borderColor:
+              base.palette.mode === 'light'
+                ? base.palette.grey[100]
+                : base.palette.grey[800],
+            '&:hover': {
+              backgroundColor:
+                base.palette.mode === 'light'
+                  ? base.palette.grey[200]
+                  : base.palette.grey[700],
+              borderColor:
+                base.palette.mode === 'light'
+                  ? base.palette.grey[100]
+                  : base.palette.grey[800],
+            },
+          },
+          '&.Mui-disabled': {
+            color: base.palette.text.disabled,
+            backgroundColor: base.palette.action.disabledBackground,
+            borderColor: base.palette.action.disabledBackground,
+            svg: {
+              color: base.palette.text.disabled,
+            },
+          },
+        },
+      },
+    },
+  },
+});
diff --git a/libs/dhedge/theme/src/mui/components/CSSBaseline.ts b/libs/dhedge/theme/src/mui/components/CSSBaseline.ts
new file mode 100644
index 00000000..791104a8
--- /dev/null
+++ b/libs/dhedge/theme/src/mui/components/CSSBaseline.ts
@@ -0,0 +1,31 @@
+import type { Theme, ThemeOptions } from '@mui/material';
+
+export const getCSSBaseline = (base: Theme): ThemeOptions => ({
+  components: {
+    MuiCssBaseline: {
+      styleOverrides: `
+          body {
+            font-family: ${base.typography.fontFamily};
+            font-weight: ${base.typography.body1.fontWeight};
+            font-size: ${base.typography.body1.fontSize}px;
+            line-height: ${base.typography.body1.lineHeight};
+            letter-spacing: ${base.typography.body1.letterSpacing};
+            color: ${base.palette.text.primary};
+            background-color: ${base.palette.background.default};
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
+            text-rendering: optimizeLegibility;
+          }
+
+          input[type=number] {
+            -moz-appearance: textfield;
+          }
+
+          input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
+            -webkit-appearance: none;
+            margin: 0;
+          }
+        `,
+    },
+  },
+});
diff --git a/libs/dhedge/theme/src/mui/components/Card.ts b/libs/dhedge/theme/src/mui/components/Card.ts
new file mode 100644
index 00000000..2a6efdbf
--- /dev/null
+++ b/libs/dhedge/theme/src/mui/components/Card.ts
@@ -0,0 +1,16 @@
+import type { Theme, ThemeOptions } from '@mui/material';
+
+export const getCard = (base: Theme): ThemeOptions => ({
+  components: {
+    MuiCard: {
+      defaultProps: {
+        variant: 'outlined',
+      },
+      styleOverrides: {
+        root: {
+          boxShadow: base.shadows[1],
+        },
+      },
+    },
+  },
+});
diff --git a/libs/dhedge/theme/src/mui/components/CardHeader.ts b/libs/dhedge/theme/src/mui/components/CardHeader.ts
new file mode 100644
index 00000000..0cd00101
--- /dev/null
+++ b/libs/dhedge/theme/src/mui/components/CardHeader.ts
@@ -0,0 +1,13 @@
+import type { Theme, ThemeOptions } from '@mui/material';
+
+export const getCardHeader = (base: Theme): ThemeOptions => ({
+  components: {
+    MuiCardHeader: {
+      defaultProps: {
+        titleTypographyProps: {
+          variant: 'h3',
+        },
+      },
+    },
+  },
+});
diff --git a/libs/dhedge/theme/src/mui/components/Checkbox.tsx b/libs/dhedge/theme/src/mui/components/Checkbox.tsx
new file mode 100644
index 00000000..e2368602
--- /dev/null
+++ b/libs/dhedge/theme/src/mui/components/Checkbox.tsx
@@ -0,0 +1,23 @@
+import { Check, Indeterminate, Uncheck } from '../icons';
+
+import type { Theme, ThemeOptions } from '@mui/material';
+
+export const getCheckbox = (base: Theme): ThemeOptions => ({
+  components: {
+    MuiCheckbox: {
+      defaultProps: {
+        inputProps: {
+          'aria-label': 'checkbox',
+        },
+        icon: <Uncheck />,
+        checkedIcon: <Check />,
+        indeterminateIcon: <Indeterminate />,
+      },
+      styleOverrides: {
+        root: {
+          padding: '8px',
+        },
+      },
+    },
+  },
+});
diff --git a/libs/dhedge/theme/src/mui/components/Chip.ts b/libs/dhedge/theme/src/mui/components/Chip.ts
new file mode 100644
index 00000000..e3fb760c
--- /dev/null
+++ b/libs/dhedge/theme/src/mui/components/Chip.ts
@@ -0,0 +1,107 @@
+import type { Theme, ThemeOptions } from '@mui/material';
+
+export const getChip = (base: Theme): ThemeOptions => ({
+  components: {
+    MuiChip: {
+      defaultProps: {
+        variant: 'filled',
+        color: 'primary',
+        size: 'small',
+      },
+      styleOverrides: {
+        root: {
+          '.MuiChip-icon': {
+            marginLeft: 0,
+            marginRight: base.spacing(0.5),
+          },
+          '.MuiChip-label': {
+            paddingLeft: 0,
+            paddingRight: 0,
+          },
+          '&.MuiChip-sizeLarge': {
+            padding: base.spacing(1.25),
+            fontSize: base.typography.buttonLarge.fontSize,
+            fontWeight: base.typography.fontWeightMedium,
+            height: base.spacing(4.5),
+            borderRadius: base.spacing(2.25),
+            '.MuiChip-icon': {
+              fontSize: base.typography.buttonLarge.fontSize,
+            },
+          },
+        },
+        colorPrimary: {
+          background:
+            base.palette.mode === 'light'
+              ? base.palette.grey[300]
+              : base.palette.grey[600],
+          color: base.palette.secondary.main,
+          '&.MuiChip-clickable': {
+            ':hover': {
+              color: base.palette.common.white,
+              backgroundColor:
+                base.palette.mode === 'light'
+                  ? base.palette.grey[500]
+                  : base.palette.grey[800],
+            },
+          },
+          '&.Mui-active': {
+            borderColor: base.palette.primary.main,
+            borderWidth: 1,
+            borderStyle: 'solid',
+          },
+        },
+        colorSecondary: {
+          background: base.palette.primary.main,
+          color: base.palette.common.white,
+          '&.MuiChip-clickable': {
+            ':hover': {
+              backgroundColor: base.palette.primary.dark,
+              color: base.palette.common.white + ' !important',
+            },
+          },
+          '&.Mui-active': {
+            borderColor: base.palette.primary.main,
+            borderWidth: 1,
+            borderStyle: 'solid',
+            backgroundColor: 'rgba(47, 95, 238, 0.2)',
+            color: base.palette.primary.main,
+          },
+        },
+        outlined: {
+          borderColor:
+            base.palette.mode === 'light'
+              ? base.palette.grey[300]
+              : base.palette.grey[600],
+          borderWidth: 1,
+          borderStyle: 'solid',
+          background: 'transparent',
+          ':hover': {
+            background:
+              (base.palette.mode === 'light'
+                ? base.palette.grey[300]
+                : base.palette.grey[600]) + ' !important',
+            color: base.palette.secondary.main + ' !important',
+          },
+        },
+        sizeMedium: {
+          padding: base.spacing(1),
+          fontSize: base.typography.buttonMedium.fontSize,
+          fontWeight: base.typography.fontWeightMedium,
+          height: base.spacing(3.75),
+          '.MuiChip-icon': {
+            fontSize: base.typography.buttonMedium.fontSize,
+          },
+        },
+        sizeSmall: {
+          padding: base.spacing(0.5),
+          fontSize: base.typography.buttonSmall.fontSize,
+          fontWeight: base.typography.fontWeightMedium,
+          height: base.spacing(2.5),
+          '.MuiChip-icon': {
+            fontSize: base.typography.buttonSmall.fontSize,
+          },
+        },
+      },
+    },
+  },
+});
diff --git a/libs/dhedge/theme/src/mui/components/Dialog.ts b/libs/dhedge/theme/src/mui/components/Dialog.ts
new file mode 100644
index 00000000..7b558b9d
--- /dev/null
+++ b/libs/dhedge/theme/src/mui/components/Dialog.ts
@@ -0,0 +1,22 @@
+import type { Theme, ThemeOptions } from '@mui/material';
+
+export const getDialog = (base: Theme): ThemeOptions => ({
+  components: {
+    MuiDialog: {
+      defaultProps: {
+        PaperProps: {
+          elevation: 1,
+        },
+      },
+      styleOverrides: {
+        paper: {
+          borderRadius: '16px',
+          backgroundColor: base.palette.background.paper,
+        },
+        paperFullScreen: {
+          borderRadius: 0,
+        },
+      },
+    },
+  },
+});
diff --git a/libs/dhedge/theme/src/mui/components/DialogActions.ts b/libs/dhedge/theme/src/mui/components/DialogActions.ts
new file mode 100644
index 00000000..396ed984
--- /dev/null
+++ b/libs/dhedge/theme/src/mui/components/DialogActions.ts
@@ -0,0 +1,16 @@
+import type { Theme, ThemeOptions } from '@mui/material';
+
+export const getDialogActions = (base: Theme): ThemeOptions => ({
+  components: {
+    MuiDialogActions: {
+      styleOverrides: {
+        root: {
+          padding: base.spacing(0, 4, 4),
+          [base.breakpoints.down('md')]: {
+            padding: base.spacing(0, 2, 2, 2),
+          },
+        },
+      },
+    },
+  },
+});
diff --git a/libs/dhedge/theme/src/mui/components/DialogContent.ts b/libs/dhedge/theme/src/mui/components/DialogContent.ts
new file mode 100644
index 00000000..1e6d6f81
--- /dev/null
+++ b/libs/dhedge/theme/src/mui/components/DialogContent.ts
@@ -0,0 +1,16 @@
+import type { Theme, ThemeOptions } from '@mui/material';
+
+export const getDialogContent = (base: Theme): ThemeOptions => ({
+  components: {
+    MuiDialogContent: {
+      styleOverrides: {
+        root: {
+          padding: base.spacing(0, 4, 4),
+          [base.breakpoints.down('md')]: {
+            padding: base.spacing(0, 2, 2, 2),
+          },
+        },
+      },
+    },
+  },
+});
diff --git a/libs/dhedge/theme/src/mui/components/DialogTitle.ts b/libs/dhedge/theme/src/mui/components/DialogTitle.ts
new file mode 100644
index 00000000..2ec86da3
--- /dev/null
+++ b/libs/dhedge/theme/src/mui/components/DialogTitle.ts
@@ -0,0 +1,18 @@
+import type { Theme, ThemeOptions } from '@mui/material';
+
+export const getDialogTitle = (base: Theme): ThemeOptions => ({
+  components: {
+    MuiDialogTitle: {
+      styleOverrides: {
+        root: {
+          padding: base.spacing(4, 4, 2),
+          ...base.typography.h5,
+          textTransform: 'none',
+          [base.breakpoints.down('md')]: {
+            padding: base.spacing(2),
+          },
+        },
+      },
+    },
+  },
+});
diff --git a/libs/dhedge/theme/src/mui/components/Divider.ts b/libs/dhedge/theme/src/mui/components/Divider.ts
new file mode 100644
index 00000000..52fecfb4
--- /dev/null
+++ b/libs/dhedge/theme/src/mui/components/Divider.ts
@@ -0,0 +1,34 @@
+import type { Theme, ThemeOptions } from '@mui/material';
+
+export const getDivider = (base: Theme): ThemeOptions => ({
+  components: {
+    MuiDivider: {
+      defaultProps: {
+        flexItem: true,
+      },
+      styleOverrides: {
+        light: {
+          borderColor: base.palette.action.disabledBackground,
+        },
+        withChildren: ({ ownerState }) => ({
+          '::before, ::after': {
+            borderColor: ownerState.light
+              ? base.palette.action.disabledBackground
+              : base.palette.divider,
+          },
+          '.MuiTypography-root': {
+            padding: base.spacing(0.5),
+            borderRadius: '4px',
+            backgroundColor: base.palette.divider,
+            color: base.palette.text.secondary,
+            minWidth: 120,
+            ...(ownerState.light && {
+              backgroundColor: base.palette.action.disabledBackground,
+              color: base.palette.text.disabled,
+            }),
+          },
+        }),
+      },
+    },
+  },
+});
diff --git a/libs/dhedge/theme/src/mui/components/FormControl.ts b/libs/dhedge/theme/src/mui/components/FormControl.ts
new file mode 100644
index 00000000..62988892
--- /dev/null
+++ b/libs/dhedge/theme/src/mui/components/FormControl.ts
@@ -0,0 +1,89 @@
+import type { Theme, ThemeOptions } from '@mui/material';
+
+export const getFormControl = (base: Theme): ThemeOptions => ({
+  components: {
+    MuiFormControl: {
+      defaultProps: {
+        margin: 'normal',
+        size: 'medium',
+      },
+      styleOverrides: {
+        root: {
+          margin: 0,
+        },
+
+        marginNormal: {
+          '.MuiFormLabel-root': {
+            '& + .MuiFormControlLabel-root, & + .MuiFormGroup-root': {
+              marginTop: base.spacing(2),
+            },
+          },
+
+          '.MuiInputLabel-root': {
+            '& + .MuiInputBase-root': {
+              marginTop: base.spacing(1),
+            },
+          },
+
+          '.MuiFormControlLabel-root': {
+            '& + .MuiFormControlLabel-root': {
+              marginTop: base.spacing(2),
+            },
+
+            '& + .MuiFormHelperText-root': {
+              marginTop: base.spacing(1),
+            },
+          },
+
+          '.MuiFormGroup-root': {
+            '& + .MuiFormHelperText-root': {
+              marginTop: base.spacing(1),
+            },
+          },
+
+          '.MuiInputBase-root': {
+            '& + .MuiFormHelperText-root': {
+              marginTop: base.spacing(1),
+            },
+          },
+        },
+
+        marginDense: {
+          '.MuiFormLabel-root': {
+            '& + .MuiFormControlLabel-root, & + .MuiFormGroup-root': {
+              marginTop: base.spacing(1.5),
+            },
+          },
+
+          '.MuiInputLabel-root': {
+            '& + .MuiInputBase-root': {
+              marginTop: base.spacing(0.5),
+            },
+          },
+
+          '.MuiFormControlLabel-root': {
+            '& + .MuiFormControlLabel-root': {
+              marginTop: base.spacing(1.5),
+            },
+
+            '& + .MuiFormHelperText-root': {
+              marginTop: base.spacing(1),
+            },
+          },
+
+          '.MuiFormGroup-root': {
+            '& + .MuiFormHelperText-root': {
+              marginTop: base.spacing(1),
+            },
+          },
+
+          '.MuiInputBase-root': {
+            '& + .MuiFormHelperText-root': {
+              marginTop: base.spacing(0.5),
+            },
+          },
+        },
+      },
+    },
+  },
+});
diff --git a/libs/dhedge/theme/src/mui/components/FormControlLabel.ts b/libs/dhedge/theme/src/mui/components/FormControlLabel.ts
new file mode 100644
index 00000000..06dc0728
--- /dev/null
+++ b/libs/dhedge/theme/src/mui/components/FormControlLabel.ts
@@ -0,0 +1,18 @@
+import type { Theme, ThemeOptions } from '@mui/material';
+
+export const getFormControlLabel = (base: Theme): ThemeOptions => ({
+  components: {
+    MuiFormControlLabel: {
+      styleOverrides: {
+        root: {
+          marginLeft: 0,
+          marginRight: 0,
+
+          '.MuiCheckbox-root, .MuiRadio-root': {
+            marginRight: base.spacing(1),
+          },
+        },
+      },
+    },
+  },
+});
diff --git a/libs/dhedge/theme/src/mui/components/FormGroup.ts b/libs/dhedge/theme/src/mui/components/FormGroup.ts
new file mode 100644
index 00000000..581d2d6c
--- /dev/null
+++ b/libs/dhedge/theme/src/mui/components/FormGroup.ts
@@ -0,0 +1,20 @@
+import type { Theme, ThemeOptions } from '@mui/material';
+
+export const getFormGroup = (base: Theme): ThemeOptions => ({
+  components: {
+    MuiFormGroup: {
+      styleOverrides: {
+        root: {
+          '>*:not(:first-child)': {
+            marginTop: base.spacing(0.75),
+          },
+        },
+        row: {
+          '>*': {
+            marginTop: 0,
+          },
+        },
+      },
+    },
+  },
+});
diff --git a/libs/dhedge/theme/src/mui/components/FormHelperText.ts b/libs/dhedge/theme/src/mui/components/FormHelperText.ts
new file mode 100644
index 00000000..e2f8c564
--- /dev/null
+++ b/libs/dhedge/theme/src/mui/components/FormHelperText.ts
@@ -0,0 +1,20 @@
+import type { Theme, ThemeOptions } from '@mui/material';
+
+export const getFormHelperText = (base: Theme): ThemeOptions => ({
+  components: {
+    MuiFormHelperText: {
+      styleOverrides: {
+        root: {
+          ...base.typography.body2,
+          color: base.palette.text.secondary,
+          marginLeft: 0,
+          marginRight: 0,
+
+          '&.Mui-error': {
+            color: base.palette.error.main,
+          },
+        },
+      },
+    },
+  },
+});
diff --git a/libs/dhedge/theme/src/mui/components/FormLabel.ts b/libs/dhedge/theme/src/mui/components/FormLabel.ts
new file mode 100644
index 00000000..4f927a1b
--- /dev/null
+++ b/libs/dhedge/theme/src/mui/components/FormLabel.ts
@@ -0,0 +1,18 @@
+import type { Theme, ThemeOptions } from '@mui/material';
+
+export const getFormLabel = (base: Theme): ThemeOptions => ({
+  components: {
+    MuiFormLabel: {
+      styleOverrides: {
+        root: {
+          ...base.typography.label2,
+          color: base.palette.text.primary,
+
+          '&.Mui-disabled': {
+            color: base.palette.text.disabled,
+          },
+        },
+      },
+    },
+  },
+});
diff --git a/libs/dhedge/theme/src/mui/components/InputBase.ts b/libs/dhedge/theme/src/mui/components/InputBase.ts
new file mode 100644
index 00000000..32168222
--- /dev/null
+++ b/libs/dhedge/theme/src/mui/components/InputBase.ts
@@ -0,0 +1,107 @@
+import type { Theme, ThemeOptions } from '@mui/material';
+
+export const getInputBase = (base: Theme): ThemeOptions => ({
+  components: {
+    MuiInputBase: {
+      defaultProps: {
+        size: 'medium',
+        maxRows: 12,
+      },
+      styleOverrides: {
+        root: {
+          ...base.typography.body1,
+          '&:not(.MuiInputBase-multiline):not(.MuiAutocomplete-inputRoot)': {
+            height: 48,
+          },
+
+          '.MuiInputBase-input::placeholder': {
+            ...base.typography.value1,
+            color: base.palette.grey[300],
+          },
+
+          '&.Mui-error': { color: base.palette.error.main },
+
+          '.MuiInputBase-input': {
+            height: '100%',
+            boxSizing: 'border-box',
+          },
+
+          '.MuiInputBase-inputMultiline': {
+            paddingRight: base.spacing(1.5),
+            paddingLeft: base.spacing(2),
+          },
+
+          '.MuiSelect-select': {
+            paddingLeft: base.spacing(2),
+            paddingRight: `${base.spacing(5)} !important`,
+          },
+          '&:has(.MuiSelect-select)': {
+            backgroundColor: 'transparent !important',
+          },
+
+          '&.MuiInputBase-adornedStart': {
+            '.MuiOutlinedInput-input:not(.MuiSelect-select):not(.MuiAutocomplete-input)':
+              {
+                paddingLeft: base.spacing(6),
+              },
+
+            '.MuiSelect-select': {
+              paddingLeft: base.spacing(6),
+            },
+          },
+
+          '&.MuiInputBase-adornedEnd': {
+            '.MuiOutlinedInput-input:not(.MuiSelect-select):not(.MuiAutocomplete-input)':
+              {
+                paddingRight: base.spacing(6),
+              },
+          },
+
+          '.MuiSelect-icon': {
+            right: base.spacing(1.5),
+          },
+        },
+
+        sizeSmall: {
+          fontSize: 14,
+          lineHeight: 14,
+          '&:not(.MuiInputBase-multiline):not(.MuiAutocomplete-inputRoot)': {
+            height: 32,
+          },
+
+          '.MuiInputBase-inputMultiline': {
+            paddingRight: base.spacing(1.5),
+            paddingLeft: base.spacing(1.5),
+          },
+
+          '.MuiSelect-select': {
+            paddingLeft: base.spacing(1.5),
+            paddingRight: `${base.spacing(4.5)} !important`,
+          },
+
+          '&.MuiInputBase-adornedStart': {
+            '.MuiOutlinedInput-input:not(.MuiSelect-select):not(.MuiAutocomplete-input)':
+              {
+                paddingLeft: base.spacing(4.5),
+              },
+
+            '.MuiSelect-select': {
+              paddingLeft: base.spacing(4.5),
+            },
+          },
+
+          '&.MuiInputBase-adornedEnd': {
+            '.MuiOutlinedInput-input:not(.MuiSelect-select):not(.MuiAutocomplete-input)':
+              {
+                paddingRight: base.spacing(4.5),
+              },
+          },
+
+          '.MuiSelect-icon': {
+            right: base.spacing(1),
+          },
+        },
+      },
+    },
+  },
+});
diff --git a/libs/dhedge/theme/src/mui/components/InputLabel.ts b/libs/dhedge/theme/src/mui/components/InputLabel.ts
new file mode 100644
index 00000000..99e3309a
--- /dev/null
+++ b/libs/dhedge/theme/src/mui/components/InputLabel.ts
@@ -0,0 +1,22 @@
+import type { Theme, ThemeOptions } from '@mui/material';
+
+export const getInputLabel = (base: Theme): ThemeOptions => ({
+  components: {
+    MuiInputLabel: {
+      defaultProps: {
+        shrink: true,
+        disableAnimation: true,
+      },
+      styleOverrides: {
+        root: {
+          position: 'relative',
+          transform: 'none',
+          transition: 'none',
+          zIndex: 'auto',
+          pointerEvents: 'auto',
+          color: base.palette.text.secondary,
+        },
+      },
+    },
+  },
+});
diff --git a/libs/dhedge/theme/src/mui/components/Link.ts b/libs/dhedge/theme/src/mui/components/Link.ts
new file mode 100644
index 00000000..d3decb14
--- /dev/null
+++ b/libs/dhedge/theme/src/mui/components/Link.ts
@@ -0,0 +1,19 @@
+import type { Theme, ThemeOptions } from '@mui/material';
+
+export const getLink = (base: Theme): ThemeOptions => ({
+  components: {
+    MuiLink: {
+      defaultProps: {
+        underline: 'none',
+      },
+      styleOverrides: {
+        root: {
+          color: base.palette.info.dark,
+          '&:hover': {
+            color: base.palette.info.main,
+          },
+        },
+      },
+    },
+  },
+});
diff --git a/libs/dhedge/theme/src/mui/components/Menu.ts b/libs/dhedge/theme/src/mui/components/Menu.ts
new file mode 100644
index 00000000..9e5d8537
--- /dev/null
+++ b/libs/dhedge/theme/src/mui/components/Menu.ts
@@ -0,0 +1,24 @@
+import type { Theme, ThemeOptions } from '@mui/material';
+
+export const getMenu = (base: Theme): ThemeOptions => ({
+  components: {
+    MuiMenu: {
+      defaultProps: {
+        elevation: 1,
+        MenuListProps: { disablePadding: false },
+      },
+      styleOverrides: {
+        paper: {
+          padding: 0,
+          backgroundColor: base.palette.background.paper,
+          borderRadius: '6px !important',
+          marginTop: base.spacing(0.5),
+        },
+        list: {
+          paddingTop: 0,
+          paddingBottom: 0,
+        },
+      },
+    },
+  },
+});
diff --git a/libs/dhedge/theme/src/mui/components/MenuItem.ts b/libs/dhedge/theme/src/mui/components/MenuItem.ts
new file mode 100644
index 00000000..477d91f2
--- /dev/null
+++ b/libs/dhedge/theme/src/mui/components/MenuItem.ts
@@ -0,0 +1,69 @@
+import type { Theme, ThemeOptions } from '@mui/material';
+
+export const getMenuItem = (base: Theme): ThemeOptions => ({
+  components: {
+    MuiMenuItem: {
+      styleOverrides: {
+        root: {
+          backgroundColor: 'transparent',
+          padding: base.spacing(1.25, 0.75, 1.25, 0.75),
+          minHeight: '48px',
+          ...base.typography.hint,
+          '&.Mui-Selected': {
+            backgroundColor:
+              base.palette.mode === 'light'
+                ? base.palette.grey[100]
+                : base.palette.grey[800],
+          },
+          '&:hover': {
+            backgroundColor:
+              base.palette.mode === 'light'
+                ? base.palette.grey[200]
+                : base.palette.grey[700],
+          },
+          '.MuiAvatar-root': {
+            height: '40px',
+            width: '40px',
+          },
+          // Repeating ListItemIcon styles to get around an MUI specificity bug
+          '.MuiListItemIcon-root': {
+            minWidth: '40px',
+            justifyContent: 'center',
+            color: base.palette.primary.main,
+
+            '&:first-of-type': {
+              minWidth: 0,
+              marginRight: base.spacing(1),
+            },
+          },
+        },
+        dense: {
+          minHeight: '36px',
+          padding: base.spacing(0, 0.5, 0, 1.5),
+
+          '.MuiAvatar-root': {
+            height: '24px',
+            width: '24px',
+          },
+          '.MuiListItemText-root': {
+            padding: base.spacing(1, 1, 1, 0),
+          },
+          '.MuiListItemText-multiline': {
+            padding: base.spacing(0.5, 1, 0.5, 0),
+          },
+          '.MuiListItemIcon-root:last-of-type': {
+            '.MuiSvgIcon-root': {
+              height: '16px',
+              width: '16px',
+            },
+          },
+        },
+        divider: {
+          '.MuiListItemIcon-root:first-of-type': {
+            minWidth: 0,
+          },
+        },
+      },
+    },
+  },
+});
diff --git a/libs/dhedge/theme/src/mui/components/OutlinedInput.ts b/libs/dhedge/theme/src/mui/components/OutlinedInput.ts
new file mode 100644
index 00000000..b5671490
--- /dev/null
+++ b/libs/dhedge/theme/src/mui/components/OutlinedInput.ts
@@ -0,0 +1,93 @@
+import type { Theme, ThemeOptions } from '@mui/material';
+
+export const getOutlinedInput = (base: Theme): ThemeOptions => ({
+  components: {
+    MuiOutlinedInput: {
+      defaultProps: {
+        color: 'primary',
+      },
+      styleOverrides: {
+        root: {
+          padding: 0,
+
+          '.MuiSelect-select': {
+            minWidth: 80,
+          },
+
+          '.MuiInputAdornment-root': {
+            position: 'absolute',
+          },
+
+          '.MuiInputAdornment-positionStart': {
+            left: base.spacing(2),
+          },
+
+          '.MuiInputAdornment-positionEnd': {
+            right: base.spacing(2),
+          },
+
+          '&.MuiInputBase-multiline': {
+            alignItems: 'flex-start',
+
+            '.MuiInputAdornment-root': {
+              height: 'inherit',
+              maxHeight: 'inherit',
+              paddingTop: base.spacing(1.5),
+            },
+          },
+
+          '.MuiOutlinedInput-input::placeholder': {
+            ...base.typography.placeholder,
+            opacity: 1,
+          },
+
+          '&.Mui-disabled': {
+            backgroundColor: base.palette.action.disabledBackground,
+            color: base.palette.text.disabled,
+
+            '.MuiOutlinedInput-input::placeholder': {
+              color: base.palette.text.disabled,
+            },
+
+            '.MuiInputAdornment-root': {
+              color: base.palette.text.disabled,
+
+              '.MuiSvgIcon-root': {
+                color: base.palette.text.disabled,
+              },
+            },
+
+            '.MuiOutlinedInput-notchedOutline': {
+              borderColor: base.palette.action.disabledBackground,
+            },
+          },
+        },
+
+        notchedOutline: {
+          borderColor: base.palette.divider,
+          top: 0,
+
+          legend: {
+            display: 'none',
+          },
+        },
+
+        sizeSmall: {
+          '.MuiInputAdornment-positionStart': {
+            left: base.spacing(1.5),
+          },
+
+          '.MuiInputAdornment-positionEnd': {
+            right: base.spacing(1.5),
+          },
+
+          '&.MuiInputBase-multiline': {
+            '.MuiInputAdornment-root': {
+              paddingTop: base.spacing(0.75),
+            },
+          },
+        },
+      },
+    },
+  },
+});
diff --git a/libs/dhedge/theme/src/mui/components/Paper.ts b/libs/dhedge/theme/src/mui/components/Paper.ts
new file mode 100644
index 00000000..895647ec
--- /dev/null
+++ b/libs/dhedge/theme/src/mui/components/Paper.ts
@@ -0,0 +1,16 @@
+import type { Theme, ThemeOptions } from '@mui/material';
+
+export const getPaper = (base: Theme): ThemeOptions => ({
+  components: {
+    MuiPaper: {
+      defaultProps: {
+        variant: 'elevation',
+      },
+      styleOverrides: {
+        root: {
+          backgroundColor: base.palette.background.paper,
+        },
+      },
+    },
+  },
+});
diff --git a/libs/dhedge/theme/src/mui/components/Radio.tsx b/libs/dhedge/theme/src/mui/components/Radio.tsx
new file mode 100644
index 00000000..be4ccc2e
--- /dev/null
+++ b/libs/dhedge/theme/src/mui/components/Radio.tsx
@@ -0,0 +1,23 @@
+import type { Theme, ThemeOptions } from '@mui/material';
+
+export const getRadio = (base: Theme): ThemeOptions => ({
+  components: {
+    MuiRadio: {
+      defaultProps: {
+        inputProps: {
+          'aria-label': 'radio',
+        },
+      },
+      styleOverrides: {
+        root: {
+          padding: 0,
+          '&.Mui-disabled': {
+            svg: {
+              color: base.palette.action.disabled,
+            },
+          },
+        },
+      },
+    },
+  },
+});
diff --git a/libs/dhedge/theme/src/mui/components/Select.ts b/libs/dhedge/theme/src/mui/components/Select.ts
new file mode 100644
index 00000000..3b61994d
--- /dev/null
+++ b/libs/dhedge/theme/src/mui/components/Select.ts
@@ -0,0 +1,71 @@
+import { CaretDown } from 'phosphor-react';
+
+import type { Theme, ThemeOptions } from '@mui/material';
+
+export const getSelect = (base: Theme): ThemeOptions => ({
+  components: {
+    MuiSelect: {
+      defaultProps: {
+        disableUnderline: true,
+        IconComponent: CaretDown,
+        size: 'small',
+        variant: 'filled',
+        MenuProps: {
+          anchorOrigin: {
+            vertical: 'bottom',
+            horizontal: 'left',
+          },
+          transformOrigin: {
+            vertical: 'top',
+            horizontal: 'left',
+          },
+        },
+      },
+      styleOverrides: {
+        icon: {
+          color: base.palette.text.primary,
+        },
+        filled: {
+          height: 'inherit',
+          color: base.palette.text.primary,
+          backgroundColor:
+            base.palette.mode === 'light'
+              ? base.palette.grey[100]
+              : base.palette.grey[800],
+          ':hover': {
+            backgroundColor:
+              base.palette.mode === 'light'
+                ? base.palette.grey[200]
+                : base.palette.grey[700],
+          },
+          svg: {
+            color: base.palette.text.primary,
+          },
+          '&.Mui-disabled': {
+            color: base.palette.text.disabled,
+            backgroundColor: base.palette.action.disabledBackground,
+            svg: {
+              color: base.palette.text.disabled,
+            },
+          },
+          '&.MuiInputBase-inputSizeSmall': {
+            ...base.typography.buttonSmall,
+            padding: base.spacing(1, 1.5),
+            borderRadius: '8px',
+            minHeight: 34,
+            minWidth: 34,
+            lineHeight: 1.625,
+          },
+          '&.MuiInputBase-inputSizeMedium': {
+            ...base.typography.buttonMedium,
+            padding: base.spacing(1.5, 2),
+            borderRadius: '10px',
+            minHeight: 40,
+            minWidth: 40,
+            lineHeight: 2,
+          },
+        },
+      },
+    },
+  },
+});
diff --git a/libs/dhedge/theme/src/mui/components/Tab.ts b/libs/dhedge/theme/src/mui/components/Tab.ts
new file mode 100644
index 00000000..6b9ff069
--- /dev/null
+++ b/libs/dhedge/theme/src/mui/components/Tab.ts
@@ -0,0 +1,13 @@
+import type { Theme, ThemeOptions } from '@mui/material';
+
+export const getTab = (base: Theme): ThemeOptions => ({
+  components: {
+    MuiTab: {
+      styleOverrides: {
+        root: {
+          textTransform: 'uppercase',
+        },
+      },
+    },
+  },
+});
diff --git a/libs/dhedge/theme/src/mui/components/TableCell.ts b/libs/dhedge/theme/src/mui/components/TableCell.ts
new file mode 100644
index 00000000..31ffcab8
--- /dev/null
+++ b/libs/dhedge/theme/src/mui/components/TableCell.ts
@@ -0,0 +1,13 @@
+import type { Theme, ThemeOptions } from '@mui/material';
+
+export const getTableCell = (base: Theme): ThemeOptions => ({
+  components: {
+    MuiTableCell: {
+      styleOverrides: {
+        root: {
+          borderBottom: `1px solid ${base.palette.divider}`,
+        },
+      },
+    },
+  },
+});
diff --git a/libs/dhedge/theme/src/mui/components/TextField.ts b/libs/dhedge/theme/src/mui/components/TextField.ts
new file mode 100644
index 00000000..8bf3fd26
--- /dev/null
+++ b/libs/dhedge/theme/src/mui/components/TextField.ts
@@ -0,0 +1,13 @@
+import type { Theme, ThemeOptions } from '@mui/material';
+
+export const getTextField = (base: Theme): ThemeOptions => ({
+  components: {
+    MuiTextField: {
+      styleOverrides: {
+        root: {
+          margin: 0,
+        },
+      },
+    },
+  },
+});
diff --git a/libs/dhedge/theme/src/mui/components/ToggleButton.ts b/libs/dhedge/theme/src/mui/components/ToggleButton.ts
new file mode 100644
index 00000000..de2ec192
--- /dev/null
+++ b/libs/dhedge/theme/src/mui/components/ToggleButton.ts
@@ -0,0 +1,34 @@
+import type { Theme, ThemeOptions } from '@mui/material';
+
+export const getToggleButton = (base: Theme): ThemeOptions => ({
+  components: {
+    MuiToggleButton: {
+      styleOverrides: {
+        sizeSmall: {
+          ...base.typography.buttonSmall,
+          padding: '3px',
+          svg: {
+            width: '14px',
+            height: '14px',
+          },
+        },
+        sizeMedium: {
+          ...base.typography.buttonMedium,
+          padding: '5px',
+          svg: {
+            width: '14px',
+            height: '14px',
+          },
+        },
+        sizeLarge: {
+          ...base.typography.buttonLarge,
+          padding: '7px',
+          svg: {
+            width: '16px',
+            height: '16px',
+          },
+        },
+      },
+    },
+  },
+});
diff --git a/libs/dhedge/theme/src/mui/components/ToggleButtonGroup.ts b/libs/dhedge/theme/src/mui/components/ToggleButtonGroup.ts
new file mode 100644
index 00000000..fd7abd68
--- /dev/null
+++ b/libs/dhedge/theme/src/mui/components/ToggleButtonGroup.ts
@@ -0,0 +1,82 @@
+import { toggleButtonClasses } from '@mui/material';
+
+import type { Theme, ThemeOptions } from '@mui/material';
+
+export const getToggleButtonGroup = (base: Theme): ThemeOptions => ({
+  components: {
+    MuiToggleButtonGroup: {
+      styleOverrides: {
+        root: {
+          [`.${toggleButtonClasses.standard}`]: {
+            color:
+              base.palette.mode === 'light'
+                ? base.palette.text.primary
+                : base.palette.grey[500],
+            borderColor:
+              base.palette.mode === 'light'
+                ? base.palette.grey[100]
+                : base.palette.grey[700],
+            backgroundColor: 'transparent',
+            ':hover': {
+              color:
+                base.palette.mode === 'light'
+                  ? base.palette.grey[600]
+                  : base.palette.grey[500],
+              backgroundColor:
+                base.palette.mode === 'light'
+                  ? base.palette.grey[200]
+                  : base.palette.grey[700],
+            },
+            '&.Mui-selected': {
+              color: base.palette.primary.main,
+              backgroundColor:
+                base.palette.mode === 'light'
+                  ? base.palette.grey[100]
+                  : base.palette.grey[800],
+              ':hover': {
+                backgroundColor:
+                  base.palette.mode === 'light'
+                    ? base.palette.grey[200]
+                    : base.palette.grey[700],
+              },
+            },
+            '&.Mui-disabled': {
+              color: base.palette.action.disabled,
+              borderColor: base.palette.action.disabled,
+            },
+          },
+          [`.${toggleButtonClasses.sizeSmall}`]: {
+            '&:first-of-type': {
+              borderTopLeftRadius: '4px',
+              borderBottomLeftRadius: '4px',
+            },
+            '&:last-of-type': {
+              borderTopRightRadius: '4px',
+              borderBottomRightRadius: '4px',
+            },
+          },
+          [`.${toggleButtonClasses.sizeMedium}`]: {
+            '&:first-of-type': {
+              borderTopLeftRadius: '6px',
+              borderBottomLeftRadius: '6px',
+            },
+            '&:last-of-type': {
+              borderTopRightRadius: '6px',
+              borderBottomRightRadius: '6px',
+            },
+          },
+          [`.${toggleButtonClasses.sizeLarge}`]: {
+            '&:first-of-type': {
+              borderTopLeftRadius: '8px',
+              borderBottomLeftRadius: '8px',
+            },
+            '&:last-of-type': {
+              borderTopRightRadius: '8px',
+              borderBottomRightRadius: '8px',
+            },
+          },
+        },
+      },
+    },
+  },
+});
diff --git a/libs/dhedge/theme/src/mui/components/Tooltip.ts b/libs/dhedge/theme/src/mui/components/Tooltip.ts
new file mode 100644
index 00000000..28ffc1cf
--- /dev/null
+++ b/libs/dhedge/theme/src/mui/components/Tooltip.ts
@@ -0,0 +1,29 @@
+import type { Theme, ThemeOptions } from '@mui/material';
+
+export const getTooltip = (base: Theme): ThemeOptions => ({
+  components: {
+    MuiTooltip: {
+      styleOverrides: {
+        tooltip: {
+          backgroundColor:
+            base.palette.mode === 'light'
+              ? base.palette.grey[200]
+              : base.palette.grey[800],
+          color:
+            base.palette.mode === 'light'
+              ? base.palette.grey[600]
+              : base.palette.grey[500],
+          padding: base.spacing(1, 1.5),
+          fontSize: '12px',
+          borderRadius: '6px',
+        },
+        arrow: {
+          color:
+            base.palette.mode === 'light'
+              ? base.palette.grey[200]
+              : base.palette.grey[800],
+        },
+      },
+    },
+  },
+});
diff --git a/libs/dhedge/theme/src/mui/components/Typography.ts b/libs/dhedge/theme/src/mui/components/Typography.ts
new file mode 100644
index 00000000..0562a1ff
--- /dev/null
+++ b/libs/dhedge/theme/src/mui/components/Typography.ts
@@ -0,0 +1,11 @@
+import type { Theme, ThemeOptions } from '@mui/material';
+
+export const getTypography = (base: Theme): ThemeOptions => ({
+  components: {
+    MuiTypography: {
+      defaultProps: {
+        variant: 'body1',
+      },
+    },
+  },
+});
diff --git a/libs/dhedge/theme/src/mui/icons/check.svg b/libs/dhedge/theme/src/mui/icons/check.svg
new file mode 100644
index 00000000..1547cba3
--- /dev/null
+++ b/libs/dhedge/theme/src/mui/icons/check.svg
@@ -0,0 +1,12 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <rect width="16" height="16" rx="4" fill="currentColor"/>
+  <g clip-path="url(#clip0_144_1757)">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M12.4786 5.02145C12.6738 5.21671 12.6738 5.53329 12.4786 5.72856L7.22855 10.9786C7.13479 11.0723 7.00761 11.125 6.875 11.125C6.74239 11.125 6.61522 11.0723 6.52145 10.9786L3.89645 8.35356C3.70118 8.15829 3.70118 7.84171 3.89645 7.64645C4.09171 7.45119 4.40829 7.45119 4.60355 7.64645L6.875 9.9179L11.7714 5.02145C11.9667 4.82619 12.2833 4.82619 12.4786 5.02145Z" fill="#F8FAFF"/>
+  </g>
+  <defs>
+    <clipPath id="clip0_144_1757">
+      <rect width="12" height="12" fill="white" transform="translate(2 2)"/>
+    </clipPath>
+  </defs>
+</svg>
\ No newline at end of file
diff --git a/libs/dhedge/theme/src/mui/icons/indeterminate.svg b/libs/dhedge/theme/src/mui/icons/indeterminate.svg
new file mode 100644
index 00000000..097be152
--- /dev/null
+++ b/libs/dhedge/theme/src/mui/icons/indeterminate.svg
@@ -0,0 +1,12 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <rect width="16" height="16" rx="4" fill="currentColor"/>
+  <g clip-path="url(#clip0_1149_12878)">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M4 8.5C4 8.22386 4.22386 8 4.5 8H11.5C11.7761 8 12 8.22386 12 8.5C12 8.77614 11.7761 9 11.5 9H4.5C4.22386 9 4 8.77614 4 8.5Z" fill="#F8FAFF"/>
+  </g>
+  <defs>
+    <clipPath id="clip0_1149_12878">
+      <rect width="12" height="12" fill="white" transform="translate(2 2)"/>
+    </clipPath>
+  </defs>
+</svg>
\ No newline at end of file
diff --git a/libs/dhedge/theme/src/mui/icons/index.tsx b/libs/dhedge/theme/src/mui/icons/index.tsx
new file mode 100644
index 00000000..ea71c20c
--- /dev/null
+++ b/libs/dhedge/theme/src/mui/icons/index.tsx
@@ -0,0 +1,19 @@
+import { SvgIcon } from '@mui/material';
+
+import { ReactComponent as CheckSvg } from './check.svg';
+import { ReactComponent as IndeterminateSvg } from './indeterminate.svg';
+import { ReactComponent as UncheckSvg } from './uncheck.svg';
+
+import type { SvgIconProps } from '@mui/material';
+
+export const Check = (props: SvgIconProps) => (
+  <SvgIcon {...props} component={CheckSvg} viewBox="0 0 16 16" />
+);
+
+export const Indeterminate = (props: SvgIconProps) => (
+  <SvgIcon {...props} component={IndeterminateSvg} viewBox="0 0 16 16" />
+);
+
+export const Uncheck = (props: SvgIconProps) => (
+  <SvgIcon {...props} component={UncheckSvg} viewBox="0 0 16 16" />
+);
diff --git a/libs/dhedge/theme/src/mui/icons/uncheck.svg b/libs/dhedge/theme/src/mui/icons/uncheck.svg
new file mode 100644
index 00000000..0c54ab4c
--- /dev/null
+++ b/libs/dhedge/theme/src/mui/icons/uncheck.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <rect x="0.5" y="0.5" width="15" height="15" rx="3.5" stroke="currentColor" fill="none"/>
+</svg>
diff --git a/libs/dhedge/theme/src/mui/index.ts b/libs/dhedge/theme/src/mui/index.ts
new file mode 100644
index 00000000..d429f8cd
--- /dev/null
+++ b/libs/dhedge/theme/src/mui/index.ts
@@ -0,0 +1,2 @@
+export * from './theme';
+export * from './types';
diff --git a/libs/dhedge/theme/src/mui/mixins.ts b/libs/dhedge/theme/src/mui/mixins.ts
new file mode 100644
index 00000000..a29f691d
--- /dev/null
+++ b/libs/dhedge/theme/src/mui/mixins.ts
@@ -0,0 +1,36 @@
+import type { Theme, ThemeOptions } from '@mui/material';
+
+export const getMixinsOptions = (base: Theme): ThemeOptions => ({
+  mixins: {
+    toolbar: {
+      minHeight: 68,
+      [`${base.breakpoints.up('xs')} and (orientation: landscape)`]: {
+        minHeight: 48,
+      },
+      [base.breakpoints.up('sm')]: {
+        minHeight: 68,
+      },
+    },
+    paddings: {
+      page: {
+        paddingY: { xs: 1, sm: 2, md: 2.5 },
+        paddingX: { xs: 4, sm: 6, md: 8, lg: 16, xl: 30 },
+      },
+      section: {
+        paddingY: { xs: 0.5, sm: 1, md: 1.2 },
+        paddingX: { xs: 1, sm: 1.5, md: 2, lg: 3, xl: 4 },
+      },
+    },
+    centered: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    gradients: {
+      colorCloud:
+        base.palette.mode === 'light'
+          ? `linear-gradient(96.91deg, rgba(157, 149, 255, 0.54) 14.29%, rgba(250, 195, 113, 0.71) 38.84%, rgba(85, 213, 255, 0.53) 69.2%, rgba(251, 136, 215, 0.5) 100%)`
+          : `linear-gradient(96.91deg, rgba(157, 149, 255, 0.3) 14.29%, rgba(250, 195, 113, 0.5) 38.84%, rgba(85, 213, 255, 0.3) 69.2%, rgba(251, 136, 215, 0.3) 100%)`,
+    },
+  },
+});
diff --git a/libs/dhedge/theme/src/mui/palette.ts b/libs/dhedge/theme/src/mui/palette.ts
new file mode 100644
index 00000000..c76b21fa
--- /dev/null
+++ b/libs/dhedge/theme/src/mui/palette.ts
@@ -0,0 +1,134 @@
+import { alpha } from '@mui/material';
+import { mergeDeepRight } from 'ramda';
+
+import { colors } from '../constants';
+
+import type { PaletteMode, ThemeOptions } from '@mui/material';
+
+const light: ThemeOptions = {
+  palette: {
+    mode: 'light',
+    common: {
+      white: colors.white,
+      black: colors.black,
+    },
+    primary: {
+      light: colors.blue01,
+      main: colors.blue02,
+      dark: colors.blue03,
+      contrastText: colors.white,
+    },
+    secondary: {
+      light: colors.black700,
+      main: colors.black900,
+      dark: colors.offBlack,
+      contrastText: colors.white,
+    },
+    error: {
+      light: colors.red01,
+      main: colors.red02,
+      dark: colors.red03,
+      contrastText: colors.white,
+    },
+    warning: {
+      light: colors.yellow01,
+      main: colors.yellow02,
+      dark: colors.yellow03,
+      contrastText: colors.white,
+    },
+    info: {
+      light: colors.purple01,
+      main: colors.purple02,
+      dark: colors.purple03,
+      contrastText: colors.white,
+    },
+    success: {
+      light: colors.green01,
+      main: colors.green02,
+      dark: colors.green03,
+      contrastText: colors.white,
+    },
+    icons: {
+      color: colors.black600,
+      background: colors.black100,
+      revertedColor: colors.black50,
+      revertedBackground: colors.black900,
+    },
+    grey: {
+      '50': colors.black50,
+      '100': colors.black100,
+      '200': colors.black200,
+      '300': colors.black300,
+      '400': colors.black400,
+      '500': colors.black500,
+      '600': colors.black600,
+      '700': colors.black700,
+      '800': colors.black800,
+      '900': colors.black900,
+      A100: colors.lightGrey01,
+      A200: colors.lightGrey02,
+      A400: colors.lightGrey03,
+      A700: colors.lightGrey04,
+    },
+    text: {
+      primary: colors.black900,
+      secondary: colors.black600,
+      disabled: colors.black400,
+    },
+    background: {
+      default: colors.black50,
+      paper: colors.black50,
+      highlight: colors.black100,
+    },
+    divider: colors.black200,
+    action: {
+      active: alpha(colors.blue02, 0.5),
+      activatedOpacity: 0.5,
+      hover: alpha(colors.black800, 0.1),
+      hoverOpacity: 0.06,
+      selected: alpha(colors.blue01, 0.1),
+      selectedOpacity: 0.1,
+      disabled: colors.black200,
+      disabledBackground: colors.black200,
+      disabledOpacity: 0.25,
+      focus: alpha(colors.blue02, 0.06),
+      focusOpacity: 0.06,
+    },
+  },
+};
+
+const dark: ThemeOptions = mergeDeepRight(light, {
+  palette: {
+    mode: 'dark' as PaletteMode,
+    secondary: {
+      light: colors.white,
+      main: colors.black50,
+      dark: colors.black300,
+      contrastText: colors.offBlack,
+    },
+    icons: {
+      color: colors.black600,
+      background: colors.black800,
+      revertedColor: colors.black900,
+      revertedBackground: colors.black50,
+    },
+    text: {
+      primary: colors.black50,
+      secondary: colors.black500,
+      disabled: colors.black400,
+    },
+    background: {
+      default: colors.black900,
+      paper: colors.black900,
+      highlight: colors.black800,
+    },
+    divider: colors.black800,
+    action: {
+      disabled: colors.black700,
+      disabledBackground: colors.black700,
+    },
+  },
+});
+
+export const getPaletteOptions = (mode: PaletteMode) =>
+  mode === 'dark' ? dark : light;
diff --git a/libs/dhedge/theme/src/mui/shadows.ts b/libs/dhedge/theme/src/mui/shadows.ts
new file mode 100644
index 00000000..c84ee9e5
--- /dev/null
+++ b/libs/dhedge/theme/src/mui/shadows.ts
@@ -0,0 +1,63 @@
+import type { PaletteMode, ThemeOptions } from '@mui/material';
+
+export const light: ThemeOptions = {
+  shadows: [
+    'none',
+    '0px 0px 20px rgba(0, 0, 0, 0.05)',
+    '0px 0px 20px rgba(0, 0, 0, 0.1)',
+    '0px 0px 20px rgba(0, 0, 0, 0.15)',
+    '0px 0px 20px rgba(0, 0, 0, 0.2)',
+    '0px 0px 20px rgba(0, 0, 0, 0.25)',
+    '0px 0px 20px rgba(0, 0, 0, 0.3)',
+    '0px 0px 20px rgba(0, 0, 0, 0.35)',
+    '0px 0px 20px rgba(0, 0, 0, 0.4)',
+    '0px 0px 20px rgba(0, 0, 0, 0.45)',
+    '0px 0px 20px rgba(0, 0, 0, 0.5)',
+    '0px 0px 20px rgba(0, 0, 0, 0.55)',
+    '0px 0px 20px rgba(0, 0, 0, 0.6)',
+    '0px 0px 20px rgba(0, 0, 0, 0.65)',
+    '0px 0px 20px rgba(0, 0, 0, 0.7)',
+    '0px 0px 20px rgba(0, 0, 0, 0.75)',
+    '0px 0px 20px rgba(0, 0, 0, 0.8)',
+    '0px 0px 20px rgba(0, 0, 0, 0.85)',
+    '0px 0px 20px rgba(0, 0, 0, 0.9)',
+    '0px 0px 20px rgba(0, 0, 0, 0.95)',
+    '0px 0px 20px rgba(0, 0, 0, 0.95)',
+    '0px 0px 20px rgba(0, 0, 0, 0.95)',
+    '0px 0px 20px rgba(0, 0, 0, 0.95)',
+    '0px 0px 20px rgba(0, 0, 0, 0.95)',
+    '0px 0px 20px rgba(0, 0, 0, 0.95)',
+  ],
+};
+export const dark: ThemeOptions = {
+  shadows: [
+    'none',
+    '0px 0px 20px rgba(255, 255, 255, 0.05)',
+    '0px 0px 20px rgba(255, 255, 255, 0.1)',
+    '0px 0px 20px rgba(255, 255, 255, 0.15)',
+    '0px 0px 20px rgba(255, 255, 255, 0.2)',
+    '0px 0px 20px rgba(255, 255, 255, 0.25)',
+    '0px 0px 20px rgba(255, 255, 255, 0.3)',
+    '0px 0px 20px rgba(255, 255, 255, 0.35)',
+    '0px 0px 20px rgba(255, 255, 255, 0.4)',
+    '0px 0px 20px rgba(255, 255, 255, 0.45)',
+    '0px 0px 20px rgba(255, 255, 255, 0.5)',
+    '0px 0px 20px rgba(255, 255, 255, 0.55)',
+    '0px 0px 20px rgba(255, 255, 255, 0.6)',
+    '0px 0px 20px rgba(255, 255, 255, 0.65)',
+    '0px 0px 20px rgba(255, 255, 255, 0.7)',
+    '0px 0px 20px rgba(255, 255, 255, 0.75)',
+    '0px 0px 20px rgba(255, 255, 255, 0.8)',
+    '0px 0px 20px rgba(255, 255, 255, 0.85)',
+    '0px 0px 20px rgba(255, 255, 255, 0.9)',
+    '0px 0px 20px rgba(255, 255, 255, 0.95)',
+    '0px 0px 20px rgba(255, 255, 255, 0.95)',
+    '0px 0px 20px rgba(255, 255, 255, 0.95)',
+    '0px 0px 20px rgba(255, 255, 255, 0.95)',
+    '0px 0px 20px rgba(255, 255, 255, 0.95)',
+    '0px 0px 20px rgba(255, 255, 255, 0.95)',
+  ],
+};
+
+export const getShadowsOptions = (mode: PaletteMode) =>
+  mode === 'light' ? light : dark;
diff --git a/libs/dhedge/theme/src/mui/shape.ts b/libs/dhedge/theme/src/mui/shape.ts
new file mode 100644
index 00000000..25cc864a
--- /dev/null
+++ b/libs/dhedge/theme/src/mui/shape.ts
@@ -0,0 +1,7 @@
+import type { ThemeOptions } from '@mui/material';
+
+export const shapeOptions: ThemeOptions = {
+  shape: {
+    borderRadius: 12,
+  },
+};
diff --git a/libs/dhedge/theme/src/mui/theme.ts b/libs/dhedge/theme/src/mui/theme.ts
new file mode 100644
index 00000000..c48f39fd
--- /dev/null
+++ b/libs/dhedge/theme/src/mui/theme.ts
@@ -0,0 +1,103 @@
+import { createTheme, responsiveFontSizes } from '@mui/material';
+
+import { breakpointsOptions } from './breakpoints';
+import { getAlert } from './components/Alert';
+import { getAppBar } from './components/AppBar';
+import { getAvatar } from './components/Avatar';
+import { getButton } from './components/Button';
+import { getButtonBase } from './components/ButtonBase';
+import { getButtonGroup } from './components/ButtonGroup';
+import { getCard } from './components/Card';
+import { getCardHeader } from './components/CardHeader';
+import { getCheckbox } from './components/Checkbox';
+import { getChip } from './components/Chip';
+import { getCSSBaseline } from './components/CSSBaseline';
+import { getDialog } from './components/Dialog';
+import { getDialogActions } from './components/DialogActions';
+import { getDialogContent } from './components/DialogContent';
+import { getDialogTitle } from './components/DialogTitle';
+import { getDivider } from './components/Divider';
+import { getFormControl } from './components/FormControl';
+import { getFormControlLabel } from './components/FormControlLabel';
+import { getFormGroup } from './components/FormGroup';
+import { getFormHelperText } from './components/FormHelperText';
+import { getFormLabel } from './components/FormLabel';
+import { getInputBase } from './components/InputBase';
+import { getInputLabel } from './components/InputLabel';
+import { getLink } from './components/Link';
+import { getMenu } from './components/Menu';
+import { getMenuItem } from './components/MenuItem';
+import { getOutlinedInput } from './components/OutlinedInput';
+import { getPaper } from './components/Paper';
+import { getRadio } from './components/Radio';
+import { getSelect } from './components/Select';
+import { getTab } from './components/Tab';
+import { getTableCell } from './components/TableCell';
+import { getTextField } from './components/TextField';
+import { getToggleButton } from './components/ToggleButton';
+import { getToggleButtonGroup } from './components/ToggleButtonGroup';
+import { getTooltip } from './components/Tooltip';
+import { getTypography } from './components/Typography';
+import { getMixinsOptions } from './mixins';
+import { getPaletteOptions } from './palette';
+import { getShadowsOptions } from './shadows';
+import { shapeOptions } from './shape';
+import { getTypographyOptions } from './typography';
+
+import type { PaletteMode } from '@mui/material';
+
+export const getTheme = (mode: PaletteMode) => {
+  const paletteOptions = getPaletteOptions(mode);
+  const base = createTheme(
+    paletteOptions,
+    shapeOptions,
+    breakpointsOptions,
+    getTypographyOptions(paletteOptions),
+    getShadowsOptions(mode),
+  );
+
+  return createTheme(
+    base,
+    getAlert(base),
+    getAppBar(base),
+    getAvatar(base),
+    getButton(base),
+    getButtonBase(base),
+    getButtonGroup(base),
+    getCheckbox(base),
+    getChip(base),
+    getCard(base),
+    getCardHeader(base),
+    getCSSBaseline(base),
+    getDialog(base),
+    getDialogActions(base),
+    getDialogContent(base),
+    getDialogTitle(base),
+    getDivider(base),
+    getFormControl(base),
+    getFormControlLabel(base),
+    getFormGroup(base),
+    getFormHelperText(base),
+    getFormLabel(base),
+    getInputBase(base),
+    getInputLabel(base),
+    getLink(base),
+    getMenu(base),
+    getMenuItem(base),
+    getMixinsOptions(base),
+    getOutlinedInput(base),
+    getPaper(base),
+    getRadio(base),
+    getSelect(base),
+    getTab(base),
+    getTableCell(base),
+    getTextField(base),
+    getToggleButton(base),
+    getToggleButtonGroup(base),
+    getTooltip(base),
+    getTypography(base),
+  );
+};
+
+export const light = responsiveFontSizes(getTheme('light'));
+export const dark = responsiveFontSizes(getTheme('dark'));
diff --git a/libs/dhedge/theme/src/mui/types.ts b/libs/dhedge/theme/src/mui/types.ts
new file mode 100644
index 00000000..8c686665
--- /dev/null
+++ b/libs/dhedge/theme/src/mui/types.ts
@@ -0,0 +1,348 @@
+import type { TypographyStyle } from '@mui/material';
+
+declare module '@mui/material/styles/createPalette' {
+  interface TypeBackground {
+    highlight: string;
+  }
+}
+
+declare module '@mui/material/styles' {
+  interface Palette {
+    icons: {
+      color: string;
+      background: string;
+      revertedColor: string;
+      revertedBackground: string;
+    };
+  }
+
+  interface PaletteOptions {
+    icons?: {
+      color?: string;
+      background?: string;
+      revertedColor?: string;
+      revertedBackground?: string;
+    };
+  }
+
+  interface TypographyVariants {
+    fontFamilies: Record<'main' | 'code', string>;
+    fontSizes: Record<'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl', number>;
+    lineHeights: Record<'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl', number | string>;
+    letterSpacings: Record<'short' | 'normal' | 'space', string>;
+    buttonSmall: TypographyStyle;
+    buttonMedium: TypographyStyle;
+    buttonLarge: TypographyStyle;
+    label1: TypographyStyle;
+    label2: TypographyStyle;
+    placeholder: TypographyStyle;
+    hint: TypographyStyle;
+    value1: TypographyStyle;
+    value2: TypographyStyle;
+    value3: TypographyStyle;
+    value4: TypographyStyle;
+    value5: TypographyStyle;
+    value6: TypographyStyle;
+  }
+
+  interface TypographyVariantsOptions {
+    fontFamilies?: Record<'main' | 'code', string>;
+    fontSizes?: Record<'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl', number>;
+    lineHeights?: Record<
+      'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl',
+      number | string
+    >;
+    letterSpacings?: Record<'short' | 'normal' | 'space', string>;
+    buttonSmall?: TypographyStyle;
+    buttonMedium?: TypographyStyle;
+    buttonLarge?: TypographyStyle;
+    label1?: TypographyStyle;
+    label2?: TypographyStyle;
+    placeholder?: TypographyStyle;
+    hint?: TypographyStyle;
+    value1?: TypographyStyle;
+    value2?: TypographyStyle;
+    value3?: TypographyStyle;
+    value4?: TypographyStyle;
+    value5?: TypographyStyle;
+    value6?: TypographyStyle;
+  }
+}
+
+declare module '@mui/material/Typography' {
+  interface TypographyPropsVariantOverrides {
+    // remove defaults
+    h6: false;
+    button: false;
+    caption: false;
+    overline: false;
+    // add custom
+    fontFamilies: true;
+    fontSizes: true;
+    lineHeights: true;
+    letterSpacings: true;
+    buttonSmall: true;
+    buttonMedium: true;
+    buttonLarge: true;
+    label1: true;
+    label2: true;
+    placeholder: true;
+    hint: true;
+    value1: true;
+    value2: true;
+    value3: true;
+    value4: true;
+    value5: true;
+    value6: true;
+  }
+}
+
+declare module '@mui/material/styles/createMixins' {
+  interface VerticalDrawerMixin {
+    width: CSSProperties;
+    flexShrink: number;
+    '& .MuiDrawer-paper': {
+      width: CSSProperties;
+    };
+  }
+
+  interface Mixins {
+    paddings: {
+      page: {
+        paddingX: CSSProperties;
+        paddingY: CSSProperties;
+      };
+      section: {
+        paddingX: CSSProperties;
+        paddingY: CSSProperties;
+      };
+    };
+    centered: {
+      display: string;
+      justifyContent: string;
+      alignItems: string;
+    };
+    gradients: {
+      colorCloud: string;
+    };
+  }
+}
+
+// declare module '@mui/material/AppBar' {
+//   interface AppBarPropsColorOverrides {
+//     default: true;
+//     inherit: false;
+//     primary: false;
+//     secondary: false;
+//     transparent: false;
+//   }
+// }
+
+declare module '@mui/material/Alert' {
+  interface AlertPropsVariantOverrides {
+    outlined: false;
+  }
+}
+
+declare module '@mui/material/Avatar' {
+  interface AvatarPropsVariantOverrides {
+    large: true;
+    medium: true;
+    small: true;
+  }
+}
+
+declare module '@mui/material/AvatarGroup' {
+  // AvatarGroup variants must match Avatar variants exactly
+  interface AvatarGroupPropsVariantOverrides {
+    // add customs
+    large: true;
+    medium: true;
+    small: true;
+  }
+}
+
+// declare module '@mui/material/Badge' {
+//   interface BadgePropsColorOverrides {
+//     default: false;
+//     error: true;
+//     info: false;
+//     primary: false;
+//     secondary: false;
+//     success: false;
+//     warning: false;
+//   }
+// }
+
+// declare module '@mui/material/Button' {
+//   interface ButtonPropsVariantOverrides {
+//     alert: true;
+//   }
+// }
+
+// declare module '@mui/material/ButtonGroup' {
+//   interface ButtonGroupPropsColorOverrides {
+//     error: false;
+//     info: false;
+//     inherit: false;
+//     primary: false;
+//     success: false;
+//     warning: false;
+//   }
+
+//   interface ButtonGroupPropsVariantOverrides {
+//     outlined: false;
+//     text: false;
+//   }
+// }
+
+// declare module '@mui/material/Checkbox' {
+//   interface CheckboxClasses {
+//     /** Styles applied to the root element if the color is error. */
+//     colorError: string;
+//   }
+//   interface CheckboxPropsColorOverrides {
+//     default: false;
+//     info: false;
+//     inherit: false;
+//     secondary: false;
+//     success: false;
+//     warning: false;
+//   }
+
+//   interface CheckboxPropsSizeOverrides {
+//     small: false;
+//   }
+// }
+
+// declare module '@mui/material/CircularProgress' {
+//   interface CircularProgressPropsColorOverrides {
+//     error: false;
+//     info: false;
+//     inherit: false;
+//     primary: true;
+//     secondary: false;
+//     success: false;
+//     warning: false;
+//   }
+// }
+
+declare module '@mui/material/Chip' {
+  interface ChipPropsVariantOverrides {
+    active: true;
+  }
+
+  interface ChipPropsSizeOverrides {
+    large: true;
+  }
+}
+
+// declare module '@mui/material/IconButton' {
+//   interface IconButtonPropsColorOverrides {
+//     default: false;
+//     error: false;
+//     info: false;
+//     inherit: false;
+//     success: false;
+//     warning: false;
+//   }
+//   interface IconButtonPropsSizeOverrides {
+//     xSmall: true;
+//   }
+// }
+
+// declare module '@mui/material/InputBase' {
+//   interface InputBasePropsColorOverrides {
+//     error: false;
+//     info: false;
+//     secondary: false;
+//     warning: false;
+//   }
+// }
+
+// declare module '@mui/material/LinearProgress' {
+//   interface LinearProgressPropsColorOverrides {
+//     error: true;
+//     info: false;
+//     inherit: false;
+//     primary: true;
+//     secondary: false;
+//     success: false;
+//     warning: false;
+//   }
+// }
+
+// declare module '@mui/material/OutlinedInput' {
+//   interface OutlinedInputClasses {
+//     /** Styles applied to the root element if the color is primary. */
+//     colorPrimary: string;
+//     /** Styles applied to the root element if the color is success. */
+//     colorSuccess: string;
+//   }
+// }
+
+// declare module '@mui/material/Pagination' {
+//   interface PaginationPropsVariantOverrides {
+//     outline: false;
+//   }
+
+//   interface PaginationPropsColorOverrides {
+//     primary: false;
+//     secondary: false;
+//   }
+// }
+
+// declare module '@mui/material/Radio' {
+//   interface RadioClasses {
+//     /** Styles applied to the root element if the color is error. */
+//     colorError: string;
+//   }
+// }
+
+// declare module '@mui/material/SvgIcon' {
+//   interface SvgIconPropsColorOverrides {
+//     brand: true;
+//   }
+// }
+
+// declare module '@mui/material/Switch' {
+//   interface SwitchPropsColorOverrides {
+//     default: false;
+//     error: false;
+//     info: false;
+//     secondary: false;
+//     success: false;
+//     warning: false;
+//   }
+// }
+
+// declare module '@mui/material/TextField' {
+//   interface TextFieldPropsColorOverrides {
+//     error: false;
+//     info: false;
+//     secondary: false;
+//     warning: false;
+//   }
+// }
+
+// declare module '@mui/material/ToggleButton' {
+//   interface ToggleButtonPropsColorOverrides {
+//     error: false;
+//     info: false;
+//     primary: false;
+//     standard: false;
+//     success: false;
+//     warning: false;
+//   }
+// }
+
+// declare module '@mui/material/ToggleButtonGroup' {
+//   interface ToggleButtonGroupPropsColorOverrides {
+//     error: false;
+//     info: false;
+//     primary: false;
+//     standard: false;
+//     success: false;
+//     warning: false;
+//   }
+// }
diff --git a/libs/dhedge/theme/src/mui/typography.ts b/libs/dhedge/theme/src/mui/typography.ts
new file mode 100644
index 00000000..5f066094
--- /dev/null
+++ b/libs/dhedge/theme/src/mui/typography.ts
@@ -0,0 +1,186 @@
+import '@fontsource/plus-jakarta-sans';
+import '@fontsource/plus-jakarta-sans/variable.css';
+import '@fontsource/red-hat-mono';
+import '@fontsource/red-hat-mono/variable.css';
+
+import {
+  fontFamilies,
+  fontSizes,
+  fontWeights,
+  letterSpacings,
+  lineHeights,
+} from '../constants';
+
+import type { ThemeOptions } from '@mui/material';
+
+export const getTypographyOptions = (base?: ThemeOptions): ThemeOptions => ({
+  typography: {
+    fontFamily: fontFamilies.main,
+
+    fontWeightLight: fontWeights.regular,
+    fontWeightRegular: fontWeights.medium,
+    fontWeightMedium: fontWeights.semibold,
+    fontWeightBold: fontWeights.bold,
+
+    fontSizes,
+    fontFamilies,
+    lineHeights,
+    letterSpacings,
+
+    h1: {
+      fontFamily: fontFamilies.main,
+      fontSize: 40,
+      lineHeight: 1.25,
+      fontWeight: fontWeights.extrabold,
+    },
+    h2: {
+      fontFamily: fontFamilies.main,
+      fontSize: 32,
+      lineHeight: 1.25,
+      fontWeight: fontWeights.extrabold,
+    },
+    h3: {
+      fontFamily: fontFamilies.main,
+      fontSize: 28,
+      lineHeight: 1.25,
+      fontWeight: fontWeights.extrabold,
+    },
+    h4: {
+      fontFamily: fontFamilies.main,
+      fontSize: 24,
+      lineHeight: 1.25,
+      fontWeight: fontWeights.bold,
+    },
+    h5: {
+      fontFamily: fontFamilies.main,
+      fontSize: 18,
+      lineHeight: 1.25,
+      fontWeight: fontWeights.bold,
+    },
+    subtitle1: {
+      fontFamily: fontFamilies.main,
+      fontSize: 14,
+      lineHeight: 1.2,
+      fontWeight: fontWeights.medium,
+    },
+    subtitle2: {
+      fontFamily: fontFamilies.main,
+      fontSize: 12,
+      lineHeight: 1.2,
+      fontWeight: fontWeights.medium,
+      color:
+        base.palette.mode === 'light'
+          ? base.palette.grey[600]
+          : base.palette.grey[500],
+    },
+    body1: {
+      fontFamily: fontFamilies.main,
+      fontSize: 16,
+      lineHeight: 1.625,
+      fontWeight: fontWeights.medium,
+    },
+    body2: {
+      fontFamily: fontFamilies.main,
+      fontSize: 14,
+      lineHeight: 1.625,
+      fontWeight: fontWeights.medium,
+    },
+    buttonSmall: {
+      fontFamily: fontFamilies.main,
+      fontSize: 12,
+      lineHeight: 1,
+      textTransform: 'none',
+      fontWeight: fontWeights.bold,
+    },
+    button: {
+      fontFamily: fontFamilies.main,
+      fontSize: 14,
+      lineHeight: 1,
+      textTransform: 'none',
+      fontWeight: fontWeights.bold,
+    },
+    buttonMedium: {
+      fontFamily: fontFamilies.main,
+      fontSize: 14,
+      lineHeight: 1,
+      textTransform: 'none',
+      fontWeight: fontWeights.bold,
+    },
+    buttonLarge: {
+      fontFamily: fontFamilies.main,
+      fontSize: 16,
+      lineHeight: 1,
+      textTransform: 'none',
+      fontWeight: fontWeights.bold,
+    },
+    label1: {
+      fontFamily: fontFamilies.main,
+      fontSize: 14,
+      lineHeight: 1.25,
+      fontWeight: fontWeights.bold,
+      textTransform: 'uppercase',
+      letterSpacing: '5%',
+    },
+    label2: {
+      fontFamily: fontFamilies.main,
+      fontSize: 14,
+      lineHeight: 1.25,
+      fontWeight: fontWeights.bold,
+      letterSpacing: '5%',
+    },
+    placeholder: {
+      fontFamily: fontFamilies.main,
+      fontSize: 14,
+      lineHeight: 1.25,
+      fontWeight: fontWeights.regular,
+    },
+    hint: {
+      fontFamily: fontFamilies.main,
+      fontSize: 12,
+      lineHeight: 1.25,
+      fontWeight: fontWeights.semibold,
+    },
+    value1: {
+      fontFamily: fontFamilies.code,
+      fontSize: 28,
+      lineHeight: 1.25,
+      letterSpacing: '-4%',
+      fontWeight: fontWeights.semibold,
+    },
+    value2: {
+      fontFamily: fontFamilies.code,
+      fontSize: 24,
+      lineHeight: 1.25,
+      letterSpacing: '-4%',
+      fontWeight: fontWeights.semibold,
+    },
+    value3: {
+      fontFamily: fontFamilies.code,
+      fontSize: 18,
+      lineHeight: 1.25,
+      letterSpacing: '-4%',
+      fontWeight: fontWeights.semibold,
+    },
+    value4: {
+      fontFamily: fontFamilies.code,
+      fontSize: 16,
+      lineHeight: 1.25,
+      letterSpacing: '-4%',
+      fontWeight: fontWeights.semibold,
+    },
+    value5: {
+      fontFamily: fontFamilies.code,
+      fontSize: 14,
+      lineHeight: 1.25,
+      letterSpacing: '-4%',
+      fontWeight: fontWeights.semibold,
+    },
+    value6: {
+      fontFamily: fontFamilies.code,
+      fontSize: 12,
+      lineHeight: 1.25,
+      letterSpacing: '-4%',
+      fontWeight: fontWeights.semibold,
+    },
+  },
+});
diff --git a/libs/dhedge/theme/src/mui/utils.ts b/libs/dhedge/theme/src/mui/utils.ts
new file mode 100644
index 00000000..54c07fb3
--- /dev/null
+++ b/libs/dhedge/theme/src/mui/utils.ts
@@ -0,0 +1,30 @@
+import type { Theme } from '@mui/material';
+import type { SystemStyleObject } from '@mui/system';
+
+export interface FocusFrameOptions {
+  borderWidth?: string;
+  borderRadius?: string;
+  borderColor?: string;
+  offset?: number;
+  borderStyle?: string;
+}
+
+export const focusFrame = ({
+  borderWidth = '2px',
+  borderRadius = 'inherit',
+  offset = 1,
+  borderColor,
+  borderStyle = 'solid',
+}: FocusFrameOptions): SystemStyleObject<Theme> => ({
+  borderStyle,
+  ...(borderColor && { borderColor }),
+  borderWidth,
+  borderRadius,
+  content: '""',
+  height: `calc(100% + ${2 * offset}px)`,
+  width: `calc(100% + ${2 * offset}px)`,
+  position: 'absolute',
+  top: `${-offset}px`,
+  left: `${-offset}px`,
+  zIndex: 1,
+});
diff --git a/libs/dhedge/theme/src/rainbowkit/index.ts b/libs/dhedge/theme/src/rainbowkit/index.ts
new file mode 100644
index 00000000..5efdb7a8
--- /dev/null
+++ b/libs/dhedge/theme/src/rainbowkit/index.ts
@@ -0,0 +1,28 @@
+import { darkTheme, lightTheme } from '@rainbow-me/rainbowkit';
+import { mergeDeepRight } from 'ramda';
+
+import { colors } from '../constants';
+
+import type { RecursivePartial } from '@frontend/shared-utils';
+import type { Theme } from '@rainbow-me/rainbowkit';
+
+const light = lightTheme();
+const dark = darkTheme();
+
+const common: RecursivePartial<Theme> = {
+  fonts: { body: 'Plus Jakarta Sans' },
+  colors: {
+    accentColor: colors.blue02,
+  },
+};
+
+export const rbkLightTheme: Theme = mergeDeepRight(light, common);
+
+export const rbkDarkTheme: Theme = mergeDeepRight(
+  mergeDeepRight(dark, common),
+  {
+    colors: {
+      modalBackground: colors.darkBlue09,
+    },
+  },
+);
diff --git a/libs/dhedge/theme/tsconfig.json b/libs/dhedge/theme/tsconfig.json
new file mode 100644
index 00000000..1bd2664f
--- /dev/null
+++ b/libs/dhedge/theme/tsconfig.json
@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "jsx": "react-jsx",
+    "jsxImportSource": "@emotion/react",
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitOverride": true,
+    "noImplicitReturns": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "resolveJsonModule": true,
+    "strict": false
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ],
+  "extends": "../../../tsconfig.base.json"
+}
diff --git a/libs/dhedge/theme/tsconfig.lib.json b/libs/dhedge/theme/tsconfig.lib.json
new file mode 100644
index 00000000..c59c3ff1
--- /dev/null
+++ b/libs/dhedge/theme/tsconfig.lib.json
@@ -0,0 +1,22 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "types": ["node", "vite/client"]
+  },
+  "files": [
+    "../../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
+    "../../../node_modules/@nrwl/react/typings/image.d.ts"
+  ],
+  "exclude": [
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "**/*.spec.tsx",
+    "**/*.test.tsx",
+    "**/*.spec.js",
+    "**/*.test.js",
+    "**/*.spec.jsx",
+    "**/*.test.jsx"
+  ],
+  "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
+}
diff --git a/libs/dhedge/theme/vite.config.ts b/libs/dhedge/theme/vite.config.ts
new file mode 100644
index 00000000..21e8d9f3
--- /dev/null
+++ b/libs/dhedge/theme/vite.config.ts
@@ -0,0 +1,49 @@
+/// <reference types="vitest" />
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import viteTsConfigPaths from 'vite-tsconfig-paths';
+import dts from 'vite-plugin-dts';
+import { join } from 'path';
+
+export default defineConfig({
+  cacheDir: '../../../node_modules/.vite/dhedge-theme',
+
+  plugins: [
+    dts({
+      entryRoot: 'src',
+      tsConfigFilePath: join(__dirname, 'tsconfig.lib.json'),
+      skipDiagnostics: true,
+    }),
+    react(),
+    viteTsConfigPaths({
+      root: '../../../',
+    }),
+  ],
+
+  // Uncomment this if you are using workers.
+  // worker: {
+  //  plugins: [
+  //    viteTsConfigPaths({
+  //      root: '../../../',
+  //    }),
+  //  ],
+  // },
+
+  // Configuration for building your library.
+  // See: https://vitejs.dev/guide/build.html#library-mode
+  build: {
+    lib: {
+      // Could also be a dictionary or array of multiple entry points.
+      entry: 'src/index.ts',
+      name: 'dhedge-theme',
+      fileName: 'index',
+      // Change this to the formats you want to support.
+      // Don't forgot to update your package.json as well.
+      formats: ['es', 'cjs'],
+    },
+    rollupOptions: {
+      // External packages that should not be bundled into your library.
+      external: ['react', 'react-dom', 'react/jsx-runtime'],
+    },
+  },
+});
diff --git a/libs/dhedge/withdraw/.eslintrc.json b/libs/dhedge/withdraw/.eslintrc.json
new file mode 100644
index 00000000..df3772fb
--- /dev/null
+++ b/libs/dhedge/withdraw/.eslintrc.json
@@ -0,0 +1,18 @@
+{
+  "extends": ["plugin:@nrwl/nx/react", "../../../.eslintrc.base.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}
diff --git a/libs/dhedge/withdraw/README.md b/libs/dhedge/withdraw/README.md
new file mode 100644
index 00000000..3dcc30be
--- /dev/null
+++ b/libs/dhedge/withdraw/README.md
@@ -0,0 +1,7 @@
+# dhedge-withdraw
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test dhedge-withdraw` to execute the unit tests via [Vitest](https://vitest.dev/).
diff --git a/libs/dhedge/withdraw/package.json b/libs/dhedge/withdraw/package.json
new file mode 100644
index 00000000..458207a5
--- /dev/null
+++ b/libs/dhedge/withdraw/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "@frontend/dhedge-withdraw",
+  "version": "0.0.1",
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./index.mjs",
+      "require": "./index.js"
+    }
+  }
+}
diff --git a/libs/dhedge/withdraw/project.json b/libs/dhedge/withdraw/project.json
new file mode 100644
index 00000000..5c34c84d
--- /dev/null
+++ b/libs/dhedge/withdraw/project.json
@@ -0,0 +1,40 @@
+{
+  "name": "dhedge-withdraw",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/dhedge/withdraw/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "lint": {
+      "executor": "@nrwl/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["libs/dhedge/withdraw/**/*.{ts,tsx,js,jsx}"]
+      }
+    },
+    "build": {
+      "executor": "@nrwl/vite:build",
+      "outputs": ["{options.outputPath}"],
+      "defaultConfiguration": "production",
+      "options": {
+        "outputPath": "dist/libs/dhedge/withdraw"
+      },
+      "configurations": {
+        "development": {
+          "mode": "development"
+        },
+        "production": {
+          "mode": "production"
+        }
+      }
+    },
+    "i18n-extract": {
+      "executor": "nx:run-commands",
+      "options": {
+        "commands": [
+          "yarn run formatjs extract 'libs/dhedge/withdraw/src/**/*.{ts,tsx}' --out-file i18n-extractions/libs-dhedge-withdraw.json --id-interpolation-pattern '[sha512:contenthash:base64:6]'"
+        ]
+      }
+    }
+  }
+}
diff --git a/libs/dhedge/withdraw/src/index.ts b/libs/dhedge/withdraw/src/index.ts
new file mode 100644
index 00000000..2cdc32a7
--- /dev/null
+++ b/libs/dhedge/withdraw/src/index.ts
@@ -0,0 +1 @@
+export { Withdraw } from './views/Withdraw';
diff --git a/libs/dhedge/withdraw/src/views/Withdraw.tsx b/libs/dhedge/withdraw/src/views/Withdraw.tsx
new file mode 100644
index 00000000..a3d8f8f4
--- /dev/null
+++ b/libs/dhedge/withdraw/src/views/Withdraw.tsx
@@ -0,0 +1,5 @@
+import { FC } from 'react';
+
+export const Withdraw: FC = () => {
+  return <>dHEDGE Withdraw</>;
+};
diff --git a/libs/dhedge/withdraw/tsconfig.json b/libs/dhedge/withdraw/tsconfig.json
new file mode 100644
index 00000000..1bd2664f
--- /dev/null
+++ b/libs/dhedge/withdraw/tsconfig.json
@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "jsx": "react-jsx",
+    "jsxImportSource": "@emotion/react",
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitOverride": true,
+    "noImplicitReturns": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "resolveJsonModule": true,
+    "strict": false
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ],
+  "extends": "../../../tsconfig.base.json"
+}
diff --git a/libs/dhedge/withdraw/tsconfig.lib.json b/libs/dhedge/withdraw/tsconfig.lib.json
new file mode 100644
index 00000000..c59c3ff1
--- /dev/null
+++ b/libs/dhedge/withdraw/tsconfig.lib.json
@@ -0,0 +1,22 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "types": ["node", "vite/client"]
+  },
+  "files": [
+    "../../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
+    "../../../node_modules/@nrwl/react/typings/image.d.ts"
+  ],
+  "exclude": [
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "**/*.spec.tsx",
+    "**/*.test.tsx",
+    "**/*.spec.js",
+    "**/*.test.js",
+    "**/*.spec.jsx",
+    "**/*.test.jsx"
+  ],
+  "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
+}
diff --git a/libs/dhedge/withdraw/vite.config.ts b/libs/dhedge/withdraw/vite.config.ts
new file mode 100644
index 00000000..ba1d9c67
--- /dev/null
+++ b/libs/dhedge/withdraw/vite.config.ts
@@ -0,0 +1,49 @@
+/// <reference types="vitest" />
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import viteTsConfigPaths from 'vite-tsconfig-paths';
+import dts from 'vite-plugin-dts';
+import { join } from 'path';
+
+export default defineConfig({
+  cacheDir: '../../../node_modules/.vite/dhedge-withdraw',
+
+  plugins: [
+    dts({
+      entryRoot: 'src',
+      tsConfigFilePath: join(__dirname, 'tsconfig.lib.json'),
+      skipDiagnostics: true,
+    }),
+    react(),
+    viteTsConfigPaths({
+      root: '../../../',
+    }),
+  ],
+
+  // Uncomment this if you are using workers.
+  // worker: {
+  //  plugins: [
+  //    viteTsConfigPaths({
+  //      root: '../../../',
+  //    }),
+  //  ],
+  // },
+
+  // Configuration for building your library.
+  // See: https://vitejs.dev/guide/build.html#library-mode
+  build: {
+    lib: {
+      // Could also be a dictionary or array of multiple entry points.
+      entry: 'src/index.ts',
+      name: 'dhedge-withdraw',
+      fileName: 'index',
+      // Change this to the formats you want to support.
+      // Don't forgot to update your package.json as well.
+      formats: ['es', 'cjs'],
+    },
+    rollupOptions: {
+      // External packages that should not be bundled into your library.
+      external: ['react', 'react-dom', 'react/jsx-runtime'],
+    },
+  },
+});
diff --git a/package.json b/package.json
index 82f2502b..0426ed95 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,9 @@
   "scripts": {
     "start": "nx serve mstable",
     "start:lts": "nx serve lts",
+    "start:dhedge": "nx serve dhedge",
     "build": "nx build mstable",
+    "build:dhedge": "nx build dhedge",
     "i18n:clear": "rimraf i18n-extractions",
     "codegen": "nx run mstable-data-access:codegen",
     "lint": "nx lint",
diff --git a/tsconfig.base.json b/tsconfig.base.json
index 04463280..1913ace8 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -17,6 +17,8 @@
     "strict": false,
     "noPropertyAccessFromIndexSignature": false,
     "paths": {
+      "@frontend/dhedge-theme": ["libs/dhedge/theme/src/index.ts"],
+      "@frontend/dhedge-withdraw": ["libs/dhedge/withdraw/src/index.ts"],
       "@frontend/lts-burn": ["libs/lts/burn/src/index.ts"],
       "@frontend/lts-constants": ["libs/lts/constants/src/index.ts"],
       "@frontend/lts-settings": ["libs/lts/settings/src/index.ts"],

From 8c96cfd91640e18b1b3abaa3246987c277fc3c5f Mon Sep 17 00:00:00 2001
From: Dmitry Lobachevsky <dmitriylobachevskiy@gmail.com>
Date: Wed, 11 Sep 2024 19:48:16 +0200
Subject: [PATCH 02/12] feat(dHEDGE V1 Withdraw): add dHEDGE V1 tokens redeem
 page

---
 apps/dhedge/public/favicon.ico                | Bin 15086 -> 15086 bytes
 apps/dhedge/src/clients/wagmi.ts              |  10 +-
 apps/dhedge/src/components/Footer.tsx         |  27 +-
 .../src/components/ThemeSwitchButton.tsx      |  22 +
 apps/dhedge/src/components/Topnav.tsx         |  30 +-
 apps/dhedge/vite.config.ts                    |   3 +
 libs/dhedge/theme/.eslintrc.json              |   2 +-
 libs/dhedge/theme/project.json                |  16 +-
 libs/dhedge/theme/src/constants.ts            |  64 +-
 libs/dhedge/theme/src/mui/typography.ts       |  57 +-
 libs/dhedge/theme/src/rainbowkit/index.ts     |   2 +-
 libs/dhedge/theme/tsconfig.json               |  15 +-
 libs/dhedge/theme/tsconfig.lib.json           |  11 +-
 libs/dhedge/theme/vite.config.ts              |  25 +-
 libs/dhedge/withdraw/project.json             |  16 +-
 .../InputStep/components/ApprovalButton.tsx   | 137 ++++
 .../InputStep/components/SubmitButton.tsx     | 161 ++++
 .../InputStep/components/TokenInputs.tsx      | 152 ++++
 .../BurnForm/components/InputStep/index.tsx   |  52 ++
 .../BurnForm/components/StepIndicator.tsx     |  74 ++
 .../BurnForm/components/WithdrawStep.tsx      |  54 ++
 .../withdraw/src/components/BurnForm/hooks.ts |  37 +
 .../src/components/BurnForm/index.tsx         |  48 ++
 .../withdraw/src/components/BurnForm/state.ts | 217 ++++++
 .../src/constants/abis/L1ComptrollerAbi.ts    |   1 +
 .../src/constants/abis/L2ComptrollerAbi.ts    | 688 ++++++++++++++++++
 .../src/constants/abis/PoolLogicAbi.ts        | 121 +++
 .../withdraw/src/constants/contracts.ts       |  19 +
 libs/dhedge/withdraw/src/constants/index.ts   |   8 +
 libs/dhedge/withdraw/src/constants/tokens.ts  |  22 +
 .../src/hooks/useL1VaultAddressWithBalance.ts |  24 +
 libs/dhedge/withdraw/src/views/Withdraw.tsx   |   8 +-
 libs/dhedge/withdraw/tsconfig.json            |  15 +-
 libs/dhedge/withdraw/vite.config.ts           |  25 +-
 libs/shared/constants/src/dhedge.ts           |   5 +
 libs/shared/constants/src/mstable.ts          |   1 -
 libs/shared/hooks/src/index.ts                |   1 +
 libs/shared/hooks/src/useDebounce.ts          |  17 +
 .../src/components/dhedge/dhedge-logo.svg     |   1 +
 .../icons/src/components/dhedge/index.tsx     |   9 +
 libs/shared/icons/src/index.ts                |   1 +
 package.json                                  |   2 +
 yarn.lock                                     |  10 +
 43 files changed, 2030 insertions(+), 180 deletions(-)
 create mode 100644 apps/dhedge/src/components/ThemeSwitchButton.tsx
 create mode 100644 libs/dhedge/withdraw/src/components/BurnForm/components/InputStep/components/ApprovalButton.tsx
 create mode 100644 libs/dhedge/withdraw/src/components/BurnForm/components/InputStep/components/SubmitButton.tsx
 create mode 100644 libs/dhedge/withdraw/src/components/BurnForm/components/InputStep/components/TokenInputs.tsx
 create mode 100644 libs/dhedge/withdraw/src/components/BurnForm/components/InputStep/index.tsx
 create mode 100644 libs/dhedge/withdraw/src/components/BurnForm/components/StepIndicator.tsx
 create mode 100644 libs/dhedge/withdraw/src/components/BurnForm/components/WithdrawStep.tsx
 create mode 100644 libs/dhedge/withdraw/src/components/BurnForm/hooks.ts
 create mode 100644 libs/dhedge/withdraw/src/components/BurnForm/index.tsx
 create mode 100644 libs/dhedge/withdraw/src/components/BurnForm/state.ts
 create mode 100644 libs/dhedge/withdraw/src/constants/abis/L1ComptrollerAbi.ts
 create mode 100644 libs/dhedge/withdraw/src/constants/abis/L2ComptrollerAbi.ts
 create mode 100644 libs/dhedge/withdraw/src/constants/abis/PoolLogicAbi.ts
 create mode 100644 libs/dhedge/withdraw/src/constants/contracts.ts
 create mode 100644 libs/dhedge/withdraw/src/constants/index.ts
 create mode 100644 libs/dhedge/withdraw/src/constants/tokens.ts
 create mode 100644 libs/dhedge/withdraw/src/hooks/useL1VaultAddressWithBalance.ts
 create mode 100644 libs/shared/hooks/src/useDebounce.ts
 create mode 100644 libs/shared/icons/src/components/dhedge/dhedge-logo.svg
 create mode 100644 libs/shared/icons/src/components/dhedge/index.tsx

diff --git a/apps/dhedge/public/favicon.ico b/apps/dhedge/public/favicon.ico
index 317ebcb2336e0833a22dddf0ab287849f26fda57..646e5f2184d9d224a27d34d8c30e80972b502871 100644
GIT binary patch
literal 15086
zcmeI3YlszP7{}jrvy~**EVImVBc<p98kx{-B}lqJgmn23WQLGXkr84>p`fxEQP77d
zit1Z8`&M*;WT8Z|sHlt}2uZ`}f*akmww-?eIrEIq8PDuFXU{ov&c+$|`8@CS`M>YX
zyfgD2H-w(h8)nW7*nzO-m=G=wAq)(Z(l3+$Jb8;2CFzABET0|1In<$u7NvYl2-KT3
zy+oYmpU+;5S%{sJ_*PWWTAhsDMtV1FfRoiQQy%x_@@C=Bcj+hbBlsJxO4={LKNqHg
zwV#Q9C+vi+F5lW8B5!%p{(k)LVLL2M@|NSPj$%Cq@qw+>eqB;eb?-~sUxzP^ar;v1
zc&ydh-&>`<#_}(Wg6a41tF=FscB|nHxIBqfPkTFG$I*UTmG;u8@o%&7C-tq5IGgfH
z@vkQTD|iCV_wBQOPWuzdKLg@e*)~3%(>~RxKE^vLwI8p3wv6_={xnZwE!1^TU)TR;
z_ypEKU5Dx?%*CFT*ZzelgrUPBY*__o9?gF8M#b4MSWZM*>&yTw1FcW-!NQYWXG#UB
zCevowg<0l7*UybMCz=<dnIiJ~B>z%42z%hsB(3|dDTn&;WILto68H`5+LV^J;0j-t
zblQ*4&+~nK{8Qi-n3t_jUN*kz*x>6@FO6@$FZaHcW6uJuJGy6nh6{Z?`Q+urU+?Qu
zZw5R7D?saOnVwADg_P?V_zl>2G_Q+&J^AF-8vi8f>KZu=UxJ=7*MjnUe7~eOg2gr4
zjQF2t`u&sitH4{tk%P3>DT`~i74g;gM=;|^^mtB-jQ?Rbena!G_3wAE>%?sK{?m1y
zz5Z0U(fMCYAK$ex{#0Twfk#01x4lnktw|63R*m1UWAli!3f_jhAU*I~65j$SmSZ~p
z2};|6-_rOlj@Mz?%4;<Kuk>-$`kw}<;xrIn*V7lU31(FZlUrPCeClbgw!jFy2`eFf
z-^5P%plwa_uNZI{3_|=KmE=u0wi?n$J@HjPrJ=w{<B7y?MqKNo*7#Px*|r<Mw(GCi
z^KShy|N7R}^U0piW{-OQTAOBC;`YHkunYbGi@zJc?ESBqajh?6*!`^M(lzijd<)Xk
zZ}nPfiDMdMdqCee+QW+XXj&QD_f0&nBldlHEq=tY3x>tUXdi4IUOU!1ymm%a4pC<e
zqLGw-{K06XKN^=&$|Dg)+NWTPG~5p9KE;CkeG00Tjali*c5vQw&Gh>7H<`wO?qlI$
zxEplsPl5EjboyA(sx|Cg7z3>x&w%zowU3>SLw?bRkDnKtI?}JbAzOQ8wHAK>>)<@l
z_e^1jVmWku<Q|k&((lKzpE?_0N^U1jDv(ac0KWEzAB5c4lvUHOvAhnwm1L5i#;jCc
zEzh^d*S&WEXs_jKP;Bi5mF-3OJ}Ik3zxv42-%r_u?iJeE*rh>x4o`v3w?F?ck#41a
z?SbxuO`v_h<H2;r*3Xyssi*nA5?+B{!0R@@)%vwJV6n8HHw@aRxCqj3Ew9^r$~EuW
zSFrY#Y?1nXeC-Xt1NvQNj%oIm{Ar-I+qcX5?b2^L^sRrr*KPhJ(f<!RZ!pc?cJ;^W
zgzlm2^ViP3+40s-fB#y2Z@cr~+V#IX|DC;l7IFPodj@v${i}ETXF<O~`gOzmovdH)
zSlY+E38eE!@Y>~fx_*0K)VGe_yS9S%_jT<`|7(!<{@m8}$DZftvoV;ROWsP*v+X(P
zX#F-0S+sieyVdDX@f(8tj+lS1-~7xtEW6Bhvi>rmIf(-FYwf6b?sFv7mEA)9TF*a*
z+a{U*pU}G<Zid+q--~rkY8{p7ztQ{mJ^Ii$+8!8!C7^fubPcIPPTf_B(};fQd<a&<
zJV-UmFXA9hBl>%2-`2hF2KA@&UBp~hiqVMvO8pg`*VSM2jF-pj&VTuQ6rJkMf6+5u
z9`AoJ|93Ek?Dw)y=kA}B&qRAtXkQ9DK>rud>o&jB_3Ir#zZorq$3cHPW8eK6!(`B(
zzQ>?f?~%8H-r;`${ms*g_FNtHMMb9{hxTF?!FpIyUr+6=jb1+v`7Qf?ZS_cPEX|A)
z|7RioCh9=!gs|7_pd8YDn1k3}>`=*$_Q@WIMq;}+8ZO!SiS28J9qHX0_dA-{XmcqY
s?MrMlj-4Mur1Fg=`#$4R`qRW}oJu#>jwJn!B{mu=^&kC}*m!>b17P&+kpKVy

literal 15086
zcmeI332;<p632UzfWZqabw#Bx7P_!_0dhki0VLs6ku&5D2}uYcfO5%@G2s;D7LY@f
zc(GokAnWR)DHUDuUROCpjmsH4pjZ`wkZ*te^4>U^%p|z7g|#(P)qFEA@4f!_@qOK2
z_lJl}!lhL!VT_U|uN7%8B2iKH??xhDa;*`g{yjTFWHvXn;2s{4R7kH|pKGdy(7z!K
zgftM+Ku7~24TLlh(!g)gz|foI94G^t2^IO$uvX$3(OR0<_5L2sB)lMAMy|+`xodJ{
z_Uh_1m)~h?a;2W{dmhM;u!YGo=)OdmId_B<%^V^{o<UMHeV`Og=_iGE^^rgN-XH8c
zcrSonhm1cBZ!ITAw2}V7o^`H|ik40(UF5*b;bPY1iFs&D4f>vI@y`7^g1_V9G}*f#
zNzA<oVrCB$Q*?(I_ibXP4UktS^^r?_?+^Ap7=Cnb(EW*on`_5Eu9uvb8!Jzxb`g^j
zEoNy(P#NAphQ^8mTQpjkC7Y1JEKU`3KQhc4A!g=KG1%Z+_pQ=17+(MDwc$@_BPT}I
zjelf*FFBSID`t2HG2{A(S({r!|7w#;sOaIb;$obLPn|>tvou}I!W1#{M^@ROc(BZ!
z+F!!_aR&Px3_reO(EW+TwlW~tv*2zr?iP7(d~a~yA|@*a89IUke+c472NXM0wiX{-
zl`UrZC^1XYyf%1u)-Y)jj9;MZ!SLfd2Hl?o|80Su%Z?To_=^g_Jt0oa#CT*tjx>BI
z16wec&AOWNK<#i0Qd=1O$fymLRoUR*%;h@*@v7}wApDl^w*h}!sYq%kw+DKDY)@&A
z@9$ULEB3qkR#85`lb8#WZw=@})#kQig9oqy^I$dj&k4jU&^2(M3q{n1AKeGUKPFbr
z1^<)aH;VsG@J|B&l>UtU#Ejv3GIqERzYgL@UOAWtW<{p#zy`WyJgpCy8$c_e%wYJL
zyGHRRx38)HyjU3y{-4z6)pzb>&Q1pR)B&u01F-|&Gx4EZWK$nkUkOI|(D4UHOXg_-
zw{OBf!oWQUn)Pe(=f=nt=zkmdjpO^o8ZZ9o_|4tW1ni+Un9iCW47*-ut$KQOww!;u
z`0q)$s6IZO!~9$e_P9X!hqLxu`fpcL|2f^I5d4*a@Dq28;@2271v_N+5HqYZ>x;&O
z05*7JT)mUe&%S0@UD)@&8SmQrMtsDfZT;fkdA!r(S=}Oz>iP)w=W508=Rc#nNn7ym
z1;42c|8($ALY8#a({%1#IXbWn9-Y|0eDY$_L&j{63?{?AH{);Ezcqf<!MFQ9x99b^
z@1DK4rAh7R(%7o_Ukrp_*B^iXAJs(~WJSwk+1;6+e)#eKWB7lW`oH?lRCGTU-%svF
zZa{1eHiz~4`%lFm`)1d&`Q<xTH!a_>ydD$@-B`Y3<%IIj7S7rK_N}je^=dEk%JQ4c
z!tBdTPE3Tse;oYF>cnrapWq*o)m47X1`~6@(!Y29#>-#8zm&LXrXa(3=7Z)ElaQqj
z-#0JJy3Fi(C#Rx(`=VXtJ63E2_bZGCz+QRa{W0e2(m3<b<R<WQnM~H@G~%P;$A5kX
zdr~m`<Zaga!@akqca}>sI?LOcUBx)~^YCqZ{XEPX)C>G>U4tfqeH8L(3|pQR*zbL1
zT9e~4Tb5p9_G}$y4t`i*4t_Mr9QYvL9C&Ah*}t`q*}S+VYh0M6GxTTSXI)hMpMpIq
zD1ImYqJLzbj0}~EpE-aH#VCH_udYEW#`P2zYmi&xSPs_{n6tBj=MY|-XrA;SGA_>y
zGtU$?HXm$gYj*!N)_nQ59%lQdXtQZS3*#PC-{iB_sm+ytD*7j`D*k(P&IH2GHT}Eh
z5697eQECVIGQAUe#eU2I!yI<zz;0~NQr|N^PTU%|61cC99Bv=_KdCmbW0yDoS&$NL
zmX1EpEE#=)nKLrdOzGz`6PQPeUwJD36mmpxeE`0zYQ<kQhbyqvzLfS-seXqK8MUG9
zLlxLyyuL#}xjn?4!rv0%QA-Z}Ik<a5n=IY4E@=+ED3w^9C}z%Zdk>&%0CP#>%6MWV
z@zS!p@+Y1i1b^QuuEF*1<Us0cJY(4nAF}4q=qekOvJQFo807!%A>3CuB<Ol`0^E7Z
zm%Qg1;_@p_?ztejY7aAu{Qn-^!+@VXn3b3498=%1e7}?I2TQ^o*He<VKf(OR$A_%>
zu69dve5k7&Wgb+^s|UB08Dr3u`h@yM0NTj4h7MnHo-4@xmyr7(*4$rpPwsCDZ@2be
zRz9V^GnV;;?^Lk%ynzq&K(Aix`mWmW`^152Hoy<pVuSh)79DeX%8W&6LDw72`#byI
zuiwcz>$CTYVehpD-S1-W^#k#{0^L`V6CN+<CFS_e7W_3E{FnMaufOZUZ|?(su|Y>E
z!w+xte;2vu4AmVNEFUOBmrBL>6MK@!O2*N|2=d|Y;oN&A&qv=qKn73lD<dYxNnd>D
zI(+oJAdgv>Yr}8(&@ZuAZE%XUXmX(U!N+Z_sjL<1vjy1R+1IeHt`79fnYdOL{$ci7
z%3f0A*;Zt@ED&Gjm|OFTYBDe%bbo*xXAQsFz+Q`fVBH!N2)kaxN8P$c>sp~QXnv>b
zwq=W3&Mtmih7xkR$YA)1Yi?avHNR6C99!u6fh=cL|KQ&PwF!n@ud^n(HNI<nwsH(x
z4qKM9iN6x;Git-Ge<QzeYkbrg?<<GKYW(VK;@<}TE9%0}y5!azL-V9+a#Y#me~G_7
z_y$7-P`)3H<9Cg?6G#?vr1r=#4jJ;1As-p?v4v7WW|z~i2L^g~=vqhvAq|8y5YoVz
z*MPA;B4>ImHD!h87!i*t?G|p0o+eelJ?B@A64_9%SBhNaJ64EvKgD&%LjLCYnNfc;
znj?%*p@*?dq#NqcQFmmX($wms@CSAr9#>hUR^=I+=<d%GUe;81{*2u{g^cHvbvMet
zq2G9w{o5J4+rJB|kH1xKEr1^d#X#P3T8;P-`h+wP(!lRV1LVP1Lc^g%o06y@-V_L6
z|LdjRj60+cXBkqdN2S;_lHZp*_b*D3i|<dAq12rcshK6-Jy4RVdtC4Q-G78<Kj;TY
z`wo@Xp1QRZ`QN9%Igij|bgX>0B)vvGX%T&#h$kmX*s=^M2E!@N9#m?LhMvz}YB+kd
zG~mbP|D(;{s_#;hsKK9lbVK&Lo734x7SIFJ9<NU=?g-!eQa_AcHCny_gVFO3=-?Ff
zpQ!;E+ZX-$+jXg8|7WNdWKr`tkx%U-6%4aR)Tn2E2!?mH{;IuaYG~T~e~tQ?w-)OE
zPW|o6Uu!aUe`l8Oy~y1R{-0{yNNcxwV92JHv^=wh9W0$_ZxbDS$2peXzVGq<4qx4$
zomY*&*0iVxQCs)&XP+Am{{`BU)INarGA2_)&ZdSk^|op@@Y(}^)ZXuX$RD&e2j7;^
zG=Kioa;ovC-VsBs;~V9#{ao!u<I@&~EHDJ>V_}2$@q?zm^7?*XH94w5Qae{7zOMUF
z^?%F%)c1Y)Q?Iy?I>kn<wOIXdo4@ulwHK&57|S*7*E_zrF3)A2E52%lFF*bMb!l%G
zy}qa;9}evE=KA)}jOrS348HHx%0F5%s4*N@{+9gIUXlNZB|rTz?W4}2#$2t3ivPX3
z;^uwd?pi$L&=(snEZ?=}lJcEvdLR7wt}*oM{;}o3)<4b5xYVk<BCnoLswTf}|6=yn
zO{sT$qO~)vo7wi?jQuw`_Me0u)ZZQ1b=2P*rZqIXUrRoE=(D-o%D3PDQTacMe%kl<
zgvuv8S5vbJvwBt9>w*8gYW#ok|2gdS=YYZLiD=CW|Nj;n^x!<jBV+M}EHEt_<tMvs
z2W)RP+<me6;Lp)!_m%->=S#iJ#`~Ld79+xXpVmUK^B(xO_vO!btA9y7w3L3-0j-y4
z?M-V{%z;JI`bk7yFDcP}OcCd*{Q9S5$iGA7*E1@tfkyjAi!;wP^O71cZ^Ep)qrQ)N
z#wqw0_HS;T7x3y|`P==i3hEwK%|>fZ)c&@kgKO1~5<5xBSk?iZV?KI6&i72H6S9A*
z=U(*e)EqEs?Oc04)V-~K5AUmh|62H4*`UAtItO$O(q5?6jj+K<YInKHn~#h06D6E4
zGY{ug$#47Kv+%ag8gORiMr412_5ZN7{xetf3<>^oD!04r=6#dsxp?~}{`?&sXn#q2
zGuY~7>O2=!u@@Kfu7q=W*4egu@qPMRM>(eyYyaIE<|j%d=iWNdGsx%c!902v#ngNg
z@#U-O_4xN$s_9?(`{>{>7~-6FgWpBpqXb`Ydc3OFL#&I}Irse9F_8R@4zSS*Y*o*B
zXL?6*Aw!AfkNCgcr#*yj&p3ZDe2y>v$>FUdKIy_2N~}6AbHc7gA3`6$g@1o|dE>vz
z4pl(j9;kyMsjaw}lO?(?Xg%4k!5%^<zlDDcygq_<+VnZ&Gf<7VJ+h6sSQqBwlV5;i
zCw{q${^Q$V`LF*641DyQ>t#@5n=WVc&JRa+XT$~#@rldv<HlfUj4u8F@xOCIpO6NA
zy#}i448i{`KGLeNxU7{aE~DpK>N3S1rEpU$;XgxVny7mki3<w%v}zUZDd^bHQ&8C5
zbEMEH-2)Zd6o`w~DKrp8LEbvW|DiWCr<+4vh%GJ2v8))B+*#`1mn3b-AEVjNSn-{>
z-Hh|jUCHrUXuLr!)`w>wgO0N%KTB-1di>cj(x3Ba<?I9X?CUltmc0Kh`u0bO`)SUz
zI`Zt(kjD0x$i3<j4=*8~D%HKjoCGVDSMdD5bnn34<pnTY=seGJdM@*6jf=!2>v`7v
z3G7EIbU$z>`Nad7Rk_&OT-W{;qg)-GXV-aJT#(o<Y^cxkn^`Yg6Fa`(`BTK_6MC*|
zK4(2Nm)J1vqV0R$o7U>zdmnA~Rq3GQ_3mby(>q6Ocb-RgTUhTN)))x>m&eD;$J5Bg
zo&DhY36Yg=J=$Z>t}RJ>o|@hAcwWzN#r(WJ52^g$lh^!63@hh+dR$&_dEGu&^CR*<
z!oFqSqO@>xZ*nC2oiOd0eS*F^IL~W-rsrO`J`ej{=ou_q^_(<$&-3f^<pOjU!=7&~
zXC+=DZ(jt~8+`R|WB7!1Jc_^TdE2d4ZXGA{9G&SoadMXW<Ql&A*O;WS@i_a$QF<>J
z&L^MSYWIe{&pYq&9eGaArA~*kA<MSpHuZ@k$zXI7$6|f&|Gj<JTB<KKxmBbwQL-^L
X*GBfq^a!*Sks)$E_17kl@BRM)`^nwN

diff --git a/apps/dhedge/src/clients/wagmi.ts b/apps/dhedge/src/clients/wagmi.ts
index 6c67a4e7..ec6d8f77 100644
--- a/apps/dhedge/src/clients/wagmi.ts
+++ b/apps/dhedge/src/clients/wagmi.ts
@@ -1,20 +1,17 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import '@rainbow-me/rainbowkit/styles.css';
 
 import { SafeConnector } from '@gnosis.pm/safe-apps-wagmi';
 import { connectorsForWallets } from '@rainbow-me/rainbowkit';
 import {
-  argentWallet,
   braveWallet,
   coinbaseWallet,
-  imTokenWallet,
   injectedWallet,
   metaMaskWallet,
   rainbowWallet,
   walletConnectWallet,
 } from '@rainbow-me/rainbowkit/wallets';
 import { configureChains, createClient } from 'wagmi';
-import { mainnet, optimism, polygon } from 'wagmi/chains';
+import { mainnet } from 'wagmi/chains';
 import { alchemyProvider } from 'wagmi/providers/alchemy';
 
 import type { Wallet } from '@rainbow-me/rainbowkit';
@@ -43,14 +40,13 @@ const gnosisSafeWallet = ({ chains }: { chains: Chain[] }): Wallet => ({
 });
 
 // Wallet Connect projectId https://cloud.walletconnect.com/app/project?uuid=aa89105e-0365-4b96-a7b2-c3cd7afacc5b
-const projectId = '702366804c7fa1aa184b4fb22e21c58c';
+const projectId = '9365fcb9504012eb2642ff20985f45e1';
 
 const connectors = connectorsForWallets([
   {
     groupName: 'Recommended',
     wallets: [
       metaMaskWallet({ chains, shimDisconnect: true, projectId }),
-      // ledgerWallet({ chains, projectId }),
       walletConnectWallet({ chains, projectId }),
       coinbaseWallet({ appName: 'mStable', chains }),
     ],
@@ -62,8 +58,6 @@ const connectors = connectorsForWallets([
       gnosisSafeWallet({ chains }),
       rainbowWallet({ chains, projectId }),
       braveWallet({ chains, shimDisconnect: true }),
-      argentWallet({ chains, projectId }),
-      imTokenWallet({ chains, projectId }),
     ],
   },
 ]);
diff --git a/apps/dhedge/src/components/Footer.tsx b/apps/dhedge/src/components/Footer.tsx
index 4b38ebc2..38b65cce 100644
--- a/apps/dhedge/src/components/Footer.tsx
+++ b/apps/dhedge/src/components/Footer.tsx
@@ -1,13 +1,10 @@
 import {
-  DISCORD,
-  EMAIL,
-  GITHUB,
-  MEDIUM,
-  TWITTER,
+  DHEDGE_DISCORD,
+  DHEDGE_GITHUB,
+  DHEDGE_TWITTER,
 } from '@frontend/shared-constants';
-import { Discord, Email, Github, Twitter } from '@frontend/shared-icons';
+import { Discord, Github, Twitter } from '@frontend/shared-icons';
 import { IconButton, Stack } from '@mui/material';
-import { MediumLogo } from 'phosphor-react';
 import { useIntl } from 'react-intl';
 
 import type { StackProps } from '@mui/material';
@@ -19,27 +16,17 @@ export const Footer = (props: StackProps) => {
     {
       title: intl.formatMessage({ defaultMessage: 'Github', id: 'Vn76qV' }),
       icon: <Github />,
-      href: GITHUB,
+      href: DHEDGE_GITHUB,
     },
     {
       title: intl.formatMessage({ defaultMessage: 'Discord', id: 'FvmV6q' }),
       icon: <Discord />,
-      href: DISCORD,
+      href: DHEDGE_DISCORD,
     },
     {
       title: intl.formatMessage({ defaultMessage: 'Twitter', id: '8ywLSf' }),
       icon: <Twitter />,
-      href: TWITTER,
-    },
-    {
-      title: intl.formatMessage({ defaultMessage: 'Medium', id: 'ovJ26C' }),
-      icon: <MediumLogo size={24} weight="fill" />,
-      href: MEDIUM,
-    },
-    {
-      title: intl.formatMessage({ defaultMessage: 'Email', id: 'sy+pv5' }),
-      icon: <Email />,
-      href: EMAIL,
+      href: DHEDGE_TWITTER,
     },
   ];
 
diff --git a/apps/dhedge/src/components/ThemeSwitchButton.tsx b/apps/dhedge/src/components/ThemeSwitchButton.tsx
new file mode 100644
index 00000000..d5cf3f69
--- /dev/null
+++ b/apps/dhedge/src/components/ThemeSwitchButton.tsx
@@ -0,0 +1,22 @@
+import { FC } from 'react';
+import { ButtonProps, IconButton, useTheme } from '@mui/material';
+import { useToggleThemeMode } from '@frontend/shared-providers';
+import { Moon, Sun } from 'phosphor-react';
+
+export const ThemeSwitchButton: FC<ButtonProps> = (props) => {
+  const {
+    palette: { mode, warning },
+  } = useTheme();
+  const isDarkMode = mode === 'dark';
+  const toggleThemeMode = useToggleThemeMode();
+
+  return (
+    <IconButton color="secondary" onClick={toggleThemeMode}>
+      {isDarkMode ? (
+        <Moon size={24} weight="fill" />
+      ) : (
+        <Sun size={24} color={warning.main} weight="fill" />
+      )}
+    </IconButton>
+  );
+};
diff --git a/apps/dhedge/src/components/Topnav.tsx b/apps/dhedge/src/components/Topnav.tsx
index a9c6186c..0ed7f851 100644
--- a/apps/dhedge/src/components/Topnav.tsx
+++ b/apps/dhedge/src/components/Topnav.tsx
@@ -1,21 +1,13 @@
-import { MSTABLE_LANDING_PAGE_URL } from '@frontend/shared-constants';
+import { DHEDGE } from '@frontend/shared-constants';
 import {
   OpenAccountModalButton,
   OpenNetworkModalButton,
 } from '@frontend/shared-providers';
-import {
-  alpha,
-  AppBar,
-  Button,
-  Stack,
-  useMediaQuery,
-  useTheme,
-} from '@mui/material';
+import { alpha, AppBar, Button, IconButton, Stack } from '@mui/material';
+import { DhedgeLogo } from '@frontend/shared-icons';
+import { ThemeSwitchButton } from './ThemeSwitchButton';
 
 export const Topnav = () => {
-  const theme = useTheme();
-  const wide = useMediaQuery(theme.breakpoints.up('sm'));
-
   return (
     <AppBar position="sticky" color="transparent">
       <Stack
@@ -32,15 +24,14 @@ export const Topnav = () => {
           backdropFilter: 'blur(20px)',
         }}
       >
-        <Button
-          variant="text"
-          color="inherit"
-          href={MSTABLE_LANDING_PAGE_URL}
+        <IconButton
+          color="secondary"
+          href={DHEDGE}
+          target="_blank"
           rel="noopener noreferrer"
-          sx={{ ml: -2 }}
         >
-          Button
-        </Button>
+          <DhedgeLogo />
+        </IconButton>
         <Stack
           flexGrow={1}
           direction="row"
@@ -50,6 +41,7 @@ export const Topnav = () => {
         >
           <OpenAccountModalButton sx={{ maxWidth: 180, maxHeight: 36 }} />
           <OpenNetworkModalButton sx={{ height: 36, width: 36 }} />
+          <ThemeSwitchButton sx={{ height: 36, width: 36 }} />
         </Stack>
       </Stack>
     </AppBar>
diff --git a/apps/dhedge/vite.config.ts b/apps/dhedge/vite.config.ts
index 3721ad6b..51007d77 100644
--- a/apps/dhedge/vite.config.ts
+++ b/apps/dhedge/vite.config.ts
@@ -12,6 +12,9 @@ export default defineConfig({
   server: {
     port: 4202,
     host: 'localhost',
+    fs: {
+      strict: false,
+    },
   },
 
   preview: {
diff --git a/libs/dhedge/theme/.eslintrc.json b/libs/dhedge/theme/.eslintrc.json
index df3772fb..50e59482 100644
--- a/libs/dhedge/theme/.eslintrc.json
+++ b/libs/dhedge/theme/.eslintrc.json
@@ -1,5 +1,5 @@
 {
-  "extends": ["plugin:@nrwl/nx/react", "../../../.eslintrc.base.json"],
+  "extends": ["plugin:@nrwl/nx/react", "../../../.eslintrc.json"],
   "ignorePatterns": ["!**/*"],
   "overrides": [
     {
diff --git a/libs/dhedge/theme/project.json b/libs/dhedge/theme/project.json
index 03200f67..4450ab85 100644
--- a/libs/dhedge/theme/project.json
+++ b/libs/dhedge/theme/project.json
@@ -20,20 +20,8 @@
         "outputPath": "dist/libs/dhedge/theme"
       },
       "configurations": {
-        "development": {
-          "mode": "development"
-        },
-        "production": {
-          "mode": "production"
-        }
-      }
-    },
-    "i18n-extract": {
-      "executor": "nx:run-commands",
-      "options": {
-        "commands": [
-          "yarn run formatjs extract 'libs/dhedge/theme/src/**/*.{ts,tsx}' --out-file i18n-extractions/libs-dhedge-theme.json --id-interpolation-pattern '[sha512:contenthash:base64:6]'"
-        ]
+        "development": {},
+        "production": {}
       }
     }
   }
diff --git a/libs/dhedge/theme/src/constants.ts b/libs/dhedge/theme/src/constants.ts
index cf55842f..9d8cf748 100644
--- a/libs/dhedge/theme/src/constants.ts
+++ b/libs/dhedge/theme/src/constants.ts
@@ -1,36 +1,36 @@
 export const colors = {
   black: '#000',
-  blue01: '#587ff1',
-  blue02: '#2F5FEE',
-  blue03: '#2042A6',
+  blue01: '#5DADE2',
+  blue02: '#00a0d0',
+  blue03: '#273c75',
   green01: '#7effa4',
   green02: '#45D074',
   green03: '#009e47',
   black50: '#F8FAFF',
-  black100: '#EAEBFF',
-  black200: '#DEDFFF',
+  black100: '#D6EAF8',
+  black200: '#D6E8F0',
   black300: '#CCCDF4',
   black400: '#A7A9CE',
   black500: '#8688AC',
-  black600: '#5E6183',
-  black700: '#4B4E6E',
+  black600: '#35393f',
+  black700: '#35393f',
   black800: '#2C304E',
-  black900: '#0A102C',
+  black900: '#202428',
   pink01: '#ffbaff',
   pink02: '#FB88D7',
   pink03: '#c657a5',
-  purple01: '#d1c6ff',
-  purple02: '#9D95FF',
-  purple03: '#6a67cb',
+  purple01: '#5DADE2',
+  purple02: '#3498DB',
+  purple03: '#00a0d0',
   red01: '#ff8d86',
-  red02: '#FF5959',
+  red02: '#E74C3C',
   red03: '#c61e30',
   skyBlue01: '#91ffff',
   skyBlue02: '#55D5FF',
   skyBlue03: '#00a4cc',
   white: '#FFF',
   yellow01: '#fff6a1',
-  yellow02: '#FAC371',
+  yellow02: '#F1C40F',
   yellow03: '#c49343',
 
   // Off palette
@@ -59,7 +59,7 @@ export const colors = {
   darkGrey02: '#494e57',
   darkGrey03: '#292c31',
   darkGrey04: '#1e2024',
-  offBlack: '#25272D',
+  offBlack: '#35393fcc',
   offBlackAccent: '#3F434D',
   orange01: '#FD7600',
   orange02: '#CA5E00',
@@ -102,9 +102,37 @@ export const letterSpacings = {
   space: '0.08333em',
 };
 
+const mainFontFamilies = [
+  '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"',
+];
+const bodyFontFamilies = ['Inter', ...mainFontFamilies];
+const headingFontFamilies = ['Vazir', ...mainFontFamilies];
+
 export const fontFamilies = {
-  main: ['Plus Jakarta SansVariable', 'Plus Jakarta Sans', 'sans-serif'].join(
-    ',',
-  ),
-  code: ['Red Hat MonoVariable', 'Red Hat Mono', 'monospace'].join(','),
+  main: ['Inter', 'Vazir', ...mainFontFamilies].join(','),
+  body: bodyFontFamilies.join(','),
+  heading: headingFontFamilies.join(','),
+  code: [
+    'ui-monospace',
+    'SFMono-Regular',
+    'Menlo',
+    'Monaco',
+    'Consolas',
+    '"Liberation Mono"',
+    '"Courier New"',
+    'monospace',
+  ].join(','),
 };
diff --git a/libs/dhedge/theme/src/mui/typography.ts b/libs/dhedge/theme/src/mui/typography.ts
index 5f066094..da448b09 100644
--- a/libs/dhedge/theme/src/mui/typography.ts
+++ b/libs/dhedge/theme/src/mui/typography.ts
@@ -1,7 +1,10 @@
-import '@fontsource/plus-jakarta-sans';
-import '@fontsource/plus-jakarta-sans/variable.css';
-import '@fontsource/red-hat-mono';
-import '@fontsource/red-hat-mono/variable.css';
+import '@fontsource/vazir'; // tw-font-normal (400)
+import '@fontsource/vazir/500.css'; // tw-font-medium
+import '@fontsource/vazir/700.css'; // tw-font-bold
+import '@fontsource/inter'; // tw-font-normal (400)
+import '@fontsource/inter/500.css'; // tw-font-medium
+import '@fontsource/inter/600.css'; // tw-font-semibold
+import '@fontsource/inter/700.css'; // tw-font-bold
 
 import {
   fontFamilies,
@@ -28,43 +31,43 @@ export const getTypographyOptions = (base?: ThemeOptions): ThemeOptions => ({
     letterSpacings,
 
     h1: {
-      fontFamily: fontFamilies.main,
+      fontFamily: fontFamilies.heading,
       fontSize: 40,
       lineHeight: 1.25,
       fontWeight: fontWeights.extrabold,
     },
     h2: {
-      fontFamily: fontFamilies.main,
+      fontFamily: fontFamilies.heading,
       fontSize: 32,
       lineHeight: 1.25,
       fontWeight: fontWeights.extrabold,
     },
     h3: {
-      fontFamily: fontFamilies.main,
+      fontFamily: fontFamilies.heading,
       fontSize: 28,
       lineHeight: 1.25,
       fontWeight: fontWeights.extrabold,
     },
     h4: {
-      fontFamily: fontFamilies.main,
+      fontFamily: fontFamilies.heading,
       fontSize: 24,
       lineHeight: 1.25,
       fontWeight: fontWeights.bold,
     },
     h5: {
-      fontFamily: fontFamilies.main,
+      fontFamily: fontFamilies.heading,
       fontSize: 18,
       lineHeight: 1.25,
       fontWeight: fontWeights.bold,
     },
     subtitle1: {
-      fontFamily: fontFamilies.main,
+      fontFamily: fontFamilies.heading,
       fontSize: 14,
       lineHeight: 1.2,
       fontWeight: fontWeights.medium,
     },
     subtitle2: {
-      fontFamily: fontFamilies.main,
+      fontFamily: fontFamilies.heading,
       fontSize: 12,
       lineHeight: 1.2,
       fontWeight: fontWeights.medium,
@@ -74,47 +77,47 @@ export const getTypographyOptions = (base?: ThemeOptions): ThemeOptions => ({
           : base.palette.grey[500],
     },
     body1: {
-      fontFamily: fontFamilies.main,
+      fontFamily: fontFamilies.body,
       fontSize: 16,
       lineHeight: 1.625,
       fontWeight: fontWeights.medium,
     },
     body2: {
-      fontFamily: fontFamilies.main,
+      fontFamily: fontFamilies.body,
       fontSize: 14,
       lineHeight: 1.625,
       fontWeight: fontWeights.medium,
     },
     buttonSmall: {
-      fontFamily: fontFamilies.main,
+      fontFamily: fontFamilies.body,
       fontSize: 12,
       lineHeight: 1,
       textTransform: 'none',
       fontWeight: fontWeights.bold,
     },
     button: {
-      fontFamily: fontFamilies.main,
+      fontFamily: fontFamilies.body,
       fontSize: 14,
       lineHeight: 1,
       textTransform: 'none',
       fontWeight: fontWeights.bold,
     },
     buttonMedium: {
-      fontFamily: fontFamilies.main,
+      fontFamily: fontFamilies.body,
       fontSize: 14,
       lineHeight: 1,
       textTransform: 'none',
       fontWeight: fontWeights.bold,
     },
     buttonLarge: {
-      fontFamily: fontFamilies.main,
+      fontFamily: fontFamilies.body,
       fontSize: 16,
       lineHeight: 1,
       textTransform: 'none',
       fontWeight: fontWeights.bold,
     },
     label1: {
-      fontFamily: fontFamilies.main,
+      fontFamily: fontFamilies.body,
       fontSize: 14,
       lineHeight: 1.25,
       fontWeight: fontWeights.bold,
@@ -122,61 +125,61 @@ export const getTypographyOptions = (base?: ThemeOptions): ThemeOptions => ({
       letterSpacing: '5%',
     },
     label2: {
-      fontFamily: fontFamilies.main,
+      fontFamily: fontFamilies.body,
       fontSize: 14,
       lineHeight: 1.25,
       fontWeight: fontWeights.bold,
       letterSpacing: '5%',
     },
     placeholder: {
-      fontFamily: fontFamilies.main,
+      fontFamily: fontFamilies.body,
       fontSize: 14,
       lineHeight: 1.25,
       fontWeight: fontWeights.regular,
     },
     hint: {
-      fontFamily: fontFamilies.main,
+      fontFamily: fontFamilies.body,
       fontSize: 12,
       lineHeight: 1.25,
       fontWeight: fontWeights.semibold,
     },
     value1: {
-      fontFamily: fontFamilies.code,
+      fontFamily: fontFamilies.body,
       fontSize: 28,
       lineHeight: 1.25,
       letterSpacing: '-4%',
       fontWeight: fontWeights.semibold,
     },
     value2: {
-      fontFamily: fontFamilies.code,
+      fontFamily: fontFamilies.body,
       fontSize: 24,
       lineHeight: 1.25,
       letterSpacing: '-4%',
       fontWeight: fontWeights.semibold,
     },
     value3: {
-      fontFamily: fontFamilies.code,
+      fontFamily: fontFamilies.body,
       fontSize: 18,
       lineHeight: 1.25,
       letterSpacing: '-4%',
       fontWeight: fontWeights.semibold,
     },
     value4: {
-      fontFamily: fontFamilies.code,
+      fontFamily: fontFamilies.body,
       fontSize: 16,
       lineHeight: 1.25,
       letterSpacing: '-4%',
       fontWeight: fontWeights.semibold,
     },
     value5: {
-      fontFamily: fontFamilies.code,
+      fontFamily: fontFamilies.body,
       fontSize: 14,
       lineHeight: 1.25,
       letterSpacing: '-4%',
       fontWeight: fontWeights.semibold,
     },
     value6: {
-      fontFamily: fontFamilies.code,
+      fontFamily: fontFamilies.body,
       fontSize: 12,
       lineHeight: 1.25,
       letterSpacing: '-4%',
diff --git a/libs/dhedge/theme/src/rainbowkit/index.ts b/libs/dhedge/theme/src/rainbowkit/index.ts
index 5efdb7a8..03e520b7 100644
--- a/libs/dhedge/theme/src/rainbowkit/index.ts
+++ b/libs/dhedge/theme/src/rainbowkit/index.ts
@@ -22,7 +22,7 @@ export const rbkDarkTheme: Theme = mergeDeepRight(
   mergeDeepRight(dark, common),
   {
     colors: {
-      modalBackground: colors.darkBlue09,
+      modalBackground: colors.black700,
     },
   },
 );
diff --git a/libs/dhedge/theme/tsconfig.json b/libs/dhedge/theme/tsconfig.json
index 1bd2664f..d7bd50bf 100644
--- a/libs/dhedge/theme/tsconfig.json
+++ b/libs/dhedge/theme/tsconfig.json
@@ -1,17 +1,12 @@
 {
   "compilerOptions": {
-    "allowJs": true,
-    "allowSyntheticDefaultImports": true,
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
     "jsx": "react-jsx",
+    "allowJs": false,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": false,
     "jsxImportSource": "@emotion/react",
-    "noFallthroughCasesInSwitch": true,
-    "noImplicitOverride": true,
-    "noImplicitReturns": true,
-    "noPropertyAccessFromIndexSignature": true,
-    "resolveJsonModule": true,
-    "strict": false
+    "types": ["vite/client"]
   },
   "files": [],
   "include": [],
diff --git a/libs/dhedge/theme/tsconfig.lib.json b/libs/dhedge/theme/tsconfig.lib.json
index c59c3ff1..3e91493b 100644
--- a/libs/dhedge/theme/tsconfig.lib.json
+++ b/libs/dhedge/theme/tsconfig.lib.json
@@ -2,7 +2,7 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "../../../dist/out-tsc",
-    "types": ["node", "vite/client"]
+    "types": ["node"]
   },
   "files": [
     "../../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
@@ -16,7 +16,14 @@
     "**/*.spec.js",
     "**/*.test.js",
     "**/*.spec.jsx",
-    "**/*.test.jsx"
+    "**/*.test.jsx",
+    "**/*.stories.ts",
+    "**/*.stories.js",
+    "**/*.stories.jsx",
+    "**/*.stories.tsx",
+    "**/*.stories.mdx",
+    "**/stories.ts",
+    "**/stories.tsx"
   ],
   "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
 }
diff --git a/libs/dhedge/theme/vite.config.ts b/libs/dhedge/theme/vite.config.ts
index 21e8d9f3..11e31c9b 100644
--- a/libs/dhedge/theme/vite.config.ts
+++ b/libs/dhedge/theme/vite.config.ts
@@ -1,34 +1,25 @@
-/// <reference types="vitest" />
-import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
-import viteTsConfigPaths from 'vite-tsconfig-paths';
-import dts from 'vite-plugin-dts';
 import { join } from 'path';
+import { defineConfig } from 'vite';
+import dts from 'vite-plugin-dts';
+import svgr from 'vite-plugin-svgr';
+import tsconfigPaths from 'vite-tsconfig-paths';
 
 export default defineConfig({
-  cacheDir: '../../../node_modules/.vite/dhedge-theme',
-
   plugins: [
     dts({
-      entryRoot: 'src',
       tsConfigFilePath: join(__dirname, 'tsconfig.lib.json'),
+      // Faster builds by skipping tests. Set this to false to enable type checking.
       skipDiagnostics: true,
     }),
+    svgr(),
     react(),
-    viteTsConfigPaths({
+    tsconfigPaths({
       root: '../../../',
+      projects: ['tsconfig.base.json'],
     }),
   ],
 
-  // Uncomment this if you are using workers.
-  // worker: {
-  //  plugins: [
-  //    viteTsConfigPaths({
-  //      root: '../../../',
-  //    }),
-  //  ],
-  // },
-
   // Configuration for building your library.
   // See: https://vitejs.dev/guide/build.html#library-mode
   build: {
diff --git a/libs/dhedge/withdraw/project.json b/libs/dhedge/withdraw/project.json
index 5c34c84d..c1cc60d4 100644
--- a/libs/dhedge/withdraw/project.json
+++ b/libs/dhedge/withdraw/project.json
@@ -20,20 +20,8 @@
         "outputPath": "dist/libs/dhedge/withdraw"
       },
       "configurations": {
-        "development": {
-          "mode": "development"
-        },
-        "production": {
-          "mode": "production"
-        }
-      }
-    },
-    "i18n-extract": {
-      "executor": "nx:run-commands",
-      "options": {
-        "commands": [
-          "yarn run formatjs extract 'libs/dhedge/withdraw/src/**/*.{ts,tsx}' --out-file i18n-extractions/libs-dhedge-withdraw.json --id-interpolation-pattern '[sha512:contenthash:base64:6]'"
-        ]
+        "development": {},
+        "production": {}
       }
     }
   }
diff --git a/libs/dhedge/withdraw/src/components/BurnForm/components/InputStep/components/ApprovalButton.tsx b/libs/dhedge/withdraw/src/components/BurnForm/components/InputStep/components/ApprovalButton.tsx
new file mode 100644
index 00000000..719a903c
--- /dev/null
+++ b/libs/dhedge/withdraw/src/components/BurnForm/components/InputStep/components/ApprovalButton.tsx
@@ -0,0 +1,137 @@
+import { usePushNotification } from '@frontend/shared-providers';
+import { ViewEtherscanLink } from '@frontend/shared-ui';
+import { Button, CircularProgress } from '@mui/material';
+import {
+  mainnet,
+  useContractWrite,
+  useNetwork,
+  usePrepareContractWrite,
+  useWaitForTransaction,
+} from 'wagmi';
+
+import { useTrackedState } from '../../../state';
+
+import type { ButtonProps } from '@mui/material';
+import { l1ComptrollerContract } from '../../../../../constants';
+
+const buttonProps: ButtonProps = {
+  size: 'large',
+  fullWidth: true,
+};
+
+export const ApprovalButton = (props: ButtonProps) => {
+  const { chain } = useNetwork();
+  const pushNotification = usePushNotification();
+  const { l1token, needsApproval, isError, refetch } = useTrackedState();
+
+  const { config } = usePrepareContractWrite({
+    address: l1token.contract.address,
+    abi: l1token.contract.abi,
+    functionName: 'approve',
+    args: [l1ComptrollerContract.address, l1token.balance.exact],
+    chainId: chain?.id,
+    enabled: needsApproval,
+  });
+  const {
+    data: approveData,
+    write,
+    isLoading: isWriteLoading,
+    isSuccess: isWriteSuccess,
+  } = useContractWrite({
+    ...config,
+    onSuccess: (data) => {
+      pushNotification({
+        title: 'Approving Token',
+        content: (
+          <ViewEtherscanLink
+            hash={data?.hash}
+            blockExplorer={
+              chain?.blockExplorers?.['etherscan'] ??
+              mainnet.blockExplorers.default
+            }
+          />
+        ),
+        severity: 'info',
+      });
+    },
+    onError: () => {
+      pushNotification({
+        title: 'Transaction Cancelled',
+        severity: 'info',
+      });
+    },
+  });
+  const { isSuccess: isWaitSuccess, isLoading: isWaitLoading } =
+    useWaitForTransaction({
+      hash: approveData?.hash,
+      onSuccess: ({ transactionHash }) => {
+        pushNotification({
+          title: 'Transaction Confirmed',
+          content: (
+            <ViewEtherscanLink
+              hash={transactionHash}
+              blockExplorer={
+                chain?.blockExplorers?.['etherscan'] ??
+                mainnet.blockExplorers.default
+              }
+            />
+          ),
+          severity: 'success',
+        });
+      },
+      onError: () => {
+        pushNotification({
+          title: 'Transaction Error',
+          content: (
+            <ViewEtherscanLink
+              hash={approveData?.hash}
+              blockExplorer={
+                chain?.blockExplorers?.['etherscan'] ??
+                mainnet.blockExplorers.default
+              }
+            />
+          ),
+          severity: 'error',
+        });
+      },
+      onSettled: refetch,
+    });
+
+  if (!chain?.id) {
+    return (
+      <Button {...buttonProps} {...props} disabled>
+        Approve
+      </Button>
+    );
+  }
+
+  if (isError) {
+    return (
+      <Button {...buttonProps} disabled>
+        Insufficient balance
+      </Button>
+    );
+  }
+
+  if (isWriteLoading) {
+    return (
+      <Button {...buttonProps} {...props} disabled>
+        Sign Transaction
+      </Button>
+    );
+  }
+
+  if (isWriteSuccess && !isWaitSuccess && isWaitLoading) {
+    return (
+      <Button {...buttonProps} {...props} disabled>
+        <CircularProgress size={20} />
+      </Button>
+    );
+  }
+
+  return (
+    <Button {...buttonProps} {...props} onClick={write}>
+      Approve
+    </Button>
+  );
+};
diff --git a/libs/dhedge/withdraw/src/components/BurnForm/components/InputStep/components/SubmitButton.tsx b/libs/dhedge/withdraw/src/components/BurnForm/components/InputStep/components/SubmitButton.tsx
new file mode 100644
index 00000000..0cc4b5a7
--- /dev/null
+++ b/libs/dhedge/withdraw/src/components/BurnForm/components/InputStep/components/SubmitButton.tsx
@@ -0,0 +1,161 @@
+import { useMemo } from 'react';
+
+import { usePushNotification } from '@frontend/shared-providers';
+import { ViewEtherscanLink } from '@frontend/shared-ui';
+import { Button, CircularProgress } from '@mui/material';
+import { constants } from 'ethers';
+import {
+  useAccount,
+  useContractWrite,
+  useNetwork,
+  usePrepareContractWrite,
+  useWaitForTransaction,
+} from 'wagmi';
+import { mainnet } from 'wagmi/chains';
+
+import { useTrackedState } from '../../../state';
+
+import type { ButtonProps } from '@mui/material';
+import { l1ComptrollerContract } from '../../../../../constants';
+
+export type SubmitButtonProps = {
+  disabled?: boolean;
+};
+
+const buttonProps: ButtonProps = {
+  size: 'large',
+  fullWidth: true,
+};
+
+export const SubmitButton = ({ disabled }: SubmitButtonProps) => {
+  const { chain } = useNetwork();
+  const pushNotification = usePushNotification();
+  const { address: walletAddress } = useAccount();
+  const { l1token, isError, needsApproval, reset } = useTrackedState();
+
+  //TODO: implement
+  const config = useMemo(
+    () => ({
+      functionName: 'redeem',
+      args: [walletAddress, l1token.amount.exact],
+      enabled:
+        !isError && l1token.amount.exact.gt(constants.Zero) && !needsApproval,
+      address: l1ComptrollerContract.address,
+      abi: l1ComptrollerContract.abi,
+      chainId: l1ComptrollerContract.chainId,
+    }),
+    [walletAddress, l1token.amount.exact, isError, needsApproval],
+  );
+
+  const { data: submitConfig } = usePrepareContractWrite(config);
+
+  const {
+    data: submitData,
+    write: submit,
+    isLoading: isWriteLoading,
+    isSuccess: isWriteSuccess,
+  } = useContractWrite({
+    ...submitConfig,
+    request: {
+      ...submitConfig?.request,
+      gasLimit: submitConfig?.request?.gasLimit?.mul(130).div(100),
+    },
+    onSuccess: (data) => {
+      pushNotification({
+        title: 'DHPT Redeem',
+        content: (
+          <ViewEtherscanLink
+            hash={data?.hash}
+            blockExplorer={
+              chain?.blockExplorers?.['etherscan'] ??
+              mainnet.blockExplorers.default
+            }
+          />
+        ),
+        severity: 'info',
+      });
+    },
+    onError: () => {
+      pushNotification({
+        title: 'Transaction Cancelled',
+        severity: 'info',
+      });
+    },
+  });
+  const { isSuccess: isSubmitSuccess } = useWaitForTransaction({
+    hash: submitData?.hash,
+    onSuccess: ({ transactionHash }) => {
+      pushNotification({
+        title: 'Transaction Confirmed',
+        content: (
+          <ViewEtherscanLink
+            hash={transactionHash}
+            blockExplorer={
+              chain?.blockExplorers?.['etherscan'] ??
+              mainnet.blockExplorers.default
+            }
+          />
+        ),
+        severity: 'success',
+      });
+    },
+    onError: () => {
+      pushNotification({
+        title: 'Transaction Error',
+        content: (
+          <ViewEtherscanLink
+            hash={submitData?.hash}
+            blockExplorer={
+              chain?.blockExplorers?.['etherscan'] ??
+              mainnet.blockExplorers.default
+            }
+          />
+        ),
+        severity: 'error',
+      });
+    },
+    onSettled: reset,
+  });
+
+  if (
+    !l1token.amount ||
+    needsApproval ||
+    l1token.amount.exact.eq(constants.Zero)
+  ) {
+    return (
+      <Button {...buttonProps} disabled>
+        Redeem
+      </Button>
+    );
+  }
+
+  if (isWriteLoading) {
+    return (
+      <Button {...buttonProps} disabled>
+        Sign Transaction
+      </Button>
+    );
+  }
+
+  if (isWriteSuccess && !isSubmitSuccess) {
+    return (
+      <Button {...buttonProps} disabled>
+        <CircularProgress size={20} />
+      </Button>
+    );
+  }
+
+  if (isError) {
+    return (
+      <Button {...buttonProps} disabled>
+        Insufficient balance
+      </Button>
+    );
+  }
+
+  return (
+    <Button {...buttonProps} onClick={submit} disabled={disabled}>
+      Redeem
+    </Button>
+  );
+};
diff --git a/libs/dhedge/withdraw/src/components/BurnForm/components/InputStep/components/TokenInputs.tsx b/libs/dhedge/withdraw/src/components/BurnForm/components/InputStep/components/TokenInputs.tsx
new file mode 100644
index 00000000..a3e96d17
--- /dev/null
+++ b/libs/dhedge/withdraw/src/components/BurnForm/components/InputStep/components/TokenInputs.tsx
@@ -0,0 +1,152 @@
+import { TokenInput } from '@frontend/shared-ui';
+import { Box, Button, Skeleton, Stack, Typography } from '@mui/material';
+import { ArrowFatDown } from 'phosphor-react';
+import { useAccount } from 'wagmi';
+
+import { useSetL1TokenAmount } from '../../../hooks';
+import { useTrackedState } from '../../../state';
+
+import type { BoxProps } from '@mui/material';
+
+export const TokenInputs = (props: BoxProps) => {
+  const { isConnected } = useAccount();
+  const { l1token, l2token, isLoading, isError } = useTrackedState();
+  const setL1Amount = useSetL1TokenAmount();
+
+  const handleSetMax = () => {
+    setL1Amount(l1token.balance);
+  };
+
+  return (
+    <Box
+      {...props}
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        position: 'relative',
+        border: (theme) => `1px solid ${theme.palette.divider}`,
+        borderRadius: 1,
+        ...props?.sx,
+      }}
+    >
+      <TokenInput
+        amount={l1token.amount}
+        max={l1token.balance}
+        error={isError}
+        onChange={setL1Amount}
+        token={l1token.contract}
+        hideBottomRow
+        disabled={!isConnected || l1token.balance.exact.isZero()}
+        components={{
+          container: {
+            width: 1,
+            padding: (theme) => theme.spacing(0.5, 2, 0.5, 2),
+          },
+        }}
+      />
+      <Stack
+        direction="row"
+        sx={{
+          justifyContent: 'space-between',
+          width: 1,
+          padding: (theme) => theme.spacing(0.5, 2, 2, 2),
+          borderBottom: (theme) => `1px solid ${theme.palette.divider}`,
+        }}
+      >
+        <Typography variant="label2" color="text.secondary">
+          {isLoading ? (
+            <Skeleton width={60} />
+          ) : (
+            Intl.NumberFormat('en-US', {
+              currency: 'USD',
+              style: 'currency',
+              maximumSignificantDigits: 2,
+            }).format(l1token.price)
+          )}
+        </Typography>
+        {isConnected &&
+          (isLoading ? (
+            <Skeleton width={100} height={18} />
+          ) : (
+            <Button
+              variant="text"
+              size="small"
+              onClick={handleSetMax}
+              sx={{
+                color: 'text.secondary',
+                typography: 'label2',
+                p: 0,
+                minHeight: 18,
+              }}
+            >
+              Balance {l1token.balance.simpleRounded}
+            </Button>
+          ))}
+      </Stack>
+      <Stack
+        justifyContent="center"
+        alignItems="center"
+        p={1.5}
+        border={(theme) => `1px solid ${theme.palette.divider}`}
+        borderRadius={1}
+        bgcolor="divider"
+        sx={{
+          position: 'absolute',
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%,-50%)',
+          svg: { color: 'text.primary' },
+        }}
+      >
+        <ArrowFatDown size={20} />
+      </Stack>
+      <TokenInput
+        amount={l2token.amount}
+        token={l2token.contract}
+        hideBottomRow
+        components={{
+          container: {
+            width: 1,
+            padding: (theme) => theme.spacing(0.5, 2, 0.5, 2),
+          },
+          input: {
+            InputProps: {
+              tabIndex: -1,
+              disabled: true,
+            },
+          },
+        }}
+      />
+      <Stack
+        direction="row"
+        sx={{
+          justifyContent: 'space-between',
+          width: 1,
+          padding: (theme) => theme.spacing(0.5, 2, 2, 2),
+        }}
+      >
+        <Typography variant="label2" color="text.secondary">
+          {isLoading ? (
+            <Skeleton width={60} />
+          ) : (
+            Intl.NumberFormat('en-US', {
+              currency: 'USD',
+              style: 'currency',
+            }).format(l2token.price)
+          )}
+        </Typography>
+        {isConnected && (
+          <Typography variant="label2" color="text.secondary">
+            {isLoading ? (
+              <Skeleton width={100} />
+            ) : (
+              <>Balance {l2token.balance.simpleRounded}</>
+            )}
+          </Typography>
+        )}
+      </Stack>
+    </Box>
+  );
+};
diff --git a/libs/dhedge/withdraw/src/components/BurnForm/components/InputStep/index.tsx b/libs/dhedge/withdraw/src/components/BurnForm/components/InputStep/index.tsx
new file mode 100644
index 00000000..b45c8684
--- /dev/null
+++ b/libs/dhedge/withdraw/src/components/BurnForm/components/InputStep/index.tsx
@@ -0,0 +1,52 @@
+import { OpenAccountModalButton } from '@frontend/shared-providers';
+import { MotionStack } from '@frontend/shared-ui';
+import { Button, Stack, Typography } from '@mui/material';
+import { constants } from 'ethers';
+import { useAccount } from 'wagmi';
+
+import { useSetStep } from '../../hooks';
+import { useTrackedState } from '../../state';
+import { ApprovalButton } from './components/ApprovalButton';
+import { SubmitButton } from './components/SubmitButton';
+import { TokenInputs } from './components/TokenInputs';
+
+import type { MotionStackProps } from '@frontend/shared-ui';
+export const InputStep = (props: MotionStackProps) => {
+  const { isConnected } = useAccount();
+  const { l1token, l2token, needsApproval } = useTrackedState();
+  const setStep = useSetStep();
+
+  return (
+    <MotionStack alignItems="flex-start" {...props}>
+      <Typography variant="h5" mb={2}>
+        Burn your dHEDGE V1 {l1token.contract.name ?? 'vault'} tokens to receive{' '}
+        {l2token.contract.name ?? ''} vault tokens
+      </Typography>
+      <Stack width={1} justifyContent="center" alignItems="center" my={8}>
+        <Stack width={3 / 4}>
+          <TokenInputs mb={4} />
+          {isConnected ? (
+            <>{needsApproval ? <ApprovalButton /> : <SubmitButton />}</>
+          ) : (
+            <OpenAccountModalButton fullWidth size="large" />
+          )}
+        </Stack>
+      </Stack>
+      <Stack
+        width={1}
+        direction="row"
+        justifyContent="flex-end"
+        alignItems="center"
+      >
+        <Button
+          onClick={() => {
+            setStep(1);
+          }}
+          disabled={l2token.balance.exact.eq(constants.Zero)}
+        >
+          Next Step
+        </Button>
+      </Stack>
+    </MotionStack>
+  );
+};
diff --git a/libs/dhedge/withdraw/src/components/BurnForm/components/StepIndicator.tsx b/libs/dhedge/withdraw/src/components/BurnForm/components/StepIndicator.tsx
new file mode 100644
index 00000000..59f0ae20
--- /dev/null
+++ b/libs/dhedge/withdraw/src/components/BurnForm/components/StepIndicator.tsx
@@ -0,0 +1,74 @@
+import { useIsMobile } from '@frontend/shared-hooks';
+import { Box, Stack, Typography } from '@mui/material';
+
+import { useTrackedState } from '../state';
+
+import type { StackProps } from '@mui/material';
+
+type IndicatorProps = {
+  step: number;
+  label: string;
+  visited: boolean;
+} & StackProps;
+
+const Indicator = ({ step, label, visited, ...rest }: IndicatorProps) => (
+  <Stack alignItems="center" spacing={1} height={100} zIndex={2} {...rest}>
+    <Box
+      display="flex"
+      justifyContent="center"
+      alignItems="center"
+      borderRadius="50%"
+      width={40}
+      height={40}
+      border={(theme) => `1px solid ${theme.palette.divider}`}
+      bgcolor={visited ? 'info.main' : 'divider'}
+    >
+      <Typography variant="h5">{step}</Typography>
+    </Box>
+    <Typography textAlign="center">{label}</Typography>
+  </Stack>
+);
+
+export const StepIndicator = (props: StackProps) => {
+  const isMobile = useIsMobile();
+  const { step } = useTrackedState();
+
+  return (
+    <Stack
+      direction="row"
+      spacing={15}
+      sx={(theme) => ({
+        position: 'relative',
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+
+        '::after': {
+          position: 'absolute',
+          content: '""',
+          top: 20,
+          left: isMobile ? 0 : 70,
+          height: 2,
+          width: '70%',
+          background:
+            step > 0 ? theme.palette.info.main : theme.palette.divider,
+        },
+      })}
+      {...props}
+    >
+      <Indicator
+        step={1}
+        label="Redeem"
+        visited={step + 1 >= 1}
+        width={isMobile ? undefined : 170}
+      />
+      <Indicator
+        step={2}
+        label="Withdraw to stables"
+        visited={step + 1 >= 2}
+        width={isMobile ? undefined : 170}
+      />
+    </Stack>
+  );
+};
diff --git a/libs/dhedge/withdraw/src/components/BurnForm/components/WithdrawStep.tsx b/libs/dhedge/withdraw/src/components/BurnForm/components/WithdrawStep.tsx
new file mode 100644
index 00000000..158426b3
--- /dev/null
+++ b/libs/dhedge/withdraw/src/components/BurnForm/components/WithdrawStep.tsx
@@ -0,0 +1,54 @@
+import { DHEDGE_DAPP_LINK } from '@frontend/shared-constants';
+import { MotionStack } from '@frontend/shared-ui';
+import { Button, Stack, Typography } from '@mui/material';
+
+import { useSetStep } from '../hooks';
+
+import type { MotionStackProps } from '@frontend/shared-ui';
+import { useTrackedState } from 'libs/dhedge/withdraw/src/components/BurnForm/state';
+
+export const WithdrawStep = (props: MotionStackProps) => {
+  const setStep = useSetStep();
+  const { l2token } = useTrackedState();
+
+  return (
+    <MotionStack {...props}>
+      <Typography variant="h4" mb={4}>
+        Withdraw your {l2token.contract.name} tokens to stables
+      </Typography>
+      <Typography mb={2}>
+        Your {l2token.contract.name} tokens are earning yield and you can hold
+        on to them.<br></br>Optionally you can go to dHEDGE app to withdraw your
+        {l2token.contract.symbol} tokens to stablecoins.
+      </Typography>
+      <Typography>
+        After burning your vault tokens from Ethereum, please wait while the
+        bridge issues your {l2token.contract.symbol} tokens.
+      </Typography>
+      <Stack direction="row" my={4} justifyContent="center" alignItems="center">
+        <Button
+          href={`${DHEDGE_DAPP_LINK}/vault/${l2token.contract.address}`}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Withdraw to stablecoins
+        </Button>
+      </Stack>
+      <Stack
+        width={1}
+        direction="row"
+        justifyContent="flex-end"
+        alignItems="center"
+      >
+        <Button
+          color="secondary"
+          onClick={() => {
+            setStep(0);
+          }}
+        >
+          Back
+        </Button>
+      </Stack>
+    </MotionStack>
+  );
+};
diff --git a/libs/dhedge/withdraw/src/components/BurnForm/hooks.ts b/libs/dhedge/withdraw/src/components/BurnForm/hooks.ts
new file mode 100644
index 00000000..c26463ea
--- /dev/null
+++ b/libs/dhedge/withdraw/src/components/BurnForm/hooks.ts
@@ -0,0 +1,37 @@
+import { useCallback } from 'react';
+
+import produce from 'immer';
+
+import { useUpdate } from './state';
+
+import type { BigDecimal } from '@frontend/shared-utils';
+
+export const useSetStep = () => {
+  const update = useUpdate();
+
+  return useCallback(
+    (step: number) => {
+      update(
+        produce((draft) => {
+          draft.step = step;
+        }),
+      );
+    },
+    [update],
+  );
+};
+
+export const useSetL1TokenAmount = () => {
+  const update = useUpdate();
+
+  return useCallback(
+    (amount: BigDecimal) => {
+      update(
+        produce((draft) => {
+          draft.l1token.amount = amount;
+        }),
+      );
+    },
+    [update],
+  );
+};
diff --git a/libs/dhedge/withdraw/src/components/BurnForm/index.tsx b/libs/dhedge/withdraw/src/components/BurnForm/index.tsx
new file mode 100644
index 00000000..92fbcf75
--- /dev/null
+++ b/libs/dhedge/withdraw/src/components/BurnForm/index.tsx
@@ -0,0 +1,48 @@
+import { Stack } from '@mui/material';
+import { AnimatePresence } from 'framer-motion';
+
+import { InputStep } from './components/InputStep';
+import { StepIndicator } from './components/StepIndicator';
+import { WithdrawStep } from './components/WithdrawStep';
+import { Provider, useTrackedState } from './state';
+
+import type { StackProps, SxProps, Theme } from '@mui/material';
+
+const cardSx: SxProps<Theme> = (theme) => ({
+  padding: 4,
+  borderRadius: 2,
+  border: `1px solid ${theme.palette.divider}`,
+});
+
+const BurnFormWrapped = (props: StackProps) => {
+  const { step } = useTrackedState();
+
+  return (
+    <Stack alignItems="center" spacing={1} {...props}>
+      <StepIndicator />
+      <AnimatePresence>
+        {step === 0 ? (
+          <InputStep
+            sx={cardSx}
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+          />
+        ) : (
+          <WithdrawStep
+            sx={cardSx}
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+          />
+        )}
+      </AnimatePresence>
+    </Stack>
+  );
+};
+
+export const BurnForm = (props: StackProps) => (
+  <Provider>
+    <BurnFormWrapped {...props} />
+  </Provider>
+);
diff --git a/libs/dhedge/withdraw/src/components/BurnForm/state.ts b/libs/dhedge/withdraw/src/components/BurnForm/state.ts
new file mode 100644
index 00000000..3686f66e
--- /dev/null
+++ b/libs/dhedge/withdraw/src/components/BurnForm/state.ts
@@ -0,0 +1,217 @@
+import { useCallback, useEffect, useState } from 'react';
+
+import { BigDecimal } from '@frontend/shared-utils';
+import produce from 'immer';
+import { createContainer } from 'react-tracked';
+import { useAccount, useContractRead, useContractReads } from 'wagmi';
+
+import type { Token } from '@frontend/shared-constants';
+import type { BigNumberish } from 'ethers';
+import {
+  dV1Token,
+  l2ComptrollerContract,
+  zeroMainnetToken,
+} from '../../constants';
+import { useDebounce } from '@frontend/shared-hooks';
+import { useL1VaultAddressWithBalance } from '../../hooks/useL1VaultAddressWithBalance';
+
+type InputProps = {
+  contract: Token;
+  amount: BigDecimal;
+  balance: BigDecimal;
+  price: number;
+};
+
+type StateProps = {
+  step: number;
+  isLoading: boolean;
+  isError: boolean;
+  needsApproval: boolean;
+  l1token: InputProps;
+  l2token: InputProps;
+  refetch: () => void;
+  reset: () => void;
+};
+
+export const { Provider, useTrackedState, useUpdate } = createContainer(() => {
+  const { address: walletAddress, isConnected } = useAccount();
+
+  const [state, setState] = useState<StateProps>({
+    step: 0,
+    isLoading: true,
+    isError: false,
+    needsApproval: true,
+    l1token: {
+      amount: BigDecimal.ZERO,
+      balance: BigDecimal.ZERO,
+      price: 0,
+      contract: zeroMainnetToken,
+    },
+    l2token: {
+      amount: BigDecimal.ZERO,
+      balance: BigDecimal.ZERO,
+      price: 0,
+      contract: dV1Token,
+    },
+    refetch: () => null,
+    reset: () => null,
+  });
+
+  const v1VaultAddress = useL1VaultAddressWithBalance();
+  useEffect(() => {
+    setState(
+      produce((draft) => {
+        draft.l1token.contract.address = v1VaultAddress;
+        draft.l1token.contract.name = undefined;
+      }),
+    );
+  }, [v1VaultAddress]);
+
+  console.log(state);
+
+  const { data, isLoading, refetch } = useContractReads({
+    contracts: [
+      {
+        address: state.l1token.contract.address,
+        abi: state.l1token.contract.abi,
+        functionName: 'name',
+        chainId: state.l1token.contract.chainId,
+        args: [],
+      },
+      {
+        address: state.l1token.contract.address,
+        abi: state.l1token.contract.abi,
+        functionName: 'allowance',
+        chainId: state.l1token.contract.chainId,
+        args: [walletAddress, l2ComptrollerContract.address],
+      },
+      {
+        address: state.l1token.contract.address,
+        abi: state.l1token.contract.abi,
+        chainId: state.l1token.contract.chainId,
+        functionName: 'balanceOf',
+        args: [walletAddress],
+      },
+      {
+        address: state.l2token.contract.address,
+        abi: state.l2token.contract.abi,
+        chainId: state.l2token.contract.chainId,
+        functionName: 'balanceOf',
+        args: [walletAddress],
+      },
+      {
+        address: state.l2token.contract.address,
+        abi: state.l2token.contract.abi,
+        chainId: state.l2token.contract.chainId,
+        functionName: 'tokenPrice',
+      },
+      {
+        address: l2ComptrollerContract.address,
+        abi: l2ComptrollerContract.abi,
+        chainId: l2ComptrollerContract.chainId,
+        functionName: 'exchangePrices',
+        args: [state.l1token.contract.address],
+      },
+    ],
+    watch: true,
+  });
+
+  useEffect(() => {
+    if (data) {
+      setState(
+        produce((draft) => {
+          draft.l1token.contract.name = data[0] as unknown as string;
+          draft.needsApproval = state.l1token.amount.exact.gt(
+            new BigDecimal(
+              data[1] as unknown as BigNumberish,
+              state.l1token.contract.decimals,
+            ).exact,
+          );
+          draft.l1token.balance = new BigDecimal(
+            data[2] as unknown as BigNumberish,
+            state.l1token.contract.decimals,
+          );
+          draft.l2token.balance = new BigDecimal(
+            data[3] as unknown as BigNumberish,
+            state.l1token.contract.decimals,
+          );
+          draft.l2token.price = new BigDecimal(
+            data[4] as unknown as BigNumberish,
+            draft.l2token.contract.decimals,
+          ).simple;
+          draft.l1token.price = new BigDecimal(
+            data[5] as unknown as BigNumberish,
+            draft.l1token.contract.decimals,
+          ).simple;
+        }),
+      );
+    }
+  }, [data, refetch]);
+
+  const debouncedL1TokenAmount = useDebounce(
+    state.l1token.amount.exact.toString(),
+    500,
+  );
+  useContractRead({
+    address: l2ComptrollerContract.address,
+    abi: l2ComptrollerContract.abi,
+    chainId: l2ComptrollerContract.chainId,
+    functionName: 'convertToTokenToBuy',
+    args: [
+      state.l1token.contract.address,
+      state.l2token.contract.address,
+      debouncedL1TokenAmount,
+    ],
+    enabled: debouncedL1TokenAmount !== '0',
+    onSuccess: (data) => {
+      setState(
+        produce((draft) => {
+          draft.l2token.amount = new BigDecimal(data.toString());
+        }),
+      );
+    },
+  });
+
+  const reset = useCallback(() => {
+    setState(
+      produce((draft) => {
+        draft.l1token.amount = BigDecimal.ZERO;
+        draft.l1token.amount = BigDecimal.ZERO;
+        draft.l1token.balance = BigDecimal.ZERO;
+        draft.l2token.balance = BigDecimal.ZERO;
+        draft.l2token.balance = BigDecimal.ZERO;
+        draft.needsApproval = true;
+        draft.isError = false;
+      }),
+    );
+    refetch();
+  }, [refetch]);
+
+  useEffect(() => {
+    setState(
+      produce((draft) => {
+        draft.isLoading = isLoading;
+        draft.refetch = refetch;
+        draft.reset = reset;
+      }),
+    );
+  }, [isLoading, refetch, reset]);
+
+  useEffect(() => {
+    setState(
+      produce((draft) => {
+        draft.isError = state.l1token.amount.exact.gt(
+          state.l1token.balance.exact,
+        );
+      }),
+    );
+  }, [state.l1token.amount.exact, state.l1token.balance.exact]);
+
+  useEffect(() => {
+    if (!isConnected) {
+      reset();
+    }
+  }, [isConnected, reset]);
+
+  return [state, setState];
+});
diff --git a/libs/dhedge/withdraw/src/constants/abis/L1ComptrollerAbi.ts b/libs/dhedge/withdraw/src/constants/abis/L1ComptrollerAbi.ts
new file mode 100644
index 00000000..04679ac2
--- /dev/null
+++ b/libs/dhedge/withdraw/src/constants/abis/L1ComptrollerAbi.ts
@@ -0,0 +1 @@
+export const L1ComptrollerAbi = [] as const;
diff --git a/libs/dhedge/withdraw/src/constants/abis/L2ComptrollerAbi.ts b/libs/dhedge/withdraw/src/constants/abis/L2ComptrollerAbi.ts
new file mode 100644
index 00000000..44098b15
--- /dev/null
+++ b/libs/dhedge/withdraw/src/constants/abis/L2ComptrollerAbi.ts
@@ -0,0 +1,688 @@
+export const L2ComptrollerAbi = [
+  { inputs: [], stateMutability: 'nonpayable', type: 'constructor' },
+  {
+    inputs: [
+      { internalType: 'address', name: 'depositor', type: 'address' },
+      { internalType: 'address', name: 'receiver', type: 'address' },
+      { internalType: 'address', name: 'tokenBurned', type: 'address' },
+      { internalType: 'uint256', name: 'prevBurntAmount', type: 'uint256' },
+      { internalType: 'uint256', name: 'givenBurntAmount', type: 'uint256' },
+    ],
+    name: 'DecreasingBurntAmount',
+    type: 'error',
+  },
+  {
+    inputs: [
+      { internalType: 'address', name: 'depositor', type: 'address' },
+      { internalType: 'address', name: 'receiver', type: 'address' },
+      { internalType: 'address', name: 'tokenBurned', type: 'address' },
+      {
+        internalType: 'uint256',
+        name: 'maxClaimableAmount',
+        type: 'uint256',
+      },
+      { internalType: 'uint256', name: 'claimAmount', type: 'uint256' },
+    ],
+    name: 'ExceedingClaimableAmount',
+    type: 'error',
+  },
+  { inputs: [], name: 'ExternalCallerNotAllowed', type: 'error' },
+  { inputs: [], name: 'InvalidValues', type: 'error' },
+  { inputs: [], name: 'OnlyCrossChainAllowed', type: 'error' },
+  {
+    inputs: [
+      {
+        internalType: 'contract IPoolLogic',
+        name: 'buyToken',
+        type: 'address',
+      },
+      {
+        internalType: 'uint256',
+        name: 'minAcceptablePrice',
+        type: 'uint256',
+      },
+      { internalType: 'uint256', name: 'actualPrice', type: 'uint256' },
+    ],
+    name: 'PriceDropExceedsLimit',
+    type: 'error',
+  },
+  { inputs: [], name: 'ZeroAddress', type: 'error' },
+  {
+    inputs: [
+      {
+        internalType: 'contract IPoolLogic',
+        name: 'tokenToBuy',
+        type: 'address',
+      },
+    ],
+    name: 'ZeroTokenPrice',
+    type: 'error',
+  },
+  {
+    anonymous: false,
+    inputs: [
+      {
+        indexed: true,
+        internalType: 'address',
+        name: 'depositor',
+        type: 'address',
+      },
+      {
+        indexed: false,
+        internalType: 'uint256',
+        name: 'errorCode',
+        type: 'uint256',
+      },
+    ],
+    name: 'AssertionErrorDuringRedemption',
+    type: 'event',
+  },
+  {
+    anonymous: false,
+    inputs: [
+      {
+        indexed: false,
+        internalType: 'contract IPoolLogic',
+        name: 'buyToken',
+        type: 'address',
+      },
+      {
+        indexed: false,
+        internalType: 'uint256',
+        name: 'updatedBuyTokenPrice',
+        type: 'uint256',
+      },
+    ],
+    name: 'BuyTokenPriceUpdated',
+    type: 'event',
+  },
+  {
+    anonymous: false,
+    inputs: [
+      {
+        indexed: true,
+        internalType: 'address',
+        name: 'token',
+        type: 'address',
+      },
+      {
+        indexed: false,
+        internalType: 'uint256',
+        name: 'amount',
+        type: 'uint256',
+      },
+    ],
+    name: 'EmergencyWithdrawal',
+    type: 'event',
+  },
+  {
+    anonymous: false,
+    inputs: [
+      {
+        indexed: false,
+        internalType: 'uint8',
+        name: 'version',
+        type: 'uint8',
+      },
+    ],
+    name: 'Initialized',
+    type: 'event',
+  },
+  {
+    anonymous: false,
+    inputs: [
+      {
+        indexed: false,
+        internalType: 'address',
+        name: 'newL1Comptroller',
+        type: 'address',
+      },
+    ],
+    name: 'L1ComptrollerSet',
+    type: 'event',
+  },
+  {
+    anonymous: false,
+    inputs: [
+      {
+        indexed: true,
+        internalType: 'address',
+        name: 'depositor',
+        type: 'address',
+      },
+      {
+        indexed: false,
+        internalType: 'bytes',
+        name: 'reason',
+        type: 'bytes',
+      },
+    ],
+    name: 'LowLevelErrorDuringRedemption',
+    type: 'event',
+  },
+  {
+    anonymous: false,
+    inputs: [
+      {
+        indexed: false,
+        internalType: 'contract IPoolLogic',
+        name: 'buyToken',
+        type: 'address',
+      },
+      {
+        indexed: false,
+        internalType: 'uint256',
+        name: 'newMaxTokenPriceDrop',
+        type: 'uint256',
+      },
+    ],
+    name: 'ModifiedMaxTokenPriceDrop',
+    type: 'event',
+  },
+  {
+    anonymous: false,
+    inputs: [
+      {
+        indexed: true,
+        internalType: 'address',
+        name: 'previousOwner',
+        type: 'address',
+      },
+      {
+        indexed: true,
+        internalType: 'address',
+        name: 'newOwner',
+        type: 'address',
+      },
+    ],
+    name: 'OwnershipTransferred',
+    type: 'event',
+  },
+  {
+    anonymous: false,
+    inputs: [
+      {
+        indexed: false,
+        internalType: 'address',
+        name: 'account',
+        type: 'address',
+      },
+    ],
+    name: 'Paused',
+    type: 'event',
+  },
+  {
+    anonymous: false,
+    inputs: [
+      {
+        indexed: true,
+        internalType: 'address',
+        name: 'depositor',
+        type: 'address',
+      },
+      {
+        indexed: false,
+        internalType: 'string',
+        name: 'reason',
+        type: 'string',
+      },
+    ],
+    name: 'RequireErrorDuringRedemption',
+    type: 'event',
+  },
+  {
+    anonymous: false,
+    inputs: [
+      {
+        indexed: true,
+        internalType: 'address',
+        name: 'depositor',
+        type: 'address',
+      },
+      {
+        indexed: true,
+        internalType: 'address',
+        name: 'receiver',
+        type: 'address',
+      },
+      {
+        indexed: false,
+        internalType: 'address',
+        name: 'tokenBurned',
+        type: 'address',
+      },
+      {
+        indexed: false,
+        internalType: 'contract IPoolLogic',
+        name: 'tokenBought',
+        type: 'address',
+      },
+      {
+        indexed: false,
+        internalType: 'uint256',
+        name: 'burnTokenAmount',
+        type: 'uint256',
+      },
+      {
+        indexed: false,
+        internalType: 'uint256',
+        name: 'buyTokenAmount',
+        type: 'uint256',
+      },
+    ],
+    name: 'TokensClaimed',
+    type: 'event',
+  },
+  {
+    anonymous: false,
+    inputs: [
+      {
+        indexed: false,
+        internalType: 'address',
+        name: 'account',
+        type: 'address',
+      },
+    ],
+    name: 'Unpaused',
+    type: 'event',
+  },
+  {
+    inputs: [],
+    name: 'DENOMINATOR',
+    outputs: [{ internalType: 'uint256', name: '', type: 'uint256' }],
+    stateMutability: 'view',
+    type: 'function',
+  },
+  {
+    inputs: [
+      { internalType: 'address', name: 'tokenBurned', type: 'address' },
+      {
+        internalType: 'contract IPoolLogic',
+        name: 'tokenToBuy',
+        type: 'address',
+      },
+      { internalType: 'uint256', name: 'burnTokenAmount', type: 'uint256' },
+      { internalType: 'address', name: 'receiver', type: 'address' },
+    ],
+    name: '_redeem',
+    outputs: [
+      { internalType: 'uint256', name: 'buyTokenAmount', type: 'uint256' },
+    ],
+    stateMutability: 'nonpayable',
+    type: 'function',
+  },
+  {
+    inputs: [
+      {
+        components: [
+          {
+            internalType: 'contract IPoolLogic',
+            name: 'tokenToBuy',
+            type: 'address',
+          },
+          {
+            internalType: 'uint256',
+            name: 'maxTokenPriceDrop',
+            type: 'uint256',
+          },
+        ],
+        internalType: 'struct L2ComptrollerV2Base.BuyTokenSettings',
+        name: 'buyTokenSetting',
+        type: 'tuple',
+      },
+    ],
+    name: 'addBuyToken',
+    outputs: [],
+    stateMutability: 'nonpayable',
+    type: 'function',
+  },
+  {
+    inputs: [
+      {
+        components: [
+          {
+            internalType: 'contract IPoolLogic',
+            name: 'tokenToBuy',
+            type: 'address',
+          },
+          {
+            internalType: 'uint256',
+            name: 'maxTokenPriceDrop',
+            type: 'uint256',
+          },
+        ],
+        internalType: 'struct L2ComptrollerV2Base.BuyTokenSettings[]',
+        name: 'buyTokenSettings',
+        type: 'tuple[]',
+      },
+    ],
+    name: 'addBuyTokens',
+    outputs: [],
+    stateMutability: 'nonpayable',
+    type: 'function',
+  },
+  {
+    inputs: [
+      { internalType: 'address', name: 'depositor', type: 'address' },
+      { internalType: 'address', name: 'receiver', type: 'address' },
+      { internalType: 'address', name: 'tokenToBurn', type: 'address' },
+    ],
+    name: 'burnAndClaimDetails',
+    outputs: [
+      { internalType: 'uint256', name: 'totalAmountBurned', type: 'uint256' },
+      {
+        internalType: 'uint256',
+        name: 'totalAmountClaimed',
+        type: 'uint256',
+      },
+    ],
+    stateMutability: 'view',
+    type: 'function',
+  },
+  {
+    inputs: [
+      {
+        internalType: 'contract IPoolLogic',
+        name: 'tokenToBuy',
+        type: 'address',
+      },
+    ],
+    name: 'buyTokenDetails',
+    outputs: [
+      {
+        internalType: 'uint256',
+        name: 'lastTokenToBuyPrice',
+        type: 'uint256',
+      },
+      { internalType: 'uint256', name: 'maxTokenPriceDrop', type: 'uint256' },
+    ],
+    stateMutability: 'view',
+    type: 'function',
+  },
+  {
+    inputs: [
+      { internalType: 'address', name: 'tokenBurned', type: 'address' },
+      {
+        internalType: 'contract IPoolLogic',
+        name: 'tokenToBuy',
+        type: 'address',
+      },
+      { internalType: 'uint256', name: 'burnTokenAmount', type: 'uint256' },
+      { internalType: 'address', name: 'l1Depositor', type: 'address' },
+    ],
+    name: 'claim',
+    outputs: [],
+    stateMutability: 'nonpayable',
+    type: 'function',
+  },
+  {
+    inputs: [
+      { internalType: 'address', name: 'tokenBurned', type: 'address' },
+      {
+        internalType: 'contract IPoolLogic',
+        name: 'tokenToBuy',
+        type: 'address',
+      },
+      { internalType: 'address', name: 'l1Depositor', type: 'address' },
+    ],
+    name: 'claimAll',
+    outputs: [],
+    stateMutability: 'nonpayable',
+    type: 'function',
+  },
+  {
+    inputs: [
+      { internalType: 'address', name: 'tokenToBurn', type: 'address' },
+      {
+        internalType: 'contract IPoolLogic',
+        name: 'tokenToBuy',
+        type: 'address',
+      },
+      { internalType: 'uint256', name: 'buyTokenAmount', type: 'uint256' },
+    ],
+    name: 'convertToTokenToBurn',
+    outputs: [
+      { internalType: 'uint256', name: 'burnTokenAmount', type: 'uint256' },
+    ],
+    stateMutability: 'view',
+    type: 'function',
+  },
+  {
+    inputs: [
+      { internalType: 'address', name: 'tokenToBurn', type: 'address' },
+      {
+        internalType: 'contract IPoolLogic',
+        name: 'tokenToBuy',
+        type: 'address',
+      },
+      { internalType: 'uint256', name: 'burnTokenAmount', type: 'uint256' },
+    ],
+    name: 'convertToTokenToBuy',
+    outputs: [
+      { internalType: 'uint256', name: 'buyTokenAmount', type: 'uint256' },
+    ],
+    stateMutability: 'view',
+    type: 'function',
+  },
+  {
+    inputs: [
+      { internalType: 'address', name: 'token', type: 'address' },
+      { internalType: 'uint256', name: 'amount', type: 'uint256' },
+    ],
+    name: 'emergencyWithdraw',
+    outputs: [],
+    stateMutability: 'nonpayable',
+    type: 'function',
+  },
+  {
+    inputs: [{ internalType: 'address', name: 'tokenToBurn', type: 'address' }],
+    name: 'exchangePrices',
+    outputs: [
+      { internalType: 'uint256', name: 'exchangePrice', type: 'uint256' },
+    ],
+    stateMutability: 'view',
+    type: 'function',
+  },
+  {
+    inputs: [
+      { internalType: 'address', name: 'tokenBurned', type: 'address' },
+      {
+        internalType: 'contract IPoolLogic',
+        name: 'tokenToBuy',
+        type: 'address',
+      },
+      { internalType: 'address', name: 'depositor', type: 'address' },
+      { internalType: 'address', name: 'receiver', type: 'address' },
+    ],
+    name: 'getClaimableAmount',
+    outputs: [
+      {
+        internalType: 'uint256',
+        name: 'tokenToBuyClaimable',
+        type: 'uint256',
+      },
+    ],
+    stateMutability: 'view',
+    type: 'function',
+  },
+  {
+    inputs: [{ internalType: 'address', name: 'owner', type: 'address' }],
+    name: 'initialize',
+    outputs: [],
+    stateMutability: 'nonpayable',
+    type: 'function',
+  },
+  {
+    inputs: [],
+    name: 'l1Comptroller',
+    outputs: [{ internalType: 'address', name: '', type: 'address' }],
+    stateMutability: 'view',
+    type: 'function',
+  },
+  {
+    inputs: [
+      { internalType: 'address', name: 'tokenToBurn', type: 'address' },
+      {
+        internalType: 'contract IPoolLogic',
+        name: 'tokenToBuy',
+        type: 'address',
+      },
+    ],
+    name: 'maxBurnAmountClaimable',
+    outputs: [
+      {
+        internalType: 'uint256',
+        name: 'maxBurnTokenAmount',
+        type: 'uint256',
+      },
+    ],
+    stateMutability: 'view',
+    type: 'function',
+  },
+  {
+    inputs: [
+      {
+        internalType: 'contract IPoolLogic',
+        name: 'tokenToBuy',
+        type: 'address',
+      },
+      {
+        internalType: 'uint256',
+        name: 'newMaxTokenPriceDrop',
+        type: 'uint256',
+      },
+    ],
+    name: 'modifyThreshold',
+    outputs: [],
+    stateMutability: 'nonpayable',
+    type: 'function',
+  },
+  {
+    inputs: [],
+    name: 'owner',
+    outputs: [{ internalType: 'address', name: '', type: 'address' }],
+    stateMutability: 'view',
+    type: 'function',
+  },
+  {
+    inputs: [],
+    name: 'pause',
+    outputs: [],
+    stateMutability: 'nonpayable',
+    type: 'function',
+  },
+  {
+    inputs: [],
+    name: 'paused',
+    outputs: [{ internalType: 'bool', name: '', type: 'bool' }],
+    stateMutability: 'view',
+    type: 'function',
+  },
+  {
+    inputs: [
+      { internalType: 'address', name: 'tokenBurned', type: 'address' },
+      { internalType: 'address', name: 'tokenToBuy', type: 'address' },
+      {
+        internalType: 'uint256',
+        name: 'totalAmountBurntOnL1',
+        type: 'uint256',
+      },
+      { internalType: 'address', name: 'l1Depositor', type: 'address' },
+      { internalType: 'address', name: 'receiver', type: 'address' },
+    ],
+    name: 'redeemFromL1',
+    outputs: [],
+    stateMutability: 'nonpayable',
+    type: 'function',
+  },
+  {
+    inputs: [
+      {
+        internalType: 'contract IPoolLogic',
+        name: 'tokenToBuy',
+        type: 'address',
+      },
+    ],
+    name: 'removeBuyToken',
+    outputs: [],
+    stateMutability: 'nonpayable',
+    type: 'function',
+  },
+  {
+    inputs: [
+      {
+        internalType: 'contract IPoolLogic[]',
+        name: 'tokensToBuy',
+        type: 'address[]',
+      },
+    ],
+    name: 'removeBuyTokens',
+    outputs: [],
+    stateMutability: 'nonpayable',
+    type: 'function',
+  },
+  {
+    inputs: [],
+    name: 'renounceOwnership',
+    outputs: [],
+    stateMutability: 'nonpayable',
+    type: 'function',
+  },
+  {
+    inputs: [
+      {
+        components: [
+          { internalType: 'address', name: 'tokenToBurn', type: 'address' },
+          { internalType: 'uint256', name: 'exchangePrice', type: 'uint256' },
+        ],
+        internalType: 'struct L2ComptrollerV2Base.BurnTokenSettings',
+        name: 'burnTokenSetting',
+        type: 'tuple',
+      },
+    ],
+    name: 'setExchangePrices',
+    outputs: [],
+    stateMutability: 'nonpayable',
+    type: 'function',
+  },
+  {
+    inputs: [
+      {
+        components: [
+          { internalType: 'address', name: 'tokenToBurn', type: 'address' },
+          { internalType: 'uint256', name: 'exchangePrice', type: 'uint256' },
+        ],
+        internalType: 'struct L2ComptrollerV2Base.BurnTokenSettings[]',
+        name: 'burnTokenSettings',
+        type: 'tuple[]',
+      },
+    ],
+    name: 'setExchangePrices',
+    outputs: [],
+    stateMutability: 'nonpayable',
+    type: 'function',
+  },
+  {
+    inputs: [
+      { internalType: 'address', name: 'newL1Comptroller', type: 'address' },
+    ],
+    name: 'setL1Comptroller',
+    outputs: [],
+    stateMutability: 'nonpayable',
+    type: 'function',
+  },
+  {
+    inputs: [{ internalType: 'address', name: 'newOwner', type: 'address' }],
+    name: 'transferOwnership',
+    outputs: [],
+    stateMutability: 'nonpayable',
+    type: 'function',
+  },
+  {
+    inputs: [],
+    name: 'unpause',
+    outputs: [],
+    stateMutability: 'nonpayable',
+    type: 'function',
+  },
+] as const;
diff --git a/libs/dhedge/withdraw/src/constants/abis/PoolLogicAbi.ts b/libs/dhedge/withdraw/src/constants/abis/PoolLogicAbi.ts
new file mode 100644
index 00000000..ae431cf2
--- /dev/null
+++ b/libs/dhedge/withdraw/src/constants/abis/PoolLogicAbi.ts
@@ -0,0 +1,121 @@
+export const PoolLogicAbi = [
+  {
+    inputs: [
+      {
+        internalType: 'address',
+        name: 'owner',
+        type: 'address',
+      },
+      {
+        internalType: 'address',
+        name: 'spender',
+        type: 'address',
+      },
+    ],
+    name: 'allowance',
+    outputs: [
+      {
+        internalType: 'uint256',
+        name: '',
+        type: 'uint256',
+      },
+    ],
+    stateMutability: 'view',
+    type: 'function',
+  },
+  {
+    inputs: [
+      {
+        internalType: 'address',
+        name: 'spender',
+        type: 'address',
+      },
+      {
+        internalType: 'uint256',
+        name: 'amount',
+        type: 'uint256',
+      },
+    ],
+    name: 'approve',
+    outputs: [
+      {
+        internalType: 'bool',
+        name: '',
+        type: 'bool',
+      },
+    ],
+    stateMutability: 'nonpayable',
+    type: 'function',
+  },
+  {
+    inputs: [
+      {
+        internalType: 'address',
+        name: 'account',
+        type: 'address',
+      },
+    ],
+    name: 'balanceOf',
+    outputs: [
+      {
+        internalType: 'uint256',
+        name: '',
+        type: 'uint256',
+      },
+    ],
+    stateMutability: 'view',
+    type: 'function',
+  },
+  {
+    inputs: [],
+    name: 'decimals',
+    outputs: [
+      {
+        internalType: 'uint8',
+        name: '',
+        type: 'uint8',
+      },
+    ],
+    stateMutability: 'view',
+    type: 'function',
+  },
+  {
+    inputs: [],
+    name: 'name',
+    outputs: [
+      {
+        internalType: 'string',
+        name: '',
+        type: 'string',
+      },
+    ],
+    stateMutability: 'view',
+    type: 'function',
+  },
+  {
+    inputs: [],
+    name: 'symbol',
+    outputs: [
+      {
+        internalType: 'string',
+        name: '',
+        type: 'string',
+      },
+    ],
+    stateMutability: 'view',
+    type: 'function',
+  },
+  {
+    inputs: [],
+    name: 'tokenPrice',
+    outputs: [
+      {
+        internalType: 'uint256',
+        name: 'price',
+        type: 'uint256',
+      },
+    ],
+    stateMutability: 'view',
+    type: 'function',
+  },
+] as const;
diff --git a/libs/dhedge/withdraw/src/constants/contracts.ts b/libs/dhedge/withdraw/src/constants/contracts.ts
new file mode 100644
index 00000000..1146bc3c
--- /dev/null
+++ b/libs/dhedge/withdraw/src/constants/contracts.ts
@@ -0,0 +1,19 @@
+import { arbitrum, mainnet } from 'wagmi/chains';
+
+import { Contract } from '@frontend/shared-constants';
+import { L2ComptrollerAbi } from './abis/L2ComptrollerAbi';
+import { L1ComptrollerAbi } from './abis/L1ComptrollerAbi';
+
+export const l2ComptrollerContract: Contract = {
+  address: '0xa30ee837aE10Acb36fF75eA4a720E1fAa1BA2293',
+  chainId: arbitrum.id,
+  abi: L2ComptrollerAbi,
+  name: 'L2Comptroller',
+};
+
+export const l1ComptrollerContract: Contract = {
+  address: '0x53750692bB134C7de46f174d1CCB96E0c2270096',
+  chainId: mainnet.id,
+  abi: L1ComptrollerAbi,
+  name: 'L1Comptroller',
+};
diff --git a/libs/dhedge/withdraw/src/constants/index.ts b/libs/dhedge/withdraw/src/constants/index.ts
new file mode 100644
index 00000000..2bdd4707
--- /dev/null
+++ b/libs/dhedge/withdraw/src/constants/index.ts
@@ -0,0 +1,8 @@
+import { Address } from 'wagmi';
+
+export * from './tokens';
+export * from './contracts';
+
+export const deprecatedL1Vaults: Address[] = [
+  '0x992ed71cad18d16608a14f52a1fb5b6a44bf821c', // test
+];
diff --git a/libs/dhedge/withdraw/src/constants/tokens.ts b/libs/dhedge/withdraw/src/constants/tokens.ts
new file mode 100644
index 00000000..91e89a74
--- /dev/null
+++ b/libs/dhedge/withdraw/src/constants/tokens.ts
@@ -0,0 +1,22 @@
+import { arbitrum, mainnet } from 'wagmi/chains';
+import { Token } from '@frontend/shared-constants';
+import { PoolLogicAbi } from './abis/PoolLogicAbi';
+import { AddressZero } from '@dhedge/core-ui-kit/const';
+import { ERC20ABI } from '@mstable/metavaults-web';
+
+export const zeroMainnetToken: Token = {
+  address: AddressZero,
+  symbol: 'DHPT',
+  decimals: 18,
+  chainId: mainnet.id,
+  abi: ERC20ABI,
+};
+
+export const dV1Token: Token = {
+  address: '0xe48f22822e0fb60bca2bb126ba71efe3fbaa4063',
+  symbol: 'dV1',
+  decimals: 18,
+  chainId: arbitrum.id,
+  abi: PoolLogicAbi,
+  name: 'dHEDGE v1 Assets',
+};
diff --git a/libs/dhedge/withdraw/src/hooks/useL1VaultAddressWithBalance.ts b/libs/dhedge/withdraw/src/hooks/useL1VaultAddressWithBalance.ts
new file mode 100644
index 00000000..53331e7b
--- /dev/null
+++ b/libs/dhedge/withdraw/src/hooks/useL1VaultAddressWithBalance.ts
@@ -0,0 +1,24 @@
+import { Address, useAccount, useContractReads } from 'wagmi';
+import { deprecatedL1Vaults } from '../constants';
+import { mainnet } from 'wagmi/chains';
+import { PoolLogicAbi } from '../constants/abis/PoolLogicAbi';
+import { AddressZero } from '@dhedge/core-ui-kit/const';
+
+export const useL1VaultAddressWithBalance = (): Address => {
+  const { address: walletAddress } = useAccount();
+  const { data } = useContractReads({
+    contracts: deprecatedL1Vaults.map((address) => ({
+      address,
+      chainId: mainnet.id,
+      abi: PoolLogicAbi,
+      functionName: 'balanceOf',
+      args: [walletAddress],
+    })),
+  });
+
+  const [addressWithBalance] = deprecatedL1Vaults.filter(
+    (_, index) => !!data?.[index] && data[index].toString() !== '0',
+  );
+
+  return addressWithBalance ?? AddressZero;
+};
diff --git a/libs/dhedge/withdraw/src/views/Withdraw.tsx b/libs/dhedge/withdraw/src/views/Withdraw.tsx
index a3d8f8f4..2ee6aaa7 100644
--- a/libs/dhedge/withdraw/src/views/Withdraw.tsx
+++ b/libs/dhedge/withdraw/src/views/Withdraw.tsx
@@ -1,5 +1,11 @@
 import { FC } from 'react';
+import { BurnForm } from '../components/BurnForm';
+import { Box } from '@mui/material';
 
 export const Withdraw: FC = () => {
-  return <>dHEDGE Withdraw</>;
+  return (
+    <Box pt={4}>
+      <BurnForm />
+    </Box>
+  );
 };
diff --git a/libs/dhedge/withdraw/tsconfig.json b/libs/dhedge/withdraw/tsconfig.json
index 1bd2664f..d7bd50bf 100644
--- a/libs/dhedge/withdraw/tsconfig.json
+++ b/libs/dhedge/withdraw/tsconfig.json
@@ -1,17 +1,12 @@
 {
   "compilerOptions": {
-    "allowJs": true,
-    "allowSyntheticDefaultImports": true,
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
     "jsx": "react-jsx",
+    "allowJs": false,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": false,
     "jsxImportSource": "@emotion/react",
-    "noFallthroughCasesInSwitch": true,
-    "noImplicitOverride": true,
-    "noImplicitReturns": true,
-    "noPropertyAccessFromIndexSignature": true,
-    "resolveJsonModule": true,
-    "strict": false
+    "types": ["vite/client"]
   },
   "files": [],
   "include": [],
diff --git a/libs/dhedge/withdraw/vite.config.ts b/libs/dhedge/withdraw/vite.config.ts
index ba1d9c67..0193129d 100644
--- a/libs/dhedge/withdraw/vite.config.ts
+++ b/libs/dhedge/withdraw/vite.config.ts
@@ -1,34 +1,25 @@
-/// <reference types="vitest" />
-import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
-import viteTsConfigPaths from 'vite-tsconfig-paths';
-import dts from 'vite-plugin-dts';
 import { join } from 'path';
+import { defineConfig } from 'vite';
+import dts from 'vite-plugin-dts';
+import svgr from 'vite-plugin-svgr';
+import tsconfigPaths from 'vite-tsconfig-paths';
 
 export default defineConfig({
-  cacheDir: '../../../node_modules/.vite/dhedge-withdraw',
-
   plugins: [
     dts({
-      entryRoot: 'src',
       tsConfigFilePath: join(__dirname, 'tsconfig.lib.json'),
+      // Faster builds by skipping tests. Set this to false to enable type checking.
       skipDiagnostics: true,
     }),
+    svgr(),
     react(),
-    viteTsConfigPaths({
+    tsconfigPaths({
       root: '../../../',
+      projects: ['tsconfig.base.json'],
     }),
   ],
 
-  // Uncomment this if you are using workers.
-  // worker: {
-  //  plugins: [
-  //    viteTsConfigPaths({
-  //      root: '../../../',
-  //    }),
-  //  ],
-  // },
-
   // Configuration for building your library.
   // See: https://vitejs.dev/guide/build.html#library-mode
   build: {
diff --git a/libs/shared/constants/src/dhedge.ts b/libs/shared/constants/src/dhedge.ts
index 0b41bd93..a34f7c9b 100644
--- a/libs/shared/constants/src/dhedge.ts
+++ b/libs/shared/constants/src/dhedge.ts
@@ -3,3 +3,8 @@ export const DHEDGE_API_ENDPOINT = 'https://api-v2.dhedge.org/graphql';
 export const TOROS_DAPP_LINK = 'https://toros.finance';
 export const DHEDGE_DAPP_LINK = 'https://dhedge.org';
 export const TREASURY_YIELD_VAULT_LINK = `${DHEDGE_DAPP_LINK}/vault/0x0f6eae52ae1f94bc759ed72b201a2fdb14891485`;
+
+export const DHEDGE = 'https://dhedge.org/';
+export const DHEDGE_GITHUB = 'https://github.com/dhedge';
+export const DHEDGE_DISCORD = 'https://discord.gg/BAWTbRA';
+export const DHEDGE_TWITTER = 'https://twitter.com/dHedgeOrg';
diff --git a/libs/shared/constants/src/mstable.ts b/libs/shared/constants/src/mstable.ts
index ed854878..32f3c6d7 100644
--- a/libs/shared/constants/src/mstable.ts
+++ b/libs/shared/constants/src/mstable.ts
@@ -6,7 +6,6 @@ export const TWITTER = 'https://twitter.com/mstable_';
 export const MEDIUM = 'https://medium.com/mstable';
 export const EMAIL = 'mailto:info@mstable.org';
 export const MSTABLE_LANDING_PAGE_URL = 'https://mstable.org/';
-export const DHEDGE = 'https://dhedge.org/';
 
 export const OPEN_COVER_LINK =
   'https://opencover.com/app/?invite=DH100K&cover=126';
diff --git a/libs/shared/hooks/src/index.ts b/libs/shared/hooks/src/index.ts
index 10101507..9647c12e 100644
--- a/libs/shared/hooks/src/index.ts
+++ b/libs/shared/hooks/src/index.ts
@@ -2,6 +2,7 @@ export { useCryptoIcon } from './useCryptoIcon';
 export { useChartConfig, useChartData } from './useChartData';
 export { useIsMobile } from './useIsMobile';
 export { useScrollToTop } from './useScrollToTop';
+export { useDebounce } from './useDebounce';
 export {
   useTokenPriceHistoryQuery,
   useAllFundsByInvestorQuery,
diff --git a/libs/shared/hooks/src/useDebounce.ts b/libs/shared/hooks/src/useDebounce.ts
new file mode 100644
index 00000000..2691adcb
--- /dev/null
+++ b/libs/shared/hooks/src/useDebounce.ts
@@ -0,0 +1,17 @@
+import { useEffect, useState } from 'react';
+
+export const useDebounce = <T>(value: T, delay: number) => {
+  // State and setters for debounced value
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+};
diff --git a/libs/shared/icons/src/components/dhedge/dhedge-logo.svg b/libs/shared/icons/src/components/dhedge/dhedge-logo.svg
new file mode 100644
index 00000000..4e923b6f
--- /dev/null
+++ b/libs/shared/icons/src/components/dhedge/dhedge-logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 310 360"><path d="m282.66 321.87-54.45-28.7V128l54.45 26ZM27.34 344l54.6-24.7V178l-54.6 26Zm99.78-43.23L183 278.36V16l-55.91 24.7Z" style="fill:#00a0d0"/></svg>
\ No newline at end of file
diff --git a/libs/shared/icons/src/components/dhedge/index.tsx b/libs/shared/icons/src/components/dhedge/index.tsx
new file mode 100644
index 00000000..633ab936
--- /dev/null
+++ b/libs/shared/icons/src/components/dhedge/index.tsx
@@ -0,0 +1,9 @@
+import { SvgIcon } from '@mui/material';
+
+import { ReactComponent as DhedgeLogoSvg } from './dhedge-logo.svg';
+
+import type { SvgIconProps } from '@mui/material';
+
+export const DhedgeLogo = (props: SvgIconProps) => (
+  <SvgIcon {...props} component={DhedgeLogoSvg} viewBox="0 0 310 360" />
+);
diff --git a/libs/shared/icons/src/index.ts b/libs/shared/icons/src/index.ts
index 4af6865b..32a3c338 100644
--- a/libs/shared/icons/src/index.ts
+++ b/libs/shared/icons/src/index.ts
@@ -7,3 +7,4 @@ export * from './components/social';
 export * from './components/tokens';
 export * from './components/wallets';
 export * from './components/ecosystem';
+export * from './components/dhedge';
diff --git a/package.json b/package.json
index 0426ed95..0f32e03a 100644
--- a/package.json
+++ b/package.json
@@ -23,10 +23,12 @@
     "@dhedge/crypto-assets": "^0.2.27",
     "@emotion/react": "11.10.6",
     "@emotion/styled": "11.10.6",
+    "@fontsource/inter": "^5.0.21",
     "@fontsource/plus-jakarta-sans": "^4.5.11",
     "@fontsource/red-hat-mono": "^4.5.12",
     "@fontsource/roboto": "^4.5.8",
     "@fontsource/roboto-mono": "^4.5.10",
+    "@fontsource/vazir": "^4.5.4",
     "@gnosis.pm/safe-apps-wagmi": "^2.1.0",
     "@mstable/metavaults-web": "^0.0.6",
     "@mui/icons-material": "^5.11.16",
diff --git a/yarn.lock b/yarn.lock
index 4891dcc0..9a87254d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3039,6 +3039,11 @@
     graphql-import-node "^0.0.5"
     js-yaml "^4.1.0"
 
+"@fontsource/inter@^5.0.21":
+  version "5.0.21"
+  resolved "https://registry.yarnpkg.com/@fontsource/inter/-/inter-5.0.21.tgz#8689ff651fa53d00bd8837e4766dbd2e227bfede"
+  integrity sha512-Y4Ph0bYD5IfW8r9PSeiNjLvM6D/Bh5+YT9jOKiBqW3YS+AEBlmy8v74TpTNeZAvL3zHmikHCnzaKw7ob8LZiKQ==
+
 "@fontsource/plus-jakarta-sans@^4.5.11":
   version "4.5.11"
   resolved "https://registry.yarnpkg.com/@fontsource/plus-jakarta-sans/-/plus-jakarta-sans-4.5.11.tgz#89caa4a112ca7451a85942bb58d327618d731d8e"
@@ -3059,6 +3064,11 @@
   resolved "https://registry.yarnpkg.com/@fontsource/roboto/-/roboto-4.5.8.tgz#56347764786079838faf43f0eeda22dd7328437f"
   integrity sha512-CnD7zLItIzt86q4Sj3kZUiLcBk1dSk81qcqgMGaZe7SQ1P8hFNxhMl5AZthK1zrDM5m74VVhaOpuMGIL4gagaA==
 
+"@fontsource/vazir@^4.5.4":
+  version "4.5.4"
+  resolved "https://registry.yarnpkg.com/@fontsource/vazir/-/vazir-4.5.4.tgz#0d2d0d7904c0be1aa1ff38dba72d316129532fdb"
+  integrity sha512-PnQwwPf9JDnCHHLx55c9QHBfPSQY4VOqhGTTQ0jUkAAJOW66gE6aCOKZGGANd5e3u95LGXEzzt6E0GZXVUv0cg==
+
 "@formatjs/cli@^6.0.4":
   version "6.0.4"
   resolved "https://registry.yarnpkg.com/@formatjs/cli/-/cli-6.0.4.tgz#f772639748ecb2173df0b028bf084df25e91d3f1"

From f7af125448cc3fecf61dda436c257035fc0f0ce4 Mon Sep 17 00:00:00 2001
From: Dmitry Lobachevsky <dmitriylobachevskiy@gmail.com>
Date: Thu, 12 Sep 2024 15:43:10 +0200
Subject: [PATCH 03/12] feat(dHEDGE V1 Withdraw): add dHEDGE V1 tokens redeem
 logic

---
 apps/dhedge/.eslintrc.json                    |   2 +-
 apps/dhedge/src/App.tsx                       |   2 +-
 apps/dhedge/src/clients/wagmi.ts              |   4 +-
 .../src/components/ThemeSwitchButton.tsx      |   6 +-
 apps/dhedge/src/components/Topnav.tsx         |   5 +-
 apps/dhedge/vite.config.ts                    |   6 +-
 libs/dhedge/withdraw/.eslintrc.json           |   2 +-
 libs/dhedge/withdraw/project.json             |  12 -
 .../InputStep/components/ApprovalButton.tsx   |   6 +-
 .../InputStep/components/SubmitButton.tsx     |  25 +-
 .../BurnForm/components/InputStep/index.tsx   |  15 +-
 .../BurnForm/components/WithdrawStep.tsx      |   8 +-
 .../withdraw/src/components/BurnForm/state.ts |  26 +-
 .../src/constants/abis/L1ComptrollerAbi.ts    | 354 +++++++++++++++++-
 .../withdraw/src/constants/contracts.ts       |   5 +-
 libs/dhedge/withdraw/src/constants/index.ts   |   5 +-
 libs/dhedge/withdraw/src/constants/tokens.ts  |   8 +-
 libs/dhedge/withdraw/src/helpers.ts           |  47 +++
 .../src/hooks/useBaseFeeAndMaxFeePerGas.tsx   |  36 ++
 .../src/hooks/useL1VaultAddressWithBalance.ts |   9 +-
 .../withdraw/src/hooks/useNeedsApproval.ts    |   7 +
 .../withdraw/src/hooks/useRedeemCallConfig.ts |  60 +++
 libs/dhedge/withdraw/src/views/Withdraw.tsx   |   6 +-
 libs/dhedge/withdraw/vite.config.ts           |  40 --
 .../wagmi/components/CurrentNetworkIcon.tsx   |  16 +-
 25 files changed, 585 insertions(+), 127 deletions(-)
 create mode 100644 libs/dhedge/withdraw/src/helpers.ts
 create mode 100644 libs/dhedge/withdraw/src/hooks/useBaseFeeAndMaxFeePerGas.tsx
 create mode 100644 libs/dhedge/withdraw/src/hooks/useNeedsApproval.ts
 create mode 100644 libs/dhedge/withdraw/src/hooks/useRedeemCallConfig.ts
 delete mode 100644 libs/dhedge/withdraw/vite.config.ts

diff --git a/apps/dhedge/.eslintrc.json b/apps/dhedge/.eslintrc.json
index bd661168..734ddace 100644
--- a/apps/dhedge/.eslintrc.json
+++ b/apps/dhedge/.eslintrc.json
@@ -1,5 +1,5 @@
 {
-  "extends": ["plugin:@nrwl/nx/react", "../../.eslintrc.base.json"],
+  "extends": ["plugin:@nrwl/nx/react", "../../.eslintrc.json"],
   "ignorePatterns": ["!**/*"],
   "overrides": [
     {
diff --git a/apps/dhedge/src/App.tsx b/apps/dhedge/src/App.tsx
index c2a4da05..8e286bf4 100644
--- a/apps/dhedge/src/App.tsx
+++ b/apps/dhedge/src/App.tsx
@@ -1,8 +1,8 @@
+import { Withdraw } from '@frontend/dhedge-withdraw';
 import { Stack } from '@mui/material';
 
 import { Footer } from './components/Footer';
 import { Topnav } from './components/Topnav';
-import { Withdraw } from '@frontend/dhedge-withdraw';
 
 export const App = () => {
   return (
diff --git a/apps/dhedge/src/clients/wagmi.ts b/apps/dhedge/src/clients/wagmi.ts
index ec6d8f77..2ab6fe6b 100644
--- a/apps/dhedge/src/clients/wagmi.ts
+++ b/apps/dhedge/src/clients/wagmi.ts
@@ -11,7 +11,7 @@ import {
   walletConnectWallet,
 } from '@rainbow-me/rainbowkit/wallets';
 import { configureChains, createClient } from 'wagmi';
-import { mainnet } from 'wagmi/chains';
+import { arbitrum, mainnet } from 'wagmi/chains';
 import { alchemyProvider } from 'wagmi/providers/alchemy';
 
 import type { Wallet } from '@rainbow-me/rainbowkit';
@@ -20,7 +20,7 @@ import type { Chain, Connector } from 'wagmi';
 const POLLING_INTERVAL = 15_000;
 
 export const { chains, provider } = configureChains(
-  [mainnet],
+  [mainnet, arbitrum],
   [
     alchemyProvider({ apiKey: process.env['NX_ALCHEMY_MAIN_API_KEY'] }),
     alchemyProvider({ apiKey: process.env['NX_ALCHEMY_FALLBACK_API_KEY'] }),
diff --git a/apps/dhedge/src/components/ThemeSwitchButton.tsx b/apps/dhedge/src/components/ThemeSwitchButton.tsx
index d5cf3f69..734097ba 100644
--- a/apps/dhedge/src/components/ThemeSwitchButton.tsx
+++ b/apps/dhedge/src/components/ThemeSwitchButton.tsx
@@ -1,8 +1,10 @@
-import { FC } from 'react';
-import { ButtonProps, IconButton, useTheme } from '@mui/material';
 import { useToggleThemeMode } from '@frontend/shared-providers';
+import { IconButton, useTheme } from '@mui/material';
 import { Moon, Sun } from 'phosphor-react';
 
+import type { ButtonProps } from '@mui/material';
+import type { FC } from 'react';
+
 export const ThemeSwitchButton: FC<ButtonProps> = (props) => {
   const {
     palette: { mode, warning },
diff --git a/apps/dhedge/src/components/Topnav.tsx b/apps/dhedge/src/components/Topnav.tsx
index 0ed7f851..14bdaca4 100644
--- a/apps/dhedge/src/components/Topnav.tsx
+++ b/apps/dhedge/src/components/Topnav.tsx
@@ -1,10 +1,11 @@
 import { DHEDGE } from '@frontend/shared-constants';
+import { DhedgeLogo } from '@frontend/shared-icons';
 import {
   OpenAccountModalButton,
   OpenNetworkModalButton,
 } from '@frontend/shared-providers';
-import { alpha, AppBar, Button, IconButton, Stack } from '@mui/material';
-import { DhedgeLogo } from '@frontend/shared-icons';
+import { alpha, AppBar, IconButton, Stack } from '@mui/material';
+
 import { ThemeSwitchButton } from './ThemeSwitchButton';
 
 export const Topnav = () => {
diff --git a/apps/dhedge/vite.config.ts b/apps/dhedge/vite.config.ts
index 51007d77..edd8d1aa 100644
--- a/apps/dhedge/vite.config.ts
+++ b/apps/dhedge/vite.config.ts
@@ -1,10 +1,10 @@
 /// <reference types="vitest" />
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
-import viteTsConfigPaths from 'vite-tsconfig-paths';
 import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill';
+import react from '@vitejs/plugin-react';
 import rollupNodePolyFill from 'rollup-plugin-node-polyfills';
+import { defineConfig } from 'vite';
 import svgr from 'vite-plugin-svgr';
+import viteTsConfigPaths from 'vite-tsconfig-paths';
 
 export default defineConfig({
   cacheDir: '../../node_modules/.vite/dhedge',
diff --git a/libs/dhedge/withdraw/.eslintrc.json b/libs/dhedge/withdraw/.eslintrc.json
index df3772fb..50e59482 100644
--- a/libs/dhedge/withdraw/.eslintrc.json
+++ b/libs/dhedge/withdraw/.eslintrc.json
@@ -1,5 +1,5 @@
 {
-  "extends": ["plugin:@nrwl/nx/react", "../../../.eslintrc.base.json"],
+  "extends": ["plugin:@nrwl/nx/react", "../../../.eslintrc.json"],
   "ignorePatterns": ["!**/*"],
   "overrides": [
     {
diff --git a/libs/dhedge/withdraw/project.json b/libs/dhedge/withdraw/project.json
index c1cc60d4..7ed49ebc 100644
--- a/libs/dhedge/withdraw/project.json
+++ b/libs/dhedge/withdraw/project.json
@@ -11,18 +11,6 @@
       "options": {
         "lintFilePatterns": ["libs/dhedge/withdraw/**/*.{ts,tsx,js,jsx}"]
       }
-    },
-    "build": {
-      "executor": "@nrwl/vite:build",
-      "outputs": ["{options.outputPath}"],
-      "defaultConfiguration": "production",
-      "options": {
-        "outputPath": "dist/libs/dhedge/withdraw"
-      },
-      "configurations": {
-        "development": {},
-        "production": {}
-      }
     }
   }
 }
diff --git a/libs/dhedge/withdraw/src/components/BurnForm/components/InputStep/components/ApprovalButton.tsx b/libs/dhedge/withdraw/src/components/BurnForm/components/InputStep/components/ApprovalButton.tsx
index 719a903c..7931f4b7 100644
--- a/libs/dhedge/withdraw/src/components/BurnForm/components/InputStep/components/ApprovalButton.tsx
+++ b/libs/dhedge/withdraw/src/components/BurnForm/components/InputStep/components/ApprovalButton.tsx
@@ -9,10 +9,11 @@ import {
   useWaitForTransaction,
 } from 'wagmi';
 
+import { l1ComptrollerContract } from '../../../../../constants';
+import { useNeedsApproval } from '../../../../../hooks/useNeedsApproval';
 import { useTrackedState } from '../../../state';
 
 import type { ButtonProps } from '@mui/material';
-import { l1ComptrollerContract } from '../../../../../constants';
 
 const buttonProps: ButtonProps = {
   size: 'large',
@@ -22,7 +23,8 @@ const buttonProps: ButtonProps = {
 export const ApprovalButton = (props: ButtonProps) => {
   const { chain } = useNetwork();
   const pushNotification = usePushNotification();
-  const { l1token, needsApproval, isError, refetch } = useTrackedState();
+  const { l1token, isError, refetch } = useTrackedState();
+  const needsApproval = useNeedsApproval();
 
   const { config } = usePrepareContractWrite({
     address: l1token.contract.address,
diff --git a/libs/dhedge/withdraw/src/components/BurnForm/components/InputStep/components/SubmitButton.tsx b/libs/dhedge/withdraw/src/components/BurnForm/components/InputStep/components/SubmitButton.tsx
index 0cc4b5a7..09272859 100644
--- a/libs/dhedge/withdraw/src/components/BurnForm/components/InputStep/components/SubmitButton.tsx
+++ b/libs/dhedge/withdraw/src/components/BurnForm/components/InputStep/components/SubmitButton.tsx
@@ -1,11 +1,8 @@
-import { useMemo } from 'react';
-
 import { usePushNotification } from '@frontend/shared-providers';
 import { ViewEtherscanLink } from '@frontend/shared-ui';
 import { Button, CircularProgress } from '@mui/material';
 import { constants } from 'ethers';
 import {
-  useAccount,
   useContractWrite,
   useNetwork,
   usePrepareContractWrite,
@@ -13,10 +10,11 @@ import {
 } from 'wagmi';
 import { mainnet } from 'wagmi/chains';
 
+import { useNeedsApproval } from '../../../../../hooks/useNeedsApproval';
+import { useRedeemCallConfig } from '../../../../../hooks/useRedeemCallConfig';
 import { useTrackedState } from '../../../state';
 
 import type { ButtonProps } from '@mui/material';
-import { l1ComptrollerContract } from '../../../../../constants';
 
 export type SubmitButtonProps = {
   disabled?: boolean;
@@ -30,23 +28,10 @@ const buttonProps: ButtonProps = {
 export const SubmitButton = ({ disabled }: SubmitButtonProps) => {
   const { chain } = useNetwork();
   const pushNotification = usePushNotification();
-  const { address: walletAddress } = useAccount();
-  const { l1token, isError, needsApproval, reset } = useTrackedState();
-
-  //TODO: implement
-  const config = useMemo(
-    () => ({
-      functionName: 'redeem',
-      args: [walletAddress, l1token.amount.exact],
-      enabled:
-        !isError && l1token.amount.exact.gt(constants.Zero) && !needsApproval,
-      address: l1ComptrollerContract.address,
-      abi: l1ComptrollerContract.abi,
-      chainId: l1ComptrollerContract.chainId,
-    }),
-    [walletAddress, l1token.amount.exact, isError, needsApproval],
-  );
+  const { l1token, isError, reset } = useTrackedState();
+  const needsApproval = useNeedsApproval();
 
+  const config = useRedeemCallConfig();
   const { data: submitConfig } = usePrepareContractWrite(config);
 
   const {
diff --git a/libs/dhedge/withdraw/src/components/BurnForm/components/InputStep/index.tsx b/libs/dhedge/withdraw/src/components/BurnForm/components/InputStep/index.tsx
index b45c8684..fbe3b7db 100644
--- a/libs/dhedge/withdraw/src/components/BurnForm/components/InputStep/index.tsx
+++ b/libs/dhedge/withdraw/src/components/BurnForm/components/InputStep/index.tsx
@@ -4,6 +4,7 @@ import { Button, Stack, Typography } from '@mui/material';
 import { constants } from 'ethers';
 import { useAccount } from 'wagmi';
 
+import { useNeedsApproval } from '../../../../hooks/useNeedsApproval';
 import { useSetStep } from '../../hooks';
 import { useTrackedState } from '../../state';
 import { ApprovalButton } from './components/ApprovalButton';
@@ -11,16 +12,22 @@ import { SubmitButton } from './components/SubmitButton';
 import { TokenInputs } from './components/TokenInputs';
 
 import type { MotionStackProps } from '@frontend/shared-ui';
+
 export const InputStep = (props: MotionStackProps) => {
   const { isConnected } = useAccount();
-  const { l1token, l2token, needsApproval } = useTrackedState();
+  const { l1token, l2token } = useTrackedState();
   const setStep = useSetStep();
+  const needsApproval = useNeedsApproval();
 
   return (
     <MotionStack alignItems="flex-start" {...props}>
-      <Typography variant="h5" mb={2}>
-        Burn your dHEDGE V1 {l1token.contract.name ?? 'vault'} tokens to receive{' '}
-        {l2token.contract.name ?? ''} vault tokens
+      <Typography variant="h5" mb={1}>
+        Redeem your dHEDGE V1 {l1token.contract.name ?? 'vault'} tokens to
+        receive {l2token.contract.name ?? ''} vault tokens
+      </Typography>
+      <Typography variant="hint">
+        After redeeming your vault tokens from Ethereum, please wait while the
+        bridge issues your {l2token.contract.symbol} tokens.
       </Typography>
       <Stack width={1} justifyContent="center" alignItems="center" my={8}>
         <Stack width={3 / 4}>
diff --git a/libs/dhedge/withdraw/src/components/BurnForm/components/WithdrawStep.tsx b/libs/dhedge/withdraw/src/components/BurnForm/components/WithdrawStep.tsx
index 158426b3..c185bd3e 100644
--- a/libs/dhedge/withdraw/src/components/BurnForm/components/WithdrawStep.tsx
+++ b/libs/dhedge/withdraw/src/components/BurnForm/components/WithdrawStep.tsx
@@ -3,9 +3,9 @@ import { MotionStack } from '@frontend/shared-ui';
 import { Button, Stack, Typography } from '@mui/material';
 
 import { useSetStep } from '../hooks';
+import { useTrackedState } from '../state';
 
 import type { MotionStackProps } from '@frontend/shared-ui';
-import { useTrackedState } from 'libs/dhedge/withdraw/src/components/BurnForm/state';
 
 export const WithdrawStep = (props: MotionStackProps) => {
   const setStep = useSetStep();
@@ -18,13 +18,9 @@ export const WithdrawStep = (props: MotionStackProps) => {
       </Typography>
       <Typography mb={2}>
         Your {l2token.contract.name} tokens are earning yield and you can hold
-        on to them.<br></br>Optionally you can go to dHEDGE app to withdraw your
+        on to them.<br></br>Optionally you can go to dHEDGE app to withdraw your{' '}
         {l2token.contract.symbol} tokens to stablecoins.
       </Typography>
-      <Typography>
-        After burning your vault tokens from Ethereum, please wait while the
-        bridge issues your {l2token.contract.symbol} tokens.
-      </Typography>
       <Stack direction="row" my={4} justifyContent="center" alignItems="center">
         <Button
           href={`${DHEDGE_DAPP_LINK}/vault/${l2token.contract.address}`}
diff --git a/libs/dhedge/withdraw/src/components/BurnForm/state.ts b/libs/dhedge/withdraw/src/components/BurnForm/state.ts
index 3686f66e..2c5f8610 100644
--- a/libs/dhedge/withdraw/src/components/BurnForm/state.ts
+++ b/libs/dhedge/withdraw/src/components/BurnForm/state.ts
@@ -1,20 +1,22 @@
 import { useCallback, useEffect, useState } from 'react';
 
+import { useDebounce } from '@frontend/shared-hooks';
 import { BigDecimal } from '@frontend/shared-utils';
 import produce from 'immer';
 import { createContainer } from 'react-tracked';
 import { useAccount, useContractRead, useContractReads } from 'wagmi';
 
-import type { Token } from '@frontend/shared-constants';
-import type { BigNumberish } from 'ethers';
 import {
   dV1Token,
+  l1ComptrollerContract,
   l2ComptrollerContract,
   zeroMainnetToken,
 } from '../../constants';
-import { useDebounce } from '@frontend/shared-hooks';
 import { useL1VaultAddressWithBalance } from '../../hooks/useL1VaultAddressWithBalance';
 
+import type { Token } from '@frontend/shared-constants';
+import type { BigNumberish } from 'ethers';
+
 type InputProps = {
   contract: Token;
   amount: BigDecimal;
@@ -26,7 +28,7 @@ type StateProps = {
   step: number;
   isLoading: boolean;
   isError: boolean;
-  needsApproval: boolean;
+  allowance: BigDecimal;
   l1token: InputProps;
   l2token: InputProps;
   refetch: () => void;
@@ -40,7 +42,7 @@ export const { Provider, useTrackedState, useUpdate } = createContainer(() => {
     step: 0,
     isLoading: true,
     isError: false,
-    needsApproval: true,
+    allowance: BigDecimal.ZERO,
     l1token: {
       amount: BigDecimal.ZERO,
       balance: BigDecimal.ZERO,
@@ -83,7 +85,7 @@ export const { Provider, useTrackedState, useUpdate } = createContainer(() => {
         abi: state.l1token.contract.abi,
         functionName: 'allowance',
         chainId: state.l1token.contract.chainId,
-        args: [walletAddress, l2ComptrollerContract.address],
+        args: [walletAddress, l1ComptrollerContract.address],
       },
       {
         address: state.l1token.contract.address,
@@ -121,11 +123,9 @@ export const { Provider, useTrackedState, useUpdate } = createContainer(() => {
       setState(
         produce((draft) => {
           draft.l1token.contract.name = data[0] as unknown as string;
-          draft.needsApproval = state.l1token.amount.exact.gt(
-            new BigDecimal(
-              data[1] as unknown as BigNumberish,
-              state.l1token.contract.decimals,
-            ).exact,
+          draft.allowance = new BigDecimal(
+            data[1] as unknown as BigNumberish,
+            state.l1token.contract.decimals,
           );
           draft.l1token.balance = new BigDecimal(
             data[2] as unknown as BigNumberish,
@@ -146,7 +146,7 @@ export const { Provider, useTrackedState, useUpdate } = createContainer(() => {
         }),
       );
     }
-  }, [data, refetch]);
+  }, [data, refetch, state.l1token.contract.decimals]);
 
   const debouncedL1TokenAmount = useDebounce(
     state.l1token.amount.exact.toString(),
@@ -180,7 +180,7 @@ export const { Provider, useTrackedState, useUpdate } = createContainer(() => {
         draft.l1token.balance = BigDecimal.ZERO;
         draft.l2token.balance = BigDecimal.ZERO;
         draft.l2token.balance = BigDecimal.ZERO;
-        draft.needsApproval = true;
+        draft.allowance = BigDecimal.ZERO;
         draft.isError = false;
       }),
     );
diff --git a/libs/dhedge/withdraw/src/constants/abis/L1ComptrollerAbi.ts b/libs/dhedge/withdraw/src/constants/abis/L1ComptrollerAbi.ts
index 04679ac2..4f741269 100644
--- a/libs/dhedge/withdraw/src/constants/abis/L1ComptrollerAbi.ts
+++ b/libs/dhedge/withdraw/src/constants/abis/L1ComptrollerAbi.ts
@@ -1 +1,353 @@
-export const L1ComptrollerAbi = [] as const;
+export const L1ComptrollerAbi = [
+  { inputs: [], stateMutability: 'nonpayable', type: 'constructor' },
+  { inputs: [], name: 'L2ComptrollerNotSet', type: 'error' },
+  {
+    inputs: [{ internalType: 'address', name: 'token', type: 'address' }],
+    name: 'NonRedeemableToken',
+    type: 'error',
+  },
+  { inputs: [], name: 'ZeroAddress', type: 'error' },
+  { inputs: [], name: 'ZeroValue', type: 'error' },
+  {
+    anonymous: false,
+    inputs: [
+      {
+        indexed: false,
+        internalType: 'address',
+        name: 'token',
+        type: 'address',
+      },
+    ],
+    name: 'BurnTokenAdded',
+    type: 'event',
+  },
+  {
+    anonymous: false,
+    inputs: [
+      {
+        indexed: false,
+        internalType: 'address',
+        name: 'token',
+        type: 'address',
+      },
+    ],
+    name: 'BurnTokenRemoved',
+    type: 'event',
+  },
+  {
+    anonymous: false,
+    inputs: [
+      {
+        indexed: false,
+        internalType: 'uint256',
+        name: 'newCrossChainGasLimit',
+        type: 'uint256',
+      },
+    ],
+    name: 'CrossChainGasLimitModified',
+    type: 'event',
+  },
+  {
+    anonymous: false,
+    inputs: [
+      {
+        indexed: true,
+        internalType: 'address',
+        name: 'token',
+        type: 'address',
+      },
+      {
+        indexed: false,
+        internalType: 'uint256',
+        name: 'amount',
+        type: 'uint256',
+      },
+    ],
+    name: 'EmergencyWithdrawal',
+    type: 'event',
+  },
+  {
+    anonymous: false,
+    inputs: [
+      {
+        indexed: false,
+        internalType: 'uint8',
+        name: 'version',
+        type: 'uint8',
+      },
+    ],
+    name: 'Initialized',
+    type: 'event',
+  },
+  {
+    anonymous: false,
+    inputs: [
+      {
+        indexed: false,
+        internalType: 'address',
+        name: 'newL2Comptroller',
+        type: 'address',
+      },
+    ],
+    name: 'L2ComptrollerSet',
+    type: 'event',
+  },
+  {
+    anonymous: false,
+    inputs: [
+      {
+        indexed: true,
+        internalType: 'address',
+        name: 'previousOwner',
+        type: 'address',
+      },
+      {
+        indexed: true,
+        internalType: 'address',
+        name: 'newOwner',
+        type: 'address',
+      },
+    ],
+    name: 'OwnershipTransferred',
+    type: 'event',
+  },
+  {
+    anonymous: false,
+    inputs: [
+      {
+        indexed: false,
+        internalType: 'address',
+        name: 'account',
+        type: 'address',
+      },
+    ],
+    name: 'Paused',
+    type: 'event',
+  },
+  {
+    anonymous: false,
+    inputs: [
+      {
+        indexed: true,
+        internalType: 'address',
+        name: 'depositor',
+        type: 'address',
+      },
+      {
+        indexed: true,
+        internalType: 'address',
+        name: 'tokenToBurn',
+        type: 'address',
+      },
+      {
+        indexed: true,
+        internalType: 'address',
+        name: 'receiver',
+        type: 'address',
+      },
+      {
+        indexed: false,
+        internalType: 'uint256',
+        name: 'burnTokenAmount',
+        type: 'uint256',
+      },
+      {
+        indexed: false,
+        internalType: 'uint256',
+        name: 'totalAmountBurnt',
+        type: 'uint256',
+      },
+    ],
+    name: 'RedeemFromL1Initiated',
+    type: 'event',
+  },
+  {
+    anonymous: false,
+    inputs: [
+      {
+        indexed: true,
+        internalType: 'address',
+        name: 'msgSender',
+        type: 'address',
+      },
+      {
+        indexed: false,
+        internalType: 'uint256',
+        name: 'ticketId',
+        type: 'uint256',
+      },
+    ],
+    name: 'RetryableTicketCreated',
+    type: 'event',
+  },
+  {
+    anonymous: false,
+    inputs: [
+      {
+        indexed: false,
+        internalType: 'address',
+        name: 'account',
+        type: 'address',
+      },
+    ],
+    name: 'Unpaused',
+    type: 'event',
+  },
+  {
+    inputs: [],
+    name: 'BURN_ADDRESS',
+    outputs: [{ internalType: 'address', name: '', type: 'address' }],
+    stateMutability: 'view',
+    type: 'function',
+  },
+  {
+    inputs: [{ internalType: 'address', name: 'burnToken', type: 'address' }],
+    name: 'addBurnToken',
+    outputs: [],
+    stateMutability: 'nonpayable',
+    type: 'function',
+  },
+  {
+    inputs: [
+      { internalType: 'address[]', name: 'burnTokens', type: 'address[]' },
+    ],
+    name: 'addBurnTokens',
+    outputs: [],
+    stateMutability: 'nonpayable',
+    type: 'function',
+  },
+  {
+    inputs: [
+      { internalType: 'address', name: 'depositor', type: 'address' },
+      { internalType: 'address', name: 'receiver', type: 'address' },
+      { internalType: 'address', name: 'tokenToBurn', type: 'address' },
+    ],
+    name: 'burntAmountOf',
+    outputs: [
+      { internalType: 'uint256', name: 'totalAmount', type: 'uint256' },
+    ],
+    stateMutability: 'view',
+    type: 'function',
+  },
+  {
+    inputs: [
+      { internalType: 'address', name: 'token', type: 'address' },
+      { internalType: 'uint256', name: 'amount', type: 'uint256' },
+    ],
+    name: 'emergencyWithdraw',
+    outputs: [],
+    stateMutability: 'nonpayable',
+    type: 'function',
+  },
+  {
+    inputs: [],
+    name: 'inbox',
+    outputs: [{ internalType: 'contract IInbox', name: '', type: 'address' }],
+    stateMutability: 'view',
+    type: 'function',
+  },
+  {
+    inputs: [
+      { internalType: 'address', name: '_owner', type: 'address' },
+      { internalType: 'contract IInbox', name: '_inbox', type: 'address' },
+    ],
+    name: 'initialize',
+    outputs: [],
+    stateMutability: 'nonpayable',
+    type: 'function',
+  },
+  {
+    inputs: [],
+    name: 'l2Comptroller',
+    outputs: [{ internalType: 'address', name: '', type: 'address' }],
+    stateMutability: 'view',
+    type: 'function',
+  },
+  {
+    inputs: [],
+    name: 'owner',
+    outputs: [{ internalType: 'address', name: '', type: 'address' }],
+    stateMutability: 'view',
+    type: 'function',
+  },
+  {
+    inputs: [],
+    name: 'pause',
+    outputs: [],
+    stateMutability: 'nonpayable',
+    type: 'function',
+  },
+  {
+    inputs: [],
+    name: 'paused',
+    outputs: [{ internalType: 'bool', name: '', type: 'bool' }],
+    stateMutability: 'view',
+    type: 'function',
+  },
+  {
+    inputs: [
+      { internalType: 'address', name: 'tokenToBurn', type: 'address' },
+      { internalType: 'address', name: 'tokenToBuy', type: 'address' },
+      { internalType: 'uint256', name: 'burnTokenAmount', type: 'uint256' },
+      { internalType: 'address', name: 'receiver', type: 'address' },
+      { internalType: 'bytes', name: 'additionalData', type: 'bytes' },
+    ],
+    name: 'redeem',
+    outputs: [],
+    stateMutability: 'payable',
+    type: 'function',
+  },
+  {
+    inputs: [{ internalType: 'address', name: 'burnToken', type: 'address' }],
+    name: 'removeBurnToken',
+    outputs: [],
+    stateMutability: 'nonpayable',
+    type: 'function',
+  },
+  {
+    inputs: [
+      { internalType: 'address[]', name: 'burnTokens', type: 'address[]' },
+    ],
+    name: 'removeBurnTokens',
+    outputs: [],
+    stateMutability: 'nonpayable',
+    type: 'function',
+  },
+  {
+    inputs: [],
+    name: 'renounceOwnership',
+    outputs: [],
+    stateMutability: 'nonpayable',
+    type: 'function',
+  },
+  {
+    inputs: [
+      { internalType: 'address', name: 'newL2Comptroller', type: 'address' },
+    ],
+    name: 'setL2Comptroller',
+    outputs: [],
+    stateMutability: 'nonpayable',
+    type: 'function',
+  },
+  {
+    inputs: [{ internalType: 'address', name: 'token', type: 'address' }],
+    name: 'tokensToBurn',
+    outputs: [{ internalType: 'bool', name: 'burnable', type: 'bool' }],
+    stateMutability: 'view',
+    type: 'function',
+  },
+  {
+    inputs: [{ internalType: 'address', name: 'newOwner', type: 'address' }],
+    name: 'transferOwnership',
+    outputs: [],
+    stateMutability: 'nonpayable',
+    type: 'function',
+  },
+  {
+    inputs: [],
+    name: 'unpause',
+    outputs: [],
+    stateMutability: 'nonpayable',
+    type: 'function',
+  },
+] as const;
diff --git a/libs/dhedge/withdraw/src/constants/contracts.ts b/libs/dhedge/withdraw/src/constants/contracts.ts
index 1146bc3c..57c63b4c 100644
--- a/libs/dhedge/withdraw/src/constants/contracts.ts
+++ b/libs/dhedge/withdraw/src/constants/contracts.ts
@@ -1,8 +1,9 @@
 import { arbitrum, mainnet } from 'wagmi/chains';
 
-import { Contract } from '@frontend/shared-constants';
-import { L2ComptrollerAbi } from './abis/L2ComptrollerAbi';
 import { L1ComptrollerAbi } from './abis/L1ComptrollerAbi';
+import { L2ComptrollerAbi } from './abis/L2ComptrollerAbi';
+
+import type { Contract } from '@frontend/shared-constants';
 
 export const l2ComptrollerContract: Contract = {
   address: '0xa30ee837aE10Acb36fF75eA4a720E1fAa1BA2293',
diff --git a/libs/dhedge/withdraw/src/constants/index.ts b/libs/dhedge/withdraw/src/constants/index.ts
index 2bdd4707..f6068791 100644
--- a/libs/dhedge/withdraw/src/constants/index.ts
+++ b/libs/dhedge/withdraw/src/constants/index.ts
@@ -1,4 +1,4 @@
-import { Address } from 'wagmi';
+import type { Address } from 'wagmi';
 
 export * from './tokens';
 export * from './contracts';
@@ -6,3 +6,6 @@ export * from './contracts';
 export const deprecatedL1Vaults: Address[] = [
   '0x992ed71cad18d16608a14f52a1fb5b6a44bf821c', // test
 ];
+
+export const redeemFromL1Length = 164;
+export const redeemGasLimit = 1000000;
diff --git a/libs/dhedge/withdraw/src/constants/tokens.ts b/libs/dhedge/withdraw/src/constants/tokens.ts
index 91e89a74..2f077dd2 100644
--- a/libs/dhedge/withdraw/src/constants/tokens.ts
+++ b/libs/dhedge/withdraw/src/constants/tokens.ts
@@ -1,8 +1,10 @@
-import { arbitrum, mainnet } from 'wagmi/chains';
-import { Token } from '@frontend/shared-constants';
-import { PoolLogicAbi } from './abis/PoolLogicAbi';
 import { AddressZero } from '@dhedge/core-ui-kit/const';
 import { ERC20ABI } from '@mstable/metavaults-web';
+import { arbitrum, mainnet } from 'wagmi/chains';
+
+import { PoolLogicAbi } from './abis/PoolLogicAbi';
+
+import type { Token } from '@frontend/shared-constants';
 
 export const zeroMainnetToken: Token = {
   address: AddressZero,
diff --git a/libs/dhedge/withdraw/src/helpers.ts b/libs/dhedge/withdraw/src/helpers.ts
new file mode 100644
index 00000000..218e000f
--- /dev/null
+++ b/libs/dhedge/withdraw/src/helpers.ts
@@ -0,0 +1,47 @@
+import { utils } from 'ethers';
+
+import { redeemFromL1Length, redeemGasLimit } from './constants';
+
+import type { BigNumber } from 'ethers';
+import type { Address } from 'wagmi';
+
+const { defaultAbiCoder } = utils;
+
+// https://github.com/OffchainLabs/nitro-contracts/blob/fbbcef09c95f69decabaced3da683f987902f3e2/src/bridge/IInboxBase.sol#L57
+export const calculateMaxSubmissionCost = (baseFee: BigNumber) =>
+  baseFee.mul(1400 + 6 * redeemFromL1Length);
+
+/*
+struct ArbAdditionalData {
+   uint256 maxSubmissionCost;
+   address excessFeeRefundAddress;
+   address callValueRefundAddress;
+   uint256 gasLimit;
+   uint256 maxFeePerGas;
+ }
+ */
+export const encodeArbAdditionalData = ({
+  walletAddress,
+  l1BaseFee,
+  l2MaxFeePerGas,
+}: {
+  walletAddress: Address;
+  l1BaseFee: BigNumber;
+  l2MaxFeePerGas: BigNumber;
+}) => {
+  const maxSubmissionCost = calculateMaxSubmissionCost(l1BaseFee);
+
+  return defaultAbiCoder.encode(
+    // https://github.com/dhedge/buyback-contract/blob/version-2/src/abstracts/L1ComptrollerV2Base.sol#L98C22-L98C36
+    ['tuple(uint256, address, address, uint256, uint256)'],
+    [
+      [
+        maxSubmissionCost,
+        walletAddress,
+        walletAddress,
+        redeemGasLimit,
+        l2MaxFeePerGas,
+      ],
+    ],
+  );
+};
diff --git a/libs/dhedge/withdraw/src/hooks/useBaseFeeAndMaxFeePerGas.tsx b/libs/dhedge/withdraw/src/hooks/useBaseFeeAndMaxFeePerGas.tsx
new file mode 100644
index 00000000..002706fd
--- /dev/null
+++ b/libs/dhedge/withdraw/src/hooks/useBaseFeeAndMaxFeePerGas.tsx
@@ -0,0 +1,36 @@
+import { useEffect, useState } from 'react';
+
+import { BigDecimal } from '@frontend/shared-utils';
+import { ethers } from 'ethers';
+import { useBlockNumber, useProvider } from 'wagmi';
+
+export const useBaseFeeAndMaxFeePerGas = ({ chainId }: { chainId: number }) => {
+  const { data: blockNumber } = useBlockNumber({ chainId });
+  const provider = useProvider({ chainId });
+
+  const [baseFee, setBaseFee] = useState(BigDecimal.ZERO.exact);
+  const [maxFeePerGas, setMaxFeePerGas] = useState(BigDecimal.ZERO.exact);
+
+  useEffect(() => {
+    const fetchBaseFeeAndMaxFeePerGas = async () => {
+      if (!blockNumber || !provider) {
+        return;
+      }
+
+      const block = await provider.getBlock(blockNumber);
+      // increase base fee by 15%
+      const baseFee = block.baseFeePerGas.mul(115).div(100);
+
+      const priorityFeePerGas = ethers.utils.parseUnits('2', 'gwei');
+
+      const maxFeePerGas = baseFee.add(priorityFeePerGas);
+
+      setBaseFee(baseFee);
+      setMaxFeePerGas(maxFeePerGas);
+    };
+
+    fetchBaseFeeAndMaxFeePerGas();
+  }, [blockNumber, provider]);
+
+  return { baseFee, maxFeePerGas };
+};
diff --git a/libs/dhedge/withdraw/src/hooks/useL1VaultAddressWithBalance.ts b/libs/dhedge/withdraw/src/hooks/useL1VaultAddressWithBalance.ts
index 53331e7b..cfea3ce2 100644
--- a/libs/dhedge/withdraw/src/hooks/useL1VaultAddressWithBalance.ts
+++ b/libs/dhedge/withdraw/src/hooks/useL1VaultAddressWithBalance.ts
@@ -1,8 +1,11 @@
-import { Address, useAccount, useContractReads } from 'wagmi';
-import { deprecatedL1Vaults } from '../constants';
+import { AddressZero } from '@dhedge/core-ui-kit/const';
+import { useAccount, useContractReads } from 'wagmi';
 import { mainnet } from 'wagmi/chains';
+
+import { deprecatedL1Vaults } from '../constants';
 import { PoolLogicAbi } from '../constants/abis/PoolLogicAbi';
-import { AddressZero } from '@dhedge/core-ui-kit/const';
+
+import type { Address } from 'wagmi';
 
 export const useL1VaultAddressWithBalance = (): Address => {
   const { address: walletAddress } = useAccount();
diff --git a/libs/dhedge/withdraw/src/hooks/useNeedsApproval.ts b/libs/dhedge/withdraw/src/hooks/useNeedsApproval.ts
new file mode 100644
index 00000000..0a80658c
--- /dev/null
+++ b/libs/dhedge/withdraw/src/hooks/useNeedsApproval.ts
@@ -0,0 +1,7 @@
+import { useTrackedState } from '../components/BurnForm/state';
+
+export const useNeedsApproval = () => {
+  const { l1token, allowance } = useTrackedState();
+
+  return l1token.amount.exact.gt(allowance.exact);
+};
diff --git a/libs/dhedge/withdraw/src/hooks/useRedeemCallConfig.ts b/libs/dhedge/withdraw/src/hooks/useRedeemCallConfig.ts
new file mode 100644
index 00000000..ba7a40b0
--- /dev/null
+++ b/libs/dhedge/withdraw/src/hooks/useRedeemCallConfig.ts
@@ -0,0 +1,60 @@
+import { useMemo } from 'react';
+
+import { constants } from 'ethers';
+import { useAccount } from 'wagmi';
+
+import { useTrackedState } from '../components/BurnForm/state';
+import { l1ComptrollerContract, redeemGasLimit } from '../constants';
+import {
+  calculateMaxSubmissionCost,
+  encodeArbAdditionalData,
+} from '../helpers';
+import { useBaseFeeAndMaxFeePerGas } from './useBaseFeeAndMaxFeePerGas';
+import { useNeedsApproval } from './useNeedsApproval';
+
+export const useRedeemCallConfig = () => {
+  const { address: walletAddress } = useAccount();
+  const { l1token, l2token, isError } = useTrackedState();
+  const needsApproval = useNeedsApproval();
+  const { baseFee: l1BaseFee } = useBaseFeeAndMaxFeePerGas({
+    chainId: l1token.contract.chainId,
+  });
+  const { maxFeePerGas: l2MaxFeePerGas } = useBaseFeeAndMaxFeePerGas({
+    chainId: l2token.contract.chainId,
+  });
+
+  return useMemo(() => {
+    const maxSubmissionCost = calculateMaxSubmissionCost(l1BaseFee);
+    const encodedArbAdditionalData = encodeArbAdditionalData({
+      walletAddress,
+      l2MaxFeePerGas,
+      l1BaseFee,
+    });
+    const ethValue = maxSubmissionCost.add(l2MaxFeePerGas.mul(redeemGasLimit));
+    return {
+      functionName: 'redeem',
+      args: [
+        l1token.contract.address,
+        l2token.contract.address,
+        l1token.amount.exact,
+        walletAddress,
+        encodedArbAdditionalData,
+        { value: ethValue },
+      ],
+      enabled:
+        !isError && l1token.amount.exact.gt(constants.Zero) && !needsApproval,
+      address: l1ComptrollerContract.address,
+      abi: l1ComptrollerContract.abi,
+      chainId: l1ComptrollerContract.chainId,
+    };
+  }, [
+    isError,
+    l1BaseFee,
+    l1token.amount.exact,
+    l1token.contract.address,
+    l2MaxFeePerGas,
+    l2token.contract.address,
+    needsApproval,
+    walletAddress,
+  ]);
+};
diff --git a/libs/dhedge/withdraw/src/views/Withdraw.tsx b/libs/dhedge/withdraw/src/views/Withdraw.tsx
index 2ee6aaa7..d283c0d9 100644
--- a/libs/dhedge/withdraw/src/views/Withdraw.tsx
+++ b/libs/dhedge/withdraw/src/views/Withdraw.tsx
@@ -1,7 +1,9 @@
-import { FC } from 'react';
-import { BurnForm } from '../components/BurnForm';
 import { Box } from '@mui/material';
 
+import { BurnForm } from '../components/BurnForm';
+
+import type { FC } from 'react';
+
 export const Withdraw: FC = () => {
   return (
     <Box pt={4}>
diff --git a/libs/dhedge/withdraw/vite.config.ts b/libs/dhedge/withdraw/vite.config.ts
deleted file mode 100644
index 0193129d..00000000
--- a/libs/dhedge/withdraw/vite.config.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import react from '@vitejs/plugin-react';
-import { join } from 'path';
-import { defineConfig } from 'vite';
-import dts from 'vite-plugin-dts';
-import svgr from 'vite-plugin-svgr';
-import tsconfigPaths from 'vite-tsconfig-paths';
-
-export default defineConfig({
-  plugins: [
-    dts({
-      tsConfigFilePath: join(__dirname, 'tsconfig.lib.json'),
-      // Faster builds by skipping tests. Set this to false to enable type checking.
-      skipDiagnostics: true,
-    }),
-    svgr(),
-    react(),
-    tsconfigPaths({
-      root: '../../../',
-      projects: ['tsconfig.base.json'],
-    }),
-  ],
-
-  // Configuration for building your library.
-  // See: https://vitejs.dev/guide/build.html#library-mode
-  build: {
-    lib: {
-      // Could also be a dictionary or array of multiple entry points.
-      entry: 'src/index.ts',
-      name: 'dhedge-withdraw',
-      fileName: 'index',
-      // Change this to the formats you want to support.
-      // Don't forgot to update your package.json as well.
-      formats: ['es', 'cjs'],
-    },
-    rollupOptions: {
-      // External packages that should not be bundled into your library.
-      external: ['react', 'react-dom', 'react/jsx-runtime'],
-    },
-  },
-});
diff --git a/libs/shared/providers/src/wagmi/components/CurrentNetworkIcon.tsx b/libs/shared/providers/src/wagmi/components/CurrentNetworkIcon.tsx
index 1a0ce1ba..52e379d8 100644
--- a/libs/shared/providers/src/wagmi/components/CurrentNetworkIcon.tsx
+++ b/libs/shared/providers/src/wagmi/components/CurrentNetworkIcon.tsx
@@ -1,16 +1,18 @@
-import { Ethereum, Optimism, Polygon } from '@frontend/shared-icons';
+import { Arbitrum, Ethereum, Optimism, Polygon } from '@frontend/shared-icons';
 import WarningAmberRounded from '@mui/icons-material/WarningAmberRounded';
 import { Box } from '@mui/material';
 import { Plugs } from 'phosphor-react';
 import { useNetwork } from 'wagmi';
-import { optimism, optimismGoerli, polygon, polygonMumbai } from 'wagmi/chains';
+import {
+  arbitrum,
+  optimism,
+  optimismGoerli,
+  polygon,
+  polygonMumbai,
+} from 'wagmi/chains';
 
 import type { SvgIconProps } from '@mui/material';
 
-export type CurrentNetworkIconProps = SvgIconProps & {
-  activeChain?: { id: number; unsupported?: boolean };
-};
-
 export const CurrentNetworkIcon = (props: SvgIconProps) => {
   const { chain } = useNetwork();
 
@@ -21,6 +23,8 @@ export const CurrentNetworkIcon = (props: SvgIconProps) => {
       <Polygon {...props} sx={{ width: 24, height: 24, ...props?.sx }} />
     ) : ([optimism.id, optimismGoerli.id] as number[]).includes(chain?.id) ? (
       <Optimism {...props} sx={{ width: 24, height: 24, ...props?.sx }} />
+    ) : chain.id === arbitrum.id ? (
+      <Arbitrum {...props} sx={{ width: 24, height: 24, ...props?.sx }} />
     ) : (
       <Ethereum {...props} sx={{ width: 24, height: 24, ...props?.sx }} />
     )

From 1aa3ba6ceef849b69c5b8de83101fece313df044 Mon Sep 17 00:00:00 2001
From: Dmitry Lobachevsky <dmitriylobachevskiy@gmail.com>
Date: Thu, 12 Sep 2024 16:01:33 +0200
Subject: [PATCH 04/12] feat(dHEDGE V1 Withdraw): add GitHub workflows

---
 .firebaserc                          |  3 +-
 .github/workflows/dhedge-dev.yml     | 59 ++++++++++++++++++++++++++++
 .github/workflows/dhedge-main.yml    | 47 ++++++++++++++++++++++
 .github/workflows/dhedge-preview.yml | 59 ++++++++++++++++++++++++++++
 firebase.dhedge.json                 | 16 ++++++++
 5 files changed, 183 insertions(+), 1 deletion(-)
 create mode 100644 .github/workflows/dhedge-dev.yml
 create mode 100644 .github/workflows/dhedge-main.yml
 create mode 100644 .github/workflows/dhedge-preview.yml
 create mode 100644 firebase.dhedge.json

diff --git a/.firebaserc b/.firebaserc
index 99f2fb38..416378c6 100644
--- a/.firebaserc
+++ b/.firebaserc
@@ -1,6 +1,7 @@
 {
   "projects": {
     "lts": "apps-lts",
-    "mstable": "frontend-7e17f"
+    "mstable": "frontend-7e17f",
+    "dhedge": "dhedge-v1-withdraw"
   }
 }
diff --git a/.github/workflows/dhedge-dev.yml b/.github/workflows/dhedge-dev.yml
new file mode 100644
index 00000000..68445c23
--- /dev/null
+++ b/.github/workflows/dhedge-dev.yml
@@ -0,0 +1,59 @@
+name: dHEDGE Dev
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - main
+    paths:
+      - 'apps/dhedge/**'
+      - 'libs/dhedge/**'
+      - 'libs/shared/**'
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+env:
+  NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_CLOUD_ACCESS_TOKEN }}
+
+jobs:
+  build_and_publish:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        name: Checkout [main]
+        with:
+          fetch-depth: 0
+
+      - uses: actions/setup-node@v3
+        name: Setup node
+        with:
+          node-version: 18
+          cache: 'yarn'
+
+      - name: Install jq
+        run: |
+          sudo apt-get update
+          sudo apt-get install jq
+
+      - run: yarn install --frozen-lockfile
+        name: Install dependencies
+
+      - name: Build
+        env:
+          alchemyMain: ${{ secrets.ALCHEMY_FALLBACK_API_KEY }}
+          alchemyFallback: ${{ secrets.ALCHEMY_FALLBACK_API_KEY }}
+        run: NX_ALCHEMY_MAIN_API_KEY=$alchemyMain NX_ALCHEMY_FALLBACK_API_KEY=$alchemyFallback yarn nx build dhedge
+
+      - name: Copy Firebase dHEDGE to Firebase
+        run: cp firebase.dhedge.json firebase.json
+
+      - name: Firebase deploy
+        uses: FirebaseExtended/action-hosting-deploy@v0
+        with:
+          repoToken: '${{ secrets.GITHUB_TOKEN }}'
+          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_DHEDGE }}'
+          expires: 30d
+          projectId: dhedge-v1-withdraw
+          channelId: dev
diff --git a/.github/workflows/dhedge-main.yml b/.github/workflows/dhedge-main.yml
new file mode 100644
index 00000000..37562c7d
--- /dev/null
+++ b/.github/workflows/dhedge-main.yml
@@ -0,0 +1,47 @@
+name: dHEDGE Main
+
+on:
+  workflow_dispatch:
+
+env:
+  NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_CLOUD_ACCESS_TOKEN }}
+
+jobs:
+  build_and_publish:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        name: Checkout [main]
+        with:
+          fetch-depth: 0
+
+      - uses: actions/setup-node@v3
+        name: Setup node
+        with:
+          node-version: 18
+          cache: 'yarn'
+
+      - name: Install jq
+        run: |
+          sudo apt-get update
+          sudo apt-get install jq
+
+      - run: yarn install --frozen-lockfile
+        name: Install dependencies
+
+      - name: Build
+        env:
+          alchemyMain: ${{ secrets.ALCHEMY_MAIN_API_KEY }}
+          alchemyFallback: ${{ secrets.ALCHEMY_FALLBACK_API_KEY }}
+        run: NX_ALCHEMY_MAIN_API_KEY=$alchemyMain NX_ALCHEMY_FALLBACK_API_KEY=$alchemyFallback yarn nx build dhedge
+
+      - name: Copy Firebase dHEDGE to Firebase
+        run: cp firebase.dhedge.json firebase.json
+
+      - name: Firebase deploy
+        uses: FirebaseExtended/action-hosting-deploy@v0
+        with:
+          repoToken: '${{ secrets.GITHUB_TOKEN }}'
+          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_DHEDGE }}'
+          projectId: dhedge-v1-withdraw
+          channelId: live
diff --git a/.github/workflows/dhedge-preview.yml b/.github/workflows/dhedge-preview.yml
new file mode 100644
index 00000000..b1c7a43a
--- /dev/null
+++ b/.github/workflows/dhedge-preview.yml
@@ -0,0 +1,59 @@
+name: dHEDGE preview
+
+on:
+  pull_request:
+    paths:
+      - 'apps/dhedge/**'
+      - 'libs/dhedge/**'
+      - 'libs/shared/**'
+      - 'package.json'
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+env:
+  NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_CLOUD_ACCESS_TOKEN }}
+
+jobs:
+  build_and_publish:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        name: Checkout
+
+      - uses: actions/setup-node@v3
+        name: Setup node
+        with:
+          node-version: 18
+          cache: 'yarn'
+
+      - name: webfactory/ssh-agent
+        uses: webfactory/ssh-agent@v0.8.0
+        with:
+          'ssh-private-key': '${{ secrets.SSH_PRIVATE_KEY }}'
+
+      - name: Install jq
+        run: |
+          sudo apt-get update
+          sudo apt-get install jq
+
+      - run: yarn install --frozen-lockfile
+        name: Install dependencies
+
+      - name: Build
+        env:
+          alchemyMain: ${{ secrets.ALCHEMY_FALLBACK_API_KEY }}
+          alchemyFallback: ${{ secrets.ALCHEMY_FALLBACK_API_KEY }}
+        run: NX_ALCHEMY_MAIN_API_KEY=$alchemyMain NX_ALCHEMY_FALLBACK_API_KEY=$alchemyFallback yarn nx build dhedge
+
+      - name: Copy Firebase dHEDGE to Firebase
+        run: cp firebase.dhedge.json firebase.json
+
+      - name: Firebase deploy
+        uses: FirebaseExtended/action-hosting-deploy@v0
+        with:
+          repoToken: '${{ secrets.GITHUB_TOKEN }}'
+          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_DHEDGE }}'
+          expires: 8d
+          projectId: dhedge-v1-withdraw
diff --git a/firebase.dhedge.json b/firebase.dhedge.json
new file mode 100644
index 00000000..41528dab
--- /dev/null
+++ b/firebase.dhedge.json
@@ -0,0 +1,16 @@
+{
+  "hosting": {
+    "public": "dist/apps/dhedge",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ],
+    "rewrites": [
+      {
+        "source": "**",
+        "destination": "/index.html"
+      }
+    ]
+  }
+}

From db89fca8f6a9ebbf383e8d4fdbc65d0a0263a271 Mon Sep 17 00:00:00 2001
From: Dmitry Lobachevsky <dmitriylobachevskiy@gmail.com>
Date: Thu, 12 Sep 2024 16:29:49 +0200
Subject: [PATCH 05/12] fix(dHEDGE V1 Withdraw): fix light/dark theme switcher

---
 .../src/components/ThemeSwitchButton.tsx      | 27 +++++++----
 apps/dhedge/src/components/Topnav.tsx         |  2 +-
 apps/dhedge/src/main.tsx                      |  2 +
 apps/dhedge/src/providers/SettingsProvider.ts | 45 +++++++++++++++++++
 .../BurnForm/components/InputStep/index.tsx   | 25 +++++++++--
 .../BurnForm/components/WithdrawStep.tsx      |  2 +-
 libs/dhedge/withdraw/src/constants/index.ts   |  2 +-
 7 files changed, 90 insertions(+), 15 deletions(-)
 create mode 100644 apps/dhedge/src/providers/SettingsProvider.ts

diff --git a/apps/dhedge/src/components/ThemeSwitchButton.tsx b/apps/dhedge/src/components/ThemeSwitchButton.tsx
index 734097ba..b2f7df6d 100644
--- a/apps/dhedge/src/components/ThemeSwitchButton.tsx
+++ b/apps/dhedge/src/components/ThemeSwitchButton.tsx
@@ -1,20 +1,31 @@
-import { useToggleThemeMode } from '@frontend/shared-providers';
 import { IconButton, useTheme } from '@mui/material';
+import produce from 'immer';
 import { Moon, Sun } from 'phosphor-react';
 
-import type { ButtonProps } from '@mui/material';
+import { useSettings, useUpdateSettings } from '../providers/SettingsProvider';
+
 import type { FC } from 'react';
 
-export const ThemeSwitchButton: FC<ButtonProps> = (props) => {
+export const ThemeSwitchButton: FC = () => {
   const {
-    palette: { mode, warning },
+    palette: { warning },
   } = useTheme();
-  const isDarkMode = mode === 'dark';
-  const toggleThemeMode = useToggleThemeMode();
+  const { dark } = useSettings();
+
+  const updateSettings = useUpdateSettings();
 
   return (
-    <IconButton color="secondary" onClick={toggleThemeMode}>
-      {isDarkMode ? (
+    <IconButton
+      color="secondary"
+      onClick={() => {
+        updateSettings(
+          produce((state) => {
+            state.dark = !state.dark;
+          }),
+        );
+      }}
+    >
+      {dark ? (
         <Moon size={24} weight="fill" />
       ) : (
         <Sun size={24} color={warning.main} weight="fill" />
diff --git a/apps/dhedge/src/components/Topnav.tsx b/apps/dhedge/src/components/Topnav.tsx
index 14bdaca4..e9dee571 100644
--- a/apps/dhedge/src/components/Topnav.tsx
+++ b/apps/dhedge/src/components/Topnav.tsx
@@ -42,7 +42,7 @@ export const Topnav = () => {
         >
           <OpenAccountModalButton sx={{ maxWidth: 180, maxHeight: 36 }} />
           <OpenNetworkModalButton sx={{ height: 36, width: 36 }} />
-          <ThemeSwitchButton sx={{ height: 36, width: 36 }} />
+          <ThemeSwitchButton />
         </Stack>
       </Stack>
     </AppBar>
diff --git a/apps/dhedge/src/main.tsx b/apps/dhedge/src/main.tsx
index eaddb3b5..02f5ded4 100644
--- a/apps/dhedge/src/main.tsx
+++ b/apps/dhedge/src/main.tsx
@@ -22,6 +22,7 @@ import { setAutoFreeze } from 'immer';
 
 import { App } from './App';
 import { chains, firebaseApp, reactQueryClient, wagmiClient } from './clients';
+import { SettingsProvider } from './providers/SettingsProvider';
 
 // https://github.com/dai-shi/proxy-compare/pull/8
 setAutoFreeze(false);
@@ -48,6 +49,7 @@ root.render(
       ],
       [WalletGoogleAnalyticsProvider],
       [ModalsProvider],
+      [SettingsProvider],
     ],
     <App />,
   ),
diff --git a/apps/dhedge/src/providers/SettingsProvider.ts b/apps/dhedge/src/providers/SettingsProvider.ts
new file mode 100644
index 00000000..2f32b35c
--- /dev/null
+++ b/apps/dhedge/src/providers/SettingsProvider.ts
@@ -0,0 +1,45 @@
+import { useCallback, useLayoutEffect } from 'react';
+
+import { useToggleThemeMode } from '@frontend/shared-providers';
+import { useMediaQuery, useTheme } from '@mui/material';
+import { createContainer } from 'react-tracked';
+import { useLocalStorage } from 'react-use';
+import { useAccount } from 'wagmi';
+
+import type { SetStateAction } from 'react';
+
+export type SettingsState = {
+  dark: boolean;
+};
+
+export const {
+  Provider: SettingsProvider,
+  useUpdate: useUpdateSettings,
+  useTrackedState: useSettings,
+} = createContainer(() => {
+  const { address = 'disconnected' } = useAccount();
+  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
+  const [ls, setLs] = useLocalStorage<SettingsState>('settings', {
+    dark: prefersDarkMode,
+  });
+  const {
+    palette: { mode },
+  } = useTheme();
+  const toggleThemeMode = useToggleThemeMode();
+
+  useLayoutEffect(() => {
+    const set = ls?.dark ? 'dark' : 'light';
+    if (mode !== set) {
+      toggleThemeMode();
+    }
+  }, [address, ls, mode, toggleThemeMode]);
+
+  const setState = useCallback(
+    (input: SetStateAction<SettingsState>) => {
+      setLs(typeof input === 'function' ? input(ls) : input);
+    },
+    [ls, setLs],
+  );
+
+  return [ls, setState];
+});
diff --git a/libs/dhedge/withdraw/src/components/BurnForm/components/InputStep/index.tsx b/libs/dhedge/withdraw/src/components/BurnForm/components/InputStep/index.tsx
index fbe3b7db..70bc23d1 100644
--- a/libs/dhedge/withdraw/src/components/BurnForm/components/InputStep/index.tsx
+++ b/libs/dhedge/withdraw/src/components/BurnForm/components/InputStep/index.tsx
@@ -1,8 +1,10 @@
+import { DHEDGE_DAPP_LINK } from '@frontend/shared-constants';
 import { OpenAccountModalButton } from '@frontend/shared-providers';
 import { MotionStack } from '@frontend/shared-ui';
 import { Button, Stack, Typography } from '@mui/material';
 import { constants } from 'ethers';
-import { useAccount } from 'wagmi';
+import { useAccount, useNetwork, useSwitchNetwork } from 'wagmi';
+import { mainnet } from 'wagmi/chains';
 
 import { useNeedsApproval } from '../../../../hooks/useNeedsApproval';
 import { useSetStep } from '../../hooks';
@@ -15,15 +17,26 @@ import type { MotionStackProps } from '@frontend/shared-ui';
 
 export const InputStep = (props: MotionStackProps) => {
   const { isConnected } = useAccount();
+  const { chain } = useNetwork();
+  const { switchNetwork } = useSwitchNetwork();
   const { l1token, l2token } = useTrackedState();
   const setStep = useSetStep();
   const needsApproval = useNeedsApproval();
+  const isL1Chain = chain.id === mainnet.id;
 
   return (
     <MotionStack alignItems="flex-start" {...props}>
       <Typography variant="h5" mb={1}>
         Redeem your dHEDGE V1 {l1token.contract.name ?? 'vault'} tokens to
-        receive {l2token.contract.name ?? ''} vault tokens
+        receive{' '}
+        <a
+          href={`${DHEDGE_DAPP_LINK}/vault/${l2token.contract.address}`}
+          target="_blank"
+          rel="noreferrer"
+        >
+          {l2token.contract.name ?? ''}
+        </a>{' '}
+        vault tokens
       </Typography>
       <Typography variant="hint">
         After redeeming your vault tokens from Ethereum, please wait while the
@@ -32,10 +45,14 @@ export const InputStep = (props: MotionStackProps) => {
       <Stack width={1} justifyContent="center" alignItems="center" my={8}>
         <Stack width={3 / 4}>
           <TokenInputs mb={4} />
-          {isConnected ? (
+          {!isConnected ? (
+            <OpenAccountModalButton fullWidth size="large" />
+          ) : isL1Chain ? (
             <>{needsApproval ? <ApprovalButton /> : <SubmitButton />}</>
           ) : (
-            <OpenAccountModalButton fullWidth size="large" />
+            <Button onClick={() => switchNetwork(mainnet.id)} size="large">
+              Switch to {mainnet.name}
+            </Button>
           )}
         </Stack>
       </Stack>
diff --git a/libs/dhedge/withdraw/src/components/BurnForm/components/WithdrawStep.tsx b/libs/dhedge/withdraw/src/components/BurnForm/components/WithdrawStep.tsx
index c185bd3e..768f98c9 100644
--- a/libs/dhedge/withdraw/src/components/BurnForm/components/WithdrawStep.tsx
+++ b/libs/dhedge/withdraw/src/components/BurnForm/components/WithdrawStep.tsx
@@ -14,7 +14,7 @@ export const WithdrawStep = (props: MotionStackProps) => {
   return (
     <MotionStack {...props}>
       <Typography variant="h4" mb={4}>
-        Withdraw your {l2token.contract.name} tokens to stables
+        Withdraw your {l2token.contract.symbol} tokens to stables
       </Typography>
       <Typography mb={2}>
         Your {l2token.contract.name} tokens are earning yield and you can hold
diff --git a/libs/dhedge/withdraw/src/constants/index.ts b/libs/dhedge/withdraw/src/constants/index.ts
index f6068791..658b7e18 100644
--- a/libs/dhedge/withdraw/src/constants/index.ts
+++ b/libs/dhedge/withdraw/src/constants/index.ts
@@ -8,4 +8,4 @@ export const deprecatedL1Vaults: Address[] = [
 ];
 
 export const redeemFromL1Length = 164;
-export const redeemGasLimit = 1000000;
+export const redeemGasLimit = 800000;

From b112484d58e5df72a5699f6fb849f2e60f3d0aee Mon Sep 17 00:00:00 2001
From: Dmitry Lobachevsky <dmitriylobachevskiy@gmail.com>
Date: Fri, 13 Sep 2024 13:14:43 +0200
Subject: [PATCH 06/12] feat(dHEDGE V1 Withdraw): add ability to claim redeemed
 tokens manually

---
 apps/dhedge/src/clients/wagmi.ts              |   2 +-
 .../InputStep/components/SubmitButton.tsx     |   8 +-
 .../BurnForm/components/InputStep/index.tsx   |   8 +-
 .../withdraw/src/components/BurnForm/state.ts |  12 +-
 .../UnclaimedTokens/ClaimButton.tsx           | 138 ++++++++++++++++++
 .../src/components/UnclaimedTokens/index.tsx  |  37 +++++
 libs/dhedge/withdraw/src/constants/index.ts   |   6 +-
 libs/dhedge/withdraw/src/constants/tokens.ts  |   8 +-
 .../src/hooks/useL1VaultAddressWithBalance.ts |   6 +-
 .../src/hooks/useUnclaimedL2Tokens.ts         |  48 ++++++
 libs/dhedge/withdraw/src/views/Withdraw.tsx   |   8 +-
 11 files changed, 256 insertions(+), 25 deletions(-)
 create mode 100644 libs/dhedge/withdraw/src/components/UnclaimedTokens/ClaimButton.tsx
 create mode 100644 libs/dhedge/withdraw/src/components/UnclaimedTokens/index.tsx
 create mode 100644 libs/dhedge/withdraw/src/hooks/useUnclaimedL2Tokens.ts

diff --git a/apps/dhedge/src/clients/wagmi.ts b/apps/dhedge/src/clients/wagmi.ts
index 2ab6fe6b..af04bde6 100644
--- a/apps/dhedge/src/clients/wagmi.ts
+++ b/apps/dhedge/src/clients/wagmi.ts
@@ -17,7 +17,7 @@ import { alchemyProvider } from 'wagmi/providers/alchemy';
 import type { Wallet } from '@rainbow-me/rainbowkit';
 import type { Chain, Connector } from 'wagmi';
 
-const POLLING_INTERVAL = 15_000;
+const POLLING_INTERVAL = 20_000;
 
 export const { chains, provider } = configureChains(
   [mainnet, arbitrum],
diff --git a/libs/dhedge/withdraw/src/components/BurnForm/components/InputStep/components/SubmitButton.tsx b/libs/dhedge/withdraw/src/components/BurnForm/components/InputStep/components/SubmitButton.tsx
index 09272859..c4f88250 100644
--- a/libs/dhedge/withdraw/src/components/BurnForm/components/InputStep/components/SubmitButton.tsx
+++ b/libs/dhedge/withdraw/src/components/BurnForm/components/InputStep/components/SubmitButton.tsx
@@ -8,8 +8,8 @@ import {
   usePrepareContractWrite,
   useWaitForTransaction,
 } from 'wagmi';
-import { mainnet } from 'wagmi/chains';
 
+import { l1Chain } from '../../../../../constants';
 import { useNeedsApproval } from '../../../../../hooks/useNeedsApproval';
 import { useRedeemCallConfig } from '../../../../../hooks/useRedeemCallConfig';
 import { useTrackedState } from '../../../state';
@@ -53,7 +53,7 @@ export const SubmitButton = ({ disabled }: SubmitButtonProps) => {
             hash={data?.hash}
             blockExplorer={
               chain?.blockExplorers?.['etherscan'] ??
-              mainnet.blockExplorers.default
+              l1Chain.blockExplorers.default
             }
           />
         ),
@@ -77,7 +77,7 @@ export const SubmitButton = ({ disabled }: SubmitButtonProps) => {
             hash={transactionHash}
             blockExplorer={
               chain?.blockExplorers?.['etherscan'] ??
-              mainnet.blockExplorers.default
+              l1Chain.blockExplorers.default
             }
           />
         ),
@@ -92,7 +92,7 @@ export const SubmitButton = ({ disabled }: SubmitButtonProps) => {
             hash={submitData?.hash}
             blockExplorer={
               chain?.blockExplorers?.['etherscan'] ??
-              mainnet.blockExplorers.default
+              l1Chain.blockExplorers.default
             }
           />
         ),
diff --git a/libs/dhedge/withdraw/src/components/BurnForm/components/InputStep/index.tsx b/libs/dhedge/withdraw/src/components/BurnForm/components/InputStep/index.tsx
index 70bc23d1..8137fc4c 100644
--- a/libs/dhedge/withdraw/src/components/BurnForm/components/InputStep/index.tsx
+++ b/libs/dhedge/withdraw/src/components/BurnForm/components/InputStep/index.tsx
@@ -4,8 +4,8 @@ import { MotionStack } from '@frontend/shared-ui';
 import { Button, Stack, Typography } from '@mui/material';
 import { constants } from 'ethers';
 import { useAccount, useNetwork, useSwitchNetwork } from 'wagmi';
-import { mainnet } from 'wagmi/chains';
 
+import { l1Chain } from '../../../../constants';
 import { useNeedsApproval } from '../../../../hooks/useNeedsApproval';
 import { useSetStep } from '../../hooks';
 import { useTrackedState } from '../../state';
@@ -22,7 +22,7 @@ export const InputStep = (props: MotionStackProps) => {
   const { l1token, l2token } = useTrackedState();
   const setStep = useSetStep();
   const needsApproval = useNeedsApproval();
-  const isL1Chain = chain.id === mainnet.id;
+  const isL1Chain = chain?.id === l1Chain.id;
 
   return (
     <MotionStack alignItems="flex-start" {...props}>
@@ -50,8 +50,8 @@ export const InputStep = (props: MotionStackProps) => {
           ) : isL1Chain ? (
             <>{needsApproval ? <ApprovalButton /> : <SubmitButton />}</>
           ) : (
-            <Button onClick={() => switchNetwork(mainnet.id)} size="large">
-              Switch to {mainnet.name}
+            <Button onClick={() => switchNetwork(l1Chain.id)} size="large">
+              Switch to {l1Chain.name}
             </Button>
           )}
         </Stack>
diff --git a/libs/dhedge/withdraw/src/components/BurnForm/state.ts b/libs/dhedge/withdraw/src/components/BurnForm/state.ts
index 2c5f8610..44eae609 100644
--- a/libs/dhedge/withdraw/src/components/BurnForm/state.ts
+++ b/libs/dhedge/withdraw/src/components/BurnForm/state.ts
@@ -7,10 +7,10 @@ import { createContainer } from 'react-tracked';
 import { useAccount, useContractRead, useContractReads } from 'wagmi';
 
 import {
-  dV1Token,
   l1ComptrollerContract,
   l2ComptrollerContract,
-  zeroMainnetToken,
+  l2Token,
+  zeroL1Token,
 } from '../../constants';
 import { useL1VaultAddressWithBalance } from '../../hooks/useL1VaultAddressWithBalance';
 
@@ -47,13 +47,13 @@ export const { Provider, useTrackedState, useUpdate } = createContainer(() => {
       amount: BigDecimal.ZERO,
       balance: BigDecimal.ZERO,
       price: 0,
-      contract: zeroMainnetToken,
+      contract: zeroL1Token,
     },
     l2token: {
       amount: BigDecimal.ZERO,
       balance: BigDecimal.ZERO,
       price: 0,
-      contract: dV1Token,
+      contract: l2Token,
     },
     refetch: () => null,
     reset: () => null,
@@ -116,6 +116,7 @@ export const { Provider, useTrackedState, useUpdate } = createContainer(() => {
       },
     ],
     watch: true,
+    enabled: isConnected,
   });
 
   useEffect(() => {
@@ -176,10 +177,9 @@ export const { Provider, useTrackedState, useUpdate } = createContainer(() => {
     setState(
       produce((draft) => {
         draft.l1token.amount = BigDecimal.ZERO;
-        draft.l1token.amount = BigDecimal.ZERO;
+        draft.l2token.amount = BigDecimal.ZERO;
         draft.l1token.balance = BigDecimal.ZERO;
         draft.l2token.balance = BigDecimal.ZERO;
-        draft.l2token.balance = BigDecimal.ZERO;
         draft.allowance = BigDecimal.ZERO;
         draft.isError = false;
       }),
diff --git a/libs/dhedge/withdraw/src/components/UnclaimedTokens/ClaimButton.tsx b/libs/dhedge/withdraw/src/components/UnclaimedTokens/ClaimButton.tsx
new file mode 100644
index 00000000..a186eef7
--- /dev/null
+++ b/libs/dhedge/withdraw/src/components/UnclaimedTokens/ClaimButton.tsx
@@ -0,0 +1,138 @@
+import { useMemo } from 'react';
+
+import { usePushNotification } from '@frontend/shared-providers';
+import { ViewEtherscanLink } from '@frontend/shared-ui';
+import { Button, CircularProgress } from '@mui/material';
+import {
+  useAccount,
+  useContractWrite,
+  useNetwork,
+  usePrepareContractWrite,
+  useSwitchNetwork,
+  useWaitForTransaction,
+} from 'wagmi';
+
+import {
+  l1Chain,
+  l2Chain,
+  l2ComptrollerContract,
+  l2Token,
+} from '../../constants';
+
+import type { FC } from 'react';
+import type { Address } from 'wagmi';
+
+interface ClaimButtonProps {
+  tokenBurned: Address;
+}
+
+export const ClaimButton: FC<ClaimButtonProps> = ({ tokenBurned }) => {
+  const { address: walletAddress } = useAccount();
+  const { chain } = useNetwork();
+  const { switchNetwork } = useSwitchNetwork();
+  const pushNotification = usePushNotification();
+  const isL2Chain = chain?.id === l2Chain.id;
+
+  const config = useMemo(
+    () => ({
+      functionName: 'claimAll',
+      args: [tokenBurned, l2Token.address, walletAddress],
+      enabled: !!walletAddress && isL2Chain,
+      address: l2ComptrollerContract.address,
+      abi: l2ComptrollerContract.abi,
+      chainId: l2ComptrollerContract.chainId,
+    }),
+    [isL2Chain, tokenBurned, walletAddress],
+  );
+
+  const { data: claimConfig } = usePrepareContractWrite(config);
+
+  const {
+    data: claimData,
+    write: claim,
+    isLoading: isWriteLoading,
+    isSuccess: isWriteSuccess,
+  } = useContractWrite({
+    ...claimConfig,
+    request: {
+      ...claimConfig?.request,
+      gasLimit: claimConfig?.request?.gasLimit?.mul(130).div(100),
+    },
+    onSuccess: (data) => {
+      pushNotification({
+        title: `Claim ${l2Token.symbol}`,
+        content: (
+          <ViewEtherscanLink
+            hash={data?.hash}
+            blockExplorer={
+              chain?.blockExplorers?.['etherscan'] ??
+              l1Chain.blockExplorers.default
+            }
+          />
+        ),
+        severity: 'info',
+      });
+    },
+    onError: () => {
+      pushNotification({
+        title: 'Transaction Cancelled',
+        severity: 'info',
+      });
+    },
+  });
+  const { isSuccess: isClaimSuccess } = useWaitForTransaction({
+    hash: claimData?.hash,
+    onSuccess: ({ transactionHash }) => {
+      pushNotification({
+        title: 'Transaction Confirmed',
+        content: (
+          <ViewEtherscanLink
+            hash={transactionHash}
+            blockExplorer={
+              chain?.blockExplorers?.['etherscan'] ??
+              l1Chain.blockExplorers.default
+            }
+          />
+        ),
+        severity: 'success',
+      });
+    },
+    onError: () => {
+      pushNotification({
+        title: 'Transaction Error',
+        content: (
+          <ViewEtherscanLink
+            hash={claimData?.hash}
+            blockExplorer={
+              chain?.blockExplorers?.['etherscan'] ??
+              l1Chain.blockExplorers.default
+            }
+          />
+        ),
+        severity: 'error',
+      });
+    },
+  });
+
+  if (!isL2Chain) {
+    return (
+      <Button onClick={() => switchNetwork(l2ComptrollerContract.chainId)}>
+        Switch to {l2Chain.name}
+      </Button>
+    );
+  }
+
+  if (isWriteLoading) {
+    return <Button disabled>Sign Transaction</Button>;
+  }
+
+  if (isWriteSuccess && !isClaimSuccess) {
+    return (
+      <Button disabled>
+        <CircularProgress size={20} />
+      </Button>
+    );
+  }
+
+  return <Button onClick={claim}>Claim</Button>;
+};
diff --git a/libs/dhedge/withdraw/src/components/UnclaimedTokens/index.tsx b/libs/dhedge/withdraw/src/components/UnclaimedTokens/index.tsx
new file mode 100644
index 00000000..6da1d132
--- /dev/null
+++ b/libs/dhedge/withdraw/src/components/UnclaimedTokens/index.tsx
@@ -0,0 +1,37 @@
+import { Stack, Typography } from '@mui/material';
+
+import { l2Token } from '../../constants';
+import { useUnclaimedL2Tokens } from '../../hooks/useUnclaimedL2Tokens';
+import { ClaimButton } from './ClaimButton';
+
+import type { FC } from 'react';
+
+export const UnclaimedTokens: FC = () => {
+  const unclaimedL2Tokens = useUnclaimedL2Tokens();
+
+  if (!unclaimedL2Tokens.length) return null;
+
+  return (
+    <Stack alignItems="center">
+      <Stack
+        sx={(theme) => ({
+          padding: 4,
+          borderRadius: 2,
+          border: `1px solid ${theme.palette.warning.main}`,
+        })}
+      >
+        <Typography variant="h5" mb={2}>
+          You have unclaimed {l2Token.symbol} tokens
+        </Typography>
+        {unclaimedL2Tokens.map(({ address, amount }) => (
+          <Stack key={address} direction="row" alignItems="center" spacing={2}>
+            <Typography variant="value2">
+              {amount.simpleRounded} {l2Token.symbol}
+            </Typography>
+            <ClaimButton tokenBurned={address}></ClaimButton>
+          </Stack>
+        ))}
+      </Stack>
+    </Stack>
+  );
+};
diff --git a/libs/dhedge/withdraw/src/constants/index.ts b/libs/dhedge/withdraw/src/constants/index.ts
index 658b7e18..8533af6f 100644
--- a/libs/dhedge/withdraw/src/constants/index.ts
+++ b/libs/dhedge/withdraw/src/constants/index.ts
@@ -1,3 +1,5 @@
+import { arbitrum, mainnet } from 'wagmi/chains';
+
 import type { Address } from 'wagmi';
 
 export * from './tokens';
@@ -8,4 +10,6 @@ export const deprecatedL1Vaults: Address[] = [
 ];
 
 export const redeemFromL1Length = 164;
-export const redeemGasLimit = 800000;
+export const redeemGasLimit = 1000000;
+export const l1Chain = mainnet;
+export const l2Chain = arbitrum;
diff --git a/libs/dhedge/withdraw/src/constants/tokens.ts b/libs/dhedge/withdraw/src/constants/tokens.ts
index 2f077dd2..2c6ea6e4 100644
--- a/libs/dhedge/withdraw/src/constants/tokens.ts
+++ b/libs/dhedge/withdraw/src/constants/tokens.ts
@@ -1,4 +1,4 @@
-import { AddressZero } from '@dhedge/core-ui-kit/const';
+import { ZERO_ADDRESS } from '@frontend/shared-constants';
 import { ERC20ABI } from '@mstable/metavaults-web';
 import { arbitrum, mainnet } from 'wagmi/chains';
 
@@ -6,15 +6,15 @@ import { PoolLogicAbi } from './abis/PoolLogicAbi';
 
 import type { Token } from '@frontend/shared-constants';
 
-export const zeroMainnetToken: Token = {
-  address: AddressZero,
+export const zeroL1Token: Token = {
+  address: ZERO_ADDRESS,
   symbol: 'DHPT',
   decimals: 18,
   chainId: mainnet.id,
   abi: ERC20ABI,
 };
 
-export const dV1Token: Token = {
+export const l2Token: Token = {
   address: '0xe48f22822e0fb60bca2bb126ba71efe3fbaa4063',
   symbol: 'dV1',
   decimals: 18,
diff --git a/libs/dhedge/withdraw/src/hooks/useL1VaultAddressWithBalance.ts b/libs/dhedge/withdraw/src/hooks/useL1VaultAddressWithBalance.ts
index cfea3ce2..aa00ed50 100644
--- a/libs/dhedge/withdraw/src/hooks/useL1VaultAddressWithBalance.ts
+++ b/libs/dhedge/withdraw/src/hooks/useL1VaultAddressWithBalance.ts
@@ -1,4 +1,4 @@
-import { AddressZero } from '@dhedge/core-ui-kit/const';
+import { ZERO_ADDRESS } from '@frontend/shared-constants';
 import { useAccount, useContractReads } from 'wagmi';
 import { mainnet } from 'wagmi/chains';
 
@@ -9,6 +9,7 @@ import type { Address } from 'wagmi';
 
 export const useL1VaultAddressWithBalance = (): Address => {
   const { address: walletAddress } = useAccount();
+
   const { data } = useContractReads({
     contracts: deprecatedL1Vaults.map((address) => ({
       address,
@@ -17,11 +18,12 @@ export const useL1VaultAddressWithBalance = (): Address => {
       functionName: 'balanceOf',
       args: [walletAddress],
     })),
+    enabled: !!walletAddress,
   });
 
   const [addressWithBalance] = deprecatedL1Vaults.filter(
     (_, index) => !!data?.[index] && data[index].toString() !== '0',
   );
 
-  return addressWithBalance ?? AddressZero;
+  return addressWithBalance ?? ZERO_ADDRESS;
 };
diff --git a/libs/dhedge/withdraw/src/hooks/useUnclaimedL2Tokens.ts b/libs/dhedge/withdraw/src/hooks/useUnclaimedL2Tokens.ts
new file mode 100644
index 00000000..ae0f2ddd
--- /dev/null
+++ b/libs/dhedge/withdraw/src/hooks/useUnclaimedL2Tokens.ts
@@ -0,0 +1,48 @@
+import { useMemo } from 'react';
+
+import { BigDecimal } from '@frontend/shared-utils';
+import { useAccount, useContractReads } from 'wagmi';
+
+import {
+  deprecatedL1Vaults,
+  l2ComptrollerContract,
+  l2Token,
+} from '../constants';
+
+import type { Address } from 'wagmi';
+
+interface UnclaimedL2Tokens {
+  address: Address;
+  amount: BigDecimal;
+}
+
+export const useUnclaimedL2Tokens = (): UnclaimedL2Tokens[] => {
+  const { address: walletAddress } = useAccount();
+
+  const { data } = useContractReads({
+    contracts: deprecatedL1Vaults.map((address) => ({
+      address: l2ComptrollerContract.address,
+      chainId: l2ComptrollerContract.chainId,
+      abi: l2ComptrollerContract.abi,
+      functionName: 'getClaimableAmount',
+      args: [address, l2Token.address, walletAddress, walletAddress],
+    })),
+    enabled: !!walletAddress,
+    watch: true,
+  });
+
+  return useMemo(() => {
+    if (!data) return [];
+
+    return data
+      .map((value, index) => {
+        if (!value || value.toString() === '0') return null;
+
+        return {
+          address: deprecatedL1Vaults[index],
+          amount: new BigDecimal(value.toString()),
+        };
+      })
+      .filter((value) => !!value);
+  }, [data]);
+};
diff --git a/libs/dhedge/withdraw/src/views/Withdraw.tsx b/libs/dhedge/withdraw/src/views/Withdraw.tsx
index d283c0d9..774da55e 100644
--- a/libs/dhedge/withdraw/src/views/Withdraw.tsx
+++ b/libs/dhedge/withdraw/src/views/Withdraw.tsx
@@ -1,13 +1,15 @@
-import { Box } from '@mui/material';
+import { Stack } from '@mui/material';
 
 import { BurnForm } from '../components/BurnForm';
+import { UnclaimedTokens } from '../components/UnclaimedTokens';
 
 import type { FC } from 'react';
 
 export const Withdraw: FC = () => {
   return (
-    <Box pt={4}>
+    <Stack gap={4} pt={4}>
+      <UnclaimedTokens />
       <BurnForm />
-    </Box>
+    </Stack>
   );
 };

From fbaeffbb8b573369ebb82675f41e1d20866ea87e Mon Sep 17 00:00:00 2001
From: Dmitry Lobachevsky <dmitriylobachevskiy@gmail.com>
Date: Fri, 13 Sep 2024 14:22:11 +0200
Subject: [PATCH 07/12] feat(dHEDGE V1 Withdraw): set balance value as redeem
 input value and disable input

---
 .../InputStep/components/TokenInputs.tsx      |  5 +++++
 .../withdraw/src/components/BurnForm/state.ts | 19 ++++++++-----------
 .../withdraw/src/hooks/useRedeemCallConfig.ts |  4 +---
 3 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/libs/dhedge/withdraw/src/components/BurnForm/components/InputStep/components/TokenInputs.tsx b/libs/dhedge/withdraw/src/components/BurnForm/components/InputStep/components/TokenInputs.tsx
index a3e96d17..53639db5 100644
--- a/libs/dhedge/withdraw/src/components/BurnForm/components/InputStep/components/TokenInputs.tsx
+++ b/libs/dhedge/withdraw/src/components/BurnForm/components/InputStep/components/TokenInputs.tsx
@@ -44,6 +44,11 @@ export const TokenInputs = (props: BoxProps) => {
             width: 1,
             padding: (theme) => theme.spacing(0.5, 2, 0.5, 2),
           },
+          input: {
+            InputProps: {
+              disabled: true,
+            },
+          },
         }}
       />
       <Stack
diff --git a/libs/dhedge/withdraw/src/components/BurnForm/state.ts b/libs/dhedge/withdraw/src/components/BurnForm/state.ts
index 44eae609..240454e8 100644
--- a/libs/dhedge/withdraw/src/components/BurnForm/state.ts
+++ b/libs/dhedge/withdraw/src/components/BurnForm/state.ts
@@ -1,6 +1,5 @@
 import { useCallback, useEffect, useState } from 'react';
 
-import { useDebounce } from '@frontend/shared-hooks';
 import { BigDecimal } from '@frontend/shared-utils';
 import produce from 'immer';
 import { createContainer } from 'react-tracked';
@@ -121,6 +120,10 @@ export const { Provider, useTrackedState, useUpdate } = createContainer(() => {
 
   useEffect(() => {
     if (data) {
+      const l1TokenBalance = new BigDecimal(
+        data[2] as unknown as BigNumberish,
+        state.l1token.contract.decimals,
+      );
       setState(
         produce((draft) => {
           draft.l1token.contract.name = data[0] as unknown as string;
@@ -128,10 +131,8 @@ export const { Provider, useTrackedState, useUpdate } = createContainer(() => {
             data[1] as unknown as BigNumberish,
             state.l1token.contract.decimals,
           );
-          draft.l1token.balance = new BigDecimal(
-            data[2] as unknown as BigNumberish,
-            state.l1token.contract.decimals,
-          );
+          draft.l1token.balance = l1TokenBalance;
+          draft.l1token.amount = l1TokenBalance;
           draft.l2token.balance = new BigDecimal(
             data[3] as unknown as BigNumberish,
             state.l1token.contract.decimals,
@@ -149,10 +150,6 @@ export const { Provider, useTrackedState, useUpdate } = createContainer(() => {
     }
   }, [data, refetch, state.l1token.contract.decimals]);
 
-  const debouncedL1TokenAmount = useDebounce(
-    state.l1token.amount.exact.toString(),
-    500,
-  );
   useContractRead({
     address: l2ComptrollerContract.address,
     abi: l2ComptrollerContract.abi,
@@ -161,9 +158,9 @@ export const { Provider, useTrackedState, useUpdate } = createContainer(() => {
     args: [
       state.l1token.contract.address,
       state.l2token.contract.address,
-      debouncedL1TokenAmount,
+      state.l1token.amount.exact,
     ],
-    enabled: debouncedL1TokenAmount !== '0',
+    enabled: !state.l1token.amount.exact.isZero(),
     onSuccess: (data) => {
       setState(
         produce((draft) => {
diff --git a/libs/dhedge/withdraw/src/hooks/useRedeemCallConfig.ts b/libs/dhedge/withdraw/src/hooks/useRedeemCallConfig.ts
index ba7a40b0..62307b9d 100644
--- a/libs/dhedge/withdraw/src/hooks/useRedeemCallConfig.ts
+++ b/libs/dhedge/withdraw/src/hooks/useRedeemCallConfig.ts
@@ -1,6 +1,5 @@
 import { useMemo } from 'react';
 
-import { constants } from 'ethers';
 import { useAccount } from 'wagmi';
 
 import { useTrackedState } from '../components/BurnForm/state';
@@ -41,8 +40,7 @@ export const useRedeemCallConfig = () => {
         encodedArbAdditionalData,
         { value: ethValue },
       ],
-      enabled:
-        !isError && l1token.amount.exact.gt(constants.Zero) && !needsApproval,
+      enabled: !isError && !l1token.amount.exact.isZero() && !needsApproval,
       address: l1ComptrollerContract.address,
       abi: l1ComptrollerContract.abi,
       chainId: l1ComptrollerContract.chainId,

From d2630b3adc4594a690eabdb15bbc669445faa6a9 Mon Sep 17 00:00:00 2001
From: Dmitry Lobachevsky <dmitriylobachevskiy@gmail.com>
Date: Sat, 14 Sep 2024 00:17:32 +0200
Subject: [PATCH 08/12] feat(dHEDGE V1 Withdraw): add Rabby Wallet support

---
 apps/dhedge/src/clients/wagmi.ts                      | 2 ++
 libs/dhedge/withdraw/src/components/BurnForm/state.ts | 2 --
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/dhedge/src/clients/wagmi.ts b/apps/dhedge/src/clients/wagmi.ts
index af04bde6..214c3658 100644
--- a/apps/dhedge/src/clients/wagmi.ts
+++ b/apps/dhedge/src/clients/wagmi.ts
@@ -7,6 +7,7 @@ import {
   coinbaseWallet,
   injectedWallet,
   metaMaskWallet,
+  rabbyWallet,
   rainbowWallet,
   walletConnectWallet,
 } from '@rainbow-me/rainbowkit/wallets';
@@ -49,6 +50,7 @@ const connectors = connectorsForWallets([
       metaMaskWallet({ chains, shimDisconnect: true, projectId }),
       walletConnectWallet({ chains, projectId }),
       coinbaseWallet({ appName: 'mStable', chains }),
+      rabbyWallet({ chains }),
     ],
   },
   {
diff --git a/libs/dhedge/withdraw/src/components/BurnForm/state.ts b/libs/dhedge/withdraw/src/components/BurnForm/state.ts
index 240454e8..2f30ffb9 100644
--- a/libs/dhedge/withdraw/src/components/BurnForm/state.ts
+++ b/libs/dhedge/withdraw/src/components/BurnForm/state.ts
@@ -68,8 +68,6 @@ export const { Provider, useTrackedState, useUpdate } = createContainer(() => {
     );
   }, [v1VaultAddress]);
 
-  console.log(state);
-
   const { data, isLoading, refetch } = useContractReads({
     contracts: [
       {

From 587435c5187cb72fd11659f174b46366f04fe6b9 Mon Sep 17 00:00:00 2001
From: Dmitry Lobachevsky <dmitriylobachevskiy@gmail.com>
Date: Mon, 16 Sep 2024 09:38:33 +0200
Subject: [PATCH 09/12] feat(dHEDGE V1 Withdraw): add low ETH balance warning

---
 .../InputStep/components/SubmitButton.tsx     | 27 +++++++++++++++----
 1 file changed, 22 insertions(+), 5 deletions(-)

diff --git a/libs/dhedge/withdraw/src/components/BurnForm/components/InputStep/components/SubmitButton.tsx b/libs/dhedge/withdraw/src/components/BurnForm/components/InputStep/components/SubmitButton.tsx
index c4f88250..6e1042bc 100644
--- a/libs/dhedge/withdraw/src/components/BurnForm/components/InputStep/components/SubmitButton.tsx
+++ b/libs/dhedge/withdraw/src/components/BurnForm/components/InputStep/components/SubmitButton.tsx
@@ -1,6 +1,6 @@
 import { usePushNotification } from '@frontend/shared-providers';
 import { ViewEtherscanLink } from '@frontend/shared-ui';
-import { Button, CircularProgress } from '@mui/material';
+import { Box, Button, CircularProgress, Typography } from '@mui/material';
 import { constants } from 'ethers';
 import {
   useContractWrite,
@@ -32,7 +32,8 @@ export const SubmitButton = ({ disabled }: SubmitButtonProps) => {
   const needsApproval = useNeedsApproval();
 
   const config = useRedeemCallConfig();
-  const { data: submitConfig } = usePrepareContractWrite(config);
+  const { data: submitConfig, error: estimateError } =
+    usePrepareContractWrite(config);
 
   const {
     data: submitData,
@@ -139,8 +140,24 @@ export const SubmitButton = ({ disabled }: SubmitButtonProps) => {
   }
 
   return (
-    <Button {...buttonProps} onClick={submit} disabled={disabled}>
-      Redeem
-    </Button>
+    <>
+      <Button {...buttonProps} onClick={submit} disabled={disabled}>
+        Redeem
+      </Button>
+      {!!estimateError?.message?.includes(
+        'transfer amount exceeds balance',
+      ) && (
+        <Box>
+          <Typography
+            variant="hint"
+            mt={1}
+            color="warning.dark"
+            sx={{ position: 'absolute' }}
+          >
+            Not enough ETH balance
+          </Typography>
+        </Box>
+      )}
+    </>
   );
 };

From 32a6b6fd553363d41c05e8287dd84bce1e279573 Mon Sep 17 00:00:00 2001
From: Dmitry Lobachevsky <dmitriylobachevskiy@gmail.com>
Date: Mon, 23 Sep 2024 10:46:49 +0200
Subject: [PATCH 10/12] fix(dHEDGE V1 Deprecation): build issue

---
 libs/dhedge/withdraw/src/constants/tokens.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/libs/dhedge/withdraw/src/constants/tokens.ts b/libs/dhedge/withdraw/src/constants/tokens.ts
index 2c6ea6e4..f7ef971b 100644
--- a/libs/dhedge/withdraw/src/constants/tokens.ts
+++ b/libs/dhedge/withdraw/src/constants/tokens.ts
@@ -1,5 +1,5 @@
 import { ZERO_ADDRESS } from '@frontend/shared-constants';
-import { ERC20ABI } from '@mstable/metavaults-web';
+import { erc20ABI } from 'wagmi';
 import { arbitrum, mainnet } from 'wagmi/chains';
 
 import { PoolLogicAbi } from './abis/PoolLogicAbi';
@@ -11,7 +11,7 @@ export const zeroL1Token: Token = {
   symbol: 'DHPT',
   decimals: 18,
   chainId: mainnet.id,
-  abi: ERC20ABI,
+  abi: erc20ABI,
 };
 
 export const l2Token: Token = {

From a2d91f781203304a059226776bb07a0062f8cb68 Mon Sep 17 00:00:00 2001
From: Dmitry Lobachevsky <dmitriylobachevskiy@gmail.com>
Date: Mon, 23 Sep 2024 12:07:04 +0200
Subject: [PATCH 11/12] feat(dHEDGE V1 Deprecation): update app title

---
 apps/dhedge/index.html                                        | 2 +-
 apps/dhedge/vite.config.ts                                    | 4 ++--
 libs/dhedge/theme/src/rainbowkit/index.ts                     | 2 +-
 .../BurnForm/components/InputStep/components/TokenInputs.tsx  | 4 ++--
 .../src/components/BurnForm/components/InputStep/index.tsx    | 2 +-
 .../src/components/BurnForm/components/StepIndicator.tsx      | 2 +-
 libs/dhedge/withdraw/src/components/BurnForm/index.tsx        | 2 +-
 7 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/apps/dhedge/index.html b/apps/dhedge/index.html
index c762c8ac..3a5d7f8a 100644
--- a/apps/dhedge/index.html
+++ b/apps/dhedge/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title>Dhedge</title>
+    <title>dHEDGE V1 Deprecation App</title>
     <base href="/" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1" />
diff --git a/apps/dhedge/vite.config.ts b/apps/dhedge/vite.config.ts
index edd8d1aa..b242e891 100644
--- a/apps/dhedge/vite.config.ts
+++ b/apps/dhedge/vite.config.ts
@@ -10,7 +10,7 @@ export default defineConfig({
   cacheDir: '../../node_modules/.vite/dhedge',
 
   server: {
-    port: 4202,
+    port: 4200,
     host: 'localhost',
     fs: {
       strict: false,
@@ -18,7 +18,7 @@ export default defineConfig({
   },
 
   preview: {
-    port: 4302,
+    port: 4300,
     host: 'localhost',
   },
 
diff --git a/libs/dhedge/theme/src/rainbowkit/index.ts b/libs/dhedge/theme/src/rainbowkit/index.ts
index 03e520b7..e77eca3f 100644
--- a/libs/dhedge/theme/src/rainbowkit/index.ts
+++ b/libs/dhedge/theme/src/rainbowkit/index.ts
@@ -10,7 +10,7 @@ const light = lightTheme();
 const dark = darkTheme();
 
 const common: RecursivePartial<Theme> = {
-  fonts: { body: 'Plus Jakarta Sans' },
+  fonts: { body: 'Inter' },
   colors: {
     accentColor: colors.blue02,
   },
diff --git a/libs/dhedge/withdraw/src/components/BurnForm/components/InputStep/components/TokenInputs.tsx b/libs/dhedge/withdraw/src/components/BurnForm/components/InputStep/components/TokenInputs.tsx
index 53639db5..da1930d8 100644
--- a/libs/dhedge/withdraw/src/components/BurnForm/components/InputStep/components/TokenInputs.tsx
+++ b/libs/dhedge/withdraw/src/components/BurnForm/components/InputStep/components/TokenInputs.tsx
@@ -93,7 +93,7 @@ export const TokenInputs = (props: BoxProps) => {
       <Stack
         justifyContent="center"
         alignItems="center"
-        p={1.5}
+        p={{ xs: 0.5, lg: 1.5 }}
         border={(theme) => `1px solid ${theme.palette.divider}`}
         borderRadius={1}
         bgcolor="divider"
@@ -105,7 +105,7 @@ export const TokenInputs = (props: BoxProps) => {
           svg: { color: 'text.primary' },
         }}
       >
-        <ArrowFatDown size={20} />
+        <ArrowFatDown size={18} />
       </Stack>
       <TokenInput
         amount={l2token.amount}
diff --git a/libs/dhedge/withdraw/src/components/BurnForm/components/InputStep/index.tsx b/libs/dhedge/withdraw/src/components/BurnForm/components/InputStep/index.tsx
index 8137fc4c..4442b29f 100644
--- a/libs/dhedge/withdraw/src/components/BurnForm/components/InputStep/index.tsx
+++ b/libs/dhedge/withdraw/src/components/BurnForm/components/InputStep/index.tsx
@@ -43,7 +43,7 @@ export const InputStep = (props: MotionStackProps) => {
         bridge issues your {l2token.contract.symbol} tokens.
       </Typography>
       <Stack width={1} justifyContent="center" alignItems="center" my={8}>
-        <Stack width={3 / 4}>
+        <Stack width={{ xs: 'auto', lg: 3 / 4 }}>
           <TokenInputs mb={4} />
           {!isConnected ? (
             <OpenAccountModalButton fullWidth size="large" />
diff --git a/libs/dhedge/withdraw/src/components/BurnForm/components/StepIndicator.tsx b/libs/dhedge/withdraw/src/components/BurnForm/components/StepIndicator.tsx
index 59f0ae20..88e19ef0 100644
--- a/libs/dhedge/withdraw/src/components/BurnForm/components/StepIndicator.tsx
+++ b/libs/dhedge/withdraw/src/components/BurnForm/components/StepIndicator.tsx
@@ -48,7 +48,7 @@ export const StepIndicator = (props: StackProps) => {
           position: 'absolute',
           content: '""',
           top: 20,
-          left: isMobile ? 0 : 70,
+          left: isMobile ? 15 : 70,
           height: 2,
           width: '70%',
           background:
diff --git a/libs/dhedge/withdraw/src/components/BurnForm/index.tsx b/libs/dhedge/withdraw/src/components/BurnForm/index.tsx
index 92fbcf75..692a7045 100644
--- a/libs/dhedge/withdraw/src/components/BurnForm/index.tsx
+++ b/libs/dhedge/withdraw/src/components/BurnForm/index.tsx
@@ -9,7 +9,7 @@ import { Provider, useTrackedState } from './state';
 import type { StackProps, SxProps, Theme } from '@mui/material';
 
 const cardSx: SxProps<Theme> = (theme) => ({
-  padding: 4,
+  padding: { xs: 2, lg: 4 },
   borderRadius: 2,
   border: `1px solid ${theme.palette.divider}`,
 });

From 31d63726b09591cd2750b7cc6f7e9a7f69582b6c Mon Sep 17 00:00:00 2001
From: Dmitry Lobachevsky <dmitriylobachevskiy@gmail.com>
Date: Mon, 23 Sep 2024 20:39:08 +0200
Subject: [PATCH 12/12] feat(dHEDGE V1 Deprecation): add v1 deprecated vaults
 addresses

---
 .../BurnForm/components/InputStep/index.tsx   | 11 +++++--
 libs/dhedge/withdraw/src/constants/index.ts   | 33 ++++++++++++++++++-
 2 files changed, 41 insertions(+), 3 deletions(-)

diff --git a/libs/dhedge/withdraw/src/components/BurnForm/components/InputStep/index.tsx b/libs/dhedge/withdraw/src/components/BurnForm/components/InputStep/index.tsx
index 4442b29f..cfccb8f0 100644
--- a/libs/dhedge/withdraw/src/components/BurnForm/components/InputStep/index.tsx
+++ b/libs/dhedge/withdraw/src/components/BurnForm/components/InputStep/index.tsx
@@ -27,8 +27,15 @@ export const InputStep = (props: MotionStackProps) => {
   return (
     <MotionStack alignItems="flex-start" {...props}>
       <Typography variant="h5" mb={1}>
-        Redeem your dHEDGE V1 {l1token.contract.name ?? 'vault'} tokens to
-        receive{' '}
+        Redeem your dHEDGE V1{' '}
+        <a
+          href={`${DHEDGE_DAPP_LINK}/vault/${l1token.contract.address}`}
+          target="_blank"
+          rel="noreferrer"
+        >
+          {l1token.contract.name ?? 'vault'}
+        </a>{' '}
+        tokens to receive{' '}
         <a
           href={`${DHEDGE_DAPP_LINK}/vault/${l2token.contract.address}`}
           target="_blank"
diff --git a/libs/dhedge/withdraw/src/constants/index.ts b/libs/dhedge/withdraw/src/constants/index.ts
index 8533af6f..ef0c0992 100644
--- a/libs/dhedge/withdraw/src/constants/index.ts
+++ b/libs/dhedge/withdraw/src/constants/index.ts
@@ -6,7 +6,38 @@ export * from './tokens';
 export * from './contracts';
 
 export const deprecatedL1Vaults: Address[] = [
-  '0x992ed71cad18d16608a14f52a1fb5b6a44bf821c', // test
+  '0x992ed71cad18d16608a14f52a1fb5b6a44bf821c',
+  '0x907feb27f8cc5b003db7e62dfc2f9b01ce3fadd6',
+  '0x391603b1c3b03a0133ad82e91692790e58f73570',
+  '0x3a4851597f36f459b58e65c55c8f3a8710313fc7',
+  '0x63ae7457b8be660daaf308a07db6bccb733b92df',
+  '0x739f41c699276c9b6182aecb9d5f4eca226da8dd',
+  '0x0f4c00139602ab502bc7c1c0e71d6cb72a9fb0e7',
+  '0xd076b9865feb49a43aa38c06b0432df6b6cbca9e',
+  '0x0f0f7f24ce3a52b9508b9fbce1a6bdb2ebb0d7ed',
+  '0x0ac1dba8252240589266194f9c27a42229e84b19',
+  '0xef38d0a69f3d9f08ace8f7282ef613a63bd335b0',
+  '0x2c095f9a475b47d4a60a4102b224441796dbf1c1',
+  '0x1e73b23f0af6b13d5a925ce0e8583e20bebc7d8c',
+  '0x55010610d9b4a8559bd7b2c5ae34c329e4b45872',
+  '0xc44b4a52f46d76fbe7dac089bd569ae38727d3da',
+  '0xdc1b88aae802c83c3fa234c27063d864ac9b51d2',
+  '0xc19fb5d68a9383a737d5c31daa13ea9bf5a0c2e1',
+  '0xb7ac66a870189f259e5450c63f5e688398e0988e',
+  '0xa48dbeabe541ec17d3f6f30ff0de96d5113dce03',
+  '0x555d9af5c0c3c8ed5c44e343d2f8292679ab9645',
+  '0x00d993f573fd8a60368376b637e4c5698e4907db',
+  '0x46c1677ea454827abdce338310451ce2cfcc6676',
+  '0x159b4e1f90afca5351661202ebbd82540c0da3cc',
+  '0x9c716f8b535cbb92eaf12ddccf7e72cbb02d2639',
+  '0x72cf5406fad1dbc807559c62e277644543d70e66',
+  '0xaf44f17a175ab0874232a54375338947689bad2e',
+  '0xb16cc63c3c908a73f937e935032d556a40a08134',
+  '0x9b5518a3b55a4e922064873aa2e9ad1270c8ea77',
+  '0x906549750d6c362f220d6fed8de16f0a71448132',
+  '0x80ac7407a6fd9a4f693499797f99f553a72adb2e',
+  '0x1fdc5fd5b27b3091eeb9fb7d54b970f3229f440b',
+  '0x340e05bfbd985bb6d6ee490bf41fb7bfc54a2468',
 ];
 
 export const redeemFromL1Length = 164;