Version 0.6.0

Added asset minting (lend section from yearn.fi) Added Uniswap LP Changed navigation bar to include categories. Signed-off-by: antonnell <[email protected]>
SeaSaltyFunk · Oct 11, 2021 · efa2e43 · efa2e43
1 parent 54ce428
commit efa2e43
Show file tree

Hide file tree

Showing 34 changed files with 7,780 additions and 145 deletions.
diff --git a/components/ffMintOverview/ffOverview.js b/components/ffMintOverview/ffOverview.js
@@ -0,0 +1,179 @@
+import React, { useState, useEffect } from 'react';
+import { Paper, Grid, Typography, Button, TextField, InputAdornment, CircularProgress, Tooltip } from '@material-ui/core';
+import Skeleton from '@material-ui/lab/Skeleton';
+import BigNumber from 'bignumber.js';
+
+import LendSupplyGraph from '../../components/lendSupplyGraph';
+import LendBorrowGraph from '../../components/lendBorrowGraph';
+
+import { formatCurrency } from '../../utils';
+import classes from './ffOverview.module.css';
+
+import stores from '../../stores'
+import { LEND_UPDATED } from '../../stores/constants';
+
+export default function ffOverview() {
+
+  const [, updateState] = React.useState();
+  const forceUpdate = React.useCallback(() => updateState({}), []);
+
+  const [lendingAssets, setLendingAssets] = useState(null);
+  const [lendingSupply, setLendingSupply] = useState(null);
+  const [lendingBorrow, setLendingBorrow] = useState(null);
+  const [lendingBorrowLimit, setLendingBorrowLimit] = useState(null);
+  const [lendingSupplyAPY, setLendingSupplyAPY] = useState(null);
+  const [lendingBorrowAPY, setLendingBorrowAPY] = useState(null);
+  const [position, setPosition] = useState([]);
+
+  useEffect(function () {
+    const lendingUpdated = () => {
+      setLendingAssets(stores.lendStore.getStore('lendingAssets'));
+      setLendingSupply(stores.lendStore.getStore('lendingSupply'));
+      setLendingBorrow(stores.lendStore.getStore('lendingBorrow'));
+      setLendingSupplyAPY(stores.lendStore.getStore('lendingSupplyAPY'));
+      setLendingBorrowAPY(stores.lendStore.getStore('lendingBorrowAPY'));
+      setLendingBorrowLimit(stores.lendStore.getStore('lendingBorrowLimit'));
+      setPosition(stores.lendStore.getStore('position'))
+
+      forceUpdate()
+    };
+
+    stores.emitter.on(LEND_UPDATED, lendingUpdated);
+
+    lendingUpdated()
+
+    return () => {
+      stores.emitter.removeListener(LEND_UPDATED, lendingUpdated);
+    };
+  }, []);
+
+  const filterSupplied = (a) => {
+    return BigNumber(a.supplyBalance).gt(0);
+  };
+
+  const filterBorrowed = (a) => {
+    return BigNumber(a.borrowBalance).gt(0);
+  };
+
+  const sortSupply = (a, b) => {
+    if (BigNumber(a.supplyBalance).gt(b.supplyBalance)) {
+      return -1;
+    } else if (BigNumber(a.supplyBalance).lt(b.supplyBalance)) {
+      return 1;
+    } else if (BigNumber(a.tokenMetadata.balance).gt(b.tokenMetadata.balance)) {
+      return -1;
+    } else if (BigNumber(a.tokenMetadata.balance).lt(b.tokenMetadata.balance)) {
+      return 1;
+    } else {
+      return 0;
+    }
+  };
+
+  const sortBorrow = (a, b) => {
+    if (BigNumber(a.borrowBalance).gt(b.borrowBalance)) {
+      return -1;
+    } else if (BigNumber(a.borrowBalance).lt(b.borrowBalance)) {
+      return 1;
+    } else if (BigNumber(a.tokenMetadata.balance).gt(b.tokenMetadata.balance)) {
+      return -1;
+    } else if (BigNumber(a.tokenMetadata.balance).lt(b.tokenMetadata.balance)) {
+      return 1;
+    } else {
+      return 0;
+    }
+  };
+
+  const supplyAssets = lendingAssets ? lendingAssets.filter(filterSupplied).sort(sortSupply) : [];
+  const borrowAssets = lendingAssets ? lendingAssets.filter(filterBorrowed).sort(sortBorrow) : [];
+
+  const renderSupplyTootip = () => {
+    return (
+      <div className={classes.tooltipContainer}>
+        {supplyAssets.map((asset) => {
+          return (
+            <div className={classes.tooltipValue}>
+              <Typography className={classes.val}>{asset.tokenMetadata.symbol}</Typography>
+              <Typography className={classes.valBold}>{formatCurrency(asset.supplyAPY)}%</Typography>
+            </div>
+          );
+        })}
+      </div>
+    );
+  };
+
+  const renderBorrowTooltip = () => {
+    return (
+      <div className={classes.tooltipContainer}>
+        {borrowAssets.map((asset) => {
+          return (
+            <div className={classes.tooltipValue}>
+              <Typography className={classes.val}>{asset.tokenMetadata.symbol}</Typography>
+              <Typography className={classes.valBold}>{formatCurrency(asset.borrowAPY)}%</Typography>
+            </div>
+          );
+        })}
+      </div>
+    );
+  };
+
+  return (
+    <div className={ classes.container }>
+      <div className={ classes.fieldsContainer }>
+        <Grid container spacing={3}>
+          <Grid item xs={12} sm={4}>
+            <div className={classes.overviewCard}>
+              <LendSupplyGraph assets={supplyAssets} />
+              <div>
+                <Typography className={ classes.title }>Total Supplied</Typography>
+                <Typography className={ classes.value }>
+                  {lendingSupply === null ? (
+                    <Skeleton style={{ minWidth: '200px ' }} />
+                  ) : (
+                    `$ ${formatCurrency(position && position.length >= 3 ? position[0] / 1000000 : 0)}`
+                  )}
+                </Typography>
+                <Tooltip title={renderSupplyTootip()}>
+                  <Typography className={ classes.subValue }>{!lendingSupplyAPY ? <Skeleton style={{ minWidth: '200px ' }} /> : `${formatCurrency(lendingSupplyAPY)} % Average APY`}</Typography>
+                </Tooltip>
+              </div>
+            </div>
+          </Grid>
+          <Grid item xs={12} sm={4}>
+            <div className={classes.overviewCard}>
+              <Tooltip title="View transaction">
+                <LendBorrowGraph assets={borrowAssets} />
+              </Tooltip>
+              <div>
+                <Typography className={ classes.title }>Total Borrowed</Typography>
+                <Typography className={ classes.value }>
+                  {lendingBorrow === null ? (
+                    <Skeleton style={{ minWidth: '200px ' }} />
+                  ) : (
+                    `$ ${formatCurrency(position && position.length >= 3 ? position[1] / 1000000 : 0)}`
+                  )}
+                </Typography>
+                <Tooltip title={renderBorrowTooltip()}>
+                  <Typography className={ classes.subValue }>{!lendingBorrowAPY ? <Skeleton style={{ minWidth: '200px ' }} /> : `${formatCurrency(lendingBorrowAPY)} % Average APY`}</Typography>
+                </Tooltip>
+              </div>
+            </div>
+          </Grid>
+          <Grid item xs={12} sm={4}>
+            <div className={classes.overviewCard}>
+              <div>
+                <Typography className={ classes.title }>Borrow Limit Used</Typography>
+                <Typography className={ classes.value }>
+                  {lendingBorrowLimit === null ? (
+                    <Skeleton style={{ minWidth: '200px ' }} />
+                  ) : (
+                    `${formatCurrency(position && position.length >= 3 ? position[3] / 100 : 0)} %`
+                  )}
+                </Typography>
+              </div>
+            </div>
+          </Grid>
+        </Grid>
+      </div>
+    </div>
+  );
+}
diff --git a/components/ffMintOverview/ffOverview.module.css b/components/ffMintOverview/ffOverview.module.css
@@ -0,0 +1,89 @@
+.container {
+  width: 100%;
+  background-image: linear-gradient(0deg ,#1c46f5 0,#0005d3);
+  padding: 0px 24px;
+}
+
+.fieldsContainer {
+  max-width: 1356px;
+  display: flex;
+  margin: 0 auto;
+  padding: 48px 0px 140px 0px;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 270px;
+}
+
+.field {
+  display: flex;
+}
+
+.title {
+  background: rgba(256, 256, 256, 0.2);
+  border-radius: 30px;
+  padding: 4px 20px;
+  width: fit-content;
+  color: #fff !important;
+  font-size: 14px !important;
+}
+
+.value {
+  font-size: 40px !important;
+  font-weight: bold !important;
+  color: #fff !important;
+}
+
+.subValue {
+  color: #fff !important;
+}
+
+.inline {
+  display: flex;
+  align-items: flex-end;
+}
+
+.valueSymbol {
+  font-size: 20px !important;
+  font-weight: bold !important;
+  color: #fff !important;
+  margin-bottom: 4px !important;
+  margin-left: 3px !important;
+}
+
+.balanceIcon {
+  color: #fff;
+  border: 1px solid rgba(255,255,255,0.2);
+  border-radius: 50%;
+  padding: 16px;
+  font-size: 70px !important;
+  margin-right: 24px !important;
+}
+
+.overviewCard {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  flex: 1;
+}
+
+.tooltipContainer {
+  min-width: 200px;
+}
+
+.tooltipValue {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  padding-top: 6px;
+  padding-bottom: 6px;
+}
+
+.val {
+  flex: 1;
+}
+
+.valBold {
+  flex: 1;
+  font-weight: bold !important;
+}
diff --git a/components/ffMintOverview/package.json b/components/ffMintOverview/package.json
@@ -0,0 +1,3 @@
+{
+  "main": "ffOverview.js"
+}
diff --git a/components/header/header.module.css b/components/header/header.module.css
@@ -8,7 +8,7 @@
   position: fixed;
   top: 0;
   z-index: 10;
-  width: calc(100% - 170px);
+  width: calc(100% - 210px);
   border: 0;
   border-radius: 0 !important;
   border-bottom: 1px solid rgba(128, 128, 128, 0.2) !important;

diff --git a/components/layout/layout.module.css b/components/layout/layout.module.css
@@ -10,7 +10,7 @@
   flex: 1;
   min-height: 100vh;
   height: 100%;
-  margin-left: 170px;
+  margin-left: 210px;
 }
 
 @media screen and (max-width: 1200px) {