From f1e34bf92ddad6897d9b07da836a126feff89ea8 Mon Sep 17 00:00:00 2001
From: clean99 <xff9924@gmail.com>
Date: Mon, 26 Feb 2024 15:41:43 +0800
Subject: [PATCH 1/5] refactor: optimize loading code

---
 website/src/tabs/account/NewAccount.jsx | 116 ++++++++++++------------
 1 file changed, 58 insertions(+), 58 deletions(-)

diff --git a/website/src/tabs/account/NewAccount.jsx b/website/src/tabs/account/NewAccount.jsx
index ed18f9570..651070166 100644
--- a/website/src/tabs/account/NewAccount.jsx
+++ b/website/src/tabs/account/NewAccount.jsx
@@ -28,68 +28,68 @@ export const NewAccount = () => {
 
     const layout = { labelCol: { span: 3 }, wrapperCol: { span: 21 } };
 
-    if (aleo !== null) {
-        return (
-            <Card
-                title="Create a New Account"
-                style={{ width: "100%" }}
-            >
-                <Row justify="center">
-                    <Col>
-                        <Button
-                            type="primary"
-                            size="large"
-                            onClick={generateAccount}
-                            loading={!!loading}
-                        >
-                            Generate
-                        </Button>
-                    </Col>
-                    <Col offset="1">
-                        <Button  size="large" onClick={clear}>
-                            Clear
-                        </Button>
-                    </Col>
-                </Row>
-                {account && (
-                    <Form {...layout}>
-                        <Divider />
-                        <Form.Item label="Private Key" colon={false}>
-                            <Input
-                                size="large"
-                                placeholder="Private Key"
-                                value={privateKey()}
-                                addonAfter={<CopyButton data={privateKey()} />}
-                                disabled
-                            />
-                        </Form.Item>
-                        <Form.Item label="View Key" colon={false}>
-                            <Input
-                                size="large"
-                                placeholder="View Key"
-                                value={viewKey()}
-                                addonAfter={<CopyButton data={viewKey()} />}
-                                disabled
-                            />
-                        </Form.Item>
-                        <Form.Item label="Address" colon={false}>
-                            <Input
-                                size="large"
-                                placeholder="Address"
-                                value={address()}
-                                addonAfter={<CopyButton data={address()} />}
-                                disabled
-                            />
-                        </Form.Item>
-                    </Form>
-                )}
-            </Card>
-        );
-    } else {
+    if (!aleo) {
         return (
             <h3>
                 <center>Loading...</center>
             </h3>
         );
     }
+
+    return (
+        <Card
+            title="Create a New Account"
+            style={{ width: "100%" }}
+        >
+            <Row justify="center">
+                <Col>
+                    <Button
+                        type="primary"
+                        size="large"
+                        onClick={generateAccount}
+                        loading={!!loading}
+                    >
+                        Generate
+                    </Button>
+                </Col>
+                <Col offset="1">
+                    <Button  size="large" onClick={clear}>
+                        Clear
+                    </Button>
+                </Col>
+            </Row>
+            {account && (
+                <Form {...layout}>
+                    <Divider />
+                    <Form.Item label="Private Key" colon={false}>
+                        <Input
+                            size="large"
+                            placeholder="Private Key"
+                            value={privateKey()}
+                            addonAfter={<CopyButton data={privateKey()} />}
+                            disabled
+                        />
+                    </Form.Item>
+                    <Form.Item label="View Key" colon={false}>
+                        <Input
+                            size="large"
+                            placeholder="View Key"
+                            value={viewKey()}
+                            addonAfter={<CopyButton data={viewKey()} />}
+                            disabled
+                        />
+                    </Form.Item>
+                    <Form.Item label="Address" colon={false}>
+                        <Input
+                            size="large"
+                            placeholder="Address"
+                            value={address()}
+                            addonAfter={<CopyButton data={address()} />}
+                            disabled
+                        />
+                    </Form.Item>
+                </Form>
+            )}
+        </Card>
+    );
 };

From d4b99860420a452a7d289332920d82bb6f34f34b Mon Sep 17 00:00:00 2001
From: clean99 <xff9924@gmail.com>
Date: Mon, 26 Feb 2024 15:45:22 +0800
Subject: [PATCH 2/5] refactor: use correct loading state and remove set
 timeout

---
 website/src/tabs/account/NewAccount.jsx | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/website/src/tabs/account/NewAccount.jsx b/website/src/tabs/account/NewAccount.jsx
index 651070166..d8ee2f4ab 100644
--- a/website/src/tabs/account/NewAccount.jsx
+++ b/website/src/tabs/account/NewAccount.jsx
@@ -5,15 +5,12 @@ import { useAleoWASM } from "../../aleo-wasm-hook";
 
 export const NewAccount = () => {
     const [account, setAccount] = useState(null);
-    const [loading, setLoading] = useState(false);
-    const [aleo] = useAleoWASM();
+    const [aleo, loading] = useAleoWASM();
 
     const generateAccount = async () => {
-        setLoading(true);
-        setTimeout(() => {
-            setAccount(new aleo.PrivateKey());
-            setLoading(false);
-        }, 25);
+        // when user are able to see button, it means aleo is already loaded
+        console.log(aleo);
+        setAccount(new aleo.PrivateKey());
     };
 
     const clear = () => {
@@ -28,7 +25,7 @@ export const NewAccount = () => {
 
     const layout = { labelCol: { span: 3 }, wrapperCol: { span: 21 } };
 
-    if (!aleo) {
+    if (loading) {
         return (
             <h3>
                 <center>Loading...</center>

From 92fc59f6b5f6b5141a585f0cb3eafa2725573798 Mon Sep 17 00:00:00 2001
From: clean99 <xff9924@gmail.com>
Date: Mon, 26 Feb 2024 15:46:22 +0800
Subject: [PATCH 3/5] remove log

---
 website/src/tabs/account/NewAccount.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/website/src/tabs/account/NewAccount.jsx b/website/src/tabs/account/NewAccount.jsx
index d8ee2f4ab..3f22e1530 100644
--- a/website/src/tabs/account/NewAccount.jsx
+++ b/website/src/tabs/account/NewAccount.jsx
@@ -9,7 +9,6 @@ export const NewAccount = () => {
 
     const generateAccount = async () => {
         // when user are able to see button, it means aleo is already loaded
-        console.log(aleo);
         setAccount(new aleo.PrivateKey());
     };
 

From c3456a8f75cbc9b880c22ea86fa9fc7ee19daf09 Mon Sep 17 00:00:00 2001
From: clean99 <xff9924@gmail.com>
Date: Mon, 26 Feb 2024 15:51:12 +0800
Subject: [PATCH 4/5] refactor: remove useless function call move to correct
 place

---
 website/src/tabs/account/NewAccount.jsx | 26 ++++++++++++-------------
 1 file changed, 12 insertions(+), 14 deletions(-)

diff --git a/website/src/tabs/account/NewAccount.jsx b/website/src/tabs/account/NewAccount.jsx
index 3f22e1530..3d8a68ce1 100644
--- a/website/src/tabs/account/NewAccount.jsx
+++ b/website/src/tabs/account/NewAccount.jsx
@@ -6,6 +6,12 @@ import { useAleoWASM } from "../../aleo-wasm-hook";
 export const NewAccount = () => {
     const [account, setAccount] = useState(null);
     const [aleo, loading] = useAleoWASM();
+    const isExistAccount = account !== null;
+    const privateKey = isExistAccount ? account.to_string() : "";
+    const viewKey = isExistAccount ? account.to_view_key().to_string() : "";
+    const address = isExistAccount ? account.to_address().to_string() : "";
+
+    const layout = { labelCol: { span: 3 }, wrapperCol: { span: 21 } };
 
     const generateAccount = async () => {
         // when user are able to see button, it means aleo is already loaded
@@ -16,14 +22,6 @@ export const NewAccount = () => {
         setAccount(null);
     };
 
-    const privateKey = () => (account !== null ? account.to_string() : "");
-    const viewKey = () =>
-        account !== null ? account.to_view_key().to_string() : "";
-    const address = () =>
-        account !== null ? account.to_address().to_string() : "";
-
-    const layout = { labelCol: { span: 3 }, wrapperCol: { span: 21 } };
-
     if (loading) {
         return (
             <h3>
@@ -61,8 +59,8 @@ export const NewAccount = () => {
                         <Input
                             size="large"
                             placeholder="Private Key"
-                            value={privateKey()}
-                            addonAfter={<CopyButton data={privateKey()} />}
+                            value={privateKey}
+                            addonAfter={<CopyButton data={privateKey} />}
                             disabled
                         />
                     </Form.Item>
@@ -70,8 +68,8 @@ export const NewAccount = () => {
                         <Input
                             size="large"
                             placeholder="View Key"
-                            value={viewKey()}
-                            addonAfter={<CopyButton data={viewKey()} />}
+                            value={viewKey}
+                            addonAfter={<CopyButton data={viewKey} />}
                             disabled
                         />
                     </Form.Item>
@@ -79,8 +77,8 @@ export const NewAccount = () => {
                         <Input
                             size="large"
                             placeholder="Address"
-                            value={address()}
-                            addonAfter={<CopyButton data={address()} />}
+                            value={address}
+                            addonAfter={<CopyButton data={address} />}
                             disabled
                         />
                     </Form.Item>

From 9f0702bf45b2d15030b9127354cc8daf1aca50df Mon Sep 17 00:00:00 2001
From: clean99 <xff9924@gmail.com>
Date: Mon, 26 Feb 2024 15:52:14 +0800
Subject: [PATCH 5/5] remove async

---
 website/src/tabs/account/NewAccount.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/src/tabs/account/NewAccount.jsx b/website/src/tabs/account/NewAccount.jsx
index 3d8a68ce1..e7100762a 100644
--- a/website/src/tabs/account/NewAccount.jsx
+++ b/website/src/tabs/account/NewAccount.jsx
@@ -13,7 +13,7 @@ export const NewAccount = () => {
 
     const layout = { labelCol: { span: 3 }, wrapperCol: { span: 21 } };
 
-    const generateAccount = async () => {
+    const generateAccount = () => {
         // when user are able to see button, it means aleo is already loaded
         setAccount(new aleo.PrivateKey());
     };