add <ExpandBox/> and remove secretKey

stellar · Mar 14, 2024 · 3586225 · 3586225
1 parent 07c554f
commit 3586225
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 42 deletions.
diff --git a/src/app/(sidebar)/account/create/page.tsx b/src/app/(sidebar)/account/create/page.tsx
@@ -1,25 +1,27 @@
 "use client";
+
+import { useState } from "react";
 import { useRouter } from "next/navigation";
 import { Card, Text, Button } from "@stellar/design-system";
 import { Keypair } from "stellar-sdk";
 
-import { GenerateKeypair } from "@/components/GenerateKeypair";
 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.updateKeypair({
-      publicKey: keypair.publicKey(),
-      secretKey: keypair.secret(),
-    });
+    account.update(keypair.publicKey());
+    setSecretKey(keypair.secret());
   };
 
   return (
@@ -51,7 +53,9 @@ export default function CreateAccount() {
             </Button>
           </div>
 
-          <GenerateKeypair />
+          <ExpandBox isExpanded={Boolean(account.publicKey && secretKey)}>
+            <GenerateKeypair secretKey={secretKey} />
+          </ExpandBox>
         </div>
       </Card>
     </div>

diff --git a/src/components/GenerateKeypair.tsx b/src/components/GenerateKeypair.tsx
@@ -1,38 +1,35 @@
 import { Icon, Input } from "@stellar/design-system";
 import { useStore } from "@/store/useStore";
 
-export const GenerateKeypair = () => {
+export const GenerateKeypair = ({ secretKey }: { secretKey: string }) => {
   const { account } = useStore();
 
   return (
     <div className="Account__keypair">
-      {account.keypair.publicKey && (
+      {account.publicKey && (
         <Input
           readOnly
           id="generate-keypair-publickey"
           fieldSize="md"
           label="Public Key"
-          value={account.keypair.publicKey}
+          value={account.publicKey}
           copyButton={{
             position: "right",
           }}
         />
       )}
 
-      {account.keypair.secretKey && (
+      {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);
-              }}
-            />
-          }
+          value={secretKey}
+          isPassword
+          copyButton={{
+            position: "right",
+          }}
         />
       )}
     </div>

diff --git a/src/store/createStore.ts b/src/store/createStore.ts
@@ -10,16 +10,8 @@ export interface Store {
 
   // Account
   account: {
-    value: string;
-    keypair: {
-      publicKey: string;
-      secretKey: string;
-    };
+    publicKey: string;
     update: (value: string) => void;
-    updateKeypair: (nestedVal: {
-      publicKey: string;
-      secretKey: string;
-    }) => void;
     reset: () => void;
   };
 }
@@ -39,25 +31,14 @@ export const createStore = (options: CreateStoreOptions) =>
             state.network = network;
           }),
         account: {
-          value: "",
-          keypair: {
-            publicKey: "",
-            secretKey: "",
-          },
+          publicKey: "",
           update: (value: string) =>
             set((state) => {
-              state.account.value = value;
-            }),
-          updateKeypair: (nestedVal: {
-            publicKey: string;
-            secretKey: string;
-          }) =>
-            set((state) => {
-              state.account.keypair = 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: "||",