diff --git a/package.json b/package.json index 2ae0db22..8501e135 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.6", + "@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/app/(sidebar)/account/create/page.tsx b/src/app/(sidebar)/account/create/page.tsx index 3aa44803..7d8008a6 100644 --- a/src/app/(sidebar)/account/create/page.tsx +++ b/src/app/(sidebar)/account/create/page.tsx @@ -1,5 +1,32 @@ "use client"; +import { Card, Link, Text, Button, Icon } from "@stellar/design-system"; + +import "../styles.scss"; + 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/app/(sidebar)/account/layout.tsx b/src/app/(sidebar)/account/layout.tsx index ccbca088..93b82894 100644 --- a/src/app/(sidebar)/account/layout.tsx +++ b/src/app/(sidebar)/account/layout.tsx @@ -13,13 +13,21 @@ 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.ACCOUNT_CREATE_MUXED, + label: "Create Muxed Account", + }, + { + route: Routes.ACCOUNT_PARSE_MUXED, + 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
; +} diff --git a/src/app/(sidebar)/account/styles.scss b/src/app/(sidebar)/account/styles.scss new file mode 100644 index 00000000..541122ec --- /dev/null +++ b/src/app/(sidebar)/account/styles.scss @@ -0,0 +1,13 @@ +@use "../../../styles/utils.scss" as *; + +.Account { + &__card { + display: flex; + flex-direction: column; + gap: pxToRem(24px); + } + + .CardText__button { + align-self: flex-start; + } +} 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", }, { 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} +
.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); diff --git a/tests/networkSelector.test.ts b/tests/networkSelector.test.ts index 1e3165fe..47dbb010 100644 --- a/tests/networkSelector.test.ts +++ b/tests/networkSelector.test.ts @@ -22,7 +22,7 @@ test.describe("Network selector", () => { 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 70dc3b49..cd3a15f3 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.6": - version "2.0.0-beta.6" - resolved "https://registry.yarnpkg.com/@stellar/design-system/-/design-system-2.0.0-beta.6.tgz#81ec445fb01b99cd886d9b6790ba5bd242dc523f" - integrity sha512-8xIMYH+pIcNnmwk9rOqhnj7aPqz8FUEgvae/89zctPpo0UhfJ7wLsHn8WTKwLR2ZWmnqmStCjXXeGPtxisuFcA== +"@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"