gateway enhancements

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

@@ -202,11 +202,11 @@ export function settle_v1() {
   )
 }
 
-export function monsterMint() {
-  return createAction('MONSTER/CREATE', () =>
-    networkService.monsterMint()
-  )
-}
+// export function monsterMint() {
+//   return createAction('MONSTER/CREATE', () =>
+//     networkService.monsterMint()
+//   )
+// }
 
 export function fetchLookUpPrice(params) {
   return createAction('PRICE/GET', () =>

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

@@ -14,11 +14,13 @@ See the License for the specific language governing permissions and
 limitations under the License. */
 
 import { createAction } from './createAction'
+import networkService from 'services/networkService'
+
 import store from 'store'
 
 export function getNFTs () {
   const state = store.getState()
-  return state.nft.list;
+  return state.nft.list
 }
 
 export async function addNFT ( NFT ) {
@@ -50,6 +52,19 @@ export async function addNFT ( NFT ) {
 
 }
 
+export async function addMonster ( monster ) {
+  store.dispatch({
+    type: 'MONSTER/INFO/SUCCESS',
+    payload: monster
+  })
+}
+
+export function getMonsterInfo() {
+  return createAction('MONSTER/NUMBER', () =>
+    networkService.checkMonster()
+  )
+}
+
 export function removeNFT( UUID ) {
   return createAction('NFT/REMOVE', ()=>{
     return UUID

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

@@ -123,16 +123,11 @@ class listNFT extends React.Component {
       tokenID
     } = this.state
 
-    //console.log("meta:", meta)
-    //console.log("URL:", URL)
-
     let rarity = ''
     if(meta && meta.hasOwnProperty("attributes")) {
       if(meta.attributes.length === 5){
         if(meta.attributes[3].trait_type === 'Top') {
           rarity = 'Basic'
-          console.log(meta.attributes[3].value)
-          console.log(meta.attributes[4].value)
           if(meta.attributes[3].value === 'crown' && meta.attributes[4].value === 'wizzard') {
             rarity = 'Rarest (2/1000)' // 1000 * 5/256 * 20/256
           } else if (meta.attributes[3].value === 'crown') {

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

@@ -1,6 +1,5 @@
-import { Divider, Grid } from "@mui/material";
-import { styled } from '@mui/material/styles';
-
+import { Divider, Grid } from "@mui/material"
+import { styled } from '@mui/material/styles'
 
 export const ListNFTItem = styled(Grid)(({ theme, active }) => ({
   borderRadius: '10px',
@@ -12,7 +11,6 @@ export const ListNFTItem = styled(Grid)(({ theme, active }) => ({
   flexDirection: 'column',
   justifyContent: 'space-around',
   alignItems: 'flex-start',
-  //gap: '30px',
   border: '1px solid transparent',
   padding: active ? '10px' : '0px',
   minHeight: '250px',

packages/boba/gateway/src/components/mainMenu/menuItems/MenuItems.js

@@ -5,9 +5,22 @@ import * as S from './MenuItems.styles'
 import { useDispatch, useSelector } from 'react-redux'
 import { selectModalState } from 'selectors/uiSelector'
 import { setPage } from 'actions/uiAction'
+import { selectMonster } from 'selectors/setupSelector'
 
 function MenuItems ({ setOpen }) {
 
+  const monsterNumber = useSelector(selectMonster())
+  const monstersAdded = menuItems.some(item => item.key === 'Monster')
+
+  if(monsterNumber > 0 && !monstersAdded) {
+    menuItems.push({
+      key: 'Monster',
+      icon: "MonsterIcon",
+      title: "MonsterVerse",
+      url: "/"
+    })
+  }   
+
   const pageDisplay = useSelector(selectModalState('page'))
   const dispatch = useDispatch()
 

packages/boba/gateway/src/components/pageHeader/PageHeader.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import * as S from './PageHeader.styles'
 import { ReactComponent as BobaLogo } from '../../images/boba2/logo-boba2.svg'
+import { ReactComponent as BobaLogoM } from '../../images/boba2/logo-boba2-m.svg'
 import MenuItems from 'components/mainMenu/menuItems/MenuItems'
 import LayerSwitcher from 'components/mainMenu/layerSwitcher/LayerSwitcher'
 import ThemeSwitcher from 'components/mainMenu/themeSwitcher/ThemeSwitcher'
@@ -14,7 +15,7 @@ import networkService from 'services/networkService';
 import { makeStyles } from '@mui/styles'
 import Copy from 'components/copy/Copy'
 import { useSelector } from 'react-redux'
-import { selectAccountEnabled } from 'selectors/setupSelector'
+import { selectAccountEnabled, selectMonster } from 'selectors/setupSelector'
 
 const useStyles = makeStyles({
   root: {
@@ -31,12 +32,16 @@ const PageHeader = ({ maintenance }) => {
   const [ walletOpen, setWalletOpen ] = useState();
   const theme = useTheme()
   const accountEnabled = useSelector(selectAccountEnabled())
+  const monsterNumber = useSelector(selectMonster())
   const isMobile = useMediaQuery(theme.breakpoints.down('md'))
 
+  let Logo = BobaLogo
+  if(monsterNumber>0) Logo = BobaLogoM
+
   if (maintenance) {
     return (
       <S.HeaderWrapper>
-        <BobaLogo style={{ maxWidth: '140px', paddingTop: '20px' }} />
+        <Logo style={{ maxWidth: '140px', paddingTop: '20px' }} />
         <ThemeSwitcher />
       </S.HeaderWrapper>
     )
@@ -48,7 +53,7 @@ const PageHeader = ({ maintenance }) => {
         isMobile ? (
           <Container>
             <S.HeaderWrapper>
-              <BobaLogo style={{ maxWidth: '100px', paddingLeft: '20px' }} />
+              <Logo style={{ maxWidth: '100px', paddingLeft: '20px' }} />
               <S.HeaderActionButton>
                 <Box onClick={() => setWalletOpen(!walletOpen)} sx={{ cursor: 'pointer' }}>
                   <WalletIcon />
@@ -88,7 +93,7 @@ const PageHeader = ({ maintenance }) => {
           </Container>
         )
           : (<S.HeaderWrapper>
-            <BobaLogo style={{ width: '140px', paddingTop: '15px', paddingLeft: '15px' }} />
+            <Logo style={{ width: '140px', paddingTop: '15px', paddingLeft: '15px' }} />
             <MenuItems setOpen={setOpen} />
             <FeeSwitcher />
             <LayerSwitcher />

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

@@ -33,10 +33,20 @@ import {
   fetchExits
 } from 'actions/networkAction'
 
+import {
+  getMonsterInfo
+} from 'actions/nftAction'
+
 import networkService from 'services/networkService'
 
 import { setBaseState } from 'actions/setupAction'
-import { selectBaseEnabled, selectAccountEnabled, selectNetwork, selectLayer } from 'selectors/setupSelector'
+import { 
+  selectBaseEnabled, 
+  selectAccountEnabled, 
+  selectNetwork, 
+  selectLayer,
+  selectMonster 
+} from 'selectors/setupSelector'
 
 /**** ACTIONS and SELECTORS *****/
 
@@ -72,7 +82,11 @@ import {
   getProposalThreshold
 } from 'actions/daoAction'
 
-import { fetchAirdropStatusL1, fetchAirdropStatusL2 } from 'actions/airdropAction'
+import { 
+  fetchAirdropStatusL1, 
+  fetchAirdropStatusL2 
+} from 'actions/airdropAction'
+
 import { getFS_Saves, getFS_Info } from 'actions/fixedAction'
 import { fetchVerifierStatus } from 'actions/verifierAction'
 
@@ -83,6 +97,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 { Box, Container } from '@mui/material'
 
@@ -127,6 +142,7 @@ 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())
@@ -179,8 +195,9 @@ function Home() {
       dispatch(fetchExits())           // account specific
       dispatch(getFS_Saves())          // account specific
       dispatch(getFS_Info())           // account specific
+      dispatch(getMonsterInfo())       // account specific
     }
-    if(baseEnabled /*== we have Base L1 and L2 providers*/) {
+    if(baseEnabled /*== we only have have Base L1 and L2 providers*/) {
       dispatch(fetchGas())
       dispatch(fetchVerifierStatus())
       dispatch(getProposalThreshold())
@@ -195,12 +212,13 @@ function Home() {
     dispatch(fetchGas())
     dispatch(fetchVerifierStatus())
     dispatch(getProposalThreshold())
-  }, [dispatch, maintenance])
+  }, [ dispatch, maintenance ])
 
   useEffect(() => {
     if (maintenance) return
     if (accountEnabled) {
       dispatch(addTokenList())
+      dispatch(getMonsterInfo())
     }
   }, [ dispatch, accountEnabled, maintenance ])
 
@@ -334,6 +352,9 @@ function Home() {
             {pageDisplay === "Ecosystem" &&
               <Ecosystem />
             }
+            {pageDisplay === "Monster" &&
+              <Monster />
+            }
           </Container>
           <PageFooter/>
         </Box>