Skip to content

Commit

Permalink
complete rewrite of the gateway<>MM interactions
Browse files Browse the repository at this point in the history
  • Loading branch information
@CAPtheorem
CAPtheorem committed Apr 18, 2022
1 parent 111ad65 commit aa65e64
Show file tree
Hide file tree
Showing 7 changed files with 208 additions and 138 deletions.
18 changes: 18 additions & 0 deletions packages/boba/gateway/src/actions/setupAction.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,3 +68,21 @@ export function getETHMetaTransaction() {
export async function addBobaFee ( bobaFee ) {
store.dispatch({ type: 'BOBAFEE/ADD/SUCCESS', payload: bobaFee })
}

export function setConnectETH( state ) {
return function (dispatch) {
return dispatch({ type: 'SETUP/CONNECT_ETH', payload: state })
}
}

export function setConnectBOBA( state ) {
return function (dispatch) {
return dispatch({ type: 'SETUP/CONNECT_BOBA', payload: state })
}
}

export function setConnect( state ) {
return function (dispatch) {
return dispatch({ type: 'SETUP/CONNECT', payload: state })
}
}
151 changes: 109 additions & 42 deletions packages/boba/gateway/src/components/mainMenu/layerSwitcher/LayerSwitcher.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,18 @@ import { useTheme } from '@mui/styles'
import { switchChain, setLayer } from 'actions/setupAction.js'
import BobaIcon from 'components/icons/BobaIcon.js'
import EthereumIcon from 'components/icons/EthereumIcon.js'
import React, { useCallback } from 'react'
import React, { useCallback, useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { selectAccountEnabled, selectNetwork, selectLayer } from 'selectors/setupSelector'

import {
selectAccountEnabled,
selectNetwork,
selectLayer,
selectConnectETH,
selectConnectBOBA,
selectConnect
} from 'selectors/setupSelector'

import * as S from './LayerSwitcher.styles.js'

import networkService from 'services/networkService'
Expand All @@ -31,7 +40,7 @@ import Button from 'components/button/Button.js'

import {
setEnableAccount,
setWalletAddress
setWalletAddress,
} from 'actions/setupAction'

import {
Expand All @@ -56,12 +65,20 @@ function LayerSwitcher({
let layer = useSelector(selectLayer())
const network = useSelector(selectNetwork())

const connectETHRequest = useSelector(selectConnectETH())
const connectBOBARequest = useSelector(selectConnectBOBA())
const connectRequest = useSelector(selectConnect())

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, '...') : ''

const chainChangedFromMM = JSON.parse(localStorage.getItem('chainChangedFromMM'))
const wantChain = JSON.parse(localStorage.getItem('wantChain'))
const chainChangedInit = JSON.parse(localStorage.getItem('chainChangedInit'))
console.log("chainChangedInit:", chainChangedInit)

const dispatchSwitchLayer = useCallback((targetLayer) => {

Expand All @@ -75,7 +92,7 @@ function LayerSwitcher({
connectToETH()
}

}, [ dispatch, layer ])
}, [ connectToBOBA, connectToETH ])

const dispatchBootAccount = useCallback(() => {

Expand Down Expand Up @@ -112,17 +129,67 @@ function LayerSwitcher({

}, [ dispatch, accountEnabled, network ])

useEffect(() => {
// detect mismatch and correct the mismatch
if (wantChain === 'L1' && layer === 'L2') {
dispatchBootAccount()
}
else if (wantChain === 'L2' && layer === 'L1')
{
dispatchBootAccount()
}
}, [ wantChain, layer, dispatchBootAccount ])

useEffect(() => {
// auto reconnect to MM if we just switched chains from
// with the chain switcher, and then unset the flag.
if (chainChangedInit) {
dispatchBootAccount()
localStorage.setItem('chainChangedInit', false)
}
}, [ chainChangedInit, dispatchBootAccount ])

useEffect(() => {
// auto reconnect to MM if we just switched chains from
// inside MM, and then unset the flag.
if (chainChangedFromMM) {
dispatchBootAccount()
localStorage.setItem('chainChangedFromMM', false)
}
}, [ chainChangedFromMM, dispatchBootAccount ])

useEffect(() => {
if(connectETHRequest) {
localStorage.setItem('wantChain', JSON.stringify('L1'))
networkService.switchChain('L1')
dispatchBootAccount()
}
}, [ connectETHRequest, dispatchBootAccount ])

useEffect(() => {
if(connectBOBARequest) {
localStorage.setItem('wantChain', JSON.stringify('L2'))
networkService.switchChain('L2')
dispatchBootAccount()
}
}, [ connectBOBARequest, dispatchBootAccount ])

useEffect(() => {
if(connectRequest) {
dispatchBootAccount()
}
}, [ connectRequest, dispatchBootAccount ])

// this will switch chain, if needed, and then connect to Boba
async function connectToBOBA () {
console.log("connecting to Boba")
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 () {
console.log("connecting to Ethereum")
localStorage.setItem('wantChain', JSON.stringify('L1'))
await networkService.switchChain('L1')
await dispatchBootAccount()
}
Expand All @@ -133,42 +200,42 @@ function LayerSwitcher({
await dispatchBootAccount()
}

// single button labeled "connect to boba"
if (buttonConnectToBoba) {
return (
<S.LayerSwitcherWrapperMobile>
<S.LayerWrapper>
<Button
type="primary"
variant="contained"
size='small'
fullWidth={fullWidth}
onClick={()=>connectToBOBA()}
>
Connect To Boba
</Button>
</S.LayerWrapper>
</S.LayerSwitcherWrapperMobile>
)
}
// single button labelled "connect"
else if (buttonConnect) {
return (
<S.LayerSwitcherWrapperMobile>
<S.LayerWrapper>
<Button
type="primary"
variant="contained"
size='small'
fullWidth={fullWidth}
onClick={()=>connect()}
>
Connect
</Button>
</S.LayerWrapper>
</S.LayerSwitcherWrapperMobile>
)
}
// // single button labeled "connect to boba"
// if (buttonConnectToBoba) {
// return (
// <S.LayerSwitcherWrapperMobile>
// <S.LayerWrapper>
// <Button
// type="primary"
// variant="contained"
// size='small'
// fullWidth={fullWidth}
// onClick={()=>connectToBOBA()}
// >
// Connect To Boba
// </Button>
// </S.LayerWrapper>
// </S.LayerSwitcherWrapperMobile>
// )
// }
// // single button labelled "connect"
// else if (buttonConnect) {
// return (
// <S.LayerSwitcherWrapperMobile>
// <S.LayerWrapper>
// <Button
// type="primary"
// variant="contained"
// size='small'
// fullWidth={fullWidth}
// onClick={()=>connect()}
// >
// Connect
// </Button>
// </S.LayerWrapper>
// </S.LayerSwitcherWrapperMobile>
// )
// }

// if (isMobile) {
// return (
Expand Down
95 changes: 8 additions & 87 deletions packages/boba/gateway/src/containers/bridge/bobaBridge/bobaBridge.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,9 @@ import { openModal } from 'actions/uiAction'
import {
setEnableAccount,
setWalletAddress,
setLayer
setLayer,
setConnectETH,
setConnectBOBA
} from 'actions/setupAction'

import {
Expand All @@ -45,107 +47,26 @@ function BobaBridge() {
const multibridgeMode = useSelector(selectMultiBridgeMode())
const tokens = useSelector(selectBridgeTokens())
const dispatch = useDispatch()

const [ toL2, setToL2 ] = useState(true)

const theme = useTheme()
const iconColor = theme.palette.mode === 'dark' ? '#fff' : '#000'

const network = useSelector(selectNetwork())
const chainChangedFromMM = JSON.parse(localStorage.getItem('chainChangedFromMM'))
const chainChangedInit = JSON.parse(localStorage.getItem('chainChangedInit'))
//localStorage.setItem('wantChain', JSON.stringify('L2'))
const wantChain = JSON.parse(localStorage.getItem('wantChain'))

console.log("chainChangedFromMM:", chainChangedFromMM)
console.log("chainChangedInit:", chainChangedInit)
console.log("wantChain:", wantChain)

const dispatchBootAccount = useCallback(() => {

if (!accountEnabled) initializeAccount()

async function initializeAccount() {

const initialized = await networkService.initializeAccount(network)

console.log("initialized:",initialized)

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)
dispatch(setLayer(initialized))
dispatch(setEnableAccount(true))
dispatch(setWalletAddress(networkService.account))
dispatch(fetchTransactions())
dispatch(fetchBalances())
return true
}
else {
return false
}
}

}, [ dispatch, accountEnabled, network ])

useEffect(() => {
// detect mismatch and correct the mismatch
if (wantChain === 'L1' && layer === 'L2') {
dispatchBootAccount()
}
else if (wantChain === 'L2' && layer === 'L1')
{
dispatchBootAccount()
}
}, [ wantChain, layer, dispatchBootAccount ])

useEffect(() => {
// auto reconnect to MM if we just switched chains from
// with the chain switcher, and then unset the flag.
if (chainChangedInit) {
dispatchBootAccount()
localStorage.setItem('chainChangedInit', false)
}
}, [ chainChangedInit, dispatchBootAccount ])

useEffect(() => {
// auto reconnect to MM if we just switched chains from
// inside MM, and then unset the flag.
if (chainChangedFromMM) {
dispatchBootAccount()
localStorage.setItem('chainChangedFromMM', false)
}
}, [ chainChangedFromMM, dispatchBootAccount ])


async function connectToETH () {
console.log("connecting to eth")
localStorage.setItem('wantChain', JSON.stringify('L1'))
await networkService.switchChain('L1')
await dispatchBootAccount()
dispatch(setConnectETH(true))
}

async function connectToBOBA () {
console.log("connecting to boba")
localStorage.setItem('wantChain', JSON.stringify('L2'))
await networkService.switchChain('L2')
await dispatchBootAccount()
dispatch(setConnectBOBA(true))
}

async function switchDirection () {
console.log("layer:",layer)
if(accountEnabled) {
if(layer === 'L1')
await connectToBOBA()
dispatch(setConnectBOBA(true))
else
await connectToETH()
dispatch(setConnectETH(true))
} else {
setToL2(!toL2)
}
Expand Down
Loading

0 comments on commit aa65e64

Please sign in to comment.