tx pending indicator check + removeNFT

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

@@ -197,9 +197,9 @@ export function fetchLookUpPrice(params) {
     networkService.fetchLookUpPrice(params))
 }
 
-export function correctChain(layer) {
-  return createAction('CORRECT/NETWORK', () => networkService.correctChain(layer))
-}
+// export function correctChain(layer) {
+//   return createAction('CORRECT/NETWORK', () => networkService.correctChain(layer))
+// }
 
 export function enableBrowserWallet(network) {
   return createAction('ENABLE/BROWSER/WALLET', () => networkService.enableBrowserWallet(network))

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

@@ -52,4 +52,4 @@ export function setAccountNumber(account) {
 export function switchChain(layer) {
   console.log("SA: Switching chain to", layer)
   return createAction('SETUP/SWITCH', () => networkService.switchChain(layer))
-}
+}

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

@@ -21,6 +21,8 @@ import { connect } from 'react-redux'
 import ReactCardFlip from 'react-card-flip'
 import * as styles from './listNFT.module.scss'
 import * as S from './listNFT.styles'
+import { removeNFT } from 'actions/nftAction'
+import Button from 'components/button/Button'
 
 
 class listNFT extends React.Component {
@@ -55,6 +57,11 @@ class listNFT extends React.Component {
     this.setState(prevState => ({ isFlipped: !prevState.isFlipped }));
   }
 
+  async handleRemove() {
+    this.props.dispatch(removeNFT(this.state.UUID))
+  }
+
+
   componentDidUpdate(prevState) {
 
     const {
@@ -163,6 +170,17 @@ class listNFT extends React.Component {
                 </Typography>)
               })}
             </div>
+            <S.DividerLine />
+            <Button
+              variant="outlined"
+              onClick={(e) => {
+                e.stopPropagation();
+                this.handleRemove();
+              }}
+              size="small"
+            >
+              Remove
+            </Button>
           </div>
         </S.ListNFTItem>
       </ReactCardFlip>

packages/boba/gateway/src/components/mainMenu/gasSwitcher/GasSwitcher.js

@@ -33,36 +33,36 @@ function GasSwitcher({ isMobile }) {
   }, [ gas ])
 
   const verifierStatus = useSelector(selectVerifierStatus)
-  let healthStatus = 'healthy'
+  let healthStatus = 'Healthy'
 
   if (Number(verifierStatus.matchedBlock) + getMaxHealthBlockLag() < gas.blockL2) {
-    healthStatus = 'unhealthy'
+    healthStatus = 'Unhealthy'
   }
 
   return (
     <S.Menu>
       <S.MenuItem>
-        <S.Label component="p" variant="body2">Ethereum Gas</S.Label>
+        <S.Label component="p" variant="body2">Ethereum</S.Label>
         <S.Value component="p" variant="body2">{gas.gasL1} Gwei</S.Value>
       </S.MenuItem>
       <S.MenuItem>
-        <S.Label component="p" variant="body2">Boba Gas</S.Label>
+        <S.Label component="p" variant="body2">Boba</S.Label>
         <S.Value component="p" variant="body2">{gas.gasL2} Gwei</S.Value>
       </S.MenuItem>
       <S.MenuItem>
         <S.Label component="p" variant="body2">Savings</S.Label>
         <S.Value component="p" variant="body2">{savings.toFixed(0)}x</S.Value>
       </S.MenuItem>
       <S.MenuItem>
-        <S.Label component="p" variant="body2">L1 Block</S.Label>
+        <S.Label component="p" variant="body2">L1</S.Label>
         <S.Value component="p" variant="body2">{gas.blockL1}</S.Value>
       </S.MenuItem>
       <S.MenuItem>
-        <S.Label component="p" variant="body2">L2 Block</S.Label>
+        <S.Label component="p" variant="body2">L2</S.Label>
         <S.Value component="p" variant="body2">{gas.blockL2}</S.Value>
       </S.MenuItem>
       <S.MenuItem>
-        <S.Label component="p" variant="body2">Verification state</S.Label>
+        <S.Label component="p" variant="body2">Verification</S.Label>
         <S.Value component="p" variant="body2">{healthStatus}</S.Value>
       </S.MenuItem>
     </S.Menu>

packages/boba/gateway/src/components/mainMenu/gasSwitcher/GasSwitcher.styles.js

@@ -1,50 +1,26 @@
-import styled from '@emotion/styled';
-import { Typography, Box } from '@mui/material';
-
-export const WalletPickerContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-start;
-  margin-left: -5px;
-  @include mobile {
-    font-size: 0.9em;
-    padding: 10px;
-  }
-`;
+import styled from '@emotion/styled'
+import { Typography, Box } from '@mui/material'
 
 export const Label = styled(Typography)(({ theme }) => ({
-  marginLeft: theme.spacing(2),
-  opacity: '0.65',
+  opacity: '0.85',
+  fontSize: '0.8em',
   [ theme.breakpoints.down('md') ]: {
-    marginLeft: theme.spacing(0),
+    marginLeft: theme.spacing(1),
   }
 }));
 
 export const Value = styled(Typography)(({ theme }) => ({
-  opacity: '0.85'
+  opacity: '0.65',
+  fontSize: '0.8em',
 }));
 
-export const WalletPickerWrapper = styled.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: flex-start;
-  width: 100%;
-  @include mobile {
-    flex-direction: column;
-  }
-  img {
-    height: 20px;
-  }
-`;
-
 export const Menu = styled(Box)(({ theme }) => ({
   display: 'flex',
   flexDirection: 'row',
+  justifyContent: 'flex-start',
   alignItems: 'center',
-  zIndex: 1000,
-  position: 'relative',
+  gap: '10px',
+  //background: 'green',
   'a': {
     cursor: 'pointer',
   },
@@ -54,10 +30,9 @@ export const Menu = styled(Box)(({ theme }) => ({
   }
 }))
 
-
 export const MenuItem = styled(Box)(({ theme }) => ({
   display: 'flex',
-  justifyContent: 'space-between',
+  justifyContent: 'flex-start',
   width: '100%',
   gap: '5px',
   'p': {
@@ -67,18 +42,4 @@ export const MenuItem = styled(Box)(({ theme }) => ({
     width: '100%',
     justifyContent: 'flex-start',
   }
-}))
-
-export const Chevron = styled.img`
-  transform: ${props => props.open ? 'rotate(-90deg)' : 'rotate(90deg)'};
-  transition: all 200ms ease-in-out;
-  height: 20px;
-  margin-bottom: 0;
-`;
-
-export const NetWorkStyle = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  cursor: ${(props) => props.walletEnabled !== false ? 'inherit' : 'pointer'};
-`;
+}))

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

@@ -50,7 +50,10 @@ function LayerSwitcher({ isIcon= false, isButton = false, size, fullWidth = fals
     console.log("LS: targetLayer:", targetLayer)
     //if (!accountEnabled) return
     //dispatch(setLayer(layer))
-    if (!layer) {
+    if (!layer && targetLayer === 'L1') {
+      dispatch(switchChain('L1'))
+    }
+    else if (!layer && targetLayer === 'L2') {
       dispatch(switchChain('L2'))
     }
     else if (layer === 'L1' && targetLayer === 'L2') {

packages/boba/gateway/src/components/pageFooter/PageFooter.js

@@ -7,10 +7,13 @@ import { useDispatch } from 'react-redux'
 import BobaLogo from '../../images/boba2/logo-boba2.svg'
 import GasSwitcher from '../mainMenu/gasSwitcher/GasSwitcher'
 import * as S from './PageFooter.styles'
+import { useMediaQuery, useTheme } from '@mui/material'
 
 const PageFooter = ({maintenance}) => {
 
   const dispatch = useDispatch()
+  const theme = useTheme()
+  const isMobile = useMediaQuery(theme.breakpoints.down('md'))
 
   if(maintenance) {
     return (
@@ -57,17 +60,10 @@ const PageFooter = ({maintenance}) => {
   }
   return (
     <S.Wrapper>
-      <S.ContentWrapper>
-        <S.FooterLogoWrapper>
-          <img
-            src={BobaLogo}
-            alt="boba logo"
-          />
-        </S.FooterLogoWrapper>
-        <GasSwitcher />
-      </S.ContentWrapper>
       <S.FooterDivider />
       <S.FooterLinkWrapper>
+        <S.FooterLinkWrapperLeft>
+        {!isMobile && <GasSwitcher />}
         <S.LinkWrapper>
           <S.FooterLink
             onClick={() => {
@@ -83,7 +79,7 @@ const PageFooter = ({maintenance}) => {
             onClick={() => {
               dispatch(setPage('BobaScope'))
             }}
-          >System Analytics</S.FooterLink>
+          >BobaScope</S.FooterLink>
           <S.FooterLink
             href="https://blockexplorer.boba.network"
             component="a"
@@ -97,6 +93,7 @@ const PageFooter = ({maintenance}) => {
             sx={{ whiteSpace: 'nowrap'}}
           >Boba Docs</S.FooterLink>
         </S.LinkWrapper>
+        </S.FooterLinkWrapperLeft>
         <S.FooterDividerMobile />
         <S.SocialWrapper>
           <IconButton href="https://boba.eco/twitter" target='_blank' aria-label="twitter">
@@ -113,7 +110,8 @@ const PageFooter = ({maintenance}) => {
             component="a"
             target="_blank"
             sx={{ whiteSpace: 'nowrap'}}
-          >Boba Websites</S.FooterLink>
+          >Boba Websites
+          </S.FooterLink>
         </S.SocialWrapper>
       </S.FooterLinkWrapper>
     </S.Wrapper>

packages/boba/gateway/src/components/pageFooter/PageFooter.styles.js

@@ -4,13 +4,13 @@ import { Box, Divider } from '@mui/material'
 export const Wrapper = styled(Box)(({ theme }) => ({
   display: "flex",
   flexDirection: 'column',
-  justifyContent: 'center',
+  justifyContent: 'flex-start',
   alignItems: 'center',
-  margin: '0',
-  padding: '0 20px',
-  bottom: 0,
-  width: '100%',
-  height: '184px',
+  //margin: '0',
+  //padding: '0 20px',
+  //bottom: 0,
+  //width: '100%',
+  //height: '184px',
   background: theme.background,
   [ theme.breakpoints.down('md') ]: {
     marginTop: 0,
@@ -44,7 +44,7 @@ export const ContentWrapper = styled(Box)(({ theme }) => ({
 }))
 
 export const FooterLink = styled(Box)(({ theme }) => ({
-  marginLeft: theme.spacing(1),
+  //marginLeft: theme.spacing(1),
   marginTop: theme.spacing(1),
   fontSize: '14px',
   textDecoration: 'none',
@@ -80,6 +80,9 @@ export const FooterDividerMobile = styled(Divider)(({ theme }) => ({
   }
 }))
 
+export const FooterLinkWrapperLeft = styled(Box)(({ theme }) => ({
+}))
+
 export const FooterLinkWrapper = styled(Box)(({ theme }) => ({
   display: 'flex',
   alignSelf: 'flex-start',
@@ -100,6 +103,7 @@ export const LinkWrapper = styled(Box)(({ theme }) => ({
   display: 'flex',
   width: '40%',
   justifyContent: 'flex-start',
+  gap: '10px',
   [ theme.breakpoints.down('md') ]: {
     flexDirection: 'column',
     alignItems: 'flex-start',