Merge branch 'feat/ui/integration' into mock

package.json

@@ -25,7 +25,7 @@
     "React"
   ],
   "dependencies": {
-    "@codex-storage/marketplace-ui-components": "^0.0.31",
+    "@codex-storage/marketplace-ui-components": "^0.0.32",
     "@codex-storage/sdk-js": "^0.0.15",
     "@sentry/browser": "^8.32.0",
     "@sentry/react": "^8.31.0",

src/components/AccountIcon/AccountIcon.tsx

@@ -0,0 +1,15 @@
+export function AccountIcon() {
+  return (
+    <svg
+      width="18"
+      height="18"
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M0.9 0.899902H17.1C17.3387 0.899902 17.5676 0.994723 17.7364 1.16351C17.9052 1.33229 18 1.56121 18 1.7999V16.1999C18 16.4386 17.9052 16.6675 17.7364 16.8363C17.5676 17.0051 17.3387 17.0999 17.1 17.0999H0.9C0.661305 17.0999 0.432387 17.0051 0.263604 16.8363C0.0948211 16.6675 0 16.4386 0 16.1999V1.7999C0 1.56121 0.0948211 1.33229 0.263604 1.16351C0.432387 0.994723 0.661305 0.899902 0.9 0.899902ZM16.2 8.0999H1.8V15.2999H16.2V8.0999ZM16.2 6.2999V2.6999H1.8V6.2999H16.2ZM10.8 11.6999H14.4V13.4999H10.8V11.6999Z"
+        fill="#969696"
+      />
+    </svg>
+  );
+}

src/components/ArrowLeftIcon/ArrowLeftIcon.tsx

@@ -0,0 +1,15 @@
+export function ArrowLeftIcon() {
+  return (
+    <svg
+      width="6"
+      height="8"
+      viewBox="0 0 6 8"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M2.36349 3.99931L5.33349 6.96931L4.48509 7.81771L0.666687 3.99931L4.48509 0.180908L5.33349 1.02931L2.36349 3.99931Z"
+        fill="#969696"
+      />
+    </svg>
+  );
+}

src/components/ArrowRightIcon/ArrowRightIcon.tsx

@@ -0,0 +1,15 @@
+export function ArrowRightIcon() {
+  return (
+    <svg
+      width="6"
+      height="8"
+      viewBox="0 0 6 8"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M3.63669 3.99931L0.666687 1.02931L1.51509 0.180908L5.33349 3.99931L1.51509 7.81771L0.666687 6.96931L3.63669 3.99931Z"
+        fill="#969696"
+      />
+    </svg>
+  );
+}

src/components/Availability/AvailabilitySpaceAllocation.tsx

@@ -2,7 +2,7 @@ import { CodexNodeSpace } from "@codex-storage/sdk-js";
 import { AvailabilityState } from "./types";
 import { SpaceAllocation } from "@codex-storage/marketplace-ui-components";
 import "./AvailabilitySpaceAllocation.css";
-import { nodeSpaceAllocationColors } from "../NodeSpaceAllocation/nodeSpaceAllocation.domain";
+import { nodeSpaceAllocationColors } from "../NodeSpace/nodeSpace.domain";
 
 type Props = {
   space: CodexNodeSpace;

src/components/ConnectedAccount/ConnectedAccount.css

@@ -0,0 +1,7 @@
+.connected-account {
+  border-radius: 8px;
+  border: 1px solid #96969633;
+
+  main {
+  }
+}

src/components/ConnectedAccount/ConnectedAccount.tsx

@@ -0,0 +1,22 @@
+import { Button } from "@codex-storage/marketplace-ui-components";
+import { AccountIcon } from "../AccountIcon/AccountIcon";
+import "./ConnectedAccount.css";
+import { PlusIcon } from "../PlusIcon/PlusIcon";
+import { WalletCard } from "./WalletCard";
+
+export function ConnectedAccount() {
+  return (
+    <div className="card connected-account">
+      <header>
+        <div>
+          <AccountIcon></AccountIcon>
+          <h5>Connected Account</h5>
+        </div>
+        <Button Icon={PlusIcon} label="Add Wallet" variant="outline"></Button>
+      </header>
+      <main>
+        <WalletCard></WalletCard>
+      </main>
+    </div>
+  );
+}

src/components/ConnectedAccount/WalletCard.css

@@ -0,0 +1,168 @@
+.wallet-card {
+  background-image: url(/img/wallet.png);
+  background-repeat: no-repeat;
+  background-size: cover;
+  border: 1px solid #96969633;
+  height: 286px;
+  border-radius: 16px;
+  padding: 16px;
+  box-sizing: border-box;
+  position: relative;
+
+  &::before {
+    content: " ";
+    width: 217px;
+    height: 148px;
+    position: absolute;
+    bottom: -1px;
+    right: 0;
+    background: transparent;
+    backdrop-filter: blur(3px);
+  }
+
+  header {
+    button {
+      background-color: #161616;
+      border: 1px solid #96969633;
+      height: 24px;
+      width: 24px;
+      cursor: pointer;
+      transition: box-shadow 0.35s;
+
+      &:hover {
+        box-shadow: 0 0 0 3px var(--codex-border-color);
+      }
+
+      &:first-child {
+        border-top-left-radius: 6px;
+        border-bottom-left-radius: 6px;
+      }
+
+      &:nth-child(2) {
+        border-top-right-radius: 6px;
+        border-bottom-right-radius: 6px;
+      }
+    }
+  }
+
+  h6 {
+    font-family: Inter;
+    font-size: 12px;
+    font-weight: 700;
+    line-height: 14.52px;
+    letter-spacing: 0.01em;
+    text-align: left;
+    text-transform: uppercase;
+  }
+
+  span {
+    font-family: Inter;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px;
+    letter-spacing: -0.006em;
+    text-align: left;
+    color: #ffffffb2;
+  }
+
+  var {
+    font-family: Inter;
+    font-weight: 500;
+    line-height: 40px;
+    letter-spacing: -0.005em;
+    color: var(--text-strong-950, #ffffff);
+    display: block;
+    font-style: normal;
+  }
+
+  main var {
+    font-size: 32px;
+  }
+
+  footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    position: relative;
+
+    &::after {
+      content: " ";
+      background-image: url(/icons/select-arrow.svg);
+      background-repeat: no-repeat;
+      position: absolute;
+      width: 16px;
+      height: 16px;
+      right: 0;
+      top: 22px;
+    }
+
+    var {
+      font-size: 20px;
+      line-height: 25px;
+    }
+
+    select {
+      background-color: #161616;
+      border-radius: 8px;
+      border: 1px solid #96969633;
+      padding: 6px 6px 6px 44px;
+      outline: none;
+      -moz-appearance: none; /* Firefox */
+      -webkit-appearance: none; /* Safari and Chrome */
+      appearance: none;
+      position: relative;
+      transition: box-shadow 0.35s;
+
+      &:hover {
+        box-shadow: 0 0 0 3px var(--codex-border-color);
+      }
+
+      &:has(option[value="US"]:checked) {
+        background-image: url(/icons/us-flag.svg);
+        background-position: 10px;
+        background-repeat: no-repeat;
+        background-size: 16px;
+      }
+
+      option {
+        border-radius: 32px;
+      }
+    }
+
+    div {
+      position: relative;
+
+      .row {
+        gap: 8px;
+      }
+    }
+
+    small {
+      color: #3ee089;
+      height: 20px;
+      width: 42px;
+      border-radius: 16px;
+      background-color: #1fc16b29;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+
+  section:first-child {
+    margin-top: 12px;
+  }
+
+  section:nth-child(2) {
+    margin-top: 16px;
+    margin-bottom: 10px;
+    height: 90px;
+    position: relative;
+
+    .wallet-lines {
+      position: absolute;
+      left: 0;
+      top: 10px;
+    }
+  }
+}