From ceea452dc35eefd847a0fe359607162e19a9b391 Mon Sep 17 00:00:00 2001 From: CAPtheorem <79423264+CAPtheorem@users.noreply.github.com> Date: Tue, 19 Apr 2022 10:25:15 -0700 Subject: [PATCH] Gateway Visuals (#117) * increase legibility * remove stale code; create global style file * further simplification * fix bridging status indicator * connect flow improvments * almost done * debug switching * complete rewrite of the gateway<>MM interactions * rewrite of the connection, switching, and layer system --- .../boba/gateway/src/actions/setupAction.js | 18 + .../src/components/listToken/listToken.js | 1 + .../components/listToken/listToken.styles.js | 11 +- .../mainMenu/layerSwitcher/LayerSwitcher.js | 362 +++++++++++------- .../mainMenu/menuItems/MenuItems.styles.js | 14 +- .../src/components/pageTitle/PageTitle.js | 12 +- .../src/components/pulse/PulsingBadge.js | 155 ++++++++ .../boba/gateway/src/components/tabs/Tabs.js | 26 +- .../src/components/tabs/Tabs.styles.js | 7 +- .../components/walletpicker/WalletPicker.js | 110 ------ .../walletpicker/WalletPicker.styles.js | 95 ----- .../gateway/src/containers/Global.styles.js | 126 ++++++ .../gateway/src/containers/account/Account.js | 301 --------------- .../containers/account/Account.module.scss | 300 --------------- .../src/containers/account/Account.styles.js | 148 ------- .../src/containers/account/tableHeadList.js | 14 - .../gateway/src/containers/airdrop/Airdrop.js | 58 +-- .../src/containers/bobaScope/BobaScope.js | 96 ++--- .../gateway/src/containers/bridge/Bridge.js | 2 +- .../bridge/bobaBridge/bobaBridge.js | 186 ++++----- .../gateway/src/containers/connect/Connect.js | 71 ++++ .../boba/gateway/src/containers/dao/Dao.js | 79 ++-- .../gateway/src/containers/dao/Dao.styles.js | 10 +- .../containers/ecosystem/Ecosystem.styles.js | 112 +++--- .../src/containers/ecosystem/project.list.js | 14 +- .../boba/gateway/src/containers/farm/Farm.js | 114 ++---- .../src/containers/farm/Farm.styles.js | 38 +- .../boba/gateway/src/containers/help/Help.js | 46 ++- .../gateway/src/containers/history/History.js | 33 +- .../boba/gateway/src/containers/home/Home.js | 4 - .../modals/exit/steps/DoExitStep.js | 9 +- .../modals/exit/steps/DoExitStepFast.js | 2 +- .../gateway/src/containers/monster/Monster.js | 76 +--- .../boba/gateway/src/containers/save/Save.js | 38 +- .../gateway/src/containers/status/Status.js | 169 -------- .../src/containers/status/Status.module.scss | 71 ---- .../gateway/src/containers/wallet/Wallet.js | 124 ++---- .../gateway/src/containers/wallet/nft/Nft.js | 58 ++- .../src/containers/wallet/nft/Nft.styles.js | 233 +---------- .../src/containers/wallet/token/Token.js | 99 ++++- .../containers/wallet/token/Token.styles.js | 100 +---- .../src/containers/wallet/wallet.styles.js | 74 +--- packages/boba/gateway/src/layout/index.js | 38 +- .../boba/gateway/src/reducers/setupReducer.js | 20 +- .../gateway/src/selectors/setupSelector.js | 18 + .../gateway/src/services/networkService.js | 41 +- 46 files changed, 1202 insertions(+), 2531 deletions(-) create mode 100644 packages/boba/gateway/src/components/pulse/PulsingBadge.js delete mode 100644 packages/boba/gateway/src/components/walletpicker/WalletPicker.js delete mode 100644 packages/boba/gateway/src/components/walletpicker/WalletPicker.styles.js create mode 100644 packages/boba/gateway/src/containers/Global.styles.js delete mode 100644 packages/boba/gateway/src/containers/account/Account.js delete mode 100644 packages/boba/gateway/src/containers/account/Account.module.scss delete mode 100644 packages/boba/gateway/src/containers/account/Account.styles.js delete mode 100644 packages/boba/gateway/src/containers/account/tableHeadList.js create mode 100644 packages/boba/gateway/src/containers/connect/Connect.js delete mode 100644 packages/boba/gateway/src/containers/status/Status.js delete mode 100644 packages/boba/gateway/src/containers/status/Status.module.scss diff --git a/packages/boba/gateway/src/actions/setupAction.js b/packages/boba/gateway/src/actions/setupAction.js index da48e36dad..abacd13429 100644 --- a/packages/boba/gateway/src/actions/setupAction.js +++ b/packages/boba/gateway/src/actions/setupAction.js @@ -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 }) + } +} diff --git a/packages/boba/gateway/src/components/listToken/listToken.js b/packages/boba/gateway/src/components/listToken/listToken.js index ba18a9c161..560c72aab3 100644 --- a/packages/boba/gateway/src/components/listToken/listToken.js +++ b/packages/boba/gateway/src/components/listToken/listToken.js @@ -22,6 +22,7 @@ function ListToken({ const [ sliderValue_v1, setSliderValue_v1 ] = useState(55) const theme = useTheme() + const isMobile = useMediaQuery(theme.breakpoints.down('md')) const dispatch = useDispatch(); const enabled = (networkLayer === chain) ? true : false diff --git a/packages/boba/gateway/src/components/listToken/listToken.styles.js b/packages/boba/gateway/src/components/listToken/listToken.styles.js index 3dd4ab7baa..b1278b89d5 100644 --- a/packages/boba/gateway/src/components/listToken/listToken.styles.js +++ b/packages/boba/gateway/src/components/listToken/listToken.styles.js @@ -1,20 +1,15 @@ import { styled } from '@mui/material/styles' -import { Box, Typography } from '@mui/material'; +import { Box, Typography } from '@mui/material' export const Content = styled(Box)(({ theme }) => ({ display: 'flex', flexDirection: 'column', gap: '20px', - marginBottom: '5px', width: '100%', padding: '10px', - borderBottom: '1px solid rgba(255, 255, 255, 0.04)', - [ theme.breakpoints.down('sm') ]: { - padding: '10px 5px', - } + borderBottom: theme.palette.primary.borderBottom })) - export const TableBody = styled(Box)(({ theme }) => ({ display: 'flex', alignItems: 'center', @@ -36,13 +31,11 @@ export const TableCell = styled(Box)(({ theme, isMobile }) => ({ } })); - export const TextTableCell = styled(Typography)` opacity: ${(props) => !props.enabled ? "0.4" : "1.0"}; font-weight: 700; `; - export const DropdownWrapper = styled(Box)(({ theme }) => ({ display: 'flex', justifyContent: 'center', diff --git a/packages/boba/gateway/src/components/mainMenu/layerSwitcher/LayerSwitcher.js b/packages/boba/gateway/src/components/mainMenu/layerSwitcher/LayerSwitcher.js index 1b8db29e3d..31e3ae16cf 100644 --- a/packages/boba/gateway/src/components/mainMenu/layerSwitcher/LayerSwitcher.js +++ b/packages/boba/gateway/src/components/mainMenu/layerSwitcher/LayerSwitcher.js @@ -14,185 +14,257 @@ 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 { IconButton, Typography, useMediaQuery, ToggleButtonGroup, ToggleButton, SvgIcon } from '@mui/material' +import { Typography, useMediaQuery, ToggleButtonGroup, ToggleButton } from '@mui/material' import { useTheme } from '@mui/styles' -import { switchChain, setLayer } from 'actions/setupAction.js' +import { 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, 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' import truncate from 'truncate-middle' -import WalletPicker from 'components/walletpicker/WalletPicker.js' -import Button from 'components/button/Button.js' -function LayerSwitcher({ isIcon = false, isButton = false, size, fullWidth = false }) { +import { + setEnableAccount, + setWalletAddress, +} from 'actions/setupAction' + +import { + fetchTransactions, + fetchBalances +} from 'actions/networkAction' + +import { openModal } from 'actions/uiAction' + +function LayerSwitcher({ + isIcon = false, + isButton = false, + size, + fullWidth = false, + buttonConnectToBoba = false, + buttonConnect = false +}) { const dispatch = useDispatch() const accountEnabled = useSelector(selectAccountEnabled()) 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) => { - dispatch(setLayer(layer)) - if (!layer && targetLayer === 'L1') { - dispatch(switchChain('L1')) + + 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() + } + + }, [ connectToBOBA, connectToETH ]) + + 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() } - else if (!layer && targetLayer === 'L2') { - dispatch(switchChain('L2')) + }, [ 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) } - else if (layer === 'L1' && targetLayer === 'L2') { - dispatch(setLayer(null)) - dispatch(switchChain('L2')) + }, [ 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) } - else if (layer === 'L2' && targetLayer === 'L1') { - dispatch(setLayer(null)) - dispatch(switchChain('L1')) + }, [ chainChangedFromMM, dispatchBootAccount ]) + + useEffect(() => { + if(connectETHRequest) { + localStorage.setItem('wantChain', JSON.stringify('L1')) + networkService.switchChain('L1') + dispatchBootAccount() } - else { - // do nothing - we are on the correct chain + }, [ connectETHRequest, dispatchBootAccount ]) + + useEffect(() => { + if(connectBOBARequest) { + localStorage.setItem('wantChain', JSON.stringify('L2')) + networkService.switchChain('L2') + dispatchBootAccount() } - }, [ dispatch, layer ]) + }, [ connectBOBARequest, dispatchBootAccount ]) + useEffect(() => { + if(connectRequest) { + dispatchBootAccount() + } + }, [ connectRequest, dispatchBootAccount ]) - if (!accountEnabled) { - return null + // this will switch chain, if needed, and then connect to Boba + async function connectToBOBA () { + localStorage.setItem('wantChain', JSON.stringify('L2')) + await networkService.switchChain('L2') + await dispatchBootAccount() } - if (isButton) { - return ( - - - {!layer ? : layer === 'L1' ? - : - - } - - - ) + // this will switch chain, if needed, and then connect to Ethereum + async function connectToETH () { + localStorage.setItem('wantChain', JSON.stringify('L1')) + await networkService.switchChain('L1') + await dispatchBootAccount() } - if (isIcon) { - return ( - <> - {layer === 'L1' ? - { dispatchSwitchLayer('L2') }} - > - - - - - - : - { dispatchSwitchLayer('L1') }} - > - - - - - - - } - - ) + // this will connect to whatever is set in MM + async function connect () { + console.log("connecting to chain set in MM") + await dispatchBootAccount() } - if (isMobile) { - return ( - - - - - - - Ethereum - {layer === 'L1' ? - {wAddress} : - Not Connected - } - - {!layer ? : layer === 'L1' ? null : - } - - - - - - - - - Boba Network - {layer === 'L2' ? - {wAddress} : - Not Connected - } - - {!layer ? : layer === 'L2' ? null : - - } - - - ) - } + // if (isMobile) { + // return ( + // + // + // + // + // + // + // Ethereum + // {layer === 'L1' ? + // {wAddress} : + // Not Connected + // } + // + // {!layer ? : layer === 'L1' ? null : + // } + // + // + // + // + // + // + // + // + // Boba Network + // {layer === 'L2' ? + // {wAddress} : + // Not Connected + // } + // + // {!layer ? : layer === 'L2' ? null : + // + // } + // + // + // ) + // } return ( @@ -221,7 +293,7 @@ function LayerSwitcher({ isIcon = false, isButton = false, size, fullWidth = fal }} >Select chain to connect : null} {layer === 'L2' ? - Boba Network + Boba {wAddress} : null} ) 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 b39e3cfff3..308ddeb601 100644 --- a/packages/boba/gateway/src/components/mainMenu/menuItems/MenuItems.styles.js +++ b/packages/boba/gateway/src/components/mainMenu/menuItems/MenuItems.styles.js @@ -1,4 +1,4 @@ -// import bobaIcon from 'images/boba2/boba2Icon.svg' + import { Box } from '@mui/material' import { styled } from '@mui/material/styles' @@ -28,18 +28,6 @@ export const MenuItem = styled(Box)(({ selected, theme }) => ({ fontWeight: 'normal', cursor: 'pointer', height: '22px', - // [ theme.breakpoints.up('md') ]: { - // '&:before': { - // 'content': '" "', - // display: 'inline-block', - // visibility: `${selected ? 'visible': 'hidden'}`, - // height: '20px', - // width: '20px', - // backgroundImage: `url(${bobaIcon})`, - // backgroundRepeat: 'no-repeat', - // backgroundPosition: 'center', - // } - // }, [ theme.breakpoints.down('md') ]: { fontSize: '20px', fontWeight: '400', diff --git a/packages/boba/gateway/src/components/pageTitle/PageTitle.js b/packages/boba/gateway/src/components/pageTitle/PageTitle.js index 7098697787..3003fffbeb 100644 --- a/packages/boba/gateway/src/components/pageTitle/PageTitle.js +++ b/packages/boba/gateway/src/components/pageTitle/PageTitle.js @@ -1,14 +1,16 @@ -import { Typography } from '@mui/material' +import { Typography, Box } from '@mui/material' import React from 'react' import * as S from './PageTitle.styles' -const PageTitle = ({ title , sx}) => { +const PageTitle = ({ title, sx }) => { return ( - - {title} - + + + {title} + + ) } diff --git a/packages/boba/gateway/src/components/pulse/PulsingBadge.js b/packages/boba/gateway/src/components/pulse/PulsingBadge.js new file mode 100644 index 0000000000..ede9cff4bd --- /dev/null +++ b/packages/boba/gateway/src/components/pulse/PulsingBadge.js @@ -0,0 +1,155 @@ +import React from "react" + +import { makeStyles } from '@mui/styles' +import { red, lightBlue, yellow, green } from '@mui/material/colors' + +import clsx from "clsx" + +const warningColor = yellow[200] + +const useStyles = makeStyles(theme => ({ + container: { + position: "relative", + display: "inline-block" + }, + badge: { + display: "flex", + direction: "row", + alignItems: "center", + justifyContent: "center", + paddingLeft: '5px' + }, + dangerBadge: { + color: red[500] + }, + warningBadge: { + color: warningColor + }, + infoBadge: { + color: lightBlue[500] + }, + successBadge: { + color: green[500] + }, + badgeBorder: { + borderRadius: theme.shape.borderRadius + 15 + }, + dangerBadgeBorder: { + border: `1px solid ${red[500]}` + }, + warningBadgeBorder: { + border: `1px solid ${warningColor}` + }, + infoBadgeBorder: { + border: `1px solid ${lightBlue[500]}` + }, + successBadgeBorder: { + border: `1px solid ${green[500]}` + }, + text: { + marginRight: 5 + }, + circle: { + margin: 5, + width: 8, + height: 8, + borderRadius: "50%" + }, + warningCircle: { + backgroundColor: warningColor, + boxShadow: `0 0 0 ${warningColor}`, + animation: `$pulsing-warning 1500ms ${ + theme.transitions.easing.easeOut + } infinite` + }, + dangerCircle: { + backgroundColor: red[500], + boxShadow: `0 0 0 ${red[500]}`, + animation: `$pulsing-danger 1500ms ${ + theme.transitions.easing.easeOut + } infinite` + }, + infoCircle: { + backgroundColor: lightBlue[500], + boxShadow: `0 0 0 ${lightBlue[500]}`, + animation: `$pulsing-info 1500ms ${ + theme.transitions.easing.easeOut + } infinite` + }, + successCircle: { + backgroundColor: green[500], + boxShadow: `0 0 0 ${green[500]}`, + animation: `$pulsing-success 1500ms ${ + theme.transitions.easing.easeOut + } infinite` + }, + + "@keyframes pulsing-danger": { + "0%": { + boxShadow: `0 0 0 0 ${red[500]}` + }, + "70%": { + boxShadow: `0 0 0 4px ${red[500]}` + }, + "100%": { + boxShadow: `0 0 0 0 ${red[500]}` + } + }, + "@keyframes pulsing-warning": { + "0%": { + boxShadow: `0 0 0 0 ${warningColor}` + }, + "70%": { + boxShadow: `0 0 0 4px ${warningColor}` + }, + "100%": { + boxShadow: `0 0 0 0 ${warningColor}` + } + }, + + "@keyframes pulsing-info": { + "0%": { + boxShadow: `0 0 0 0 ${lightBlue[500]}` + }, + "70%": { + boxShadow: `0 0 0 4px ${lightBlue[500]}` + }, + "100%": { + boxShadow: `0 0 0 0 ${lightBlue[500]}` + } + }, + "@keyframes pulsing-success": { + "0%": { + boxShadow: `0 0 0 0 ${green[500]}` + }, + "70%": { + boxShadow: `0 0 0 4px ${green[500]}` + }, + "100%": { + boxShadow: `0 0 0 0 ${green[500]}` + } + } +})); + +const PulsingBadge = ({ + children, + withBorder = false, + badgeLabel = "", + variant = "info" +}) => { + const classes = useStyles(); + return ( + +
+
+
+ {children} + + ); +}; +export default PulsingBadge; \ No newline at end of file diff --git a/packages/boba/gateway/src/components/tabs/Tabs.js b/packages/boba/gateway/src/components/tabs/Tabs.js index bc655c2f1f..a63bb45828 100644 --- a/packages/boba/gateway/src/components/tabs/Tabs.js +++ b/packages/boba/gateway/src/components/tabs/Tabs.js @@ -13,11 +13,9 @@ 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 React from 'react'; -import * as S from './Tabs.styles'; +import React from 'react' +import * as S from './Tabs.styles' -// TODO @deprecated; -// @deprecated; function Tabs ({ tabs, activeTab, onClick, className }) { return ( @@ -33,24 +31,6 @@ function Tabs ({ tabs, activeTab, onClick, className }) { })} ); - // return ( - //
- // {tabs.map((i, index) => { - // return ( - //
onClick(i)} - // className={[ - // styles.tab, - // activeTab === i ? styles.active : '' - // ].join(' ')} - // > - // {i} - //
- // ); - // })} - //
- // ); } -export default React.memo(Tabs); +export default React.memo(Tabs) diff --git a/packages/boba/gateway/src/components/tabs/Tabs.styles.js b/packages/boba/gateway/src/components/tabs/Tabs.styles.js index 1892f45f06..5c630f7a3c 100644 --- a/packages/boba/gateway/src/components/tabs/Tabs.styles.js +++ b/packages/boba/gateway/src/components/tabs/Tabs.styles.js @@ -7,13 +7,12 @@ export const Tabs = styled(Box)(({theme})=>({ justifyContent: 'flex-start', flex: 1, marginBottom: '20px', - borderBottom: '1px solid rgba(255, 255, 255, 0.06)', + 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', @@ -23,9 +22,9 @@ export const TabItem = styled(Box)(({ theme }) => ({ opacity: 1, }, '&.active': { - color: `${theme.palette.mode === 'light' ? theme.palette.primary.main : theme.palette.neutral.main}`, + color: `${theme.palette.mode === 'light' ? theme.palette.primary.main : theme.palette.neutral.main }`, opacity: 1, - borderBottom: `2px solid #BAE21A`, + borderBottom: theme.palette.primary.tabBorderBottom, marginBottom: '-2px', zIndex: 1, }, diff --git a/packages/boba/gateway/src/components/walletpicker/WalletPicker.js b/packages/boba/gateway/src/components/walletpicker/WalletPicker.js deleted file mode 100644 index eb40289eb1..0000000000 --- a/packages/boba/gateway/src/components/walletpicker/WalletPicker.js +++ /dev/null @@ -1,110 +0,0 @@ -/* -Copyright 2021 OMG/BOBA - -Licensed under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. -You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software -distributed under the License is distributed on an "AS IS" BASIS, -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 { - setEnableAccount, - setWalletAddress, - setLayer -} from 'actions/setupAction' - -import Button from 'components/button/Button' - -import React, { useCallback, useEffect } from 'react' -import { useDispatch, useSelector } from 'react-redux' - -import { - selectAccountEnabled, - selectJustSwitchedChain, - selectNetwork -} from 'selectors/setupSelector' - -import networkService from 'services/networkService' - -import { - fetchTransactions, - fetchBalances -} from 'actions/networkAction' -import { openModal } from 'actions/uiAction' - -function WalletPicker({ - label = 'Connect', - fullWidth = false, - size = 'small' -}) { - - const dispatch = useDispatch() - - const network = useSelector(selectNetwork()) - const accountEnabled = useSelector(selectAccountEnabled()) - const justSwitchedChain = useSelector(selectJustSwitchedChain()) - - const dispatchBootAccount = useCallback(() => { - - //console.log("Calling initializeAccount for:", network) - - if (!accountEnabled) initializeAccount() - - async function initializeAccount() { - - const initialized = await networkService.initializeAccount(network) - //console.log(['initialized',initialized]) - if (initialized === 'wrongnetwork') { - dispatch(openModal('wrongNetworkModal')) - return false; - } - - if (initialized === false) { - console.log("WP: Account NOT enabled for", network, accountEnabled) - dispatch(setEnableAccount(false)) - return false - } - - 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 - } - } - - }, [ dispatch, accountEnabled, network ]) - - useEffect(() => { - // auto connect to MM if we just switched chains - if (justSwitchedChain) dispatchBootAccount() - }, [ justSwitchedChain, dispatchBootAccount ]) - - return ( - <> - {accountEnabled !== true && - - } - - ) -} - -export default React.memo(WalletPicker) diff --git a/packages/boba/gateway/src/components/walletpicker/WalletPicker.styles.js b/packages/boba/gateway/src/components/walletpicker/WalletPicker.styles.js deleted file mode 100644 index fc0522d2ef..0000000000 --- a/packages/boba/gateway/src/components/walletpicker/WalletPicker.styles.js +++ /dev/null @@ -1,95 +0,0 @@ -import styled from '@emotion/styled'; -import { Box, Typography } from '@mui/material'; -import BgWallet from "../../images/backgrounds/bg-wallet.png"; - -export const Loading = styled.div` - display: flex; - justify-content: center; - align-items: center; - height: 100vh; - font-size: 20px; - color: $gray4; -`; - -export const Subtitle = styled(Typography)(({ theme }) => ({ - opacity: 0.7, - [theme.breakpoints.down('md')]: { - margin: "16px 40px 16px 0", - }, - [theme.breakpoints.up('md')]: { - margin: "32px 80px 32px 0", - }, -})); - -export const WalletCard = styled.div` - - border-top-left-radius: 4px; - border-top-right-radius: 16px; - border-bottom-left-radius: 16px; - border-bottom-right-radius: 4px; - padding: 40px; - background: url(${BgWallet}); - background-repeat: no-repeat; - background-size: cover; - box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.2); - cursor: pointer; - margin-top: ${(props) => props.isMobile ? "-30px" : "0"}; - margin-bottom: ${(props) => props.isMobile ? "20px" : "30px"}; - display: flex; -`; - -export const WalletCardHeading = styled(Box)(({ theme }) => ({ - display: "flex", - flexDirection: "column", - [theme.breakpoints.down('md')]: { - gap: "10px" - }, - [theme.breakpoints.up('md')]: { - gap: "50px" - }, -})); - -export const WalletCardTitle = styled(Box)(({ theme }) => ({ - display: "flex", - gap: "10px", - [theme.breakpoints.down('md')]: { - flexDirection: "column", - gap: "50px" - }, - [theme.breakpoints.up('md')]: { - alignItems: "center", - }, -})); - -export const WalletCardDescription = styled(Box)(({ theme }) => ({ - display: "flex", - marginLeft: "auto", - [theme.breakpoints.down('md')]: { - alignItems: "flex-start", - }, - [theme.breakpoints.up('md')]: { - alignItems: "flex-end", - }, -})); - -export const PlusIcon = styled.div` - background-color: #091426; - border-radius: 50%; - font-size: 20px; - font-weight: 700; - width: 40px; - height: 40px; - display: flex; - align-items: center; - justify-content: center; -`; - -export const WrapperLink = styled(Box)(({ theme }) => ({ - alignItems: "center", - [theme.breakpoints.down('md')]: { - marginTop: "20px", - }, - [theme.breakpoints.up('md')]: { - marginTop: "20px", - }, -})); diff --git a/packages/boba/gateway/src/containers/Global.styles.js b/packages/boba/gateway/src/containers/Global.styles.js new file mode 100644 index 0000000000..b7b996178c --- /dev/null +++ b/packages/boba/gateway/src/containers/Global.styles.js @@ -0,0 +1,126 @@ +import styled from '@emotion/styled' +import { Box, Typography, IconButton, Divider } from '@mui/material' + +export const Container = styled(Box)(({ theme }) => ({ + display: 'flex', + justifyContent: 'space-around', + margin: '20px auto', + width: '100%', + gap: '10px', + [ theme.breakpoints.down('sm') ]: { + width: '100%', + padding: '0px', + overflowX: 'scroll', + display: 'block' + }, +})) + +export const ContentEmpty = styled(Box)(({ theme }) => ({ + width: '100%', + minHeight: '400px', + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + padding: '10px', + height: 'fit-content', + border: theme.palette.primary.border, + borderRadius: theme.palette.primary.borderRadius, + background: theme.palette.background.secondary, +})) + +export const Content = styled(Box)(({ theme }) => ({ + width: '100%', + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center', + padding: '10px', + height: 'fit-content', + border: theme.palette.primary.border, + borderRadius: theme.palette.primary.borderRadius, + background: theme.palette.background.secondary, + [ theme.breakpoints.down('sm') ]: { + width: 'fit-content', + minWidth: '100%' + }, +})) + +export const LayerAlert = styled(Box)(({ theme }) => ({ + width: "50%", + margin: '20px auto', + gap: '30px', + paddingLeft: '25px', + display: 'flex', + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', + border: theme.palette.primary.border, + borderRadius: theme.palette.primary.borderRadius, + background: theme.palette.background.secondary, + [ theme.breakpoints.up('md') ]: { + width: '100%', + }, + [ theme.breakpoints.down('md') ]: { + width: '100%', + }, + +})); + +export const AlertText = styled(Typography)(({ theme }) => ({ + marginLeft: '10px', + flex: 4, + [ theme.breakpoints.up('md') ]: { + }, +})) + +export const AlertInfo = styled(Box)` + display: flex; + justify-content: space-around; + align-items: center; + flex: 1; +`; + +export const DividerLine = styled(Divider)(({ theme }) => ({ + background: `${theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.04)' : 'rgba(3, 19, 19, 0.04)'}`, + boxSizing: 'border-box', + width: '100%' +})) + +export const footerLink = styled(IconButton)(({ theme }) => ({ + svg: { + path: { + fill: theme.palette.primary.main, + fillOpacity: 1, + } + } +})) + +export const PageSwitcher = styled(Box)(({ theme }) => ({ + width: 'fit-content', + padding: '3px', + background: theme.palette.mode === 'light' ? 'rgba(3, 19, 19, 0.04)' : 'rgba(255, 255, 255, 0.04)', + cursor: 'pointer', + display: 'flex', + borderRadius: '12px', + height: '48px', + 'span': { + padding: '2px 15px', + fontWeight: 'bold', + borderRadius: '12px', + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + '&.active': { + color: '#031313', + background: '#BAE21A', + } + }, + [ theme.breakpoints.down('sm') ]: { + width: '100%', + padding: '0px', + 'span': { + width: '50%' + } + }, + +})); \ No newline at end of file diff --git a/packages/boba/gateway/src/containers/account/Account.js b/packages/boba/gateway/src/containers/account/Account.js deleted file mode 100644 index e4d6a1c536..0000000000 --- a/packages/boba/gateway/src/containers/account/Account.js +++ /dev/null @@ -1,301 +0,0 @@ -/* -Copyright 2019-present OmiseGO Pte Ltd - -Licensed under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. -You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software -distributed under the License is distributed on an "AS IS" BASIS, -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 React,{useState,useEffect,useCallback} from 'react' -import { useSelector, useDispatch } from 'react-redux' -import { isEqual } from 'lodash' - -//Selectors -import { selectAccountEnabled, selectLayer } from 'selectors/setupSelector' -import { selectlayer2Balance, selectlayer1Balance } from 'selectors/balanceSelector' -import { selectTokens } from 'selectors/tokenSelector' -import { selectLoading } from 'selectors/loadingSelector' - -import ListAccount from 'components/listAccount/listAccount' -import ListAccountBatch from 'components/listAccount/listAccountBatch' - -import * as S from './Account.styles' - -import { Box, Grid, Tab, Tabs, Typography, useMediaQuery } from '@mui/material' - -import { fetchLookUpPrice, fetchTransactions, fetchBalances } from 'actions/networkAction' -import { selectNetwork } from 'selectors/setupSelector' -import { useTheme } from '@emotion/react' -import { tableHeadList } from './tableHeadList' - -import TabPanel from 'components/tabs/TabPanel' - -import NetworkSwitcherIcon from 'components/icons/NetworkSwitcherIcon' - -import useInterval from 'util/useInterval' - -import { POLL_INTERVAL } from 'util/constant' - -import AlertIcon from 'components/icons/AlertIcon' -import WalletPicker from 'components/walletpicker/WalletPicker' - -function Account ({ enabled }) { - - const dispatch = useDispatch() - - const accountEnabled = useSelector(selectAccountEnabled()) - const networkLayer = useSelector(selectLayer()) - const network = useSelector(selectNetwork()) - - const [ activeTab, setActiveTab ] = useState(networkLayer === 'L1' ? 0 : 1) - - const childBalance = useSelector(selectlayer2Balance, isEqual) - const rootBalance = useSelector(selectlayer1Balance, isEqual) - - const tokenList = useSelector(selectTokens) - - const depositLoading = useSelector(selectLoading(['DEPOSIT/CREATE'])) - const exitLoading = useSelector(selectLoading(['EXIT/CREATE'])) - - const disabled = depositLoading || exitLoading - - const getLookupPrice = useCallback(() => { - if (!accountEnabled) return - const symbolList = Object.values(tokenList).map((i) => { - if (i.symbolL1 === 'ETH') { - return 'ethereum' - } else if (i.symbolL1 === 'OMG') { - return 'omg' - } else if(i.symbolL1 === 'BOBA') { - return 'boba-network' - } - else { - return i.symbolL1.toLowerCase() - } - }) - dispatch(fetchLookUpPrice(symbolList)) - }, [ tokenList, dispatch, accountEnabled ]) - - - // const unorderedTransactions = useSelector(selectTransactions, isEqual) - - // const orderedTransactions = orderBy(unorderedTransactions, i => i.timeStamp, 'desc') - - // const pendingL1 = orderedTransactions.filter((i) => { - // if (i.chain === 'L1pending' && //use the custom API watcher for fast data on pending L1->L2 TXs - // i.crossDomainMessage && - // i.crossDomainMessage.crossDomainMessage === 1 && - // i.crossDomainMessage.crossDomainMessageFinalize === 0 && - // i.action.status === "pending" - // ) { - // return true - // } - // return false - // }) - - // const pendingL2 = orderedTransactions.filter((i) => { - // if (i.chain === 'L2' && - // i.crossDomainMessage && - // i.crossDomainMessage.crossDomainMessage === 1 && - // i.crossDomainMessage.crossDomainMessageFinalize === 0 && - // i.action.status === "pending" - // ) { - // return true - // } - // return false - // }) - - // const pending = [ - // ...pendingL1, - // ...pendingL2 - // ] - - // {pending.length > 0 && - // - // - // - // - // - // } - - useEffect(()=>{ - if (!accountEnabled) return - getLookupPrice() - },[ childBalance, rootBalance, getLookupPrice, accountEnabled ]) - - useEffect(()=>{ - if (accountEnabled) { - console.log("Account - initial check balances") - dispatch(fetchTransactions()) - dispatch(fetchBalances()) - } - },[ dispatch, accountEnabled ]) - - useInterval(() => { - if (accountEnabled) { - console.log("Account - checking balances") - dispatch(fetchTransactions()) - dispatch(fetchBalances()) - } - }, POLL_INTERVAL) - - const theme = useTheme() - const isMobile = useMediaQuery(theme.breakpoints.down('md')) - - const handleChange = (event, newValue) => { - setActiveTab(newValue) - } - - const ActiveItem = ({active}) => ( - - Active - - ) - - let label_L1 = 'Your Balance on Ethereum' - if (network === 'rinkeby') label_L1 = 'Rinkeby' - - let label_L2 = 'Your Balance on Boba' - if (network === 'rinkeby') label_L2 = 'Boba' - - const L1Column = () => ( - - {!isMobile ? ( - - {label_L1} - {networkLayer === 'L1' ? : null} - - ) : (null) - } - - {tableHeadList.map((item) => { - return ( - - {item.label} - - ) - })} - - - - {rootBalance.map((i, index) => { - return ( - - ) - })} - - - ) - - const L2Column = () => ( - - {!isMobile ? ( - - {label_L2} - {networkLayer === 'L2' ? : null} - - ) : (null) - } - - {tableHeadList.map((item) => { - return ( - {item.label} - ) - })} - - - {childBalance.map((i, index) => { - return ( - - ) - })} - - - ) - - return ( - <> - {/**/} - - {!accountEnabled && - - - - - You have not connected your wallet. To see your balances, bridge, and transfer, connect to MetaMask - - - - - } - - {disabled && - - - - Transaction in progress - please be patient - - - - } - - - {isMobile ? ( - <> - - - - - - - - - - - - ) : ( - - - - - - - - - )} - - ); - -} - -export default React.memo(Account) diff --git a/packages/boba/gateway/src/containers/account/Account.module.scss b/packages/boba/gateway/src/containers/account/Account.module.scss deleted file mode 100644 index 3371146515..0000000000 --- a/packages/boba/gateway/src/containers/account/Account.module.scss +++ /dev/null @@ -1,300 +0,0 @@ -@import 'index.scss'; - -.TableContainer { - // box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; - border-radius: 10px; - // max-width: 400px; - margin-top: 10px; -} - -.under { - font-size: 0.8em; -} - -.BalanceWrapper{ - - display: flex; - flex-direction: row; - justify-content: space-evenly; - align-items: flex-start; - padding-top: 15px; - padding-bottom: 40px; - width: 80wv; - min-width: 800px; - - .balanceContent { - border-radius: 8px; - padding: 20px 10px; - background: $background400; - max-width: 40%; - width: 40%; - min-width: 400px; - - .title { - display: flex; - justify-content: center; - margin: 10px auto; - color: $white; - font-size: 20px; - font-family: 'MrEavesXL','Messina'; - // span:first-child { - // font-size: 0.8rem; - // } - p { - margin: 0px; - } - - .muted { - color: $white700 !important; - margin-right: 10px; - } - } - } - - @include mobile { - flex-direction: column; - font-size: 0.8em; - padding: 15px; - width: 100%; - } -} - -.Account { - padding: 10px; - padding-top: 0px; - // background: $background;// white; -} - -.logo { - margin-bottom: 40px; - height: 50px; -} - -.bunny { - width: 200px; - @include mobile { - width: 140px; - } -} - -.RabbitBox { - display: flex; - flex-direction: row; - align-content: left; - @include mobile { - padding-left: 20px; - } -} - -.RabbitRight { - display: flex; - flex-direction: column; - height: 100%; - margin-left: 10px; - align-items: center; - justify-content: space-between; -} - -.RabbitRightTop { - font-size: 1em; - width: 100%; - align-items: left; -} - -.RabbitRightMiddle { - width: 100%; - align-items: left; - text-align: left; - .sad { - color: #ff6868; - font-size: 4em; - @include mobile { - font-size: 3em; - } - } - .happy { - color: #0ebf9a; - font-size: 4em; - @include mobile { - font-size: 3em; - } - } -} - -.RabbitRightBottom { - font-size: 1.0em; - width: 100%; - align-items: left; - padding-bottom: 20px; -} - -.RabbitRightBottomNote { - font-size: 0.9em; - width: 100%; - max-width: 400px; - align-items: left; - padding-bottom: 20px; -} - -.wallet { - display: flex; - flex-direction: row; - align-items: center; - margin-bottom: 20px; - @include mobile { - justify-content: space-between; - } - .address { - margin-right: 20px; - @include mobile { - font-size: 0.8em; - } - } -} - -.dim { - background: $gray7; - color: $gray4; -} - -.active { - background: $bunnyRed; - color: $gray6; -} - -.balances { - - display: flex; - flex-direction: row; - - @include mobile { - flex-direction: column; - } - - .boxWrapper { - - padding: 0px; - display: flex; - flex-direction: column; - - @include mobile { - font-size: 0.8em; - padding: 15px; - } - - /*this is the red/pink data box*/ - .box { - - padding: 20px; - min-width: 350px; - - .buttons { - - margin: 20px -20px -20px -20px; - @include mobile { - margin: 15px -15px -15px -15px; - } - display: flex; - flex-direction: row; - button { - flex: 1; - } - } - - .header { - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - margin-bottom: 20px; - .actions { - display: flex; - flex-direction: row; - align-items: center; - @include mobile { - flex-direction: column; - align-items: flex-end; - } - } - .title { - display: flex; - // flex-direction: column; - font-family: 'MrEavesXL','Messina'; - span:first-child { - font-size: 0.8rem; - } - } - .transfer { - font-size: 0.8em; - font-family: 'MrEavesXL', 'Messina'; - cursor: pointer; - border-radius: 20px; - padding: 7px; - border: 2px solid $gray6; - filter: brightness(100%); - display: flex; - flex-direction: row; - align-items: center; - svg { - margin-right: 10px; - width: 15px; - height: 15px; - } - &:first-child { - margin-right: 10px; - @include mobile { - margin-right: 0px; - margin-bottom: 5px; - } - } - } - .disabled { - pointer-events: none; - border: 2px solid $gray3; - color: $gray3; - filter: brightness(75%); - } - } - - .row { - display: flex; - background: blue; - flex-direction: row; - align-items: center; - justify-content: space-between; - margin-bottom: 5px; - padding: 5px; - - .token { - display: flex; - background: green; - flex-direction: row; - align-items: center; - .symbol { - margin-right: 10px; - } - } - } - } - - .boxActions { - - padding: 20px; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - - @include mobile { - font-size: 0.8rem; - padding: 15px; - } - - .buttons { - margin: 0; - padding: 0; - padding-bottom: 5px; - } - } - } -} \ No newline at end of file diff --git a/packages/boba/gateway/src/containers/account/Account.styles.js b/packages/boba/gateway/src/containers/account/Account.styles.js deleted file mode 100644 index 8d7709692b..0000000000 --- a/packages/boba/gateway/src/containers/account/Account.styles.js +++ /dev/null @@ -1,148 +0,0 @@ -import { styled } from '@mui/material/styles' -import { Box, Card, CardContent, Typography, Grid } from "@mui/material"; - -export const WrapperHeading = styled(Box)` - display: flex; - align-items: center; - gap: 10px; - //margin-bottom: 10px; - justify-content: space-between; -`; - -export const TableHeading = styled(Box)(({ theme }) => ({ - padding: "10px", - borderRadius: "6px", - display: "flex", - alignItems: "center", - justifyContent: "space-between", - backgroundColor: theme.palette.background.secondary, - - [theme.breakpoints.down('md')]: { - marginBottom: "5px", - }, - [theme.breakpoints.up('md')]: { - marginBottom: "20px", - }, -})); - -export const Wrapper = styled(Box)(({ theme, ...props }) => ({ - borderBottom: theme.palette.mode === 'light' ? '1px solid #c3c5c7' : '1px solid #192537', - [theme.breakpoints.down('md')]: { - //padding: '30px 10px', - }, - [theme.breakpoints.up('md')]: { - padding: '10px', - }, -})); - -export const GridContainer = styled(Grid)(({theme})=>({ - //background: '#192333', - //borderRadius: '8px', - //height: '40px', - //paddingTop: '5px', - //paddingLeft: '20px', - // [theme.breakpoints.down('md')]:{ - // justifyContent: 'flex-start' - // } -})) - -export const TableHeadingItem = styled(Typography)` - width: 20%; - gap: 5px; - text-align: center; -`; - -export const AccountWrapper = styled(Box)(({ theme }) => ({ - [theme.breakpoints.down('md')]: { - backgroundColor: "transparent", - }, - [theme.breakpoints.up('md')]: { - backgroundColor: theme.palette.background.secondary, - borderRadius: "10px", - padding: "20px", - }, -})); - -export const CardTag = styled(Card)(({ theme }) => ({ - display: 'flex', - position: 'relative', - padding: '10px', - border: '2px solid rgba(255, 255, 255, 0.2)', - overflow: 'initial', - minHeight: '225px', - marginBottom: '20px', - backgroundColor: theme.palette.background.secondary, - [theme.breakpoints.up('lg')]: { - margin: '60px 0 30px 0', - }, -})); - -export const CardContentTag = styled(CardContent)(({ theme }) => ({ - clipPath: 'polygon(0 0, 93% 0, 100% 100%, 0% 100%)', - backgroundColor: theme.palette.background.secondary, - borderRadius: '6px', - padding: '24px 34px 24px 24px', - [theme.breakpoints.down('md')]: { - flex: 5, - }, - [theme.breakpoints.up('md')]: { - flex: 12, - }, -})); - -export const BalanceValue = styled(Typography)(({ theme }) => ({ - color: theme.palette.secondary.main, - fontSize: '50px !important', - fontWeight: 700 -})); - -export const CardInfo = styled(Typography)` - opacity: 0.7; - font-size: 20px !important; - margin-bottom: 10px; -`; - -export const ContentGlass = styled(Box)(({ theme }) => ({ - transform: 'rotateZ(350deg)', - position: 'absolute', - top: '-50px', - right: '-2px', - [theme.breakpoints.up('md')]: { - top: '-50px', - right: '15px', - }, - [theme.breakpoints.up('lg')]: { - top: '-55px', - right: '45px', - }, -})); - -export const LayerAlert = styled(Box)(({ theme }) => ({ - width: "100%", - display: 'flex', - justifyContent: 'space-between', - alignItems: 'center', - gap: '30px', - borderRadius: '8px', - margin: '20px 0px', - padding: '25px', - background: theme.palette.background.secondary, - [theme.breakpoints.up('md')]: { - padding: '25px 50px', - }, - -})); - -export const AlertText = styled(Typography)(({ theme }) => ({ - marginLeft: '10px', - flex: 4, - [theme.breakpoints.up('md')]: { - }, -})); - -export const AlertInfo = styled(Box)` - display: flex; - justify-content: space-around; - align-items: center; - flex: 1; -`; diff --git a/packages/boba/gateway/src/containers/account/tableHeadList.js b/packages/boba/gateway/src/containers/account/tableHeadList.js deleted file mode 100644 index bd014ab456..0000000000 --- a/packages/boba/gateway/src/containers/account/tableHeadList.js +++ /dev/null @@ -1,14 +0,0 @@ -export const tableHeadList = [ - { - label: 'Tokens', - isSort: false, - }, - { - label: 'Amount', - isSort: false, - }, - { - label: '', - isSort: false, - } -] diff --git a/packages/boba/gateway/src/containers/airdrop/Airdrop.js b/packages/boba/gateway/src/containers/airdrop/Airdrop.js index c9911dea70..0b4e0f8185 100644 --- a/packages/boba/gateway/src/containers/airdrop/Airdrop.js +++ b/packages/boba/gateway/src/containers/airdrop/Airdrop.js @@ -7,8 +7,6 @@ import * as styles from './Airdrop.module.scss' import { Box, Grid, Typography } from '@mui/material' import Button from 'components/button/Button' -import LayerSwitcher from 'components/mainMenu/layerSwitcher/LayerSwitcher' -import WalletPicker from 'components/walletpicker/WalletPicker' import AlertIcon from 'components/icons/AlertIcon' import networkService from 'services/networkService' import moment from 'moment' @@ -17,7 +15,7 @@ import { initiateAirdrop, getAirdropL1, getAirdropL2 } from 'actions/airdropActi import { logAmount } from 'util/amountConvert' import truncate from 'truncate-middle' import PageTitle from 'components/pageTitle/PageTitle' - +import Connect from 'containers/connect/Connect' class Airdrop extends React.Component { @@ -121,7 +119,8 @@ class Airdrop extends React.Component { claimDetailsL2, layer2, walletAddress, - netLayer + netLayer, + accountEnabled } = this.state let omgBalance = layer2.filter((i) => { @@ -135,8 +134,6 @@ class Airdrop extends React.Component { omgWeiString = omgBalance[ 0 ].balance.toString() } - //console.log("omgWeiString:",omgWeiString) - let l2BalanceOMG = Number(logAmount(omgWeiString, 18)) let recordFoundL1 = false @@ -173,50 +170,18 @@ class Airdrop extends React.Component { claimedL2time = moment.unix(claimDetailsL2.claimedTimestamp).format('MM/DD/YYYY hh:mm a') } - if (netLayer === 'L1') { - return -
- - - - - - You are on Ethereum Mainnet. To claim your BOBA, SWITCH to Boba - - - - -
- - } - - if (!netLayer) { - return -
- - - - - - Connect to MetaMask to claim your BOBA - - - - -
- - } - return ( + + + {netLayer === 'L2' && @@ -400,6 +365,7 @@ class Airdrop extends React.Component { + } ) } diff --git a/packages/boba/gateway/src/containers/bobaScope/BobaScope.js b/packages/boba/gateway/src/containers/bobaScope/BobaScope.js index 2950ba1ed6..799925bbe2 100644 --- a/packages/boba/gateway/src/containers/bobaScope/BobaScope.js +++ b/packages/boba/gateway/src/containers/bobaScope/BobaScope.js @@ -40,7 +40,8 @@ import useInterval from 'util/useInterval' import { POLL_INTERVAL } from 'util/constant' import PageTitle from 'components/pageTitle/PageTitle' import AlertIcon from 'components/icons/AlertIcon' -import WalletPicker from 'components/walletpicker/WalletPicker' +import Connect from 'containers/connect/Connect' + import { selectAccountEnabled } from 'selectors/setupSelector' function BobaScope() { @@ -69,63 +70,50 @@ function BobaScope() { } }, POLL_INTERVAL) - if (!accountEnabled) { - - return - - - - - - Connect to MetaMask to access Boba Scope - - - - - - } - - return ( - -
- { setSearchData(i.target.value) }} - className={styles.searchBar} - /> -
- -
-
- { dispatch(setActiveDataTab(tab)) }} - activeTab={activeTab} - tabs={[ 'Seven Day Queue', 'Fast Exits' ]} - /> - - {activeTab === 'Seven Day Queue' && ( - - )} - {activeTab === 'Fast Exits' && ( - - )} -
-
+ + {accountEnabled && + <> + +
+ { setSearchData(i.target.value) }} + className={styles.searchBar} + /> +
+ +
+
+ { dispatch(setActiveDataTab(tab)) }} + activeTab={activeTab} + tabs={[ 'Seven Day Queue', 'Fast Exits' ]} + /> + + {activeTab === 'Seven Day Queue' && ( + + )} + {activeTab === 'Fast Exits' && ( + + )} +
+
+ } ); } diff --git a/packages/boba/gateway/src/containers/bridge/Bridge.js b/packages/boba/gateway/src/containers/bridge/Bridge.js index 4337dc2854..60e252c819 100644 --- a/packages/boba/gateway/src/containers/bridge/Bridge.js +++ b/packages/boba/gateway/src/containers/bridge/Bridge.js @@ -7,7 +7,7 @@ import * as S from './Bridge.styles' function BridgeContainer() { - const theme = useTheme(); + const theme = useTheme() const accountEnabled = useSelector(selectAccountEnabled()) const isMobile = useMediaQuery(theme.breakpoints.down('sm')) diff --git a/packages/boba/gateway/src/containers/bridge/bobaBridge/bobaBridge.js b/packages/boba/gateway/src/containers/bridge/bobaBridge/bobaBridge.js index 1c170d4deb..2d5b981b11 100644 --- a/packages/boba/gateway/src/containers/bridge/bobaBridge/bobaBridge.js +++ b/packages/boba/gateway/src/containers/bridge/bobaBridge/bobaBridge.js @@ -1,22 +1,33 @@ -import React from "react"; -import { useDispatch, useSelector } from "react-redux"; -import { Box, Typography, Switch, useTheme } from "@mui/material"; -import { setPage } from 'actions/uiAction'; +import React, { useState } from 'react' + +import { useDispatch, useSelector } from "react-redux" + +import { Box, Typography, Switch, useTheme } from "@mui/material" +import { setPage } from 'actions/uiAction' + +import BobaIcon from 'components/icons/BobaIcon.js' +import EthereumIcon from 'components/icons/EthereumIcon.js' +import Button from 'components/button/Button.js' -import BobaIcon from 'components/icons/BobaIcon.js'; -import EthereumIcon from 'components/icons/EthereumIcon.js'; -import LayerSwitcher from 'components/mainMenu/layerSwitcher/LayerSwitcher'; -import WalletPicker from "components/walletpicker/WalletPicker"; import * as LaytoutS from 'components/common/common.styles' -import { selectAccountEnabled, selectLayer } from "selectors/setupSelector"; +import { + selectAccountEnabled, + selectNetwork, + selectLayer +} from 'selectors/setupSelector' import * as S from './bobaBridge.styles'; -import BridgeTransfer from './bridgeTransfer/bridgeTransfer'; +import BridgeTransfer from './bridgeTransfer/bridgeTransfer' import { selectBridgeTokens, selectMultiBridgeMode } from "selectors/bridgeSelector" import { resetToken, setMultiBridgeMode } from "actions/bridgeAction" +import { + setConnectETH, + setConnectBOBA +} from 'actions/setupAction' + function BobaBridge() { const layer = useSelector(selectLayer()) @@ -24,67 +35,89 @@ 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' + + async function connectToETH () { + dispatch(setConnectETH(true)) + } + + async function connectToBOBA () { + dispatch(setConnectBOBA(true)) + } - if (!accountEnabled) { + async function switchDirection () { + console.log("layer:",layer) + if(accountEnabled) { + if(layer === 'L1') + dispatch(setConnectBOBA(true)) + else + dispatch(setConnectETH(true)) + } else { + setToL2(!toL2) + } + } + + if (!accountEnabled && toL2) { return ( Bridge - Select tokens to send through the Boba Bridge. + Select the bridge direction. - - - From - - + From - - - Ethereum - + + Ethereum - + - + {switchDirection()}}> - - - To - + To + + Boba + + + + + ) + } else if (!accountEnabled && !toL2) { + return ( + + + Bridge + Select the bridge direction. + + + + + From + + + Boba + + - - - Boba Network - + + {switchDirection()}}> + + + + + + To + + Ethereum @@ -108,32 +141,18 @@ function BobaBridge() { - {!layer ? - - - - : layer === 'L1' - ? - Ethereum - : - - Boba Network - + {layer === 'L1' ? + Ethereum + : + Boba } - - - + {switchDirection()}}> + + + + - {!layer ? - - : layer === 'L2' ? - - Ethereum - : - Boba Network - + {layer === 'L2' ? + Ethereum + : + Boba } diff --git a/packages/boba/gateway/src/containers/connect/Connect.js b/packages/boba/gateway/src/containers/connect/Connect.js new file mode 100644 index 0000000000..af97bd9078 --- /dev/null +++ b/packages/boba/gateway/src/containers/connect/Connect.js @@ -0,0 +1,71 @@ +import React from "react" +import * as G from '../Global.styles' + +import { useDispatch } from "react-redux" +import AlertIcon from 'components/icons/AlertIcon' +import Button from 'components/button/Button.js' + +import { + setConnectETH, + setConnectBOBA, + setConnect +} from 'actions/setupAction' + +const Connect = ({ userPrompt, accountEnabled, connectToBoba = false, layer = '' }) => { + + const dispatch = useDispatch() + + if(!accountEnabled && !connectToBoba) { + return ( + + + + + {userPrompt} + + + + + ) + } + else if (layer !== 'L2' && connectToBoba) { + return ( + + + + + {userPrompt} + + + + + ) + } + + return null + +} + +export default Connect + + diff --git a/packages/boba/gateway/src/containers/dao/Dao.js b/packages/boba/gateway/src/containers/dao/Dao.js index 2d92d83645..b337319267 100644 --- a/packages/boba/gateway/src/containers/dao/Dao.js +++ b/packages/boba/gateway/src/containers/dao/Dao.js @@ -26,8 +26,6 @@ import { selectLayer, selectAccountEnabled } from 'selectors/setupSelector' import { selectProposals } from 'selectors/daoSelector' import { selectLoading } from 'selectors/loadingSelector' -import WalletPicker from 'components/walletpicker/WalletPicker' - import * as S from './Dao.styles' import * as styles from './Dao.module.scss' @@ -38,6 +36,7 @@ import AlertIcon from 'components/icons/AlertIcon' import networkService from 'services/networkService' import truncateMiddle from 'truncate-middle' import WalletIcon from 'components/icons/WalletIcon' +import Connect from 'containers/connect/Connect' import { orderBy } from 'lodash' import Select from 'components/select/Select' @@ -87,25 +86,20 @@ function DAO() { return (
+ - - - {(layer !== 'L2') ? - Not connected to Boba - : Connected - } - + + + - - {!accountEnabled ? - Please connect to Boba to vote and propose. - :   {wAddress} - } - - Balances BOBA: @@ -122,40 +116,25 @@ function DAO() { {!!layer ? Math.round(Number(votesX)) : '--'} Total: {!!layer ? Math.round(Number(votes) + Number(votesX)) : '--'} - {!layer ? - - - : layer === 'L2' ? - - - - - : - - - - You are on Mainnet. To use the Boba DAO, SWITCH to Boba - - - - + {layer === 'L2' && + + + + } Only votes delegated BEFORE the start of the active voting period are counted in your vote diff --git a/packages/boba/gateway/src/containers/dao/Dao.styles.js b/packages/boba/gateway/src/containers/dao/Dao.styles.js index e6749f886f..f5bf23e83f 100644 --- a/packages/boba/gateway/src/containers/dao/Dao.styles.js +++ b/packages/boba/gateway/src/containers/dao/Dao.styles.js @@ -26,7 +26,8 @@ export const DaoPageContainer = styled(Box)(({ theme }) => ({ export const DaoPageContent = styled(Box)(({ theme }) => ({ display: 'flex', - justifyContent: 'space-around', + flexDirection: 'row', + justifyContent: 'center', alignItems: 'flex-start', paddingTop: '0px', gap: '10px', @@ -36,14 +37,13 @@ export const DaoPageContent = styled(Box)(({ theme }) => ({ })); export const DaoWalletContainer = styled(Box)(({ theme }) => ({ - background: theme.palette.background.secondary, - margin: 'auto', display: 'flex', flexDirection: 'column', padding: '0px 20px', minHeight: '700px', - borderRadius: '20px', width: '30%', + borderRadius: theme.palette.primary.borderRadius, + background: theme.palette.background.secondary, [theme.breakpoints.down('sm')]: { width: '100%', }, @@ -80,7 +80,7 @@ export const DaoProposalContainer = styled(Box)(({ theme }) => ({ justifyContent: 'flex-start', padding: '0 32px', minHeight: '500px', - borderRadius: '20px', + borderRadius: theme.palette.primary.borderRadius, background: theme.palette.background.secondary, [theme.breakpoints.down('sm')]: { width: '100%', diff --git a/packages/boba/gateway/src/containers/ecosystem/Ecosystem.styles.js b/packages/boba/gateway/src/containers/ecosystem/Ecosystem.styles.js index fc92493d60..d07b2fe3e2 100644 --- a/packages/boba/gateway/src/containers/ecosystem/Ecosystem.styles.js +++ b/packages/boba/gateway/src/containers/ecosystem/Ecosystem.styles.js @@ -1,5 +1,4 @@ import { Box, Divider, Grid, IconButton, Typography } from '@mui/material'; -import Card from '@mui/material/Card'; import { styled } from '@mui/material/styles'; export const EcoSystemPageContainer = styled(Box)(({ theme }) => ({ @@ -24,69 +23,6 @@ export const EcoSystemPageContainer = styled(Box)(({ theme }) => ({ }, })) -export const TileCard = styled(Card)(({ theme, ...props }) => ({ - borderRadius: '5px', - height: '150px', - width: '150px', - padding: '5px', - backgroundColor: theme.palette.background.secondary, - justifyContent: 'space-between', - //maxWidth: '90%', - display: 'flex', - alignItems: 'center', - flexDirection: 'column', - margin: '10px 0', - border: 'solid rgba(255, 255, 255, 0.27)', - borderWidth: '1px', -})) - -export const TileHeader = styled(Box)(({ theme, ...props }) => ({ - display: 'flex', - flexDirection: 'column', - justifyContent: 'space-evenly', - alignItems: 'center', -})) - -export const ImageContainer = styled(Box)(({ theme, ...props }) => ({ - display: 'flex', - flexDirection: 'column', - justifyContent: 'center', - alignItems: 'center', - width: '70px', - height: '70px', - borderRadius: '50%', - position: 'absolute', - margin: 'auto', - top: '15px', - background: theme.palette.mode === 'light' ? '#c7c3c3' : '#272B30', - 'img': { - width: '50px', - maxHeight: '60px', - padding: '2px' - } -})) - -export const TileFooter = styled(Box)(({ theme, ...props }) => ({ - display: 'flex', - flexDirection: 'row', - alignItems: 'center', - overflow: 'hidden', - borderBottomLeftRadius: '12px', - borderBottomRightRadius: '12px', - background: theme.palette.background.secondary, - justifyContent: 'space-around', - padding: '1rem', - gap: 1, - width: '100%' -})) - -export const DividerLine = styled(Divider)(({ theme }) => ({ - 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%' -})) - export const CategoryList = styled(Box)(({ theme }) => ({ display: 'flex', justifyContent: 'flex-start', @@ -98,7 +34,6 @@ export const CategoryList = styled(Box)(({ theme }) => ({ }, })) - export const ProjectListContainer = styled(Grid)(({ theme }) => ({ margin: "20px 10px !important", gap: '10px' @@ -122,8 +57,8 @@ export const ProjectContainer = styled(Box)(({ theme }) => ({ })) export const ProjectContent = styled(Box)(({ theme }) => ({ - borderTopLeftRadius: '12px', - borderTopRightRadius: '12px', + borderTopLeftRadius: '8px', + borderTopRightRadius: '8px', background: theme.palette.background.secondary, //'rgba(255, 255, 255, 0.06)', display: 'flex', flexDirection: 'column', @@ -134,21 +69,62 @@ export const ProjectContent = styled(Box)(({ theme }) => ({ gap: 1, marginTop: '50px', width: '100%', - height: '-webkit-fill-available' + height: '140px' })) +export const ImageContainer = styled(Box)(({ theme, ...props }) => ({ + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center', + width: '70px', + height: '70px', + borderRadius: '50%', + position: 'absolute', + margin: 'auto', + top: '15px', + background: theme.palette.mode === 'light' ? '#c7c3c3' : '#272B30', + 'img': { + width: '50px', + maxHeight: '60px', + padding: '2px' + } +})) + +export const DividerLine = styled(Divider)(({ theme }) => ({ + 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%' +})) export const ProjectDescription = styled(Typography)(({ theme }) => ({ width: '100%', overflow: 'hidden', textOverflow: 'ellipsis', opacity: 0.85, + fontSize: '0.7em', fontWeight: 400, display: '-webkit-box', 'WebkitLineClamp': 3, 'WebkitBoxOrient': 'vertical' })) +export const TileFooter = styled(Box)(({ theme, ...props }) => ({ + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + overflow: 'hidden', + height: '45px', + width: '100%', + borderBottomLeftRadius: '8px', + borderBottomRightRadius: '8px', + background: theme.palette.background.secondary, + justifyContent: 'space-around', + padding: '1rem', + gap: 1, +})) + export const footerLink = styled(IconButton)(({ theme }) => ({ '&:hover ': { svg: { diff --git a/packages/boba/gateway/src/containers/ecosystem/project.list.js b/packages/boba/gateway/src/containers/ecosystem/project.list.js index 36f6487319..16cb4bda79 100644 --- a/packages/boba/gateway/src/containers/ecosystem/project.list.js +++ b/packages/boba/gateway/src/containers/ecosystem/project.list.js @@ -50,7 +50,7 @@ export const projectList = [ "discord": "http://discord.gg/savwHHXsmU", "type": "defi", "image": OolongswapLogo, - "description": "The leading DEX built on Boba Network (Ethereum’s newest L2). OolongSwap incorporates all of the features you need from a traditional DEX while pioneering new ideas from DeFi 2.0 such as Protocol Controlled Value." + "description": "The leading DEX on Boba. OolongSwap incorporates all of the features you need from a traditional DEX while pioneering new ideas from DeFi 2.0 such as Protocol Controlled Value." }, { "title": "FRAX", @@ -80,7 +80,7 @@ export const projectList = [ "twitter": "https://twitter.com/AnyswapNetwork", "type": "bridge", "image": multiChainLogo, - "description": "Cross-Chain Router Protocol, envisioned to be the ultimate router for Web3" + "description": "Cross-Chain Router Protocol, envisioned to be the ultimate router for Web3." }, { "title": "Synapse", @@ -112,7 +112,7 @@ export const projectList = [ "discord": "https://discord.com/invite/DwjPNvAwdd", "type": "defi", "image": zenchaLogo, - "description": "The First StableSwap Exchange & Liquidity Pool on Boba Network" + "description": "The First StableSwap Exchange & Liquidity Pool on Boba." }, { "title": "Unidex", @@ -154,7 +154,7 @@ export const projectList = [ "twitter": "https://twitter.com/boba_punks", "type": "nft", "image": bobaPunksLogo, - "description": "The first punks on Boba Network." + "description": "The first punks on Boba." }, { "title": "Boba Doge", @@ -165,7 +165,7 @@ export const projectList = [ "discord": "http://discord.gg/jvXBqpKgdt", "type": "token", "image": bobaDogeLogo, - "description": "The first dog coin on Boba Network." + "description": "The first dog coin on Boba." }, { "title": "ApeBoard", @@ -200,7 +200,7 @@ export const projectList = [ "title": "Dodo", "canLaunch": true, "link": "https://dodoex.io/", - "twitter": "https://twitter.com/BreederDodo?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor", + "twitter": "https://twitter.com/BreederDodo", "discord": "http://discord.gg/tyKReUK", "type": "defi", "image": dodoLogo, @@ -354,7 +354,7 @@ export const projectList = [ "twitter": "https://twitter.com/boba_brewery", "type": "defi", "image": brewery, - "description": "Boba Brewery is the first exclusive launchpad for decentralized fundraising in Boba ecosystem, offering the hottest and innovative projects in a fair, secure, and efficient way." + "description": "Boba Brewery is the first launchpad for decentralized fundraising in the Boba ecosystem, offering the hottest and innovative projects in a fair, secure, and efficient way." }, { "title": "Bodh Finance", diff --git a/packages/boba/gateway/src/containers/farm/Farm.js b/packages/boba/gateway/src/containers/farm/Farm.js index 241a64405d..ca91987831 100644 --- a/packages/boba/gateway/src/containers/farm/Farm.js +++ b/packages/boba/gateway/src/containers/farm/Farm.js @@ -31,9 +31,11 @@ import * as S from './Farm.styles' import { Box, FormControlLabel, Checkbox, Typography } from '@mui/material' import Tooltip from 'components/tooltip/Tooltip'; import LayerSwitcher from 'components/mainMenu/layerSwitcher/LayerSwitcher' -import WalletPicker from 'components/walletpicker/WalletPicker' + +import Connect from 'containers/connect/Connect' import PageTitle from 'components/pageTitle/PageTitle' -import { Circle, HelpOutline } from '@mui/icons-material' + +import { HelpOutline } from '@mui/icons-material' class Farm extends React.Component { @@ -203,7 +205,6 @@ class Farm extends React.Component { poolTab, showMDO, showMSO, - dropDownBox, accountEnabled, layer, } = this.state @@ -212,72 +213,13 @@ class Farm extends React.Component { return ( - - - {!accountEnabled && - - - - - Connect to MetaMask to see your balances and contribute to the liquidity pool - - - - - } - - - - - - - - Bridging fees are proportionally distributed to stakers. The bridges are not farms. Your earnings only increase when someone uses the - bridge you have staked into. - - - - - Staking example. When you stake 10 OMG into the L2 pool, then the pool's liquidity and balance both increase by 10 OMG. -

- Fast Bridge example. When a user bridges 10 OMG from L1 to L2 using the fast bridge, - they send 10 OMG to the L1 pool, increasing its balance by 10 OMG. Next, 9.99 OMG flow out from the L2 pool to the user's L2 wallet, completing the bridge. - Note that bridge operations do not change the pool's liquidity, but only its balance. - The difference between what was deposited into the L1 pool (10 OMG) and what was sent - to the user on the L2 (9.99 OMG), equal to 0.01 OMG, is sent to the reward pool, for harvesting by stakers. -

- Pool rebalancing. In some circumstances, excess balances can accumulate on one chain. For example, if many people - bridge from L1 to L2, then L1 pool balances will increase, while L2 balances will decrease. When needed, the pool operator can - rebalance the pools, using 'classic' deposit and exit operations to move funds from one pool to another. Rebalancing takes 7 days, due to the - 7 day fraud proof window, which also applies to the operator. -

- Dynamic fees. The pools use an automatic supply-and-demand approach to setting the fees. - When a pool's liquidity is low, the fees are increased to attract more liquidity into that pool and vice-versa. - - } - > - { this.setState({ dropDownBox: !dropDownBox, dropDownBoxInit: false }) }} - sx={{ color: "#0ebf9a" }} - > - Learn More - - - + - + @@ -324,12 +266,40 @@ class Farm extends React.Component { label="My Stakes Only" /> + - - {!accountEnabled ? - Disconnected - : Connected} - + + + + + Bridging fees are proportionally distributed to stakers. The bridges are not farms. + Your earnings only increase when someone uses the bridge you have staked into. + + + + Staking example. When you stake 10 OMG into the L2 pool, then the pool's liquidity and balance both increase by 10 OMG. +

+ Fast Bridge example. When a user bridges 10 OMG from L1 to L2 using the fast bridge, + they send 10 OMG to the L1 pool, increasing its balance by 10 OMG. Next, 9.99 OMG flow out from the L2 pool to the user's L2 wallet, completing the bridge. + Note that bridge operations do not change the pool's liquidity, but only its balance. + The difference between what was deposited into the L1 pool (10 OMG) and what was sent + to the user on the L2 (9.99 OMG), equal to 0.01 OMG, is sent to the reward pool, for harvesting by stakers. +

+ Pool rebalancing. In some circumstances, excess balances can accumulate on one chain. For example, if many people + bridge from L1 to L2, then L1 pool balances will increase, while L2 balances will decrease. When needed, the pool operator can + rebalance the pools, using 'classic' deposit and exit operations to move funds from one pool to another. Rebalancing takes 7 days, due to the + 7 day fraud proof window, which also applies to the operator. +

+ Dynamic fees. The pools use an automatic supply-and-demand approach to setting the fees. + When a pool's liquidity is low, the fees are increased to attract more liquidity into that pool and vice-versa. + + } + > + + + {layer === 'L2' && lpChoice === 'L1LP' && diff --git a/packages/boba/gateway/src/containers/farm/Farm.styles.js b/packages/boba/gateway/src/containers/farm/Farm.styles.js index c926fdff19..936c629c84 100644 --- a/packages/boba/gateway/src/containers/farm/Farm.styles.js +++ b/packages/boba/gateway/src/containers/farm/Farm.styles.js @@ -50,6 +50,18 @@ export const LayerAlert = styled(Box)(({ theme }) => ({ }, })) +export const Help = styled(Box)(({ theme }) => ({ + width: "100%", + display: 'flex', + justifyContent: 'space-between', + alignItems: 'center', + gap: '30px', + margin: '10px 0px', + padding: '10px', + borderRadius: theme.palette.primary.borderRadius, + background: theme.palette.background.secondary, +})) + export const AlertText = styled(Typography)(({ theme }) => ({ marginLeft: '10px', flex: 4, @@ -92,32 +104,6 @@ export const GridItemTag = styled(Grid)` gap:5px; `; -export const DropdownWrapper = styled(Box)` - display: flex; - align-items: center; - justify-content: space-between; - gap: 5px; - width: 100%; - padding: 16px; - margin-top: 16px; - background-color: ${props => props.theme.palette.background.secondary}; - border-radius: 12px; - text-align: left; -`; - -export const DropdownContent = styled(Box)(({ theme }) => ({ - display: 'flex', - justifyContent: 'space-between', - [theme.breakpoints.down('md')]: { - flexDirection: 'column', - gap: '0', - }, - [theme.breakpoints.up('md')]: { - flexDirection: 'row', - gap: '16px', - }, -})); - export const FarmAction = styled(Box)(({theme})=>({ display: 'flex', justifyContent: 'space-around', diff --git a/packages/boba/gateway/src/containers/help/Help.js b/packages/boba/gateway/src/containers/help/Help.js index 433b54ba4e..b667918a6f 100644 --- a/packages/boba/gateway/src/containers/help/Help.js +++ b/packages/boba/gateway/src/containers/help/Help.js @@ -1,7 +1,7 @@ import { Grid, Link, Typography } from '@mui/material' import AlertIcon from 'components/icons/AlertIcon' import PageTitle from 'components/pageTitle/PageTitle' -import WalletPicker from 'components/walletpicker/WalletPicker' + import React from 'react' import { useSelector } from 'react-redux' import { selectAccountEnabled } from 'selectors/setupSelector' @@ -15,21 +15,6 @@ function Help() { - {!accountEnabled && - - - - - Connect to MetaMask - - - - - } - @@ -75,7 +60,12 @@ function Help() { Please use your browser's developer console to see the error message and then please check the project's{' '} - GitHub issues list{' '} + GitHub issues list + {' '} to see if other people have had the same problem. If not, please file a new GitHub issue. @@ -84,10 +74,15 @@ function Help() { We love hearing about new features that you would like. Please file suggestions, - prefaced with `Gateway Feature`, in our{' '} - GitHub issues list. + prefaced with `Gateway Feature`, in our {' '} + GitHub issues and features list + . Expect a turnaround time of several days for us to be able to consider new UI/GateWay features. - Keep in mind that this is an opensource project, so help out, $ git clone, $ yarn, $ yarn start, and then open a PR. + Keep in mind that this is an opensource project, so help out and open a PR. @@ -97,3 +92,14 @@ function Help() { } export default React.memo(Help) + + +/* + Oolongswap + + */ diff --git a/packages/boba/gateway/src/containers/history/History.js b/packages/boba/gateway/src/containers/history/History.js index 6d8f5d01a3..3a59c7b214 100644 --- a/packages/boba/gateway/src/containers/history/History.js +++ b/packages/boba/gateway/src/containers/history/History.js @@ -20,10 +20,9 @@ import { useSelector } from 'react-redux' import DatePicker from 'react-datepicker' import "react-datepicker/dist/react-datepicker.css" -import { Box, useMediaQuery, useTheme } from '@mui/material' +import { useMediaQuery, useTheme } from '@mui/material' import moment from 'moment' - import Input from 'components/input/Input' import { setActiveHistoryTab } from 'actions/uiAction' @@ -33,8 +32,6 @@ import { fetchTransactions } from 'actions/networkAction' import { selectTransactions } from 'selectors/transactionSelector' import { selectLayer } from 'selectors/setupSelector' -import Tabs from 'components/tabs/Tabs' - import Exits from './TX_Exits' import Deposits from './TX_Deposits' import All from './TX_All' @@ -45,8 +42,8 @@ import * as styles from './TX_All.module.scss' import useInterval from 'util/useInterval' import PageTitle from 'components/pageTitle/PageTitle' -import WalletPicker from 'components/walletpicker/WalletPicker' -import AlertIcon from 'components/icons/AlertIcon' +import Connect from 'containers/connect/Connect' +import Tabs from 'components/tabs/Tabs' import { POLL_INTERVAL } from 'util/constant' @@ -87,24 +84,12 @@ function History() { - - - - - {!layer && - - - - - Connect to MetaMask to see your history - - - - - } + + + {layer && <> diff --git a/packages/boba/gateway/src/containers/home/Home.js b/packages/boba/gateway/src/containers/home/Home.js index 911cd6018e..13f32b70e0 100644 --- a/packages/boba/gateway/src/containers/home/Home.js +++ b/packages/boba/gateway/src/containers/home/Home.js @@ -94,7 +94,6 @@ import { getFS_Saves, getFS_Info } from 'actions/fixedAction' import { fetchVerifierStatus } from 'actions/verifierAction' import Airdrop from 'containers/airdrop/Airdrop' -import Account from 'containers/account/Account' import Transactions from 'containers/history/History' import BobaScope from 'containers/bobaScope/BobaScope' import Help from 'containers/help/Help' @@ -334,9 +333,6 @@ function Home() { width: '100vw', marginRight: 'unset' }}> - {pageDisplay === "AccountNow" && - - } {pageDisplay === "History" && } diff --git a/packages/boba/gateway/src/containers/modals/exit/steps/DoExitStep.js b/packages/boba/gateway/src/containers/modals/exit/steps/DoExitStep.js index 8d776d63fe..7987cd812b 100644 --- a/packages/boba/gateway/src/containers/modals/exit/steps/DoExitStep.js +++ b/packages/boba/gateway/src/containers/modals/exit/steps/DoExitStep.js @@ -276,7 +276,7 @@ function DoExitStep({ handleClose, token, isBridge, openTokenPicker }) { } let receiveL1 = `${Number(value).toFixed(3)} ${token.symbol} - ${!!amountToUsd(value, lookupPrice, token) ? `($${amountToUsd(value, lookupPrice, token).toFixed(2)})`: ''}.` + ${!!amountToUsd(value, lookupPrice, token) ? `($${amountToUsd(value, lookupPrice, token).toFixed(2)})`: ''}` if( Number(logAmount(token.balance, token.decimals)) === 0) { //no token in this account @@ -290,7 +290,6 @@ function DoExitStep({ handleClose, token, isBridge, openTokenPicker }) { disabled={false} variant='outlined' color='primary' - size='large' > Cancel @@ -310,7 +309,6 @@ function DoExitStep({ handleClose, token, isBridge, openTokenPicker }) { disabled={false} variant='outlined' color='primary' - size='large' > Cancel @@ -357,12 +355,11 @@ function DoExitStep({ handleClose, token, isBridge, openTokenPicker }) { } - @@ -385,7 +382,6 @@ function DoExitStep({ handleClose, token, isBridge, openTokenPicker }) { disabled={false} variant='outlined' color='primary' - size='large' > {buttonLabel} @@ -399,7 +395,6 @@ function DoExitStep({ handleClose, token, isBridge, openTokenPicker }) { disabled={!validValue} triggerTime={new Date()} fullWidth={isMobile} - size="large" > Bridge to L1 diff --git a/packages/boba/gateway/src/containers/modals/exit/steps/DoExitStepFast.js b/packages/boba/gateway/src/containers/modals/exit/steps/DoExitStepFast.js index f1b0b49d2f..d70f62e88c 100644 --- a/packages/boba/gateway/src/containers/modals/exit/steps/DoExitStepFast.js +++ b/packages/boba/gateway/src/containers/modals/exit/steps/DoExitStepFast.js @@ -132,7 +132,7 @@ function DoExitStepFast({ handleClose, token, isBridge, openTokenPicker }) { } else if ( exitFee > Number(feeBalanceBOBA)) { - setErrorString(`Insufficient BOBA balance to cover xChain message relay. You need at least ${exitFee} BOBA.`) + setErrorString(`Insufficient BOBA balance to cover xChain message relay. You need at least ${exitFee} BOBA`) setValidValue(false) setValue(value) return false diff --git a/packages/boba/gateway/src/containers/monster/Monster.js b/packages/boba/gateway/src/containers/monster/Monster.js index 59e8dfc42c..8ec90deb70 100644 --- a/packages/boba/gateway/src/containers/monster/Monster.js +++ b/packages/boba/gateway/src/containers/monster/Monster.js @@ -7,14 +7,10 @@ import * as S from './Monster.styles' import { Box, Typography, Grid } from '@mui/material' -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 WalletPicker from 'components/walletpicker/WalletPicker' +import Connect from 'containers/connect/Connect' class Monster extends React.Component { @@ -107,6 +103,7 @@ class Monster extends React.Component { list, netLayer, monsterInfo, + accountEnabled } = this.state let tokenIDverified = null @@ -140,60 +137,19 @@ class Monster extends React.Component { } } - if (!netLayer) { - - return ( - - - - - - Not connected. To access the MonsterVerse, CONNECT to Boba - - - - - - ) - - } else if (netLayer === 'L1') { - - return ( - - - - - - - You are on Ethereum. To access the MonsterVerse, SWITCH to Boba - - - - - - - ) - } - - else { + return ( - return ( - - - {(netLayer !== 'L2') ? - Not connected to Boba - : Connected - } - + + + + + @@ -267,10 +223,10 @@ class Monster extends React.Component { - - + + - )} + ) } } diff --git a/packages/boba/gateway/src/containers/save/Save.js b/packages/boba/gateway/src/containers/save/Save.js index 929886b022..fd6ed7c57c 100644 --- a/packages/boba/gateway/src/containers/save/Save.js +++ b/packages/boba/gateway/src/containers/save/Save.js @@ -32,12 +32,11 @@ import { Box, Typography, Grid } from '@mui/material' import { Circle } from '@mui/icons-material' import PageTitle from 'components/pageTitle/PageTitle' -import LayerSwitcher from 'components/mainMenu/layerSwitcher/LayerSwitcher' -import WalletPicker from 'components/walletpicker/WalletPicker' import BobaGlassIcon from 'components/icons/BobaGlassIcon' import Input from 'components/input/Input' import Button from 'components/button/Button' import ListSave from 'components/listSave/listSave' +import Connect from 'containers/connect/Connect' import { toWei_String } from 'util/amountConvert' import networkService from 'services/networkService' @@ -242,13 +241,16 @@ class Save extends React.Component { return ( - - - {(netLayer !== 'L2') ? - Not connected to Boba - : Connected - } - + + + + + @@ -308,8 +310,8 @@ class Save extends React.Component { Fee: {fee} ETH } - {!accountEnabled ? : null } - { netLayer === 'L2' ? + + { netLayer === 'L2' && - : netLayer === 'L1' ? - - - - - You are on Ethereum. To stake, SWITCH to Boba - - - - - : null } diff --git a/packages/boba/gateway/src/containers/status/Status.js b/packages/boba/gateway/src/containers/status/Status.js deleted file mode 100644 index 183cba700b..0000000000 --- a/packages/boba/gateway/src/containers/status/Status.js +++ /dev/null @@ -1,169 +0,0 @@ -/* -Copyright 2019-present OmiseGO Pte Ltd - -Licensed under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. -You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software -distributed under the License is distributed on an "AS IS" BASIS, -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 React from 'react'; -import { useSelector } from 'react-redux'; - -import { selectConnection, selectByzantine, selectIsSynced } from 'selectors/statusSelector'; - -import Info from 'components/info/Info'; -import Tooltip from 'components/tooltip/Tooltip'; -import { selectNetwork } from 'selectors/setupSelector'; - -import * as styles from './Status.module.scss'; - -function Status ({ className }) { - - const watcherConnection = useSelector(selectConnection); - const byzantineChain = useSelector(selectByzantine); - const isSynced = useSelector(selectIsSynced); - - const network = useSelector(selectNetwork()); - - let networkLabel = 'Local' - - if(network === 'rinkeby') { - networkLabel = 'Rinkeby' - } else if (network === 'mainnet') { - networkLabel = 'Mainnet' - } - - const renderNoConnection = ( - -
-
- - No Connection - -
- - ); - - const renderChainHealth = ( - -
-
- - {byzantineChain ? 'Unhealthy' : 'Healthy'} - -
- - ); - - const renderWatcherStatus = ( - -
-
- - {isSynced ? 'Connected' : 'Syncing'} - -
- - ); - - const renderEnvironment = ( - - -
-
- - {networkLabel} - -
- - ); - - return ( -
-
- -
-
- ); -} - -export default React.memo(Status); diff --git a/packages/boba/gateway/src/containers/status/Status.module.scss b/packages/boba/gateway/src/containers/status/Status.module.scss deleted file mode 100644 index f08239316e..0000000000 --- a/packages/boba/gateway/src/containers/status/Status.module.scss +++ /dev/null @@ -1,71 +0,0 @@ -@import 'index.scss'; - -.Status { - - display: flex; - flex-direction: column; - justify-content: space-between; - padding: 10px; - max-width: 200px; - flex: 1; - color: $white; //$gray4; - - h1 { - margin-bottom: 40px; - } - - .statusCircle { - border-radius: 100%; - width: 8px; - height: 8px; - margin-left: 10px; - } - - .healthy { - background-color: $green; - } - .unhealthy { - background-color: $red; - } - .healthyText { - color: $green; - } - .unhealthyText { - color: $red; - } - - .indicator { - display: flex; - flex-direction: row; - align-items: center; - } - - .icon { - cursor: pointer; - background-color: $green; - border-radius: 100%; - width: 25px; - height: 25px; - display: flex; - justify-content: center; - align-items: center; - - svg { - width: 12px; - height: 12px; - } - } - - .github { - cursor: pointer; - svg { - width: 40px; - height: 40px; - } - } -} - -.logo { - margin-bottom: 40px; - height: 50px; -} diff --git a/packages/boba/gateway/src/containers/wallet/Wallet.js b/packages/boba/gateway/src/containers/wallet/Wallet.js index 13ad634268..8901b180a0 100644 --- a/packages/boba/gateway/src/containers/wallet/Wallet.js +++ b/packages/boba/gateway/src/containers/wallet/Wallet.js @@ -3,17 +3,26 @@ import { useDispatch, useSelector } from 'react-redux' import Button from 'components/button/Button' -import { Circle, Info } from "@mui/icons-material" -import { Box, CircularProgress, Icon, Typography } from '@mui/material' +import { Info } from "@mui/icons-material" +import { Box, Icon, Typography } from '@mui/material' import { switchChain, getETHMetaTransaction } from 'actions/setupAction' -import { openAlert, openError, setActiveHistoryTab, setPage as setPageAction } from 'actions/uiAction' +import { openAlert, openError } from 'actions/uiAction' import { fetchTransactions } from 'actions/networkAction' import Tabs from 'components/tabs/Tabs' -import Nft from "containers/wallet/nft/Nft" +import Nft from 'containers/wallet/nft/Nft' import Token from './token/Token' +import Connect from 'containers/connect/Connect' + import * as S from './wallet.styles' +import * as G from '../Global.styles' + +import { + setConnectETH, + setConnectBOBA +} from 'actions/setupAction' + import { selectAccountEnabled, @@ -22,12 +31,9 @@ import { } from "selectors/setupSelector" import { selectlayer2Balance } from 'selectors/balanceSelector' -import { selectTransactions } from 'selectors/transactionSelector' -import WalletPicker from 'components/walletpicker/WalletPicker' import PageTitle from 'components/pageTitle/PageTitle' -import AlertIcon from 'components/icons/AlertIcon' -import { isEqual, orderBy } from 'lodash' +import { isEqual } from 'lodash' import { POLL_INTERVAL } from "util/constant" import useInterval from "util/useInterval" @@ -48,45 +54,9 @@ function Wallet() { const accountEnabled = useSelector(selectAccountEnabled()) const network = useSelector(selectNetwork()) - const unorderedTransactions = useSelector(selectTransactions, isEqual) - const orderedTransactions = orderBy(unorderedTransactions, i => i.timeStamp, 'desc') - // low balance warnings const l2Balances = useSelector(selectlayer2Balance, isEqual) - const now = Math.floor(Date.now() / 1000) - - const pendingL1 = orderedTransactions.filter((i) => { - if (i.chain === 'L1pending' && //use the custom API watcher for fast data on pending L1->L2 TXs - i.crossDomainMessage && - i.crossDomainMessage.crossDomainMessage === 1 && - i.crossDomainMessage.crossDomainMessageFinalize === 0 && - i.action.status === "pending" && - (now - i.timeStamp) < 20 - ) { - return true - } - return false - }) - - const pendingL2 = orderedTransactions.filter((i) => { - if (i.chain === 'L2' && - i.crossDomainMessage && - i.crossDomainMessage.crossDomainMessage === 1 && - i.crossDomainMessage.crossDomainMessageFinalize === 0 && - i.action.status === "pending" && - (now - i.timeStamp) < 20 - ) { - return true - } - return false - }) - - const pending = [ - ...pendingL1, - ...pendingL2 - ] - useEffect(()=>{ if (accountEnabled) dispatch(fetchTransactions()) @@ -135,7 +105,6 @@ function Wallet() { } }, [ layer ]) - const handleSwitch = (l) => { if (l === 'Token') { setPage('Token') @@ -152,11 +121,17 @@ function Wallet() { return ( - - {layer === 'L2' && tooSmallETH && network === 'rinkeby' && - - - {/* */} + + + + + + {layer === 'L2' && tooSmallETH && network === 'rinkeby' && + + - + - + } - {!accountEnabled && - - - - - Connect to MetaMask to see your balances, transfer, and bridge - - - - - } - - + + { if (!!accountEnabled) { - dispatch(switchChain('L1')) + dispatch(setConnectETH(true)) } }} variant="body2" @@ -212,34 +172,16 @@ function Wallet() { className={chain === 'Boba Wallet' ? 'active' : ''} onClick={() => { if (!!accountEnabled) { - dispatch(switchChain('L2')) + dispatch(setConnectBOBA(true)) } }} variant="body2" component="span"> Boba Wallet - - {!!accountEnabled && pending.length > 0 ? - - { - dispatch(setPageAction('History')) - dispatch(setActiveHistoryTab("Pending")) - }} - variant="text" - component="span"> - Transaction in progress... - - : null} + - { - !accountEnabled ? - Disconnected - : Connected - } + - + + - - + + ) } else if (netLayer === 'L1') { - return ( - - - - - - - You are on Ethereum. To use Boba NFTs, SWITCH to Boba - - - - - - + + + + + ) } else { return ( - - + + @@ -188,7 +181,7 @@ class Nft extends React.Component { Add NFT - +
Monsters can be autoadded to your wallet @@ -207,7 +200,7 @@ class Nft extends React.Component { flexDirection: 'column', gap: '10px' }}> - + Other NFTs must be added manually @@ -234,10 +227,9 @@ class Nft extends React.Component { {loading ? 'Adding NFT...' : 'Add NFT'} - - + {Object.keys(list).length === 0 ? @@ -264,7 +256,7 @@ class Nft extends React.Component { //console.log("NFT not on this layer") return null } - if(list[v].account.toLowerCase() !== walletAddress.toLowerCase()) { + if(walletAddress && (list[v].account.toLowerCase() !== walletAddress.toLowerCase())) { //console.log("NFT not owned by this wallet") return null } @@ -284,7 +276,7 @@ class Nft extends React.Component { } } - + )} } } diff --git a/packages/boba/gateway/src/containers/wallet/nft/Nft.styles.js b/packages/boba/gateway/src/containers/wallet/nft/Nft.styles.js index c2d0e0a1fb..04a223875a 100644 --- a/packages/boba/gateway/src/containers/wallet/nft/Nft.styles.js +++ b/packages/boba/gateway/src/containers/wallet/nft/Nft.styles.js @@ -1,26 +1,5 @@ import { styled } from '@mui/material/styles' -import { Box, Typography, Grid, Divider } from "@mui/material" - -export const NFTPageContainer = styled(Box)(({ theme }) => ({ - margin: '20px auto', - display: 'flex', - justifyContent: 'space-around', - width: '100%', - gap: '10px', - // [theme.breakpoints.between('md', 'lg')]: { - // width: '90%', - // padding: '0px', - // }, - // [theme.breakpoints.between('sm', 'md')]: { - // width: '90%', - // padding: '0px', - // }, - [ theme.breakpoints.down('sm') ]: { - width: '100%', - padding: '0px', - flexDirection: 'column', - }, -})); +import { Box, Grid } from "@mui/material" export const NFTActionContent = styled(Box)(({ theme }) => ({ width: '35%', @@ -28,6 +7,9 @@ export const NFTActionContent = styled(Box)(({ theme }) => ({ flexDirection: 'column', justifyContent: 'flex-start', gap: '10px', + border: theme.palette.primary.border, + borderRadius: theme.palette.primary.borderRadius, + background: theme.palette.background.secondary, [ theme.breakpoints.down('sm') ]: { width: '100%', }, @@ -38,223 +20,22 @@ export const NFTFormContent = styled(Box)(({ theme }) => ({ flexDirection: 'column', justifyContent: 'flex-start', padding: '10px', - borderRadius: '20px', gap: '10px', height: 'fit-content', - background: theme.palette.background.secondary, [ theme.breakpoints.down('sm') ]: { width: '100%', }, -})); +})) export const NFTListContainer = styled(Grid)((props) => ({ width: '63%', + border: props.theme.palette.primary.border, background: !props['data-empty'] ? props.theme.palette.background.secondary : 'none', padding: !props['data-empty'] ? '10px' : 0, - borderRadius: !props['data-empty'] ? '20px' : 0, + borderRadius: !props['data-empty'] ? props.theme.palette.primary.borderRadius : 0, [ props.theme.breakpoints.down('sm') ]: { width: '100%', }, })) -export const NFTPageContent = styled(Grid)(({ theme }) => ({ - marginTop: '20px', - padding: '10px', - borderRadius: '20px', - background: theme.palette.background.secondary, -})) - -export const TableHeading = styled(Box)(({ theme }) => ({ - padding: "20px", - borderTopLeftRadius: "6px", - borderTopRightRadius: "6px", - display: "flex", - alignItems: "center", - background: theme.palette.background.secondary, - [ theme.breakpoints.down('md') ]: { - marginBottom: "5px", - }, -})) -export const LayerAlert = styled(Box)(({ theme }) => ({ - width: "50%", - margin: '20px auto', - display: 'flex', - flexDirection: 'column', - justifyContent: 'space-between', - alignItems: 'center', - gap: '30px', - borderRadius: '12px', - padding: '25px', - background: theme.palette.background.secondary, - [ theme.breakpoints.up('md') ]: { - width: '100%', - }, - [ theme.breakpoints.down('md') ]: { - width: '100%', - }, - -})); - -export const AlertText = styled(Typography)(({ theme }) => ({ - marginLeft: '10px', - flex: 4, - [ theme.breakpoints.up('md') ]: { - }, -})); - -export const AlertInfo = styled(Box)` - display: flex; - justify-content: space-around; - align-items: center; - flex: 1; -`; - -export const Wrapper = styled(Box)(({ theme, ...props }) => ({ - borderRadius: '8px', - background: props.dropDownBox ? theme.palette.background.dropdown : theme.palette.background.secondary, - [ theme.breakpoints.down('md') ]: { - padding: ' 30px 10px', - }, - [ theme.breakpoints.up('md') ]: { - padding: '20px', - }, -})); - -export const GridItemTagContainer = styled(Grid)(({ theme, ...props }) => ({ - spacing: 2, - flexDirection: 'row', - justifyContent: "left", - alignItems: "center", - [ theme.breakpoints.down('md') ]: { - flexDirection: 'column' - } -})); - -export const GridItemTag = styled(Grid)` - display: flex; - flex-direction: row; - align-items: center; -`; - -export const DropdownWrapper = styled(Box)` - display: flex; - align-items: center; - justify-content: space-between; - gap: 5px; - width: 100%; - padding: 16px; - margin-top: 16px; - background-color: ${props => props.theme.palette.background.secondary}; - border-radius: 12px; - text-align: left; -`; - -export const DropdownContent = styled(Box)(({ theme }) => ({ - display: 'flex', - justifyContent: 'space-between', - [ theme.breakpoints.down('md') ]: { - flexDirection: 'column', - gap: '0', - }, - [ theme.breakpoints.up('md') ]: { - flexDirection: 'row', - gap: '16px', - }, -})); - -export const FarmActionContainer = styled(Box)(({ theme }) => ({ - display: 'flex', - justifyContent: 'space-around', - alignItems: 'center', - [ theme.breakpoints.down('md') ]: { - width: '100%' - } -})) - -export const FarmListContainer = styled(Box)(({ theme }) => ({ - [ theme.breakpoints.down('md') ]: { - display: 'flex', - flexDirection: 'column', - gap: '5px' - } -})) - -export const BpIcon = styled('span')(({ theme }) => ({ - borderRadius: 3, - width: 16, - height: 16, - boxShadow: - theme.palette.mode === 'dark' - ? '0 0 0 1px rgb(16 22 26 / 40%)' - : 'inset 0 0 0 1px rgba(16,22,26,.2), inset 0 -1px 0 rgba(16,22,26,.1)', - backgroundColor: theme.palette.mode === 'dark' ? '#394b59' : '#f5f8fa', - backgroundImage: - theme.palette.mode === 'dark' - ? 'linear-gradient(180deg,hsla(0,0%,100%,.05),hsla(0,0%,100%,0))' - : 'linear-gradient(180deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,0))', - '.Mui-focusVisible &': { - outline: '2px auto rgba(19,124,189,.6)', - outlineOffset: 2, - }, - 'input:hover ~ &': { - backgroundColor: theme.palette.mode === 'dark' ? '#30404d' : '#ebf1f5', - }, - 'input:disabled ~ &': { - boxShadow: 'none', - background: - theme.palette.mode === 'dark' ? 'rgba(57,75,89,.5)' : 'rgba(206,217,224,.5)', - }, -})) - - -export const DividerLine = styled(Divider)(({ theme }) => ({ - 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%' -})) - -export const TokenPageContentEmpty = styled(Box)(({ theme }) => ({ - width: '100%', - minHeight: '400px', - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - padding: '10px', - borderRadius: '20px', - gap: '10px', - height: 'fit-content', - background: theme.palette.background.secondary, -})) - -export const TokenPageContent = styled(Box)(({ theme }) => ({ - width: '100%', - display: 'flex', - flexDirection: 'column', - justifyContent: 'center', - alignItems: 'center', - padding: '10px', - borderRadius: '20px', - gap: '10px', - height: 'fit-content', - background: theme.palette.background.secondary, - [ theme.breakpoints.down('sm') ]: { - width: 'fit-content', - minWidth: '100%' - }, -})) - -export const TokenPageContainer = styled(Box)(({ theme }) => ({ - display: 'flex', - justifyContent: 'space-around', - margin: '20px auto', - width: '100%', - gap: '10px', - [ theme.breakpoints.down('sm') ]: { - width: '100%', - padding: '0px', - overflowX: 'scroll', - display: 'block' - }, -})) diff --git a/packages/boba/gateway/src/containers/wallet/token/Token.js b/packages/boba/gateway/src/containers/wallet/token/Token.js index 61d6b7dee0..9163f2471a 100644 --- a/packages/boba/gateway/src/containers/wallet/token/Token.js +++ b/packages/boba/gateway/src/containers/wallet/token/Token.js @@ -5,28 +5,29 @@ import { selectlayer1Balance, selectlayer2Balance } from 'selectors/balanceSelec import { selectLoading } from 'selectors/loadingSelector' import { selectAccountEnabled, selectLayer } from 'selectors/setupSelector' import { selectTokens } from 'selectors/tokenSelector' +import { selectTransactions } from 'selectors/transactionSelector' import { fetchLookUpPrice } from 'actions/networkAction' +import { setActiveHistoryTab, setPage as setPageAction } from 'actions/uiAction' import * as S from './Token.styles' -import { Box, Typography, useTheme } from '@mui/material' +import * as G from '../../Global.styles' + +import { Box, Typography, CircularProgress } from '@mui/material' import { tokenTableHeads } from './token.tableHeads' import ListToken from 'components/listToken/listToken' import Button from 'components/button/Button' import Link from 'components/icons/LinkIcon' +import Pulse from 'components/pulse/PulsingBadge' -import lightLoader from 'images/boba2/loading_light.gif' -import darkLoader from 'images/boba2/loading_dark.gif' - -import { isEqual } from 'lodash' +import { isEqual, orderBy } from 'lodash' import networkService from 'services/networkService' function TokenPage() { const dispatch = useDispatch() - const theme = useTheme() const accountEnabled = useSelector(selectAccountEnabled()) const tokenList = useSelector(selectTokens) @@ -43,7 +44,44 @@ function TokenPage() { const disabled = depositLoading || exitLoading - const loaderImage = (theme.palette.mode === 'light') ? lightLoader : darkLoader; + const unorderedTransactions = useSelector(selectTransactions, isEqual) + const orderedTransactions = orderBy(unorderedTransactions, i => i.timeStamp, 'desc') + + const pendingL1 = orderedTransactions.filter((i) => { + if (i.chain === 'L1pending' && //use the custom API watcher for fast data on pending L1->L2 TXs + i.crossDomainMessage && + i.crossDomainMessage.crossDomainMessage === 1 && + i.crossDomainMessage.crossDomainMessageFinalize === 0 && + i.action.status === "pending" + ) { + return true + } + return false + }) + + const pendingL2 = orderedTransactions.filter((i) => { + if (i.chain === 'L2' && + i.crossDomainMessage && + i.crossDomainMessage.crossDomainMessage === 1 && + i.crossDomainMessage.crossDomainMessageFinalize === 0 && + i.action.status === "pending" + ) { + return true + } + return false + }) + + const pending = [ + ...pendingL1, + ...pendingL2 + ] + + const inflight = pending.filter((i) => { + if (pending && i.hasOwnProperty('stateRoot') && i.stateRoot.stateRootHash === null) { + return true + } + return false + }) useEffect(() => { if (!accountEnabled) return @@ -88,8 +126,8 @@ function TokenPage() { if (!accountEnabled) { return ( - - + + - - + + ) } else { @@ -117,13 +155,13 @@ function TokenPage() { Need ETH or BOBA{'? '} You can swap one for the other at - Oolongswap - + {debug &&