From a45de966fb89d1e0992ef03095e8f1ffae53ea41 Mon Sep 17 00:00:00 2001
From: Arnaud <arnaud@status.im>
Date: Mon, 11 Nov 2024 09:41:58 +0700
Subject: [PATCH] Add wallet page

---
 src/assets/icons/bridge.svg                   |  11 ++
 src/assets/icons/buy-sell.svg                 |  11 ++
 src/assets/icons/codextoken.svg               |  38 +++++
 src/assets/icons/contacts.svg                 |  10 ++
 src/assets/icons/ethereum.svg                 |  10 ++
 src/assets/icons/import.svg                   |  11 ++
 src/assets/icons/receive.svg                  |  11 ++
 src/assets/icons/send.svg                     |  11 ++
 src/assets/icons/swap.svg                     |  11 ++
 src/assets/icons/tokens.svg                   |  10 ++
 .../ConnectedAccount/WalletCard.css           |   5 +
 src/components/Menu/Menu.tsx                  |   6 +-
 src/components/WalletLogin/WalletLogin.css    |   7 +-
 src/components/WalletLogin/WalletLogin.tsx    |   5 +-
 src/routes/dashboard/wallet.css               | 131 ++++++++++++++++++
 src/routes/dashboard/wallet.tsx               | 117 +++++++++++++++-
 16 files changed, 390 insertions(+), 15 deletions(-)
 create mode 100644 src/assets/icons/bridge.svg
 create mode 100644 src/assets/icons/buy-sell.svg
 create mode 100644 src/assets/icons/codextoken.svg
 create mode 100644 src/assets/icons/contacts.svg
 create mode 100644 src/assets/icons/ethereum.svg
 create mode 100644 src/assets/icons/import.svg
 create mode 100644 src/assets/icons/receive.svg
 create mode 100644 src/assets/icons/send.svg
 create mode 100644 src/assets/icons/swap.svg
 create mode 100644 src/assets/icons/tokens.svg
 create mode 100644 src/routes/dashboard/wallet.css

diff --git a/src/assets/icons/bridge.svg b/src/assets/icons/bridge.svg
new file mode 100644
index 0000000..32808a5
--- /dev/null
+++ b/src/assets/icons/bridge.svg
@@ -0,0 +1,11 @@
+<svg
+  width="33"
+  height="32"
+  viewBox="0 0 33 32"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M22.5 26.8002V22.0002H10.5V26.8002H8.1V20.8002C8.1 20.4819 8.22643 20.1767 8.45147 19.9517C8.67652 19.7266 8.98174 19.6002 9.3 19.6002H23.7C24.0183 19.6002 24.3235 19.7266 24.5485 19.9517C24.7736 20.1767 24.9 20.4819 24.9 20.8002V26.8002H22.5ZM10.5 5.2002V10.0002H22.5V5.2002H24.9V11.2002C24.9 11.5185 24.7736 11.8237 24.5485 12.0487C24.3235 12.2738 24.0183 12.4002 23.7 12.4002H9.3C8.98174 12.4002 8.67652 12.2738 8.45147 12.0487C8.22643 11.8237 8.1 11.5185 8.1 11.2002V5.2002H10.5ZM4.5 12.4002L9.3 16.0002L4.5 19.6002V12.4002ZM28.5 12.4002V19.6002L23.7 16.0002L28.5 12.4002Z"
+    fill="#969696"
+    fill-opacity="0.4" />
+</svg>
diff --git a/src/assets/icons/buy-sell.svg b/src/assets/icons/buy-sell.svg
new file mode 100644
index 0000000..6c2efb2
--- /dev/null
+++ b/src/assets/icons/buy-sell.svg
@@ -0,0 +1,11 @@
+<svg
+  width="33"
+  height="32"
+  viewBox="0 0 33 32"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M5.7 5.2002H27.3C27.6183 5.2002 27.9235 5.32662 28.1485 5.55167C28.3736 5.77671 28.5 6.08194 28.5 6.4002V25.6002C28.5 25.9185 28.3736 26.2237 28.1485 26.4487C27.9235 26.6738 27.6183 26.8002 27.3 26.8002H5.7C5.38174 26.8002 5.07652 26.6738 4.85147 26.4487C4.62643 26.2237 4.5 25.9185 4.5 25.6002V6.4002C4.5 6.08194 4.62643 5.77671 4.85147 5.55167C5.07652 5.32662 5.38174 5.2002 5.7 5.2002V5.2002ZM6.9 7.6002V24.4002H26.1V7.6002H6.9ZM12.9 14.8002H15.3V17.2002H12.9V19.6002H10.5V17.2002H8.1V14.8002H10.5V12.4002H12.9V14.8002ZM17.7 14.8002H24.9V17.2002H17.7V14.8002Z"
+    fill="#969696"
+    fill-opacity="0.4" />
+</svg>
diff --git a/src/assets/icons/codextoken.svg b/src/assets/icons/codextoken.svg
new file mode 100644
index 0000000..fb56963
--- /dev/null
+++ b/src/assets/icons/codextoken.svg
@@ -0,0 +1,38 @@
+<svg
+  width="31"
+  height="34"
+  viewBox="0 0 31 34"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M15.7551 1.43496L15.4953 1.27722L15.2357 1.43514L1.51015 9.78331L1.26997 9.92939L1.26997 10.2105L1.26997 23.7182L1.26997 23.9973L1.50749 24.1438L15.1596 32.5642L15.4203 32.725L15.682 32.5658L29.5021 24.1557L29.7422 24.0096L29.7422 23.7286L29.7422 10.2105L29.7422 9.92917L29.5017 9.78314L15.7551 1.43496ZM15.4955 3.31459L27.9546 10.9041L27.9546 23.0354L15.4338 30.6852L3.03657 23.0368L3.03657 10.9041L15.4955 3.31459Z"
+    fill="#6FCB94"
+    stroke="#6FCB94" />
+  <path
+    d="M15.1177 31.7051L15.8633 31.7051L15.8633 2.23363L15.1177 2.23363L15.1177 31.7051Z"
+    fill="#6FCB94" />
+  <path
+    d="M21.7549 27.5771L22.5005 27.5771L22.5005 6.35069L21.7549 6.35069L21.7549 27.5771Z"
+    fill="#6FCB94" />
+  <path
+    d="M8.42821 27.5771L9.17383 27.5771L9.17383 6.35069L8.42821 6.35069L8.42821 27.5771Z"
+    fill="#6FCB94" />
+  <path
+    d="M8.9863 28.0199L28.9824 17.4092L28.6281 16.7645L8.63201 27.3752L8.9863 28.0199Z"
+    fill="#6FCB94" />
+  <path
+    d="M2.31555 24.0033L28.981 10.8994L28.6474 10.2441L1.98204 23.348L2.31555 24.0033Z"
+    fill="#6FCB94" />
+  <path
+    d="M28.5503 23.8603L28.8838 23.2051L2.21839 10.1012L1.88491 10.7565L28.5503 23.8603Z"
+    fill="#6FCB94" />
+  <path
+    d="M21.9426 27.9494L22.2969 27.3047L2.30075 16.694L1.94645 17.3387L21.9426 27.9494Z"
+    fill="#6FCB94" />
+  <path
+    d="M2.32614 17.4134L22.3223 6.80273L21.968 6.15806L1.97185 16.7688L2.32614 17.4134Z"
+    fill="#6FCB94" />
+  <path
+    d="M28.6042 17.3448L28.9585 16.7002L8.96238 6.08951L8.60811 6.73413L28.6042 17.3448Z"
+    fill="#6FCB94" />
+</svg>
diff --git a/src/assets/icons/contacts.svg b/src/assets/icons/contacts.svg
new file mode 100644
index 0000000..fcbbde8
--- /dev/null
+++ b/src/assets/icons/contacts.svg
@@ -0,0 +1,10 @@
+<svg
+  width="20"
+  height="20"
+  viewBox="0 0 20 20"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M4 17.5C4 15.9087 4.63214 14.3826 5.75736 13.2574C6.88258 12.1321 8.4087 11.5 10 11.5C11.5913 11.5 13.1174 12.1321 14.2426 13.2574C15.3679 14.3826 16 15.9087 16 17.5H4ZM10 10.75C7.51375 10.75 5.5 8.73625 5.5 6.25C5.5 3.76375 7.51375 1.75 10 1.75C12.4862 1.75 14.5 3.76375 14.5 6.25C14.5 8.73625 12.4862 10.75 10 10.75Z"
+    fill="#969696" />
+</svg>
diff --git a/src/assets/icons/ethereum.svg b/src/assets/icons/ethereum.svg
new file mode 100644
index 0000000..edef96b
--- /dev/null
+++ b/src/assets/icons/ethereum.svg
@@ -0,0 +1,10 @@
+<svg
+  width="33"
+  height="32"
+  viewBox="0 0 33 32"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M16.4999 4L9.12988 16.2201L16.4999 20.5743L23.8699 16.2201L16.4999 4ZM16.4999 28L9.12988 17.6172L16.4999 22L23.8699 17.6172L16.4999 28Z"
+    fill="#6FCB94" />
+</svg>
diff --git a/src/assets/icons/import.svg b/src/assets/icons/import.svg
new file mode 100644
index 0000000..79ddb5a
--- /dev/null
+++ b/src/assets/icons/import.svg
@@ -0,0 +1,11 @@
+<svg
+  width="33"
+  height="32"
+  viewBox="0 0 33 32"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M25.5 7H7.5C6.94772 7 6.5 7.44772 6.5 8V24C6.5 24.5523 6.94772 25 7.5 25H25.5C26.0523 25 26.5 24.5523 26.5 24V8C26.5 7.44772 26.0523 7 25.5 7ZM16.5 20C14.8431 20 13.5 18.6569 13.5 17H8.5V9H24.5V17H19.5C19.5 18.6569 18.1569 20 16.5 20ZM20.5 13H17.5V10H15.5V13H12.5L16.5 17.5L20.5 13Z"
+    fill="#969696"
+    fill-opacity="0.4" />
+</svg>
diff --git a/src/assets/icons/receive.svg b/src/assets/icons/receive.svg
new file mode 100644
index 0000000..f62ef22
--- /dev/null
+++ b/src/assets/icons/receive.svg
@@ -0,0 +1,11 @@
+<svg
+  width="33"
+  height="32"
+  viewBox="0 0 33 32"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M18.8999 18.7022V27.9998H6.8999C6.89953 26.5345 7.23461 25.0885 7.87946 23.7727C8.52431 22.4569 9.46183 21.3061 10.6202 20.4086C11.7785 19.5112 13.1269 18.8908 14.5621 18.595C15.9973 18.2992 17.4811 18.3359 18.8999 18.7022ZM16.4999 17.1998C12.5219 17.1998 9.2999 13.9778 9.2999 9.9998C9.2999 6.0218 12.5219 2.7998 16.4999 2.7998C20.4779 2.7998 23.6999 6.0218 23.6999 9.9998C23.6999 13.9778 20.4779 17.1998 16.4999 17.1998ZM25.4015 21.9998H29.7047V24.3998H25.4015L27.5963 26.5934L25.8995 28.2914L20.8079 23.1998L25.8995 18.1082L27.5963 19.8062L25.4015 21.9998Z"
+    fill="#969696"
+    fill-opacity="0.4" />
+</svg>
diff --git a/src/assets/icons/send.svg b/src/assets/icons/send.svg
new file mode 100644
index 0000000..67e06d0
--- /dev/null
+++ b/src/assets/icons/send.svg
@@ -0,0 +1,11 @@
+<svg
+  width="33"
+  height="32"
+  viewBox="0 0 33 32"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M6.5894 3.28914L28.7438 15.4739C28.8379 15.5257 28.9163 15.6018 28.971 15.6943C29.0256 15.7867 29.0544 15.8922 29.0544 15.9995C29.0544 16.1069 29.0256 16.2123 28.971 16.3048C28.9163 16.3973 28.8379 16.4733 28.7438 16.5251L6.5894 28.7099C6.49804 28.7602 6.39517 28.7858 6.29092 28.7842C6.18667 28.7826 6.08464 28.7538 5.99489 28.7008C5.90513 28.6477 5.83075 28.5722 5.77908 28.4816C5.7274 28.3911 5.70021 28.2886 5.7002 28.1843V3.81474C5.70021 3.71048 5.7274 3.60802 5.77908 3.51746C5.83075 3.42691 5.90513 3.35138 5.99489 3.29833C6.08464 3.24528 6.18667 3.21653 6.29092 3.21492C6.39517 3.2133 6.49804 3.23889 6.5894 3.28914ZM8.1002 17.1995V25.1399L24.7202 15.9995L8.1002 6.85914V14.7995H14.1002V17.1995H8.1002Z"
+    fill="#969696"
+    fill-opacity="0.4" />
+</svg>
diff --git a/src/assets/icons/swap.svg b/src/assets/icons/swap.svg
new file mode 100644
index 0000000..fe59f13
--- /dev/null
+++ b/src/assets/icons/swap.svg
@@ -0,0 +1,11 @@
+<svg
+  width="33"
+  height="32"
+  viewBox="0 0 33 32"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M8.5476 7.01202C10.7396 5.06727 13.5696 3.9954 16.5 4.00001C23.1276 4.00001 28.5 9.37242 28.5 16C28.5039 18.4527 27.7527 20.8471 26.3484 22.858L23.1 16H26.1C26.1 14.0912 25.5311 12.2258 24.4657 10.642C23.4004 9.05812 21.8872 7.82782 20.1192 7.1082C18.3513 6.38859 16.409 6.21234 14.5404 6.60197C12.6718 6.99159 10.9618 7.92941 9.6288 9.29562L8.5488 7.01322L8.5476 7.01202ZM24.4524 24.988C22.2604 26.9328 19.4304 28.0046 16.5 28C9.8724 28 4.5 22.6276 4.5 16C4.5 13.45 5.2956 11.086 6.6516 9.14201L9.9 16H6.9C6.89996 17.9088 7.46894 19.7742 8.53426 21.3581C9.59957 22.9419 11.1128 24.1722 12.8808 24.8918C14.6487 25.6114 16.591 25.7877 18.4596 25.3981C20.3282 25.0084 22.0382 24.0706 23.3712 22.7044L24.4512 24.9868L24.4524 24.988ZM12.3 18.4H18.9C19.0591 18.4 19.2117 18.3368 19.3243 18.2243C19.4368 18.1118 19.5 17.9591 19.5 17.8C19.5 17.6409 19.4368 17.4883 19.3243 17.3758C19.2117 17.2632 19.0591 17.2 18.9 17.2H14.1C13.3044 17.2 12.5413 16.8839 11.9787 16.3213C11.4161 15.7587 11.1 14.9957 11.1 14.2C11.1 13.4044 11.4161 12.6413 11.9787 12.0787C12.5413 11.5161 13.3044 11.2 14.1 11.2H15.3V10H17.7V11.2H20.7V13.6H14.1C13.9409 13.6 13.7883 13.6632 13.6757 13.7758C13.5632 13.8883 13.5 14.0409 13.5 14.2C13.5 14.3591 13.5632 14.5118 13.6757 14.6243C13.7883 14.7368 13.9409 14.8 14.1 14.8H18.9C19.6957 14.8 20.4587 15.1161 21.0213 15.6787C21.5839 16.2413 21.9 17.0044 21.9 17.8C21.9 18.5957 21.5839 19.3587 21.0213 19.9213C20.4587 20.4839 19.6957 20.8 18.9 20.8H17.7V22H15.3V20.8H12.3V18.4Z"
+    fill="#969696"
+    fill-opacity="0.4" />
+</svg>
diff --git a/src/assets/icons/tokens.svg b/src/assets/icons/tokens.svg
new file mode 100644
index 0000000..bc20137
--- /dev/null
+++ b/src/assets/icons/tokens.svg
@@ -0,0 +1,10 @@
+<svg
+  width="20"
+  height="20"
+  viewBox="0 0 20 20"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M10 17.5C5.85775 17.5 2.5 14.1423 2.5 10C2.5 5.85775 5.85775 2.5 10 2.5C14.1423 2.5 17.5 5.85775 17.5 10C17.5 14.1423 14.1423 17.5 10 17.5ZM10 6.81775L6.81775 10L10 13.1823L13.1823 10L10 6.81775Z"
+    fill="currentColor" />
+</svg>
diff --git a/src/components/ConnectedAccount/WalletCard.css b/src/components/ConnectedAccount/WalletCard.css
index 4971622..f0fa1d8 100644
--- a/src/components/ConnectedAccount/WalletCard.css
+++ b/src/components/ConnectedAccount/WalletCard.css
@@ -30,6 +30,11 @@
   }
 
   header {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 16px;
+    align-items: center;
+
     button {
       background-color: #161616;
       border: 1px solid #96969633;
diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx
index c921dbd..34bb513 100644
--- a/src/components/Menu/Menu.tsx
+++ b/src/components/Menu/Menu.tsx
@@ -70,11 +70,7 @@ export function Menu() {
               </span>
               <span>Dashboard</span>
             </Link>
-            <Link
-              to="/dashboard/wallet"
-              disabled={true}
-              aria-disabled={true}
-              data-title="Coming soon">
+            <Link to="/dashboard/wallet">
               <span>
                 <WalletIcon width={20} height={20} />
               </span>
diff --git a/src/components/WalletLogin/WalletLogin.css b/src/components/WalletLogin/WalletLogin.css
index 4ac3e13..2aeb48f 100644
--- a/src/components/WalletLogin/WalletLogin.css
+++ b/src/components/WalletLogin/WalletLogin.css
@@ -4,11 +4,8 @@
   align-items: center;
   gap: 16px;
   background-color: #252525;
-
-  & {
-    filter: grayscale(30);
-    transition: filter 0.5s;
-  }
+  filter: grayscale(30);
+  transition: filter 0.5s;
 
   &:hover {
     filter: none;
diff --git a/src/components/WalletLogin/WalletLogin.tsx b/src/components/WalletLogin/WalletLogin.tsx
index d622cef..ab1462f 100644
--- a/src/components/WalletLogin/WalletLogin.tsx
+++ b/src/components/WalletLogin/WalletLogin.tsx
@@ -1,4 +1,3 @@
-import { Strings } from "../../utils/strings";
 import "./WalletLogin.css";
 
 export function WalletConnect() {
@@ -7,9 +6,7 @@ export function WalletConnect() {
       <img src="/img/wallet-login.png" width={48} height={48} />
       <div>
         <p>Mainnet</p>
-        <var>
-          {Strings.shortId("0x5B3D1D5D5C5D5D5D5D5D5D5D5D5D5D5D5D5D5D5D")}
-        </var>
+        <var>moodeng.eth</var>
         <footer>
           <p>Connected</p>
           <a>Disconnect</a>
diff --git a/src/routes/dashboard/wallet.css b/src/routes/dashboard/wallet.css
new file mode 100644
index 0000000..d6fda3f
--- /dev/null
+++ b/src/routes/dashboard/wallet.css
@@ -0,0 +1,131 @@
+.wallet-page {
+  display: flex;
+  gap: 16px;
+
+  .card {
+    filter: grayscale(30);
+    transition: filter 0.5s;
+
+    &:hover {
+      filter: none;
+    }
+  }
+
+  .buttons {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 16px;
+    margin-bottom: 16px;
+    border-top: 1px solid #96969633;
+    border-bottom: 1px solid #96969633;
+    padding-top: 16px;
+    padding-bottom: 16px;
+
+    div {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+
+      small {
+        font-family: Inter;
+        font-size: 12px;
+        font-weight: 500;
+        line-height: 16px;
+        text-align: left;
+        color: #969696;
+      }
+    }
+
+    span {
+      height: 36px;
+      width: 1px;
+      background-color: #ffffff33;
+      margin: auto 0;
+    }
+  }
+
+  .button-icon {
+    background-color: #2f2f2f;
+    height: 60px;
+    width: 60px;
+    color: #96969666;
+    border: 0.75px solid #96969633;
+
+    svg {
+      mix-blend-mode: unset;
+    }
+  }
+
+  .card {
+    flex: 1;
+  }
+
+  .require-assistance {
+    max-height: 145px;
+    margin-top: 8px;
+  }
+
+  .card:nth-child(2) {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    gap: 8px;
+
+    div {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      color: #969696;
+      font-size: 20px;
+    }
+  }
+
+  .tabs {
+    > div {
+      cursor: not-allowed;
+    }
+  }
+
+  ul {
+    list-style-type: none;
+    margin-top: 16px;
+
+    li {
+      display: flex;
+      gap: 48px;
+      border-bottom: 1px solid #96969633;
+      margin-bottom: 16px;
+      padding-bottom: 16px;
+
+      div {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+
+        small {
+          font-family: Inter;
+          font-size: 14px;
+          font-weight: 400;
+          line-height: 20px;
+          letter-spacing: -0.006em;
+          text-align: left;
+          color: #ffffffb2;
+        }
+
+        p {
+          font-family: Inter;
+          font-size: 32px;
+          font-weight: 500;
+          line-height: 40px;
+          letter-spacing: -0.005em;
+          text-align: left;
+        }
+      }
+    }
+  }
+}
diff --git a/src/routes/dashboard/wallet.tsx b/src/routes/dashboard/wallet.tsx
index eee5841..247d9bb 100644
--- a/src/routes/dashboard/wallet.tsx
+++ b/src/routes/dashboard/wallet.tsx
@@ -1,5 +1,120 @@
 import { createFileRoute } from "@tanstack/react-router";
+import { ConnectedAccount } from "../../components/ConnectedAccount/ConnectedAccount";
+import { Card } from "../../components/Card/Card";
+import WalletIcon from "../../assets/icons/wallet.svg?react";
+import PlusIcon from "../../assets/icons/plus.svg?react";
+import RequestDurationIcon from "../../assets/icons/request-duration.svg?react";
+import { RequireAssitance } from "../../components/RequireAssitance/RequireAssitance";
+import "./wallet.css";
+import BuySellIcon from "../../assets/icons/buy-sell.svg?react";
+import SendIcon from "../../assets/icons/send.svg?react";
+import SwapIcon from "../../assets/icons/swap.svg?react";
+import BridgeIcon from "../../assets/icons/bridge.svg?react";
+import ReceiveIcon from "../../assets/icons/receive.svg?react";
+import ImportIcon from "../../assets/icons/import.svg?react";
+import RefreshIcon from "../../assets/icons/refresh.svg?react";
+import TokensIcon from "../../assets/icons/tokens.svg?react";
+import FavoriteIcon from "../../assets/icons/favorite.svg?react";
+import ContactsIcon from "../../assets/icons/contacts.svg?react";
+import CodexTokenIcon from "../../assets/icons/codextoken.svg?react";
+import EthereumIcon from "../../assets/icons/ethereum.svg?react";
+import {
+  ButtonIcon,
+  TabProps,
+  Tabs,
+} from "@codex-storage/marketplace-ui-components";
+
+const Wallet = () => {
+  const tabs: TabProps[] = [
+    {
+      label: "Tokens",
+      Icon: TokensIcon,
+    },
+    {
+      label: "NFTs",
+      Icon: FavoriteIcon,
+    },
+    {
+      label: "Contacts",
+      Icon: ContactsIcon,
+    },
+  ];
+
+  return (
+    <div className="wallet-page">
+      <Card
+        icon={<WalletIcon width={24}></WalletIcon>}
+        title="Connected Account"
+        buttonLabel="Add Wallet"
+        buttonIcon={() => <PlusIcon width={20} />}>
+        <>
+          <ConnectedAccount></ConnectedAccount>
+
+          <div className="buttons">
+            <div>
+              <ButtonIcon Icon={BuySellIcon} disabled></ButtonIcon>
+              <small>Buy / Sell</small>
+            </div>
+            <div>
+              <ButtonIcon Icon={SendIcon} disabled></ButtonIcon>
+              <small>Send</small>
+            </div>
+            <div>
+              <ButtonIcon Icon={SwapIcon} disabled></ButtonIcon>
+              <small>Swap</small>
+            </div>
+            <div>
+              <ButtonIcon Icon={BridgeIcon} disabled></ButtonIcon>
+              <small>Bridge</small>
+            </div>
+            <span></span>
+            <div>
+              <ButtonIcon Icon={ReceiveIcon} disabled></ButtonIcon>
+              <small>Receive</small>
+            </div>
+            <div>
+              <ButtonIcon Icon={ImportIcon} disabled></ButtonIcon>
+              <small>Import</small>
+            </div>
+            <div>
+              <ButtonIcon Icon={RefreshIcon} disabled></ButtonIcon>
+              <small>Refresh</small>
+            </div>
+          </div>
+          <Tabs tabs={tabs} tabIndex={0} onTabChange={() => {}}></Tabs>
+          <ul>
+            <li>
+              <ButtonIcon Icon={CodexTokenIcon} disabled></ButtonIcon>
+              <div>
+                <small>Codex</small>
+                <p>123,223 CDX</p>
+              </div>
+            </li>
+            <li>
+              <ButtonIcon Icon={EthereumIcon} disabled></ButtonIcon>
+              <div>
+                <small>Ethereum</small>
+                <p>2.32 ETH</p>
+              </div>
+            </li>
+          </ul>
+        </>
+      </Card>
+      <Card
+        icon={<RequestDurationIcon width={24}></RequestDurationIcon>}
+        title="Activity">
+        <div>
+          <div>
+            <RequestDurationIcon width={24}></RequestDurationIcon>
+          </div>
+          <div>You currently have no activity.</div>
+          <RequireAssitance></RequireAssitance>
+        </div>
+      </Card>
+    </div>
+  );
+};
 
 export const Route = createFileRoute("/dashboard/wallet")({
-  component: () => <div>Hello /dashboard/wallet!</div>,
+  component: Wallet,
 });