Update Farm.js (#552)

* Update Farm.js * add "My Stakes Only", one week initial display, filter network error messages, add explanation of LP bridges * clean up polling intervals and wording
omgnetwork · Oct 3, 2021 · b93fec3 · b93fec3
1 parent 5e9a902
commit b93fec3
Show file tree

Hide file tree

Showing 11 changed files with 179 additions and 130 deletions.
diff --git a/packages/omgx/wallet-frontend/.env.example b/packages/omgx/wallet-frontend/.env.example
@@ -1,6 +1,6 @@
 REACT_APP_INFURA_ID=
 REACT_APP_ETHERSCAN_API=
-REACT_APP_POLL_INTERVAL=20000
+REACT_APP_POLL_INTERVAL=15000
 SKIP_PREFLIGHT_CHECK=true
 REACT_APP_WALLET_VERSION=1.0.10
 REACT_APP_ENV=dev
diff --git a/packages/omgx/wallet-frontend/src/actions/createAction.js b/packages/omgx/wallet-frontend/src/actions/createAction.js
@@ -31,15 +31,24 @@ export function createAction (key, asyncAction) {
         dispatch({ type: `${key}/ERROR` })
         return false
       }
-      dispatch({ type: `${key}/SUCCESS`, payload: response });
-      return true;
+      dispatch({ type: `${key}/SUCCESS`, payload: response })
+      return true
     } catch (error) {
+      console.log("Error RAW:", {error})
+      if(error.message.includes('NETWORK_ERROR')) {
+        console.log("Internet down")
+        return false
+      }
+      if(error.message.includes('Network Error')) {
+        console.log("Internet down")
+        return false
+      }
       const errorMessage = networkService.handleMetaMaskError(error.code) ?? error.message;
       dispatch({ type: `UI/ERROR/UPDATE`, payload: errorMessage })
       // cancel request loading state
       dispatch({ type: `${key}/ERROR` })
       console.log("createAction error:", error)
-      return false;
+      return false
     }
-  };
+  }
 }
diff --git a/packages/omgx/wallet-frontend/src/components/listFarm/listFarm.js b/packages/omgx/wallet-frontend/src/components/listFarm/listFarm.js
@@ -31,7 +31,8 @@ class ListFarm extends React.Component {
       userInfo,
       L1orL2Pool,
       balance,
-      showAll
+      showAll,
+      showStakes
     } = this.props;
 
     this.state = {
@@ -41,6 +42,7 @@ class ListFarm extends React.Component {
       poolInfo,
       userInfo,
       showAll,
+      showStakes,
       //drop down box
       dropDownBox: false,
       dropDownBoxInit: true,
@@ -51,7 +53,7 @@ class ListFarm extends React.Component {
 
   componentDidUpdate(prevState) {
 
-    const { poolInfo, userInfo, balance, showAll } = this.props;
+    const { poolInfo, userInfo, balance, showAll, showStakes } = this.props;
 
     if (!isEqual(prevState.poolInfo, poolInfo)) {
       this.setState({ poolInfo });
@@ -69,6 +71,10 @@ class ListFarm extends React.Component {
       this.setState({ showAll });
     }
 
+    if (!isEqual(prevState.showStakes, showStakes)) {
+      this.setState({ showStakes });
+    }
+
   }
 
   handleStakeToken() {
@@ -146,7 +152,7 @@ class ListFarm extends React.Component {
 
     const {
       poolInfo, userInfo,
-      dropDownBox, showAll,
+      dropDownBox, showAll, showStakes,
       loading, L1orL2Pool
     } = this.state;
 
@@ -185,6 +191,12 @@ class ListFarm extends React.Component {
       }
     }
 
+    if(!showStakes) {
+      if(!Number(logAmount(userInfo.amount, decimals, 2))) {
+        return null;
+      }
+    }
+
     let enableReward = false
     if( Number(logAmount(userReward, decimals, 3)) >= 0.001 ) {
       enableReward = true

diff --git a/packages/omgx/wallet-frontend/src/containers/account/Account.js b/packages/omgx/wallet-frontend/src/containers/account/Account.js
@@ -44,7 +44,7 @@ import NetworkSwitcherIcon from 'components/icons/NetworkSwitcherIcon'
 import PendingTransaction from './PendingTransaction'
 import useInterval from 'util/useInterval'
 
-const POLL_INTERVAL = 2000; //milliseconds
+import { POLL_INTERVAL } from 'util/constant'
 
 function Account () {
 
@@ -123,7 +123,7 @@ function Account () {
     batch(() => {
       dispatch(fetchTransactions())
     })
-  }, POLL_INTERVAL * 2)
+  }, POLL_INTERVAL)
 
   const theme = useTheme()
   const isMobile = useMediaQuery(theme.breakpoints.down('md'))

diff --git a/packages/omgx/wallet-frontend/src/containers/farm/Farm.js b/packages/omgx/wallet-frontend/src/containers/farm/Farm.js
@@ -28,10 +28,11 @@ import AlertIcon from 'components/icons/AlertIcon'
 import networkService from 'services/networkService'
 
 import * as S from './Farm.styles'
-import { Box, FormControlLabel, Checkbox } from '@material-ui/core';
-import PageHeader from 'components/pageHeader/PageHeader';
-import { tableHeadList } from './tableHeadList';
-import LayerSwitcher from 'components/mainMenu/layerSwitcher/LayerSwitcher';
+import { Box, FormControlLabel, Checkbox, Typography, Fade, Grid } from '@material-ui/core'
+import PageHeader from 'components/pageHeader/PageHeader'
+import { tableHeadList } from './tableHeadList'
+import LayerSwitcher from 'components/mainMenu/layerSwitcher/LayerSwitcher'
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore'
 
 class Farm extends React.Component {
 
@@ -69,7 +70,10 @@ class Farm extends React.Component {
       layer2,
       lpChoice: initialLayer,
       poolTab: initialViewLayer,
-      showMDO: false //MDO = my deposits only
+      showMDO: false, //MDO = my deposits only
+      showMSO: false, //MSO = my stakes only
+      dropDownBox: false,
+      dropDownBoxInit: true
     }
 
   }
@@ -174,6 +178,12 @@ class Farm extends React.Component {
     })
   }
 
+  handleCheckBoxStakes = (e) =>{
+    this.setState({
+      showMSO: e.target.checked
+    })
+  }
+
   render() {
     const {
       // Pool
@@ -182,7 +192,9 @@ class Farm extends React.Component {
       userInfo,
       lpChoice,
       poolTab,
-      showMDO
+      showMDO,
+      showMSO,
+      dropDownBox,
     } = this.state
 
     const { isMobile } = this.props
@@ -193,6 +205,64 @@ class Farm extends React.Component {
       <>
         <PageHeader title="Earn" />
 
+      <S.Wrapper dropDownBox={dropDownBox}>
+
+          <Grid container spacing={2} direction="row" justifyContent="left" alignItems="center" >
+
+            <S.GridItemTag item xs={10} md={10}>
+              <Typography variant="body2" sx={{mt: 2, fontSize: '0.8em'}}>
+                The supply of tokens in the pools reflects the staking and bridging activities of all users.
+                {' '}<span style={{fontWeight: '700'}}>LIQUIDITY</span> denotes the funds staked by liquidity providers, while the 
+                {' '}<span style={{fontWeight: '700'}}>BALANCE</span> refers to the amount of funds currently in each pool.
+              </Typography>
+            </S.GridItemTag>
+
+            <S.GridItemTag 
+              item 
+              xs={2} 
+              md={2}
+              onClick={()=>{this.setState({ dropDownBox: !dropDownBox, dropDownBoxInit: false })}}
+              sx={{color: "#0ebf9a"}}
+            >
+              Learn More
+              <Box sx={{display: 'flex', cursor: 'pointer', transform: dropDownBox ? "rotate(-180deg)" : ""}}>
+                <ExpandMoreIcon />
+              </Box>
+            </S.GridItemTag>
+          </Grid>
+
+        {/*********************************************/
+        /**************  Drop Down Box ****************/
+        /**********************************************/
+        }
+        {dropDownBox ? (
+          <Fade in={dropDownBox}>
+            <S.DropdownContent>
+              <S.DropdownWrapper>
+                <Typography variant="body2" sx={{mt: 1, fontSize: '0.7em'}}>
+                  <span style={{fontWeight: '700'}}>Staking example</span>. When you stake 10 OMG into the L2 pool, then the pool's liquidity and balance both increase by 10 OMG. 
+                  <br/><br/>
+                  <span style={{fontWeight: '700'}}>Fast Bridge example</span>. When a user bridges 10 OMG from L1 to L2 using the fast bridge,  
+                  they send 10 OMG to the L1 pool, increasing its balance by 10 OMG. Next, 9.99 OMG flow out from the L2 pool to the user's L2 wallet, completing the bridge. 
+                  Note that bridge operations do not change the pool's liquidity, but only its current balance. 
+                  The difference between what was deposited into the L1 pool (10 OMG) and what was sent 
+                  to the user on the L2 (9.99 OMG), equal to 0.01 OMG, is sent to the reward pool, for later harvesting by liquidity providers. 
+                  <br/><br/>
+                  <span style={{fontWeight: '700'}}>Pool rebalancing</span>. In some circumstances, excess balances can accumulate on one chain. For example, if many people 
+                  bridge from L1 to L2, then L1 pool balances will increase, while L2 balances will decrease. In the current (v1) system, the pool operator is responsible 
+                  for pool rebalancing, when and if needed, using 'classic' deposit and exit operations to move funds from one pool to another.
+                  <br/><br/> 
+                  <span style={{fontWeight: '700'}}>Future work</span>. A more elegant approach to pool balancing is an 'automatic' 
+                  supply-and-demand approach, in which staking rewards scale inversely (and non-linearly) with pool balances. Thus, when pool balances 
+                  are very low, a spike in rewards would attract new liquidity into low-balance pools.
+                </Typography>
+              </S.DropdownWrapper>
+            </S.DropdownContent>
+          </Fade>
+        ) : null }
+
+      </S.Wrapper>
+
         <Box sx={{ my: 3, width: '100%' }}>
           <Box sx={{ mb: 2, display: 'flex' }}>
             <Tabs
@@ -207,11 +277,22 @@ class Farm extends React.Component {
                 <Checkbox
                   checked={showMDO}
                   onChange={this.handleCheckBox}
-                  name="my deposits only"
+                  name="my tokens only"
+                  color="primary"
+                />
+              }
+              label="My Tokens Only"
+            />
+            <FormControlLabel
+              control={
+                <Checkbox
+                  checked={showMSO}
+                  onChange={this.handleCheckBoxStakes}
+                  name="my stakes only"
                   color="primary"
                 />
               }
-              label="My Deposits Only"
+              label="My Stakes Only"
             />
           </Box>
 
@@ -271,6 +352,7 @@ class Farm extends React.Component {
                     decimals={ret[1]}
                     isMobile={isMobile}
                     showAll={!showMDO}
+                    showStakes={!showMSO}
                   />
                 )
               })}
@@ -290,6 +372,7 @@ class Farm extends React.Component {
                     decimals={ret[1]}
                     isMobile={isMobile}
                     showAll={!showMDO}
+                    showStakes={!showMSO}
                   />
                 )
               })}

diff --git a/packages/omgx/wallet-frontend/src/containers/farm/Farm.styles.js b/packages/omgx/wallet-frontend/src/containers/farm/Farm.styles.js
@@ -1,5 +1,5 @@
 import { styled } from '@material-ui/core/styles'
-import { Box, Typography } from "@material-ui/core";
+import { Box, Typography, Grid } from "@material-ui/core"
 
 export const TableHeading = styled(Box)(({ theme }) => ({
   padding: "20px",
@@ -51,3 +51,46 @@ export const AlertInfo = styled(Box)`
   align-items: center;
   flex: 1;
 `;
+
+export const Wrapper = styled(Box)(({ theme, ...props }) => ({
+  borderRadius: '8px',
+  background: props.dropDownBox ? theme.palette.background.dropdown : theme.palette.background.secondary,
+  [theme.breakpoints.down('md')]: {
+    padding: ' 30px 10px',
+  },
+  [theme.breakpoints.up('md')]: {
+    padding: '20px',
+  },
+}));
+
+export const GridItemTag = styled(Grid)`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`;
+
+export const DropdownWrapper = styled(Box)`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 5px;
+  width: 100%;
+  padding: 16px;
+  margin-top: 16px;
+  background-color: ${props => props.theme.palette.background.secondary};
+  border-radius: 12px;
+  text-align: left;
+`;
+
+export const DropdownContent = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  justifyContent: 'space-between',
+  [theme.breakpoints.down('md')]: {
+    flexDirection: 'column',
+    gap: '0',
+  },
+  [theme.breakpoints.up('md')]: {
+    flexDirection: 'row',
+    gap: '16px',
+  },
+}));
diff --git a/packages/omgx/wallet-frontend/src/containers/home/Home.js b/packages/omgx/wallet-frontend/src/containers/home/Home.js
@@ -73,7 +73,7 @@ import FarmWrapper from 'containers/farm/FarmWrapper'
 
 import Alert from 'components/alert/Alert'
 
-const POLL_INTERVAL = 5000 //milliseconds
+import { POLL_INTERVAL } from 'util/constant'
 
 function Home () {
 
@@ -128,7 +128,7 @@ function Home () {
     batch(() => {
       dispatch(fetchExits())
     })
-  }, POLL_INTERVAL * 2)
+  }, POLL_INTERVAL)
 
   //get all account balances
   useInterval(() => {

diff --git a/packages/omgx/wallet-frontend/src/containers/transactions/History.js b/packages/omgx/wallet-frontend/src/containers/transactions/History.js
@@ -42,16 +42,20 @@ import useInterval from 'util/useInterval'
 import PageHeader from 'components/pageHeader/PageHeader'
 import Transactions from './Transactions'
 
-const POLL_INTERVAL = 5000; //milliseconds
+import { POLL_INTERVAL } from 'util/constant'
 
 function History() {
 
   const theme = useTheme()
   const isMobile = useMediaQuery(theme.breakpoints.down('md'));
 
   const dispatch = useDispatch()
-  const [startDate, setStartDate] = useState(new Date())
-  const [endDate, setEndDate] = useState(new Date())
+
+  const now = new Date()
+  const last_week = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 7)
+
+  const [startDate, setStartDate] = useState(last_week)
+  const [endDate, setEndDate] = useState(now)
 
   const [searchHistory, setSearchHistory] = useState('')
 
@@ -73,7 +77,7 @@ function History() {
     batch(() => {
       dispatch(fetchTransactions());
     });
-  }, POLL_INTERVAL * 2);
+  }, POLL_INTERVAL);
 
   console.log(startDate)
   console.log(endDate)