[Account] Adding routes #771

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 <div>Create Account</div>;
+  return (
+    <div className="Account">
+      <Card>
+        <div className="Account__card">
+          <div className="CardText">
+            <Text size="lg" as="h1" weight="medium">
+              Keypair Generator
+            </Text>
+
+            <Text size="sm" as="p">
+              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.
+            </Text>
+          </div>
+          <div className="Account__CTA">
+            <Button size="md" variant="tertiary">
+              Generate keypair
+            </Button>
+          </div>
+        </div>
+      </Card>
+    </div>
+  );
 }

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",
+          },
         ],
       }}
     >

src/app/(sidebar)/account/muxed-create/page.tsx

@@ -0,0 +1,5 @@
+"use client";
+
+export default function CreateMuxedAccount() {
+  return <div>Create Muxed Account</div>;
+}

src/app/(sidebar)/account/muxed-parse/page.tsx

@@ -0,0 +1,5 @@
+"use client";
+
+export default function ParseMuxedAccount() {
+  return <div>Parse Muxed Account</div>;
+}

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;
+  }
+}

src/components/MainNav.tsx

@@ -14,7 +14,7 @@ const primaryNavLinks: NavLink[] = [
     label: "Introduction",
   },
   {
-    href: Routes.CREATE_ACCOUNT,
+    href: Routes.ACCOUNT_CREATE,
     label: "Account",
   },
   {

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",

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);