Refactor earn page to function components

packages/boba/gateway/src/actions/farmAction.js → packages/boba/gateway/src/actions/earnAction.js

@@ -20,12 +20,12 @@
 import networkService from 'services/networkService'
 import { createAction } from './createAction'
 
-const getFarmInfoBegin = () => ({
-  type: 'GET_FARMINFO',
+const getEarnInfoBegin = () => ({
+  type: 'GET_EARNINFO',
 })
 
-const getFarmInfoSuccess = (L1PoolInfo, L1UserInfo, L2PoolInfo, L2UserInfo) => ({
-  type: 'GET_FARMINFO_SUCCESS',
+const getEarnInfoSuccess = (L1PoolInfo, L1UserInfo, L2PoolInfo, L2UserInfo) => ({
+  type: 'GET_EARNINFO_SUCCESS',
   payload: { L1PoolInfo, L1UserInfo, L2PoolInfo, L2UserInfo }
 })
 
@@ -47,13 +47,13 @@ const getFarmInfoSuccess = (L1PoolInfo, L1UserInfo, L2PoolInfo, L2UserInfo) => (
 //   payload: { totalFeeRate, userRewardFeeRate },
 // })
 
-export const getFarmInfo = () => async (dispatch) => {
-  dispatch(getFarmInfoBegin())
+export const getEarnInfo = () => async (dispatch) => {
+  dispatch(getEarnInfoBegin())
    const [L1LPInfo, L2LPInfo] = await Promise.all([
     networkService.getL1LPInfo(),
     networkService.getL2LPInfo(),
    ])
-  dispatch(getFarmInfoSuccess(
+  dispatch(getEarnInfoSuccess(
     L1LPInfo.poolInfo,
     L1LPInfo.userInfo,
     L2LPInfo.poolInfo,

packages/boba/gateway/src/actions/networkAction.js

@@ -102,26 +102,26 @@ export function depositErc20ToL1(payload) {
   return createAction('DEPOSIT_ALTL1/CREATE', () => networkService.depositErc20ToL1(payload))
 }
 
-//FARM
-export function farmL1(value_Wei_String, currencyAddress) {
-  return createAction('FARM/CREATE', () =>
+//EARN
+export function earnL1(value_Wei_String, currencyAddress) {
+  return createAction('EARN/CREATE', () =>
     networkService.approveERC20_L1LP(value_Wei_String, currencyAddress)
   )
 }
-export function farmL2(value_Wei_String, currencyAddress) {
-  return createAction('FARM/CREATE', () =>
+export function earnL2(value_Wei_String, currencyAddress) {
+  return createAction('EARN/CREATE', () =>
     networkService.approveERC20_L2LP(value_Wei_String, currencyAddress)
   )
 }
 export function getReward(currencyAddress, value_Wei_String, L1orL2Pool) {
-  return createAction('FARM/HARVEST', () =>
+  return createAction('EARN/HARVEST', () =>
     networkService.getReward(currencyAddress, value_Wei_String, L1orL2Pool)
   )
 }
 
 export function withdrawLiquidity(currencyAddress, value_Wei_String, L1orL2Pool) {
 
-  return createAction('FARM/WITHDRAW', () =>
+  return createAction('EARN/WITHDRAW', () =>
     networkService.withdrawLiquidity(currencyAddress, value_Wei_String, L1orL2Pool)
   )
 }

packages/boba/gateway/src/components/listFarm/listFarm.js → packages/boba/gateway/src/components/listEarn/ListEarn.js

@@ -5,7 +5,7 @@ import { logAmount, powAmount } from 'util/amountConvert';
 import { BigNumber } from 'ethers';
 
 import { openAlert, openModal } from 'actions/uiAction';
-import { getFarmInfo, updateStakeToken, updateWithdrawToken } from 'actions/farmAction';
+import { getEarnInfo, updateStakeToken, updateWithdrawToken } from 'actions/earnAction';
 
 import Button from 'components/button/Button';
 
@@ -16,12 +16,12 @@ import networkService from 'services/networkService'
 import { getCoinImage } from 'util/coinImage';
 
 import { Box, Typography, Fade, CircularProgress } from '@mui/material';
-import * as S from "./ListFarm.styles"
+import * as S from "./ListEarn.styles"
 import { getAllAddresses, getReward } from 'actions/networkAction';
 import Tooltip from 'components/tooltip/Tooltip';
 import { HelpOutline } from '@mui/icons-material';
 
-class ListFarm extends React.Component {
+class ListEarn extends React.Component {
 
   constructor(props) {
 
@@ -93,7 +93,7 @@ class ListFarm extends React.Component {
 
     const { poolInfo, L1orL2Pool, balance } = this.state
 
-    const { allAddresses } = this.props.farm
+    const { allAddresses } = this.props.earn
 
     this.props.dispatch(updateStakeToken({
       symbol: poolInfo.symbol,
@@ -104,14 +104,14 @@ class ListFarm extends React.Component {
       decimals: poolInfo.decimals
     }))
 
-    this.props.dispatch(openModal('farmDepositModal'))
+    this.props.dispatch(openModal('EarnDepositModal'))
   }
 
   async handleWithdrawToken() {
 
     const { poolInfo, L1orL2Pool, balance } = this.state
 
-    const { allAddresses } = this.props.farm
+    const { allAddresses } = this.props.earn
 
     this.props.dispatch(updateWithdrawToken({
       symbol: poolInfo.symbol,
@@ -122,7 +122,7 @@ class ListFarm extends React.Component {
       decimals: poolInfo.decimals
     }))
 
-    this.props.dispatch(openModal('farmWithdrawModal'))
+    this.props.dispatch(openModal('EarnWithdrawModal'))
   }
 
   async handleHarvest() {
@@ -146,7 +146,7 @@ class ListFarm extends React.Component {
 
     if (getRewardTX) {
       this.props.dispatch(openAlert(`${logAmount(userReward, poolInfo.decimals, 2)} ${poolInfo.symbol} was added to your account`))
-      this.props.dispatch(getFarmInfo())
+      this.props.dispatch(getEarnInfo())
       this.setState({ loading: false })
     } else {
       this.setState({ loading: false })
@@ -496,7 +496,7 @@ class ListFarm extends React.Component {
 }
 
 const mapStateToProps = state => ({
-  farm: state.farm,
+  earn: state.earn,
 })
 
-export default connect(mapStateToProps)(ListFarm)
+export default connect(mapStateToProps)(ListEarn)

packages/boba/gateway/src/components/mainMenu/layerSwitcher/LayerSwitcher.js

@@ -40,6 +40,7 @@ import {
 import {
   selectActiveNetwork,
   selectActiveNetworkIcon,
+  selectActiveNetworkName,
   selectActiveNetworkType,
 } from 'selectors/networkSelector'
 import * as S from './LayerSwitcher.styles.js'
@@ -56,15 +57,15 @@ import Button from 'components/button/Button.js'
 import { L1_ICONS, L2_ICONS } from 'util/network/network.util.js'
 import { LAYER } from 'util/constant.js'
 
-function LayerSwitcher({ visisble = true }) {
+function LayerSwitcher({ visisble = true, isButton = false }) {
   const dispatch = useDispatch()
   const accountEnabled = useSelector(selectAccountEnabled())
   const baseEnabled = useSelector(selectBaseEnabled())
 
   let layer = useSelector(selectLayer())
   const network = useSelector(selectActiveNetwork())
   const networkType = useSelector(selectActiveNetworkType())
-
+  const networkName = useSelector(selectActiveNetworkName())
   const networkIcon = useSelector(selectActiveNetworkIcon())
 
   const L1Icon = L1_ICONS[networkIcon]
@@ -226,6 +227,21 @@ function LayerSwitcher({ visisble = true }) {
     )
   }
 
+  if (isButton && layer) {
+    return (
+      <Button
+        type="primary"
+        variant="contained"
+        size="small"
+        newStyle
+        onClick={() => (layer === 'L1') ?  dispatch(setConnectBOBA(true)) : dispatch(setConnectETH(true))}
+        sx={{ fontWeight: '500;' }}
+      >
+        Connect to {networkName[ layer === 'L1' ? 'l2': 'l1' ]}
+      </Button>
+    )
+  }
+
   if (isMobile) {
     return (
       <S.LayerSwitcherWrapperMobile>

packages/boba/gateway/src/components/transaction/Transaction.js

@@ -18,7 +18,7 @@ import React, { useState } from 'react'
 import { Typography, Fade, useMediaQuery } from '@mui/material'
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
 
-import * as S from './ListFarm.styles'
+import * as S from './ListEarn.styles'
 
 import { useTheme } from '@emotion/react'
 

packages/boba/gateway/src/containers/connect/Connect.js

@@ -30,7 +30,8 @@ const Connect = ({
       <Button
         type="primary"
         variant="contained"
-        size="large"
+          size="small"
+          newStyle
         onClick={() => dispatch(setConnect(true))}
         sx={{fontWeight: '500;'}}
       >
@@ -51,6 +52,7 @@ const Connect = ({
           type="primary"
           variant="contained"
           size="small"
+          newStyle
           onClick={() => dispatch(setConnectBOBA(true))}
         >
           Connect to Boba