Gateway formatting / visual bugfixes

packages/boba/gateway/src/components/listNFT/listNFT.js

@@ -38,7 +38,8 @@ class listNFT extends React.Component {
       UUID,
       URL,
       meta,
-      tokenID
+      tokenID,
+      small
     } = this.props
 
     this.state = {
@@ -50,8 +51,10 @@ class listNFT extends React.Component {
       meta,
       tokenID,
       isFlipped: false,
+      small
     }
-    this.handleClick = this.handleClick.bind(this);
+
+    this.handleClick = this.handleClick.bind(this)
   }
 
   handleClick(e) {
@@ -120,7 +123,8 @@ class listNFT extends React.Component {
       URL,
       isFlipped,
       meta,
-      tokenID
+      tokenID,
+      small
     } = this.state
 
     let rarity = ''
@@ -148,25 +152,32 @@ class listNFT extends React.Component {
       <ReactCardFlip isFlipped={isFlipped} flipDirection="vertical" >
         <S.ListNFTItem 
           item 
+          small={small}
           onClick={this.handleClick}
         >
           <img
             src={imgSource}
             alt="NFT URI"
-            width={'100%'}
+            width={small ? '50%' : '100%'}
           />
           <div
             style={{padding: '10px 5px'}}
             className={styles.topContainer}>
-            <Typography variant="body1">
-              {meta.name}{' '}({symbol})
-            </Typography>
-            <Typography variant="body3">TokenID:{' '}{tokenID}</Typography>
+            {!small && <>
+              <Typography variant="body1">
+                {meta.name}{' '}({symbol})
+              </Typography>
+              <Typography variant="body3">
+                TokenID:{' '}{tokenID}
+              </Typography>
+              </>
+            }            
           </div>
         </S.ListNFTItem>
         <S.ListNFTItem 
           active={'true'} 
           item 
+          small={small}
           onClick={this.handleClick}
         >
           {meta.collection !== ''   && <Typography variant="body3">Collection:{' '}{meta.collection}</Typography>}
@@ -187,26 +198,28 @@ class listNFT extends React.Component {
               </Typography>
             )
           })}
-          <Button
-            type="primary"
-            variant="contained"
-            style={{marginTop: '10px', marginBottom: '10px'}}
-            onClick={(e) => {this.handleTransfer()}}
-            size="small"
-          >
-            Transfer
-          </Button>
-          <Button
-            type="primary"
-            variant="contained"
-            onClick={(e) => {
-              e.stopPropagation();
-              this.handleRemove();
-            }}
-            size="small"
-          >
-            Remove
-          </Button>
+          {!small && <>
+            <Button
+              type="primary"
+              variant="contained"
+              style={{marginTop: '10px', marginBottom: '10px'}}
+              onClick={(e) => {this.handleTransfer()}}
+              size="small"
+            >
+              Transfer
+            </Button>
+            <Button
+              type="primary"
+              variant="contained"
+              onClick={(e) => {
+                e.stopPropagation();
+                this.handleRemove();
+              }}
+              size="small"
+            >
+              Remove
+            </Button>
+        </>}
         </S.ListNFTItem>
       </ReactCardFlip>
     )

packages/boba/gateway/src/components/listNFT/listNFT.styles.js

@@ -1,19 +1,17 @@
 import { Divider, Grid } from "@mui/material"
 import { styled } from '@mui/material/styles'
 
-export const ListNFTItem = styled(Grid)(({ theme, active }) => ({
+export const ListNFTItem = styled(Grid)(({ theme, active, small }) => ({
   borderRadius: '10px',
-  maxWidth: '200px',
-  minWidth: '200px',
-  background: theme.palette.background.secondary,
+  width: `${ small ? '150px' : '200px'}`,
   overflow: 'hidden',
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'space-around',
   alignItems: 'flex-start',
   border: '1px solid transparent',
   padding: active ? '10px' : '0px',
-  minHeight: '250px',
+  minHeight: `${ small ? 'unset' : '250px'}`,
   [theme.breakpoints.down('sm')]: {
     width: '100%',
     maxWidth: '160px',

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

@@ -22,7 +22,8 @@ import {
   selectAccountEnabled,
   selectBobaFeeChoice,
   selectLayer,
-  selectBobaPriceRatio
+  selectBobaPriceRatio,
+  selectNetwork
 } from 'selectors/setupSelector'
 
 import { selectlayer2Balance } from 'selectors/balanceSelector'
@@ -44,6 +45,7 @@ function FeeSwitcher() {
   const accountEnabled = useSelector(selectAccountEnabled())
   const feeUseBoba = useSelector(selectBobaFeeChoice())
   const feePriceRatio = useSelector(selectBobaPriceRatio())
+  const network = useSelector(selectNetwork())
 
   const layer = useSelector(selectLayer())
 
@@ -60,11 +62,6 @@ function FeeSwitcher() {
     const tooSmallETH = new BN(logAmount(balanceETH.balance, 18)).lt(new BN(0.002))
     const tooSmallBOBA = new BN(logAmount(balanceBOBA.balance, 18)).lt(new BN(3.0))
 
-    //console.log([ `BOBA BALANCE`, logAmount(balanceBOBA.balance, 18) ])
-    //console.log([ `tooSmallBOBA`, tooSmallBOBA ])
-    //console.log([ `ETH BALANCE`, logAmount(balanceETH.balance, 18) ])
-    //console.log([ `tooSmallETH`, tooSmallETH ])
-
     let res
 
     if (feeUseBoba && targetFee === 'BOBA') {
@@ -98,7 +95,15 @@ function FeeSwitcher() {
 
   }, [ dispatch, feeUseBoba, balanceETH, balanceBOBA ])
 
-  if (!accountEnabled || layer !== 'L2') {
+  if (!accountEnabled) {
+    return null
+  }
+
+  if (layer !== 'L2') {
+    return null
+  }
+
+  if (network === 'mainnet') {
     return null
   }
 

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

@@ -86,20 +86,18 @@ function DAO() {
   if (totalNumberOfPages === 0) totalNumberOfPages = 1
 
   return (
-    <>
-
       <div className={styles.container}>
         <S.DaoPageContainer>
-          <PageTitle title="DAO" />
-            <S.DaoWalletHead>
-            {
-              (layer !== 'L2') ?
-                <Typography variant="body2" sx={{ color: '#FF6A55' }}><Circle sx={{ height: "10px", width: "10px" }} /> Not connected to Boba L2</Typography>
-                : <Typography variant="body2" sx={{ color: '#BAE21A' }}><Circle sx={{ height: "10px", width: "10px" }} /> Connected</Typography>
+
+          <Box sx={{ my: 1, paddingBottom: '20px' }}>
+            <PageTitle title="DAO" />
+            {(layer !== 'L2') ?
+              <Typography variant="body2" sx={{ color: '#FF6A55' }}><Circle sx={{ height: "10px", width: "10px" }} /> Not connected to Boba </Typography>
+              : <Typography variant="body2" sx={{ color: '#BAE21A' }}><Circle sx={{ height: "10px", width: "10px" }} /> Connected </Typography>
             }
-            </S.DaoWalletHead>
-          <S.DaoPageContent>
+          </Box>
 
+          <S.DaoPageContent>
             <S.DaoWalletContainer>
               <Box sx={{ padding: '24px 0px', lineHeight: '0.9em' }}>
                 {!accountEnabled ?
@@ -108,9 +106,6 @@ function DAO() {
                 }
               </Box>
               <S.DividerLine />
-              <Box sx={{ padding: '24px 0px', lineHeight: '0.9em' }}>
-                <Typography variant="body3" sx={{ opacity: "0.6"}}>NOTE: only votes delegated BEFORE the start of the active voting period are counted in your vote.</Typography>
-              </Box>
               <Box sx={{ padding: '24px 0px' }}>
                 <Typography variant="h4">Balances</Typography>
                 <Typography variant="body1" style={{ opacity: '0.5' }}>BOBA:</Typography>
@@ -162,6 +157,9 @@ function DAO() {
                         <LayerSwitcher isButton={true} />
                       </S.LayerAlert>
                 }
+                <Box sx={{ padding: '12px 0px'}}>
+                  <Typography variant="body3">Only votes delegated BEFORE the start of the active voting period are counted in your vote</Typography>
+                </Box>
               </Box>
               <S.DividerLine />
               <Box sx={{
@@ -186,7 +184,9 @@ function DAO() {
                 >
                   Create new proposal
                 </Button>
-                <Typography variant="body3">At least {proposalThreshold} BOBA + xBOBA are needed to create a new proposal</Typography>
+                <Box sx={{ padding: '12px 0px'}}>
+                  <Typography variant="body3">At least {proposalThreshold} BOBA + xBOBA are needed to create a new proposal</Typography>
+                </Box>
               </Box>
             </S.DaoWalletContainer>
             <S.DaoProposalContainer>
@@ -220,7 +220,7 @@ function DAO() {
           </S.DaoPageContent>
         </S.DaoPageContainer>
       </div>
-    </>)
+    )
 }
 
 export default React.memo(DAO)

packages/boba/gateway/src/containers/home/Home.js

@@ -44,8 +44,7 @@ import {
   selectBaseEnabled, 
   selectAccountEnabled, 
   selectNetwork, 
-  selectLayer,
-  selectMonster 
+  selectLayer
 } from 'selectors/setupSelector'
 
 /**** ACTIONS and SELECTORS *****/
@@ -97,7 +96,7 @@ import BobaScope from 'containers/bobaScope/BobaScope'
 import Help from 'containers/help/Help'
 import Ecosystem from 'containers/ecosystem/Ecosystem'
 import Wallet from 'containers/wallet/Wallet'
-import Monster from 'containers/monster/Monster'
+import MonsterWrapper from 'containers/monster/MonsterWrapper'
 
 import { Box, Container } from '@mui/material'
 
@@ -142,7 +141,6 @@ function Home() {
   const layer = useSelector(selectLayer())
   const baseEnabled = useSelector(selectBaseEnabled())
   const accountEnabled = useSelector(selectAccountEnabled())
-  const monsterNumber = useSelector(selectMonster())
 
   const handleErrorClose = () => dispatch(closeError())
   const handleAlertClose = () => dispatch(closeAlert())
@@ -353,7 +351,7 @@ function Home() {
               <Ecosystem />
             }
             {pageDisplay === "Monster" &&
-              <Monster />
+              <MonsterWrapper />
             }
           </Container>
           <PageFooter/>

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

@@ -5,20 +5,17 @@ import { isEqual } from 'lodash'
 import ListNFT from 'components/listNFT/listNFT'
 import * as S from './Monster.styles'
 
-import { Box, Grid, Typography } from '@mui/material'
+import { Box, Typography, Grid } from '@mui/material'
 
-import Input from 'components/input/Input'
-import Button from 'components/button/Button'
+import { Circle } from '@mui/icons-material'
+import PageTitle from 'components/pageTitle/PageTitle'
 
 import networkService from 'services/networkService'
 import LayerSwitcher from 'components/mainMenu/layerSwitcher/LayerSwitcher'
 import AlertIcon from 'components/icons/AlertIcon'
 import BobaGlassIcon from 'components/icons/BobaGlassIcon'
-import Copy from 'components/copy/Copy'
 import WalletPicker from 'components/walletpicker/WalletPicker'
 
-import truncate from 'truncate-middle'
-
 class Monster extends React.Component {
 
   constructor(props) {
@@ -108,12 +105,8 @@ class Monster extends React.Component {
 
     const {
       list,
-      contractAddress,
-      tokenID,
-      loading,
       netLayer,
       monsterInfo,
-      monsterNumber
     } = this.state
 
     let tokenIDverified = null
@@ -145,7 +138,6 @@ class Monster extends React.Component {
 
       return (
         <S.TokenPageContainer>
-          <S.TokenPageContentEmpty>
             <S.LayerAlert>
               <S.AlertInfo>
                 <AlertIcon />
@@ -159,7 +151,6 @@ class Monster extends React.Component {
               </S.AlertInfo>
               <WalletPicker label="Connect to Boba"/>
             </S.LayerAlert>
-          </S.TokenPageContentEmpty>
         </S.TokenPageContainer>
       )
 
@@ -189,6 +180,16 @@ class Monster extends React.Component {
     else {
 
       return (
+      <S.StakePageContainer>
+        <Box sx={{ my: 1 }}>
+          <PageTitle title="MonsterVerse" />
+          {(netLayer !== 'L2') ?
+            <Typography variant="body2" sx={{ color: '#FF6A55' }}><Circle sx={{ height: "10px", width: "10px" }} /> Not connected to Boba </Typography>
+            : <Typography variant="body2" sx={{ color: '#BAE21A' }}><Circle sx={{ height: "10px", width: "10px" }} /> Connected </Typography>
+          }
+        </Box>
+        <Grid container spacing={1} sx={{ my: 2 }}>
+
         <S.NFTPageContainer>
           <S.NFTActionContent>
             <S.NFTFormContent>
@@ -205,7 +206,8 @@ class Monster extends React.Component {
                 </Typography>
                 {tokenIDverified === null && 
                   <Typography variant="body3" sx={{ opacity: 0.65 }}>
-                    <br/>You have one or more Turing Monsters, but you have not added them to your NFT page (Wallet>NFT>Add NFT). Please add them to join the MonsterVerse.
+                    You have one or more Turing Monsters, but you have not added them to your NFT page (<strong>Wallet>NFT>Add NFT</strong>). 
+                    Please add them to join the MonsterVerse.
                   </Typography>
                 }
               </Box>
@@ -222,6 +224,7 @@ class Monster extends React.Component {
                       URL={list[v].url}
                       meta={list[v].meta}
                       tokenID={list[v].tokenID}
+                      small={"true"}
                     />)
                   }
                 })
@@ -256,6 +259,9 @@ class Monster extends React.Component {
               </Box>
           </S.NFTListContainer>
         </S.NFTPageContainer>
+            </Grid>
+      </S.StakePageContainer>
+
     )}
   }
 }