- }
- {enabled && chain === 'L2' && token.symbol === 'WAGMIv3-Oolong' &&
-
-
+ }}
+ >
+
- }
+ )}
diff --git a/packages/boba/gateway/src/components/listToken/listToken.styles.js b/packages/boba/gateway/src/components/listToken/listToken.styles.js
index b1278b89d5..3ad3b9e279 100644
--- a/packages/boba/gateway/src/components/listToken/listToken.styles.js
+++ b/packages/boba/gateway/src/components/listToken/listToken.styles.js
@@ -7,7 +7,7 @@ export const Content = styled(Box)(({ theme }) => ({
gap: '20px',
width: '100%',
padding: '10px',
- borderBottom: theme.palette.primary.borderBottom
+ borderBottom: theme.palette.primary.borderBottom,
}))
export const TableBody = styled(Box)(({ theme }) => ({
@@ -15,9 +15,9 @@ export const TableBody = styled(Box)(({ theme }) => ({
alignItems: 'center',
justifyContent: 'space-between',
textAlign: 'center',
- [ theme.breakpoints.down('sm') ]: {
- gap: '10px'
- }
+ [theme.breakpoints.down('sm')]: {
+ gap: '10px',
+ },
}))
export const TableCell = styled(Box)(({ theme, isMobile }) => ({
@@ -25,16 +25,16 @@ export const TableCell = styled(Box)(({ theme, isMobile }) => ({
alignItems: 'center',
justifyContent: 'center',
width: '20%',
- [ theme.breakpoints.down('sm') ]: {
+ [theme.breakpoints.down('sm')]: {
minWidth: '20%',
- width: isMobile ? '10%' : 'unset'
- }
-}));
+ width: isMobile ? '10%' : 'unset',
+ },
+}))
export const TextTableCell = styled(Typography)`
- opacity: ${(props) => !props.enabled ? "0.4" : "1.0"};
+ opacity: ${(props) => (!props.enabled ? '0.4' : '1.0')};
font-weight: 700;
-`;
+`
export const DropdownWrapper = styled(Box)(({ theme }) => ({
display: 'flex',
@@ -42,7 +42,7 @@ export const DropdownWrapper = styled(Box)(({ theme }) => ({
alignItems: 'center',
flexDirection: 'row',
gap: '10px',
- [ theme.breakpoints.down('sm') ]: {
- gap: '5px'
- }
+ [theme.breakpoints.down('sm')]: {
+ gap: '5px',
+ },
}))
diff --git a/packages/boba/gateway/src/components/mainMenu/feeSwitcher/FeeSwitcher.js b/packages/boba/gateway/src/components/mainMenu/feeSwitcher/FeeSwitcher.js
index 7bb2d4b7c9..ee99f218fa 100644
--- a/packages/boba/gateway/src/components/mainMenu/feeSwitcher/FeeSwitcher.js
+++ b/packages/boba/gateway/src/components/mainMenu/feeSwitcher/FeeSwitcher.js
@@ -1,4 +1,3 @@
-
/*
Copyright 2021-present Boba Network.
@@ -17,6 +16,7 @@ limitations under the License. */
import React, { useCallback } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { openError, openAlert } from 'actions/uiAction'
+import { HelpOutline } from '@mui/icons-material'
import {
selectAccountEnabled,
@@ -36,96 +36,117 @@ import { isEqual } from 'lodash'
import BN from 'bignumber.js'
import { logAmount } from 'util/amountConvert.js'
-import { HelpOutline } from '@mui/icons-material'
+import networkService from 'services/networkService.js'
+import {
+ selectActiveNetworkName,
+} from 'selectors/networkSelector.js'
-function FeeSwitcher() {
+function FeeSwitcher() {
const dispatch = useDispatch()
const accountEnabled = useSelector(selectAccountEnabled())
const feeUseBoba = useSelector(selectBobaFeeChoice())
+ const networkName = useSelector(selectActiveNetworkName())
+
const layer = useSelector(selectLayer())
const l2Balances = useSelector(selectlayer2Balance, isEqual)
- const l2BalanceETH = l2Balances.filter((i) => i.symbol === 'ETH')
- const balanceETH = l2BalanceETH[0]
-
+ const l2BalanceNativeToken = l2Balances.filter((i) => i.symbol === networkService.L1NativeTokenSymbol)
+ const balanceETH = l2BalanceNativeToken[ 0 ]
const l2BalanceBOBA = l2Balances.filter((i) => i.symbol === 'BOBA')
const balanceBOBA = l2BalanceBOBA[0]
- const dispatchSwitchFee = useCallback(async (targetFee) => {
-
- //console.log("balanceBOBA:",balanceBOBA)
- //console.log("balanceETH:",balanceETH)
-
- let tooSmallETH = false
- let tooSmallBOBA = false
-
- if(typeof(balanceBOBA) === 'undefined') {
- tooSmallBOBA = true
- } else {
- //check actual balance
- tooSmallBOBA = new BN(logAmount(balanceBOBA.balance, 18)).lt(new BN(3.0))
- }
-
- if(typeof(balanceETH) === 'undefined') {
- tooSmallETH = true
- } else {
- //check actual balance
- tooSmallETH = new BN(logAmount(balanceETH.balance, 18)).lt(new BN(0.002))
- }
-
- if (!balanceBOBA && !balanceETH) {
- dispatch(openError('Wallet empty - please bridge in ETH or BOBA from L1'))
- return
- }
-
- let res
-
- if (feeUseBoba && targetFee === 'BOBA') {
- // do nothing - already set to BOBA
- }
- else if ( !feeUseBoba && targetFee === 'ETH' ) {
- // do nothing - already set to ETH
- }
- else if ( !feeUseBoba && targetFee === 'BOBA' ) {
- // change to BOBA
- if( tooSmallBOBA ) {
- dispatch(openError(`You cannot change the fee token to BOBA since your BOBA balance is below 3 BOBA.
- If you change fee token now, you might get stuck. Please swap some ETH for BOBA first.`))
+ const dispatchSwitchFee = useCallback(
+ async (targetFee) => {
+ let tooSmallL1NativeToken = false
+ // mini balance required for token to use as bridge fee
+ let minL1NativeBalance = await networkService.estimateMinL1NativeTokenForFee() //0.002
+ let tooSmallBOBA = false
+
+ if (typeof balanceBOBA === 'undefined') {
+ tooSmallBOBA = true
} else {
- res = await dispatch(switchFee(targetFee))
+ //check actual balance
+ tooSmallBOBA = new BN(logAmount(balanceBOBA.balance, 18)).lt(new BN(1))
}
- }
- else if (feeUseBoba && targetFee === 'ETH') {
- // change to ETH
- if( tooSmallETH ) {
- dispatch(openError(`You cannot change the fee token to ETH since your ETH balance is below 0.002 ETH.
- If you change fee token now, you might get stuck. Please swap some BOBA for ETH first.`))
+
+ if (typeof balanceETH === 'undefined') {
+ tooSmallL1NativeToken = true
} else {
- res = await dispatch(switchFee(targetFee))
+ //check actual balance
+ tooSmallL1NativeToken = new BN(logAmount(balanceETH.balance, 18)).lt(
+ new BN(minL1NativeBalance)
+ )
}
- }
- if (res) {
- dispatch(openAlert(`Successfully changed fee to ${targetFee}`))
- }
+ if (!balanceBOBA && !balanceETH) {
+ dispatch(
+ openError('Wallet empty - please bridge in ETH or BOBA from L1')
+ )
+ return
+ }
- }, [ dispatch, feeUseBoba, balanceETH, balanceBOBA ])
+ let res
+
+ if (feeUseBoba && targetFee === 'BOBA') {
+ // do nothing - already set to BOBA
+ } else if (
+ !feeUseBoba &&
+ targetFee === networkService.L1NativeTokenSymbol
+ ) {
+ // do nothing - already set to ETH
+ } else if (!feeUseBoba && targetFee === 'BOBA') {
+ // change to BOBA
+ if (tooSmallBOBA) {
+ dispatch(
+ openError(`You cannot change the fee token to BOBA since your BOBA balance is below 1 BOBA.
+ If you change fee token now, you might get stuck. Please swap some ETH for BOBA first.`)
+ )
+ } else {
+ res = await dispatch(switchFee(targetFee))
+ }
+ } else if (
+ feeUseBoba &&
+ targetFee === networkService.L1NativeTokenSymbol
+ ) {
+ // change to L1Native Token
+ if (tooSmallL1NativeToken) {
+ dispatch(
+ openError(`You cannot change the fee token to ${networkService.L1NativeTokenSymbol} since your ${networkService.L1NativeTokenSymbol} balance is below ${minL1NativeBalance}.
+ If you change fee token now, you might get stuck. Please obtain some ${networkService.L1NativeTokenSymbol} first.`)
+ )
+ } else {
+ res = await dispatch(switchFee(targetFee))
+ }
+ }
+
+ if (res) {
+ dispatch(openAlert(`Successfully changed fee to ${targetFee}`))
+ }
+ },
+ [dispatch, feeUseBoba, balanceETH, balanceBOBA]
+ )
if (!accountEnabled && layer !== 'L2') {
- return
-
-
-
- Fee
-
+ return (
+
+
+
+
+ Fee
+
+ )
}
return (
-
+
Fee
@@ -133,21 +154,20 @@ function FeeSwitcher() {
onSelect={(e, d) => {
dispatchSwitchFee(e.target.value)
}}
- value={!feeUseBoba ? "ETH" : 'BOBA'}
- options={[ {
- value: 'ETH',
- title: 'ETH',
- },
- {
- value: 'BOBA',
- title: 'BOBA',
- description: 'Save another 25% by using Boba as your gas fee token'
- }
+ value={!feeUseBoba ? networkService.L1NativeTokenSymbol : 'BOBA'}
+ options={[
+ {
+ value: 'BOBA',
+ title: 'BOBA',
+ },
+ {
+ value: networkService.L1NativeTokenSymbol,
+ title: networkService.L1NativeTokenName,
+ },
]}
/>
)
-
}
export default FeeSwitcher
diff --git a/packages/boba/gateway/src/components/mainMenu/feeSwitcher/FeeSwitcher.styles.js b/packages/boba/gateway/src/components/mainMenu/feeSwitcher/FeeSwitcher.styles.js
index b6143ba7bc..f4b10f49d4 100644
--- a/packages/boba/gateway/src/components/mainMenu/feeSwitcher/FeeSwitcher.styles.js
+++ b/packages/boba/gateway/src/components/mainMenu/feeSwitcher/FeeSwitcher.styles.js
@@ -7,13 +7,13 @@ export const FeeSwitcherWrapper = styled(Box)(({ theme }) => ({
alignItems: 'center',
my: 1,
gap: '5px',
- [ theme.breakpoints.down('md') ]: {
- marginTop: '30px'
- }
+
+ [theme.breakpoints.down('md')]: {
+ marginTop: '30px',
+ },
}))
export const FeeSwitcherLabel = styled(Typography)(({ theme }) => ({
whiteSpace: 'nowrap',
- textDecoration: 'underline',
- opacity: 0.65
+ opacity: 0.65,
}))
diff --git a/packages/boba/gateway/src/components/mainMenu/gasSwitcher/GasSwitcher.js b/packages/boba/gateway/src/components/mainMenu/gasSwitcher/GasSwitcher.js
index 81fea89790..58854b0d61 100644
--- a/packages/boba/gateway/src/components/mainMenu/gasSwitcher/GasSwitcher.js
+++ b/packages/boba/gateway/src/components/mainMenu/gasSwitcher/GasSwitcher.js
@@ -7,6 +7,10 @@ import * as S from './GasSwitcher.styles.js'
import { selectGas } from 'selectors/balanceSelector'
import { selectVerifierStatus } from 'selectors/verifierSelector'
import { selectBaseEnabled } from 'selectors/setupSelector.js'
+import {
+ selectActiveNetwork,
+ selectActiveNetworkName
+} from 'selectors/networkSelector.js'
import { fetchGas } from 'actions/networkAction.js'
import { fetchVerifierStatus } from 'actions/verifierAction.js'
@@ -16,6 +20,7 @@ import networkService from 'services/networkService.js'
import useInterval from 'hooks/useInterval.js'
import { GAS_POLL_INTERVAL } from 'util/constant.js'
+import { NETWORK, NETWORK_TYPE } from 'util/network/network.util.js'
function GasSwitcher() {
const dispatch = useDispatch()
@@ -23,9 +28,18 @@ function GasSwitcher() {
const baseEnabled = useSelector(selectBaseEnabled())
const gas = useSelector(selectGas)
const verifierStatus = useSelector(selectVerifierStatus)
-
+ const networkName = useSelector(selectActiveNetworkName())
+ const activeNetwork = useSelector(selectActiveNetwork())
const [ savings, setSavings ] = useState(0)
+ // fetch the gas on changing deployment
+ useEffect(() => {
+ if (baseEnabled) {
+ dispatch(fetchGas())
+ dispatch(fetchVerifierStatus())
+ }
+ }, [ networkName, baseEnabled , dispatch])
+
useInterval(() => {
if (baseEnabled) {
dispatch(fetchGas())
@@ -35,7 +49,7 @@ function GasSwitcher() {
useEffect(() => {
async function getGasSavings() {
- if (networkService.networkGateway === 'mainnet') {
+ if (networkService.networkType === NETWORK_TYPE.MAINNET) {
const l1SecurityFee = await networkService.estimateL1SecurityFee()
const l2Fee = await networkService.estimateL2Fee()
// The l1 security fee is moved to the l2 fee
@@ -47,24 +61,30 @@ function GasSwitcher() {
}
return 1
}
- getGasSavings()
- }, [ gas ])
+ // fetch savings only if network is ethereum and mainnet.
+ if (activeNetwork === NETWORK.ETHEREUM) {
+ getGasSavings()
+ }
+ }, [ gas, activeNetwork ])
return (
- Ethereum
+ {networkName[ 'l1' ]}
{gas.gasL1} Gwei
- Boba
+ {networkName[ 'l2' ]}
{gas.gasL2} Gwei
-
- Savings
- {savings.toFixed(0)}x
-
+ {
+ activeNetwork === NETWORK.ETHEREUM &&
+ (
+ Savings
+ {savings.toFixed(0)}x
+ )
+ }
L1
{gas.blockL1}
diff --git a/packages/boba/gateway/src/components/mainMenu/gasSwitcher/GasSwitcher.styles.js b/packages/boba/gateway/src/components/mainMenu/gasSwitcher/GasSwitcher.styles.js
index cca697a401..aa7d678eae 100644
--- a/packages/boba/gateway/src/components/mainMenu/gasSwitcher/GasSwitcher.styles.js
+++ b/packages/boba/gateway/src/components/mainMenu/gasSwitcher/GasSwitcher.styles.js
@@ -4,9 +4,6 @@ import { Typography, Box } from '@mui/material'
export const Label = styled(Typography)(({ theme }) => ({
opacity: '0.85',
fontSize: '0.8em',
- [ theme.breakpoints.down('md') ]: {
- marginLeft: theme.spacing(1),
- }
}));
export const Value = styled(Typography)(({ theme }) => ({
@@ -20,13 +17,12 @@ export const Menu = styled(Box)(({ theme }) => ({
justifyContent: 'flex-start',
alignItems: 'center',
gap: '10px',
- //background: 'green',
'a': {
cursor: 'pointer',
},
[ theme.breakpoints.down('md') ]: {
width: '100%',
- flexDirection: 'column'
+ flexDirection: 'column',
}
}))
@@ -42,4 +38,4 @@ export const MenuItem = styled(Box)(({ theme }) => ({
width: '100%',
justifyContent: 'flex-start',
}
-}))
\ No newline at end of file
+}))
diff --git a/packages/boba/gateway/src/components/mainMenu/layerSwitcher/LayerSwitcher.js b/packages/boba/gateway/src/components/mainMenu/layerSwitcher/LayerSwitcher.js
index de392de9b4..d404aaba0c 100644
--- a/packages/boba/gateway/src/components/mainMenu/layerSwitcher/LayerSwitcher.js
+++ b/packages/boba/gateway/src/components/mainMenu/layerSwitcher/LayerSwitcher.js
@@ -14,50 +14,61 @@ 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, IconButton } from '@mui/material'
+import {
+ Typography,
+ useMediaQuery,
+ ToggleButtonGroup,
+ ToggleButton,
+ IconButton,
+} from '@mui/material'
import { useTheme } from '@mui/styles'
-import { setConnect, setLayer } from 'actions/setupAction.js'
+import { setConnect, setConnectBOBA, setConnectETH, 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 {
+ selectBaseEnabled,
selectAccountEnabled,
- selectNetwork,
selectLayer,
selectConnectETH,
selectConnectBOBA,
- selectConnect
+ selectConnect,
} from 'selectors/setupSelector'
+import {
+ selectActiveNetwork,
+ selectActiveNetworkIcon,
+ selectActiveNetworkType,
+} from 'selectors/networkSelector'
import * as S from './LayerSwitcher.styles.js'
import networkService from 'services/networkService'
import truncate from 'truncate-middle'
-import {
- setEnableAccount,
- setWalletAddress,
-} from 'actions/setupAction'
+import { setEnableAccount, setWalletAddress } from 'actions/setupAction'
-import {
- fetchTransactions,
- fetchBalances
-} from 'actions/networkAction'
+import { fetchTransactions, fetchBalances } from 'actions/networkAction'
import { openModal } from 'actions/uiAction'
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 }) {
const dispatch = useDispatch()
const accountEnabled = useSelector(selectAccountEnabled())
+ const baseEnabled = useSelector(selectBaseEnabled())
let layer = useSelector(selectLayer())
- const network = useSelector(selectNetwork())
+ const network = useSelector(selectActiveNetwork())
+ const networkType = useSelector(selectActiveNetworkType())
+
+ const networkIcon = useSelector(selectActiveNetworkIcon())
+
+ const L1Icon = L1_ICONS[networkIcon]
+ const L2Icon = L2_ICONS[networkIcon]
const connectETHRequest = useSelector(selectConnectETH())
const connectBOBARequest = useSelector(selectConnectBOBA())
@@ -66,85 +77,73 @@ function LayerSwitcher({
const theme = useTheme()
const isMobile = useMediaQuery(theme.breakpoints.down('md'))
- const wAddress = networkService.account ? truncate(networkService.account, 6, 4, '...') : ''
+ const wAddress = networkService.account
+ ? truncate(networkService.account, 6, 4, '...')
+ : ''
- const chainChangedFromMM = JSON.parse(localStorage.getItem('chainChangedFromMM'))
+ const chainChangedFromMM = JSON.parse(
+ localStorage.getItem('chainChangedFromMM')
+ )
const wantChain = JSON.parse(localStorage.getItem('wantChain'))
const chainChangedInit = JSON.parse(localStorage.getItem('chainChangedInit'))
const dispatchBootAccount = useCallback(() => {
- if (!accountEnabled) initializeAccount()
+ if (!accountEnabled && baseEnabled) initializeAccount()
async function initializeAccount() {
- const initialized = await networkService.initializeAccount(network)
-
- console.log("initialized:",initialized)
-
- if (initialized === 'wrongnetwork') {
+ const initialized = await networkService.initializeAccount({
+ networkGateway: network,
+ networkType,
+ })
+ if (initialized === 'nometamask') {
+ dispatch(openModal('noMetaMaskModal'));
+ return false;
+ } else if (initialized === 'wrongnetwork') {
dispatch(openModal('wrongNetworkModal'))
return false
}
else if (initialized === false) {
- console.log("WP: Account NOT enabled for", network, accountEnabled)
dispatch(setEnableAccount(false))
return false
}
- else if (initialized === 'L1' || initialized === 'L2') {
- console.log("WP: Account IS enabled for", initialized)
+ else if (initialized === LAYER.L1 || initialized === LAYER.L2) {
dispatch(setLayer(initialized))
dispatch(setEnableAccount(true))
dispatch(setWalletAddress(networkService.account))
dispatch(fetchTransactions())
dispatch(fetchBalances())
return true
- }
- else {
+ } else {
return false
}
}
-
- }, [ 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()
+ }, [dispatch, accountEnabled, network, networkType, baseEnabled])
+
+ const doConnectToLayer = useCallback((layer) => {
+ async function doConnect() {
+ try {
+ localStorage.setItem('wantChain', JSON.stringify(layer))
+ await networkService.switchChain(layer)
+ dispatchBootAccount()
+ } catch (err) {
+ console.log('ERROR', err)
+ dispatch(setConnectETH(false));
+ dispatch(setConnectBOBA(false));
+ }
}
-
- }, [ connectToBOBA, connectToETH ])
+ doConnect();
+ }, [dispatch, dispatchBootAccount])
useEffect(() => {
// detect mismatch and correct the mismatch
if (wantChain === 'L1' && layer === 'L2') {
dispatchBootAccount()
- }
- else if (wantChain === 'L2' && layer === 'L1')
- {
+ } else if (wantChain === 'L2' && layer === 'L1') {
dispatchBootAccount()
}
- }, [ wantChain, layer, dispatchBootAccount ])
+ }, [wantChain, layer, dispatchBootAccount])
useEffect(() => {
// auto reconnect to MM if we just switched chains from
@@ -153,7 +152,7 @@ function LayerSwitcher({
dispatchBootAccount()
localStorage.setItem('chainChangedInit', false)
}
- }, [ chainChangedInit, dispatchBootAccount ])
+ }, [chainChangedInit, dispatchBootAccount])
useEffect(() => {
// auto reconnect to MM if we just switched chains from
@@ -162,77 +161,88 @@ function LayerSwitcher({
dispatchBootAccount()
localStorage.setItem('chainChangedFromMM', false)
}
- }, [ chainChangedFromMM, dispatchBootAccount ])
+ }, [chainChangedFromMM, dispatchBootAccount])
+ // listening for l1 connection request
useEffect(() => {
- if(connectETHRequest) {
- localStorage.setItem('wantChain', JSON.stringify('L1'))
- networkService.switchChain('L1')
- dispatchBootAccount()
+ if (connectETHRequest) {
+ doConnectToLayer('L1')
}
- }, [ connectETHRequest, dispatchBootAccount ])
+ }, [ connectETHRequest, doConnectToLayer ])
+ // listening for l2 connection request
useEffect(() => {
if (connectBOBARequest) {
- localStorage.setItem('wantChain', JSON.stringify('L2'))
- networkService.switchChain('L2')
- dispatchBootAccount()
+ doConnectToLayer('L2')
}
- }, [ connectBOBARequest, dispatchBootAccount ])
+ }, [ connectBOBARequest, doConnectToLayer ])
useEffect(() => {
- if(connectRequest) {
+ if (connectRequest) {
dispatchBootAccount()
}
- }, [ connectRequest, dispatchBootAccount ])
+ }, [connectRequest, dispatchBootAccount])
if (!visisble) {
return null
}
- const MobileLayer = ({layer, title, icon, onConnect, isConnected}) => {
- return
-
- {icon}
-
-
- {title}
- {(layer === 'L1' || layer === 'L2')? wAddress : 'Not Connected' }
-
- {!layer ?
- : !isConnected ?
- : null}
-
+ const MobileLayer = ({ layer, title, icon, onConnect, isConnected }) => {
+ return (
+
+
+ {icon}
+
+
+
+ {title}{' '}
+
+
+ {layer === LAYER.L1 || layer === LAYER.L2
+ ? wAddress
+ : 'Not Connected'}
+
+
+ {!layer ? (
+
+ ) : !isConnected ? (
+
+ ) : null}
+
+ )
}
if (isMobile) {
return (
- }
- onConnect={() => connectToETH()}
- isConnected={layer === 'L1'}
+ }
+ onConnect={() => doConnectToLayer(LAYER.L1)}
+ isConnected={layer === LAYER.L1}
/>
- }
- onConnect={() => connectToBOBA()}
- isConnected={layer === 'L2'}
+ }
+ onConnect={() => doConnectToLayer(LAYER.L1)}
+ isConnected={layer === LAYER.L2}
/>
)
@@ -243,32 +253,76 @@ function LayerSwitcher({
dispatchSwitchLayer(n)}
+ onChange={(e, n) => doConnectToLayer(n)}
aria-label="text alignment"
>
-
-
+
+
-
-
+
+
- {layer === 'L1' ?
- Ethereum
- {wAddress}
- : null}
- {!layer ?
- Not connected
- Select chain to connect
- : null}
- {layer === 'L2' ?
- Boba
- {wAddress}
- : null}
- )
+ {layer === 'L1' ? (
+
+
+ Ethereum
+
+
+ {wAddress}
+
+
+ ) : null}
+ {!layer ? (
+
+
+ Connect
+
+
+ connect wallet
+
+
+ ) : null}
+ {layer === 'L2' ? (
+
+
+ Boba
+
+
+ {wAddress}
+
+
+ ) : null}
+
+ )
}
export default LayerSwitcher
diff --git a/packages/boba/gateway/src/components/mainMenu/layerSwitcher/LayerSwitcher.styles.js b/packages/boba/gateway/src/components/mainMenu/layerSwitcher/LayerSwitcher.styles.js
index 865ebc79ba..cb1e3926a1 100644
--- a/packages/boba/gateway/src/components/mainMenu/layerSwitcher/LayerSwitcher.styles.js
+++ b/packages/boba/gateway/src/components/mainMenu/layerSwitcher/LayerSwitcher.styles.js
@@ -7,7 +7,9 @@ export const LayerSwitcherWrapper = styled(Box)(({ theme }) => ({
alignItems: 'center',
background: theme.palette.background.secondary,
borderRadius: '12px',
- padding: '0'
+ padding: '0',
+ cursor: 'pointer',
+
}));
export const LayerContent = styled(Box)(({ theme }) => ({
diff --git a/packages/boba/gateway/src/components/mainMenu/menuItems/MenuItems.js b/packages/boba/gateway/src/components/mainMenu/menuItems/MenuItems.js
index fbaaa017b8..ab840cf258 100644
--- a/packages/boba/gateway/src/components/mainMenu/menuItems/MenuItems.js
+++ b/packages/boba/gateway/src/components/mainMenu/menuItems/MenuItems.js
@@ -1,56 +1,64 @@
import React, { useState, useEffect } from 'react'
import { useSelector } from 'react-redux'
-import { useTheme } from '@mui/material'
-
+import { intersection } from 'lodash'
import { selectMonster } from 'selectors/setupSelector'
-import { menuItems } from './menuList'
+import { MENU_LIST } from './menu.config'
+import { useLocation } from 'react-router-dom'
import * as S from './MenuItems.styles'
-import { DISABLE_VE_DAO } from 'util/constant'
+import { PAGES_BY_NETWORK } from 'util/constant'
+import { selectActiveNetwork } from 'selectors/networkSelector'
+import { useTheme, useMediaQuery } from '@mui/material'
+
+const MenuItems = ({
+ setOpen
+}) => {
-const MenuItems = () => {
+ const theme = useTheme();
+ const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+ const menuList = MENU_LIST;
- const theme = useTheme()
const monsterNumber = useSelector(selectMonster())
- const monstersAdded = menuItems.some(item => item.key === 'Monster')
- const [ menuList, setMenuList ] = useState([]);
+ const network = useSelector(selectActiveNetwork())
- useEffect(() => {
- setMenuList(menuItems)
- },[])
+ const [list, setList] = useState([])
+ const location = useLocation()
useEffect(() => {
- if (monsterNumber > 0 && !monstersAdded) {
- setMenuList([
- ...menuItems,
+ let _menuList = menuList
+
+ if (monsterNumber > 0) {
+ _menuList = [
+ ...menuList,
{
key: 'Monster',
- icon: "MonsterIcon",
- title: "MonsterVerse",
- url: "/monster"
- }
- ])
+ icon: 'MonsterIcon',
+ title: 'MonsterVerse',
+ url: '/monster',
+ },
+ ]
}
- }, [ monsterNumber, monstersAdded ]);
+
+ let fMenu = _menuList
+ .filter(
+ (m) =>
+ intersection([m.key], PAGES_BY_NETWORK[network.toLowerCase()]).length
+ )
+ .filter((m) => !m.disable)
+
+ setList(fMenu)
+ }, [network, menuList, monsterNumber])
return (
- {menuList.map((item) => {
- if (!!Number(DISABLE_VE_DAO) && (['Lock','Vote&Dao'].includes(item.key))) {
- return null;
- }
+ {list.map((item) => {
return (
- {
- return {
- color: isActive ? theme.palette.secondary.main : 'inherit'
- }
- }}
- key={item.key}
- to={item.url}
- >
+ isMobile ? setOpen(false): null}>
+ {item.url.split('/')[1] === location.pathname.split('/')[1] && (
+
+ )}
{item.title}
-
+
)
})}
diff --git a/packages/boba/gateway/src/components/mainMenu/menuItems/MenuItems.styles.js b/packages/boba/gateway/src/components/mainMenu/menuItems/MenuItems.styles.js
index 1fdab97e36..9808f45cd1 100644
--- a/packages/boba/gateway/src/components/mainMenu/menuItems/MenuItems.styles.js
+++ b/packages/boba/gateway/src/components/mainMenu/menuItems/MenuItems.styles.js
@@ -1,5 +1,6 @@
import { styled } from '@mui/material/styles'
import { NavLink } from 'react-router-dom'
+import { ReactComponent as BobaIcon } from '../../../images/boba2/boba2Icon.svg'
export const Nav = styled('nav')(({ theme }) => ({
width: '100%',
@@ -8,33 +9,45 @@ export const Nav = styled('nav')(({ theme }) => ({
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
- gap: '10px',
+ gap: '24px',
flexWrap: 'wrap',
[theme.breakpoints.down('md')]: {
width: '100%',
- gap: '20px',
+ gap: '10px',
height: '250px',
marginTop: '20px',
flexWrap: 'nowrap',
alignItems: 'flex-start',
backgroundColor: theme.palette.background.default,
flexDirection: 'column',
- }
+ },
}))
-export const MenuItem = styled(NavLink)(({ selected, theme }) => ({
- fontSize: '0.8em',
+export const MenuListItem = styled(NavLink)(({ theme }) => ({
+ fontSize: '0.9em',
fontWeight: 'normal',
cursor: 'pointer',
height: '22px',
textDecoration: 'none',
- [ theme.breakpoints.down('md') ]: {
+ [theme.breakpoints.down('md')]: {
fontSize: '20px',
fontWeight: '400',
- marginLeft: '20px'
+ marginLeft: '20px',
+ padding: '0 24px',
},
+ color: 'inherit',
'&:hover': {
color: `${theme.palette.secondary.main}`,
},
+ '&.active': {
+ color: `${theme.palette.secondary.main}`,
+ },
+}))
+export const MenuIcon = styled(BobaIcon)(({ theme }) => ({
+ // display: 'none',
+ margin: '0 4px -2px 4px',
+ '&.active': {
+ display: 'inline',
+ },
}))
diff --git a/packages/boba/gateway/src/components/mainMenu/menuItems/menuList.js b/packages/boba/gateway/src/components/mainMenu/menuItems/menu.config.js
similarity index 83%
rename from packages/boba/gateway/src/components/mainMenu/menuItems/menuList.js
rename to packages/boba/gateway/src/components/mainMenu/menuItems/menu.config.js
index 5c65a0142e..3bed2788a9 100644
--- a/packages/boba/gateway/src/components/mainMenu/menuItems/menuList.js
+++ b/packages/boba/gateway/src/components/mainMenu/menuItems/menu.config.js
@@ -1,6 +1,6 @@
-import { ROUTES_PATH } from "util/constant";
+import { DISABLE_VE_DAO, ROUTES_PATH } from "util/constant";
-export const menuItems = [
+export const MENU_LIST = [
{
key: 'Bridge',
icon: "WalletIcon",
@@ -42,12 +42,14 @@ export const menuItems = [
icon: "LockIcon",
title: "Lock",
url: ROUTES_PATH.LOCK,
+ disable: !!Number(DISABLE_VE_DAO)
},
{
key: 'Vote&Dao',
icon: "VoteIcon",
title: "Vote&Dao",
- url: ROUTES_PATH.VOTE_DAO
+ url: ROUTES_PATH.VOTE_DAO,
+ disable: !!Number(DISABLE_VE_DAO)
},
{
key: 'DAO',
diff --git a/packages/boba/gateway/src/components/mainMenu/networkSwitcher/NetworkListItem.js b/packages/boba/gateway/src/components/mainMenu/networkSwitcher/NetworkListItem.js
new file mode 100644
index 0000000000..1d81221cbd
--- /dev/null
+++ b/packages/boba/gateway/src/components/mainMenu/networkSwitcher/NetworkListItem.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import { Box, Typography } from '@mui/material';
+
+import CheckIcon from '@mui/icons-material/Check'
+import { L1_ICONS, L2_ICONS } from 'util/network/network.util';
+
+import * as S from './NetworkListItem.styles'
+
+function NetworkListItem({
+ chain,
+ icon,
+ label,
+ name,
+ onChainChange,
+ isActive
+}) {
+
+ const L1Icon = L1_ICONS[ icon ];
+ const L2Icon = L2_ICONS[ icon ];
+
+ return {
+ onChainChange({chain, icon, name})
+ }}>
+
+
+
+
+
+ {label}
+ {isActive ? : null}
+
+
+}
+
+export default NetworkListItem;
diff --git a/packages/boba/gateway/src/components/mainMenu/networkSwitcher/NetworkListItem.styles.js b/packages/boba/gateway/src/components/mainMenu/networkSwitcher/NetworkListItem.styles.js
new file mode 100644
index 0000000000..7f559675f6
--- /dev/null
+++ b/packages/boba/gateway/src/components/mainMenu/networkSwitcher/NetworkListItem.styles.js
@@ -0,0 +1,15 @@
+import styled from '@emotion/styled';
+import { MenuItem } from '@mui/material';
+
+
+export const ChainSwitcherItem = styled(MenuItem)(({ theme }) => ({
+ display: 'flex',
+ cursor: 'pointer',
+ '&:hover': {
+ p: {
+ color: '#BAE21A'
+ }
+ }
+}));
+
+
diff --git a/packages/boba/gateway/src/components/mainMenu/networkSwitcher/NetworkSwitcher.js b/packages/boba/gateway/src/components/mainMenu/networkSwitcher/NetworkSwitcher.js
index 004aaf0d7c..6355a90dd9 100644
--- a/packages/boba/gateway/src/components/mainMenu/networkSwitcher/NetworkSwitcher.js
+++ b/packages/boba/gateway/src/components/mainMenu/networkSwitcher/NetworkSwitcher.js
@@ -1,41 +1,105 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
+import { useDispatch } from 'react-redux';
+import { useSelector } from 'react-redux';
-import { useSelector } from 'react-redux'
-import * as S from './NetworkSwitcher.styles.js'
+import { Box, Menu, MenuItem, Typography } from '@mui/material';
+import KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDown';
-import { selectNetwork } from 'selectors/setupSelector'
-import { Box, Typography } from '@mui/material'
+import LayerSwitcher from 'components/mainMenu/layerSwitcher/LayerSwitcher';
+import Tabs from 'components/tabs/Tabs';
+import NetworkListItem from './NetworkListItem'
-import NetworkIcon from 'components/icons/NetworkIcon'
+import {NetworkList, NETWORK_TYPE } from 'util/network/network.util';
+
+import * as S from './NetworkSwitcher.styles'
+import { setNetwork } from 'actions/networkAction';
+import { selectNetwork, selectNetworkType } from 'selectors/networkSelector';
function NetworkSwitcher() {
+ const dispatch = useDispatch();
+
+ const [ anchorEl, setAnchorEl ] = useState(null);
+ const open = Boolean(anchorEl);
+
+ const [ activeTab, setActiveTab ] = useState(NETWORK_TYPE.MAINNET);
+
+ const network = useSelector(selectNetwork());
+ const networkType = useSelector(selectNetworkType());
+
+ const handleClick = (event) => {
+ setAnchorEl(event.currentTarget);
+ };
+
+ const handleClose = () => {
+ setAnchorEl(null);
+ };
+
+ const onChainChange = ({ icon, chain,name }) => {
+ dispatch(setNetwork({
+ network: chain,
+ name: name,
+ networkIcon: icon,
+ networkType: activeTab,
+ }));
+ }
- const masterConfig = useSelector(selectNetwork())
+ useEffect(() => {
+ setActiveTab(networkType)
+ return () => {
+ setActiveTab(NETWORK_TYPE.MAINNET)
+ };
+ }, [networkType]);
return (
-
-
-
-
-
- Network
-
+
+
+
+
+
-
-
-
-
+ {...chainItem}
+ />
+ })}
+
+
)
-};
+}
export default NetworkSwitcher;
diff --git a/packages/boba/gateway/src/components/mainMenu/networkSwitcher/NetworkSwitcher.styles.js b/packages/boba/gateway/src/components/mainMenu/networkSwitcher/NetworkSwitcher.styles.js
index e9562f3237..28dc0884f3 100644
--- a/packages/boba/gateway/src/components/mainMenu/networkSwitcher/NetworkSwitcher.styles.js
+++ b/packages/boba/gateway/src/components/mainMenu/networkSwitcher/NetworkSwitcher.styles.js
@@ -1,90 +1,13 @@
import styled from '@emotion/styled';
-import { Typography } from '@mui/material';
+import { Box } from '@mui/material';
-export const NetworkSwitcherContainer = 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;
- }
-`;
+export const LayerSwitcherContainer = styled(Box)(({ theme }) => ({
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ background: theme.palette.background.secondary,
+ borderRadius: '12px',
+ padding: '0',
+ cursor: 'pointer',
-export const Label = styled(Typography)(({ theme }) => ({
- marginLeft: theme.spacing(1),
- color: theme.palette.text.disabled,
}));
-
-export const NetworkSwitcherWrapper = 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.div`
- display: flex;
- flex-direction: row;
- align-items: center;
- z-index: 1000;
- position: relative;
- @include mobile {
- width: 100%;
- justify-content: space-between;
- }
- a {
- cursor: pointer;
- }
-`;
-
-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 Dropdown = styled.div`
- display: flex;
- flex-direction: column;
- position: absolute;
- left: 0;
- top: 27px;
- background: #09162B;
- border-radius: 12px;
- padding: 15px;
- box-shadow: -13px 15px 39px rgba(0, 0, 0, 0.16), inset 53px 36px 120px rgba(255, 255, 255, 0.06);
- @include mobile {
- right: unset;
- left: 10px;
- width: 150px;
- }
- a {
- background-color: gray;
- transition: all 200ms ease-in-out;
- padding: 10px 15px;
- &:hover {
- background-color: gray;
- }
- }
- > p {
- cursor: pointer;
- }
-`;
-
-export const NetWorkStyle = styled.div`
- display: flex;
- flex-direction: row;
- align-items: center;
- cursor: ${(props) => props.walletEnabled !== false ? 'inherit' : 'pointer'};
-`;
diff --git a/packages/boba/gateway/src/components/mainMenu/themeSwitcher/ThemeSwitcher.styles.js b/packages/boba/gateway/src/components/mainMenu/themeSwitcher/ThemeSwitcher.styles.js
index fe29660700..1233b32947 100644
--- a/packages/boba/gateway/src/components/mainMenu/themeSwitcher/ThemeSwitcher.styles.js
+++ b/packages/boba/gateway/src/components/mainMenu/themeSwitcher/ThemeSwitcher.styles.js
@@ -7,7 +7,7 @@ export const ThemeSwitcherTag = styled(Box)(({ theme }) => ({
[ theme.breakpoints.down('md') ]: {
width: '100%',
marginTop: '20px',
- marginLeft: '10px'
+ padding: '0px 20px'
}
}));
diff --git a/packages/boba/gateway/src/components/modal/Modal.js b/packages/boba/gateway/src/components/modal/Modal.js
index 4a7073fdee..b842fcbea8 100644
--- a/packages/boba/gateway/src/components/modal/Modal.js
+++ b/packages/boba/gateway/src/components/modal/Modal.js
@@ -52,8 +52,9 @@ function _Modal({
open={open}
onClose={onClose}
ismobile={isMobile ? 1 : 0}
- // closeAfterTransition
- BackdropComponent={S.Backdrop}
+ slots={{
+ backdrop:S.Backdrop
+ }}
disableAutoFocus={true}
>
@@ -61,7 +62,7 @@ function _Modal({
{
!!newStyle ?
-
+
diff --git a/packages/boba/gateway/src/components/modal/Modal.styles.js b/packages/boba/gateway/src/components/modal/Modal.styles.js
index 8b08150e6a..90107ac8a0 100644
--- a/packages/boba/gateway/src/components/modal/Modal.styles.js
+++ b/packages/boba/gateway/src/components/modal/Modal.styles.js
@@ -27,9 +27,11 @@ export const Backdrop = styled('div')`
opacity: 0.8;
backdrop-filter: blur(10px);
-webkit-tap-highlight-color: transparent;
-`;
+`;
-export const Style = styled(Box)`
+export const Style = styled(Box, {
+ shouldForwardProp: (props) => props !== 'transparent' && props !== 'isMobile',
+})`
display: flex;
flex-direction: column;
justify-content: space-between;
@@ -61,7 +63,7 @@ export const WrapperActionsModal = styled(Box)`
margin-top: 50px;
`;
-
+
export const ModalHead = styled(Box)(({ theme }) => ({
display: "flex",
justifyContent: "space-between",
diff --git a/packages/boba/gateway/src/components/pageFooter/PageFooter.js b/packages/boba/gateway/src/components/pageFooter/PageFooter.js
index be30fe76fc..31f8782237 100644
--- a/packages/boba/gateway/src/components/pageFooter/PageFooter.js
+++ b/packages/boba/gateway/src/components/pageFooter/PageFooter.js
@@ -1,4 +1,3 @@
-import { IconButton } from '@mui/material'
import { Telegram, Twitter } from '@mui/icons-material'
import DiscordIcon from 'components/icons/DiscordIcon'
import React from 'react'
@@ -6,106 +5,156 @@ 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'
-import { ROUTES_PATH } from 'util/constant'
-
-const PageFooter = ({maintenance}) => {
+import { LAYER, ROUTES_PATH } from 'util/constant'
+import { useSelector } from 'react-redux'
+import { selectLayer } from 'selectors/setupSelector'
+import {
+ selectActiveNetwork,
+ selectActiveNetworkType,
+} from 'selectors/networkSelector'
+import { getBlockExplorerUrl } from 'util/network/network.util'
+const PageFooter = ({ maintenance }) => {
const theme = useTheme()
const isMobile = useMediaQuery(theme.breakpoints.down('md'))
+ const [isDiscordHover, setIsDiscordHover] = React.useState(false)
+
+ const layer = useSelector(selectLayer())
+ const network = useSelector(selectActiveNetwork())
+ const networkType = useSelector(selectActiveNetworkType())
- if(maintenance) {
+ if (maintenance) {
return (
+
+
+
+ 
+
+
+
+
+
+
+ Boba Docs
+
+
+
+
+
+
+
+ setIsDiscordHover(true)}
+ onMouseLeave={() => setIsDiscordHover(false)}
+ >
+
+
+
+
+
+
+ Boba Website
+
+
+
+
+ )
+ }
+ return (
-
-
-
-
-
-
-
- Boba Docs
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+ Boba Website
+ aria-label="discord"
+ onMouseEnter={() => setIsDiscordHover(true)}
+ onMouseLeave={() => setIsDiscordHover(false)}
+ >
+
+
+
+
+
+ {!isMobile && }
-
- )
- }
- return (
-
+
- {!isMobile && }
-
- FAQs
- Dev Tools
- BobaScope
- Blockexplorer
- Boba Docs
-
+
+ FAQs
+
+ Dev Tools
+
+ BobaScope
+
+ Blockexplorer
+
+
+ Boba Docs
+
+
-
-
-
-
-
-
-
-
-
-
- Boba Website
-
-
+
+ Boba Website
+
)
diff --git a/packages/boba/gateway/src/components/pageFooter/PageFooter.styles.js b/packages/boba/gateway/src/components/pageFooter/PageFooter.styles.js
index fa010b278c..92814d94e6 100644
--- a/packages/boba/gateway/src/components/pageFooter/PageFooter.styles.js
+++ b/packages/boba/gateway/src/components/pageFooter/PageFooter.styles.js
@@ -1,9 +1,10 @@
import { styled } from '@mui/material/styles'
import { Box, Divider } from '@mui/material'
-import { NavLink } from 'react-router-dom';
+import { NavLink } from 'react-router-dom'
+import { IconButton } from '@mui/material'
export const Wrapper = styled(Box)(({ theme }) => ({
- display: "flex",
+ display: 'flex',
flexDirection: 'column',
justifyContent: 'flex-start',
alignItems: 'center',
@@ -12,15 +13,13 @@ export const Wrapper = styled(Box)(({ theme }) => ({
//bottom: 0,
//width: '100%',
//height: '184px',
- background: theme.background,
- [ theme.breakpoints.down('md') ]: {
- marginTop: 0,
- height: '450px',
+ background: theme.palette.background.footer,
+ [theme.breakpoints.down('md')]: {
+ marginTop: '10px',
+ maxHeight: '400px',
justifyContent: 'flex-start',
padding: '0 20px',
},
- [ theme.breakpoints.up('md') ]: {
- },
}))
export const ContentWrapper = styled(Box)(({ theme }) => ({
@@ -28,20 +27,20 @@ export const ContentWrapper = styled(Box)(({ theme }) => ({
justifyContent: 'space-between',
width: '70%',
margin: '30px 0',
- [ theme.breakpoints.between('sm', 'md') ]: {
+ [theme.breakpoints.between('sm', 'md')]: {
width: '90%',
margin: '20px 0',
flexDirection: 'column',
justifyContent: 'center',
- gap: '20px'
+ gap: '20px',
},
- [ theme.breakpoints.down('md') ]: {
+ [theme.breakpoints.down('md')]: {
margin: '20px 0',
width: '100%',
flexDirection: 'column',
justifyContent: 'center',
- gap: '20px'
- }
+ gap: '20px',
+ },
}))
export const FooterLink = styled(NavLink)(({ theme }) => ({
@@ -52,9 +51,9 @@ export const FooterLink = styled(NavLink)(({ theme }) => ({
cursor: 'pointer',
color: 'unset',
'&:hover': {
- color: theme.palette.secondary.main,
+ color: theme.palette.primary.main,
},
-}));
+}))
export const FooterLinkExt = styled(Box)(({ theme }) => ({
//marginLeft: theme.spacing(1),
@@ -66,35 +65,46 @@ export const FooterLinkExt = styled(Box)(({ theme }) => ({
'&:hover': {
color: theme.palette.secondary.main,
},
-}));
+}))
export const FooterLogoWrapper = styled(Box)(({ theme }) => ({
display: 'flex',
alignSelf: 'flex-start',
- justifyContent: "center",
- alignItems: 'center'
+ justifyContent: 'center',
+ alignItems: 'center',
}))
export const FooterDivider = styled(Divider)(({ theme }) => ({
- background: `${ theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.04)' : 'rgba(3, 19, 19, 0.04)'}`,
+ background: `${
+ theme.palette.mode === 'dark'
+ ? 'rgba(255, 255, 255, 0.04)'
+ : 'rgba(3, 19, 19, 0.04)'
+ }`,
boxSizing: 'border-box',
- boxShadow: `${ theme.palette.mode === 'dark' ? '0px 4px 4px rgba(0, 0, 0, 0.25)' : 'none'}`,
- width: '100%'
+ boxShadow: `${
+ theme.palette.mode === 'dark' ? '0px 4px 4px rgba(0, 0, 0, 0.25)' : 'none'
+ }`,
+ width: '100%',
}))
export const FooterDividerMobile = styled(Divider)(({ theme }) => ({
display: 'none',
- [ theme.breakpoints.down('md') ]: {
+ [theme.breakpoints.down('md')]: {
display: 'block',
- background: `${ theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.04)' : 'rgba(3, 19, 19, 0.04)'}`,
+ background: `${
+ theme.palette.mode === 'dark'
+ ? 'rgba(255, 255, 255, 0.04)'
+ : 'rgba(3, 19, 19, 0.04)'
+ }`,
boxSizing: 'border-box',
- boxShadow: `${ theme.palette.mode === 'dark' ? '0px 4px 4px rgba(0, 0, 0, 0.25)' : 'none'}`,
- width: '100%'
- }
+ boxShadow: `${
+ theme.palette.mode === 'dark' ? '0px 4px 4px rgba(0, 0, 0, 0.25)' : 'none'
+ }`,
+ width: '100%',
+ },
}))
-export const FooterLinkWrapperLeft = styled(Box)(({ theme }) => ({
-}))
+export const FooterLinkWrapperLeft = styled(Box)(({ theme }) => ({}))
export const FooterLinkWrapper = styled(Box)(({ theme }) => ({
display: 'flex',
@@ -102,14 +112,15 @@ export const FooterLinkWrapper = styled(Box)(({ theme }) => ({
justifyContent: 'space-between',
alignItems: 'center',
width: '70%',
- margin: '20px auto',
- [ theme.breakpoints.down('md') ]: {
+ margin: '32px auto',
+ [theme.breakpoints.down('md')]: {
width: '100%',
justifyContent: 'space-around',
flexDirection: 'column',
margin: '0',
+ marginTop: '20px',
alignItems: 'flex-start',
- }
+ },
}))
export const LinkWrapper = styled(Box)(({ theme }) => ({
@@ -117,29 +128,42 @@ export const LinkWrapper = styled(Box)(({ theme }) => ({
width: '40%',
justifyContent: 'flex-start',
gap: '10px',
- [ theme.breakpoints.down('md') ]: {
+ [theme.breakpoints.down('md')]: {
flexDirection: 'column',
alignItems: 'flex-start',
- margin: '20px 0',
+ margin: '10px 0',
+ width: '100%',
+ gap: 0,
+ },
+ [theme.breakpoints.down('sm')]: {
+ width: '100%',
},
- [ theme.breakpoints.down('sm') ]: {
- width: '100%'
- }
}))
export const SocialWrapper = styled(Box)(({ theme }) => ({
display: 'flex',
width: '20%',
- justifyContent: 'flex-end',
+ justifyContent: 'flex-start',
gap: '10px',
- 'a': {
+ a: {
cursor: 'pointer',
},
- [ theme.breakpoints.down('md') ]: {
- justifyContent: 'flex-start',
+ [theme.breakpoints.down('md')]: {
+ justifyContent: 'center',
margin: '10px 0',
+ width: '100%',
+ },
+ [theme.breakpoints.down('sm')]: {
+ width: '100%',
+ },
+}))
+
+export const SocialButton = styled(IconButton)(({ theme }) => ({
+ opacity: 0.65,
+ '&:hover': {
+ background: 'none',
+ fill: theme.palette.primary.main,
+ color: theme.palette.primary.main,
+ opacity: 1,
},
- [ theme.breakpoints.down('sm') ]: {
- width: '100%'
- }
}))
diff --git a/packages/boba/gateway/src/components/pageHeader/PageHeader.js b/packages/boba/gateway/src/components/pageHeader/PageHeader.js
index eb4727f060..c36227d05c 100644
--- a/packages/boba/gateway/src/components/pageHeader/PageHeader.js
+++ b/packages/boba/gateway/src/components/pageHeader/PageHeader.js
@@ -7,7 +7,15 @@ import LayerSwitcher from 'components/mainMenu/layerSwitcher/LayerSwitcher'
import ThemeSwitcher from 'components/mainMenu/themeSwitcher/ThemeSwitcher'
import FeeSwitcher from 'components/mainMenu/feeSwitcher/FeeSwitcher'
import { useState } from 'react'
-import { Box, Container, Drawer, IconButton, Typography, useMediaQuery, useTheme } from '@mui/material'
+import {
+ Box,
+ Container,
+ Drawer,
+ IconButton,
+ Typography,
+ useMediaQuery,
+ useTheme,
+} from '@mui/material'
import NavIcon from 'components/icons/NavIcon'
import WalletIcon from 'components/icons/WalletIcon'
import CloseIcon from 'components/icons/CloseIcon'
@@ -15,30 +23,37 @@ import networkService from 'services/networkService'
import { makeStyles } from '@mui/styles'
import Copy from 'components/copy/Copy'
import { useSelector } from 'react-redux'
-import { selectAccountEnabled, selectMonster } from 'selectors/setupSelector'
+import {
+ selectAccountEnabled,
+ selectLayer,
+ selectMonster,
+} from 'selectors/setupSelector'
+import NetworkSwitcher from 'components/mainMenu/networkSwitcher/NetworkSwitcher'
+import WalletSwitch from 'components/walletSwitch/WalletSwitch'
+import { LAYER } from 'util/constant'
const useStyles = makeStyles({
root: {
- width: "100%",
- color: "f00",
+ width: '100%',
+ color: 'f00',
},
})
const PageHeader = ({ maintenance }) => {
-
const classes = useStyles()
// eslint-disable-next-line no-unused-vars
- const [ open, setOpen ] = useState()
- const [ walletOpen, setWalletOpen ] = useState()
- const [ feeOpen, setFeeOpen ] = useState()
+ const [open, setOpen] = useState()
+ const [walletOpen, setWalletOpen] = useState()
+ const [feeOpen, setFeeOpen] = useState()
const theme = useTheme()
const accountEnabled = useSelector(selectAccountEnabled())
+ const layer = useSelector(selectLayer())
const monsterNumber = useSelector(selectMonster())
const isMobile = useMediaQuery(theme.breakpoints.down('md'))
let Logo = BobaLogo
- if(monsterNumber>0) Logo = BobaLogoM
+ if (monsterNumber > 0) Logo = BobaLogoM
if (maintenance) {
return (
@@ -51,77 +66,114 @@ const PageHeader = ({ maintenance }) => {
return (
<>
- {
- isMobile ? (
-
-
-
-
- setFeeOpen(!feeOpen)} sx={{ cursor: 'pointer' }}>
- Fee
-
- setWalletOpen(!walletOpen)} sx={{ cursor: 'pointer' }}>
-
-
- setOpen(!open)} sx={{ cursor: 'pointer' }}>
-
-
-
- setOpen(false)} classes={{ paper: classes.root }}>
-
-
-
- Menu
- setOpen(false)}>
-
-
-
-
-
-
-
-
-
- setWalletOpen(false)} classes={{ paper: classes.root }}>
-
-
-
- Connect wallet
- setWalletOpen(false)}>
-
-
-
-
-
-
-
-
- setFeeOpen(false)} classes={{ paper: classes.root }}>
-
-
-
- Select Fee
- setFeeOpen(false)}>
-
-
-
-
-
-
-
-
-
-
- )
- : (
-
-
-
-
- {!!accountEnabled ? : null}
-
- )
- }
+ {isMobile ? (
+
+
+
+
+ setFeeOpen(!feeOpen)}
+ sx={{ cursor: 'pointer' }}
+ >
+
+ Fee
+
+
+ setWalletOpen(!walletOpen)}
+ sx={{ cursor: 'pointer' }}
+ >
+
+
+ setOpen(!open)} sx={{ cursor: 'pointer' }}>
+
+
+
+ setOpen(false)}
+ classes={{ paper: classes.root }}
+ >
+
+
+
+
+ Menu
+
+ setOpen(false)}>
+
+
+
+
+
+
+
+
+
+ setWalletOpen(false)}
+ classes={{ paper: classes.root }}
+ >
+
+
+
+
+ Connect wallet
+
+ setWalletOpen(false)}
+ >
+
+
+
+
+
+
+
+
+ setFeeOpen(false)}
+ classes={{ paper: classes.root }}
+ >
+
+
+
+
+ Select Fee
+
+ setFeeOpen(false)}>
+
+
+
+
+
+ {layer === LAYER.L2 ? (
+
+ ) : null}
+
+
+
+
+ ) : (
+
+
+
+ {layer === LAYER.L2 ? : null}
+
+
+ {!!accountEnabled ? (
+
+ ) : null}
+
+
+ )}
)
}
diff --git a/packages/boba/gateway/src/components/seven/FastExit.js b/packages/boba/gateway/src/components/seven/FastExit.js
index 93ea6bab8b..0aba0b2171 100644
--- a/packages/boba/gateway/src/components/seven/FastExit.js
+++ b/packages/boba/gateway/src/components/seven/FastExit.js
@@ -18,9 +18,8 @@ import React from 'react'
import { Typography } from '@mui/material'
import * as S from './Transaction.styles'
-import { selectNetwork } from 'selectors/setupSelector'
-import { useSelector } from 'react-redux'
-import { getNetwork } from 'util/masterConfig'
+
+import networkService from 'services/networkService'
function FastExit({
link,
@@ -33,13 +32,10 @@ function FastExit({
unixTime
}) {
- const currentNetwork = useSelector(selectNetwork())
- const nw = getNetwork()
const chainLink = ({hash}) => {
- let network = nw[currentNetwork]
- if (!!network && !!network['L2']) {
- return `${network['L2'].transaction}${hash}`
+ if (networkService.networkConfig[ 'L2' ]) {
+ return `${networkService.networkConfig['L2'].transaction}${hash}`
}
return ''
}
diff --git a/packages/boba/gateway/src/components/seven/Seven.js b/packages/boba/gateway/src/components/seven/Seven.js
index 71a8ca28b0..83b80e7d2d 100644
--- a/packages/boba/gateway/src/components/seven/Seven.js
+++ b/packages/boba/gateway/src/components/seven/Seven.js
@@ -18,9 +18,8 @@ import React from 'react'
import { Typography } from '@mui/material'
import * as S from './Transaction.styles'
-import { selectNetwork } from 'selectors/setupSelector'
-import { useSelector } from 'react-redux'
-import { getNetwork } from 'util/masterConfig'
+
+import networkService from 'services/networkService'
function Seven({
link,
@@ -33,13 +32,10 @@ function Seven({
unixTime
}) {
- const currentNetwork = useSelector(selectNetwork())
- const nw = getNetwork()
const chainLink = ({hash}) => {
- let network = nw[currentNetwork]
- if (!!network && !!network['L2']) {
- return `${network['L2'].transaction}${hash}`
+ if (networkService.networkConfig[ 'L2' ]) {
+ return `${networkService.networkConfig['L2'].transaction}${hash}`
}
return ''
}
diff --git a/packages/boba/gateway/src/components/showMoreShowLess/ShowMoreShowLess.js b/packages/boba/gateway/src/components/showMoreShowLess/ShowMoreShowLess.js
new file mode 100644
index 0000000000..baf67aea08
--- /dev/null
+++ b/packages/boba/gateway/src/components/showMoreShowLess/ShowMoreShowLess.js
@@ -0,0 +1,35 @@
+import React, { useState } from 'react'
+import { Typography } from '@mui/material';
+
+const ShowMoreShowLess = ({
+ children,
+ limit = 50,
+ sx
+}) => {
+ const text = children;
+
+ const [ showMore, setshowMore ] = useState(false);
+
+ return (
+
+ {showMore ? text : text.substr(0, limit)}
+ {text.length > limit ?
+ setshowMore(!showMore)}
+ >
+ {showMore ? 'show less' : '... show more'}
+
+ : null}
+
+ )
+
+}
+
+export default ShowMoreShowLess
diff --git a/packages/boba/gateway/src/components/tabs/Tabs.styles.js b/packages/boba/gateway/src/components/tabs/Tabs.styles.js
index 5c630f7a3c..d0bf0af7a0 100644
--- a/packages/boba/gateway/src/components/tabs/Tabs.styles.js
+++ b/packages/boba/gateway/src/components/tabs/Tabs.styles.js
@@ -1,35 +1,42 @@
-import styled from '@emotion/styled';
-import {Box} from '@mui/material';
+import styled from '@emotion/styled'
+import { Box } from '@mui/material'
-export const Tabs = styled(Box)(({theme})=>({
- display: 'flex',
- flexDirection: 'row',
- justifyContent: 'flex-start',
- flex: 1,
- marginBottom: '20px',
- borderBottom: theme.palette.primary.borderBottom,
- [theme.breakpoints.down('md')]:{
- width: '100%'
- }
-}));
+export const Tabs = styled(Box)(({ theme }) => ({
+ display: 'flex',
+ flexDirection: 'row',
+ justifyContent: 'flex-start',
+ flex: 1,
+ marginBottom: '20px',
+ borderBottom: theme.palette.primary.borderBottom,
+ [theme.breakpoints.down('md')]: {
+ width: '100%',
+ },
+}))
export const TabItem = styled(Box)(({ theme }) => ({
- opacity: 0.7,
- transition: 'color 200ms ease-in-out',
- cursor: 'pointer',
- marginRight: '20px',
- '&:hover': {
- opacity: 1,
- },
- '&.active': {
- color: `${theme.palette.mode === 'light' ? theme.palette.primary.main : theme.palette.neutral.main }`,
- opacity: 1,
- borderBottom: theme.palette.primary.tabBorderBottom,
- marginBottom: '-2px',
- zIndex: 1,
- },
- [theme.breakpoints.down('md')]: {
- flex: 1,
- textAlign: 'center'
- }
+ opacity: 0.7,
+ transition: 'color 200ms ease-in-out',
+ cursor: 'pointer',
+ marginRight: '20px',
+ textTransform: 'capitalize',
+ '&:hover': {
+ opacity: 1,
+ },
+ '&.active': {
+ color: `${
+ theme.palette.mode === 'light'
+ ? theme.palette.primary.main
+ : theme.palette.neutral.main
+ }`,
+ opacity: 1,
+ borderBottom: theme.palette.primary.tabBorderBottom,
+ marginBottom: '-2px',
+ zIndex: 1,
+ borderImage: 'linear-gradient(87.16deg, #CBFE00 15.05%, #1CD6D1 79.66%);',
+ borderImageSlice: 1,
+ },
+ [theme.breakpoints.down('md')]: {
+ flex: 1,
+ textAlign: 'center',
+ },
}))
diff --git a/packages/boba/gateway/src/components/tooltip/Tooltip.js b/packages/boba/gateway/src/components/tooltip/Tooltip.js
index a8042c9f28..c8e7adcd54 100644
--- a/packages/boba/gateway/src/components/tooltip/Tooltip.js
+++ b/packages/boba/gateway/src/components/tooltip/Tooltip.js
@@ -1,25 +1,20 @@
-import React from 'react';
-import { Tooltip as MuiTooltip } from '@mui/material';
+import React from 'react'
+import { Tooltip as MuiTooltip } from '@mui/material'
+import * as styles from './Tooltip.module.scss'
-import * as styles from './Tooltip.module.scss';
-
-function Tooltip ({
- title,
- arrow = true,
- children
-}) {
- return (
-
- {title}
-
- }
- arrow={arrow}
- >
- {children}
-
- );
+function Tooltip({ title, arrow = true, children }) {
+ if (title) {
+ return (
+