V2 Intro page + some page placeholders (#744)

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

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 (
-    <div>
-      Create Account
-      <div>{`Current network: ${network?.id}`}</div>
-    </div>
-  );
+  return <div>Create Account</div>;
 }

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 (
-    <div>
-      Fund Account
-      <div>
-        <div>{`Test value: ${value}`}</div>
-
-        <p>Store value is updated on blur</p>
-
-        <Input
-          id="test-1"
-          fieldSize="sm"
-          value={testValue}
-          onChange={(event) => setTestValue(event.target.value)}
-          onBlur={(event) => update(event.target.value)}
-          label="Value"
-        />
-
-        <p>Testing nested object update</p>
-
-        <Select
-          id="select-1"
-          fieldSize="sm"
-          onChange={handleUpdateNested}
-          label="Nested value"
-        >
-          <option></option>
-          <option value="One">One</option>
-          <option value="Two">Two</option>
-        </Select>
-
-        <Button
-          size="sm"
-          variant="primary"
-          onClick={() => {
-            reset();
-            setTestValue("");
-          }}
-        >
-          Reset
-        </Button>
-      </div>
-    </div>
-  );
+  return <div>Fund Account</div>;
 }

src/app/(sidebar)/explore-endpoints/page.tsx

@@ -0,0 +1,5 @@
+"use client";
+
+export default function ExploreEndpoints() {
+  return <div>Explore Endpoints</div>;
+}

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 (
+    <LayoutSidebarContent
+      sidebar={{
+        navItems: [],
+      }}
+    >
+      {children}
+    </LayoutSidebarContent>
+  );
+}

src/app/(sidebar)/soroban/contract-explorer/page.tsx

@@ -0,0 +1,5 @@
+"use client";
+
+export default function SorobanContractExplorer() {
+  return <div>Soroban Contract Explorer</div>;
+}

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 (
+    <LayoutSidebarContent
+      sidebar={{
+        navItems: [],
+      }}
+    >
+      {children}
+    </LayoutSidebarContent>
+  );
+}

src/app/(sidebar)/transaction/build/page.tsx

@@ -0,0 +1,5 @@
+"use client";
+
+export default function BuildTransaction() {
+  return <div>Build Transaction</div>;
+}

src/app/(sidebar)/transaction/fee-bump/page.tsx

@@ -0,0 +1,5 @@
+"use client";
+
+export default function FeeBumpTransaction() {
+  return <div>Fee Bump Transaction</div>;
+}

src/app/(sidebar)/transaction/sign/page.tsx

@@ -0,0 +1,5 @@
+"use client";
+
+export default function SignTransaction() {
+  return <div>Sign Transaction</div>;
+}

src/app/(sidebar)/transaction/simulate/page.tsx

@@ -0,0 +1,5 @@
+"use client";
+
+export default function SimulateTransaction() {
+  return <div>Simulate Transaction</div>;
+}

src/app/(sidebar)/transaction/submit/page.tsx

@@ -0,0 +1,5 @@
+"use client";
+
+export default function SubmitTransaction() {
+  return <div>Submit Transaction</div>;
+}

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 (
+    <LayoutSidebarContent
+      sidebar={{
+        navItems: [
+          {
+            route: Routes.BUILD_TRANSACTION,
+            label: "Build Transaction",
+          },
+          {
+            route: Routes.SIGN_TRANSACTION,
+            label: "Sign Transaction",
+          },
+          {
+            route: Routes.SIMULATE_TRANSACTION,
+            label: "Simulate Transaction",
+          },
+          {
+            route: Routes.SUBMIT_TRANSACTION,
+            label: "Submit Transaction",
+          },
+          {
+            route: Routes.FEE_BUMP_TRANSACTION,
+            label: "Fee Bump",
+          },
+        ],
+      }}
+    >
+      {children}
+    </LayoutSidebarContent>
+  );
+}

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 (
+    <LayoutSidebarContent
+      sidebar={{
+        navItems: [
+          {
+            route: Routes.VIEW_XDR,
+            label: "View XDR",
+          },
+          {
+            route: Routes.TO_XDR,
+            label: "To XDR",
+          },
+        ],
+      }}
+    >
+      {children}
+    </LayoutSidebarContent>
+  );
+}

src/app/(sidebar)/xdr/to/page.tsx

@@ -0,0 +1,5 @@
+"use client";
+
+export default function ToXdr() {
+  return <div>To XDR</div>;
+}

src/app/(sidebar)/xdr/view/page.tsx

@@ -0,0 +1,5 @@
+"use client";
+
+export default function ViewXdr() {
+  return <div>View XDR</div>;
+}

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: <Icon.LinkExternal01 />,
+      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: <Icon.LinkExternal01 />,
+      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: <Icon.LinkExternal01 />,
+      buttonAction: () =>
+        window.open("https://developers.stellar.org/api/horizon", "_blank"),
+    },
+  ];
+
   return (
     <LayoutContentContainer>
-      <div>Introduction</div>
+      <Card>
+        <div className="CardText">
+          <Text size="lg" as="h1" weight="medium">
+            Stellar Laboratory
+          </Text>
+
+          <Text size="sm" as="p">
+            The Stellar Laboratory is a set of tools that enables people to try
+            out and learn about the Stellar network. The laboratory can{" "}
+            <NextLink href={Routes.BUILD_TRANSACTION} sds-variant="primary">
+              build transactions
+            </NextLink>
+            ,{" "}
+            <NextLink href={Routes.SIGN_TRANSACTION} sds-variant="primary">
+              sign them
+            </NextLink>
+            , and{" "}
+            <NextLink href={Routes.SUBMIT_TRANSACTION} sds-variant="primary">
+              submit them to the network
+            </NextLink>
+            . It can also make requests to any of the Horizon endpoints.
+          </Text>
+
+          <Text size="sm" as="p">
+            For Stellar docs, take a look at the{" "}
+            <Link href="https://developers.stellar.org/docs">
+              Stellar developers site
+            </Link>
+            .
+          </Text>
+        </div>
+      </Card>
+
+      <div className="IntroCards">
+        {infoCards.map((c) => (
+          <Card key={c.id}>
+            <Text size="md" as="h2" weight="medium">
+              {c.title}
+            </Text>
+
+            <Text size="sm" as="p">
+              {c.description}
+            </Text>
+
+            <div>
+              <Button
+                variant="secondary"
+                size="md"
+                icon={c.buttonIcon}
+                onClick={c.buttonAction}
+              >
+                {c.buttonLabel}
+              </Button>
+            </div>
+          </Card>
+        ))}
+      </div>
     </LayoutContentContainer>
   );
 }