diff --git a/packages/boba/gateway/src/components/global/background/index.stories.tsx b/packages/boba/gateway/src/components/global/background/index.stories.tsx new file mode 100644 index 0000000000..245e7f891e --- /dev/null +++ b/packages/boba/gateway/src/components/global/background/index.stories.tsx @@ -0,0 +1,15 @@ +import React from 'react' +import { BrowserRouter } from 'react-router-dom' + +import { Meta, StoryFn } from '@storybook/react' + +import { Background } from '.' + +export default { + title: 'Components/Background', + component: Background, +} as Meta + +const Template: StoryFn = (args: any) => + +export const Default = Template.bind({}) diff --git a/packages/boba/gateway/src/components/global/background/index.tsx b/packages/boba/gateway/src/components/global/background/index.tsx new file mode 100644 index 0000000000..37538321a2 --- /dev/null +++ b/packages/boba/gateway/src/components/global/background/index.tsx @@ -0,0 +1,27 @@ +import React from 'react' +import { useLocation } from 'react-router-dom' +import { BackgroundPosition, RoutesWithBackgroundPositionAtTop } from './types' +import { + BackgroundContainer, + GridBackground, + GridFade, + GridLines, +} from './styles' + +export const Background = () => { + const location = useLocation() + const currentPath = location.pathname + const isPositionTop: BackgroundPosition = + RoutesWithBackgroundPositionAtTop.includes(currentPath) + ? BackgroundPosition.TOP + : BackgroundPosition.CENTER + + return ( + + + + + + + ) +} diff --git a/packages/boba/gateway/src/components/global/background/styles.ts b/packages/boba/gateway/src/components/global/background/styles.ts new file mode 100644 index 0000000000..a3393ec17a --- /dev/null +++ b/packages/boba/gateway/src/components/global/background/styles.ts @@ -0,0 +1,83 @@ +import styled, { keyframes } from 'styled-components' +import { BackgroundProps } from './types' +const gridHeight = '200vh' + +const linesColor = (theme: string) => { + if (theme === 'light') { + return 'rgba(0, 0, 0, 0.025)' + } else { + return 'rgba(255, 255, 255, 0.025)' + } +} + +const gradientColor = (theme: string) => { + if (theme === 'light') { + return 'radial-gradient(45% 45% at 50% 50%, rgba(174, 219, 1, 0.4) 19.79%, rgba(174, 219, 1, 0.125) 50%, rgba(174, 219, 1, 0) 70%);' + } else { + return 'radial-gradient(45% 45% at 50% 50%, rgba(174, 219, 1, 0.32) 19.79%, rgba(174, 219, 1, 0.1) 50%, rgba(174, 219, 1, 0) 70%);' + } +} + +export const BackgroundContainer = styled.div` + height: 100vh; + width: 100%; + display: block; + overflow: hidden; + position: fixed; + z-index: 0; +` + +export const GridBackground = styled.div` + width: 100%; + height: ${gridHeight}; + overflow: hidden; + perspective: calc(${gridHeight} * 90); +` + +export const GridFade = styled.div` + width: 100%; + height: 100%; + position: absolute; + z-index: 1; + transform: translateY(-50vh); + will-change: translateY; + transition: transform 1s ease; + background-image: ${(props) => gradientColor(props.theme.name)}; + background-clip: padding-box; + background-origin: content-box; + + ${({ position }) => + position === 'top' && + ` + transform: translateY(-100vh); + `} +` + +const playAnimation = keyframes` + 0% { + transform: rotateX(45deg) translateY(-50%); + } + 100% { + transform: rotateX(45deg) translateY(0%); + } +` + +export const GridLines = styled.div` + width: 100%; + height: 200%; + background-image: linear-gradient( + to right, + ${(props) => linesColor(props.theme.name)} 1px, + transparent 0 + ), + linear-gradient( + to bottom, + ${(props) => linesColor(props.theme.name)} 1px, + transparent 0 + ); + background-size: 45px 30px; + background-repeat: repeat; + transform-origin: 100% 0 0; + will-change: transform; + animation: ${playAnimation} 15s linear infinite; +` diff --git a/packages/boba/gateway/src/components/global/background/types.ts b/packages/boba/gateway/src/components/global/background/types.ts new file mode 100644 index 0000000000..aee321e484 --- /dev/null +++ b/packages/boba/gateway/src/components/global/background/types.ts @@ -0,0 +1,10 @@ +export enum BackgroundPosition { + TOP = 'top', + CENTER = 'center', +} + +export interface BackgroundProps { + position: BackgroundPosition +} + +export const RoutesWithBackgroundPositionAtTop = ['/bridge', '/'] diff --git a/packages/boba/gateway/src/components/global/table/index.js b/packages/boba/gateway/src/components/global/table/index.tsx similarity index 56% rename from packages/boba/gateway/src/components/global/table/index.js rename to packages/boba/gateway/src/components/global/table/index.tsx index 19bde052e7..2954dba53c 100644 --- a/packages/boba/gateway/src/components/global/table/index.js +++ b/packages/boba/gateway/src/components/global/table/index.tsx @@ -4,27 +4,7 @@ import { Row } from 'components/global/containers' import { Text } from 'components/global/text' import Tooltip from 'components/tooltip/Tooltip' import { HelpOutline } from '@mui/icons-material' -import { useMediaQuery } from '@mui/material' -import { useTheme } from '@mui/material/styles' -import styled from '@emotion/styled' - -const TableHeaderContainer = styled(Row)(({ theme }) => ({ - padding: '20px', - borderTopLeftRadius: '6px', - borderTopRightRadius: '6px', - display: 'flex', - alignItems: 'center', - justifyContent: 'space-between', - // @ts-ignore - background: theme.palette.background.secondary, - [theme.breakpoints.down('md')]: { - marginBottom: '5px', - }, -})); - -const TableContentContainer = styled(Row)` - justify-content: space-between; -` +import styled from 'styled-components' const TableRow = styled(Row)` &:not(:first-of-type) { @@ -34,17 +14,34 @@ const TableRow = styled(Row)` margin-right: 0px; } ` -// type TableHeaderOptionType = { -// name: string -// tooltip: string -// width: number -// } -// type TableHeaderType = { -// options: TableHeaderOptionType[] -// } +const TableHeaderContainer = styled(Row)` + padding: 20px; + display: flex; + align-items: center; + justify-content: space-between; + border-radius: 6px 6px 0 0; + background: ${(props) => props.theme.colors.gray[800]}; + @media (max-width: 960px) { + margin-bottom: 5px; + } +` + +const TableContentContainer = styled(Row)` + justify-content: space-between; +` + +type TableHeaderOptionType = { + name: string + tooltip: string + width: number +} -export const TableHeader = ({ options }) => { +type TableHeaderType = { + options: TableHeaderOptionType[] +} + +export const TableHeader = ({ options }: TableHeaderType) => { return ( {options?.map((option) => { @@ -66,19 +63,18 @@ export const TableHeader = ({ options }) => { ) } -// type TableContentOptionType = { -// content: any -// width: number -// } +type TableContentOptionType = { + content: any + width: number +} -// type TableContentType = { -// options: TableContentOptionType[] -// mobileOptions?: number[] -// } +type TableContentType = { + options: TableContentOptionType[] + mobileOptions?: number[] +} -export const TableContent = ({ options, mobileOptions }) => { - const theme = useTheme(); - const isMobile = useMediaQuery(theme.breakpoints.down('md')) +export const TableContent = ({ options, mobileOptions }: TableContentType) => { + const isMobile = false const currentOptions = isMobile && mobileOptions ? mobileOptions.map((i) => options[i]) : options return ( diff --git a/packages/boba/gateway/src/components/layout/Header/__snapshots__/index.test.tsx.snap b/packages/boba/gateway/src/components/layout/Header/__snapshots__/index.test.tsx.snap index 53c4acb02f..33d2dc6f07 100644 --- a/packages/boba/gateway/src/components/layout/Header/__snapshots__/index.test.tsx.snap +++ b/packages/boba/gateway/src/components/layout/Header/__snapshots__/index.test.tsx.snap @@ -234,7 +234,8 @@ exports[`Layout => Header should match the snapshot 1`] = ` .c0 { height: 73px; - margin: 0px 32px; + margin: 0px; + padding: 0px 32px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -247,6 +248,9 @@ exports[`Layout => Header should match the snapshot 1`] = ` -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; + -webkit-backdrop-filter: blur(7.5px); + backdrop-filter: blur(7.5px); + background: rgba(0,0,0,0.05); } .c1 { diff --git a/packages/boba/gateway/src/components/layout/Header/style.ts b/packages/boba/gateway/src/components/layout/Header/style.ts index 911b742c16..ed295e598d 100644 --- a/packages/boba/gateway/src/components/layout/Header/style.ts +++ b/packages/boba/gateway/src/components/layout/Header/style.ts @@ -1,13 +1,25 @@ -import styled from 'styled-components' +import styled, { css } from 'styled-components' import BobaLogoImage from 'assets/images/boba-logo.png' import { Svg } from 'components/global' export const HeaderContainer = styled.div` height: 73px; - margin: 0px 32px; + margin: 0px; + padding: 0px 32px; display: flex; align-items: center; justify-content: flex-start; + backdrop-filter: blur(7.5px); + ${(props) => + props.theme.name === 'light' && + css` + background: rgba(255, 255, 255, 0.5); + `} + ${(props) => + props.theme.name === 'dark' && + css` + background: rgba(0, 0, 0, 0.05); + `} ` export const BobaLogo = styled.div` diff --git a/packages/boba/gateway/src/components/layout/PageTitle/__snapshots__/index.test.tsx.snap b/packages/boba/gateway/src/components/layout/PageTitle/__snapshots__/index.test.tsx.snap new file mode 100644 index 0000000000..0de74dbd40 --- /dev/null +++ b/packages/boba/gateway/src/components/layout/PageTitle/__snapshots__/index.test.tsx.snap @@ -0,0 +1,44 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`PageTitle should match snapshots head 1`] = ` + + .c1 { + font-style: normal; + font-weight: 700; + font-size: 36px; + line-height: 44px; + font-weight: 700; +} + +.c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + padding: 50px 15px; + gap: 15px 0px; +} + +.c2 { + color: #fff; +} + +
+

+ Page Title +

+ This is the current slug +
+ +`; diff --git a/packages/boba/gateway/src/components/layout/PageTitle/constants.tsx b/packages/boba/gateway/src/components/layout/PageTitle/constants.tsx new file mode 100644 index 0000000000..f1b27d9f32 --- /dev/null +++ b/packages/boba/gateway/src/components/layout/PageTitle/constants.tsx @@ -0,0 +1,33 @@ +import { ROUTES_PATH } from 'util/constant' +export const pageTitleWhiteList = [ + { + title: 'History', + slug: 'Look back on past transactions', + path: ROUTES_PATH.HISTORY, + }, + { + title: 'Earn', + slug: 'Participate in voting on proposals concerning the future of Boba Network', + path: ROUTES_PATH.EARN, + }, + { + title: 'Stake', + slug: 'Stake BOBA and earn rewards.', + path: ROUTES_PATH.STAKE, + }, + { + title: 'DAO', + slug: 'Participate in voting on proposals concerning the future of Boba Network', + path: ROUTES_PATH.DAO, + }, + { + title: 'Dev Tools', + slug: '', + path: ROUTES_PATH.DEV_TOOLS, + }, + { + title: 'Boba Scope', + slug: '', + path: ROUTES_PATH.BOBASCOPE, + }, +] diff --git a/packages/boba/gateway/src/components/layout/PageTitle/index.stories.tsx b/packages/boba/gateway/src/components/layout/PageTitle/index.stories.tsx new file mode 100644 index 0000000000..3bca948e48 --- /dev/null +++ b/packages/boba/gateway/src/components/layout/PageTitle/index.stories.tsx @@ -0,0 +1,31 @@ +import React from 'react' +import { Meta, StoryFn } from '@storybook/react' + +import { PageTitle } from '.' +import { PageTitleTypes } from './types' +import { BrowserRouter } from 'react-router-dom' + +export default { + title: 'Layout/PageTitle', + component: PageTitle, + decorators: [ + (StoryFn) => ( + + + + ), + ], +} as Meta + +const Template: StoryFn = (args: any) => + +export const Default = Template.bind({}) +Default.args = { + title: 'History', + slug: 'Look back on past transactions', +} + +export const WithoutSlug = Template.bind({}) +WithoutSlug.args = { + title: 'Title only', +} diff --git a/packages/boba/gateway/src/components/layout/PageTitle/index.test.tsx b/packages/boba/gateway/src/components/layout/PageTitle/index.test.tsx new file mode 100644 index 0000000000..9f1761bc80 --- /dev/null +++ b/packages/boba/gateway/src/components/layout/PageTitle/index.test.tsx @@ -0,0 +1,41 @@ +import React from 'react' +import { BrowserRouter } from 'react-router-dom' +import { Provider } from 'react-redux' +import configureStore from 'redux-mock-store' + +import { render } from '@testing-library/react' + +import CustomThemeProvider from 'themes' +import { PageTitleTypes } from './types' + +import { PageTitle } from '.' + +const mockStore = configureStore() + +const renderTypography = (props: PageTitleTypes) => { + return render( + + + + Text goes here + + + + ) +} + +describe('PageTitle', () => { + test('should match snapshots head', () => { + const { asFragment } = renderTypography({ + title: 'Page Title', + slug: 'This is the current slug', + }) + expect(asFragment()).toMatchSnapshot() + }) +}) diff --git a/packages/boba/gateway/src/components/layout/PageTitle/index.tsx b/packages/boba/gateway/src/components/layout/PageTitle/index.tsx new file mode 100644 index 0000000000..83e068f584 --- /dev/null +++ b/packages/boba/gateway/src/components/layout/PageTitle/index.tsx @@ -0,0 +1,25 @@ +import React, { FC } from 'react' +import { useLocation } from 'react-router-dom' + +import { pageTitleWhiteList } from './constants' +import { PageTitleTypes } from './types' +import { PageTitleContainer, Title, Slug } from './styles' + +export const PageTitle: FC = ({ title, slug }) => { + const location = useLocation() + const currentPath = location.pathname + + const { title: pageTitle = '', slug: pageSlug = '' } = + pageTitleWhiteList.find((page) => page.path === currentPath) || {} + + if (!title && !pageTitle) { + return <> + } + + return ( + + {pageTitle || title} + {slug || (pageSlug && {pageSlug || slug})} + + ) +} diff --git a/packages/boba/gateway/src/components/layout/PageTitle/styles.ts b/packages/boba/gateway/src/components/layout/PageTitle/styles.ts new file mode 100644 index 0000000000..cedf0124e8 --- /dev/null +++ b/packages/boba/gateway/src/components/layout/PageTitle/styles.ts @@ -0,0 +1,38 @@ +import styled, { css } from 'styled-components' + +import { Heading } from 'components/global/heading' +import { Typography } from 'components/global/typography' + +export const PageTitleContainer = styled.div` + display: flex; + align-items: center; + flex-direction: column; + padding: 50px 15px; + gap: 15px 0px; +` + +export const Title = styled(Heading)` + ${(props) => + props.theme.name === 'light' && + css` + color: ${props.theme.colors.gray[800]}; + `} + ${(props) => + props.theme.name === 'dark' && + css` + color: #fff; + `} +` + +export const Slug = styled(Typography)` + ${(props) => + props.theme.name === 'light' && + css` + color: ${props.theme.colors.gray[700]}; + `} + ${(props) => + props.theme.name === 'dark' && + css` + color: #acacac; + `} +` diff --git a/packages/boba/gateway/src/components/layout/PageTitle/types.ts b/packages/boba/gateway/src/components/layout/PageTitle/types.ts new file mode 100644 index 0000000000..4179a8751d --- /dev/null +++ b/packages/boba/gateway/src/components/layout/PageTitle/types.ts @@ -0,0 +1,4 @@ +export interface PageTitleTypes { + title: string + slug: string +} diff --git a/packages/boba/gateway/src/containers/bobaScope/BobaScope.js b/packages/boba/gateway/src/containers/bobaScope/BobaScope.js index c3ef1be109..0e3e0e7863 100644 --- a/packages/boba/gateway/src/containers/bobaScope/BobaScope.js +++ b/packages/boba/gateway/src/containers/bobaScope/BobaScope.js @@ -29,7 +29,6 @@ import { selectBaseEnabled, selectActiveDataTab,selectSevens, selectFastExits } import Tabs from 'components/tabs/Tabs' import Input from 'components/input/Input' -import { PageTitle } from 'components' import Sevens from './Sevens' import FastExits from './FastExits' @@ -74,7 +73,6 @@ function BobaScope() { return ( -
- { return ( - - { + const typeOrder: string[] = [ + 'defi', + 'gamefi', + 'nft', + 'bridge', + 'wallet', + 'tool', + 'token', + ] + const projectByType = groupBy(projectList, 'type') + const orderProjects: { [key: string]: Project[] } = {} + typeOrder.forEach((key) => { + orderProjects[key] = projectByType[key] + }) + return orderProjects +} diff --git a/packages/boba/gateway/src/containers/history/History.js b/packages/boba/gateway/src/containers/history/History.js index fc419aea94..c6fe04a0f9 100644 --- a/packages/boba/gateway/src/containers/history/History.js +++ b/packages/boba/gateway/src/containers/history/History.js @@ -22,12 +22,11 @@ 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 { +import { selectActiveHistoryTab, selectTransactions, selectAccountEnabled, @@ -46,7 +45,6 @@ import * as S from './History.styles' import styles from './TX_All.module.scss' import useInterval from 'hooks/useInterval' -import {PageTitle} from 'components' import Connect from 'containers/connect/Connect' import Tabs from 'components/tabs/Tabs' @@ -101,7 +99,6 @@ function History() { return ( - {/* */}
+ - - - + +
` + + html, body, div, span, applet, object, iframe, + h1, h2, h3, h4, h5, h6, p, blockquote, pre, + a, abbr, acronym, address, big, cite, code, + del, dfn, em, img, ins, kbd, q, s, samp, + small, strike, strong, sub, sup, tt, var, + b, u, i, center, + dl, dt, dd, ol, ul, li, + fieldset, form, label, legend, + table, caption, tbody, tfoot, thead, tr, th, td, + article, aside, canvas, details, embed, + figure, figcaption, footer, header, hgroup, + menu, nav, output, ruby, section, summary, + time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; + } + /* HTML5 display-role reset for older browsers */ + article, aside, details, figcaption, figure, + footer, header, hgroup, menu, nav, section { + display: block; + } + body { + line-height: 1; + } + ol, ul { + list-style: none; + } + blockquote, q { + quotes: none; + } + blockquote:before, blockquote:after, + q:before, q:after { + content: ''; + content: none; + } + table { + border-collapse: collapse; + border-spacing: 0; + } + body { font-family: 'Roboto', sans-serif; background: ${({ theme }) => theme.background};