add <GenerateKeypair/> component (#779)

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

@@ -1,10 +1,29 @@
 "use client";
 
-import { Card, Link, Text, Button, Icon } from "@stellar/design-system";
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { Card, Text, Button } from "@stellar/design-system";
+import { Keypair } from "stellar-sdk";
+
+import { Routes } from "@/constants/routes";
+import { useStore } from "@/store/useStore";
+import { GenerateKeypair } from "@/components/GenerateKeypair";
+import { ExpandBox } from "@/components/ExpandBox";
 
 import "../styles.scss";
 
 export default function CreateAccount() {
+  const { account } = useStore();
+  const router = useRouter();
+  const [secretKey, setSecretKey] = useState("");
+
+  const generateKeypair = () => {
+    let keypair = Keypair.random();
+
+    account.update(keypair.publicKey());
+    setSecretKey(keypair.secret());
+  };
+
   return (
     <div className="Account">
       <Card>
@@ -21,11 +40,25 @@ export default function CreateAccount() {
             </Text>
           </div>
           <div className="Account__CTA">
-            <Button size="md" variant="tertiary">
+            <Button size="md" variant="secondary" onClick={generateKeypair}>
               Generate keypair
             </Button>
+
+            <Button
+              size="md"
+              variant="tertiary"
+              onClick={() => router.push(Routes.ACCOUNT_FUND)}
+            >
+              Fund account with Friendbot
+            </Button>
           </div>
         </div>
+        <ExpandBox isExpanded={Boolean(account.publicKey && secretKey)}>
+          <GenerateKeypair
+            publicKey={account.publicKey}
+            secretKey={secretKey}
+          />
+        </ExpandBox>
       </Card>
     </div>
   );

src/app/(sidebar)/account/styles.scss

@@ -10,4 +10,20 @@
   .CardText__button {
     align-self: flex-start;
   }
+
+  &__CTA {
+    display: flex;
+    gap: pxToRem(18px) pxToRem(8px);
+  }
+  &__keypair {
+    display: flex;
+    align-items: flex-start;
+    flex-direction: column;
+    margin-top: pxToRem(24px);
+    gap: pxToRem(16px);
+
+    .Input__side-element--right {
+      cursor: pointer;
+    }
+  }
 }

src/components/GenerateKeypair.tsx

@@ -0,0 +1,40 @@
+import { Icon, Input } from "@stellar/design-system";
+
+export const GenerateKeypair = ({
+  publicKey,
+  secretKey,
+}: {
+  publicKey: string;
+  secretKey: string;
+}) => {
+  return (
+    <div className="Account__keypair">
+      {publicKey && (
+        <Input
+          readOnly
+          id="generate-keypair-publickey"
+          fieldSize="md"
+          label="Public Key"
+          value={publicKey}
+          copyButton={{
+            position: "right",
+          }}
+        />
+      )}
+
+      {secretKey && (
+        <Input
+          readOnly
+          id="generate-keypair-secretkey"
+          fieldSize="md"
+          label="Secret Key"
+          value={secretKey}
+          isPassword
+          copyButton={{
+            position: "right",
+          }}
+        />
+      )}
+    </div>
+  );
+};

src/store/createStore.ts

@@ -10,16 +10,8 @@ export interface Store {
 
   // Account
   account: {
-    value: string;
-    nestedObject: {
-      nestedValue1: string;
-      nestedValue2: number;
-    };
+    publicKey: string;
     update: (value: string) => void;
-    updateNested: (nestedVal: {
-      nestedValue1: string;
-      nestedValue2: number;
-    }) => void;
     reset: () => void;
   };
 }
@@ -39,25 +31,14 @@ export const createStore = (options: CreateStoreOptions) =>
             state.network = network;
           }),
         account: {
-          value: "",
-          nestedObject: {
-            nestedValue1: "",
-            nestedValue2: 0,
-          },
+          publicKey: "",
           update: (value: string) =>
             set((state) => {
-              state.account.value = value;
-            }),
-          updateNested: (nestedVal: {
-            nestedValue1: string;
-            nestedValue2: number;
-          }) =>
-            set((state) => {
-              state.account.nestedObject = nestedVal;
+              state.account.publicKey = value;
             }),
           reset: () =>
             set((state) => {
-              state.account.value = "";
+              state.account.publicKey = "";
             }),
         },
       })),
@@ -67,7 +48,7 @@ export const createStore = (options: CreateStoreOptions) =>
         select() {
           return {
             network: true,
-            account: true,
+            account: false,
           };
         },
         key: "||",

yarn.lock

@@ -1622,7 +1622,7 @@ inflight@^1.0.4:
 
 inherits@2, inherits@^2.0.1:
   version "2.0.4"
-  resolved "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
 
 [email protected]: