add <GenerateKeypair/> component

package.json

@@ -24,6 +24,7 @@
     "next": "14.1.0",
     "react": "^18",
     "react-dom": "^18",
+    "stellar-sdk": "^11.2.2",
     "zustand": "^4.5.1",
     "zustand-querystring": "^0.0.19"
   },

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

@@ -2,6 +2,8 @@
 
 import { Card, Link, Text, Button, Icon } from "@stellar/design-system";
 
+import { GenerateKeypair } from "@/components/GenerateKeypair";
+
 import "../styles.scss";
 
 export default function CreateAccount() {
@@ -21,9 +23,7 @@ export default function CreateAccount() {
             </Text>
           </div>
           <div className="Account__CTA">
-            <Button size="md" variant="tertiary">
-              Generate keypair
-            </Button>
+            <GenerateKeypair />
           </div>
         </div>
       </Card>

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

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

src/components/GenerateKeypair.tsx

@@ -0,0 +1,57 @@
+import { Button, Icon, Input } from "@stellar/design-system";
+import { Keypair } from "stellar-sdk";
+import { useStore } from "@/store/useStore";
+
+export const GenerateKeypair = () => {
+  const { account } = useStore();
+
+  const generateKeypair = () => {
+    let keypair = Keypair.random();
+
+    account.updateKeypair({
+      publicKey: keypair.publicKey(),
+      secretKey: keypair.secret(),
+    });
+  };
+
+  return (
+    <div className="Account__keypair">
+      <Button size="md" variant="tertiary" onClick={generateKeypair}>
+        Generate keypair
+      </Button>
+
+      {account.keypair.publicKey && (
+        <Input
+          readOnly
+          id="generate-keypair-publickey"
+          fieldSize="md"
+          label="Public Key"
+          value={account.keypair.publicKey}
+          rightElement={
+            <Icon.Copy01
+              onClick={() => {
+                navigator.clipboard.writeText(account.keypair.publicKey);
+              }}
+            />
+          }
+        />
+      )}
+      {account.keypair.secretKey && (
+        <Input
+          readOnly
+          id="generate-keypair-secretkey"
+          fieldSize="md"
+          label="Secret Key"
+          value={account.keypair.secretKey}
+          rightElement={
+            <Icon.Copy01
+              onClick={() => {
+                navigator.clipboard.writeText(account.keypair.secretKey);
+              }}
+            />
+          }
+        />
+      )}
+    </div>
+  );
+};

src/store/createStore.ts

@@ -11,14 +11,14 @@ export interface Store {
   // Account
   account: {
     value: string;
-    nestedObject: {
-      nestedValue1: string;
-      nestedValue2: number;
+    keypair: {
+      publicKey: string;
+      secretKey: string;
     };
     update: (value: string) => void;
-    updateNested: (nestedVal: {
-      nestedValue1: string;
-      nestedValue2: number;
+    updateKeypair: (nestedVal: {
+      publicKey: string;
+      secretKey: string;
     }) => void;
     reset: () => void;
   };
@@ -40,20 +40,20 @@ export const createStore = (options: CreateStoreOptions) =>
           }),
         account: {
           value: "",
-          nestedObject: {
-            nestedValue1: "",
-            nestedValue2: 0,
+          keypair: {
+            publicKey: "",
+            secretKey: "",
           },
           update: (value: string) =>
             set((state) => {
               state.account.value = value;
             }),
-          updateNested: (nestedVal: {
-            nestedValue1: string;
-            nestedValue2: number;
+          updateKeypair: (nestedVal: {
+            publicKey: string;
+            secretKey: string;
           }) =>
             set((state) => {
-              state.account.nestedObject = nestedVal;
+              state.account.keypair = nestedVal;
             }),
           reset: () =>
             set((state) => {