Alert message goes here
diff --git a/packages/boba/gateway/src/components/pageFooter/PageFooter.js b/packages/boba/gateway/src/components/pageFooter/PageFooter.js
deleted file mode 100644
index e982324aa4..0000000000
--- a/packages/boba/gateway/src/components/pageFooter/PageFooter.js
+++ /dev/null
@@ -1,176 +0,0 @@
-import { Telegram, Twitter } from '@mui/icons-material'
-import DiscordIcon from 'components/icons/DiscordIcon'
-import React from 'react'
-import BobaLogo from '../../images/boba2/logo-boba2.svg'
-import GasSwitcher from '../mainMenu/gasSwitcher/GasSwitcher'
-import * as S from './PageFooter.styles'
-import { useMediaQuery, useTheme } from '@mui/material'
-import { LAYER, ROUTES_PATH, WALLET_VERSION } from 'util/constant'
-import { useSelector } from 'react-redux'
-import {
- selectLayer,
- selectActiveNetwork,
- selectActiveNetworkType,
-} from 'selectors'
-import { getBlockExplorerUrl } from 'util/network/network.util'
-
-
-const PageFooter = ({ maintenance }) => {
- const theme = useTheme()
- const isMobile = useMediaQuery(theme.breakpoints.down('md'))
- const [isDiscordHover, setIsDiscordHover] = React.useState(false)
-
- const layer = useSelector(selectLayer())
- const network = useSelector(selectActiveNetwork())
- const networkType = useSelector(selectActiveNetworkType())
-
- if (maintenance) {
- return (
-
-
-
- 
-
-
-
-
-
-
- Boba Docs
-
-
-
-
-
-
-
- setIsDiscordHover(true)}
- onMouseLeave={() => setIsDiscordHover(false)}
- >
-
-
-
-
-
-
- Boba Website
-
-
-
-
- )
- }
- return (
-
-
-
-
-
-
- setIsDiscordHover(true)}
- onMouseLeave={() => setIsDiscordHover(false)}
- >
-
-
-
-
-
-
- {!isMobile && }
-
-
-
-
-
-
-
- FAQs
-
-
- Dev Tools
-
- BobaScope
-
- Blockexplorer
-
-
- Boba Docs
-
-
-
-
-
- Boba Website
-
-
-
- v{WALLET_VERSION}
-
-
- )
-}
-
-export default PageFooter
diff --git a/packages/boba/gateway/src/components/pageFooter/PageFooter.styles.js b/packages/boba/gateway/src/components/pageFooter/PageFooter.styles.js
deleted file mode 100644
index 15ff38add2..0000000000
--- a/packages/boba/gateway/src/components/pageFooter/PageFooter.styles.js
+++ /dev/null
@@ -1,168 +0,0 @@
-import { styled } from '@mui/material/styles'
-import { Box, Divider } from '@mui/material'
-import { NavLink } from 'react-router-dom'
-import { IconButton } from '@mui/material'
-
-export const Wrapper = styled(Box)(({ theme }) => ({
- display: 'flex',
- flexDirection: 'column',
- justifyContent: 'flex-start',
- alignItems: 'center',
- //margin: '0',
- //padding: '0 20px',
- //bottom: 0,
- //width: '100%',
- //height: '184px',
- background: theme.palette.background.footer,
- [theme.breakpoints.down('md')]: {
- marginTop: '10px',
- maxHeight: '400px',
- justifyContent: 'flex-start',
- padding: '0 20px',
- },
- color: 'rgba(255, 255, 255, 0.65)'
-}))
-
-export const ContentWrapper = styled(Box)(({ theme }) => ({
- display: 'flex',
- justifyContent: 'space-between',
- width: '70%',
- margin: '30px 0',
- [theme.breakpoints.between('sm', 'md')]: {
- width: '90%',
- margin: '20px 0',
- flexDirection: 'column',
- justifyContent: 'center',
- gap: '20px',
- },
- [theme.breakpoints.down('md')]: {
- margin: '20px 0',
- width: '100%',
- flexDirection: 'column',
- justifyContent: 'center',
- gap: '20px',
- },
-
-}))
-
-export const FooterLink = styled(NavLink)(({ theme }) => ({
- //marginLeft: theme.spacing(1),
- marginTop: theme.spacing(1),
- fontSize: '14px',
- textDecoration: 'none',
- cursor: 'pointer',
- color: 'unset',
- '&:hover': {
- color: theme.palette.secondary.main,
- },
-}))
-
-export const FooterLinkExt = styled(Box)(({ theme }) => ({
- //marginLeft: theme.spacing(1),
- marginTop: theme.spacing(1),
- fontSize: '14px',
- textDecoration: 'none',
- cursor: 'pointer',
- color: 'unset',
- '&:hover': {
- color: theme.palette.secondary.main,
- },
-}))
-
-export const FooterLogoWrapper = styled(Box)(({ theme }) => ({
- display: 'flex',
- alignSelf: 'flex-start',
- justifyContent: 'center',
- alignItems: 'center',
-
-}))
-
-export const FooterDivider = styled(Divider)(({ theme }) => ({
- background: 'rgba(49,49,49, 1)',
- boxSizing: 'border-box',
- width: '100%',
-}))
-
-export const FooterDividerMobile = styled(Divider)(({ theme }) => ({
- display: 'none',
- [theme.breakpoints.down('md')]: {
- display: 'block',
- background: 'rgba(255, 255, 255, 0.04)',
- boxSizing: 'border-box',
- boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)',
- width: '100%',
- },
-}))
-
-export const FooterLinkWrapperLeft = styled(Box)(({ theme }) => ({}))
-
-export const FooterLinkWrapper = styled(Box)(({ theme }) => ({
- display: 'flex',
- alignSelf: 'flex-start',
- justifyContent: 'space-between',
- alignItems: 'center',
- width: '70%',
- [theme.breakpoints.down('md')]: {
- width: '100%',
- justifyContent: 'space-around',
- flexDirection: 'column',
- margin: '0',
- marginTop: '20px',
- alignItems: 'flex-start',
- },
-}))
-
-export const LinkWrapper = styled(Box)(({ theme }) => ({
- display: 'flex',
- width: '40%',
- justifyContent: 'flex-start',
- gap: '10px',
- [theme.breakpoints.down('md')]: {
- flexDirection: 'column',
- alignItems: 'flex-start',
- margin: '10px 0',
- width: '100%',
- gap: 0,
- },
- [theme.breakpoints.down('sm')]: {
- width: '100%',
- },
-}))
-
-export const SocialWrapper = styled(Box)(({ theme }) => ({
- display: 'flex',
- width: '20%',
- justifyContent: 'flex-start',
- gap: '10px',
- a: {
- cursor: 'pointer',
- },
- [theme.breakpoints.down('md')]: {
- justifyContent: 'center',
- margin: '10px 0',
- width: '100%',
- },
- [theme.breakpoints.down('sm')]: {
- width: '100%',
- },
-}))
-
-export const SocialButton = styled(IconButton)(({ theme }) => ({
- svg: {
- path: {
- fill: 'rgba(255, 255, 255, 0.65)',
- fillOpacity: 1,
- },
- },
- color: 'rgba(255, 255, 255, 1)',
- opacity: 0.65,
- '&:hover': {
- background: 'none',
- svg: {
- path: {
- fill: theme.palette.secondary.main,
- fillOpacity: 1,
- },
- },
- },
-}))
diff --git a/packages/boba/gateway/src/components/pageHeader/PageHeader.js b/packages/boba/gateway/src/components/pageHeader/PageHeader.js
deleted file mode 100644
index 4ee4c2aedf..0000000000
--- a/packages/boba/gateway/src/components/pageHeader/PageHeader.js
+++ /dev/null
@@ -1,181 +0,0 @@
-import React, { useState } from 'react'
-import BobaLogo from '../icons/BobaLogo'
-import { ReactComponent as BobaLogoM } from '../../images/boba2/logo-boba2-m.svg'
-import { useSelector } from 'react-redux'
-import {
- HeaderWrapper,
- StyleDrawer,
- HeaderActionButton,
- DrawerHeader,
- WrapperCloseIcon,
- HeaderDivider,
-} from './PageHeader.styles'
-import {
- Box,
- Container,
- Drawer,
- IconButton,
- Typography,
- useMediaQuery,
- useTheme,
-} from '@mui/material'
-
-import NavIcon from 'components/icons/NavIcon'
-import WalletIcon from 'components/icons/WalletIcon'
-import CloseIcon from 'components/icons/CloseIcon'
-import networkService from 'services/networkService'
-import { makeStyles } from '@mui/styles'
-import {
- Copy,
- Disconnect,
- MenuItems,
- ThemeSwitcher,
- FeeSwitcher,
- NetworkSwitcher,
-} from 'components'
-import { selectAccountEnabled, selectLayer, selectMonster } from 'selectors'
-import { LAYER } from 'util/constant'
-
-const useStyles = makeStyles({
- root: {
- width: '100%',
- color: 'f00',
- },
-})
-
-const PageHeader = ({ maintenance }) => {
- const classes = useStyles()
- const [open, setOpen] = useState(false)
- const [walletOpen, setWalletOpen] = useState(false)
- const [feeOpen, setFeeOpen] = useState(false)
-
- const theme = useTheme()
- const accountEnabled = useSelector(selectAccountEnabled())
- const layer = useSelector(selectLayer())
- const monsterNumber = useSelector(selectMonster())
- const isMobile = useMediaQuery(theme.breakpoints.down('md'))
-
- const Logo = monsterNumber > 0 ? BobaLogoM : BobaLogo
-
- if (maintenance) {
- return (
-
-
-
-
- )
- }
-
- return (
- <>
- {isMobile ? (
-
-
-
-
- setFeeOpen(!feeOpen)}
- sx={{ cursor: 'pointer' }}
- >
-
- Fee
-
-
- setWalletOpen(!walletOpen)}
- sx={{ cursor: 'pointer' }}
- >
-
-
- setOpen(!open)} sx={{ cursor: 'pointer' }}>
-
-
-
- setOpen(false)}
- classes={{ paper: classes.root }}
- >
-
-
-
-
- Menu
-
- setOpen(false)}>
-
-
-
-
-
-
-
-
-
- setWalletOpen(false)}
- classes={{ paper: classes.root }}
- >
-
-
-
-
- Connect wallet
-
- setWalletOpen(false)}
- >
-
-
-
-
-
-
-
-
- setFeeOpen(false)}
- classes={{ paper: classes.root }}
- >
-
-
-
-
- Select Fee
-
- setFeeOpen(false)}>
-
-
-
-
-
- {layer === LAYER.L2 ? : null}
-
-
-
-
- ) : (
-
-
-
- {layer === LAYER.L2 ? : null}
-
- {!!accountEnabled ? (
- <>
-
-
-
- ) : null}
-
-
- )}
-
- )
-}
-
-export default PageHeader
diff --git a/packages/boba/gateway/src/components/pageHeader/PageHeader.styles.js b/packages/boba/gateway/src/components/pageHeader/PageHeader.styles.js
deleted file mode 100644
index 1685957079..0000000000
--- a/packages/boba/gateway/src/components/pageHeader/PageHeader.styles.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import { Box, Divider } from "@mui/material"
-import { styled } from '@mui/material/styles'
-
-export const HeaderWrapper = styled(Box)(({ theme }) => ({
- width: '100%',
- height: '64px',
- gap: '10px',
- display: 'flex',
- justifyContent: 'space-around',
- alignItems: 'center',
- padding: '20px',
- [ theme.breakpoints.down('md') ]: {
- justifyContent: 'space-between',
- padding: '20px 0',
- }
-}))
-
-export const HeaderActionButton = styled(Box)(({ theme }) => ({
- gap: '10px',
- display: 'flex',
- justifyContent: 'space-around',
- alignItems: 'center',
-}))
-
-export const DrawerHeader = styled(Box)`
- display: flex;
- flex-direction: column;
- gap: 30px;
- padding: 20px 24px;
-`;
-
-export const HeaderDivider = 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 WrapperCloseIcon = styled(Box)`
- display: flex;
- justify-content: space-between;
- align-items: center;
-`;
-
-export const StyleDrawer = styled(Box)`
- background-color: ${(props) => props.theme.palette.mode === 'light' ? 'white' : '#111315'};
- height: 100%;
-`;
diff --git a/packages/boba/gateway/src/components/pageHeader/PageHeader.styles.tsx b/packages/boba/gateway/src/components/pageHeader/PageHeader.styles.tsx
deleted file mode 100644
index ef3d6858e6..0000000000
--- a/packages/boba/gateway/src/components/pageHeader/PageHeader.styles.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import styled, { css } from 'styled-components'
-
-export const HeaderWrapper = styled.div`
- display: flex;
- width: 100%;
- height: 64px;
- gap: 10px;
- justify-content: space-around;
- align-items: center;
- padding: '20px';
-
- @media (max-width: 980px) {
- justify-content: space-between;
- padding: 20px 0;
- }
-`
-
-export const HeaderActionButton = styled.div`
- gap: 10px;
- display: flex;
- justify-content: space-around;
- align-items: center;
-`
-
-export const DrawerHeader = styled.div`
- display: flex;
- flex-direction: column;
- gap: 30px;
- padding: 20px 24px;
-`
-
-export const HeaderDivider = styled.div`
- ${(props) =>
- props.theme.name === 'light' &&
- css`
- background: ${props.theme.colors.gray[700]};
- `}
- ${(props) =>
- props.theme.name === 'dark' &&
- css`
- background: ${props.theme.colors.gray[800]};
- `}
- box-sizing: border-box;
- box-shadow: ${(props) => props.theme.boxShadow};
- width: 100%;
-`
-
-export const WrapperCloseIcon = styled.div`
- display: flex;
- justify-content: space-between;
- align-items: center;
-`
-
-export const StyleDrawer = styled.div`
- height: 100%;
-
- ${(props) =>
- props.theme.name === 'light' &&
- css`
- background: ${props.theme.colors.gray[50]};
- `}
- ${(props) =>
- props.theme.name === 'dark' &&
- css`
- background: ${props.theme.colors.gray[800]};
- `}
-`
diff --git a/packages/boba/gateway/src/components/seven/FastExit.js b/packages/boba/gateway/src/components/seven/FastExit.js
index 0aba0b2171..38cf3ce590 100644
--- a/packages/boba/gateway/src/components/seven/FastExit.js
+++ b/packages/boba/gateway/src/components/seven/FastExit.js
@@ -18,17 +18,13 @@ import React from 'react'
import { Typography } from '@mui/material'
import * as S from './Transaction.styles'
+import { ExitWrapper, ExitsWrapper, Hash, HashContainer } from './styles'
import networkService from 'services/networkService'
function FastExit({
- link,
- status,
- chain,
blockNumber,
- oriChain,
oriHash,
- age,
unixTime
}) {
@@ -44,7 +40,7 @@ function FastExit({
let timeLabel = `Fast Exit was started ${secondsAgo} seconds ago`
return (
-
+
-
+
{blockNumber}
{timeLabel}
-
+
Hash:
-
{oriHash}
-
-
-
+
)
}
diff --git a/packages/boba/gateway/src/components/seven/Seven.js b/packages/boba/gateway/src/components/seven/Seven.js
index 83b80e7d2d..bf1c66d80f 100644
--- a/packages/boba/gateway/src/components/seven/Seven.js
+++ b/packages/boba/gateway/src/components/seven/Seven.js
@@ -18,17 +18,13 @@ import React from 'react'
import { Typography } from '@mui/material'
import * as S from './Transaction.styles'
+import { Hash, ExitsWrapper, ExitWrapper, HashContainer } from './styles'
import networkService from 'services/networkService'
function Seven({
- link,
- status,
- chain,
blockNumber,
- oriChain,
oriHash,
- age,
unixTime
}) {
@@ -57,7 +53,7 @@ function Seven({
}
return (
-
+
-
+
{blockNumber}
{overdue < 0 &&
@@ -84,21 +80,20 @@ function Seven({
{timeLabel}
}
-
+
Hash:
-
{oriHash}
-
-
-
+
)
}
diff --git a/packages/boba/gateway/src/components/seven/styles.ts b/packages/boba/gateway/src/components/seven/styles.ts
new file mode 100644
index 0000000000..cf67669e97
--- /dev/null
+++ b/packages/boba/gateway/src/components/seven/styles.ts
@@ -0,0 +1,59 @@
+import styled, { css } from 'styled-components'
+import { Typography } from 'components/global'
+
+export const ExitsWrapper = styled.div`
+ background: ${(props) => props.theme.colors.popup};
+ padding: 10px;
+ border-radius: 12px;
+ ${(props) =>
+ props.theme.name === 'light' &&
+ css`
+ border: solid 1px ${props.theme.colors.gray[400]};
+ &:hover {
+ background: ${props.theme.colors.gray[300]};
+ border: solid 1px ${props.theme.colors.gray[500]};
+ }
+ `}
+ ${(props) =>
+ props.theme.name === 'dark' &&
+ css`
+ border: solid 1px ${props.theme.colors.gray[300]};
+ &:hover {
+ background: ${props.theme.colors.gray[300]};
+ }
+ `}
+`
+
+export const ExitWrapper = styled.div`
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: flex-start;
+ gap: 5px;
+`
+
+export const HashContainer = styled(Typography)`
+ ${(props) =>
+ props.theme.name === 'light' &&
+ css`
+ color: ${props.theme.colors.gray[700]};
+ `}
+ ${(props) =>
+ props.theme.name === 'dark' &&
+ css`
+ color: ${props.theme.colors.gray[50]};
+ `}
+`
+
+export const Hash = styled.a`
+ ${(props) =>
+ props.theme.name === 'light' &&
+ css`
+ color: ${props.theme.colors.gray[700]};
+ `}
+ ${(props) =>
+ props.theme.name === 'dark' &&
+ css`
+ color: ${props.theme.colors.gray[50]};
+ `}
+`
diff --git a/packages/boba/gateway/src/components/stake/transactionList/index.tsx b/packages/boba/gateway/src/components/stake/transactionList/index.tsx
new file mode 100644
index 0000000000..bc00a6c0c9
--- /dev/null
+++ b/packages/boba/gateway/src/components/stake/transactionList/index.tsx
@@ -0,0 +1,103 @@
+import React from 'react'
+import dayjs from 'dayjs'
+import duration from 'dayjs/plugin/duration'
+
+dayjs.extend(duration)
+
+import { useDispatch } from 'react-redux'
+import { openAlert, openError } from 'actions/uiAction'
+import { withdrawFS_Savings } from 'actions/fixedAction'
+
+import { Button } from 'components/global/button'
+import { Typography } from 'components/global/typography'
+import { ModalTypography } from 'components/global/modalTypography'
+
+import { TransactionListInterface } from './types'
+import { StakeItemDetails, Token, Flex } from './styles'
+import { getCoinImage } from 'util/coinImage'
+
+const TransactionList = ({ stakeInfo }: TransactionListInterface) => {
+ const dispatch = useDispatch
()
+
+ const timeDeposit = dayjs.unix(stakeInfo.depositTimestamp)
+ const timeNow = dayjs()
+
+ const duration_Days = timeNow.diff(timeDeposit, 'day')
+ const earned = stakeInfo.depositAmount * (0.05 / 365.0) * duration_Days
+
+ const unlocktimeNextBegin = timeDeposit.add(14, 'day')
+
+ const unlocktimeNextEnd = unlocktimeNextBegin.add(2, 'day')
+
+ /* finalize the migration to DAYJs next deploy*/
+ const timeDeposit_S = stakeInfo.depositTimestamp
+ const timeNow_S = Math.round(Date.now() / 1000)
+
+ const duration_S = timeNow_S - timeDeposit_S
+
+ const twoWeeks = 14 * 24 * 60 * 60
+ const twoDays = 2 * 24 * 60 * 60
+ const residual_S = duration_S % (twoWeeks + twoDays)
+
+ const handleUnstake = async () => {
+ const withdrawTX = await dispatch(withdrawFS_Savings(stakeInfo.stakeId))
+
+ if (withdrawTX !== null && withdrawTX !== undefined) {
+ openAlert('Your BOBA were unstaked')
+ } else {
+ openError('Failed to unstake BOBA')
+ }
+ }
+
+ let locked = true
+ if (residual_S > twoWeeks) {
+ locked = false
+ }
+
+ return (
+
+
+
+
+ {timeDeposit.format('DD MMM YYYY hh:mm A')}
+
+
+
+
+ Amount Staked
+
+ {stakeInfo.depositAmount
+ ? `${stakeInfo.depositAmount.toLocaleString(undefined, {
+ maximumFractionDigits: 2,
+ })}`
+ : `0`}
+
+
+
+ Earned
+ {earned.toFixed(3)}
+
+
+
+ Next unstake window:{' '}
+
+
+ {` ${unlocktimeNextBegin.format('DD')}-${unlocktimeNextEnd.format(
+ 'DD MMM YYYY hh:mm A'
+ )}`}
+
+
+
+
+
+
+
+ )
+}
+
+export default TransactionList
diff --git a/packages/boba/gateway/src/components/stake/transactionList/styles.ts b/packages/boba/gateway/src/components/stake/transactionList/styles.ts
new file mode 100644
index 0000000000..0575888b4c
--- /dev/null
+++ b/packages/boba/gateway/src/components/stake/transactionList/styles.ts
@@ -0,0 +1,69 @@
+import styled, { css } from 'styled-components'
+import { sdesktop, tablet, mobile } from 'themes/screens'
+export const Wrapper = styled.div`
+ border-radius: 0;
+ background: ${(props) => props.theme.background.secondary};
+`
+
+export const Entry = styled.div`
+ padding: 20px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background: ${(props) => props.theme.background.secondary};
+`
+
+export const GridCoontainer = styled.div``
+export const GridItemTag = styled.div`
+ text-align: left;
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-start;
+ align-items: center;
+`
+
+export const StakeItemDetails = styled.div`
+ display: flex;
+ width: 100%;
+ justify-content: space-between;
+ align-items: center;
+ background: ${(props) => props.theme.colors.box.background};
+ border: 1px solid ${(props) => props.theme.colors.box.border};
+ box-sizing: border-box;
+ padding: 20px 35px;
+ border-radius: 8px;
+
+ > div {
+ display: flex;
+ margin: 0px auto;
+ white-space: break-spaces;
+ align-items: center;
+ &:first-of-type {
+ margin-left: 0px;
+ width: 200px;
+ margin-right: 10px;
+ }
+ &:last-of-type {
+ margin-right: 0px;
+ margin-left: 15px;
+ }
+ }
+`
+
+export const Flex = styled.div`
+ display: flex;
+ justify-content: space-between;
+ gap: 0px 10px;
+
+ > div {
+ display: flex;
+ gap: 0px 5px;
+ white-space: initial;
+ }
+`
+export const Token = styled.img`
+ max-width: 32px;
+ width: 100%;
+ height: auto;
+ margin-right: 10px;
+`
diff --git a/packages/boba/gateway/src/components/stake/transactionList/types.ts b/packages/boba/gateway/src/components/stake/transactionList/types.ts
new file mode 100644
index 0000000000..1e297d6e4b
--- /dev/null
+++ b/packages/boba/gateway/src/components/stake/transactionList/types.ts
@@ -0,0 +1,10 @@
+type TransactionType = {
+ stakeId: number
+ depositTimestamp: number
+ depositAmount: number
+ isActive: boolean
+}
+
+export interface TransactionListInterface {
+ stakeInfo: TransactionType
+}
diff --git a/packages/boba/gateway/src/components/transaction/Transaction.js b/packages/boba/gateway/src/components/transaction/Transaction.js
deleted file mode 100644
index 971f001087..0000000000
--- a/packages/boba/gateway/src/components/transaction/Transaction.js
+++ /dev/null
@@ -1,282 +0,0 @@
-/*
-Copyright 2021-present Boba Network.
-
-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 } from 'react'
-
-import { Typography, Fade, useMediaQuery, useTheme } from '@mui/material'
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
-
-import * as S from './Transaction.styles'
-
-import truncate from 'truncate-middle'
-import networkService from 'services/networkService'
-import { formatDate } from 'util/dates'
-
-function Transaction({
- time,
- timeLabel = null,
- chain,
- typeTX,
- blockNumber,
- detail,
- oriChain,
- oriHash,
- amountTx,
- completion = '',
- tx_ref = null,
- eventType,
- toChain,
-}) {
- const [dropDownBox, setDropDownBox] = useState(false)
-
- const theme = useTheme()
- const isMobile = useMediaQuery(theme.breakpoints.down('md'))
- const isNotFullScreen = useMediaQuery(theme.breakpoints.down(1920))
-
- const chainLink = ({ chain, hash }) => {
- const network = networkService.networkConfig
- if (!!network && !!network[chain]) {
- return `${network[chain].transaction}${hash}`
- }
- return ''
- }
-
- function renderDetailRedesign() {
- if (!detail) {
- return null
- }
-
- let prefix = 'L2'
- if (oriChain === 'L2') prefix = 'L1'
-
- return (
-
-
-
-
- {prefix} Hash:
-
- {isMobile ? truncate(detail.hash, 6, 6, '...') : detail.hash}
-
-
-
-
- {prefix} Block: {detail.blockNumber}
-
-
- {prefix} Block Hash:
-
- {detail.blockHash}
-
-
-
- {prefix} From:
-
- {detail.from}
-
-
-
- {prefix} To:
-
- {detail.to}
-
-
-
-
-
- )
- }
-
- return (
-
-
-
-
-
-
-
-
-
- {blockNumber}
-
-
- {typeTX}
-
- {eventType ? (
-
- {eventType}
-
- ) : null}
- {amountTx ? (
-
- {amountTx}
-
- ) : null}
-
-
-
-
- {!!detail && (
- {
- setDropDownBox(!dropDownBox)
- }}
- >
- More Information{' '}
-
-
- )}
-
-
-
- {dropDownBox ? renderDetailRedesign() : null}
-
- )
-}
-
-export default Transaction
diff --git a/packages/boba/gateway/src/components/transaction/Transaction.styles.js b/packages/boba/gateway/src/components/transaction/Transaction.styles.js
deleted file mode 100644
index a7564b9b46..0000000000
--- a/packages/boba/gateway/src/components/transaction/Transaction.styles.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import { styled } from '@mui/material/styles'
-import { Box, Grid } from '@mui/material'
-
-export const Wrapper = styled(Box)(({ theme, ...props }) => ({
- borderBottom: theme.palette.mode === 'light' ? '1px solid #c3c5c7' : '1px solid #192537',
- borderRadius: '0',
- background: theme.palette.background.secondary,
- [theme.breakpoints.down('md')]: {
- //padding: '30px 10px',
- },
- [theme.breakpoints.up('md')]: {
- padding: '10px',
- },
-}));
-
-export const GridContainer = styled(Grid)(({theme})=>({
- [theme.breakpoints.down('md')]:{
- justifyContent: 'flex-start'
- }
-}))
-
-export const GridItemTag = styled(Grid)(({ theme, ...props }) => ({
- display: 'flex',
- alignItems: 'center',
- [theme.breakpoints.down('md')]:{
- padding: `${props.xs === 12 ? '20px 0px 0px': 'inherit'}`
- }
-}))
-
-export const DropdownWrapper = styled(Box)`
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
- align-items: flex-start;
- gap: 5px;
- width: 100%;
- margin-top: 10px;
- padding: 12px;
- background-color: ${props => props.theme.palette.background.secondary};
- text-align: center;
-`;
-
-export const DropdownContent = styled(Box)(({ theme }) => ({
- display: 'flex',
- justifyContent: 'space-between',
- [theme.breakpoints.down('md')]: {
- flexDirection: 'column',
- gap: '5px',
- padding: '5px'
- },
- [theme.breakpoints.up('md')]: {
- flexDirection: 'row',
- gap: '16px',
- },
-}));
-
diff --git a/packages/boba/gateway/src/containers/Bridging/BridgeHeader/index.tsx b/packages/boba/gateway/src/containers/Bridging/BridgeHeader/index.tsx
index 62ae9fdf0f..6e434cb672 100644
--- a/packages/boba/gateway/src/containers/Bridging/BridgeHeader/index.tsx
+++ b/packages/boba/gateway/src/containers/Bridging/BridgeHeader/index.tsx
@@ -27,7 +27,7 @@ const BridgeHeader = (props: Props) => {
diff --git a/packages/boba/gateway/src/containers/Bridging/BridgeInput/EmergencySwap/index.tsx b/packages/boba/gateway/src/containers/Bridging/BridgeInput/EmergencySwap/index.tsx
new file mode 100644
index 0000000000..31448bcf9d
--- /dev/null
+++ b/packages/boba/gateway/src/containers/Bridging/BridgeInput/EmergencySwap/index.tsx
@@ -0,0 +1,88 @@
+import React, { FC, useEffect, useState } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import {
+ selectAccountEnabled,
+ selectActiveNetwork,
+ selectLayer,
+ selectlayer2Balance,
+} from 'selectors'
+import networkService from 'services/networkService'
+
+import { getETHMetaTransaction } from 'actions/setupAction'
+import { openAlert } from 'actions/uiAction'
+import BN from 'bignumber.js'
+import { isEqual } from 'lodash'
+import { logAmount } from 'util/amountConvert'
+import { LAYER } from 'util/constant'
+import { NETWORK } from 'util/network/network.util'
+import { SwapAction, SwapAlert, SwapContainer } from './styles'
+
+interface Props {}
+
+const EmergencySwap: FC = (props) => {
+ const network = useSelector(selectActiveNetwork())
+ const accountEnabled = useSelector(selectAccountEnabled())
+ const l2Balances = useSelector(selectlayer2Balance, isEqual)
+ const layer = useSelector(selectLayer())
+ const [tooSmallSec, setTooSmallSec] = useState(false)
+ const dispatch = useDispatch()
+
+ useEffect(() => {
+ if (accountEnabled && l2Balances.length > 0) {
+ const l2BalanceSec = l2Balances.find(
+ (i: any) => i.symbol === networkService.L1NativeTokenSymbol
+ )
+
+ if (l2BalanceSec && l2BalanceSec.balance) {
+ // FOR ETH MIN BALANCE 0.003ETH for other secondary tokens 1
+ const minBalance = network === NETWORK.ETHEREUM ? 0.003 : 1
+ setTooSmallSec(
+ new BN(logAmount(l2BalanceSec.balance, 18)).lt(new BN(minBalance))
+ )
+ } else {
+ // in case of zero ETH balance we are setting tooSmallSec
+ setTooSmallSec(true)
+ }
+ }
+ }, [l2Balances, accountEnabled, network])
+
+ const emergencySwap = async () => {
+ const res = await dispatch(getETHMetaTransaction())
+ if (res) {
+ dispatch(openAlert('Emergency Swap submitted'))
+ }
+ }
+
+ const alertContent = () => {
+ if (NETWORK.ETHEREUM === network) {
+ return `Using BOBA requires a minimum ETH balance (of 0.002 ETH) regardless of your fee setting,
+ otherwise MetaMask may incorrectly reject transactions. If you ran out of ETH, use EMERGENCY SWAP to swap BOBA
+ for 0.005 ETH at market rates.`
+ } else {
+ return `Using ${networkService.L1NativeTokenSymbol} requires a minimum BOBA
+ balance (of 1 BOBA) regardless of your fee setting, otherwise
+ MetaMask may incorrectly reject transactions. If you ran out of
+ BOBA, use EMERGENCY SWAP to swap ${networkService.L1NativeTokenSymbol} for 1 BOBA at market rates.`
+ }
+ }
+
+ if (layer === LAYER.L2 && tooSmallSec) {
+ return (
+
+ {alertContent()}
+ {
+ emergencySwap()
+ }}
+ label="Emergency Swap"
+ />
+
+ )
+ } else {
+ return null
+ }
+}
+
+export default EmergencySwap
diff --git a/packages/boba/gateway/src/containers/Bridging/BridgeInput/EmergencySwap/styles.ts b/packages/boba/gateway/src/containers/Bridging/BridgeInput/EmergencySwap/styles.ts
new file mode 100644
index 0000000000..c09d41d002
--- /dev/null
+++ b/packages/boba/gateway/src/containers/Bridging/BridgeInput/EmergencySwap/styles.ts
@@ -0,0 +1,35 @@
+import { Button, Typography } from 'components/global'
+import styled from 'styled-components'
+
+export const SwapContainer = styled.div`
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ padding: 10px;
+ gap: 8px;
+ border-radius: 8px;
+ border: 1px solid
+ ${({ theme: { colors, name } }) =>
+ name === 'light' ? colors.gray[600] : colors.green[300]};
+ background: ${({ theme: { name } }) =>
+ name === 'light' ? 'transparant' : 'rgba(238, 238, 238, 0.05)'};
+`
+export const SwapAlert = styled(Typography).attrs({
+ variant: 'body3',
+})`
+ font-weight: 400;
+ line-height: normal;
+ color: ${({ theme, color }) =>
+ color
+ ? color
+ : theme.name === 'light'
+ ? theme.colors.gray[700]
+ : theme.colors.gray[100]};
+`
+export const SwapAction = styled(Button)`
+ padding: 10px;
+ display: flex;
+ flex-direction: column;
+ align-item: center;
+ justify-content: center;
+`
diff --git a/packages/boba/gateway/src/containers/Bridging/BridgeInput/Fee/index.tsx b/packages/boba/gateway/src/containers/Bridging/BridgeInput/Fee/index.tsx
index ac625ee971..fdc4b968bc 100644
--- a/packages/boba/gateway/src/containers/Bridging/BridgeInput/Fee/index.tsx
+++ b/packages/boba/gateway/src/containers/Bridging/BridgeInput/Fee/index.tsx
@@ -43,7 +43,11 @@ const Fee = (props: Props) => {
const estimateTime = () => {
if (bridgeType === BRIDGE_TYPE.CLASSIC) {
- return '7 days'
+ if (layer === LAYER.L1) {
+ return '13 ~ 14mins.'
+ } else {
+ return '7 days'
+ }
} else {
if (layer === LAYER.L1) {
return '1 ~ 5min.'
diff --git a/packages/boba/gateway/src/containers/Bridging/BridgeInput/index.tsx b/packages/boba/gateway/src/containers/Bridging/BridgeInput/index.tsx
index 6ace07b910..06296d56ae 100644
--- a/packages/boba/gateway/src/containers/Bridging/BridgeInput/index.tsx
+++ b/packages/boba/gateway/src/containers/Bridging/BridgeInput/index.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react'
+import React, { FC, useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { openModal } from 'actions/uiAction'
import { selectAccountEnabled, selectTokenToBridge } from 'selectors'
@@ -24,6 +24,8 @@ import {
TokenSymbol,
} from './styles'
import { SectionLabel } from '../chain/styles'
+import bobaLogo from 'assets/images/Boba_Logo_White_Circle.png'
+import EmergencySwap from './EmergencySwap'
type Props = {}
@@ -47,12 +49,16 @@ const BridgeInput: FC = (props) => {
- Amount
+ Token
openTokenPicker()}>
{token && (
})
= (props) => {
)}
{token && }
+
)
}
diff --git a/packages/boba/gateway/src/containers/Bridging/BridgeInput/styles.ts b/packages/boba/gateway/src/containers/Bridging/BridgeInput/styles.ts
index 32eb1836bc..6097abcfca 100644
--- a/packages/boba/gateway/src/containers/Bridging/BridgeInput/styles.ts
+++ b/packages/boba/gateway/src/containers/Bridging/BridgeInput/styles.ts
@@ -1,6 +1,6 @@
import { Svg, Typography } from 'components/global'
import styled, { css } from 'styled-components'
-import ArrowDown from 'images/icons/arrowdown.svg'
+import ArrowDown from 'assets/images/icons/arrowdown.svg'
import { mobile } from 'themes/screens'
export const BridgeInputContainer = styled.div`
@@ -88,10 +88,10 @@ export const TokenLabel = styled(Typography).attrs({
export const TokenPickerIcon = styled.div`
justify-self: flex-end;
`
-export const DownArrow = styled(Svg).attrs({
+export const DownArrow = styled(Svg).attrs(({ theme }) => ({
src: ArrowDown,
- fill: '#fff',
-})``
+ fill: `${theme.name === 'light' ? '#000' : '#fff'}`,
+}))``
export const ReceiveAmount = styled(Typography).attrs({
variant: 'title',
diff --git a/packages/boba/gateway/src/containers/Bridging/BridgeTypeSelector/style.ts b/packages/boba/gateway/src/containers/Bridging/BridgeTypeSelector/style.ts
index 6936c8150b..5acb28a195 100644
--- a/packages/boba/gateway/src/containers/Bridging/BridgeTypeSelector/style.ts
+++ b/packages/boba/gateway/src/containers/Bridging/BridgeTypeSelector/style.ts
@@ -22,7 +22,6 @@ export const BridgeTabItem = styled.div<{
font-style: normal;
font-weight: 700;
line-height: normal;
- border-radius: 8px;
font-size: ${(props) => props.theme.text.body1};
cursor: pointer;
background: transparent;
@@ -40,4 +39,11 @@ export const BridgeTabItem = styled.div<{
: props.theme.colors.gray[600]};
background: ${props.theme.colors.green[300]};
`};
+
+ &:nth-child(odd) {
+ border-radius: 8px 0 0 8px;
+ }
+ &:nth-child(even) {
+ border-radius: 0 8px 8px 0;
+ }
`
diff --git a/packages/boba/gateway/src/containers/Bridging/chain/styles.ts b/packages/boba/gateway/src/containers/Bridging/chain/styles.ts
index 010231019c..c2426b93a6 100644
--- a/packages/boba/gateway/src/containers/Bridging/chain/styles.ts
+++ b/packages/boba/gateway/src/containers/Bridging/chain/styles.ts
@@ -1,8 +1,8 @@
import { Svg, Typography } from 'components/global'
import styled from 'styled-components'
-import ArrowDown from 'images/icons/arrowdown.svg'
-import Switch from 'images/icons/switchIcon.svg'
+import ArrowDown from 'assets/images/icons/arrowdown.svg'
+import Switch from 'assets/images/icons/switchIcon.svg'
export const ChainContainer = styled.div`
display: flex;
@@ -44,7 +44,8 @@ export const ChainPicker = styled.div`
export const ChainIcon = styled.div`
display: flex;
- align-items: center;
+ width: 30px;
+ height: 30px;
`
export const ChainPickerPlaceHolder = styled(Typography).attrs({
variant: 'body1',
diff --git a/packages/boba/gateway/src/containers/Global.styles.js b/packages/boba/gateway/src/containers/Global.styles.js
index 6209b36ece..b98b035631 100644
--- a/packages/boba/gateway/src/containers/Global.styles.js
+++ b/packages/boba/gateway/src/containers/Global.styles.js
@@ -101,13 +101,14 @@ export const footerLink = styled(IconButton)(({ theme }) => ({
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)',
+ background: theme.palette.mode === 'light' ? '#F0F1EA' : '#262626',
cursor: 'pointer',
display: 'flex',
borderRadius: '12px',
height: '48px',
+ border:theme.palette.mode === 'light' ? '1px solid #DEE0D8' : '0px',
'span': {
- padding: '2px 15px',
+ padding: '2px 25px',
fontWeight: 'bold',
borderRadius: '12px',
display: 'flex',
@@ -115,7 +116,7 @@ export const PageSwitcher = styled(Box)(({ theme }) => ({
alignItems: 'center',
'&.active': {
color: '#031313',
- background: theme.palette.mode === 'dark'? '#BAE21A' :'#1CD6D1',
+ background: '#AEDB01',
}
},
[ theme.breakpoints.down('sm') ]: {
diff --git a/packages/boba/gateway/src/containers/VoteAndDao/Vote/Pools/poolListItem.js b/packages/boba/gateway/src/containers/VoteAndDao/Vote/Pools/poolListItem.js
index 7fa0438fd0..88de76bbdd 100644
--- a/packages/boba/gateway/src/containers/VoteAndDao/Vote/Pools/poolListItem.js
+++ b/packages/boba/gateway/src/containers/VoteAndDao/Vote/Pools/poolListItem.js
@@ -17,7 +17,7 @@ import React, { useEffect, useState } from 'react'
import { Box, Typography, Slider, styled } from '@mui/material'
import Button from 'components/button/Button'
-import bobaLogo from 'images/boba-token.svg'
+import bobaLogo from 'assets/images/boba-token.svg'
import * as G from 'containers/Global.styles'
diff --git a/packages/boba/gateway/src/containers/VoteAndDao/Vote/VeNfts/VeNfts.list.js b/packages/boba/gateway/src/containers/VoteAndDao/Vote/VeNfts/VeNfts.list.js
index b399b6eb84..cd0bb99e52 100644
--- a/packages/boba/gateway/src/containers/VoteAndDao/Vote/VeNfts/VeNfts.list.js
+++ b/packages/boba/gateway/src/containers/VoteAndDao/Vote/VeNfts/VeNfts.list.js
@@ -5,7 +5,7 @@ import CheckMarkIcon from '@mui/icons-material/CheckCircleOutline'
import Carousel from 'react-multi-carousel'
import "react-multi-carousel/lib/styles.css";
-import BobaNFTGlass from 'images/boba2/BobaNFTGlass.svg'
+import BobaNFTGlass from 'assets/images/boba2/BobaNFTGlass.svg'
import * as G from 'containers/Global.styles'
diff --git a/packages/boba/gateway/src/containers/bobaScope/BobaScope.js b/packages/boba/gateway/src/containers/bobaScope/BobaScope.js
index d81279ebf4..648bf5aba7 100644
--- a/packages/boba/gateway/src/containers/bobaScope/BobaScope.js
+++ b/packages/boba/gateway/src/containers/bobaScope/BobaScope.js
@@ -28,7 +28,6 @@ import { fetchSevens, fetchFastExits } from 'actions/networkAction'
import { selectBaseEnabled, selectActiveDataTab, selectSevens, selectFastExits } from 'selectors'
import Tabs from 'components/tabs/Tabs'
-import Input from 'components/input/Input'
import Sevens from './Sevens'
import FastExits from './FastExits'
@@ -36,7 +35,9 @@ import FastExits from './FastExits'
import useInterval from 'hooks/useInterval'
import { POLL_INTERVAL } from 'util/constant'
-import { ContentContainer, Header, ScopePageContainer } from './History.styles';
+import {Header, BobaScopeContainer, ContentContainer} from './styles'
+import { TabComponent } from 'components/global/tabs';
+import { SearchInput } from 'components/global/searchInput';
function BobaScope() {
@@ -70,43 +71,32 @@ function BobaScope() {
}, POLL_INTERVAL)
return (
-
+
- { dispatch(setActiveDataTab(tab)) }}
- activeTab={activeTab}
- tabs={[ 'Seven Day Queue', 'Fast Exits' ]}
+ )
+ },
+ {label:"Fast Exits",
+ content:( )
+ }
+ ]}
/>
-
- {activeTab === 'Seven Day Queue' && (
-
- )}
- {activeTab === 'Fast Exits' && (
-
- )}
-
+
);
}
diff --git a/packages/boba/gateway/src/containers/bobaScope/FastExits.js b/packages/boba/gateway/src/containers/bobaScope/FastExits.js
index e6bfb7d9ff..bb349abc83 100644
--- a/packages/boba/gateway/src/containers/bobaScope/FastExits.js
+++ b/packages/boba/gateway/src/containers/bobaScope/FastExits.js
@@ -23,7 +23,7 @@ import { Pager } from 'components'
import FastExit from 'components/seven/FastExit'
import styles from './Transactions.module.scss'
-import * as S from './History.styles'
+import { HistoryContainer, Content } from './styles'
const PER_PAGE = 10
@@ -50,7 +50,7 @@ function FastExits({ searchData, data }) {
return (
-
+
-
+
{!paginatedData.length && !loading && (
Scanning for pending fast exits...
)}
@@ -80,10 +80,10 @@ function FastExits({ searchData, data }) {
/>
)
})}
-
+
-
+
-
+
+
-
+
{!paginatedSevens.length && !loading && (
Scanning for pending 7 day exits...
)}
@@ -80,10 +80,10 @@ function Sevens({ searchData, sevens }) {
/>
)
})}
-
+
-
+
-
-
+ {
setLpChoice('L1LP')
- setPoolTab('Ethereum Pool')
- }}
- variant="body2"
- component="span">
- {activeNetworkName['l1']} Pools
-
-
+ {activeNetworkName['l1']} Pools
+
+ {
setLpChoice('L2LP')
- setPoolTab('Boba L2 Pool')
- }}
- variant="body2"
- component="span">
- {activeNetworkName['l2']} Pools
-
-
+ setPoolTab(activeNetworkName['l2'])
+ }}>
+ {activeNetworkName['l2']} Pools
+
+
- setShowMDO(e.target.checked)}
- name="my tokens only"
- color="primary"
- icon={}
- />
- }
- label="My Tokens Only"
- />
- setShowMSO(e.target.checked)}
- name="my stakes only"
- color="primary"
- icon={}
- />
- }
+ setShowMSO(status)}
/>
-
- 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.
+ 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.
-
- }
- >
+ }>
- { !isMobile && (
- )
- }
+
{Object.keys(selectedPoolInfo).map((v, i) => {
const ret = getBalance(v, lpChoice === 'L1LP' ? 'L1' : 'L2');
- if (showMDO && Number(ret[0]) === 0) return null;
+ if (showMDO && Number(ret[0]) === 0) {
+ return null
+ }
return (
);
})}
-
+
)
}
diff --git a/packages/boba/gateway/src/containers/earn/Earn.styles.js b/packages/boba/gateway/src/containers/earn/Earn.styles.js
deleted file mode 100644
index 26be8518f8..0000000000
--- a/packages/boba/gateway/src/containers/earn/Earn.styles.js
+++ /dev/null
@@ -1,189 +0,0 @@
-import { styled } from '@mui/material/styles'
-import { Box, Typography, Grid } from "@mui/material"
-
-export const EarnPageContainer = styled(Box)(({ theme }) => ({
- margin: '0px auto',
- marginBottom: theme.palette.spacing.toFooter,
- display: 'flex',
- flexDirection: 'column',
- justifyContent: 'space-around',
- padding: '10px',
- paddingTop: '0px',
- width: '70%',
- [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',
- },
-}))
-
-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: "100%",
- display: 'flex',
- justifyContent: 'space-between',
- alignItems: 'center',
- gap: '30px',
- borderRadius: '8px',
- margin: '20px 0px',
- padding: '25px',
- background: theme.palette.background.glassy,
- [theme.breakpoints.up('md')]: {
- padding: '25px 50px',
- },
-}))
-
-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.glassy,
-}))
-
-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;
- gap:5px;
-`;
-
-export const EarnAction = styled(Box)(({theme})=>({
- display: 'flex',
- justifyContent: 'space-around',
- alignItems: 'center',
- [theme.breakpoints.down('md')]: {
- width: '100%'
- }
-}))
-
-export const EarnActionContainer = styled(Box)(({ theme }) => ({
- display: 'flex',
- justifyContent: 'space-between',
- alignItems: 'center',
- [theme.breakpoints.down('md')]: {
- flexDirection: 'column'
- }
-}))
-
-export const EarnListContainer = 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 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%'
- }
- },
-
-}));
diff --git a/packages/boba/gateway/src/containers/earn/EarnWrapper.js b/packages/boba/gateway/src/containers/earn/EarnWrapper.js
index 3f838b4a76..55ad52b047 100644
--- a/packages/boba/gateway/src/containers/earn/EarnWrapper.js
+++ b/packages/boba/gateway/src/containers/earn/EarnWrapper.js
@@ -2,8 +2,9 @@ import { useMediaQuery, useTheme } from '@mui/material';
import React from 'react';
import Earn from './Earn';
-export default function EarnWrapper({ ...rest }) {
+const EarnWrapper = ({ ...rest }) => {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down('md'));
return ;
}
+export default EarnWrapper;
\ No newline at end of file
diff --git a/packages/boba/gateway/src/containers/earn/consts.ts b/packages/boba/gateway/src/containers/earn/consts.ts
new file mode 100644
index 0000000000..8e6bfb24e7
--- /dev/null
+++ b/packages/boba/gateway/src/containers/earn/consts.ts
@@ -0,0 +1,36 @@
+import { tabSwitcherTypes } from './types'
+
+export const TabSwitcherEnum: tabSwitcherTypes = {
+ L1LP: {
+ name: 'L1LP',
+ tab: 'Ethereum Pool',
+ },
+ L2LP: {
+ name: 'L2LP',
+ tab: 'Boba L2 Pool',
+ },
+}
+
+export const tableHeaderOptions = [
+ { name: 'Token', width: 225 },
+ {
+ name: 'Available Balance',
+ tooltip:
+ 'Available Balance refers to the amount of funds currently in each pool.',
+ width: 145,
+ },
+ {
+ name: 'Total Staked',
+ tooltip: 'Total staked denotes the funds staked by liquidity providers.',
+ width: 115,
+ },
+ {
+ name: 'APR',
+ tooltip:
+ 'The APR is the historical APR, which reflects the fees people paid to bridge and the previous usage patterns for each pool.',
+ width: 85,
+ },
+ { name: 'Your Stake', width: 90 },
+ { name: 'Earned', width: 110 },
+ { name: 'Actions', width: 75 },
+]
diff --git a/packages/boba/gateway/src/containers/earn/styles.ts b/packages/boba/gateway/src/containers/earn/styles.ts
new file mode 100644
index 0000000000..0210dfc134
--- /dev/null
+++ b/packages/boba/gateway/src/containers/earn/styles.ts
@@ -0,0 +1,147 @@
+import styled, { css } from 'styled-components'
+import { Typography } from 'components/global/typography'
+
+export const EarnPageContainer = styled.div`
+ margin: 0px auto;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-around;
+ padding: 10px;
+ padding-top: 0px;
+ width: 1025px;
+`
+
+export const TableHeading = styled.div`
+ padding: 20px,
+ border-radius: 6px 6px 0 0;
+ display: flex;
+ align-items: center;
+ background: ${(props) => props.theme.colors.box.background};
+`
+
+export const LayerAlert = styled.div`
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ gap: 30px;
+ border-radius: 8px;
+ margin: 20px 0px;
+ padding: 25px;
+ background: ${(props) => props.theme.colors.box.background};
+`
+
+export const Help = styled.div`
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ gap: 30px;
+ margin: 10px 0px;
+ padding: 10px;
+ border-radius: 8px;
+ background: ${(props) => props.theme.colors.box.background};
+`
+
+export const AlertText = styled(Typography)`
+ margin-left: 10px;
+ flex: 4;
+`
+
+export const AlertInfo = styled.div`
+ display: flex;
+ justify-content: space-around;
+ align-items: center;
+ flex: 1;
+`
+
+export const Wrapper = styled.div`
+ border-radius: 8px;
+`
+
+export const GridItemTagContainer = styled.div`
+ spacing: 2,
+ flex-direction: row;
+ justify-content: left;
+ align-items: center;
+`
+
+export const GridItemTag = styled.div`
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ gap: 5px;
+`
+
+export const EarnAction = styled.div`
+ display: flex;
+ justify-content: space-around;
+ align-items: center;
+`
+
+export const EarnActionContainer = styled.div`
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+`
+
+export const EarnListContainer = styled.div`
+ display: flex;
+ flex-direction: column;
+ gap: 10px 0px;
+ padding: 10px 0px;
+`
+
+export const BpIcon = styled.span`
+ border-radius: 3;
+ width: 16;
+ height: 16;
+`
+
+export const PageSwitcher = styled.div`
+ width: fit-content;
+ padding: 3px;
+ cursor: pointer;
+ display: flex;
+ border-radius: 12px;
+ height: 48px;
+ span {
+ padding: 2px 15px;
+ font-weight: bold;
+ border-radius: 12px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ &.active {
+ color: #031313;
+ background: #bae21a;
+ }
+ }
+`
+
+export const TabSwitcherContainer = styled.div`
+ display: flex;
+ padding: 4px;
+ gap: 0px 15px;
+ border-radius: 8px;
+ ${({ theme: { colors, name } }) =>
+ name === 'light'
+ ? css`
+ background: ${colors.gray[50]};
+ `
+ : css`
+ background: ${colors.gray[500]};
+ `}
+`
+
+export const Tab = styled.div<{ active: boolean }>`
+ padding: 8px 24px;
+ border-radius: 8px;
+ cursor: pointer;
+ ${(props) =>
+ props.active &&
+ `
+ color:${props.theme.colors.gray[800]};
+ background:${props.theme.colors.green[300]}
+ `}
+`
diff --git a/packages/boba/gateway/src/containers/earn/tooltips.tsx b/packages/boba/gateway/src/containers/earn/tooltips.tsx
new file mode 100644
index 0000000000..72ab532b85
--- /dev/null
+++ b/packages/boba/gateway/src/containers/earn/tooltips.tsx
@@ -0,0 +1,35 @@
+import React from 'react'
+import { Typography } from 'components/global/typography'
+
+export const BridgeTooltip = () => (
+
+ Staking example. When you stake
+ 10 BOBA into the L2 pool, then the pool's liquidity and balance both
+ increase by 10 BOBA.
+
+
+ Fast Bridge example. When a user
+ bridges 10 BOBA from L1 to L2 using the fast bridge, they send 10 BOBA to
+ the L1 pool, increasing its balance by 10 BOBA. Next, 9.99 BOBA 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 BOBA) and
+ what was sent to the user on the L2 (9.99 BOBA), equal to 0.01 BOBA, 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.
+
+)
diff --git a/packages/boba/gateway/src/containers/earn/types.ts b/packages/boba/gateway/src/containers/earn/types.ts
new file mode 100644
index 0000000000..363d49a570
--- /dev/null
+++ b/packages/boba/gateway/src/containers/earn/types.ts
@@ -0,0 +1,14 @@
+type poolDetail = {
+ name: string
+ tab: string
+}
+
+export type tabSwitcherTypes = {
+ L1LP: poolDetail
+ L2LP: poolDetail
+}
+
+export enum toLayer {
+ L1 = 'L2',
+ L2 = 'L1',
+}
diff --git a/packages/boba/gateway/src/containers/history/DatePicker.tsx b/packages/boba/gateway/src/containers/history/DatePicker.tsx
new file mode 100644
index 0000000000..98c53df48d
--- /dev/null
+++ b/packages/boba/gateway/src/containers/history/DatePicker.tsx
@@ -0,0 +1,132 @@
+import React, { useRef, useState, useEffect, useCallback } from 'react'
+import { subMonths } from 'date-fns'
+import {
+ DatePickerDropdown,
+ DatePickerHeader,
+ DatePickerContainer,
+} from './styles'
+import { formatDate } from 'util/dates'
+import { DayPicker, DateRange } from 'react-day-picker'
+import 'react-day-picker/dist/style.css'
+
+export interface IDatePickerProps {
+ selected: Date
+ timeFormat?: string
+ onChange: Function
+ minDate?: Date
+ maxDate?: Date
+ range?: boolean
+ onChangeFrom?: Function
+ onChangeTo?: Function
+}
+
+const DatePicker = (props: IDatePickerProps) => {
+ const dropdownRef = useRef(null)
+ useEffect(() => {
+ const handleClickOutside = (e: Event) => {
+ if (
+ dropdownRef.current &&
+ !dropdownRef.current.contains(e.target as Node)
+ ) {
+ setIsOpen(false)
+ }
+ }
+ // Bind the event listener
+ document.addEventListener('mousedown', handleClickOutside)
+ return () => {
+ // Unbind the event listener on clean up
+ document.removeEventListener('mousedown', handleClickOutside)
+ }
+ }, [dropdownRef])
+
+ const [selectedDate, setSelectedDate] = useState(props.selected)
+ const today = new Date()
+ const pastDate = new Date(2015, 7, 30)
+
+ const disabledPeriod = {
+ before: props.minDate ? props.minDate : pastDate,
+ after: props.maxDate ? props.maxDate : today,
+ }
+ const disabledDays = [disabledPeriod]
+
+ const [isOpen, setIsOpen] = useState(false)
+
+ const defaultSelectedRange: DateRange = {
+ from: subMonths(today, 6),
+ to: today,
+ }
+ const [selectedRange, setSelectedRange] = useState(
+ defaultSelectedRange
+ )
+
+ const handleClick = useCallback(() => {
+ setIsOpen(!isOpen)
+ }, [isOpen])
+
+ const handleDateChange = (date: Date | undefined) => {
+ if (date && selectedDate !== date) {
+ setSelectedDate(date)
+ props.onChange(date)
+ }
+ }
+ const handleRangeChange = (range: DateRange | undefined) => {
+ if (range && range !== selectedRange) {
+ setSelectedRange(range)
+ props.onChangeFrom && props.onChangeFrom(range.from)
+ props.onChangeTo && props.onChangeTo(range.to)
+ }
+ }
+
+ if (props.range) {
+ const dateRangeString = `${
+ selectedRange?.from
+ ? formatDate(selectedRange?.from?.getTime() / 1000, props.timeFormat)
+ : 'From'
+ } - ${
+ selectedRange?.to
+ ? formatDate(selectedRange?.to?.getTime() / 1000, props.timeFormat)
+ : 'To'
+ }`
+
+ return (
+
+
+ {dateRangeString}
+
+ {isOpen && (
+
+ handleRangeChange(range)}
+ disabled={disabledDays}
+ />
+
+ )}
+
+ )
+ }
+
+ return (
+
+
+ {formatDate(selectedDate.getTime() / 1000, props.timeFormat)}
+
+ {isOpen && (
+
+ handleDateChange(date)}
+ disabled={disabledDays}
+ />
+
+ )}
+
+ )
+}
+
+export default DatePicker
diff --git a/packages/boba/gateway/src/containers/history/History.js b/packages/boba/gateway/src/containers/history/History.js
deleted file mode 100644
index c6fe04a0f9..0000000000
--- a/packages/boba/gateway/src/containers/history/History.js
+++ /dev/null
@@ -1,213 +0,0 @@
-/*
-Copyright 2021-present Boba Network.
-
-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 } from 'react'
-import { useDispatch } from 'react-redux'
-import { isEqual,orderBy } from 'util/lodash';
-
-import { useSelector } from 'react-redux'
-import DatePicker from 'react-datepicker'
-import 'react-datepicker/dist/react-datepicker.css'
-
-import { useMediaQuery, useTheme } from '@mui/material'
-import {isSameOrAfterDate, isSameOrBeforeDate} from 'util/dates'
-import Input from 'components/input/Input'
-
-import { setActiveHistoryTab } from 'actions/uiAction'
-import {
- selectActiveHistoryTab,
- selectTransactions,
- selectAccountEnabled,
- selectLayer
-} from 'selectors'
-
-import { fetchTransactions } from 'actions/networkAction'
-
-import Exits from './TX_Exits'
-import Deposits from './TX_Deposits'
-import All from './TX_All'
-import Pending from './TX_Pending'
-import Transfers from './TX_Transfers'
-
-import * as S from './History.styles'
-import styles from './TX_All.module.scss'
-
-import useInterval from 'hooks/useInterval'
-import Connect from 'containers/connect/Connect'
-import Tabs from 'components/tabs/Tabs'
-
-import { POLL_INTERVAL } from 'util/constant'
-import { selectActiveNetworkName } from 'selectors'
-
-function History() {
-
- const theme = useTheme()
- const isMobile = useMediaQuery(theme.breakpoints.down('md'))
-
- const dispatch = useDispatch()
-
- const now = new Date()
- const last_6months = new Date(
- now.getFullYear(),
- now.getMonth() - 6,
- now.getDate()
- )
-
- const [startDate, setStartDate] = useState(last_6months)
- const [endDate, setEndDate] = useState(now)
- const layer = useSelector(selectLayer())
- const accountEnabled = useSelector(selectAccountEnabled())
-
- const [searchHistory, setSearchHistory] = useState('')
- const activeTab = useSelector(selectActiveHistoryTab, isEqual)
- const networkName = useSelector(selectActiveNetworkName())
-
- const unorderedTransactions = useSelector(selectTransactions, isEqual)
- const orderedTransactions = orderBy(
- unorderedTransactions,
- (i) => i.timeStamp,
- 'desc'
- )
-
- const transactions = orderedTransactions.filter((i) => {
- if (startDate && endDate) {
- return (
- isSameOrAfterDate(i.timeStamp, startDate) &&
- isSameOrBeforeDate(i.timeStamp,endDate)
- )
- }
- return true
- })
-
- useInterval(() => {
- if (accountEnabled) {
- dispatch(fetchTransactions())
- }
- }, POLL_INTERVAL)
-
- return (
-
-
-
-
- {layer && (
- <>
-
-
- {
- setSearchHistory(i.target.value)
- }}
- className={styles.searchBar}
- />
-
-
- {!isMobile ? (
-
- Show period from
-
- ) : null}
-
setStartDate(date)}
- selectsStart
- endDate={new Date(endDate)}
- maxDate={new Date(endDate)}
- calendarClassName={theme.palette.mode}
- placeholderText={isMobile ? 'From' : ''}
- />
- {!isMobile ? (
- to
- ) : null}
- setEndDate(date)}
- selectsEnd
- startDate={new Date(startDate)}
- minDate={new Date(startDate)}
- calendarClassName={theme.palette.mode}
- placeholderText={isMobile ? 'To' : ''}
- />
-
-
-
{
- dispatch(setActiveHistoryTab(tab))
- }}
- activeTab={activeTab}
- tabs={[
- 'All',
- `${networkName['l1']} to ${networkName['l2']}`,
- `${networkName['l2']} to ${networkName['l1']}`,
- 'Bridge between L1s',
- 'Pending',
- ]}
- />
-
- {activeTab === 'All' && (
-
- )}
-
- {activeTab === `${networkName['l1']} to ${networkName['l2']}` && (
-
- )}
-
- {activeTab === `${networkName['l2']} to ${networkName['l1']}` && (
-
- )}
-
- {activeTab === 'Bridge between L1s' && (
-
- )}
-
- {activeTab === 'Pending' && (
-
- )}
-
-
+
+
+
+ From
+ setFromNetwork(option)}
+ error={false}
+ headers={[NETWORK_TYPE.MAINNET, NETWORK_TYPE.TESTNET]}
+ />
+ {
+ handleSwitchDropdowns()
+ }}
+ >
+
+
+ To
+ setToNetwork(option)}
+ error={false}
+ headers={[NETWORK_TYPE.MAINNET, NETWORK_TYPE.TESTNET]}
+ />
+
+ {
+ setTransactionStatus(item.value)
+ }}
+ error={false}
+ />
+
+
+
+ )}
+ {!transactionsFound && (
+
+
+ No Transactions Found.
+
+ )}
+ {!layer && (
+
+
+ No History.
+
+ )}
+
+ )
+}
+
+export default React.memo(History)
diff --git a/packages/boba/gateway/src/containers/history/TX_All.js b/packages/boba/gateway/src/containers/history/TX_All.js
deleted file mode 100644
index dd895effea..0000000000
--- a/packages/boba/gateway/src/containers/history/TX_All.js
+++ /dev/null
@@ -1,156 +0,0 @@
-/*
-Copyright 2021-present Boba Network.
-
-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 } from 'react'
-import { useSelector } from 'react-redux'
-import "react-datepicker/dist/react-datepicker.css"
-import { Grid, Box } from '@mui/material'
-
-import { selectLoading, selectTokens } from 'selectors'
-import { logAmount } from 'util/amountConvert'
-
-import Transaction from 'components/transaction/Transaction'
-import { Pager } from 'components'
-
-import * as S from './History.styles'
-
-const PER_PAGE = 8
-
-function TX_All({ searchHistory, transactions }) {
-
- const [page, setPage] = useState(1)
-
- const loading = useSelector(selectLoading(['TRANSACTION/GETALL']))
- const tokenList = useSelector(selectTokens)
-
- useEffect(() => {
- setPage(1)
- }, [searchHistory])
-
- const _transactions = transactions.filter(i => {
- return i.hash.includes(searchHistory)
- })
-
- const startingIndex = page === 1 ? 0 : ((page - 1) * PER_PAGE)
- const endingIndex = page * PER_PAGE
- const paginatedTransactions = _transactions.slice(startingIndex, endingIndex)
-
- let totalNumberOfPages = Math.ceil(_transactions.length / PER_PAGE)
-
- //if totalNumberOfPages === 0, set to one so we don't get the strange "page 1 of 0" display
- if (totalNumberOfPages === 0) totalNumberOfPages = 1
-
- return (
-
- setPage(page + 1)}
- onClickBack={() => setPage(page - 1)}
- />
-
-
-
- {!paginatedTransactions.length && !loading && (
- Scanning for transactions...
- )}
- {!paginatedTransactions.length && loading && (
- Loading...
- )}
- {paginatedTransactions.map((i, index) => {
-
- let metaData = ''
-
- if(i.crossDomainMessage && i.crossDomainMessage.fast === 1) {
- metaData = 'Fast Bridge'
- } else if (i.crossDomainMessage && i.crossDomainMessage.fast === 0) {
- metaData = 'Classic Bridge'
- }
-
- let annotation = ''
-
- if(metaData === '' && typeof(i.activity) === 'undefined') {
- //annotation = 'No Idea'
- } else if (typeof(i.activity) === 'undefined') {
- //we only have metaData
- annotation = metaData
- } else if (metaData === '') {
- //we only have activity
- annotation = i.activity
- } else {
- //we have both
- annotation = `${metaData} (${i.activity})`
- }
- const chain = (i.chain === 'L1pending') ? 'L1' : i.chain
-
- let details = null
- let amountTx = null
-
- if (i.action && i.action.token) {
- let token = tokenList[i.action.token.toLowerCase()];
- if (chain === 'L2') {
- token = Object.values(tokenList).find(t => t.addressL2.toLowerCase() === i.action.token.toLowerCase());
- }
- if (!!token) {
- let amount = logAmount(i.action.amount, token.decimals, 3);
- let symbol = token[`symbol${chain}`];
- amountTx = `${amount} ${symbol}`;
- }
- }
-
- if( i.crossDomainMessage && i.crossDomainMessage.l1BlockHash ) {
- details = {
- blockHash: i.crossDomainMessage.l1BlockHash,
- blockNumber: i.crossDomainMessage.l1BlockNumber,
- from: i.crossDomainMessage.l1From,
- hash: i.crossDomainMessage.l1Hash,
- to: i.crossDomainMessage.l1To,
- }
- }
-
- if( i.crossDomainMessage && i.crossDomainMessage.l2BlockHash ) {
- details = {
- blockHash: i.crossDomainMessage.l2BlockHash,
- blockNumber: i.crossDomainMessage.l2BlockNumber,
- from: i.crossDomainMessage.l2From,
- hash: i.crossDomainMessage.l2Hash,
- to: i.crossDomainMessage.l2To,
- }
- }
-
- return (
-
- )
- })}
-
-
-
-
- )
-}
-
-export default React.memo(TX_All)
diff --git a/packages/boba/gateway/src/containers/history/TX_All.module.scss b/packages/boba/gateway/src/containers/history/TX_All.module.scss
deleted file mode 100644
index da7c00e1a9..0000000000
--- a/packages/boba/gateway/src/containers/history/TX_All.module.scss
+++ /dev/null
@@ -1,185 +0,0 @@
-@import 'index.scss';
-
-.container {
- display: flex;
- flex-direction: column;
- padding: 10px;
- padding-top: 0;
- background: $background;
-}
-
-.searchInput {
- width: 250px !important;
- @include mobile {
- width: 100% !important;
- }
-}
-
-.data {
- display: flex;
- flex-direction: row;
- @include mobile {
- flex-direction: column;
- }
-}
-
-.section {
- flex: 1;
- &:first-child {
- margin-right: 20px;
- @include mobile {
- margin-right: 0;
- margin-bottom: 20px;
- }
- }
-}
-
-.transactionSection {
- margin-bottom: 20px;
-}
-
-.disclaimer {
- color: $gray3;
- margin: 5px 10px;
- margin-top: 20px;
-}
-
-.searchBar {
- flex: 1;
- margin-bottom: 0;
- min-width: 250px;
- & > div {
- border: none !important;
- }
-}
-
-.transactions {
- overflow: auto;
- background: $background400;
- border-radius: 8px;
- margin-top: 10px;
- min-height: 100px;
- .transaction {
- padding: 20px 0;
- &:last-child {
- border-bottom: none;
- }
- }
-}
-
-.subTitle {
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: space-between;
-
- margin-bottom: 32px;
- span {
- margin-right: 20px;
- }
-}
-
-.processExitButton {
- color: $blue;
- cursor: pointer;
-}
-
-.actions {
- display: flex;
- justify-content: flex-end;
- align-items: center;
- .datePicker {
- flex: 1;
- margin-bottom: 0;
- min-width: 250px;
- }
- @include mobile {
- width: 100%;
- > div:first-child {
- margin-right: 5px;
- }
- > div:last-child {
- margin-left: 5px;
- }
- }
-}
-
-.datePickerInput {
- border-radius: 8px;
- width: 130px;
- margin: 0 15px;
- position: relative;
- @include mobile {
- width: 100%;
- margin: 0;
- }
-
-
- &::after {
- content: '';
- width: 0;
- height: 0;
- position: absolute;
- right: 10px;
- font-size: 25px;
- bottom: 15px;
- }
-
- input {
- background: rgba(0, 0, 0, 0.09);
- color: rgba(0, 0, 0, 0.87);
- height: 40px;
- width: 130px;
- padding: 0 15px;
- line-height: 40px;
- border: 0;
- border-radius: 8px;
- font-size: 16px;
- text-align: left;
- @include mobile {
- width: 100%;
- }
- }
-}
-
-.datePickerInputDark {
- border-radius: 8px;
- width: 130px;
- margin: 0px 15px;
- position: relative;
- @include mobile {
- width: 100%;
- margin: 0;
- }
-
-
- &::after {
- content: '';
- width: 0;
- height: 0;
- position: absolute;
- right: 10px;
- font-size: 25px;
- bottom: 15px;
- }
-
- input {
- background: #FFFFFF0A;
- color: white;
- height: 40px;
- width: 130px;
- padding: 0 15px;
- line-height: 40px;
- border: 0;
- border-radius: 8px;
- font-size: 16px;
- text-align: left;
- @include mobile {
- width: 100%;
- }
- }
-}
-
-.popperStyle {
- z-index: 3;
-}
diff --git a/packages/boba/gateway/src/containers/history/TX_Deposits.js b/packages/boba/gateway/src/containers/history/TX_Deposits.js
deleted file mode 100644
index e3f4f0fe1b..0000000000
--- a/packages/boba/gateway/src/containers/history/TX_Deposits.js
+++ /dev/null
@@ -1,143 +0,0 @@
-/*
-Copyright 2021-present Boba Network.
-
-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 } from 'react'
-import { Grid, Box } from '@mui/material'
-import { useSelector } from 'react-redux'
-
-import { selectLoading, selectTokens, selectActiveNetworkName } from 'selectors'
-
-import { logAmount } from 'util/amountConvert'
-
-import { Pager } from 'components'
-import Transaction from 'components/transaction/Transaction'
-
-import * as S from './History.styles';
-
-const PER_PAGE = 10
-
-function TX_Deposits({ searchHistory, transactions }) {
-
- const [page, setPage] = useState(1)
-
- const loading = useSelector(selectLoading(['TRANSACTION/GETALL']))
- const tokenList = useSelector(selectTokens)
- const networkName = useSelector(selectActiveNetworkName())
-
- useEffect(() => {
- setPage(1)
- }, [searchHistory])
-
- let _deposits = transactions.filter(i => {
- return i.hash.includes(searchHistory) && i.to !== null && i.depositL2
- })
- // combine the batch onramp
- _deposits = _deposits.reduce((acc, cur) => {
- const index = acc.findIndex(i => i.blockNumber === cur.blockNumber)
- if (index !== -1) {
- acc[index].action = [...acc[index].action, cur.action]
- } else {
- cur.action = [cur.action]
- acc.push(cur)
- }
- return acc
- }, [])
-
- const startingIndex = page === 1 ? 0 : ((page - 1) * PER_PAGE);
- const endingIndex = page * PER_PAGE;
- const paginatedDeposits = _deposits.slice(startingIndex, endingIndex);
-
- let totalNumberOfPages = Math.ceil(_deposits.length / PER_PAGE);
-
- //if totalNumberOfPages === 0, set to one so we don't get the strange "page 1 of 0" display
- if (totalNumberOfPages === 0) totalNumberOfPages = 1
-
- return (
-
- setPage(page + 1)}
- onClickBack={()=>setPage(page - 1)}
- />
-
-
-
-
- {!paginatedDeposits.length && !loading && (
- Scanning for deposits...
- )}
- {!paginatedDeposits.length && loading && (
- Loading...
- )}
- {paginatedDeposits.map((i, index) => {
- const chain = (i.chain === 'L1pending') ? 'L1' : i.chain
-
- let details = null
- let amountTx = ''
-
- let metaData = ''
-
- if(i.crossDomainMessage.fast === 1) {
- metaData = 'Fast Bridge'
- } else if (i.crossDomainMessage.fast === 0) {
- metaData = 'Classic Bridge'
- }
-
- for (const payload of i.action) {
- if (payload.token) {
- const token = tokenList[payload.token.toLowerCase()];
- if (!!token) {
- let amount = logAmount(payload.amount, token.decimals, 3);
- let symbol = token[`symbol${chain}`];
- amountTx += `${amount} ${symbol} `;
- }
- }
- }
-
- if( i.crossDomainMessage && i.crossDomainMessage.l2BlockHash ) {
- details = {
- blockHash: i.crossDomainMessage.l2BlockHash,
- blockNumber: i.crossDomainMessage.l2BlockNumber,
- from: i.crossDomainMessage.l2From,
- hash: i.crossDomainMessage.l2Hash,
- to: i.crossDomainMessage.l2To,
- }
- }
-
- return (
-
- )
- })}
-
-
-
-
- );
-}
-
-export default React.memo(TX_Deposits)
diff --git a/packages/boba/gateway/src/containers/history/TX_Exits.js b/packages/boba/gateway/src/containers/history/TX_Exits.js
deleted file mode 100644
index 039e5049f4..0000000000
--- a/packages/boba/gateway/src/containers/history/TX_Exits.js
+++ /dev/null
@@ -1,159 +0,0 @@
-/*
-Copyright 2021-present Boba Network.
-
-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 } from 'react'
-import {Grid, Box} from '@mui/material'
-import {formatDate, isAfterDate} from 'util/dates'
-import { useSelector } from 'react-redux'
-
-import { selectLoading, selectTokens, selectActiveNetworkName } from 'selectors'
-
-import { logAmount } from 'util/amountConvert'
-
-import Transaction from 'components/transaction/Transaction'
-import { Pager } from 'components'
-
-import networkService from 'services/networkService'
-
-import * as S from './History.styles'
-
-const PER_PAGE = 8
-
-function TX_Exits({ searchHistory, transactions, chainLink }) {
-
- const [ page, setPage ] = useState(1)
- const loading = useSelector(selectLoading(['TRANSACTION/GETALL']))
- const tokenList = useSelector(selectTokens)
- const allAddresses = networkService.getAllAddresses()
- const networkName = useSelector(selectActiveNetworkName())
-
- const _exits = transactions.filter(i => {
- return i.hash.includes(searchHistory) && i.to !== null && i.exitL2
- })
-
- const renderExits = _exits.map((i, index) => {
-
- const chain = (i.chain === 'L1pending') ? 'L1' : i.chain
-
- let metaData = ''
-
- //i.crossDomainMessage.fast can be either 1 or null,
- //where null denotes the classic 7 day exit
-
- if(i.crossDomainMessage.fast === 1) {
- metaData = 'Fast Bridge'
- } else if (i.crossDomainMessage.fast === null) {
- metaData = 'Classic 7-day Bridge'
- }
-
- let isExitable = false
- let details = null
-
- let timeLabel = formatDate(i.timeStamp,'lll')
-
- const to = i.to.toLowerCase()
-
- let amountTx = null;
-
- if (i.action && i.action.token) {
- const token = Object.values(tokenList).find(t => t.addressL2.toLowerCase() === i.action.token.toLowerCase());
- if (!!token) {
- let amount = logAmount(i.action.amount, token.decimals, 3);
- let symbol = token[`symbol${chain}`];
- amountTx = `${amount} ${symbol}`;
- }
- }
-
- //are we dealing with a traditional exit?
- if (to === allAddresses.L2StandardBridgeAddress.toLowerCase()) {
-
- isExitable = isAfterDate(i.crossDomainMessage.crossDomainMessageEstimateFinalizedTime)
-
- if (isExitable) {
- timeLabel = 'Funds were exited to L1 after ' + formatDate(i.crossDomainMessage.crossDomainMessageEstimateFinalizedTime,'lll')
- } else {
- const secondsToGo = i.crossDomainMessage.crossDomainMessageEstimateFinalizedTime - Math.round(Date.now() / 1000)
- const daysToGo = Math.floor(secondsToGo / (3600 * 24))
- const hoursToGo = Math.round((secondsToGo % (3600 * 24)) / 3600)
- const time = formatDate(i.timeStamp)
- timeLabel = `7 day window started ${time}. ${daysToGo} days and ${hoursToGo} hours remaining`
- }
-
- }
-
- if( i.crossDomainMessage && i.crossDomainMessage.l1BlockHash ) {
- details = {
- blockHash: i.crossDomainMessage.l1BlockHash,
- blockNumber: i.crossDomainMessage.l1BlockNumber,
- from: i.crossDomainMessage.l1From,
- hash: i.crossDomainMessage.l1Hash,
- to: i.crossDomainMessage.l1To,
- }
- }
-
- return (
-
- )
- })
-
- const startingIndex = page === 1 ? 0 : ((page - 1) * PER_PAGE)
- const endingIndex = page * PER_PAGE
- const paginatedExits = renderExits.slice(startingIndex, endingIndex)
-
- let totalNumberOfPages = Math.ceil(renderExits.length / PER_PAGE)
-
- //if totalNumberOfPages === 0, set to one so we don't get the strange "Page 1 of 0" display
- if (totalNumberOfPages === 0) totalNumberOfPages = 1
-
- return (
-
- setPage(page + 1)}
- onClickBack={() => setPage(page - 1)}
- />
-
-
-
-
- {!renderExits.length && !loading && (
- Scanning for exits...
- )}
- {!renderExits.length && loading && (
- Loading...
- )}
- {React.Children.toArray(paginatedExits)}
-
-
-
-
- );
-}
-
-export default React.memo(TX_Exits)
diff --git a/packages/boba/gateway/src/containers/history/TX_Pending.js b/packages/boba/gateway/src/containers/history/TX_Pending.js
deleted file mode 100644
index dddf9b40a5..0000000000
--- a/packages/boba/gateway/src/containers/history/TX_Pending.js
+++ /dev/null
@@ -1,236 +0,0 @@
-/*
-Copyright 2021-present Boba Network.
-
-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 } from 'react'
-import { useSelector } from 'react-redux'
-import "react-datepicker/dist/react-datepicker.css"
-import { Grid, Box } from '@mui/material'
-import { orderBy } from 'util/lodash';
-
-import { selectLoading, selectTokens } from 'selectors'
-import { logAmount } from 'util/amountConvert'
-
-import Transaction from 'components/transaction/Transaction'
-import { Pager } from 'components'
-
-import * as S from './History.styles'
-import { formatDate } from 'util/dates';
-
-const PER_PAGE = 8
-
-function TX_Pending({ searchHistory, transactions }) {
-
- const [page, setPage] = useState(1)
-
- const loading = useSelector(selectLoading(['TRANSACTION/GETALL']))
- const tokenList = useSelector(selectTokens)
-
- useEffect(() => {
- setPage(1)
- }, [searchHistory])
-
- const pending = transactions.filter((i) => {
- if (i.crossDomainMessage &&
- i.crossDomainMessage.crossDomainMessage === 1 &&
- i.crossDomainMessage.crossDomainMessageFinalize === 0 &&
- i.action.status === "pending"
- ) {
- return true
- }
- return false
- })
-
- let pendingL1 = pending.filter((i) => {
- if (i.chain === 'L1pending') return true
- return false
- })
-
- let pendingL2 = pending.filter((i) => {
- if (i.chain === 'L2') return true
- return false
- })
-
- //Part 1 - exit that is not final and we do not have a state root hash yet
- let pendingExitsStage0 = pendingL2.filter((i) => {
- if (!i.stateRoot.stateRootHash && i.action.fast) return true
- return false
- })
- pendingExitsStage0 = pendingExitsStage0.map(v => ({
- ...v,label: 'Bridge to L1',labelStatus: 'Step 0, No SR Hash yet, Pending',
- completion: v.crossDomainMessage.crossDomainMessageEstimateFinalizedTime,
- })
- )
-
- //Part 2 - exit that is not final, but we have a state root hash
- let pendingExitsStage1 = pendingL2.filter((i) => {
- if (i.stateRoot.stateRootHash && i.action.fast) return true
- return false
- })
- pendingExitsStage1 = pendingExitsStage1.map(v => ({
- ...v, label: 'Bridge to L1', labelStatus: 'Step 1, Have SR Hash, Pending',
- completion: v.crossDomainMessage.crossDomainMessageEstimateFinalizedTime,
- })
- )
-
- //Part 3 - exit that is not final, but we have a state root hash, and we ARE NOT using the fast message relayer
- //so this is a traditional exit
- let pendingExitsTrad = pendingL2.filter((i) => {
- if (!i.action.fast) return true
- return false
- })
- pendingExitsTrad = pendingExitsTrad.map(v => ({
- ...v,label: 'Classic 7-day Bridge to L1',labelStatus: 'In 7 day window',
- completion: v.crossDomainMessage.crossDomainMessageEstimateFinalizedTime,
- })
- )
-
- //DEPOSIT Part 1 - deposit that is not final and we do not have a state root hash yet
- let pendingDepositsFast = pendingL1.filter((i) => {
- if (i.action.fast) return true
- return false
- })
- pendingDepositsFast = pendingDepositsFast.map(v => ({
- ...v,label: 'Bridge to L2',labelStatus: 'Pending',
- completion: v.crossDomainMessage.crossDomainMessageEstimateFinalizedTime,
- })
- )
-
- //DEPOSIT Part 3 - we ARE NOT using the fast message relayer
- //so this is a traditional deposit
- let pendingDepositsTrad = pendingL1.filter((i) => {
- if (!i.action.fast) return true
- return false
- })
- pendingDepositsTrad = pendingDepositsTrad.map(v => ({
- ...v, label: 'Classic Bridge to L2', labelStatus: 'Pending',
- completion: v.crossDomainMessage.crossDomainMessageEstimateFinalizedTime,
- })
- )
-
- let pendingTransactions = [
- ...pendingExitsTrad,
- ...pendingExitsStage0,
- ...pendingExitsStage1,
- ...pendingDepositsTrad,
- ...pendingDepositsFast
- ]
-
- // combine the batch onramp
- pendingTransactions = pendingTransactions.reduce((acc, cur) => {
- const index = acc.findIndex(i => i.blockNumber === cur.blockNumber)
- if (index !== -1) {
- acc[index].action = [...acc[index].action, cur.action]
- acc[index].label = 'Bridge to L2 In Batch'
- } else {
- cur.action = [cur.action]
- acc.push(cur)
- }
- return acc
- }, [])
-
- const orderedTransactions = orderBy(pendingTransactions, i => i.timeStamp, 'desc')
-
- const startingIndex = page === 1 ? 0 : ((page - 1) * PER_PAGE)
- const endingIndex = page * PER_PAGE
- const paginatedTransactions = orderedTransactions.slice(startingIndex, endingIndex)
-
- let totalNumberOfPages = Math.ceil(orderedTransactions.length / PER_PAGE)
-
- //if totalNumberOfPages === 0, set to one so we don't get the strange "page 1 of 0" display
- if (totalNumberOfPages === 0) totalNumberOfPages = 1
-
-
-
- return (
-
- setPage(page + 1)}
- onClickBack={() => setPage(page - 1)}
- />
-
-
-
- {!paginatedTransactions.length && !loading && (
- Scanning for pending transactions...
- )}
- {!paginatedTransactions.length && loading && (
- Loading...
- )}
- {paginatedTransactions.map((i, index) => {
-
- let completionTime = 'Not available'
-
- if(i.completion)
- completionTime = formatDate(i.completion,'lll')
-
- const chain = (i.chain === 'L1pending') ? 'L1' : i.chain
-
- let amountTx = ''
-
- for (const payload of i.action) {
- if (payload.token) {
- let token = tokenList[payload.token.toLowerCase()];
- if (chain === 'L2') {
- token = Object.values(tokenList).find(t => t.addressL2.toLowerCase() === payload.token.toLowerCase());
- }
- if (!!token) {
- let amount = logAmount(payload.amount, token.decimals, 3);
- let symbol = token[`symbol${chain}`];
- amountTx += `${amount} ${symbol} `;
- }
- }
- }
-
- let annotation = ''
- if(typeof(i.label) === 'undefined') {
- //annotation = 'No Idea'
- } else {
- annotation = i.label
- }
-
- let completion = ''
- if(typeof(i.labelStatus) === 'undefined') {
- //status = 'No Idea'
- } else {
- completion = i.labelStatus + ' - Completion time: ' + completionTime
- }
-
- return (
-
- )
- })}
-
-
-
-
-
- )
-}
-
-export default React.memo(TX_Pending)
diff --git a/packages/boba/gateway/src/containers/history/TX_Transfers.js b/packages/boba/gateway/src/containers/history/TX_Transfers.js
deleted file mode 100644
index e776444baa..0000000000
--- a/packages/boba/gateway/src/containers/history/TX_Transfers.js
+++ /dev/null
@@ -1,99 +0,0 @@
-/*
-Copyright 2021-present Boba Network.
-
-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 { Box, Grid } from '@mui/material'
-import React, { useState } from 'react'
-
-
-import { logAmount } from 'util/amountConvert'
-
-import { Pager } from 'components'
-import Transaction from 'components/transaction/Transaction'
-import * as S from './History.styles'
-import { useSelector } from 'react-redux'
-import { selectLoading } from 'selectors'
-
-const PER_PAGE = 8
-
-function TX_Transfers({ searchHistory, transactions, chainLink }) {
-
- const [page, setPage] = useState(1)
- const loading = useSelector(selectLoading(['TRANSACTION/GETALL']))
- const _transfers = transactions.filter(i => {
- return i.hash.includes(searchHistory) && i.to !== null && i.altL1
- })
-
- const renderTransfers = _transfers.map((i, index) => {
-
- const chain = (i.chain === 'L0pending') ? 'L0' : i.chain
-
- let amountTx = `${logAmount(i.amount, 18, 3)} BOBA`;
-
- return (
-
- )
- })
-
- const startingIndex = page === 1 ? 0 : ((page - 1) * PER_PAGE)
- const endingIndex = page * PER_PAGE
- const paginatedExits = renderTransfers.slice(startingIndex, endingIndex)
-
- let totalNumberOfPages = Math.ceil(renderTransfers.length / PER_PAGE)
-
- //if totalNumberOfPages === 0, set to one so we don't get the strange "Page 1 of 0" display
- if (totalNumberOfPages === 0) totalNumberOfPages = 1
-
- return (
-
- setPage(page + 1)}
- onClickBack={() => setPage(page - 1)}
- />
-
-
-
-
- {!renderTransfers.length && !loading && (
- Scanning for exits...
- )}
- {!renderTransfers.length && loading && (
- Loading...
- )}
- {React.Children.toArray(paginatedExits)}
-
-
-
-
- );
-}
-
-export default React.memo(TX_Transfers)
diff --git a/packages/boba/gateway/src/containers/history/TransactionsResolver.tsx b/packages/boba/gateway/src/containers/history/TransactionsResolver.tsx
new file mode 100644
index 0000000000..ad3b780129
--- /dev/null
+++ b/packages/boba/gateway/src/containers/history/TransactionsResolver.tsx
@@ -0,0 +1,348 @@
+import { TransactionsTableContent } from 'components/global/table/themes'
+import dayjs from 'dayjs'
+import React, { useState, useEffect } from 'react'
+import { getCoinImage } from 'util/coinImage'
+import { formatDate, isSameOrAfterDate, isSameOrBeforeDate } from 'util/dates'
+import { ALL_NETWORKS, Chains } from './constants'
+import { Svg } from 'components/global/svg'
+import { TokenInfo } from 'containers/history/tokenInfo'
+
+import {
+ TransactionDate,
+ TransactionAmount,
+ Icon,
+ Status,
+ NoHistory,
+ TransactionDetails,
+ TransactionChainDetails,
+ TransactionToken,
+ TransactionsWrapper,
+ TransactionHash,
+ TransactionChain,
+ IconContainer,
+ Image,
+ IncompleteTransactionHash,
+} from './styles'
+import {
+ ITransactionsResolverProps,
+ ITransaction,
+ IProcessedTransaction,
+ TRANSACTION_STATUS,
+ TRANSACTION_FILTER_STATUS,
+ LAYER,
+} from './types'
+import { orderBy } from 'util/lodash'
+import truncate from 'truncate-middle'
+import { logAmount } from 'util/amountConvert'
+import noHistoryIcon from 'assets/images/noHistory.svg'
+import bobaLogo from 'assets/images/Boba_Logo_White_Circle.png'
+
+export const TransactionsResolver: React.FC = ({
+ transactions,
+ transactionsFilter,
+ loading = false,
+}) => {
+ const [currentTransactions, setCurrentTransactions] = useState<
+ ITransaction[]
+ >([])
+
+ useEffect(() => {
+ setCurrentTransactions(transactions)
+ }, [transactions])
+
+ const orderedTransactions = orderBy(
+ currentTransactions,
+ (i) => i.timeStamp,
+ 'desc'
+ )
+
+ const dateFilter = (transaction: ITransaction) => {
+ const txnAfterStartDate = transactionsFilter.startDate
+ ? isSameOrAfterDate(
+ transaction.timeStamp,
+ dayjs(transactionsFilter.startDate)
+ )
+ : true
+ const txnBeforeEndDate = transactionsFilter.endDate
+ ? isSameOrBeforeDate(
+ transaction.timeStamp,
+ dayjs(transactionsFilter.endDate)
+ )
+ : true
+
+ return txnAfterStartDate && txnBeforeEndDate
+ }
+
+ // should filter out transctions that aren't cross domain
+ const crossDomainFilter = (transaction: ITransaction) => {
+ return (
+ transaction.crossDomainMessage &&
+ transaction.crossDomainMessage.crossDomainMessage
+ )
+ }
+
+ const networkFilter = (transaction: ITransaction) => {
+ let targetFromNetwork = false
+ let targetToNetwork = false
+ switch (transactionsFilter.fromNetworkChainId) {
+ case ALL_NETWORKS.value: {
+ targetFromNetwork = true
+ break
+ }
+ case transaction.originChainId.toString(): {
+ targetFromNetwork = true
+ break
+ }
+ }
+ switch (transactionsFilter.toNetworkChainId) {
+ case ALL_NETWORKS.value: {
+ targetToNetwork = true
+ break
+ }
+ case transaction.destinationChainId.toString(): {
+ targetToNetwork = true
+ break
+ }
+ }
+ return targetFromNetwork && targetToNetwork
+ }
+ const getTransactionStatus = (transaction: ITransaction) => {
+ if (
+ transaction.action &&
+ transaction.crossDomainMessage.crossDomainMessageSendTime
+ ) {
+ switch (transaction.action.status) {
+ case TRANSACTION_STATUS.Succeeded: {
+ return TRANSACTION_FILTER_STATUS.Completed
+ }
+ case TRANSACTION_STATUS.Pending: {
+ return TRANSACTION_FILTER_STATUS.Pending
+ }
+ }
+ }
+ return TRANSACTION_FILTER_STATUS.Canceled
+ }
+ const statusFilter = (transaction: ITransaction) => {
+ const status = getTransactionStatus(transaction)
+ transaction.UserFacingStatus = status
+ if (
+ transactionsFilter.status &&
+ transactionsFilter.status !== TRANSACTION_FILTER_STATUS.All
+ ) {
+ return transactionsFilter.status === transaction.UserFacingStatus
+ }
+
+ return true
+ }
+
+ // filter out transactions whose hash does not match
+ const hashFilter = (transaction: IProcessedTransaction) => {
+ if (transactionsFilter.targetHash) {
+ if (
+ !transaction.fromHash.includes(transactionsFilter.targetHash) &&
+ !transaction.toHash.includes(transactionsFilter.targetHash)
+ ) {
+ return false
+ }
+ }
+ return true
+ }
+ const filteredTransactions = orderedTransactions.filter((transaction) => {
+ return (
+ crossDomainFilter(transaction) &&
+ networkFilter(transaction) &&
+ statusFilter(transaction) &&
+ dateFilter(transaction)
+ )
+ })
+
+ const process_transaction = (transaction: ITransaction) => {
+ let amountString = ''
+ const chain = transaction.layer === 'L1pending' ? 'L1' : transaction.layer
+
+ // TODO: have a unknown token to use
+ let token = {
+ name: 'Etheruem',
+ symbol: 'ETH',
+ decimals: 18,
+ }
+ if (
+ TokenInfo[transaction.originChainId.toString()][
+ transaction.action.token.toLowerCase()
+ ]
+ ) {
+ token =
+ TokenInfo[transaction.originChainId.toString()][
+ transaction.action.token.toLowerCase()
+ ]
+ }
+
+ const symbol = token.symbol
+
+ amountString = logAmount(transaction.action.amount, token.decimals, 4)
+ const fromHash = transaction.hash
+ let toHash = ''
+ if (chain === LAYER.L2 && transaction.crossDomainMessage.l1Hash) {
+ toHash = transaction.crossDomainMessage.l1Hash
+ } else if (chain === LAYER.L1 && transaction.crossDomainMessage.l2Hash) {
+ toHash = transaction.crossDomainMessage.l2Hash
+ }
+ const processedTransaction: IProcessedTransaction = {
+ timeStamp: transaction.timeStamp,
+ from: transaction.from,
+ fromHash,
+ toHash,
+ to: transaction.to,
+ tokenSymbol: symbol,
+ amount: amountString,
+ status: transaction.UserFacingStatus,
+ originChainId: transaction.originChainId,
+ destinationChainId: transaction.destinationChainId,
+ }
+ return processedTransaction
+ }
+
+ const processedTransactions = filteredTransactions.map((transaction) => {
+ return process_transaction(transaction)
+ })
+
+ const filteredProcessedTransactions = processedTransactions.filter(
+ (transaction) => {
+ return hashFilter(transaction)
+ }
+ )
+
+ const getTransactionToken = (symbol: string) => {
+ return (
+
+
+ {symbol === 'BOBA' ? (
+
+ ) : (
+
+ )}
+
+ {symbol}
+
+ )
+ }
+
+ const getTransactionChain = (
+ chainID: string,
+ hash: string,
+ status: string
+ ) => {
+ const linkToHash = `${Chains[chainID].transactionUrlPrefix}${hash}`
+ const networkName = Chains[chainID].name
+ const imgSrc = Chains[chainID].imgSrc
+
+ return (
+
+
+
+
+
+ {networkName}
+ {hash && (
+
+ {`Tx: ${truncate(hash, 4, 4, '...')}`}
+
+ )}
+ {!hash && (
+ {`Tx: ${status}`}
+ )}
+
+
+ )
+ }
+
+ const getTransactionDate = (timeStamp: number) => {
+ return (
+
+ {formatDate(timeStamp, 'DD MMM YYYY hh:mm A')}
+
+ )
+ }
+
+ const getTransactionAmount = (amount: string) => {
+ return amount ? (
+ {amount}
+ ) : (
+ Not Available
+ )
+ }
+ return (
+ <>
+ {transactions.length === 0 && (
+
+
+ Transactions Loading...
+
+ )}
+ {filteredProcessedTransactions && (
+
+ {filteredProcessedTransactions.map(
+ (transaction: IProcessedTransaction, index) => {
+ return (
+ {transaction.status},
+ width: 88,
+ },
+ ]}
+ />
+ )
+ }
+ )}
+
+ )}
+
+ {filteredProcessedTransactions.length === 0 &&
+ transactions.length !== 0 &&
+ !loading && (
+
+
+ No Transactions Matching Filter.
+
+ )}
+
+ )
+}
diff --git a/packages/boba/gateway/src/containers/history/constants.ts b/packages/boba/gateway/src/containers/history/constants.ts
new file mode 100644
index 0000000000..e731957835
--- /dev/null
+++ b/packages/boba/gateway/src/containers/history/constants.ts
@@ -0,0 +1,213 @@
+import AllNetworksIcon from 'assets/images/allNetworks.svg'
+import { IDropdownItem } from 'components/global/dropdown'
+import { IFilterDropdownItem } from 'components/filter'
+import { TableHeaderOptionType } from 'components/global/table'
+import { getCoinImage } from 'util/coinImage'
+import { NETWORK_TYPE } from 'util/network/network.util'
+import { CHAIN_NAME, ChainMap } from './types'
+
+import bobaEth from 'assets/bobaEth.svg'
+import bobaBnb from 'assets/bobaBNB.svg'
+import bobaAvax from 'assets/bobaAvax.svg'
+
+import ethIcon from 'assets/ethereum.svg'
+
+export const Chains: ChainMap = {
+ '0': {
+ name: CHAIN_NAME.All_Networks,
+ transactionUrlPrefix: '',
+ symbol: '',
+ imgSrc: ethIcon,
+ },
+ '56': {
+ name: CHAIN_NAME.BNB,
+ transactionUrlPrefix: 'https://bscscan.com/tx/',
+ symbol: 'BNB',
+ imgSrc: getCoinImage('BNB'),
+ },
+ '56288': {
+ name: CHAIN_NAME.Boba_BNB,
+ transactionUrlPrefix: 'https://blockexplorer.bnb.boba.network/tx/',
+ symbol: 'BOBA',
+ imgSrc: bobaBnb,
+ },
+ '97': {
+ name: CHAIN_NAME.BNB_Testnet,
+ transactionUrlPrefix: 'https://testnet.bscscan.com/tx/',
+ symbol: 'BNB',
+ imgSrc: getCoinImage('BNB'),
+ },
+ '9728': {
+ name: CHAIN_NAME.Boba_BNB_Testnet,
+ transactionUrlPrefix: 'https://blockexplorer.testnet.bnb.boba.network/tx/',
+ symbol: 'BOBA',
+ imgSrc: bobaBnb,
+ },
+ '1': {
+ name: CHAIN_NAME.Ethereum,
+ transactionUrlPrefix: 'https://etherscan.io/tx/',
+ symbol: 'ETH',
+ imgSrc: ethIcon,
+ },
+ '288': {
+ name: CHAIN_NAME.Boba_Ethereum,
+ transactionUrlPrefix: 'https://bobascan.com/tx/',
+ symbol: 'BOBA',
+ imgSrc: bobaEth,
+ },
+ '5': {
+ name: CHAIN_NAME.Goerli,
+ transactionUrlPrefix: 'https://goerli.etherscan.io/tx/',
+ symbol: 'ETH',
+ imgSrc: ethIcon,
+ },
+ '2888': {
+ name: CHAIN_NAME.Boba_Goerli,
+ transactionUrlPrefix: 'https://testnet.bobascan.com/tx/',
+ symbol: 'BOBA',
+ imgSrc: bobaEth,
+ },
+ '43114': {
+ name: CHAIN_NAME.Avalanche,
+ transactionUrlPrefix: 'https://snowtrace.io/tx/',
+ symbol: 'AVAX',
+ imgSrc: getCoinImage('AVAX'),
+ },
+ '43288': {
+ name: CHAIN_NAME.Boba_Avalanche,
+ transactionUrlPrefix: 'https://blockexplorer.avax.boba.network/tx/',
+ symbol: 'BOBA',
+ imgSrc: bobaAvax,
+ },
+ '43113': {
+ name: CHAIN_NAME.Avalanche_Testnet,
+ transactionUrlPrefix: 'https://testnet.snowtrace.io/tx/',
+ symbol: 'AVAX',
+ imgSrc: getCoinImage('AVAX'),
+ },
+ '4328': {
+ name: CHAIN_NAME.Boba_Avalanche_Testnet,
+ transactionUrlPrefix: 'https://blockexplorer.testnet.avax.boba.network/tx/',
+ symbol: 'BOBA',
+ imgSrc: bobaAvax,
+ },
+}
+
+export const ALL_NETWORKS: IDropdownItem = {
+ value: '0',
+ label: 'All Networks',
+ imgSrc: AllNetworksIcon,
+ header: false,
+ headerName: '',
+}
+export const NETWORK_L1_OPTIONS: IDropdownItem[] = [
+ ALL_NETWORKS,
+ {
+ value: '1',
+ label: 'Ethereum',
+ imgSrc: ethIcon,
+ headerName: NETWORK_TYPE.MAINNET,
+ },
+ {
+ value: '56',
+ label: 'BNB',
+ imgSrc: getCoinImage('BNB'),
+ headerName: NETWORK_TYPE.MAINNET,
+ },
+ {
+ value: '43114',
+ label: 'AVAX',
+ imgSrc: getCoinImage('AVAX'),
+ headerName: NETWORK_TYPE.MAINNET,
+ },
+ {
+ value: '5',
+ label: 'Goerli',
+ imgSrc: ethIcon,
+ headerName: NETWORK_TYPE.TESTNET,
+ },
+ {
+ value: '97',
+ label: 'tBNB',
+ imgSrc: getCoinImage('BNB'),
+ headerName: NETWORK_TYPE.TESTNET,
+ },
+ {
+ value: '43113',
+ label: 'Fuji',
+ imgSrc: getCoinImage('AVAX'),
+ headerName: NETWORK_TYPE.TESTNET,
+ },
+]
+
+export const NETWORK_L2_OPTIONS = [
+ ALL_NETWORKS,
+ {
+ value: '288',
+ label: 'Boba Ethereum',
+ imgSrc: bobaEth,
+ headerName: NETWORK_TYPE.MAINNET,
+ },
+ {
+ value: '56288',
+ label: 'Boba BNB',
+ imgSrc: bobaBnb,
+ headerName: NETWORK_TYPE.MAINNET,
+ },
+ {
+ value: '43288',
+ label: 'Boba Avax',
+ imgSrc: bobaAvax,
+ headerName: NETWORK_TYPE.MAINNET,
+ },
+ {
+ value: '2888',
+ label: 'Boba Goerli',
+ imgSrc: bobaEth,
+ headerName: NETWORK_TYPE.TESTNET,
+ },
+ {
+ value: '9728',
+ label: 'Boba tBNB',
+ imgSrc: bobaBnb,
+ headerName: NETWORK_TYPE.TESTNET,
+ },
+ {
+ value: '4328',
+ label: 'Boba Fuji',
+ imgSrc: bobaAvax,
+ headerName: NETWORK_TYPE.TESTNET,
+ },
+]
+
+export const FILTER_OPTIONS: IFilterDropdownItem[] = [
+ { value: 'All', label: 'All Status' },
+ { value: 'Completed', label: 'Completed' },
+ { value: 'Pending', label: 'Pending' },
+ { value: 'Canceled', label: 'Canceled' },
+]
+
+export const TableOptions: TableHeaderOptionType[] = [
+ {
+ name: 'Date',
+ width: 168,
+ tooltip: '',
+ },
+ {
+ name: 'From',
+ width: 142,
+ tooltip: '',
+ },
+ {
+ name: 'To',
+ width: 142,
+ tooltip: '',
+ },
+ {
+ name: 'Token',
+ width: 90,
+ tooltip: '',
+ },
+ { name: 'Amount', width: 80, tooltip: '' },
+ { name: 'Status', width: 88, tooltip: '' },
+]
diff --git a/packages/boba/gateway/src/containers/history/styles.ts b/packages/boba/gateway/src/containers/history/styles.ts
new file mode 100644
index 0000000000..2b70189198
--- /dev/null
+++ b/packages/boba/gateway/src/containers/history/styles.ts
@@ -0,0 +1,819 @@
+import styled, { css } from 'styled-components'
+import { mobile, sdesktop, tablet } from 'themes/screens'
+import { Svg, Typography } from 'components/global'
+import Switch from 'assets/images/icons/switchIcon.svg'
+
+import {
+ Arrow,
+ Header,
+ DropdownContainer,
+ IconContainer as DropdownIconContianer,
+ Option,
+ DropdownBody,
+ DropdownContent,
+ OptionsHeader,
+ Icon as DropdownIcon,
+} from 'components/global/dropdown/styles'
+
+import { Dropdown } from 'components/global/dropdown/'
+
+export const DefaultIcon = styled.div`
+ width: 32px;
+ height: 32px;
+ border-radius: 50%;
+ ${(props) =>
+ props.theme.name === 'light' &&
+ css`
+ background: ${props.theme.colors.gray[600]};
+ `}
+ ${(props) =>
+ props.theme.name === 'dark' &&
+ css`
+ background: ${props.theme.colors.gray[200]};
+ `}
+`
+
+export const HistoryPageContainer = styled.div`
+ margin: 0px auto;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-around;
+ padding: 10px;
+ padding-top: 0;
+ width: 100%;
+ max-width: 1024px;
+ min-width: 480px;
+ ${sdesktop(css`
+ max-width: 750px;
+ gap: 0px 30px;
+ `)}
+`
+
+export const TableHeader = styled.div`
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 20px;
+ ${mobile(
+ css`
+ padding: 0px;
+ `
+ )}
+`
+
+export const TableFilters = styled.div`
+ padding: 20px;
+ border-radius: 6px 6px 0px 0px;
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ ${tablet(css`
+ margin-bottom: 5px;
+ gap: 20px;
+ padding: 10px;
+ `)}
+ ${mobile(css`
+ gap: 10px;
+ margin-bottom: 0px;
+ p {
+ font-size: 12px;
+ }
+ `)}
+`
+
+export const DatePickerWrapper = styled.div`
+ display: flex;
+ gap: 18px;
+ align-items: center;
+ justify-content: space-between;
+ white-space: nowrap;
+ text-align: center;
+ ${mobile(css`
+ display: none;
+ `)}
+`
+
+export const MobileDatePickerWrapper = styled.div`
+ display: none;
+ align-items: center;
+ justify-content: space-between;
+ white-space: nowrap;
+ text-align: center;
+ gap: 8px;
+ ${mobile(css`
+ display: flex;
+ `)}
+`
+
+export const DateInput = styled.button`
+ display: flex;
+ gap: 8px;
+ align-items: center;
+ border: 1px solid #545454;
+ border-radius: 8px;
+ background: #262626;
+ padding: 10px 20px;
+ color: ${({ theme }) => theme.color};
+`
+
+export const NetworkDropdowns = styled.div`
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ gap: 16px;
+ font-size: 16px;
+ align-items: center;
+ ${mobile(css`
+ font-size: 12px;
+ gap: 0px 5px;
+ `)}
+`
+export const TransactionsTableWrapper = styled.div`
+ width: 100%;
+`
+
+export const TransactionsWrapper = styled.div`
+ width: 100%;
+ overflow-y: auto;
+ max-height: 512px;
+ ${sdesktop(css`
+ width: 750px;
+ gap: 0px 30px;
+ `)}
+ ::-webkit-scrollbar-corner {
+ background: none;
+ }
+ &::-webkit-scrollbar {
+ width: 24px;
+ height: 24px;
+ }
+ &::-webkit-scrollbar-track {
+ width: 24px;
+ padding: 8px;
+ margin: 0px;
+ }
+
+ ${(props) =>
+ props.theme.name === 'light' &&
+ css`
+ color: ${props.theme.colors.gray[800]};
+ &::-webkit-scrollbar-thumb {
+ background-color: ${props.theme.colors.gray[500]};
+ background-clip: padding-box;
+ border: 8px solid transparent;
+ border-radius: 12px;
+ }
+ `}
+ ${(props) =>
+ props.theme.name === 'dark' &&
+ css`
+ color: ${props.theme.colors.gray[50]};
+
+ &::-webkit-scrollbar-thumb {
+ background-color: ${props.theme.colors.gray[300]};
+ background-clip: padding-box;
+ border: 8px solid transparent;
+ border-radius: 12px;
+ }
+ `};
+`
+export const TransactionDate = styled.div`
+ font-family: Roboto;
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 500;
+ line-height: normal;
+ text-align: left;
+ width: 168px;
+ white-space: nowrap;
+ ${mobile(css`
+ width: 110px;
+ font-size: 10px;
+ `)}
+`
+export const TransactionDetails = styled.div`
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ width: 142px;
+ gap: 8px;
+ text-align: left;
+`
+export const TransactionChainDetails = styled.div`
+ display: flex;
+ flex-direction: column;
+ font-size: 14px;
+ gap: 2px;
+`
+export const TransactionChain = styled.div`
+ width: 102px;
+ height: 16px;
+ ${mobile(css`
+ font-size: 10px;
+ width: 72px;
+ height: 12px;
+ `)}
+`
+
+export const TransactionHash = styled.a`
+ font-size: 12px;
+ text-decoration: underline;
+ width: 102px;
+ height: 16px;
+ ${(props) =>
+ props.theme.name === 'light' &&
+ css`
+ color: ${props.theme.colors.gray[700]};
+ `}
+ ${(props) =>
+ props.theme.name === 'dark' &&
+ css`
+ color: ${props.theme.colors.gray[100]};
+ `}
+ ${mobile(css`
+ font-size: 8px;
+ width: 72px;
+ height: 12px;
+ `)}
+`
+
+export const IncompleteTransactionHash = styled.div`
+ font-size: 12px;
+ width: 102px;
+ height: 16px;
+ ${(props) =>
+ props.theme.name === 'light' &&
+ css`
+ color: ${props.theme.colors.gray[700]};
+ `}
+ ${(props) =>
+ props.theme.name === 'dark' &&
+ css`
+ color: ${props.theme.colors.gray[100]};
+ `}
+${mobile(css`
+ font-size: 8px;
+ width: 72px;
+ height: 12px;
+ `)}
+`
+
+export const TransactionToken = styled.div`
+ display: flex;
+ flex-direction: row;
+ gap: 8px;
+ align-items: center;
+ width: 90px;
+ text-align: left;
+ font-size: 14px;
+ ${mobile(css`
+ font-size: 10px;
+ `)}
+`
+
+export const TransactionAmount = styled.div`
+ font-size: 14px;
+ width: 80px;
+ text-align: left;
+ ${mobile(css`
+ font-size: 10px;
+ `)}
+`
+
+export const Status = styled.div`
+ font-size: 14px;
+ width: 88px;
+ text-align: left;
+ ${(props) =>
+ props.theme.name === 'light' &&
+ css`
+ color: ${props.theme.colors.gray[800]};
+ `}
+ ${(props) =>
+ props.theme.name === 'dark' &&
+ css`
+ color: ${props.theme.colors.green[300]};
+ `}
+ ${mobile(css`
+ font-size: 10px;
+ `)}
+`
+
+export const IconContainer = styled.div`
+ width: 32px;
+ height: 32px;
+ direction: flex;
+ align-items: center;
+ justify-content: center;
+ ${mobile(css`
+ width: 24px;
+ height: 26px;
+ margin: 0px;
+ `)}
+`
+
+export const Icon = styled(Svg)`
+ display: flex;
+ align-content: center;
+ width: 32px;
+ height: 32px;
+ svg {
+ width: 32px;
+ height: auto;
+ }
+ ${mobile(css`
+ svg {
+ max-width: 24px;
+ height: auto;
+ }
+ `)}
+`
+
+export const Image = styled.img`
+ display: flex;
+ align-content: center;
+ width: 32px;
+ height: 32px;
+`
+
+export const SwitchIcon = styled(Svg).attrs({
+ src: Switch,
+ fill: '#AEDB01',
+})`
+ display: flex;
+
+ div {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+ ${mobile(css`
+ svg {
+ max-width: 14px;
+ height: auto;
+ }
+ `)}
+`
+
+export const SwitchChainIcon = styled.div`
+ cursor: pointer;
+ margin: -12px auto;
+ width: 40px;
+ height: 40px;
+ padding: 8px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 20px;
+ border: 2px solid
+ ${({ theme: { colors, name } }) =>
+ name === 'light' ? colors.gray[600] : colors.gray[200]};
+ background: ${({ theme: { colors } }) => colors.box.background};
+
+ &:hover {
+ border-color: ${({ theme: { colors, name } }) =>
+ name === 'light' ? colors.gray[600] : colors.gray[100]};
+ }
+
+ > div {
+ align-self: stretch;
+ }
+ transition: transform 0.3s ease-in-out;
+ &:hover {
+ transform: rotate(180deg);
+ }
+ ${mobile(css`
+ width: 25px;
+ height: 25px;
+ `)}
+`
+
+export const Table = styled.div`
+ border-radius: 12px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: space-between;
+ text-align: center;
+ width: 100%;
+ padding-bottom: 10px;
+
+ ${(props) =>
+ props.theme.name === 'light' &&
+ css`
+ border: 1px solid ${props.theme.colors.gray[400]};
+ background: ${props.theme.colors.box.background};
+ box-shadow: ${props.theme.boxShadow};
+ `}
+ ${(props) =>
+ props.theme.name === 'dark' &&
+ css`
+ border: 1px solid ${props.theme.colors.gray[300]};
+ background: ${props.theme.colors.box.background};
+ `}
+ ${mobile(css`
+ flex-direction: 'column';
+ padding-bottom: 0px;
+ gap: 10px;
+ `)}
+ ${tablet(css`
+ margin-bottom: '5px';
+ padding-bottom: 0px;
+ `)}
+`
+
+export const NoHistory = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ margin-left: auto;
+ margin-right: auto;
+ padding: 20px;
+ font-size: 16px;
+ gap: 10px;
+
+ ${(props) =>
+ props.theme.name === 'light' &&
+ css`
+ color: ${props.theme.colors.gray[700]};
+ `}
+ ${(props) =>
+ props.theme.name === 'dark' &&
+ css`
+ color: ${props.theme.colors.gray[100]};
+ `}
+
+ svg {
+ ${(props) =>
+ props.theme.name === 'light' &&
+ css`
+ fill: ${props.theme.colors.gray[700]};
+ `}
+ ${(props) =>
+ props.theme.name === 'dark' &&
+ css`
+ fill: ${props.theme.colors.gray[100]};
+ `}
+ }
+`
+
+export const DateDescriptions = styled(Typography)`
+ ${mobile(css`
+ display: none;
+ `)}
+`
+export const MobileDateDescriptions = styled(Typography)`
+ display: none;
+ ${mobile(css`
+ font-size: 12px !important;
+ display: flex;
+ `)}
+`
+
+export const DropdownNetwork = styled(Dropdown)`
+ ${DropdownContainer} {
+ font-size: 16px;
+ ${(props) =>
+ props.theme.name === 'light' &&
+ css`
+ color: ${props.theme.colors.gray[800]};
+ `}
+ ${(props) =>
+ props.theme.name === 'dark' &&
+ css`
+ color: ${props.theme.colors.gray[100]};
+ `};
+ ${mobile(css`
+ div {
+ font-size: 10px;
+ }
+ `)}
+ }
+ ${Header} {
+ border-radius: 20px;
+ min-width: 0px;
+ width: 210px;
+ padding: 6px 16px;
+ gap: 8px;
+ transition: all 0.3s ease;
+ display: flex;
+ z-index: unset;
+ flex-direction: row;
+ align-content: center;
+ div {
+ justify-content: space-between;
+ width: 100%;
+ font-family: Roboto;
+ font-style: normal;
+ font-size: 16px;
+ font-weight: 500;
+ line-height: normal;
+ ${DropdownIconContianer} {
+ width: 32px;
+ }
+ ${Arrow} {
+ width: 11px;
+ ${mobile(css`
+ display: flex;
+ align-items: center;
+ `)}
+ }
+ }
+ ${mobile(css`
+ width: 148px;
+ padding: 3px 5px;
+ white-space: nowrap;
+ div {
+ font-size: 12px;
+ }
+ `)}
+ }
+
+ ${Arrow} {
+ ${mobile(css`
+ svg {
+ width: 6px;
+ height: auto;
+ }
+ `)}
+ }
+
+ ${DropdownIconContianer} {
+ width: 16px;
+ height: 22px;
+ margin: 0px;
+ ${mobile(css`
+ width: 10px;
+ height: 16px;
+ svg {
+ width: 10px;
+ height: auto;
+ }
+ `)}
+ }
+ ${DropdownIcon} {
+ height: 20px;
+ width: 20px;
+ display: flex;
+ align-items: center;
+ div {
+ height: 20px;
+ width: 20px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+ margin: 0px;
+ }
+ ${OptionsHeader} {
+ display: flex;
+ align-items: center;
+ font-size: 12px;
+ font-weight: bold;
+ justify-content: flex-start;
+ box-sizing: border-box;
+ border: 1px solid rgba(0, 0, 0, 0);
+ gap: 8px;
+ border-radius: 10px;
+ text-align: left;
+ color: inherit;
+ ${mobile(css`
+ font-size: 8px;
+ `)}
+ }
+
+ ${Option} {
+ display: flex;
+ align-items: center;
+ font-size: 12px;
+ font-weight: bold;
+ justify-content: flex-start;
+ gap: 8px;
+ border-radius: 10px;
+ text-align: left;
+ color: inherit;
+ ${mobile(css`
+ font-size: 10px;
+ `)}
+ }
+
+ ${DefaultIcon} {
+ width: 16px;
+ height: 16px;
+ border-radius: 50%;
+ ${(props) =>
+ props.theme.name === 'light' &&
+ css`
+ background: ${props.theme.colors.gray[600]};
+ `}
+ ${(props) =>
+ props.theme.name === 'dark' &&
+ css`
+ background: ${props.theme.colors.gray[200]};
+ `}
+ }
+
+ ${DropdownBody} {
+ min-width: 150px;
+ width: 100%;
+ top: 45px;
+ z-index: 1;
+ padding: 10px 0px 10px 0px;
+ box-sizing: border-box;
+ border: inherit;
+ border-top: 0px;
+ border-radius: 14px;
+
+ ${(props) =>
+ props.theme.name === 'light' &&
+ css`
+ color: ${props.theme.colors.gray[800]};
+ border: 1px solid ${props.theme.colors.gray[400]};
+ box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.15);
+ `}
+ ${(props) =>
+ props.theme.name === 'dark' &&
+ css`
+ color: ${props.theme.colors.gray[100]};
+ border: 1px solid ${props.theme.colors.gray[400]};
+ box-shadow: ${props.theme.backShadow};
+ `}
+ }
+ ${DropdownContent} {
+ padding: 0px 10px;
+ max-height: 200px;
+ display: flex;
+ flex-direction: column;
+ gap: 5px 0px;
+ overflow-y: auto;
+ opacity: 1;
+ & > ${Option} {
+ transition: all 0.25s ease;
+ border-radius: 8px;
+ padding: 5px;
+ box-sizing: border-box;
+ border: 1px solid rgba(0, 0, 0, 0);
+ &:hover {
+ background: ${(props) => props.theme.colors.gray[400]};
+ }
+
+ ${(props) =>
+ props.theme.name === 'light' &&
+ css`
+ svg {
+ fill: ${props.theme.colors.gray[800]};
+ }
+ &:hover {
+ border: 1px solid ${props.theme.colors.gray[600]};
+ }
+ `}
+ ${(props) =>
+ props.theme.name === 'dark' &&
+ css`
+ svg {
+ fill: ${props.theme.colors.gray[100]};
+ }
+ &:hover {
+ border: 1px solid ${props.theme.colors.gray[100]};
+ }
+ `};
+ }
+ }
+`
+
+export const TableTransactionsContainer = styled.div`
+ width: 100%;
+ ${sdesktop(css`
+ overflow-x: auto;
+ `)}
+`
+
+export const DatePickerHeader = styled.div`
+ font-size: 14px;
+ padding: 8px 20px;
+ border-radius: 12px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ ${({ theme: { name, colors } }) =>
+ name === 'light'
+ ? css`
+ background: ${colors?.gray[50]};
+ border: 1px solid ${colors?.gray[500]};
+ `
+ : css`
+ background: ${colors?.gray[500]};
+ border: 1px solid ${colors?.gray[300]};
+ `}
+
+ ${mobile(css`
+ height: 30px;
+ font-family: roboto;
+ width: 130px;
+ font-size: 10px;
+ `)}
+`
+
+export const DatePickerHeadersContainer = styled.div`
+ box-sizing: border-box;
+ position: relative;
+ display: flex;
+ flex-direction: row;
+`
+
+export const DatePickerDropdown = styled.div<{ isRange?: boolean }>`
+ transition: 0.25s all;
+ position: absolute;
+ width: 250px;
+ right: 0px;
+ top: 40px;
+ z-index: 1;
+ border-radius: 12px;
+
+ ${({ theme: { colors, name } }) =>
+ name === 'light'
+ ? css`
+ color: ${colors.gray[800]};
+ background: ${colors.gray[50]};
+ border: 1px solid ${colors.gray[500]};
+ `
+ : css`
+ color: ${colors.gray[50]};
+ background: ${colors.gray[500]};
+ border: 1px solid ${colors.gray[300]};
+ ${(isRange) =>
+ !isRange &&
+ css`
+ .rdp-day_selected {
+ border: 1px solid ${colors.gray[100]};
+ }
+ `}
+ `}
+
+ .rdp {
+ --rdp-cell-size: 30px;
+ --rdp-caption-font-size: 14px;
+ --rdp-caption-font-weight: 400;
+ --rdp-caption-font-family: roboto;
+ --rdp-accent-color: ${(props) => props.theme.colors.gray[400]};
+ --rdp-background-color: ${(props) => props.theme.colors.gray[400]};
+ }
+ ${(props) =>
+ props.isRange &&
+ props.theme.name === 'light' &&
+ css`
+ .rdp-day_selected {
+ border: 1px solid ${props.theme.colors.gray[600]};
+ color: ${props.theme.colors.gray[800]};
+ }
+ `}
+ ${(props) =>
+ !props.isRange &&
+ props.theme.name === 'dark' &&
+ css`
+ .rdp-day_selected {
+ border: 1px solid ${props.theme.colors.gray[100]};
+ }
+ `}
+
+ ${(props) =>
+ !props.isRange &&
+ css`
+ .rdp-day {
+ border-radius: 20%;
+ }
+ `}
+ ${(props) =>
+ props.isRange &&
+ css`
+ .rdp-day {
+ border: none !important;
+ }
+ `}
+`
+
+export const DatePickerContainer = styled.div`
+ display: inline-flex;
+ flex-direction: column;
+ position: relative;
+ cursor: pointer;
+ width: 100%;
+ transition: 0.25s all;
+ box-sizing: border-box;
+ font-family: 'Roboto', sans-serif;
+ ${(props) =>
+ props.theme.name === 'light' &&
+ css`
+ color: ${props.theme.colors.gray[800]};
+ `}
+ ${(props) =>
+ props.theme.name === 'dark' &&
+ css`
+ color: ${props.theme.colors.gray[50]};
+ `};
+`
diff --git a/packages/boba/gateway/src/containers/history/tests/__snapshots__/history.test.tsx.snap b/packages/boba/gateway/src/containers/history/tests/__snapshots__/history.test.tsx.snap
new file mode 100644
index 0000000000..aef57acbe9
--- /dev/null
+++ b/packages/boba/gateway/src/containers/history/tests/__snapshots__/history.test.tsx.snap
@@ -0,0 +1,347 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Testing history page Date Picker 1`] = `
+
+
+
+ 05/10/1970 12:00 am
+
+
+
+
+
+
+ Date Range From
+
+
+
+ To
+
+
+
+
+
+ Date Range
+
+
+
+ 02/21/2023 - 08/21/2023
+
+
+
+
+
+
+
+
+
+ From
+
+
+
+
+ To
+
+
+
+
+
+
+
+
+
+
+
+
+ No Transactions Matching Filter.
+
+
+
+
+
+
+
+ No Transactions Matching Filter.
+
+