From 0dbc504a522c2f73f2eb5fe4caf6d6347dda020b Mon Sep 17 00:00:00 2001 From: Jeesun Kim Date: Mon, 4 Mar 2024 14:46:12 -0800 Subject: [PATCH 1/9] [wip] create account --- src/app/(sidebar)/account/create/page.tsx | 26 ++++++++++++++++++++++- src/styles/globals.scss | 24 +++++++++++++++++++++ 2 files changed, 49 insertions(+), 1 deletion(-) diff --git a/src/app/(sidebar)/account/create/page.tsx b/src/app/(sidebar)/account/create/page.tsx index 3aa44803..9a580489 100644 --- a/src/app/(sidebar)/account/create/page.tsx +++ b/src/app/(sidebar)/account/create/page.tsx @@ -1,5 +1,29 @@ "use client"; +import { Card, Link, Text, Button, Icon } from "@stellar/design-system"; + +import { NextLink } from "@/components/NextLink"; + export default function CreateAccount() { - return
Create Account
; + return ( + +
+ + Keypair Generator + + + + These keypairs can be used on the Stellar network where one is + required. For example, it can be used as an account master key, + account signer, and/or as a stellar-core node key. + +
+ +
+ +
+ + ); } diff --git a/src/styles/globals.scss b/src/styles/globals.scss index fcb80fe4..d6711d63 100644 --- a/src/styles/globals.scss +++ b/src/styles/globals.scss @@ -309,3 +309,27 @@ font-size: pxToRem(14px); line-height: pxToRem(20px); } + +.IntroCards { + display: grid; + gap: pxToRem(12px); + grid-template-columns: 1fr 1fr; + + .Card { + display: flex; + flex-direction: column; + gap: pxToRem(8px); + justify-content: space-between; + + :nth-child(2) { + flex: 1; + } + } +} + +// ============================================================================= +// Margin | Padding +// ============================================================================= +.padding-top-30 { + padding-top: pxToRem(30px); +} From 3baecbaacb3a4c83b13a765b1f88e4c18a528d5d Mon Sep 17 00:00:00 2001 From: Jeesun Kim Date: Tue, 5 Mar 2024 11:06:17 -0800 Subject: [PATCH 2/9] [Account Routes] add routes for Account --- src/app/(sidebar)/account/layout.tsx | 8 ++++++++ src/app/(sidebar)/account/muxed-create/page.tsx | 5 +++++ src/app/(sidebar)/account/muxed-parse/page.tsx | 5 +++++ 3 files changed, 18 insertions(+) create mode 100644 src/app/(sidebar)/account/muxed-create/page.tsx create mode 100644 src/app/(sidebar)/account/muxed-parse/page.tsx diff --git a/src/app/(sidebar)/account/layout.tsx b/src/app/(sidebar)/account/layout.tsx index ccbca088..6afd124e 100644 --- a/src/app/(sidebar)/account/layout.tsx +++ b/src/app/(sidebar)/account/layout.tsx @@ -20,6 +20,14 @@ export default function AccountTemplate({ route: Routes.FUND_ACCOUNT, label: "Fund Account", }, + { + route: Routes.CREATE_MUXED_ACCOUNT, + label: "Create Muxed Account", + }, + { + route: Routes.PARSE_MUXED_ACCOUNT, + label: "Parse Muxed Account", + }, ], }} > diff --git a/src/app/(sidebar)/account/muxed-create/page.tsx b/src/app/(sidebar)/account/muxed-create/page.tsx new file mode 100644 index 00000000..8a92f33e --- /dev/null +++ b/src/app/(sidebar)/account/muxed-create/page.tsx @@ -0,0 +1,5 @@ +"use client"; + +export default function CreateMuxedAccount() { + return
Create Muxed Account
; +} diff --git a/src/app/(sidebar)/account/muxed-parse/page.tsx b/src/app/(sidebar)/account/muxed-parse/page.tsx new file mode 100644 index 00000000..609fba8a --- /dev/null +++ b/src/app/(sidebar)/account/muxed-parse/page.tsx @@ -0,0 +1,5 @@ +"use client"; + +export default function ParseMuxedAccount() { + return
Parse Muxed Account
; +} From 9f38f2de8256adb31fcf48b86332dff2e4ff621c Mon Sep 17 00:00:00 2001 From: Jeesun Kim Date: Tue, 5 Mar 2024 11:30:30 -0800 Subject: [PATCH 3/9] updating styles --- src/app/(sidebar)/account/create/page.tsx | 39 ++++++++++++----------- src/app/(sidebar)/account/styles.scss | 7 ++++ src/styles/globals.scss | 6 ---- 3 files changed, 27 insertions(+), 25 deletions(-) create mode 100644 src/app/(sidebar)/account/styles.scss diff --git a/src/app/(sidebar)/account/create/page.tsx b/src/app/(sidebar)/account/create/page.tsx index 9a580489..d528fec4 100644 --- a/src/app/(sidebar)/account/create/page.tsx +++ b/src/app/(sidebar)/account/create/page.tsx @@ -2,28 +2,29 @@ import { Card, Link, Text, Button, Icon } from "@stellar/design-system"; -import { NextLink } from "@/components/NextLink"; +import "../styles.scss"; export default function CreateAccount() { return ( - -
- - Keypair Generator - +
+ +
+ + Keypair Generator + - - These keypairs can be used on the Stellar network where one is - required. For example, it can be used as an account master key, - account signer, and/or as a stellar-core node key. - -
- -
- -
- + + These keypairs can be used on the Stellar network where one is + required. For example, it can be used as an account master key, + account signer, and/or as a stellar-core node key. + +
+
+ +
+ +
); } diff --git a/src/app/(sidebar)/account/styles.scss b/src/app/(sidebar)/account/styles.scss new file mode 100644 index 00000000..8cfdac69 --- /dev/null +++ b/src/app/(sidebar)/account/styles.scss @@ -0,0 +1,7 @@ +@use "../../../styles/utils.scss" as *; + +.Account { + .CardText__button{ + padding-top: pxToRem(30px); + } +} diff --git a/src/styles/globals.scss b/src/styles/globals.scss index d6711d63..9b04d065 100644 --- a/src/styles/globals.scss +++ b/src/styles/globals.scss @@ -327,9 +327,3 @@ } } -// ============================================================================= -// Margin | Padding -// ============================================================================= -.padding-top-30 { - padding-top: pxToRem(30px); -} From 16ee93f221446d28a602167d901a7e3222ed06d9 Mon Sep 17 00:00:00 2001 From: Jeesun Kim Date: Tue, 5 Mar 2024 11:33:59 -0800 Subject: [PATCH 4/9] rename Account 'routes' --- src/constants/routes.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/constants/routes.ts b/src/constants/routes.ts index 5cc10680..d0db9134 100644 --- a/src/constants/routes.ts +++ b/src/constants/routes.ts @@ -1,10 +1,10 @@ export enum Routes { ROOT = "/", // Account - CREATE_ACCOUNT = "/account/create", - FUND_ACCOUNT = "/account/fund", - CREATE_MUXED_ACCOUNT = "/account/muxed-create", - PARSE_MUXED_ACCOUNT = "/account/muxed-parse", + ACCOUNT_CREATE = "/account/create", + ACCOUNT_FUND = "/account/fund", + ACCOUNT_CREATE_MUXED = "/account/muxed-create", + ACCOUNT_PARSE_MUXED = "/account/muxed-parse", // Explore Endpoints EXPLORE_ENDPOINTS = "/explore-endpoints", EXPLORE_ENDPOINTS_ACCOUNTS = "/explore-endpoints/accounts", From 423c8829010969f91e091e4fed348ba571c9bdb7 Mon Sep 17 00:00:00 2001 From: Jeesun Kim Date: Tue, 5 Mar 2024 11:35:15 -0800 Subject: [PATCH 5/9] fix routes --- src/app/(sidebar)/account/layout.tsx | 8 ++++---- src/components/MainNav.tsx | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/app/(sidebar)/account/layout.tsx b/src/app/(sidebar)/account/layout.tsx index 6afd124e..93b82894 100644 --- a/src/app/(sidebar)/account/layout.tsx +++ b/src/app/(sidebar)/account/layout.tsx @@ -13,19 +13,19 @@ export default function AccountTemplate({ sidebar={{ navItems: [ { - route: Routes.CREATE_ACCOUNT, + route: Routes.ACCOUNT_CREATE, label: "Create Account", }, { - route: Routes.FUND_ACCOUNT, + route: Routes.ACCOUNT_FUND, label: "Fund Account", }, { - route: Routes.CREATE_MUXED_ACCOUNT, + route: Routes.ACCOUNT_CREATE_MUXED, label: "Create Muxed Account", }, { - route: Routes.PARSE_MUXED_ACCOUNT, + route: Routes.ACCOUNT_PARSE_MUXED, label: "Parse Muxed Account", }, ], diff --git a/src/components/MainNav.tsx b/src/components/MainNav.tsx index 2490da21..d6577a70 100644 --- a/src/components/MainNav.tsx +++ b/src/components/MainNav.tsx @@ -14,7 +14,7 @@ const primaryNavLinks: NavLink[] = [ label: "Introduction", }, { - href: Routes.CREATE_ACCOUNT, + href: Routes.ACCOUNT_CREATE, label: "Account", }, { From 9a8ecc215e4e733013e7983601d1a5b3af16968f Mon Sep 17 00:00:00 2001 From: Jeesun Kim Date: Tue, 5 Mar 2024 14:41:18 -0800 Subject: [PATCH 6/9] updating scss to use 'gap' --- src/app/(sidebar)/account/create/page.tsx | 31 +++++++++++++---------- src/app/(sidebar)/account/styles.scss | 12 ++++++--- 2 files changed, 26 insertions(+), 17 deletions(-) diff --git a/src/app/(sidebar)/account/create/page.tsx b/src/app/(sidebar)/account/create/page.tsx index d528fec4..aaad4ad8 100644 --- a/src/app/(sidebar)/account/create/page.tsx +++ b/src/app/(sidebar)/account/create/page.tsx @@ -8,21 +8,24 @@ export default function CreateAccount() { return (
-
- - Keypair Generator - +
+
+ + Keypair Generator + - - These keypairs can be used on the Stellar network where one is - required. For example, it can be used as an account master key, - account signer, and/or as a stellar-core node key. - -
-
- + + These keypairs can be used on the Stellar network where one is + required. For example, it can be used as an account master key, + account signer, and/or as a stellar-core node key. + +
+
+ +
hai
+
diff --git a/src/app/(sidebar)/account/styles.scss b/src/app/(sidebar)/account/styles.scss index 8cfdac69..bfa75cfb 100644 --- a/src/app/(sidebar)/account/styles.scss +++ b/src/app/(sidebar)/account/styles.scss @@ -1,7 +1,13 @@ @use "../../../styles/utils.scss" as *; .Account { - .CardText__button{ - padding-top: pxToRem(30px); - } + &__Card { + display: flex; + flex-direction: column; + gap: pxToRem(24px); + } + + .CardText__button { + align-self: flex-start; + } } From 080eaf4e2f6ffa3d6a09d10538a34faaf2a2d8ed Mon Sep 17 00:00:00 2001 From: Jeesun Kim Date: Wed, 6 Mar 2024 13:49:56 -0800 Subject: [PATCH 7/9] fix --- src/app/(sidebar)/account/create/page.tsx | 3 +-- src/app/(sidebar)/account/styles.scss | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/app/(sidebar)/account/create/page.tsx b/src/app/(sidebar)/account/create/page.tsx index aaad4ad8..7d8008a6 100644 --- a/src/app/(sidebar)/account/create/page.tsx +++ b/src/app/(sidebar)/account/create/page.tsx @@ -8,7 +8,7 @@ export default function CreateAccount() { return (
-
+
Keypair Generator @@ -24,7 +24,6 @@ export default function CreateAccount() { -
hai
diff --git a/src/app/(sidebar)/account/styles.scss b/src/app/(sidebar)/account/styles.scss index bfa75cfb..541122ec 100644 --- a/src/app/(sidebar)/account/styles.scss +++ b/src/app/(sidebar)/account/styles.scss @@ -1,7 +1,7 @@ @use "../../../styles/utils.scss" as *; .Account { - &__Card { + &__card { display: flex; flex-direction: column; gap: pxToRem(24px); From 4ff22cc35cc1787fc75ec228af83f85ba1c97b6a Mon Sep 17 00:00:00 2001 From: Jeesun Kim Date: Wed, 6 Mar 2024 13:59:44 -0800 Subject: [PATCH 8/9] remove unused styling --- src/styles/globals.scss | 36 ++++++------------------------------ 1 file changed, 6 insertions(+), 30 deletions(-) diff --git a/src/styles/globals.scss b/src/styles/globals.scss index 9b04d065..1120fe22 100644 --- a/src/styles/globals.scss +++ b/src/styles/globals.scss @@ -179,8 +179,7 @@ color: var(--Nav-navLink-color); text-decoration: none; padding: pxToRem(12px) 0; - transition: - color var(--sds-anim-transition-default), + transition: color var(--sds-anim-transition-default), border-color var(--sds-anim-transition-default); border-bottom: 2px solid var(--Nav-navLink-border-color); white-space: nowrap; @@ -206,8 +205,7 @@ line-height: pxToRem(20px); font-weight: var(--sds-fw-medium); color: var(--SidebarLink-color); - transition: - color var(--sds-anim-transition-default), + transition: color var(--sds-anim-transition-default), font-weight var(--sds-anim-transition-default); text-decoration: none; display: flex; @@ -244,11 +242,9 @@ } // Highlight if nested link is selected - &:has( - ~ .SidebarLink__nestedItemsWrapper - > .SidebarLink__nestedItems - > [data-is-active="true"] - ) { + &:has(~ .SidebarLink__nestedItemsWrapper + > .SidebarLink__nestedItems + > [data-is-active="true"]) { --SidebarLink-color: var(--sds-clr-gray-12); font-weight: var(--sds-fw-semi-bold); } @@ -269,9 +265,7 @@ &__nestedItemsWrapper { display: grid; grid-template-rows: 0fr; - transition: - grid-template-rows 0.5s ease-out, - margin-top 0.5s ease-out; + transition: grid-template-rows 0.5s ease-out, margin-top 0.5s ease-out; margin-left: pxToRem(24px); margin-top: pxToRem(-8px); @@ -309,21 +303,3 @@ font-size: pxToRem(14px); line-height: pxToRem(20px); } - -.IntroCards { - display: grid; - gap: pxToRem(12px); - grid-template-columns: 1fr 1fr; - - .Card { - display: flex; - flex-direction: column; - gap: pxToRem(8px); - justify-content: space-between; - - :nth-child(2) { - flex: 1; - } - } -} - From d915bc8a27364020e808128e75df7ee774270917 Mon Sep 17 00:00:00 2001 From: Iveta Date: Wed, 13 Mar 2024 15:31:48 -0400 Subject: [PATCH 9/9] Network switch update (#778) * Update network order * Fix test * Upgrade SDS * Add warning for futurenet --- package.json | 2 +- src/components/NetworkIndicator/styles.scss | 4 +++ src/components/NetworkSelector/index.tsx | 27 +++++++++++++++------ src/components/NetworkSelector/styles.scss | 2 ++ tests/networkSelector.test.ts | 2 +- yarn.lock | 8 +++--- 6 files changed, 31 insertions(+), 14 deletions(-) diff --git a/package.json b/package.json index 3fc73bfc..d8d54006 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,7 @@ "git-info": "rm -rf src/generated/ && mkdir src/generated/ && echo export default \"{\\\"commitHash\\\": \\\"$(git rev-parse --short HEAD)\\\", \\\"version\\\": \\\"$(git describe --tags --always)\\\"};\" > src/generated/gitInfo.ts" }, "dependencies": { - "@stellar/design-system": "^2.0.0-beta.5", + "@stellar/design-system": "^2.0.0-beta.7", "@tanstack/react-query": "^5.24.1", "@tanstack/react-query-devtools": "^5.24.1", "dompurify": "^3.0.9", diff --git a/src/components/NetworkIndicator/styles.scss b/src/components/NetworkIndicator/styles.scss index 88482f13..d5ae9840 100644 --- a/src/components/NetworkIndicator/styles.scss +++ b/src/components/NetworkIndicator/styles.scss @@ -23,6 +23,10 @@ --NetworkSelector-dot-color: var(--sds-clr-lilac-09); } + &[data-network="testnet"] { + --NetworkSelector-dot-color: var(--sds-clr-sky-09); + } + &[data-network="mainnet"] { --NetworkSelector-dot-color: var(--sds-clr-green-09); } diff --git a/src/components/NetworkSelector/index.tsx b/src/components/NetworkSelector/index.tsx index 4c235563..1d58fae1 100644 --- a/src/components/NetworkSelector/index.tsx +++ b/src/components/NetworkSelector/index.tsx @@ -5,7 +5,7 @@ import { useRef, useState, } from "react"; -import { Button, Icon, Input } from "@stellar/design-system"; +import { Button, Icon, Input, Notification } from "@stellar/design-system"; import { NetworkIndicator } from "@/components/NetworkIndicator"; import { localStorageSavedNetwork } from "@/helpers/localStorageSavedNetwork"; @@ -22,13 +22,6 @@ const NetworkOptions: Network[] = [ rpcUrl: "https://rpc-futurenet.stellar.org", passphrase: "Test SDF Future Network ; October 2022", }, - { - id: "mainnet", - label: "Mainnet", - horizonUrl: "https://horizon.stellar.org", - rpcUrl: "", - passphrase: "Public Global Stellar Network ; September 2015", - }, { id: "testnet", label: "Testnet", @@ -36,6 +29,13 @@ const NetworkOptions: Network[] = [ rpcUrl: "https://soroban-testnet.stellar.org", passphrase: "Test SDF Network ; September 2015", }, + { + id: "mainnet", + label: "Mainnet", + horizonUrl: "https://horizon.stellar.org", + rpcUrl: "", + passphrase: "Public Global Stellar Network ; September 2015", + }, { id: "custom", label: "Custom", @@ -277,6 +277,17 @@ export const NetworkSelector = () => {
+ {activeNetworkId === "futurenet" ? ( + } + > + Futurenet is an unstable network. We recommend using Testnet for + your development purposes. + + ) : null} +
{ page .getByTestId("networkSelector-dropdown") .getByTestId("networkSelector-option"), - ).toContainText(["Futurenet", "Mainnet", "Testnet", "Custom"]); + ).toContainText(["Futurenet", "Testnet", "Mainnet", "Custom"]); }); test("Shows correct network data for the selected network", async ({ diff --git a/yarn.lock b/yarn.lock index bd132e26..a64c1000 100644 --- a/yarn.lock +++ b/yarn.lock @@ -192,10 +192,10 @@ resolved "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.6.1.tgz" integrity sha512-UY+FGM/2jjMkzQLn8pxcHGMaVLh9aEitG3zY2CiY7XHdLiz3bZOwa6oDxNqEMv7zZkV+cj5DOdz0cQ1BP5Hjgw== -"@stellar/design-system@^2.0.0-beta.5": - version "2.0.0-beta.5" - resolved "https://registry.npmjs.org/@stellar/design-system/-/design-system-2.0.0-beta.5.tgz" - integrity sha512-fnFZq+doZcqeX2hTgKUVT6SbSmFaZx6tahBl+qN0z6EuxusNbA29HcWNsptwiZK3lLlqm88Wu3jWcVmhvB6zzg== +"@stellar/design-system@^2.0.0-beta.7": + version "2.0.0-beta.7" + resolved "https://registry.yarnpkg.com/@stellar/design-system/-/design-system-2.0.0-beta.7.tgz#26ee99e67dad5bf260045d5756fb7589fd259a76" + integrity sha512-ofoW/U7wMWsogQI+v4lc4fi+KHVw0MoNFOsH1U2esKa7j3n3AJgpNZogmp2cEYmXplzRlQXrN47rB/u1GspdJg== dependencies: "@floating-ui/dom" "^1.5.3" bignumber.js "^9.1.1"