Skip to content
This repository was archived by the owner on Dec 5, 2021. It is now read-only.

Commit b93fec3

Browse files
CAPtheoremCAPtheorem
authored
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
1 parent 5e9a902 commit b93fec3

11 files changed

Lines changed: 179 additions & 130 deletions

File tree

‎packages/omgx/wallet-frontend/.env.example‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
REACT_APP_INFURA_ID=
22
REACT_APP_ETHERSCAN_API=
3-
REACT_APP_POLL_INTERVAL=20000
3+
REACT_APP_POLL_INTERVAL=15000
44
SKIP_PREFLIGHT_CHECK=true
55
REACT_APP_WALLET_VERSION=1.0.10
66
REACT_APP_ENV=dev

‎packages/omgx/wallet-frontend/src/actions/createAction.js‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -31,15 +31,24 @@ export function createAction (key, asyncAction) {
3131
dispatch({ type: `${key}/ERROR` })
3232
return false
3333
}
34-
dispatch({ type: `${key}/SUCCESS`, payload: response });
35-
return true;
34+
dispatch({ type: `${key}/SUCCESS`, payload: response })
35+
return true
3636
} catch (error) {
37+
console.log("Error RAW:", {error})
38+
if(error.message.includes('NETWORK_ERROR')) {
39+
console.log("Internet down")
40+
return false
41+
}
42+
if(error.message.includes('Network Error')) {
43+
console.log("Internet down")
44+
return false
45+
}
3746
const errorMessage = networkService.handleMetaMaskError(error.code) ?? error.message;
3847
dispatch({ type: `UI/ERROR/UPDATE`, payload: errorMessage })
3948
// cancel request loading state
4049
dispatch({ type: `${key}/ERROR` })
4150
console.log("createAction error:", error)
42-
return false;
51+
return false
4352
}
44-
};
53+
}
4554
}

‎packages/omgx/wallet-frontend/src/components/listFarm/listFarm.js‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,8 @@ class ListFarm extends React.Component {
3131
userInfo,
3232
L1orL2Pool,
3333
balance,
34-
showAll
34+
showAll,
35+
showStakes
3536
} = this.props;
3637

3738
this.state = {
@@ -41,6 +42,7 @@ class ListFarm extends React.Component {
4142
poolInfo,
4243
userInfo,
4344
showAll,
45+
showStakes,
4446
//drop down box
4547
dropDownBox: false,
4648
dropDownBoxInit: true,
@@ -51,7 +53,7 @@ class ListFarm extends React.Component {
5153

5254
componentDidUpdate(prevState) {
5355

54-
const { poolInfo, userInfo, balance, showAll } = this.props;
56+
const { poolInfo, userInfo, balance, showAll, showStakes } = this.props;
5557

5658
if (!isEqual(prevState.poolInfo, poolInfo)) {
5759
this.setState({ poolInfo });
@@ -69,6 +71,10 @@ class ListFarm extends React.Component {
6971
this.setState({ showAll });
7072
}
7173

74+
if (!isEqual(prevState.showStakes, showStakes)) {
75+
this.setState({ showStakes });
76+
}
77+
7278
}
7379

7480
handleStakeToken() {
@@ -146,7 +152,7 @@ class ListFarm extends React.Component {
146152

147153
const {
148154
poolInfo, userInfo,
149-
dropDownBox, showAll,
155+
dropDownBox, showAll, showStakes,
150156
loading, L1orL2Pool
151157
} = this.state;
152158

@@ -185,6 +191,12 @@ class ListFarm extends React.Component {
185191
}
186192
}
187193

194+
if(!showStakes) {
195+
if(!Number(logAmount(userInfo.amount, decimals, 2))) {
196+
return null;
197+
}
198+
}
199+
188200
let enableReward = false
189201
if( Number(logAmount(userReward, decimals, 3)) >= 0.001 ) {
190202
enableReward = true

‎packages/omgx/wallet-frontend/src/containers/account/Account.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ import NetworkSwitcherIcon from 'components/icons/NetworkSwitcherIcon'
4444
import PendingTransaction from './PendingTransaction'
4545
import useInterval from 'util/useInterval'
4646

47-
const POLL_INTERVAL = 2000; //milliseconds
47+
import { POLL_INTERVAL } from 'util/constant'
4848

4949
function Account () {
5050

@@ -123,7 +123,7 @@ function Account () {
123123
batch(() => {
124124
dispatch(fetchTransactions())
125125
})
126-
}, POLL_INTERVAL * 2)
126+
}, POLL_INTERVAL)
127127

128128
const theme = useTheme()
129129
const isMobile = useMediaQuery(theme.breakpoints.down('md'))

‎packages/omgx/wallet-frontend/src/containers/farm/Farm.js‎

Lines changed: 91 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,11 @@ import AlertIcon from 'components/icons/AlertIcon'
2828
import networkService from 'services/networkService'
2929

3030
import * as S from './Farm.styles'
31-
import { Box, FormControlLabel, Checkbox } from '@material-ui/core';
32-
import PageHeader from 'components/pageHeader/PageHeader';
33-
import { tableHeadList } from './tableHeadList';
34-
import LayerSwitcher from 'components/mainMenu/layerSwitcher/LayerSwitcher';
31+
import { Box, FormControlLabel, Checkbox, Typography, Fade, Grid } from '@material-ui/core'
32+
import PageHeader from 'components/pageHeader/PageHeader'
33+
import { tableHeadList } from './tableHeadList'
34+
import LayerSwitcher from 'components/mainMenu/layerSwitcher/LayerSwitcher'
35+
import ExpandMoreIcon from '@material-ui/icons/ExpandMore'
3536

3637
class Farm extends React.Component {
3738

@@ -69,7 +70,10 @@ class Farm extends React.Component {
6970
layer2,
7071
lpChoice: initialLayer,
7172
poolTab: initialViewLayer,
72-
showMDO: false //MDO = my deposits only
73+
showMDO: false, //MDO = my deposits only
74+
showMSO: false, //MSO = my stakes only
75+
dropDownBox: false,
76+
dropDownBoxInit: true
7377
}
7478

7579
}
@@ -174,6 +178,12 @@ class Farm extends React.Component {
174178
})
175179
}
176180

181+
handleCheckBoxStakes = (e) =>{
182+
this.setState({
183+
showMSO: e.target.checked
184+
})
185+
}
186+
177187
render() {
178188
const {
179189
// Pool
@@ -182,7 +192,9 @@ class Farm extends React.Component {
182192
userInfo,
183193
lpChoice,
184194
poolTab,
185-
showMDO
195+
showMDO,
196+
showMSO,
197+
dropDownBox,
186198
} = this.state
187199

188200
const { isMobile } = this.props
@@ -193,6 +205,64 @@ class Farm extends React.Component {
193205
<>
194206
<PageHeader title="Earn" />
195207

208+
<S.Wrapper dropDownBox={dropDownBox}>
209+
210+
<Grid container spacing={2} direction="row" justifyContent="left" alignItems="center" >
211+
212+
<S.GridItemTag item xs={10} md={10}>
213+
<Typography variant="body2" sx={{mt: 2, fontSize: '0.8em'}}>
214+
The supply of tokens in the pools reflects the staking and bridging activities of all users.
215+
{' '}<span style={{fontWeight: '700'}}>LIQUIDITY</span> denotes the funds staked by liquidity providers, while the
216+
{' '}<span style={{fontWeight: '700'}}>BALANCE</span> refers to the amount of funds currently in each pool.
217+
</Typography>
218+
</S.GridItemTag>
219+
220+
<S.GridItemTag
221+
item
222+
xs={2}
223+
md={2}
224+
onClick={()=>{this.setState({ dropDownBox: !dropDownBox, dropDownBoxInit: false })}}
225+
sx={{color: "#0ebf9a"}}
226+
>
227+
Learn More
228+
<Box sx={{display: 'flex', cursor: 'pointer', transform: dropDownBox ? "rotate(-180deg)" : ""}}>
229+
<ExpandMoreIcon />
230+
</Box>
231+
</S.GridItemTag>
232+
</Grid>
233+
234+
{/*********************************************/
235+
/************** Drop Down Box ****************/
236+
/**********************************************/
237+
}
238+
{dropDownBox ? (
239+
<Fade in={dropDownBox}>
240+
<S.DropdownContent>
241+
<S.DropdownWrapper>
242+
<Typography variant="body2" sx={{mt: 1, fontSize: '0.7em'}}>
243+
<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.
244+
<br/><br/>
245+
<span style={{fontWeight: '700'}}>Fast Bridge example</span>. When a user bridges 10 OMG from L1 to L2 using the fast bridge,
246+
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.
247+
Note that bridge operations do not change the pool's liquidity, but only its current balance.
248+
The difference between what was deposited into the L1 pool (10 OMG) and what was sent
249+
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.
250+
<br/><br/>
251+
<span style={{fontWeight: '700'}}>Pool rebalancing</span>. In some circumstances, excess balances can accumulate on one chain. For example, if many people
252+
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
253+
for pool rebalancing, when and if needed, using 'classic' deposit and exit operations to move funds from one pool to another.
254+
<br/><br/>
255+
<span style={{fontWeight: '700'}}>Future work</span>. A more elegant approach to pool balancing is an 'automatic'
256+
supply-and-demand approach, in which staking rewards scale inversely (and non-linearly) with pool balances. Thus, when pool balances
257+
are very low, a spike in rewards would attract new liquidity into low-balance pools.
258+
</Typography>
259+
</S.DropdownWrapper>
260+
</S.DropdownContent>
261+
</Fade>
262+
) : null }
263+
264+
</S.Wrapper>
265+
196266
<Box sx={{ my: 3, width: '100%' }}>
197267
<Box sx={{ mb: 2, display: 'flex' }}>
198268
<Tabs
@@ -207,11 +277,22 @@ class Farm extends React.Component {
207277
<Checkbox
208278
checked={showMDO}
209279
onChange={this.handleCheckBox}
210-
name="my deposits only"
280+
name="my tokens only"
281+
color="primary"
282+
/>
283+
}
284+
label="My Tokens Only"
285+
/>
286+
<FormControlLabel
287+
control={
288+
<Checkbox
289+
checked={showMSO}
290+
onChange={this.handleCheckBoxStakes}
291+
name="my stakes only"
211292
color="primary"
212293
/>
213294
}
214-
label="My Deposits Only"
295+
label="My Stakes Only"
215296
/>
216297
</Box>
217298

@@ -271,6 +352,7 @@ class Farm extends React.Component {
271352
decimals={ret[1]}
272353
isMobile={isMobile}
273354
showAll={!showMDO}
355+
showStakes={!showMSO}
274356
/>
275357
)
276358
})}
@@ -290,6 +372,7 @@ class Farm extends React.Component {
290372
decimals={ret[1]}
291373
isMobile={isMobile}
292374
showAll={!showMDO}
375+
showStakes={!showMSO}
293376
/>
294377
)
295378
})}

‎packages/omgx/wallet-frontend/src/containers/farm/Farm.styles.js‎

Lines changed: 44 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { styled } from '@material-ui/core/styles'
2-
import { Box, Typography } from "@material-ui/core";
2+
import { Box, Typography, Grid } from "@material-ui/core"
33

44
export const TableHeading = styled(Box)(({ theme }) => ({
55
padding: "20px",
@@ -51,3 +51,46 @@ export const AlertInfo = styled(Box)`
5151
align-items: center;
5252
flex: 1;
5353
`;
54+
55+
export const Wrapper = styled(Box)(({ theme, ...props }) => ({
56+
borderRadius: '8px',
57+
background: props.dropDownBox ? theme.palette.background.dropdown : theme.palette.background.secondary,
58+
[theme.breakpoints.down('md')]: {
59+
padding: ' 30px 10px',
60+
},
61+
[theme.breakpoints.up('md')]: {
62+
padding: '20px',
63+
},
64+
}));
65+
66+
export const GridItemTag = styled(Grid)`
67+
display: flex;
68+
flex-direction: row;
69+
align-items: center;
70+
`;
71+
72+
export const DropdownWrapper = styled(Box)`
73+
display: flex;
74+
align-items: center;
75+
justify-content: space-between;
76+
gap: 5px;
77+
width: 100%;
78+
padding: 16px;
79+
margin-top: 16px;
80+
background-color: ${props => props.theme.palette.background.secondary};
81+
border-radius: 12px;
82+
text-align: left;
83+
`;
84+
85+
export const DropdownContent = styled(Box)(({ theme }) => ({
86+
display: 'flex',
87+
justifyContent: 'space-between',
88+
[theme.breakpoints.down('md')]: {
89+
flexDirection: 'column',
90+
gap: '0',
91+
},
92+
[theme.breakpoints.up('md')]: {
93+
flexDirection: 'row',
94+
gap: '16px',
95+
},
96+
}));

‎packages/omgx/wallet-frontend/src/containers/home/Home.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ import FarmWrapper from 'containers/farm/FarmWrapper'
7373

7474
import Alert from 'components/alert/Alert'
7575

76-
const POLL_INTERVAL = 5000 //milliseconds
76+
import { POLL_INTERVAL } from 'util/constant'
7777

7878
function Home () {
7979

@@ -128,7 +128,7 @@ function Home () {
128128
batch(() => {
129129
dispatch(fetchExits())
130130
})
131-
}, POLL_INTERVAL * 2)
131+
}, POLL_INTERVAL)
132132

133133
//get all account balances
134134
useInterval(() => {

‎packages/omgx/wallet-frontend/src/containers/transactions/History.js‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -42,16 +42,20 @@ import useInterval from 'util/useInterval'
4242
import PageHeader from 'components/pageHeader/PageHeader'
4343
import Transactions from './Transactions'
4444

45-
const POLL_INTERVAL = 5000; //milliseconds
45+
import { POLL_INTERVAL } from 'util/constant'
4646

4747
function History() {
4848

4949
const theme = useTheme()
5050
const isMobile = useMediaQuery(theme.breakpoints.down('md'));
5151

5252
const dispatch = useDispatch()
53-
const [startDate, setStartDate] = useState(new Date())
54-
const [endDate, setEndDate] = useState(new Date())
53+
54+
const now = new Date()
55+
const last_week = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 7)
56+
57+
const [startDate, setStartDate] = useState(last_week)
58+
const [endDate, setEndDate] = useState(now)
5559

5660
const [searchHistory, setSearchHistory] = useState('')
5761

@@ -73,7 +77,7 @@ function History() {
7377
batch(() => {
7478
dispatch(fetchTransactions());
7579
});
76-
}, POLL_INTERVAL * 2);
80+
}, POLL_INTERVAL);
7781

7882
console.log(startDate)
7983
console.log(endDate)

0 commit comments

Comments
 (0)