Resolved merge conflicts

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

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

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,20 +22,20 @@ 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",
     horizonUrl: "https://horizon-testnet.stellar.org",
     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 = () => {
           </div>
 
           <div className="NetworkSelector__body__inputs">
+            {activeNetworkId === "futurenet" ? (
+              <Notification
+                variant="warning"
+                title="Warning"
+                icon={<Icon.AlertTriangle />}
+              >
+                Futurenet is an unstable network. We recommend using Testnet for
+                your development purposes.
+              </Notification>
+            ) : null}
+
             <form onSubmit={handleSelectNetwork}>
               <Input
                 id="rpc-url"

src/components/NetworkSelector/styles.scss

@@ -109,6 +109,8 @@
     }
 
     &__inputs {
+      display: grid;
+      gap: pxToRem(8px);
       padding: pxToRem(6px) pxToRem(8px);
       background-color: transparent;
       border-radius: pxToRem(4px);

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

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 ({

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"