diff --git a/.github/workflows/boba-publish-develop.yml b/.github/workflows/boba-publish-develop.yml index 7804e51516..aecac00413 100644 --- a/.github/workflows/boba-publish-develop.yml +++ b/.github/workflows/boba-publish-develop.yml @@ -19,7 +19,7 @@ jobs: contents: read steps: - name: Configure AWS credentials - uses: aws-actions/configure-aws-credentials@v2 + uses: aws-actions/configure-aws-credentials@v3 with: role-to-assume: ${{ secrets.AWS_ROLE }} aws-region: ${{ secrets.AWS_REGION }} @@ -168,7 +168,7 @@ jobs: contents: read steps: - name: Configure AWS credentials - uses: aws-actions/configure-aws-credentials@v2 + uses: aws-actions/configure-aws-credentials@v3 with: role-to-assume: ${{ secrets.AWS_ROLE }} aws-region: ${{ secrets.AWS_REGION }} diff --git a/.github/workflows/boba-publish-master.yml b/.github/workflows/boba-publish-master.yml index 54e05e5714..33c6993c61 100644 --- a/.github/workflows/boba-publish-master.yml +++ b/.github/workflows/boba-publish-master.yml @@ -18,7 +18,7 @@ jobs: contents: read steps: - name: Configure AWS credentials - uses: aws-actions/configure-aws-credentials@v2 + uses: aws-actions/configure-aws-credentials@v3 with: role-to-assume: ${{ secrets.AWS_ROLE }} aws-region: ${{ secrets.AWS_REGION }} @@ -70,7 +70,7 @@ jobs: password: ${{ secrets.DOCKERHUB_ACCESS_TOKEN_SECRET }} - name: Configure AWS credentials - uses: aws-actions/configure-aws-credentials@v2 + uses: aws-actions/configure-aws-credentials@v3 with: role-to-assume: ${{ secrets.AWS_ROLE }} aws-region: ${{ secrets.AWS_REGION }} @@ -189,7 +189,7 @@ jobs: contents: read steps: - name: Configure AWS credentials - uses: aws-actions/configure-aws-credentials@v2 + uses: aws-actions/configure-aws-credentials@v3 with: role-to-assume: ${{ secrets.AWS_ROLE }} aws-region: ${{ secrets.AWS_REGION }} diff --git a/.github/workflows/gateway-deploy-stage.yml b/.github/workflows/gateway-deploy-stage.yml index d4d2f001e0..772675ca68 100644 --- a/.github/workflows/gateway-deploy-stage.yml +++ b/.github/workflows/gateway-deploy-stage.yml @@ -48,7 +48,7 @@ jobs: REACT_APP_GA4_MEASUREMENT_ID: ${{ env.REACT_APP_GA4_MEASUREMENT_ID }} REACT_APP_SENTRY_DSN: ${{ env.REACT_APP_SENTRY_DSN }} - name: Configure AWS credentials - uses: aws-actions/configure-aws-credentials@v2 + uses: aws-actions/configure-aws-credentials@v3 with: role-to-assume: ${{ secrets.AWS_ROLE }} aws-region: ${{ secrets.AWS_REGION }} diff --git a/packages/boba/gateway/package.json b/packages/boba/gateway/package.json index d24da6ae19..0e7645739d 100644 --- a/packages/boba/gateway/package.json +++ b/packages/boba/gateway/package.json @@ -14,7 +14,7 @@ "pre-commit": "lint-staged --allow-empty", "prebuild": "./bin/release.sh", "start": "GENERATE_SOURCEMAP=false react-app-rewired start", - "test": "react-scripts test --watchAll=false", + "test": "TZ=utc react-scripts test --watchAll=false", "test:coverage": "yarn test --coverage", "test:u": "yarn test -u", "test:w": "yarn test --watchAll=true", diff --git a/packages/boba/gateway/src/components/PulseBadge/index.tsx b/packages/boba/gateway/src/components/PulseBadge/index.tsx deleted file mode 100644 index 022a113bca..0000000000 --- a/packages/boba/gateway/src/components/PulseBadge/index.tsx +++ /dev/null @@ -1,61 +0,0 @@ -import React, { ReactNode } from 'react' -import styled from 'styled-components' - -type VariantType = 'info' | 'success' | 'danger' | 'warning' - -const Badge = styled.span<{ variant: VariantType }>(({ theme, variant }) => ({ - display: 'inline-block', - color: `${theme.colors[variant]}`, - borderRadius: '100%', - margin: '0 10px', - border: `1px solid ${theme.colors[variant]}`, -})) - -const Circle = styled.span<{ variant: VariantType }>(({ theme, variant }) => ({ - margin: 5, - display: 'block', - width: 8, - height: 8, - borderRadius: '50%', - backgroundColor: `${theme.colors[variant]}`, - boxShadow: `0 0 0 ${theme.colors[variant]}`, - animation: `pulsing 1500ms ease-in-out infinite`, - '@keyframes pulsing': { - '0%': { - boxShadow: `0 0 0 0 ${theme.colors[variant]}`, - }, - '70%': { - boxShadow: `0 0 0 4px ${theme.colors[variant]}`, - }, - '100%': { - boxShadow: `0 0 0 0 ${theme.colors[variant]}`, - }, - }, -})) - -const PulseContainer = styled.span` - display: flex; - justify-content: center; - align-items: center; -` - -interface PulseBadgeProps { - children: ReactNode - variant: VariantType -} - -export const PulseBadge: React.FC = ({ - children, - variant = 'info', -}) => { - return ( - - - - - {children} - - ) -} - -export default PulseBadge diff --git a/packages/boba/gateway/src/components/Table/TableRow.js b/packages/boba/gateway/src/components/Table/TableRow.js deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/packages/boba/gateway/src/components/Table/TransactionTableRow.js b/packages/boba/gateway/src/components/Table/TransactionTableRow.js deleted file mode 100644 index 2dc6090a00..0000000000 --- a/packages/boba/gateway/src/components/Table/TransactionTableRow.js +++ /dev/null @@ -1,232 +0,0 @@ -import React, { useState } from 'react'; -import { - Box, Button, Collapse, - Grid, Typography -} from '@mui/material'; - -import DownIcon from 'components/icons/DownIcon'; -import L2ToL1Icon from 'components/icons/L2ToL1Icon'; -import LinkIcon from 'components/icons/LinkIcon'; -import UpIcon from 'components/icons/UpIcon'; - -import {formatDate} from 'util/dates'; -import truncate from 'truncate-middle'; - -import { - CellSubTitle, CellTitle, - StyledTableCell, - StyledTableRow -} from './table.styles'; - - -function TransactionTableRow({ chainLink, index, ...data }) { - - const [expandRow, setExpandRow] = useState(false); - - return - - - - - - L2 - L1 Exit - Fast Offramp - - - - - - - Swapped - {formatDate(data.timeStamp,'lll' )} - - - - - - - {truncate(data.hash, 8, 6, '...')} - Block {data.blockNumber} - - - - - - - - - - setExpandRow(!expandRow)} - > - - {data.l1Hash ? - !!expandRow ? - : : null - } - - - - { - data.l1Hash ? - - - - - - - - - - {truncate(data.l1Hash, 8, 6, '...')} - - - - - - - L1 Block - - - - - {data.l1BlockNumber} - - - - - - - Block Has - - - - - {data.l1BlockHash} - - - - - - - L1 From - - - - - {data.l1From} - - - - - - - L1 To - - - - - {data.l1To} - - - - - - - : null} - - -} - -export default TransactionTableRow; - - -/* -blockHash: "0xacae9c9e92199ece44055bca7340c6df267b5aaa51c0b88eaa14b163667ef24c" -blockNumber: "9128892" -chain: "L1" -confirmations: "1186" -contractAddress: "" -cumulativeGasUsed: "140780" -from: "0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266" -gas: "21000" -gasPrice: "5147441866" -gasUsed: "21000" -hash: "0x45bea808dac6618405d5161e7ea0d3611ac8f5ee535355059c6e46a259174276" -input: "0x" -isError: "0" -nonce: "2211" -timeStamp: "1629174050" -to: "0x52270d8234b864dcac9947f510ce9275a8a116db" -transactionIndex: "2" -txreceipt_status: "1" -typeTX: "0x52270d8234b864dcac9947f510ce9275a8a116db" - */ diff --git a/packages/boba/gateway/src/components/Table/index.js b/packages/boba/gateway/src/components/Table/index.js deleted file mode 100644 index 3324f81f0e..0000000000 --- a/packages/boba/gateway/src/components/Table/index.js +++ /dev/null @@ -1,85 +0,0 @@ -import { - Grid, - Table, - TableBody, - TableContainer, - TableHead -} from '@mui/material'; -import SortIcon from 'components/icons/SortIcon'; -import React from 'react'; -import { - StyledTableCell, - StyledTableRow -} from './table.styles'; -import TransactionTableRow from './TransactionTableRow'; - - -function StyledTable({ - tableHeadList, - isTransaction, - tableData, - chainLink, -}) { - - return ( - - - - - {tableHeadList && tableHeadList.length > 0 ? - tableHeadList.map((head) => { - return ( - - - {head.label} - {head.isSort ? : null} - - ) - }) - : null - } - - - - {tableData && tableData.length > 0 ? - tableData.map((item,index) => { - if (isTransaction) { - return - } - }) - : null} - - -
- - ) -} - -export default StyledTable; diff --git a/packages/boba/gateway/src/components/Table/table.styles.js b/packages/boba/gateway/src/components/Table/table.styles.js deleted file mode 100644 index 04d50ab470..0000000000 --- a/packages/boba/gateway/src/components/Table/table.styles.js +++ /dev/null @@ -1,74 +0,0 @@ -import styled from '@emotion/styled'; -import { TableCell, TableRow } from '@mui/material'; - -export const CellTitle = styled.div` -font-weight: normal; -font-size: 24px; -line-height: 24px; -color: ${props => props.color ? props.color : '#fff'}; -opacity: 0.9; -margin-bottom: 7px; -` -export const CellSubTitle = styled.div` -font-weight: normal; -font-size: 18px; -line-height: 112%; -color: rgba(255, 255, 255, 0.7); -opacity: 0.9; -` - -export const StyledTableRow = styled(TableRow)` - padding: 0px 30px; - &.expand{ - background: rgba(255, 255, 255, 0.03); - td:first-of-type { border-top-left-radius: 16px; } - td:last-of-type { border-top-right-radius: 16px; } - td { - box-shadow: none; - } - } - &:nth-last-of-type(2) { - td { - box-shadow: none; - } - } - &.header{ - - th { - box-shadow: none; - } - } - &.divider { - height: 0px; - td { - padding: 0px; - } - } - &.hidden { - height: 0px; - td { - padding: 0px; - } - .value { - marginLeft: 10px; - color: rgba(255, 255, 255, 0.7); - } - } - &.detail { - background: rgba(255, 255, 255, 0.03); - - td:first-of-type { border-bottom-left-radius: 16px; } - td:last-of-type { border-bottom-right-radius: 16px; } - - .value { - marginLeft: 10px; - color: rgba(255, 255, 255, 0.7); - } - } -` -export const StyledTableCell = styled(TableCell)` - border: none; - padding-top: 20px; - color: ${props => props.color ? props.color : '#fff'}; - box-shadow: 0px 1px 0px rgb(255 255 255 / 5%) -` diff --git a/packages/boba/gateway/src/components/common/common.styles.js b/packages/boba/gateway/src/components/common/common.styles.js deleted file mode 100644 index 67af24a2f7..0000000000 --- a/packages/boba/gateway/src/components/common/common.styles.js +++ /dev/null @@ -1,10 +0,0 @@ -import { styled } from '@mui/material/styles'; -import { Divider } from '@mui/material'; - - -export const DividerLine = styled(Divider)(({ theme }) => ({ - background: `${theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.04)' : 'rgba(3, 19, 19, 0.04)'}`, - boxSizing: 'border-box', - boxShadow: `${theme.palette.mode === 'dark' ? '0px 4px 4px rgba(0, 0, 0, 0.25)' : 'none'}`, - width: '100%' -})) diff --git a/packages/boba/gateway/src/components/icons/ArrowRightIcon.js b/packages/boba/gateway/src/components/icons/ArrowRightIcon.js deleted file mode 100644 index 7b1066d551..0000000000 --- a/packages/boba/gateway/src/components/icons/ArrowRightIcon.js +++ /dev/null @@ -1,21 +0,0 @@ -import * as React from "react"; -import { useTheme } from "@mui/material/styles"; - -function ArrowRightIcon() { - const theme = useTheme(); - const isLight = theme.palette.mode === 'light'; - const color = theme.palette.common[isLight ? 'black' : 'white']; - return ( - - - - ); -} - -export default ArrowRightIcon; diff --git a/packages/boba/gateway/src/components/icons/BobaIcon.js b/packages/boba/gateway/src/components/icons/BobaIcon.js deleted file mode 100644 index e5de06aa7a..0000000000 --- a/packages/boba/gateway/src/components/icons/BobaIcon.js +++ /dev/null @@ -1,49 +0,0 @@ -import * as React from "react" -import { useTheme } from '@mui/material'; - -function BobaIcon({ dark = false, selected = true }) { - - const theme = useTheme(); - - const recColor = theme.palette.mode === 'light' ? '#031313' : '#ffffff' - - if (!selected) { - return - - - - } - - if (!!dark) { - return ( - - - - - - - - - - - - ) - } - - return ( - - - - - - - - - - - - - ) -} - -export default BobaIcon diff --git a/packages/boba/gateway/src/components/icons/ClaimIcon.js b/packages/boba/gateway/src/components/icons/ClaimIcon.js deleted file mode 100644 index 57e9b5f2b9..0000000000 --- a/packages/boba/gateway/src/components/icons/ClaimIcon.js +++ /dev/null @@ -1,40 +0,0 @@ -import * as React from "react"; -import { useTheme } from "@mui/material/styles"; - -function ClaimIcon() { - const theme = useTheme(); - const isLight = theme.palette.mode === 'light'; - const color = theme.palette.common[isLight ? 'black' : 'white']; - return ( - - - - - - ); -} - -export default ClaimIcon; diff --git a/packages/boba/gateway/src/components/icons/DAOIcon.js b/packages/boba/gateway/src/components/icons/DAOIcon.js deleted file mode 100644 index 6e2272212c..0000000000 --- a/packages/boba/gateway/src/components/icons/DAOIcon.js +++ /dev/null @@ -1,25 +0,0 @@ -import * as React from "react"; -function DAOIcon({ color }) { - return ( - - - - - - - - - - - - - - ); -} - -export default DAOIcon \ No newline at end of file diff --git a/packages/boba/gateway/src/components/icons/DirectionIcon.js b/packages/boba/gateway/src/components/icons/DirectionIcon.js deleted file mode 100644 index 769b635063..0000000000 --- a/packages/boba/gateway/src/components/icons/DirectionIcon.js +++ /dev/null @@ -1,11 +0,0 @@ -import * as React from 'react'; - -function DirectionIcon() { - return ( - - - - ) -} - -export default DirectionIcon; diff --git a/packages/boba/gateway/src/components/icons/Discord.js b/packages/boba/gateway/src/components/icons/Discord.js deleted file mode 100644 index 48e4089b51..0000000000 --- a/packages/boba/gateway/src/components/icons/Discord.js +++ /dev/null @@ -1,52 +0,0 @@ -import * as React from "react" - -function DiscordIcon({ color }) { - return ( - - - - - - - - - - - ) -} - -export default DiscordIcon diff --git a/packages/boba/gateway/src/components/icons/DownIcon.js b/packages/boba/gateway/src/components/icons/DownIcon.js deleted file mode 100644 index 993cbe0baf..0000000000 --- a/packages/boba/gateway/src/components/icons/DownIcon.js +++ /dev/null @@ -1,25 +0,0 @@ -import * as React from "react"; -import { useTheme } from "@mui/material/styles"; - -function DownIcon() { - const theme = useTheme(); - const isLight = theme.palette.mode === 'light'; - const color = theme.palette.common[isLight ? 'black' : 'white']; - return ( - - - - - ) -} - -export default DownIcon; diff --git a/packages/boba/gateway/src/components/icons/EarnIcon.js b/packages/boba/gateway/src/components/icons/EarnIcon.js deleted file mode 100644 index eedee7258b..0000000000 --- a/packages/boba/gateway/src/components/icons/EarnIcon.js +++ /dev/null @@ -1,22 +0,0 @@ -import * as React from "react" - -function EarnIcon({ color }) { - return ( - - - - ) -} - -export default EarnIcon diff --git a/packages/boba/gateway/src/components/icons/EditIcon.js b/packages/boba/gateway/src/components/icons/EditIcon.js deleted file mode 100644 index 998cc35b63..0000000000 --- a/packages/boba/gateway/src/components/icons/EditIcon.js +++ /dev/null @@ -1,29 +0,0 @@ -import * as React from "react"; -import { useTheme } from "@mui/material/styles"; - -function EditIcon() { - const theme = useTheme(); - const isLight = theme.palette.mode === 'light'; - const color = theme.palette.common[isLight ? 'black' : 'white']; - return ( - - - - - ); -} - -export default EditIcon; diff --git a/packages/boba/gateway/src/components/icons/EthereumIcon.js b/packages/boba/gateway/src/components/icons/EthereumIcon.js deleted file mode 100644 index d847d72f22..0000000000 --- a/packages/boba/gateway/src/components/icons/EthereumIcon.js +++ /dev/null @@ -1,35 +0,0 @@ -import * as React from "react" -import { useTheme } from '@mui/material' - -function EthereumIcon({ selected = true }) { - - const theme = useTheme(); - - const recColor = theme.palette.mode === 'light' ? '#031313' : '#ffffff' - - if (!selected) { - return - - - - - - - - - } - - return ( - - - - - - - - - - ) -} - -export default EthereumIcon diff --git a/packages/boba/gateway/src/components/icons/ExitIcon.js b/packages/boba/gateway/src/components/icons/ExitIcon.js deleted file mode 100644 index 352859a02d..0000000000 --- a/packages/boba/gateway/src/components/icons/ExitIcon.js +++ /dev/null @@ -1,24 +0,0 @@ -import * as React from "react"; -import { useTheme } from "@mui/material/styles"; - -function ExitIcon() { - const theme = useTheme(); - const isLight = theme.palette.mode === 'light'; - const color = theme.palette.common[isLight ? 'black' : 'white']; - return ( - - - - - ); -} - -export default ExitIcon; diff --git a/packages/boba/gateway/src/components/icons/HideIcon.js b/packages/boba/gateway/src/components/icons/HideIcon.js deleted file mode 100644 index f5b84149ee..0000000000 --- a/packages/boba/gateway/src/components/icons/HideIcon.js +++ /dev/null @@ -1,27 +0,0 @@ -import * as React from "react"; -import { useTheme } from "@mui/material/styles"; - -function HideIcon() { - const theme = useTheme(); - const isLight = theme.palette.mode === 'light'; - const color = theme.palette.common[isLight ? 'black' : 'white']; - return ( - - - - - ); -} - -export default HideIcon; diff --git a/packages/boba/gateway/src/components/icons/HistoryIcon.js b/packages/boba/gateway/src/components/icons/HistoryIcon.js deleted file mode 100644 index 9d9c8ff8d3..0000000000 --- a/packages/boba/gateway/src/components/icons/HistoryIcon.js +++ /dev/null @@ -1,53 +0,0 @@ -import * as React from "react" - -function HistoryIcon({ color }) { - - return ( - - - - - - - - ) -} - -export default HistoryIcon diff --git a/packages/boba/gateway/src/components/icons/L1Icon.js b/packages/boba/gateway/src/components/icons/L1Icon.js deleted file mode 100644 index 23fc90f136..0000000000 --- a/packages/boba/gateway/src/components/icons/L1Icon.js +++ /dev/null @@ -1,42 +0,0 @@ -import * as React from "react"; -// import { useTheme } from "@mui/material/styles"; -// TODO: Make use of color base on the provided theme. -function L1Icon() { - // const theme = useTheme(); - // const isLight = theme.palette.mode === 'light'; - // const color = theme.palette.common[isLight ? 'black' : 'white']; - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -} - -export default L1Icon; diff --git a/packages/boba/gateway/src/components/icons/L2Icon.js b/packages/boba/gateway/src/components/icons/L2Icon.js deleted file mode 100644 index d492dd1b61..0000000000 --- a/packages/boba/gateway/src/components/icons/L2Icon.js +++ /dev/null @@ -1,25 +0,0 @@ -import * as React from "react"; -// import { useTheme } from "@mui/material/styles"; -// TODO: Make use of color base on the provided theme. -function L1Icon() { - // const theme = useTheme(); - // const isLight = theme.palette.mode === 'light'; - // const color = theme.palette.common[isLight ? 'black' : 'white']; - return ( - - - - - - - - - - - - - - ); -} - -export default L1Icon; diff --git a/packages/boba/gateway/src/components/icons/L2ToL1Icon.js b/packages/boba/gateway/src/components/icons/L2ToL1Icon.js deleted file mode 100644 index 6a833eacb0..0000000000 --- a/packages/boba/gateway/src/components/icons/L2ToL1Icon.js +++ /dev/null @@ -1,48 +0,0 @@ -import React from 'react'; - -export const L2ToL1Icon = ({ color }) => { - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ) -} - -export default L2ToL1Icon diff --git a/packages/boba/gateway/src/components/icons/LayerIcon.js b/packages/boba/gateway/src/components/icons/LayerIcon.js deleted file mode 100644 index e5f16458dd..0000000000 --- a/packages/boba/gateway/src/components/icons/LayerIcon.js +++ /dev/null @@ -1,27 +0,0 @@ -import * as React from "react"; -import { useTheme } from "@mui/material/styles"; - -function LayerIcon() { - const theme = useTheme(); - const isLight = theme.palette.mode === 'light'; - const color = theme.palette.common[isLight ? 'black' : 'white']; - return ( - - - - ) -} - -export default LayerIcon; diff --git a/packages/boba/gateway/src/components/icons/LearnIcon.js b/packages/boba/gateway/src/components/icons/LearnIcon.js deleted file mode 100644 index 084cec10f5..0000000000 --- a/packages/boba/gateway/src/components/icons/LearnIcon.js +++ /dev/null @@ -1,32 +0,0 @@ -import * as React from "react" - -function LearnIcon({ color }) { - return ( - - - - - - ) -} - -export default LearnIcon diff --git a/packages/boba/gateway/src/components/icons/LinkIcon.js b/packages/boba/gateway/src/components/icons/LinkIcon.js deleted file mode 100644 index 46bb9d5484..0000000000 --- a/packages/boba/gateway/src/components/icons/LinkIcon.js +++ /dev/null @@ -1,24 +0,0 @@ -import { useTheme } from "@mui/material"; -import * as React from "react"; - -function LinkIcon() { - - const theme = useTheme(); - const isLight = theme.palette.mode === 'light'; - const color = theme.palette.common[isLight ? 'black' : 'white']; - - return ( - - - ) -} - -export default LinkIcon; diff --git a/packages/boba/gateway/src/components/icons/LockIcon.js b/packages/boba/gateway/src/components/icons/LockIcon.js deleted file mode 100644 index c2c1903405..0000000000 --- a/packages/boba/gateway/src/components/icons/LockIcon.js +++ /dev/null @@ -1,32 +0,0 @@ -import * as React from "react"; -import { useTheme } from "@mui/material/styles"; - -function LockIcon() { - const theme = useTheme(); - const isLight = theme.palette.mode === 'light'; - const color = theme.palette.common[isLight ? 'black' : 'white']; - return ( - - - - - ); -} - -export default LockIcon; diff --git a/packages/boba/gateway/src/components/icons/MinusIcon.js b/packages/boba/gateway/src/components/icons/MinusIcon.js deleted file mode 100644 index a628a53e87..0000000000 --- a/packages/boba/gateway/src/components/icons/MinusIcon.js +++ /dev/null @@ -1,24 +0,0 @@ -import * as React from "react"; -import { useTheme } from "@mui/material/styles"; - -function MinusIcon() { - const theme = useTheme(); - const isLight = theme.palette.mode === 'light'; - const color = theme.palette.common[isLight ? 'black' : 'white']; - return ( - - - - ); -} - -export default MinusIcon; diff --git a/packages/boba/gateway/src/components/icons/NFTIcon.js b/packages/boba/gateway/src/components/icons/NFTIcon.js deleted file mode 100644 index 6201799b4a..0000000000 --- a/packages/boba/gateway/src/components/icons/NFTIcon.js +++ /dev/null @@ -1,22 +0,0 @@ -import * as React from "react"; -// import { useTheme } from "@mui/material/styles"; -// TODO: Make use of color base on the provided theme. -function NFTIcon({ color }) { - // const theme = useTheme(); - // const isLight = theme.palette.mode === 'light'; - // const color = theme.palette.common[isLight ? 'black' : 'white']; - return ( - - - - ); -} - -export default NFTIcon; diff --git a/packages/boba/gateway/src/components/icons/NetworkIcon.js b/packages/boba/gateway/src/components/icons/NetworkIcon.js deleted file mode 100644 index 9dfa299b04..0000000000 --- a/packages/boba/gateway/src/components/icons/NetworkIcon.js +++ /dev/null @@ -1,28 +0,0 @@ -import * as React from "react" -import { useTheme } from "@mui/material"; - -function NetworkIcon() { - const theme = useTheme(); - const isLight = theme.palette.mode === 'light'; - const color = isLight ? 'black' : 'white'; - - return ( - - - - ) -} - -export default NetworkIcon; diff --git a/packages/boba/gateway/src/components/icons/NetworkSwitcherIcon.js b/packages/boba/gateway/src/components/icons/NetworkSwitcherIcon.js deleted file mode 100644 index de8cddb63a..0000000000 --- a/packages/boba/gateway/src/components/icons/NetworkSwitcherIcon.js +++ /dev/null @@ -1,52 +0,0 @@ -import * as React from "react" -import { useTheme } from "@mui/material"; - -function NetworkSwitcherIcon({ active }) { - const theme = useTheme(); - const isLight = theme.palette.mode === 'light'; - const color = !active ? '#506DFA' : isLight ? 'black' : '#506DFA'; - - return ( - - - - - - - - - - - - ) -} - -export default NetworkSwitcherIcon; diff --git a/packages/boba/gateway/src/components/icons/PlusIcon.js b/packages/boba/gateway/src/components/icons/PlusIcon.js deleted file mode 100644 index 189c1c6163..0000000000 --- a/packages/boba/gateway/src/components/icons/PlusIcon.js +++ /dev/null @@ -1,23 +0,0 @@ -import * as React from "react"; -import { useTheme } from "@mui/material/styles"; - -function PlusIcon() { - const theme = useTheme(); - const isLight = theme.palette.mode === 'light'; - const color = theme.palette.common[isLight ? 'black' : 'white']; - return ( - - - - ); -} - -export default PlusIcon; diff --git a/packages/boba/gateway/src/components/icons/PoolIcon.js b/packages/boba/gateway/src/components/icons/PoolIcon.js deleted file mode 100644 index f67830d42d..0000000000 --- a/packages/boba/gateway/src/components/icons/PoolIcon.js +++ /dev/null @@ -1,27 +0,0 @@ -import * as React from "react" - -function PoolIcon({ color }) { - return ( - - - - - ) -} - -export default PoolIcon diff --git a/packages/boba/gateway/src/components/icons/SafeIcon.js b/packages/boba/gateway/src/components/icons/SafeIcon.js deleted file mode 100644 index 8dc723d421..0000000000 --- a/packages/boba/gateway/src/components/icons/SafeIcon.js +++ /dev/null @@ -1,7 +0,0 @@ -import * as React from "react" - -function SafeIcon({ color }) { - return (< svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" > ) -} - -export default SafeIcon diff --git a/packages/boba/gateway/src/components/icons/SettingsIcon.js b/packages/boba/gateway/src/components/icons/SettingsIcon.js deleted file mode 100644 index eb270e33a4..0000000000 --- a/packages/boba/gateway/src/components/icons/SettingsIcon.js +++ /dev/null @@ -1,47 +0,0 @@ -import * as React from "react"; -import { useTheme } from "@mui/material/styles"; - -function SettingsIcon() { - const theme = useTheme(); - const isLight = theme.palette.mode === 'light'; - const color = theme.palette.common[isLight ? 'black' : 'white']; - return ( - - - - - - - - - - - - - ); -} - -export default SettingsIcon; diff --git a/packages/boba/gateway/src/components/icons/SortIcon.js b/packages/boba/gateway/src/components/icons/SortIcon.js deleted file mode 100644 index ecc460606b..0000000000 --- a/packages/boba/gateway/src/components/icons/SortIcon.js +++ /dev/null @@ -1,30 +0,0 @@ -import * as React from "react" -import { useTheme } from "@mui/material/styles"; - -function SortIcon() { - const theme = useTheme(); - const isLight = theme.palette.mode === 'light'; - const color = theme.palette.common[isLight ? 'black' : 'white']; - return ( - - - - - ) - -} - -export default SortIcon diff --git a/packages/boba/gateway/src/components/icons/SwapIcon.js b/packages/boba/gateway/src/components/icons/SwapIcon.js deleted file mode 100644 index 35c3df60e7..0000000000 --- a/packages/boba/gateway/src/components/icons/SwapIcon.js +++ /dev/null @@ -1,25 +0,0 @@ -import { useTheme } from "@mui/material"; -import * as React from "react" - -function SwapIcon() { - const theme = useTheme(); - const isLight = theme.palette.mode === 'light'; - const color = theme.palette.common[isLight ? 'black' : 'white']; - - return ( - - - - ) -} - -export default SwapIcon diff --git a/packages/boba/gateway/src/components/icons/TelegramIcon.js b/packages/boba/gateway/src/components/icons/TelegramIcon.js deleted file mode 100644 index 2bef6d7487..0000000000 --- a/packages/boba/gateway/src/components/icons/TelegramIcon.js +++ /dev/null @@ -1,17 +0,0 @@ -import { useTheme } from "@mui/material"; -import * as React from "react"; - -function TwitterIcon() { - - const theme = useTheme(); - const isLight = theme.palette.mode === 'light'; - const color = theme.palette.common[isLight ? 'black' : 'white']; - - - return ( - - - ) -} - -export default TwitterIcon; diff --git a/packages/boba/gateway/src/components/icons/TwitterIcon.js b/packages/boba/gateway/src/components/icons/TwitterIcon.js deleted file mode 100644 index 248720e9ef..0000000000 --- a/packages/boba/gateway/src/components/icons/TwitterIcon.js +++ /dev/null @@ -1,15 +0,0 @@ -import { useTheme } from "@mui/material"; -import * as React from "react"; - -function TwitterIcon() { - const theme = useTheme(); - const isLight = theme.palette.mode === 'light'; - const color = theme.palette.common[isLight ? 'black' : 'white']; - - return ( - - - ) -} - -export default TwitterIcon; diff --git a/packages/boba/gateway/src/components/icons/UpIcon.js b/packages/boba/gateway/src/components/icons/UpIcon.js deleted file mode 100644 index 931a19f828..0000000000 --- a/packages/boba/gateway/src/components/icons/UpIcon.js +++ /dev/null @@ -1,24 +0,0 @@ -import * as React from "react"; -import { useTheme } from "@mui/material/styles"; - -function UpIcon() { - const theme = useTheme(); - const isLight = theme.palette.mode === 'light'; - const color = theme.palette.common[isLight ? 'black' : 'white']; - return ( - - - - ); -} - -export default UpIcon; diff --git a/packages/boba/gateway/src/components/seven/FastExit.js b/packages/boba/gateway/src/components/seven/FastExit.js index 38cf3ce590..459f6d3740 100644 --- a/packages/boba/gateway/src/components/seven/FastExit.js +++ b/packages/boba/gateway/src/components/seven/FastExit.js @@ -15,10 +15,9 @@ limitations under the License. */ import React from 'react' -import { Typography } from '@mui/material' +import { Typography } from 'components/global' -import * as S from './Transaction.styles' -import { ExitWrapper, ExitsWrapper, Hash, HashContainer } from './styles' +import { ExitWrapper, Hash, HashContainer } from './styles' import networkService from 'services/networkService' @@ -29,9 +28,9 @@ function FastExit({ }) { - const chainLink = ({hash}) => { + const chainLink = ({ hash }) => { if (networkService.networkConfig[ 'L2' ]) { - return `${networkService.networkConfig['L2'].transaction}${hash}` + return `${networkService.networkConfig[ 'L2' ].transaction}${hash}` } return '' } @@ -40,41 +39,23 @@ function FastExit({ let timeLabel = `Fast Exit was started ${secondsAgo} seconds ago` return ( - - - - - {blockNumber} - - {timeLabel} - - - Hash:  - - {oriHash} - - - - - - - ) + + {blockNumber} + + Hash:  + + {oriHash} + + + + {timeLabel} + + + ) } diff --git a/packages/boba/gateway/src/components/seven/Seven.js b/packages/boba/gateway/src/components/seven/Seven.js index bf1c66d80f..807876a46f 100644 --- a/packages/boba/gateway/src/components/seven/Seven.js +++ b/packages/boba/gateway/src/components/seven/Seven.js @@ -15,13 +15,10 @@ limitations under the License. */ import React from 'react' -import { Typography } from '@mui/material' - -import * as S from './Transaction.styles' -import { Hash, ExitsWrapper, ExitWrapper, HashContainer } from './styles' +import { Typography } from 'components/global' +import { Hash, ExitWrapper, HashContainer } from './styles' import networkService from 'services/networkService' - function Seven({ blockNumber, oriHash, @@ -29,9 +26,9 @@ function Seven({ }) { - const chainLink = ({hash}) => { + const chainLink = ({ hash }) => { if (networkService.networkConfig[ 'L2' ]) { - return `${networkService.networkConfig['L2'].transaction}${hash}` + return `${networkService.networkConfig[ 'L2' ].transaction}${hash}` } return '' } @@ -41,60 +38,36 @@ function Seven({ const hoursAgo = Math.round((secondsAgo % (3600 * 24)) / 3600) let timeLabel = `Exit was started ${daysAgo} days and ${hoursAgo} hours ago` - const overdue = secondsAgo - (7*24*60*60) + const overdue = secondsAgo - (7 * 24 * 60 * 60) - if( overdue > 0) { - if(hoursAgo <= 1) + if (overdue > 0) { + if (hoursAgo <= 1) timeLabel = `Funds will exit soon. The 7 day window just passed` - else if(hoursAgo <= 2) + else if (hoursAgo <= 2) timeLabel = `Funds will exit soon. The 7 day window recently passed` - else if(hoursAgo > 2) + else if (hoursAgo > 2) timeLabel = `Funds will exit soon. The 7 day window passed ${hoursAgo} hours ago` } - return ( - - - - - {blockNumber} - {overdue < 0 && - - {timeLabel} - - } - {overdue > 0 && - - {timeLabel} - - } - - Hash:  - - {oriHash} - - - - - - - ) + return ( + + {blockNumber} + + + Hash:  + + {oriHash} + + + + {timeLabel} + + + ) } diff --git a/packages/boba/gateway/src/components/seven/Transaction.module.scss b/packages/boba/gateway/src/components/seven/Transaction.module.scss deleted file mode 100644 index dd95b8d502..0000000000 --- a/packages/boba/gateway/src/components/seven/Transaction.module.scss +++ /dev/null @@ -1,251 +0,0 @@ -@import 'index.scss'; - -$dropDownHeight: 80px; -$boxDropDownHeight: 50px; - -.Transaction { - - display: flex; - flex-direction: row; - transition: all 200ms ease-in-out; - flex-direction: column; - padding: 10px; - margin: 5px; - background: transparent; - padding: '10px'; - // box-shadow: 0 0 4px $gray4; - border-radius: 10px; - @include mobile { - flex-direction: column; - padding: 15px 10px; - } - - .transactionItem { - display: flex; - justify-content: center; - flex-direction: column; - margin-bottom: 10px; - .title { - width: 100%; - display: flex; - justify-content: space-between; - align-items: center; - // font-size: 1.1em; - } - .subTitle { - width: 100%; - display: flex; - justify-content: space-between; - align-items: center; - padding-top: 5px; - // font-size: 0.8em; - color: $white700; //$gray4; - } - .content { - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; - padding-top: 10px; - font-size: 16px; - } - .viewMore { - flex-direction: row; - text-decoration: underline; - } - - } -} - -.left { - display: flex; - flex-direction: column; - flex: 1; - div:last-child { - margin-top: 10px; - font-size: 0.7em; - } - @include mobile { - margin-bottom: 10px; - } -} - -.midTitle { - margin-top: 10px; - color: $gray6; - font-size: 0.8em; -} - -.statusContainer { - display: flex; - flex-direction: column; - text-align: right; - align-items: flex-end; - font-size: 0.9em; - @include mobile { - text-align: left; - align-items: flex-start; - } - div:last-child { - margin-top: 10px; - font-size: 0.8em; - } -} - -.status { - display: flex; - flex-direction: row; - align-items: center; - justify-content: flex-end; - div:last-child { - font-size: 0.8em; - } - @include mobile { - flex-direction: row-reverse; - justify-content: flex-end; - } - .indicator { - margin: 0 10px 0 0; - width: 8px; - height: 8px; - border-radius: 100%; - @include mobile { - margin-left: 10px; - } - } - .pending { - background-color: $yellow; - } - .exited { - background-color: $green; - } - .failed { - background-color: $red; - } -} - -.percentage { - margin-left: 10px; - @include mobile { - margin-left: 0; - margin-right: 10px; - } -} - -.button { - color: $white;//$gray6; - border: 1.4px solid $blue;// #506DFA; - display: flex; - align-items: center; - justify-content: space-around; - border-radius: 8px; - padding: 5px 10px; - cursor: pointer; - - &:hover { - background-color: $blue; - } - -} - -.href { - text-decoration: underline; - color: white -} - -.divider { - height: 0px; - width: 90%; - margin: 5px auto; - position: relative; - z-index: 1; - - &::before{ - content: ""; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: -1; - margin: -1px; - border-radius: inherit; - background: linear-gradient(90deg, rgba(255, 255, 255, 0) -0.74%, rgba(255, 255, 255, 0.0414) 8.18%, rgba(255, 255, 255, 0.0408) 90.07%, rgba(255, 255, 255, 0) 100.04%); - } - -} - -.dropDownContent { - display: flex; - margin-left: 0px !important; - margin-top: -5px !important; - div { - display: flex; - - &:nth-child(2) { - color: $white700; - } - } -} - -.dropDownTitle { - display: flex; - div { - display: flex; - } -} - -.dropDownContainer { - height: $dropDownHeight; - animation: openDropDown 1s; - overflow: hidden; - display: flex; - flex-direction: column; -} - -.closeDropDown { - height: 0px; - animation: closeDropDown 1s; - overflow: hidden; - display: flex; - flex-direction: column; - justify-content: center; -} - -.dropDownInit { - height: 0px; - overflow: hidden; -} - -.boxContainer { - height: $boxDropDownHeight; - padding: 5px; - display: flex; - justify-content: center; - align-items: center; -} - -/*************************/ -@keyframes openDropDown { - 0% { - height: 0px; - } - 100% { - height: $dropDownHeight; - } -} - -@keyframes closeDropDown { - 0% { - height: $dropDownHeight; - } - 100% { - height: 0px; - } -} - -.muted { - opacity: 0.7; - margin: 0; - padding: 0; -} diff --git a/packages/boba/gateway/src/components/seven/Transaction.styles.js b/packages/boba/gateway/src/components/seven/Transaction.styles.js deleted file mode 100644 index d40003d2b2..0000000000 --- a/packages/boba/gateway/src/components/seven/Transaction.styles.js +++ /dev/null @@ -1,53 +0,0 @@ -import styled from '@emotion/styled'; -import { Box, Grid } from '@mui/material' - -export const DropdownWrapper = styled(Box)` - display: flex; - justify-content: center; - align-items: center; - flex-direction: row; - gap: 10px; -`; - -export const TableCell = styled(Box)` - padding: 5px; - display: flex; - flex-direction: column; - align-items: flex-start; - justify-content: center; - word-break: break-all -`; - -export const TableBody = styled(Box)` - display: flex; - align-items: flex-start; - justify-content: flex-start; - gap: 5px; - text-align: left; -`; - -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'}` - } -})) diff --git a/packages/boba/gateway/src/components/seven/styles.ts b/packages/boba/gateway/src/components/seven/styles.ts index cf67669e97..032e4baae6 100644 --- a/packages/boba/gateway/src/components/seven/styles.ts +++ b/packages/boba/gateway/src/components/seven/styles.ts @@ -1,7 +1,12 @@ import styled, { css } from 'styled-components' import { Typography } from 'components/global' -export const ExitsWrapper = styled.div` +export const ExitWrapper = styled.div` + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: flex-start; + gap: 5px; background: ${(props) => props.theme.colors.popup}; padding: 10px; border-radius: 12px; @@ -24,15 +29,8 @@ export const ExitsWrapper = styled.div` `} ` -export const ExitWrapper = styled.div` - display: flex; - flex-direction: column; - justify-content: center; - align-items: flex-start; - gap: 5px; -` - export const HashContainer = styled(Typography)` + width: 20%; ${(props) => props.theme.name === 'light' && css` diff --git a/packages/boba/gateway/src/containers/bobaScope/FastExits.js b/packages/boba/gateway/src/containers/bobaScope/FastExits.js index bb349abc83..99987ac957 100644 --- a/packages/boba/gateway/src/containers/bobaScope/FastExits.js +++ b/packages/boba/gateway/src/containers/bobaScope/FastExits.js @@ -16,24 +16,26 @@ limitations under the License. */ import React, { useState, useEffect } from 'react' import { Grid, Box } from '@mui/material' import { useSelector } from 'react-redux' -import {formatDate} from 'util/dates' +import { formatDate } from 'util/dates' import { selectLoading } from 'selectors' import { Pager } from 'components' import FastExit from 'components/seven/FastExit' -import styles from './Transactions.module.scss' -import { HistoryContainer, Content } from './styles' +import { Svg } from 'components/global/svg' +import noHistoryIcon from 'assets/images/noHistory.svg' +import { HistoryContainer, Content, Disclaimer } from './styles' +import { Typography } from 'components/global' -const PER_PAGE = 10 +const PER_PAGE = 6 function FastExits({ searchData, data }) { - const [page, setPage] = useState(1) + const [ page, setPage ] = useState(1) - const loading = useSelector(selectLoading(['FASTEXITS/GETALL'])) + const loading = useSelector(selectLoading([ 'FASTEXITS/GETALL' ])) - useEffect(() => {setPage(1)}, [searchData]) + useEffect(() => { setPage(1) }, [ searchData ]) const _data = data.filter(i => { return i.hash.includes(searchData) && i.to !== null @@ -49,42 +51,46 @@ function FastExits({ searchData, data }) { if (totalNumberOfPages === 0) totalNumberOfPages = 1 return ( -
- - setPage(page + 1)} - onClickBack={()=>setPage(page - 1)} - /> - - - - - {!paginatedData.length && !loading && ( -
Scanning for pending fast exits...
- )} - {!paginatedData.length && loading && ( -
Loading pending fast exits...
- )} - {paginatedData.map((i, index) => { - return ( - - ) - })} - - - - -
+ + setPage(page + 1)} + onClickBack={() => setPage(page - 1)} + /> + + + + + {!paginatedData.length && !loading && ( + + + No Pending fast exits. + + )} + {!paginatedData.length && loading && ( + + + Loading pending fast exits... + + )} + {paginatedData.map((i, index) => { + return ( + + ) + })} + + + + ); } diff --git a/packages/boba/gateway/src/containers/bobaScope/Sevens.js b/packages/boba/gateway/src/containers/bobaScope/Sevens.js index 0a823b2bc5..b60b50d675 100644 --- a/packages/boba/gateway/src/containers/bobaScope/Sevens.js +++ b/packages/boba/gateway/src/containers/bobaScope/Sevens.js @@ -21,11 +21,12 @@ import {formatDate} from 'util/dates' import { selectLoading } from 'selectors' import { Pager } from 'components' import Seven from 'components/seven/Seven' +import { Svg } from 'components/global/svg' +import noHistoryIcon from 'assets/images/noHistory.svg' +import { HistoryContainer, Content, Disclaimer } from './styles' +import { Typography } from 'components/global' -import styles from './Transactions.module.scss' -import { HistoryContainer, Content } from './styles' - -const PER_PAGE = 10 +const PER_PAGE = 6 function Sevens({ searchData, sevens }) { @@ -49,7 +50,6 @@ function Sevens({ searchData, sevens }) { if (totalNumberOfPages === 0) totalNumberOfPages = 1 return ( -
- {!paginatedSevens.length && !loading && ( -
Scanning for pending 7 day exits...
- )} + {!paginatedSevens.length && !loading && ( + + + No Pending 7 day exits. + + )} {!paginatedSevens.length && loading && ( -
Loading pending 7 day exits...
+ + + Loading pending 7 day exits... + )} {paginatedSevens.map((i, index) => { return ( @@ -84,7 +90,6 @@ function Sevens({ searchData, sevens }) { -
); } diff --git a/packages/boba/gateway/src/containers/bobaScope/Transactions.module.scss b/packages/boba/gateway/src/containers/bobaScope/Transactions.module.scss deleted file mode 100644 index 2091ac878b..0000000000 --- a/packages/boba/gateway/src/containers/bobaScope/Transactions.module.scss +++ /dev/null @@ -1,154 +0,0 @@ -@import 'index.scss'; - -.container { - display: flex; - flex-direction: column; - padding: 10px; - padding-top: 0px; - background: $background; //white; -} - -.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 { - background: rgba(9, 22, 43, 0.5); - box-shadow: -13px 15px 19px rgba(0, 0, 0, 0.15), - inset 53px 36px 120px rgba(255, 255, 255, 0.06); - border-radius: 8px; - width: 130px; - margin: 0px 15px; - position: relative; - @include mobile { - width: 100%; - margin: 0px; - } - - &:hover { - outline: #fff auto 1px; - } - - &::after { - content: ''; - width: 0; - height: 0; - border-left: 7px solid transparent; - border-right: 7px solid transparent; - border-top: 7px solid $white700; - position: absolute; - right: 10px; - font-size: 25px; - bottom: 15px; - } - - input { - background-color: transparent; - height: 40px; - width: 130px; - padding: 0px 15px; - line-height: 40px; - border: 0; - color: #f0a000; - font-size: 16px; - text-align: left; - @include mobile { - width: 100%; - } - } -} - -.popperStyle { - z-index: 3; -} diff --git a/packages/boba/gateway/src/containers/bobaScope/styles.ts b/packages/boba/gateway/src/containers/bobaScope/styles.ts index 3254df52cd..af01160bac 100644 --- a/packages/boba/gateway/src/containers/bobaScope/styles.ts +++ b/packages/boba/gateway/src/containers/bobaScope/styles.ts @@ -1,6 +1,4 @@ import styled, { css } from 'styled-components' -import { mobile, screen, sdesktop } from 'themes/screens' -import { Svg, Typography } from 'components/global' export const HistoryContainer = styled.div` border-radius: 8px; @@ -37,3 +35,40 @@ export const Content = styled.div` margin-bottom: 10px; border-radius: 6px; ` + +export const Disclaimer = styled.div` + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin-left: auto; + margin-right: auto; + padding: 20px; + padding-top: 10%; + 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]}; + `} + } +` diff --git a/packages/boba/gateway/src/containers/bridge/Bridge.js b/packages/boba/gateway/src/containers/bridge/Bridge.js deleted file mode 100644 index f1204267b9..0000000000 --- a/packages/boba/gateway/src/containers/bridge/Bridge.js +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react' -import BobaBridge from './bobaBridge/bobaBridge' -import * as S from './Bridge.styles' - -function BridgeContainer() { - return ( - - - - - - - - ) -} - -export default React.memo(BridgeContainer); diff --git a/packages/boba/gateway/src/containers/bridge/Bridge.styles.js b/packages/boba/gateway/src/containers/bridge/Bridge.styles.js deleted file mode 100644 index 4408e3c0b0..0000000000 --- a/packages/boba/gateway/src/containers/bridge/Bridge.styles.js +++ /dev/null @@ -1,123 +0,0 @@ -import styled from '@emotion/styled' -import {Box, Typography} from "@mui/material" -import bobaGlassIcon from 'assets/images/boba2/boba_glass.svg' -export const PageContainer = styled(Box)(({ theme }) => ({ - margin: '20px auto', - marginBottom: theme.palette.spacing.toFooter, - display: 'flex', - flexDirection: 'column', - justifyContent: 'space-around', - padding: '10px', - 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 ContentWrapper = styled(Box)(({ theme }) => ({ - display: 'flex', - justifyContent: 'space-between', - width: '100%', - alignItems: 'flex-start', - gap: '20px', - [ theme.breakpoints.down('sm') ]: { - flexDirection: 'column', - justifyContent: 'flex-start', - alignItems: 'center' - } -})) - -export const TitleContainer = styled(Box)(({ theme }) => ({ - width: '50%', - textTransform: 'uppercase', - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - padding: '50px', - position: 'relative', - minHeight: 'auto', - [ theme.breakpoints.down('sm') ]: { - padding: '0', - width: '100%', - minHeight: 'auto', - '::after': { - display: 'none' - }, - '::before': { - display: 'none' - } - }, - // '::before': { - // content: '" "', - // position: 'absolute', - // top: '20%', - // right: '30%', - // width: '80px', - // height: '80px', - // background: `url(${bobaGlassIcon}) no-repeat`, - // backgroundSize: '100% 90%', - // }, -})) - -export const BobaGlassIcon = styled(Box)(({ theme }) => ({ - content: '" "', - position: 'absolute', - top: '15%', - right: '35%', - width: '80px', - height: '80px', - background: `url(${bobaGlassIcon}) no-repeat`, - backgroundSize: '100% 90%', - [theme.breakpoints.down(1700)]: { - top: '20%', - right: '40%', - width: '70px', - height: '70px', - }, - [theme.breakpoints.down(1400)]: { - top: '20%', - right: '20%', - width: '70px', - height: '70px', - }, - [theme.breakpoints.down(900)]: { - display: 'none', - }, -})) - - -export const Content = styled(Box)(({ theme }) => ({ - zIndex: -1, - display: 'flex', - flexDirection: 'column', - justifyContent: 'flex-start', - alignItems: 'center', - gap: '10px', - width: '60%', - padding: '30px 20px', - flex: 1, - [ theme.breakpoints.down('sm') ]: { - padding: '0', - width: '100%' - } -})) - -export const BridgeTypography = styled(Typography)(({ theme }) => ({ - fontSize: '57px !important', - [theme.breakpoints.down(1700)]: { - fontSize: '40px !important', - }, - [theme.breakpoints.down(1000)]: { - fontSize: '30px !important', - }, -})) diff --git a/packages/boba/gateway/src/containers/bridge/bobaBridge/bobaBridge.js b/packages/boba/gateway/src/containers/bridge/bobaBridge/bobaBridge.js deleted file mode 100644 index 15a981f68d..0000000000 --- a/packages/boba/gateway/src/containers/bridge/bobaBridge/bobaBridge.js +++ /dev/null @@ -1,231 +0,0 @@ -/* - Utility Functions for OMG Plasma - Copyright (C) 2021 Enya Inc. Palo Alto, CA - - This program is free software: you can redistribute it and/or modify - it under the terms of the GNU General Public License as published by - the Free Software Foundation, either version 3 of the License, or - (at your option) any later version. - - This program is distributed in the hope that it will be useful, - but WITHOUT ANY WARRANTY; without even the implied warranty of - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - GNU General Public License for more details. - - You should have received a copy of the GNU General Public License - along with this program. If not, see . -*/ - -import React, { useEffect, useState } from 'react' -import { useDispatch, useSelector } from 'react-redux' -import { useNavigate } from 'react-router-dom' - -import { Box, Typography, Switch, useTheme } from '@mui/material' - -import Button from 'components/button/Button.js' - -import * as S from './bobaBridge.styles' - -import BridgeTransfer from './bridgeTransfer/bridgeTransfer' - -import { - selectAccountEnabled, - selectLayer, - selectWalletAddress, - selectBridgeTokens, - selectMultiBridgeMode, - selectActiveNetworkIcon, -} from 'selectors' - - -import { resetToken, setMultiBridgeMode } from 'actions/bridgeAction' -import { setConnectETH, setConnectBOBA } from 'actions/setupAction' - - -import { LAYER } from 'util/constant' -import { AvailableBridges } from 'components' -import { ChainLabel } from 'components/bridge/ChainLabel' - -const BobaBridge = () => { - const layer = useSelector(selectLayer()) - const accountEnabled = useSelector(selectAccountEnabled()) - const multibridgeMode = useSelector(selectMultiBridgeMode()) - const tokens = useSelector(selectBridgeTokens()) - const userWallet = useSelector(selectWalletAddress()) - - - - const dispatch = useDispatch() - const [toL2, setToL2] = useState(true) - const theme = useTheme() - const iconColor = theme.palette.mode === 'dark' ? '#fff' : '#000' - - const isL1 = layer === LAYER.L1; - const navigate = useNavigate() - - - useEffect(() => { - setToL2(isL1); - }, [isL1]); - - const switchDirection = async () => { - if (accountEnabled) { - if (isL1) dispatch(setConnectBOBA(true)) - else dispatch(setConnectETH(true)) - } else { - setToL2(!toL2) - } - } - - const handelConnect = async () => { - await dispatch(toL2 ? setConnectETH(true) : setConnectBOBA(true)) - } - - const handleMultiBridge = async () => { - await dispatch(multibridgeMode ? resetToken() : setMultiBridgeMode(!multibridgeMode)) - } - - - - const ChainSwitchIcon = () => { - return { - switchDirection() - }} - > - - - - - } - - const Bridge = () => { - - return ( - <> - - - - From - - - - - - - - - - - To - - - - - - - {!accountEnabled && - - - - } - - ) - } - - if (!accountEnabled) { - return ( - - - - Bridge - - Select the bridge direction - - - - - ) - } - - return ( - <> - - - - - {isL1 && !multibridgeMode && tokens.length < 1 && ( - - - Bridge multiple tokens at once? - - handleMultiBridge } - /> - - )} - - - - - {tokens.length === 1 && } - - { - navigate('/history') - }} - > - - {'Transaction History >'} - - - - ) -} - -export default React.memo(BobaBridge) diff --git a/packages/boba/gateway/src/containers/bridge/bobaBridge/bobaBridge.styles.js b/packages/boba/gateway/src/containers/bridge/bobaBridge/bobaBridge.styles.js deleted file mode 100644 index c81e2aaa8a..0000000000 --- a/packages/boba/gateway/src/containers/bridge/bobaBridge/bobaBridge.styles.js +++ /dev/null @@ -1,148 +0,0 @@ -import styled from '@emotion/styled' -import { - Box, - Button, - Divider as MuiDivider, - IconButton, - Typography, -} from '@mui/material' - -export const BobaBridgeWrapper = styled(Box)(({ theme, width }) => ({ - background: theme.palette.background.glassy, - backdropFilter: 'blur(50px)', - borderRadius: '20px', - filter: 'drop-shadow(0px 4px 20px rgba(35, 92, 41, 0.06))', - flex: 1, - minHeight: 'fit-content', - padding: '24px', - width: '100%', - maxWidth: '600px', -})) - -export const BobaContent = styled(Box)(({ theme }) => ({ - display: 'flex', - alignItems: 'center', - flexDirection: 'column', - justifyContent: 'space-between', - gap: '10px', -})) - -export const BridgeConnectButton = styled(Box)(({theme})=> ({ - alignSelf: 'flex-start', - [ theme.breakpoints.down('md') ]: { - alignSelf: 'stretch', - 'button': { - width: '100%' - } - } -})); - -export const BobaContentWrapper = styled(Box, { - shouldForwardProp: (props) => props !== 'fullWidth', -})(({ theme, flexDirection }) => ({ - display: 'flex', - justifyContent: 'space-between', - flexDirection: flexDirection || 'column', - flexGrow: 1, -})) - -export const BobaDivider = styled(MuiDivider)(({ theme }) => ({ - background: theme.palette.background.secondary, - boxSizing: 'border-box', - width: '100%', - margin: '16px 0 16px 0', -})) - -export const ChainInput = styled(Box)(({ theme }) => ({ - background: theme.palette.background.input, - border: theme.palette.secondary.border, - boxSizing: 'border-box', - borderRadius: theme.palette.primary.borderRadius, - height: '50px', - padding: '5px 10px', - display: 'flex', - justifyContent: 'space-between', - alignItems: 'center', - gap: '10px', - width: '100%', - minWidth: '180px', - [theme.breakpoints.down('sm')]: { - justifyContent: 'flex-start', - gap: '5px', - padding: '5px 10px', - minWidth: '120px', - }, -})) - -export const ChainLabel = styled(Typography)(({ theme }) => ({ - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - gap: '10px', - [theme.breakpoints.down('sm')]: { - fontSize: '14px', - }, -})) - -export const ChainSwitcherIcon = styled(Button)(({ theme }) => ({ - margin: '20px 0px', - width: 'fit-content', - alignSelf: 'center', -})) - -export const HistoryLink = styled(Box)(({ theme, width }) => ({ - background: theme.palette.background.glassy, - backdropFilter: 'blur(50px)', - filter: 'drop-shadow(0px 4px 20px rgba(35, 92, 41, 0.06))', - border: 'none', - borderRadius: theme.palette.primary.borderRadius, - width: '100%', - maxWidth: '600px', - padding: '20px', - '&:hover > span': { - color: theme.palette.secondary.main, - }, -})) - -export const LayerAlert = styled(Box)(({ theme }) => ({ - width: '100%', - display: 'flex', - flexDirection: 'column', - justifyContent: 'space-between', - alignItems: 'center', - gap: '30px', - borderRadius: theme.palette.primary.borderRadius, - margin: '20px 0px', - padding: '25px', - [theme.breakpoints.up('md')]: { - padding: '25px 50px', - }, -})) - -export const AlertText = styled(Typography)(({ theme }) => ({ - marginLeft: '10px', - flex: 4, - [theme.breakpoints.up('md')]: {}, -})) - -export const AlertInfo = styled(Box)` - display: flex; - justify-content: space-around; - align-items: center; - flex: 1; -` - -export const IconSwitcher = styled(IconButton)(({ theme }) => ({ - background: theme.palette.background.input, - borderRadius: theme.palette.primary.borderRadius, - height: '40px', - width: '40px', - display: 'flex', - alignSelf: 'center', - justifyContent: 'center', - alignItems: 'center', -})) - -export const ChainDirectionLabel = styled(Typography)(({ theme }) => ({ - color: theme.palette.primary.tooltip, -})) diff --git a/packages/boba/gateway/src/containers/bridge/bobaBridge/bridgeTransfer/bridgeTransfer.js b/packages/boba/gateway/src/containers/bridge/bobaBridge/bridgeTransfer/bridgeTransfer.js deleted file mode 100644 index c5b4de7cc3..0000000000 --- a/packages/boba/gateway/src/containers/bridge/bobaBridge/bridgeTransfer/bridgeTransfer.js +++ /dev/null @@ -1,124 +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 { ArrowDropDown } from '@mui/icons-material' -import { Box, Typography } from '@mui/material' -import { resetToken } from 'actions/bridgeAction' -import { openModal } from 'actions/uiAction' - -import React, { useCallback, useEffect } from 'react' -import { useDispatch, useSelector } from 'react-redux' -import { - selectBridgeTokens, - selectMultiBridgeMode, - selectAccountEnabled, - selectLayer, - selectTokens -} from 'selectors' - - -import * as S from './bridgeTransfer.styles' - -import DoExitStep from 'containers/modals/exit/steps/DoExitStep' -import InputStep from 'containers/modals/deposit/steps/InputStep' -import InputStepBatch from 'containers/modals/deposit/steps/InputStepBatch' -import { fetchLookUpPrice } from 'actions/networkAction' -import { LAYER } from 'util/constant' - -function BridgeTransfer() { - - const accountEnabled = useSelector(selectAccountEnabled()) - - const layer = useSelector(selectLayer()) - const multibridgeMode = useSelector(selectMultiBridgeMode()) - const tokenList = useSelector(selectTokens) - const tokens = useSelector(selectBridgeTokens()) - - const dispatch = useDispatch() - - const onReset = () => { - dispatch(resetToken()) - } - - const openTokenPicker = (index = 0) => { - dispatch(openModal('tokenPicker', null, null, index)) - } - - const getLookupPrice = useCallback(() => { - if (!accountEnabled) return - // only run once all the tokens have been added to the tokenList - if (Object.keys(tokenList).length < 27) return - const symbolList = Object.values(tokenList).map((i) => { - if (i.symbolL1 === 'ETH') { - return 'ethereum' - } else if (i.symbolL1 === 'OMG') { - return 'omg' - } else if(i.symbolL1 === 'BOBA') { - return 'boba-network' - } else if(i.symbolL1 === 'OLO') { - return 'oolongswap' - } else { - return i.symbolL1.toLowerCase() - } - }) - dispatch(fetchLookUpPrice(symbolList)) - }, [ tokenList, dispatch, accountEnabled ]) - - useEffect(() => { - if (!accountEnabled) return - getLookupPrice() - }, [ getLookupPrice, accountEnabled ]) - - return ( - - - {!tokens.length && !multibridgeMode && - { openTokenPicker(0) }} - > - Select Token - - - } - - {tokens.length > 0 && !multibridgeMode && - - - {'Boba Classic Bridge'} - - - } - - {tokens.length > 0 && !multibridgeMode && <> - {layer === LAYER.L1 && - - } - {layer === LAYER.L2 && - - } - - } - - {multibridgeMode ? : null} - - - ) -} - -export default React.memo(BridgeTransfer) diff --git a/packages/boba/gateway/src/containers/bridge/bobaBridge/bridgeTransfer/bridgeTransfer.styles.js b/packages/boba/gateway/src/containers/bridge/bobaBridge/bridgeTransfer/bridgeTransfer.styles.js deleted file mode 100644 index afbde5c13c..0000000000 --- a/packages/boba/gateway/src/containers/bridge/bobaBridge/bridgeTransfer/bridgeTransfer.styles.js +++ /dev/null @@ -1,24 +0,0 @@ -import { styled, Box } from "@mui/material" - -export const BridgeTransferContainer = styled(Box)(({ theme }) => ({ - display: 'flex', - flexDirection: 'column', - gap: '10px', -})); - -export const TokenPicker = styled(Box)(({ theme }) => ({ - background: theme.palette.background.glassy, - border: theme.palette.primary.border, - borderRadius: theme.palette.primary.borderRadius, - height: '50px', - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - gap: '2px', - padding: '5px 10px', - width: '100%', - cursor: 'pointer', - 'img': { - marginRight: '5px' - }, -})); diff --git a/packages/boba/gateway/src/containers/bridge/bobaBridge/bridgeTransfer/tokenInput/TokenInput.js b/packages/boba/gateway/src/containers/bridge/bobaBridge/bridgeTransfer/tokenInput/TokenInput.js deleted file mode 100644 index a1487c8b52..0000000000 --- a/packages/boba/gateway/src/containers/bridge/bobaBridge/bridgeTransfer/tokenInput/TokenInput.js +++ /dev/null @@ -1,63 +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 { ArrowDropDown } from '@mui/icons-material' -import { Typography } from '@mui/material' -import { openModal } from 'actions/uiAction' -import React from 'react' -import { useDispatch, useSelector } from 'react-redux' -import { selectMultiBridgeMode } from 'selectors' -import { getCoinImage } from 'util/coinImage' -import * as S from './TokenInput.styles' - -function TokenInput({ - token, - index, -}) { - const multibridgeMode = useSelector(selectMultiBridgeMode()) - const dispatch = useDispatch() - - const openTokenPicker = () => { - dispatch(openModal('tokenPicker', null, null, index)) - } - - return ( - - - { - !token.symbol ? - { openTokenPicker(index) }} - > - Select {multibridgeMode ? 'Tokens' : 'Token'} - - : - { openTokenPicker(index) }} - > - logo {token.symbol} - - - } - - - ) -} - -export default React.memo(TokenInput) diff --git a/packages/boba/gateway/src/containers/bridge/bobaBridge/bridgeTransfer/tokenInput/TokenInput.styles.js b/packages/boba/gateway/src/containers/bridge/bobaBridge/bridgeTransfer/tokenInput/TokenInput.styles.js deleted file mode 100644 index 3c3b9bb574..0000000000 --- a/packages/boba/gateway/src/containers/bridge/bobaBridge/bridgeTransfer/tokenInput/TokenInput.styles.js +++ /dev/null @@ -1,107 +0,0 @@ -import { Box, styled, TextField } from '@mui/material'; - -export const TokenInputWrapper = styled(Box)(({ theme }) => ({ - display: 'flex', - width: '100%', - flexDirection: 'column', - gap: '5px', - justifyContent: 'flex-start' -})) - -export const TokenInputTitle = styled(Box)(({ theme }) => ({ - textAlign: "right", - [ theme.breakpoints.down('sm') ]: { - display: 'flex', - justifyContent: 'space-between', - alignItems: 'center', - } -})) - -export const TokenInputContent = styled(Box)(({ theme }) => ({ - display: 'flex', - justifyContent: 'space-around', - alignItems: 'center', - gap: '5px', - [ theme.breakpoints.down('sm') ] : { - gap: 0 - } -})); - -export const TokenPicker = styled(Box)(({ theme }) => ({ - background: theme.palette.background.secondary, - border: theme.palette.primary.border, - borderRadius: theme.palette.primary.borderRadius, - height: '50px', - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - gap: '2px', - padding: '5px 10px', - width: '30%', - cursor: 'pointer', - 'img': { - marginRight: '5px' - }, - [ theme.breakpoints.down('sm') ] : { - borderRadius: '12px 0 0 12px', - width: '40%', - } -})); - -// export const TextFieldWrapper = styled(Box)(({ theme ,error}) => ({ -// background: theme.palette.background.secondary, -// border: `1px solid ${error ? 'red' : 'rgba(255, 255, 255, 0.06)'}`, -// borderRadius: theme.palette.primary.borderRadius, -// height: '50px', -// width: '70%', -// display: 'flex', -// justifyContent: 'flex-start', -// alignItems: 'center', -// [ theme.breakpoints.down('sm') ] : { -// borderRadius: '0 12px 12px 0' -// } -// })) - -export const TextFieldTag = styled(TextField)(({ ...props }) => ({ - border: 'none', - padding: '0 10px', - height: '100%', - "input::-webkit-outer-spin-button, input::-webkit-inner-spin-button": { - "WebkitAppearance": "none", - "margin": 0, - }, - "input[type=number]": { - "MozAppearance": "textfield", - height: '40px', - }, - '& .MuiInputBase-input': { - fontSize: '0.9em', - }, - '& .MuiInputBase-root': { - '&:before': { - border: 'none !important' - }, - '&:hover': { - border: 'none !important' - }, - '&:after': { - border: 'none !important' - } - }, - '&:hover': { - borderRadius: 4, - backgroundColor: props.theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.05)' : 'rgba(255,255,255,0.05)', - } -})) - -export const TokenPickerAction = styled(Box)(({ theme }) => ({ - display: 'flex', - width: '20%', - 'button': { - '&:hover': { - 'svg': { - color: theme.palette.secondary.main - } - } - } -})); diff --git a/packages/boba/gateway/src/containers/history/History.tsx b/packages/boba/gateway/src/containers/history/History.tsx index 5616b17acc..e0e5efc7c0 100644 --- a/packages/boba/gateway/src/containers/history/History.tsx +++ b/packages/boba/gateway/src/containers/history/History.tsx @@ -249,17 +249,13 @@ const History = () => { )} {!transactionsFound && ( - +
No Transactions Found.
 )} {!layer && ( - +
No History.