-
-
-
Is it production ready ?
-
- Not at all! This is a very early alpha version. You should expect
- to encounter bugs, but don't worry—feel free to reach out to us if
- you need assistance.
-
+
+
+
+
Is it production ready ?
+
+ Not at all! This is a very early alpha version. You should
+ expect to encounter bugs, but don't worry—feel free to reach out
+ to us if you need assistance.
+
+
-
-
- ),
+ );
+ },
});
diff --git a/src/routes/dashboard/index.css b/src/routes/dashboard/index.css
index 60aa6c6..ddac5ec 100644
--- a/src/routes/dashboard/index.css
+++ b/src/routes/dashboard/index.css
@@ -26,7 +26,7 @@
}
}
- header {
+ > header {
display: flex;
justify-content: space-between;
margin-bottom: 16px;
diff --git a/src/routes/dashboard/index.tsx b/src/routes/dashboard/index.tsx
index fe7fd24..51ac37e 100644
--- a/src/routes/dashboard/index.tsx
+++ b/src/routes/dashboard/index.tsx
@@ -47,7 +47,8 @@ function Dashboard() {
className="card--main"
title="Connected Account"
buttonLabel="Add Wallet"
- buttonIcon={() =>
}>
+ buttonIcon={() =>
}
+ buttonAction={() => navigate({ to: "/dashboard/availabilities" })}>
diff --git a/src/routes/dashboard/logs.tsx b/src/routes/dashboard/logs.tsx
index ec5e5f6..8b5ee93 100644
--- a/src/routes/dashboard/logs.tsx
+++ b/src/routes/dashboard/logs.tsx
@@ -4,12 +4,28 @@ import { RequireAssitance } from "../../components/RequireAssitance/RequireAssit
import { LogLevel } from "../../components/LogLevel/LogLevel";
import { useDebug } from "../../hooks/useDebug";
import LogsIcon from "../../assets/icons/logs.svg?react";
+import * as Sentry from "@sentry/react";
+import { useEffect } from "react";
const throwOnError = false;
+// Sentry.showReportDialog({});
+
const Logs = () => {
const { data } = useDebug(throwOnError);
+ useEffect(() => {
+ const feedback = Sentry.feedbackIntegration({
+ // Additional SDK configuration goes in here, for example:
+ colorScheme: "dark",
+ triggerLabel: "",
+ });
+ const widget = feedback.createWidget();
+ return () => {
+ return widget.removeFromDom();
+ };
+ }, []);
+
const { table, ...rest } = data ?? {};
return (
diff --git a/src/routes/dashboard/settings.css b/src/routes/dashboard/settings.css
index c75ccc5..c4379c2 100644
--- a/src/routes/dashboard/settings.css
+++ b/src/routes/dashboard/settings.css
@@ -31,6 +31,7 @@
.background-img {
top: 200px;
right: -400px;
+ height: 1000px;
}
.refresh {
diff --git a/src/routes/dashboard/wallet.css b/src/routes/dashboard/wallet.css
index 258fa5e..d6fda3f 100644
--- a/src/routes/dashboard/wallet.css
+++ b/src/routes/dashboard/wallet.css
@@ -1,4 +1,63 @@
.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;
}
@@ -7,4 +66,66 @@
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 fae7d43..247d9bb 100644
--- a/src/routes/dashboard/wallet.tsx
+++ b/src/routes/dashboard/wallet.tsx
@@ -6,40 +6,115 @@ 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 (
+
+
}
+ title="Connected Account"
+ buttonLabel="Add Wallet"
+ buttonIcon={() => }>
+ <>
+
+
+
+
+
+ Buy / Sell
+
+
+
+ Send
+
+
+
+ Swap
+
+
+
+ Bridge
+
+
+
+
+ Receive
+
+
+
+ Import
+
+
+
+ Refresh
+
+
+
}
+ title="Activity">
+
+
+
+
+
You currently have no activity.
+
+
+
+ );
+};
export const Route = createFileRoute("/dashboard/wallet")({
- component: () => {
- return (
-
-
}
- title="Connected Account"
- buttonLabel="Add Wallet"
- buttonIcon={() => }>
-
-
-
}
- title="Activity">
-
-
-
-
-
- You currently have no activity.
-
-
-
-
- );
- },
+ component: Wallet,
});
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index 7f65845..2b843a7 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -1,5 +1,5 @@
import { createFileRoute, useNavigate } from "@tanstack/react-router";
-import { useState } from "react";
+import { useEffect, useState } from "react";
import { Modal } from "@codex-storage/marketplace-ui-components";
import { ArrowRight } from "lucide-react";
import { OnBoardingLayout } from "../components/OnBoarding/OnBoardingLayout";
@@ -26,6 +26,19 @@ function Index() {
const onNextStep = () => navigate({ to: "/onboarding-name" });
+ useEffect(() => {
+ const onKeyPress = (event: Event) => {
+ const e = event as KeyboardEvent;
+ if (e.key === "ArrowRight") {
+ navigate({ to: "/onboarding-name" });
+ }
+ };
+
+ document.addEventListener("keydown", onKeyPress);
+
+ return () => document.removeEventListener("keydown", onKeyPress);
+ }, [navigate]);
+
return (
<>
@@ -56,7 +69,10 @@ function Index() {
Let’s get started
-
+
Disclaimer
diff --git a/src/routes/onboarding-checks.tsx b/src/routes/onboarding-checks.tsx
index bf9ea25..ac51a1c 100644
--- a/src/routes/onboarding-checks.tsx
+++ b/src/routes/onboarding-checks.tsx
@@ -1,5 +1,5 @@
import { createFileRoute, useNavigate } from "@tanstack/react-router";
-import { useState } from "react";
+import { useEffect, useState } from "react";
import { attributes } from "../utils/attributes";
import ArrowRightCircle from "../assets/icons/arrow-circle.svg?react";
import { OnBoardingLayout } from "../components/OnBoarding/OnBoardingLayout";
@@ -14,6 +14,21 @@ const OnBoardingChecks = () => {
const [isStepValid, setIsStepValid] = useState(false);
const navigate = useNavigate({ from: "/onboarding-checks" });
+ useEffect(() => {
+ const onKeyPress = (event: Event) => {
+ const e = event as KeyboardEvent;
+ if (e.key === "ArrowRight" && isStepValid) {
+ navigate({ to: "/dashboard" });
+ } else if (e.key === "ArrowLeft") {
+ navigate({ to: "/onboarding-name" });
+ }
+ };
+
+ document.addEventListener("keydown", onKeyPress);
+
+ return () => document.removeEventListener("keydown", onKeyPress);
+ }, [navigate, isStepValid]);
+
const onNextStep = () => {
if (isStepValid) {
navigate({ to: "/dashboard" });
diff --git a/src/routes/onboarding-name.tsx b/src/routes/onboarding-name.tsx
index 983c3df..09faacf 100644
--- a/src/routes/onboarding-name.tsx
+++ b/src/routes/onboarding-name.tsx
@@ -1,5 +1,5 @@
import { createFileRoute, useNavigate } from "@tanstack/react-router";
-import { useState } from "react";
+import { useEffect, useState } from "react";
import { OnBoardingLayout } from "../components/OnBoarding/OnBoardingLayout";
import { attributes } from "../utils/attributes";
import ArrowRightCircle from "../assets/icons/arrow-circle.svg?react";
@@ -21,6 +21,21 @@ const OnBoardingName = () => {
}
};
+ useEffect(() => {
+ const onKeyPress = (event: Event) => {
+ const e = event as KeyboardEvent;
+ if (e.key === "ArrowRight") {
+ navigate({ to: "/onboarding-checks" });
+ } else if (e.key === "ArrowLeft") {
+ navigate({ to: "/" });
+ }
+ };
+
+ document.addEventListener("keydown", onKeyPress);
+
+ return () => document.removeEventListener("keydown", onKeyPress);
+ }, [navigate]);
+
return (
<>