transfer tab change to form

Author: michellewong793

website/src/tabs/develop/Transfer.jsx

@@ -1,12 +1,27 @@
 import { useState, useEffect } from "react";
-import {Button, Card, Col, Dropdown, Form, Input, Row, Result, Space, Spin, Switch} from "antd";
+import {
+    Button,
+    Card,
+    Col,
+    Select,
+    Dropdown,
+    Form,
+    Input,
+    Row,
+    Result,
+    Space,
+    Spin,
+    Switch,
+} from "antd";
 import { DownOutlined } from "@ant-design/icons";
 import axios from "axios";
 
 export const Transfer = () => {
     const [transferFeeRecord, setTransferFeeRecord] = useState(null);
     const [amountRecord, setAmountRecord] = useState(null);
-    const [transferUrl, setTransferUrl] = useState("https://api.explorer.aleo.org/v1");
+    const [transferUrl, setTransferUrl] = useState(
+        "https://api.explorer.aleo.org/v1",
+    );
     const [transferAmount, setTransferAmount] = useState("1.0");
     const [transferFee, setTransferFee] = useState("1.0");
     const [privateFee, setPrivateFee] = useState(true);
@@ -16,7 +31,7 @@ export const Transfer = () => {
     const [transferError, setTransferError] = useState(null);
     const [status, setStatus] = useState("");
     const [transactionID, setTransactionID] = useState(null);
-    const [visibility, setVisibility] = useState("private");
+    const [visibility, setVisibility] = useState("public");
     const [worker, setWorker] = useState(null);
 
     function spawnWorker() {
@@ -77,7 +92,10 @@ export const Transfer = () => {
         }
 
         let amountRecord = amountRecordString();
-        if (visibilityString() === "public" || visibilityString() === "publicToPrivate") {
+        if (
+            visibilityString() === "public" ||
+            visibilityString() === "publicToPrivate"
+        ) {
             amountRecord = undefined;
         }
 
@@ -171,36 +189,36 @@ export const Transfer = () => {
         return privateKey;
     };
 
-    const onClick = ({ key }) => {
+    const onClick = ({ value }) => {
         setTransactionID(null);
         setTransferError(null);
-        console.log("Visibility changed to: ", key);
-        setVisibility(key);
-        if (key === "public" || key === "publicToPrivate") {
+        setVisibility(value);
+        console.log("Visibility changed to: ", value);
+        if (value === "public" || value === "publicToPrivate") {
             setAmountRecord(null);
         }
     };
 
     const items = [
         {
-            label: 'private',
-            key: 'private',
+            label: "private",
+            value: "private",
         },
         {
-            label: 'privateToPublic',
-            key: 'privateToPublic',
+            label: "privateToPublic",
+            value: "privateToPublic",
         },
         {
-            label: 'public',
-            key: 'public',
+            label: "public",
+            value: "public",
         },
         {
-            label: 'publicToPrivate',
-            key: 'publicToPrivate',
+            label: "publicToPrivate",
+            value: "publicToPrivate",
         },
     ];
 
-    const layout = { labelCol: { span: 5}, wrapperCol: { span: 21 } };
+    const layout = { labelCol: { span: 5 }, wrapperCol: { span: 21 } };
     const feeString = () => (transferFee !== null ? transferFee : "");
     const amountString = () => (transferAmount !== null ? transferAmount : "");
     const recipientString = () => (recipient !== null ? recipient : "");
@@ -214,20 +232,28 @@ export const Transfer = () => {
     const transferErrorString = () =>
         transferError !== null ? transferError : "";
     const peerUrl = () => (transferUrl !== null ? transferUrl : "");
-    const visibilityString = () => (visibility !== null ? visibility : "private");
+    const visibilityString = () =>
+        visibility !== null ? visibility : "private";
 
     return (
-        <Card
-            title="Transfer"
-            style={{ width: "100%"}}
-            extra={
-            <Dropdown menu={{ items, onClick }}>
-                <a onClick={(e) => e.preventDefault()}>
-                    <Button>{visibilityString()}</Button>
-                </a>
-            </Dropdown>}
-        >
+        <Card title="Transfer" style={{ width: "100%" }} extra={<></>}>
             <Form {...layout}>
+                <div
+                    style={{
+                        display: "flex",
+                        gap: "13px",
+                        alignItems: "center",
+                        marginBottom: "10px",
+                    }}
+                >
+                    <p> Transaction Visibility </p>
+                    <Select
+                        style={{ width: "9rem" }}
+                        placeholder={visibilityString()}
+                        options={items}
+                        onChange={(item) => {setVisibility(item)}}
+                    ></Select>
+                </div>
                 <Form.Item
                     label="Recipient Address"
                     colon={false}
@@ -252,8 +278,8 @@ export const Transfer = () => {
                         value={amountString()}
                     />
                 </Form.Item>
-                {
-                    (visibilityString() === "privateToPublic" || visibilityString() === "private") &&
+                {(visibilityString() === "privateToPublic" ||
+                    visibilityString() === "private") && (
                     <Form.Item
                         label="Amount Record"
                         colon={false}
@@ -268,7 +294,7 @@ export const Transfer = () => {
                             value={amountRecordString()}
                         />
                     </Form.Item>
-                }
+                )}
                 <Form.Item label="Fee" colon={false} validateStatus={status}>
                     <Input.TextArea
                         name="Fee"
@@ -332,12 +358,7 @@ export const Transfer = () => {
                 </Form.Item>
                 <Row justify="center">
                     <Col justify="center">
-                        <Button
-                            type="primary"
-                            
-                            size="middle"
-                            onClick={transfer}
-                        >
+                        <Button type="primary" size="middle" onClick={transfer}>
                             Transfer
                         </Button>
                     </Col>