enable beta (#124)

(cherry picked from commit 9560ab8)

packages/boba/gateway/src/components/mainMenu/feeSwitcher/FeeSwitcher.js

@@ -22,7 +22,8 @@ import {
   selectAccountEnabled,
   selectBobaFeeChoice,
   selectLayer,
-  selectNetwork
+  selectNetwork,
+  selectMonster
 } from 'selectors/setupSelector'
 
 import { selectlayer2Balance } from 'selectors/balanceSelector'
@@ -45,6 +46,7 @@ function FeeSwitcher() {
   const accountEnabled = useSelector(selectAccountEnabled())
   const feeUseBoba = useSelector(selectBobaFeeChoice())
   const network = useSelector(selectNetwork())
+  const monsterNumber = useSelector(selectMonster())
 
   const layer = useSelector(selectLayer())
 
@@ -124,7 +126,7 @@ function FeeSwitcher() {
     return null
   }
 
-  if (network === 'mainnet') {
+  if (network === 'mainnet' && monsterNumber < 1) {
     return null
   }
 

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

@@ -14,13 +14,14 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License. */
 
-import { Typography, useMediaQuery, ToggleButtonGroup, ToggleButton } from '@mui/material'
+import { Typography, useMediaQuery, ToggleButtonGroup, ToggleButton, IconButton } from '@mui/material'
 import { useTheme } from '@mui/styles'
 import { setLayer } from 'actions/setupAction.js'
 import BobaIcon from 'components/icons/BobaIcon.js'
 import EthereumIcon from 'components/icons/EthereumIcon.js'
 import React, { useCallback, useEffect } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
+import Button from 'components/button/Button'
 
 import { 
   selectAccountEnabled, 
@@ -69,7 +70,6 @@ function LayerSwitcher({
 
   const theme = useTheme()
   const isMobile = useMediaQuery(theme.breakpoints.down('md'))
-  const iconColor = theme.palette.mode === 'dark' ? '#fff' : '#000'
 
   const wAddress = networkService.account ? truncate(networkService.account, 6, 4, '...') : ''
 
@@ -78,20 +78,6 @@ function LayerSwitcher({
   const chainChangedInit = JSON.parse(localStorage.getItem('chainChangedInit'))
   console.log("chainChangedInit:", chainChangedInit)
 
-  const dispatchSwitchLayer = useCallback((targetLayer) => {
-
-    if (targetLayer === 'L1') {
-       connectToETH()
-    }
-    else if (targetLayer === 'L2') {
-      connectToBOBA()
-    } else {
-      // handles the strange targetLayer === null when people click on ETH icon a second time
-      connectToETH()
-    }
-
-  }, [ connectToBOBA, connectToETH ])
-
   const dispatchBootAccount = useCallback(() => {
 
     if (!accountEnabled) initializeAccount()
@@ -127,6 +113,34 @@ function LayerSwitcher({
 
   }, [ dispatch, accountEnabled, network ])
 
+  // this will switch chain, if needed, and then connect to Boba
+  const connectToBOBA = useCallback(() => {
+    localStorage.setItem('wantChain', JSON.stringify('L2'))
+    networkService.switchChain('L2')
+    dispatchBootAccount()
+  }, [dispatchBootAccount])
+
+   // this will switch chain, if needed, and then connect to Ethereum
+  const connectToETH = useCallback(() => {
+    localStorage.setItem('wantChain', JSON.stringify('L1'))
+    networkService.switchChain('L1')
+    dispatchBootAccount()
+  }, [dispatchBootAccount])
+
+  const dispatchSwitchLayer = useCallback((targetLayer) => {
+
+    if (targetLayer === 'L1') {
+       connectToETH()
+    }
+    else if (targetLayer === 'L2') {
+      connectToBOBA()
+    } else {
+      // handles the strange targetLayer === null when people click on ETH icon a second time
+      connectToETH()
+    }
+
+  }, [ connectToBOBA, connectToETH ])
+
   useEffect(() => {
     // detect mismatch and correct the mismatch
     if (wantChain === 'L1' && layer === 'L2') {
@@ -147,7 +161,7 @@ function LayerSwitcher({
     }
   }, [ chainChangedInit, dispatchBootAccount ])
 
-    useEffect(() => {
+  useEffect(() => {
     // auto reconnect to MM if we just switched chains from 
     // inside MM, and then unset the flag.
     if (chainChangedFromMM) {
@@ -178,100 +192,47 @@ function LayerSwitcher({
     }
   }, [ connectRequest, dispatchBootAccount ])
 
-  // this will switch chain, if needed, and then connect to Boba
-  async function connectToBOBA () {
-    localStorage.setItem('wantChain', JSON.stringify('L2'))
-    await networkService.switchChain('L2')
-    await dispatchBootAccount()
-  }
-
-   // this will switch chain, if needed, and then connect to Ethereum
-  async function connectToETH () {
-    localStorage.setItem('wantChain', JSON.stringify('L1'))
-    await networkService.switchChain('L1')
-    await dispatchBootAccount()
-  }
-
-  // this will connect to whatever is set in MM
-  async function connect () {
-    console.log("connecting to chain set in MM")
-    await dispatchBootAccount()
+  if (isMobile) {
+    return (
+      <S.LayerSwitcherWrapperMobile>
+      <ToggleButtonGroup
+        value={layer}
+        exclusive
+        onChange={(e, n) => dispatchSwitchLayer(n)}
+        aria-label="text alignment"
+      >
+        <ToggleButton sx={{p: "5px 10px", borderRadius: '12px 0 0 12px'}} value="L1" aria-label="L1">
+          <EthereumIcon />
+        </ToggleButton>
+        <ToggleButton sx={{p: "5px 10px", borderRadius: '0 12px 12px 0'}} value="L2" aria-label="L2">
+          <BobaIcon />
+        </ToggleButton>
+      </ToggleButtonGroup>
+      {layer === 'L1' ? <S.LayerContent>
+        <Typography variant="body2" sx={{ whiteSpace: 'nowrap' }} >Ethereum</Typography>
+        <Typography component='p' variant="body4" sx={{ opacity: 0.3 }} >{wAddress}</Typography>
+      </S.LayerContent> : null}
+      {!layer ? <S.LayerContent>
+        <Typography variant="body2" sx={{ whiteSpace: 'nowrap' }} >Not connected</Typography>
+        <Typography variant="body4" sx={{
+          opacity: '0.3',
+          whiteSpace: 'nowrap'
+        }} >Select chain to connect</Typography>
+      </S.LayerContent> : null}
+      {layer === 'L2' ? <S.LayerContent>
+        <Typography variant="body2" sx={{ whiteSpace: 'nowrap' }} >Boba</Typography>
+        <Typography component='p' variant="body4" sx={{ opacity: 0.3 }} >{wAddress}</Typography>
+      </S.LayerContent> : null}
+      </S.LayerSwitcherWrapperMobile>
+    )
   }
 
-  // if (isMobile) {
-  //   return (
-  //     <S.LayerSwitcherWrapperMobile>
-  //       <S.LayerWrapper>
-  //         <IconButton
-  //           sx={{ gap: '5px' }}
-  //           aria-label="eth"
-  //         >
-  //           <EthereumIcon />
-  //         </IconButton>
-  //         <S.LayerContent>
-  //           <Typography variant="body2" sx={{ whiteSpace: 'nowrap' }} >Ethereum</Typography>
-  //           {layer === 'L1' ?
-  //             <Typography component='p' variant="body4" sx={{
-  //               color: 'rgba(255, 255, 255, 0.3)'
-  //             }} >{wAddress}</Typography> :
-  //             <Typography variant="body4" sx={{
-  //               opacity: '0.3',
-  //               whiteSpace: 'nowrap'
-  //             }} >Not Connected</Typography>
-  //           }
-  //         </S.LayerContent>
-  //         {!layer ? <WalletPicker /> : layer === 'L1' ? null :
-  //           <Button
-  //             type="primary"
-  //             variant="contained"
-  //             size='small'
-  //             onClick={() => dispatchSwitchLayer('L1')}
-  //           >
-  //             Switch
-  //           </Button>}
-  //       </S.LayerWrapper>
-  //       <S.LayerDivider>
-  //       </S.LayerDivider>
-  //       <S.LayerWrapper>
-  //         <IconButton
-  //           sx={{ gap: '5px' }}
-  //           aria-label="boba"
-  //         >
-  //           <BobaIcon />
-  //         </IconButton>
-  //         <S.LayerContent>
-  //           <Typography variant="body2" sx={{ whiteSpace: 'nowrap' }} >Boba Network</Typography>
-  //           {layer === 'L2' ?
-  //             <Typography component='p' variant="body4" sx={{
-  //               color: 'rgba(255, 255, 255, 0.3)'
-  //             }} >{wAddress}</Typography> :
-  //             <Typography variant="body4" sx={{
-  //               opacity: '0.3',
-  //               whiteSpace: 'nowrap'
-  //             }} >Not Connected</Typography>
-  //           }
-  //         </S.LayerContent>
-  //         {!layer ? <WalletPicker /> : layer === 'L2' ? null :
-  //           <Button
-  //             type="primary"
-  //             variant="contained"
-  //             size='small'
-  //             onClick={() => dispatchSwitchLayer('L2')}
-  //           >
-  //             Switch
-  //           </Button>
-  //         }
-  //       </S.LayerWrapper>
-  //     </S.LayerSwitcherWrapperMobile>
-  //   )
-  // }
-
   return (
     <S.LayerSwitcherWrapper>
       <ToggleButtonGroup
         value={layer}
         exclusive
-        onChange={(e, n)=> dispatchSwitchLayer(n)}
+        onChange={(e, n) => dispatchSwitchLayer(n)}
         aria-label="text alignment"
       >
         <ToggleButton sx={{p: "5px 10px", borderRadius: '12px 0 0 12px'}} value="L1" aria-label="L1">

packages/boba/gateway/src/containers/airdrop/Airdrop.js

@@ -3,11 +3,10 @@ import { connect } from 'react-redux'
 import { isEqual } from 'lodash'
 
 import * as S from './Airdrop.styles'
-import * as styles from './Airdrop.module.scss'
 
 import { Box, Grid, Typography } from '@mui/material'
 import Button from 'components/button/Button'
-import AlertIcon from 'components/icons/AlertIcon'
+
 import networkService from 'services/networkService'
 import moment from 'moment'
 import { openAlert } from 'actions/uiAction'

packages/boba/gateway/src/containers/bobaScope/BobaScope.js

@@ -39,7 +39,6 @@ import useInterval from 'util/useInterval'
 
 import { POLL_INTERVAL } from 'util/constant'
 import PageTitle from 'components/pageTitle/PageTitle'
-import AlertIcon from 'components/icons/AlertIcon'
 import Connect from 'containers/connect/Connect'
 
 import { selectAccountEnabled } from 'selectors/setupSelector'

packages/boba/gateway/src/containers/bridge/bobaBridge/bobaBridge.js

@@ -14,7 +14,6 @@ import * as LaytoutS from 'components/common/common.styles'
 
 import {
   selectAccountEnabled,
-  selectNetwork,
   selectLayer
 } from 'selectors/setupSelector'
 

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

@@ -6,7 +6,6 @@ import AlertIcon from 'components/icons/AlertIcon'
 import Button from 'components/button/Button.js'
 
 import { 
-  setConnectETH,
   setConnectBOBA,
   setConnect
 } from 'actions/setupAction'

packages/boba/gateway/src/containers/dao/Dao.js

@@ -30,12 +30,6 @@ import * as S from './Dao.styles'
 import * as styles from './Dao.module.scss'
 
 import PageTitle from 'components/pageTitle/PageTitle'
-import { Circle } from '@mui/icons-material'
-import LayerSwitcher from 'components/mainMenu/layerSwitcher/LayerSwitcher'
-import AlertIcon from 'components/icons/AlertIcon'
-import networkService from 'services/networkService'
-import truncateMiddle from 'truncate-middle'
-import WalletIcon from 'components/icons/WalletIcon'
 import Connect from 'containers/connect/Connect'
 
 import { orderBy } from 'lodash'
@@ -52,7 +46,6 @@ function DAO() {
   const votes = useSelector(selectDaoVotes)
   const votesX = useSelector(selectDaoVotesX)
   const proposalThreshold = useSelector(selectProposalThreshold)
-  const wAddress = networkService.account ? truncateMiddle(networkService.account, 6, 6, '...') : '';
 
   let layer = useSelector(selectLayer())
   const accountEnabled = useSelector(selectAccountEnabled())

packages/boba/gateway/src/containers/help/Help.js

@@ -1,16 +1,10 @@
-import { Grid, Link, Typography } from '@mui/material'
-import AlertIcon from 'components/icons/AlertIcon'
+import { Grid, Typography } from '@mui/material'
 import PageTitle from 'components/pageTitle/PageTitle'
-
 import React from 'react'
-import { useSelector } from 'react-redux'
-import { selectAccountEnabled } from 'selectors/setupSelector'
 import * as S from './Help.styles'
 
 function Help() {
 
-  const accountEnabled = useSelector(selectAccountEnabled());
-
   return (
     <S.HelpPageContainer>
       <PageTitle title="HELP/FAQ" />
@@ -63,6 +57,7 @@ function Help() {
           <a
             target='_blank'
             style={{ lineHeight: '1.0em', fontWeight: '700', fontSize: '1.0em', opacity: '0.9', color: '#228fe5' }} 
+            rel="noopener noreferrer"
             href='https://github.com/bobanetwork/boba/issues'
           >GitHub issues list
           </a>{' '}
@@ -77,7 +72,8 @@ function Help() {
           prefaced with `Gateway Feature`, in our {' '}
           <a
             target='_blank'
-            style={{ lineHeight: '1.0em', fontWeight: '700', fontSize: '1.0em', opacity: '0.9', color: '#228fe5' }} 
+            style={{ lineHeight: '1.0em', fontWeight: '700', fontSize: '1.0em', opacity: '0.9', color: '#228fe5' }}
+            rel="noopener noreferrer" 
             href='https://github.com/bobanetwork/boba/issues'
           >GitHub issues and features list
           </a>.

packages/boba/gateway/src/containers/monster/Monster.js

@@ -217,7 +217,11 @@ class Monster extends React.Component {
                 </Typography>
 
                 <Typography variant="body3" sx={{ opacity: 0.65 }}>
-                  Here is where we will showcase new features and projects, for you to see first.
+                  Here is where we will showcase new features and projects, for you to see first. 
+                  Check out the top right of the screen to test the new dual fee system. You can toggle 
+                  back and forth between ETH and BOBA. This is a beta feature which is currently being tested, 
+                  so it might not work smoothly in all circumstances. Any feedback welcome - looking forward to 
+                  MUIs!!! Haha.
                 </Typography>
 
               </Box>

packages/boba/gateway/src/containers/save/Save.js

@@ -21,9 +21,6 @@ import { connect } from 'react-redux'
 import { isEqual } from 'lodash'
 
 import { getFS_Saves, getFS_Info, addFS_Savings } from 'actions/fixedAction'
-
-import AlertIcon from 'components/icons/AlertIcon'
-
 import { openAlert } from 'actions/uiAction'
 
 import * as S from './Save.styles'

packages/boba/gateway/src/containers/wallet/Wallet.js

@@ -6,7 +6,7 @@ import Button from 'components/button/Button'
 import { Info } from "@mui/icons-material"
 import { Box, Icon, Typography } from '@mui/material'
 
-import { switchChain, getETHMetaTransaction } from 'actions/setupAction'
+import { getETHMetaTransaction } from 'actions/setupAction'
 import { openAlert, openError } from 'actions/uiAction'
 import { fetchTransactions } from 'actions/networkAction'