refactor account page

atosystem · Jun 26, 2021 · cebdded · cebdded
1 parent 2c5416b
commit cebdded
Show file tree

Hide file tree

Showing 2 changed files with 108 additions and 9 deletions.
diff --git a/music-dapp/package.json b/music-dapp/package.json
@@ -1,6 +1,7 @@
 {
   "dependencies": {
     "@material-ui/core": "^4.11.4",
-    "prettier": "^2.3.1"
+    "prettier": "^2.3.1",
+    "react-helmet": "^6.1.0"
   }
 }
diff --git a/music-dapp/react/src/AccountPage.js b/music-dapp/react/src/AccountPage.js
@@ -14,6 +14,7 @@ import {
   Button,
 } from "@material-ui/core";
 
+
 const useStyles = makeStyles((theme) => ({
   container: {
     paddingTop: theme.spacing(5),
@@ -43,12 +44,15 @@ const AccountPage = (props) => {
   const [userBoughtSongs, setUserBoughtSongs] = useState([]);
   const [isPendingUploadSongs, setIsPendingUploadSongs] = useState(true);
   const [isPendingBoughtSongs, setIsPendingBoughtSongs] = useState(true);
+  const [sellTokenNumber, setSellTokenNumber] = useState(0);
 
   // from props
   const web3 = props.web3;
   const accounts = props.accounts;
   const contract = props.contract;
   const setPage = props.setPage;
+  // for alert msg
+  const callAlert = props.callAlert;
 
   useEffect(() => {
     setPage("Account");
@@ -116,52 +120,146 @@ const AccountPage = (props) => {
     return result;
   };
 
-  const buyToken = async () => {
+  const buy100Token = async () => {
     const result = await contract.methods
       .buy()
       .send({ from: accounts[0], value: web3.utils.toWei("0.01", "ether") });
     console.log(result);
     getUserBalance();
   };
 
+  const buy1000Token = async () => {
+    const result = await contract.methods
+      .buy()
+      .send({ from: accounts[0], value: web3.utils.toWei("0.1", "ether") });
+    console.log(result);
+    getUserBalance();
+  };
+
+  const buy10000Token = async () => {
+    const result = await contract.methods
+      .buy()
+      .send({ from: accounts[0], value: web3.utils.toWei("1", "ether") });
+    console.log(result);
+    getUserBalance();
+  };
+
   const sellToken = async () => {
-    const result = await contract.methods.sell(100).send({ from: accounts[0] });
+    const balance = parseInt(userBalance);
+    const sellNumber = parseInt(sellTokenNumber);
+    if (balance < sellNumber) {
+      console.log("not enough!")
+      return ;
+    }
+    const result = await contract.methods.sell(sellNumber).send({ from: accounts[0] });
     console.log(result);
     getUserBalance();
+    setSellTokenNumber(0);
   };
 
   return (
     <Container maxWidth="lg" className={classes.container}>
       <Grid container spacing={3}>
-        <Grid item xs={12}>
+        <Grid item xs={12} md={4} lg={6}>
           <Paper className={classes.paper}>
             <Typography
               component="h2"
               variant="h6"
               gutterBottom
               style={{ color: "white", fontSize: 20 }}
             >
+              User Info
+              <p></p>
               Balance: {userBalance}
+              <p></p>
+              Uploaded Songs: {userUploadSongs.length}
+              <p></p>
+              Bought Songs: {userBoughtSongs.length}
+            </Typography>
+          </Paper>
+        </Grid>
+        <Grid item xs={12} md={4} lg={6}>
+          <Paper className={classes.paper}>
+            <Typography
+              component="h2"
+              variant="h6"
+              gutterBottom
+              style={{ color: "white", fontSize: 20 }}
+            >
+              Buy
             </Typography>
             <Button
               variant="contained"
               onClick={() => {
-                buyToken();
+                buy100Token();
               }}
             >
-              Buy $100
+              Buy 100 Tokens
             </Button>
+            <p></p>
+            <Button
+              variant="contained"
+              onClick={() => {
+                buy1000Token();
+              }}
+            >
+              Buy 1000 Tokens
+            </Button>
+            <p></p>
+            <Button
+              variant="contained"
+              onClick={() => {
+                buy10000Token();
+              }}
+            >
+              Buy 10000 Tokens
+            </Button>
+          </Paper>
+        </Grid>
+        <Grid item xs={12} md={4} lg={6}>
+          <Paper className={fixedHeightPaper}>
+            <Typography
+              component="h2"
+              variant="h6"
+              gutterBottom
+              style={{ color: "white", fontSize: 20 }}
+            >
+              Sell 
+            </Typography>
+            <TextField
+                  id="name-textfield"
+                  label="Token"
+                  placeholder="Type token to sell..."
+                  multiline
+                  variant="outlined"
+                  size="small"
+                  value={sellTokenNumber}
+                  onChange={(event) => {
+                    setSellTokenNumber(event.target.value);
+                  }}
+            />
+            <p></p>
             <Button
               variant="contained"
               onClick={() => {
                 sellToken();
               }}
             >
-              Sell
+              Sell Token
             </Button>
+            <p></p>
+            <Typography
+              component="h2"
+              variant="h6"
+              gutterBottom
+              style={{ color: "orange", fontSize: 20 }}
+            >
+              {parseInt(userBalance) < parseInt(sellTokenNumber) ? "No enough balance" : ""}
+            </Typography>
           </Paper>
         </Grid>
-        <Grid item xs={12} md={8} lg={6}>
+
+        <Grid item xs={12} md={6} lg={6}>
           <Paper className={fixedHeightPaper}>
             <Typography
               component="h2"
@@ -179,7 +277,7 @@ const AccountPage = (props) => {
           </Paper>
         </Grid>
 
-        <Grid item xs={12} md={4} lg={6}>
+        <Grid item xs={12} md={6} lg={6}>
           <Paper className={fixedHeightPaper}>
             <Typography
               component="h2"