From b2e2c01c46d6542284c2edcc044c35e2474355e4 Mon Sep 17 00:00:00 2001 From: Iveta Date: Wed, 28 Feb 2024 10:34:36 -0500 Subject: [PATCH] V2 Intro page + some page placeholders (#744) --- package.json | 2 +- src/app/(sidebar)/account/create/page.tsx | 11 +- src/app/(sidebar)/account/fund/page.tsx | 71 +----------- src/app/(sidebar)/account/page.tsx | 5 - src/app/(sidebar)/explore-endpoints/page.tsx | 5 + .../(sidebar)/explore-endpoints/template.tsx | 19 ++++ .../soroban/contract-explorer/page.tsx | 5 + src/app/(sidebar)/soroban/template.tsx | 19 ++++ src/app/(sidebar)/transaction/build/page.tsx | 5 + .../(sidebar)/transaction/fee-bump/page.tsx | 5 + src/app/(sidebar)/transaction/sign/page.tsx | 5 + .../(sidebar)/transaction/simulate/page.tsx | 5 + src/app/(sidebar)/transaction/submit/page.tsx | 5 + src/app/(sidebar)/transaction/template.tsx | 41 +++++++ src/app/(sidebar)/xdr/template.tsx | 29 +++++ src/app/(sidebar)/xdr/to/page.tsx | 5 + src/app/(sidebar)/xdr/view/page.tsx | 5 + src/app/page.tsx | 105 +++++++++++++++++- src/components/MainNav.tsx | 12 ++ src/components/NextLink.tsx | 14 ++- src/constants/routes.ts | 11 ++ src/styles/globals.scss | 52 ++++++++- yarn.lock | 8 +- 23 files changed, 350 insertions(+), 94 deletions(-) delete mode 100644 src/app/(sidebar)/account/page.tsx create mode 100644 src/app/(sidebar)/explore-endpoints/page.tsx create mode 100644 src/app/(sidebar)/explore-endpoints/template.tsx create mode 100644 src/app/(sidebar)/soroban/contract-explorer/page.tsx create mode 100644 src/app/(sidebar)/soroban/template.tsx create mode 100644 src/app/(sidebar)/transaction/build/page.tsx create mode 100644 src/app/(sidebar)/transaction/fee-bump/page.tsx create mode 100644 src/app/(sidebar)/transaction/sign/page.tsx create mode 100644 src/app/(sidebar)/transaction/simulate/page.tsx create mode 100644 src/app/(sidebar)/transaction/submit/page.tsx create mode 100644 src/app/(sidebar)/transaction/template.tsx create mode 100644 src/app/(sidebar)/xdr/template.tsx create mode 100644 src/app/(sidebar)/xdr/to/page.tsx create mode 100644 src/app/(sidebar)/xdr/view/page.tsx diff --git a/package.json b/package.json index d4cf1fcf..15c3c9b7 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,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.4", + "@stellar/design-system": "^2.0.0-beta.5", "immer": "^10.0.3", "next": "14.0.4", "react": "^18", diff --git a/src/app/(sidebar)/account/create/page.tsx b/src/app/(sidebar)/account/create/page.tsx index feb52d34..3aa44803 100644 --- a/src/app/(sidebar)/account/create/page.tsx +++ b/src/app/(sidebar)/account/create/page.tsx @@ -1,14 +1,5 @@ "use client"; -import { useStore } from "@/store/useStore"; - export default function CreateAccount() { - const { network } = useStore(); - - return ( -
- Create Account -
{`Current network: ${network?.id}`}
-
- ); + return
Create Account
; } diff --git a/src/app/(sidebar)/account/fund/page.tsx b/src/app/(sidebar)/account/fund/page.tsx index 07df3f55..afb29bdc 100644 --- a/src/app/(sidebar)/account/fund/page.tsx +++ b/src/app/(sidebar)/account/fund/page.tsx @@ -1,74 +1,5 @@ "use client"; -import { useStore } from "@/store/useStore"; -import { Input, Button, Select } from "@stellar/design-system"; -import { useState } from "react"; - export default function FundAccount() { - const { - account: { value, update, updateNested, reset }, - } = useStore(); - - const [testValue, setTestValue] = useState(value); - - const handleUpdateNested = (event: any) => { - const val = event.target.value; - let submitValue = { - nestedValue1: "AAA", - nestedValue2: 111, - }; - - if (val === "Two") { - submitValue = { - nestedValue1: "BBB", - nestedValue2: 222, - }; - } - - updateNested(submitValue); - }; - - return ( -
- Fund Account -
-
{`Test value: ${value}`}
- -

Store value is updated on blur

- - setTestValue(event.target.value)} - onBlur={(event) => update(event.target.value)} - label="Value" - /> - -

Testing nested object update

- - - - -
-
- ); + return
Fund Account
; } diff --git a/src/app/(sidebar)/account/page.tsx b/src/app/(sidebar)/account/page.tsx deleted file mode 100644 index b9e1da7f..00000000 --- a/src/app/(sidebar)/account/page.tsx +++ /dev/null @@ -1,5 +0,0 @@ -"use client"; - -export default function Account() { - return
Account content
; -} diff --git a/src/app/(sidebar)/explore-endpoints/page.tsx b/src/app/(sidebar)/explore-endpoints/page.tsx new file mode 100644 index 00000000..1a61f25b --- /dev/null +++ b/src/app/(sidebar)/explore-endpoints/page.tsx @@ -0,0 +1,5 @@ +"use client"; + +export default function ExploreEndpoints() { + return
Explore Endpoints
; +} diff --git a/src/app/(sidebar)/explore-endpoints/template.tsx b/src/app/(sidebar)/explore-endpoints/template.tsx new file mode 100644 index 00000000..47017a8e --- /dev/null +++ b/src/app/(sidebar)/explore-endpoints/template.tsx @@ -0,0 +1,19 @@ +"use client"; + +import { LayoutSidebarContent } from "@/components/layout/LayoutSidebarContent"; + +export default function ExploreEndpointsTemplate({ + children, +}: { + children: React.ReactNode; +}) { + return ( + + {children} + + ); +} diff --git a/src/app/(sidebar)/soroban/contract-explorer/page.tsx b/src/app/(sidebar)/soroban/contract-explorer/page.tsx new file mode 100644 index 00000000..7743fef5 --- /dev/null +++ b/src/app/(sidebar)/soroban/contract-explorer/page.tsx @@ -0,0 +1,5 @@ +"use client"; + +export default function SorobanContractExplorer() { + return
Soroban Contract Explorer
; +} diff --git a/src/app/(sidebar)/soroban/template.tsx b/src/app/(sidebar)/soroban/template.tsx new file mode 100644 index 00000000..6603b71b --- /dev/null +++ b/src/app/(sidebar)/soroban/template.tsx @@ -0,0 +1,19 @@ +"use client"; + +import { LayoutSidebarContent } from "@/components/layout/LayoutSidebarContent"; + +export default function TransactionTemplate({ + children, +}: { + children: React.ReactNode; +}) { + return ( + + {children} + + ); +} diff --git a/src/app/(sidebar)/transaction/build/page.tsx b/src/app/(sidebar)/transaction/build/page.tsx new file mode 100644 index 00000000..08e78397 --- /dev/null +++ b/src/app/(sidebar)/transaction/build/page.tsx @@ -0,0 +1,5 @@ +"use client"; + +export default function BuildTransaction() { + return
Build Transaction
; +} diff --git a/src/app/(sidebar)/transaction/fee-bump/page.tsx b/src/app/(sidebar)/transaction/fee-bump/page.tsx new file mode 100644 index 00000000..cb3997e4 --- /dev/null +++ b/src/app/(sidebar)/transaction/fee-bump/page.tsx @@ -0,0 +1,5 @@ +"use client"; + +export default function FeeBumpTransaction() { + return
Fee Bump Transaction
; +} diff --git a/src/app/(sidebar)/transaction/sign/page.tsx b/src/app/(sidebar)/transaction/sign/page.tsx new file mode 100644 index 00000000..326001a7 --- /dev/null +++ b/src/app/(sidebar)/transaction/sign/page.tsx @@ -0,0 +1,5 @@ +"use client"; + +export default function SignTransaction() { + return
Sign Transaction
; +} diff --git a/src/app/(sidebar)/transaction/simulate/page.tsx b/src/app/(sidebar)/transaction/simulate/page.tsx new file mode 100644 index 00000000..1709d965 --- /dev/null +++ b/src/app/(sidebar)/transaction/simulate/page.tsx @@ -0,0 +1,5 @@ +"use client"; + +export default function SimulateTransaction() { + return
Simulate Transaction
; +} diff --git a/src/app/(sidebar)/transaction/submit/page.tsx b/src/app/(sidebar)/transaction/submit/page.tsx new file mode 100644 index 00000000..78b768b8 --- /dev/null +++ b/src/app/(sidebar)/transaction/submit/page.tsx @@ -0,0 +1,5 @@ +"use client"; + +export default function SubmitTransaction() { + return
Submit Transaction
; +} diff --git a/src/app/(sidebar)/transaction/template.tsx b/src/app/(sidebar)/transaction/template.tsx new file mode 100644 index 00000000..b9f99f96 --- /dev/null +++ b/src/app/(sidebar)/transaction/template.tsx @@ -0,0 +1,41 @@ +"use client"; + +import { LayoutSidebarContent } from "@/components/layout/LayoutSidebarContent"; +import { Routes } from "@/constants/routes"; + +export default function TransactionTemplate({ + children, +}: { + children: React.ReactNode; +}) { + return ( + + {children} + + ); +} diff --git a/src/app/(sidebar)/xdr/template.tsx b/src/app/(sidebar)/xdr/template.tsx new file mode 100644 index 00000000..85068cec --- /dev/null +++ b/src/app/(sidebar)/xdr/template.tsx @@ -0,0 +1,29 @@ +"use client"; + +import { LayoutSidebarContent } from "@/components/layout/LayoutSidebarContent"; +import { Routes } from "@/constants/routes"; + +export default function XdrTemplate({ + children, +}: { + children: React.ReactNode; +}) { + return ( + + {children} + + ); +} diff --git a/src/app/(sidebar)/xdr/to/page.tsx b/src/app/(sidebar)/xdr/to/page.tsx new file mode 100644 index 00000000..fd419c45 --- /dev/null +++ b/src/app/(sidebar)/xdr/to/page.tsx @@ -0,0 +1,5 @@ +"use client"; + +export default function ToXdr() { + return
To XDR
; +} diff --git a/src/app/(sidebar)/xdr/view/page.tsx b/src/app/(sidebar)/xdr/view/page.tsx new file mode 100644 index 00000000..f111eade --- /dev/null +++ b/src/app/(sidebar)/xdr/view/page.tsx @@ -0,0 +1,5 @@ +"use client"; + +export default function ViewXdr() { + return
View XDR
; +} diff --git a/src/app/page.tsx b/src/app/page.tsx index 7769fddf..823dd1d0 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,11 +1,114 @@ "use client"; +import { useRouter } from "next/navigation"; +import { Card, Link, Text, Button, Icon } from "@stellar/design-system"; + +import { NextLink } from "@/components/NextLink"; import { LayoutContentContainer } from "@/components/layout/LayoutContentContainer"; +import { Routes } from "@/constants/routes"; export default function Introduction() { + const router = useRouter(); + + const infoCards = [ + { + id: "stellar-quest", + title: "Stellar Quest", + description: + "Learn to build world-class applications on the Stellar network in a gamified experience", + buttonLabel: "Go to site", + buttonIcon: , + buttonAction: () => window.open("https://quest.stellar.org/", "_blank"), + }, + { + id: "tools", + title: "Tools", + description: + "Tools for reading and interacting with Soroban smart contracts on the Stellar Network", + buttonLabel: "See tools", + buttonIcon: undefined, + buttonAction: () => router.push(Routes.SOROBAN_CONTRACT_EXPLORER), + }, + { + id: "soroban-rpc", + title: "Learn about the Soroban RPC", + description: "Learn about the Soroban RPC, a RPC gateway to Stellar", + buttonLabel: "Go to docs", + buttonIcon: , + buttonAction: () => + window.open("https://soroban.stellar.org/docs/reference/rpc", "_blank"), + }, + { + id: "horizon", + title: "Learn about Horizon", + description: + "Learn about the Horizon for interacting with the Stellar network", + buttonLabel: "Go to docs", + buttonIcon: , + buttonAction: () => + window.open("https://developers.stellar.org/api/horizon", "_blank"), + }, + ]; + return ( -
Introduction
+ +
+ + Stellar Laboratory + + + + The Stellar Laboratory is a set of tools that enables people to try + out and learn about the Stellar network. The laboratory can{" "} + + build transactions + + ,{" "} + + sign them + + , and{" "} + + submit them to the network + + . It can also make requests to any of the Horizon endpoints. + + + + For Stellar docs, take a look at the{" "} + + Stellar developers site + + . + +
+ + +
+ {infoCards.map((c) => ( + + + {c.title} + + + + {c.description} + + +
+ +
+ + ))} +
); } diff --git a/src/components/MainNav.tsx b/src/components/MainNav.tsx index f7ee0c26..6058d5f9 100644 --- a/src/components/MainNav.tsx +++ b/src/components/MainNav.tsx @@ -21,6 +21,18 @@ const primaryNavLinks: NavLink[] = [ href: Routes.EXPLORE_ENDPOINTS, label: "Explore Endpoints", }, + { + href: Routes.BUILD_TRANSACTION, + label: "Transactions", + }, + { + href: Routes.VIEW_XDR, + label: "View XDR", + }, + { + href: Routes.SOROBAN_CONTRACT_EXPLORER, + label: "Soroban", + }, ]; const secondaryNavLinks: NavLink[] = [ diff --git a/src/components/NextLink.tsx b/src/components/NextLink.tsx index 25fdfe8d..674e3cdc 100644 --- a/src/components/NextLink.tsx +++ b/src/components/NextLink.tsx @@ -1,7 +1,9 @@ import { ComponentProps } from "react"; import Link from "next/link"; -type LinkProps = ComponentProps; +type LinkProps = ComponentProps & { + "sds-variant"?: "primary" | "secondary" | "error" | "success" | "warning"; +}; /** `NextLink` is extended `next/link`. */ export const NextLink = (props: LinkProps) => { @@ -13,5 +15,13 @@ export const NextLink = (props: LinkProps) => { : {}; }; - return ; + return ( + + ); }; diff --git a/src/constants/routes.ts b/src/constants/routes.ts index c5524e5e..e558249d 100644 --- a/src/constants/routes.ts +++ b/src/constants/routes.ts @@ -7,4 +7,15 @@ export enum Routes { PARSE_MUXED_ACCOUNT = "/account/muxed-parse", // Explore Endpoints EXPLORE_ENDPOINTS = "/explore-endpoints", + // Transactions + BUILD_TRANSACTION = "/transaction/build", + SIGN_TRANSACTION = "/transaction/sign", + SIMULATE_TRANSACTION = "/transaction/simulate", + SUBMIT_TRANSACTION = "/transaction/submit", + FEE_BUMP_TRANSACTION = "/transaction/fee-bump", + // View XDR + VIEW_XDR = "/xdr/view", + TO_XDR = "/xdr/to", + // Soroban + SOROBAN_CONTRACT_EXPLORER = "/soroban/contract-explorer", } diff --git a/src/styles/globals.scss b/src/styles/globals.scss index 0899cc1c..6019bd3b 100644 --- a/src/styles/globals.scss +++ b/src/styles/globals.scss @@ -20,6 +20,24 @@ color: var(--sds-clr-gray-11); background-color: var(--sds-clr-gray-02); + // =========================================================================== + // Generic + // =========================================================================== + + .Heading, + h1, + h2, + h3, + h4, + h5, + h6 { + color: var(--sds-clr-gray-12); + } + + // =========================================================================== + // Layout + // =========================================================================== + // Header &__header { background-color: var(--sds-clr-gray-01); @@ -146,7 +164,6 @@ } } -// TODO: update name .NavLink { --Nav-navLink-color: var(--sds-clr-gray-11); --Nav-navLink-border-color: transparent; @@ -158,6 +175,7 @@ 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; @media (hover: hover) { &:hover { @@ -208,3 +226,35 @@ font-weight: var(--sds-fw-semi-bold); } } + +// ============================================================================= +// Pages +// ============================================================================= + +// Introduction +.CardText { + display: flex; + flex-direction: column; + gap: pxToRem(12px); + + p { + margin-bottom: 0 !important; + } +} + +.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; + } + } +} diff --git a/yarn.lock b/yarn.lock index 9e04f47c..8757e2a5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -168,10 +168,10 @@ resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.6.1.tgz#9ab8f811930d7af3e3d549183a50884f9eb83f36" integrity sha512-UY+FGM/2jjMkzQLn8pxcHGMaVLh9aEitG3zY2CiY7XHdLiz3bZOwa6oDxNqEMv7zZkV+cj5DOdz0cQ1BP5Hjgw== -"@stellar/design-system@^2.0.0-beta.4": - version "2.0.0-beta.4" - resolved "https://registry.yarnpkg.com/@stellar/design-system/-/design-system-2.0.0-beta.4.tgz#29c95cbd9e8641ba1eab2116c198d9a659b0f10e" - integrity sha512-HIGo51qj37BAj4AGp4cxs+DENoiepQQFcOtVfT87Mp+x/lwIZcGhYGVAe/DuKwjyMak379qy9iI/lSY4GlTQlQ== +"@stellar/design-system@^2.0.0-beta.5": + version "2.0.0-beta.5" + resolved "https://registry.yarnpkg.com/@stellar/design-system/-/design-system-2.0.0-beta.5.tgz#caa0a3f214ff25bf94d89a0181c39ab3215612d7" + integrity sha512-fnFZq+doZcqeX2hTgKUVT6SbSmFaZx6tahBl+qN0z6EuxusNbA29HcWNsptwiZK3lLlqm88Wu3jWcVmhvB6zzg== dependencies: "@floating-ui/dom" "^1.5.3" bignumber.js "^9.1.1"