Stake page stubbed

Signed-off-by: antonnell <[email protected]>

components/ffClaim/ffClaim.js

@@ -32,7 +32,7 @@ export default function ffClaim({ asset }) {
 
   return (
     <div className={ classes.container}>
-      <Typography variant="h5" className={ classes.title}>LP Opportunities</Typography>
+      <Typography variant="h5" className={ classes.title}>Claimable Rewards</Typography>
       <Paper elevation={0} className={ classes.lpOptionsContainer }>
         <div className={ classes.lpOption } onClick={ () => { claim() } }>
           <div className={ classes.lpOptionTitle }>

components/ffStake/ffStake.js

@@ -0,0 +1,113 @@
+import React, { useState, useEffect } from 'react';
+import { Paper, Typography, Button, TextField, InputAdornment, CircularProgress, RadioGroup, Radio, FormControlLabel } from '@material-ui/core';
+import Autocomplete from '@material-ui/lab/Autocomplete';
+import BigNumber from 'bignumber.js';
+import Skeleton from '@material-ui/lab/Skeleton';
+import moment from 'moment';
+import { formatCurrency } from '../../utils';
+import classes from './ffStake.module.css';
+import stores from '../../stores'
+import { FIXED_FOREX_UPDATED, IBEUR_ADDRESS } from '../../stores/constants';
+import AttachMoneyIcon from '@material-ui/icons/AttachMoney';
+
+export default function ffStake() {
+
+  const [ ibEURSLP, setIBEURSLP] = useState(null)
+
+  const [ amount, setAmount ] = useState('');
+  const [ amountError, setAmountError ] = useState(false);
+
+  useEffect(() => {
+    const forexUpdated = () => {
+      const asset = stores.fixedForexStore.getAsset(IBEUR_ADDRESS)
+      setIBEURSLP(asset)
+    }
+
+    const asset = stores.fixedForexStore.getAsset(IBEUR_ADDRESS)
+    setIBEURSLP(asset)
+
+    stores.emitter.on(FIXED_FOREX_UPDATED, forexUpdated);
+    return () => {
+      stores.emitter.removeListener(FIXED_FOREX_UPDATED, forexUpdated);
+    };
+  }, []);
+
+  const onAmountChanged = (newVal) => {
+    setAmount(newVal)
+  }
+
+  const setAmountPercent = (percent) => {
+    setAmount(BigNumber(ibEURSLP.balance).times(percent).div(100).toFixed(ibEURSLP.decimals));
+  }
+
+  return (
+    <Paper elevation={0} className={ classes.container }>
+      <div className={ classes.inputsContainer }>
+
+        <div className={classes.textField}>
+          <div className={classes.inputTitleContainer}>
+            <div className={classes.inputTitle}>
+              <Typography variant="h5" className={ classes.inputTitleText }>
+                Stake Amount:
+              </Typography>
+            </div>
+            <div className={classes.balances}>
+              <Typography
+                variant="h5"
+                onClick={() => {
+                  setAmountPercent(100);
+                }}
+                className={classes.value}
+                noWrap
+              >
+                Balance: {formatCurrency(ibEURSLP ? ibEURSLP.balance : 0)}
+              </Typography>
+            </div>
+          </div>
+          <TextField
+            variant="outlined"
+            fullWidth
+            placeholder="0.00"
+            value={amount}
+            error={amountError}
+            onChange={(e) => {
+              setAmount(e.target.value);
+            }}
+            InputProps={{
+              startAdornment: (
+                <InputAdornment position="start">
+                  <img src={ ibEURSLP && ibEURSLP.address ? `https://raw.githubusercontent.com/iearn-finance/yearn-assets/master/icons/tokens/${ibEURSLP.address}/logo-128.png` : '/tokens/unknown-logo.png'} alt="" width={30} height={30} />
+                </InputAdornment>
+              ),
+            }}
+          />
+        </div>
+        <div className={ classes.infoContainer }>
+          <div className={ classes.infoField }>
+            <AttachMoneyIcon className={ classes.infoIcon } />
+            <div className={ classes.infoTexts }>
+              <Typography className={ classes.infoText }>Estimated Weekly Rewards:</Typography>
+              <Typography >123.32 ibEUR</Typography>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className={ classes.actionsContainer }>
+        <Button
+          variant='contained'
+          size='large'
+          color='primary'
+          >
+          <Typography className={ classes.actionButtonText }>Approve Transaction</Typography>
+        </Button>
+        <Button
+          variant='contained'
+          size='large'
+          color='primary'
+          >
+          <Typography className={ classes.actionButtonText }>Stake</Typography>
+        </Button>
+      </div>
+    </Paper>
+  );
+}

components/ffStake/ffStake.module.css

@@ -0,0 +1,100 @@
+.container {
+  width: calc(100% - 48px);
+  max-width: 1356px;
+  display: flex;
+  padding: 24px 0px;
+  border: 1px solid rgba(128, 128, 128, 0.8);
+  position: absolute;
+  top: 240px;
+  left: 0;
+  right: 0;
+  margin: auto
+}
+
+.inputsContainer {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: 24px 48px;
+  padding: 0px 24px;
+  flex: 1;
+}
+
+.inputContainer {
+  position: relative;
+}
+
+.textField {
+  flex: 1;
+}
+
+.inputTitleContainer {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.inputTitle {
+  padding-bottom: 6px;
+  margin-left: 12px;
+}
+
+.balances {
+  display: flex;
+  justify-content: flex-end;
+  padding-right: 12px;
+  padding-bottom: 6px;
+}
+
+.value {
+  cursor: pointer;
+  font-size: 12px !important;
+}
+
+.inputTitleText {
+  font-size: 20px !important;
+}
+
+.infoContainer {
+  display: flex;
+}
+
+.infoIcon {
+  border: 1px solid rgba(128, 128, 128, 0.8);
+  color: rgba(128, 128, 128, 0.8);
+  border-radius: 30px;
+  font-size: 40px !important;
+  padding: 6px;
+  margin-right: 12px !important;
+}
+
+.infoField {
+  display: flex;
+  align-items: center;
+  min-width: 300px;
+}
+
+.infoText {
+  color: rgba(128, 128, 128, 0.8);
+  font-size: 14px !important;
+}
+
+.actionsContainer {
+  display: grid;
+  grid-gap: 12px;
+  grid-template-columns: 1fr;
+  border-left: 1px solid rgba(128, 128, 128, 0.8);
+  padding: 0px 24px;
+}
+
+.actionButtonText {
+  font-size: 12px !important;
+  text-transform: capitalize !important;
+}
+
+.autocompleteContainer {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 10px;
+  width: 100%;
+}

components/ffStake/package.json

@@ -0,0 +1,3 @@
+{
+  "main": "ffStake.js"
+}

components/ffStakeDistribution/ffStakeDistribution.js

@@ -0,0 +1,59 @@
+import React, { useState, useEffect } from 'react';
+import { Paper, Typography, Button, TextField, InputAdornment, CircularProgress, RadioGroup, Radio, FormControlLabel } from '@material-ui/core';
+import Autocomplete from '@material-ui/lab/Autocomplete';
+import BigNumber from 'bignumber.js';
+import Skeleton from '@material-ui/lab/Skeleton';
+import moment from 'moment';
+import { formatCurrency } from '../../utils';
+import classes from './ffStakeDistribution.module.css';
+import stores from '../../stores'
+import { FIXED_FOREX_UPDATED, IBEUR_ADDRESS } from '../../stores/constants';
+import AttachMoneyIcon from '@material-ui/icons/AttachMoney';
+
+export default function ffStakeDistribution() {
+
+  const [ rewards, setRewards] = useState(null)
+
+  useEffect(() => {
+    const forexUpdated = () => {
+      setRewards(stores.fixedForexStore.getStore('rewards'))
+    }
+
+    setRewards(stores.fixedForexStore.getStore('rewards'))
+
+    stores.emitter.on(FIXED_FOREX_UPDATED, forexUpdated);
+    return () => {
+      stores.emitter.removeListener(FIXED_FOREX_UPDATED, forexUpdated);
+    };
+  }, []);
+
+  const claim = () => {
+    //do something
+  }
+
+  return (
+    <div className={ classes.container}>
+      <Typography variant="h5" className={ classes.title}>Claimable Rewards</Typography>
+      <Paper elevation={0} className={ classes.lpOptionsContainer }>
+        <div className={ classes.lpOption } onClick={ () => { claim() } }>
+          <div className={ classes.lpOptionTitle }>
+            <img className={ classes.lpOptionIcon } src='/images/Sushi.png' alt='Curve Logo' width={ 60 } height={ 60 } />
+            <div>
+              <Typography className={ classes.lpOptionName }>Sushiswap LP</Typography>
+              <Typography className={ classes.lpOptionDescription }>Staking Rewards</Typography>
+            </div>
+          </div>
+          <div>
+            <Typography className={ classes.amountText }>{ formatCurrency(rewards ? rewards.faucet : 0) } ibff</Typography>
+          </div>
+          <div>
+            <Typography>Claim Now</Typography>
+          </div>
+          {
+            <div className={ classes.activeIcon }></div>
+          }
+        </div>
+      </Paper>
+    </div>
+  );
+}

components/ffStakeDistribution/ffStakeDistribution.module.css

@@ -0,0 +1,75 @@
+.container {
+  width: calc(100% - 48px);
+  max-width: 1356px;
+  margin: 0 auto;
+  margin-bottom: 48px;
+}
+
+.title {
+  font-size: 20px !important;
+  margin-bottom: 24px !important;
+}
+
+.lpOptionsContainer {
+  border: 1px solid rgba(128, 128, 128, 0.8);
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+  cursor: pointer;
+}
+
+.lpOption:nth-child(1):hover {
+  background-image: linear-gradient(0deg ,#1c46f5 0,#0005d3);
+  border-radius: 10px;
+}
+
+.lpOption {
+  position: relative;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 48px;
+  transition: background 0.5s ease;
+}
+
+.lpOptionTitle {
+  display: flex;
+  align-items: center;
+}
+
+.lpOptionName {
+  font-size: 30px !important;
+}
+
+.lpOptionDescription {
+  font-size: 20px !important;
+  opacity: 0.7;
+}
+
+.lpOptionIcon {
+  margin-right: 24px;
+}
+
+.activeIcon {
+  height: 10px;
+  width: 10px;
+  background-color: #0ba360;
+  border-radius: 50%;
+  display: inline-block;
+  position: absolute;
+  right: 12px;
+  top: 12px;
+}
+
+
+
+.lpOption:nth-child(1):hover > div {
+  color: #fff !important;
+}
+
+.amountText {
+  font-size: 60px !important;
+  font-weight: bold !important;
+}

components/ffStakeDistribution/package.json

@@ -0,0 +1,3 @@
+{
+  "main": "ffStakeDistribution.js"
+}

pages/stake/index.js

@@ -5,9 +5,9 @@ import SearchIcon from '@material-ui/icons/Search';
 
 import Head from 'next/head';
 import Layout from '../../components/layout/layout.js';
-import Swap from '../../components/ffSwaps';
+import StakeSLP from '../../components/ffStake';
+import StakeDistribution from '../../components/ffStakeDistribution';
 import Overview from '../../components/ffOverview';
-import Assets from '../../components/ffAssets';
 
 import classes from './stake.module.css';
 
@@ -24,8 +24,8 @@ function Stake({ changeTheme }) {
       </Head>
       <div className={classes.ffContainer}>
         <Overview />
-        <Swap />
-        <Assets />
+        <StakeSLP />
+        <StakeDistribution />
       </div>
     </Layout>
   );