From c0e80b5acb8b451977be53723206f776cbe8c8e2 Mon Sep 17 00:00:00 2001 From: Arnaud Date: Mon, 11 Nov 2024 07:17:41 +0700 Subject: [PATCH 01/11] Fix nodes color when the connection is not active --- src/components/AppBar/AppBar.tsx | 9 ++++++--- src/components/AppBar/appBar.css | 2 +- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/components/AppBar/AppBar.tsx b/src/components/AppBar/AppBar.tsx index b9a1540..e38fac5 100644 --- a/src/components/AppBar/AppBar.tsx +++ b/src/components/AppBar/AppBar.tsx @@ -74,9 +74,12 @@ export function AppBar({ onIconClick }: Props) { const networkIconColor = online ? "#3EE089" : "var(--codex-input-color-error)"; - const nodesIconColor = codex.enabled - ? "#3EE089" - : "var(--codex-input-color-error)"; + const nodesIconColor = + codex.enabled === false + ? "var(--codex-input-color-error)" + : persistence.enabled + ? "#3EE089" + : "var(--codex-input-color-warning)"; return ( <> diff --git a/src/components/AppBar/appBar.css b/src/components/AppBar/appBar.css index 084a830..9a6d877 100644 --- a/src/components/AppBar/appBar.css +++ b/src/components/AppBar/appBar.css @@ -26,7 +26,7 @@ border-right-color: var(--codex-input-color-error); } - &.app-bar--no-persistence { + &.app-bar--no-persistence:not(.app-bar--offline) { border-right-color: rgb(var(--codex-color-warning)); } From 9ae2318428845a85f7ea678b38235971e5a42eb2 Mon Sep 17 00:00:00 2001 From: Arnaud Date: Mon, 11 Nov 2024 09:40:43 +0700 Subject: [PATCH 02/11] Update ui components --- package-lock.json | 8 ++++---- package.json | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index 1f35814..c6a4f28 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,7 @@ "version": "0.0.7", "license": "MIT", "dependencies": { - "@codex-storage/marketplace-ui-components": "0.0.42", + "@codex-storage/marketplace-ui-components": "^0.0.43", "@codex-storage/sdk-js": "^0.0.15", "@sentry/browser": "^8.32.0", "@sentry/react": "^8.31.0", @@ -424,9 +424,9 @@ "peer": true }, "node_modules/@codex-storage/marketplace-ui-components": { - "version": "0.0.42", - "resolved": "https://registry.npmjs.org/@codex-storage/marketplace-ui-components/-/marketplace-ui-components-0.0.42.tgz", - "integrity": "sha512-JRs7v5rsxNnH3T30UV+DHuJNr25kJ1a1EAqgthA/0okDrcr9IlOVEvl7XrsNBGRDDbJC5MDJkWo9VD2Jh3gAgQ==", + "version": "0.0.43", + "resolved": "https://registry.npmjs.org/@codex-storage/marketplace-ui-components/-/marketplace-ui-components-0.0.43.tgz", + "integrity": "sha512-rNhLfbJXu/1ZKh8hTnD2PkUcj/6M0/jHEfHJ86vIgFX4AFPq4+XGMstylx33VZAUYiDCEAc8iyJV/hMXjTNOsA==", "dependencies": { "lucide-react": "^0.453.0" }, diff --git a/package.json b/package.json index 8204889..8c90b35 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,7 @@ "React" ], "dependencies": { - "@codex-storage/marketplace-ui-components": "0.0.42", + "@codex-storage/marketplace-ui-components": "^0.0.43", "@codex-storage/sdk-js": "^0.0.15", "@sentry/browser": "^8.32.0", "@sentry/react": "^8.31.0", From a45de966fb89d1e0992ef03095e8f1ffae53ea41 Mon Sep 17 00:00:00 2001 From: Arnaud Date: Mon, 11 Nov 2024 09:41:58 +0700 Subject: [PATCH 03/11] 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 @@ + + + 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 @@ + + + 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 @@ + + + + + + + + + + + + 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 @@ + + + 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 @@ + + + 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 @@ + + + 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 @@ + + + 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 @@ + + + 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 @@ + + + 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 @@ + + + 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() { Dashboard - + 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() {

Mainnet

- - {Strings.shortId("0x5B3D1D5D5C5D5D5D5D5D5D5D5D5D5D5D5D5D5D5D")} - + moodeng.eth