diff --git a/.env.development b/.env.development index 4e536bf..2e0abeb 100644 --- a/.env.development +++ b/.env.development @@ -1,5 +1,5 @@ REACT_APP_DEBUG=true -REACT_APP_API_BASE_URL=https://api.stage.ssv.network/api/v4/prater +REACT_APP_API_BASE_URL=https://api.stage.ssv.network/api/v4/holesky REACT_APP_LINK_SSV_WEBAPP=https://app.stage.ssv.network/ REACT_APP_GOOGLE_TAG_SECRET= REACT_APP_GOOGLE_TAG_URL= diff --git a/public/images/networks/holesky_dark.svg b/public/images/networks/holesky_dark.svg new file mode 100644 index 0000000..82117cb --- /dev/null +++ b/public/images/networks/holesky_dark.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/public/images/networks/holesky_light.svg b/public/images/networks/holesky_light.svg new file mode 100644 index 0000000..dc674a0 --- /dev/null +++ b/public/images/networks/holesky_light.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/public/images/networks/mainnet_dark.svg b/public/images/networks/mainnet_dark.svg new file mode 100644 index 0000000..4b924d4 --- /dev/null +++ b/public/images/networks/mainnet_dark.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/public/images/networks/mainnet_light.svg b/public/images/networks/mainnet_light.svg new file mode 100644 index 0000000..7be232b --- /dev/null +++ b/public/images/networks/mainnet_light.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/src/app/common/components/AppBar/AppBar.styles.ts b/src/app/common/components/AppBar/AppBar.styles.ts index 3731bc1..6e7cd7c 100644 --- a/src/app/common/components/AppBar/AppBar.styles.ts +++ b/src/app/common/components/AppBar/AppBar.styles.ts @@ -132,6 +132,9 @@ export const useStyles = makeStyles((theme) => ({ textDecoration: 'none', }, }, + networkSwitchWrapper: { + paddingRight: 12, + }, drawer: { '& > .MuiDrawer-paper': { backgroundColor: '#A1ABBE', @@ -167,14 +170,4 @@ export const useStyles = makeStyles((theme) => ({ backgroundColor: 'lightgreen', }, }, - PraterButton: { - backgroundColor: theme.colors.tint80, - color: theme.colors.primary, - '&:hover': { - cursor: 'default', - }, - '&:active': { - backgroundColor: theme.colors.tint80, - }, - }, })); diff --git a/src/app/common/components/AppBar/AppBar.tsx b/src/app/common/components/AppBar/AppBar.tsx index b9deded..0142a27 100644 --- a/src/app/common/components/AppBar/AppBar.tsx +++ b/src/app/common/components/AppBar/AppBar.tsx @@ -25,6 +25,7 @@ import { useStyles as useAppStyles } from '~app/components/Styles'; import ApplicationStore from '~app/common/stores/Application.store'; import DarkModeSwitcher from '~app/common/components/DarkModeSwitcher'; import Grid from '@material-ui/core/Grid'; +import NetworkSelect from '~app/common/components/NetworkSelect'; const DrawerButtonsContainers = styled.div` font-size: 12px; @@ -165,11 +166,12 @@ const AppBarComponent = () => { display={{ xs: 'none', sm: 'none', md: 'none', lg: 'block' }}>
{!isOverviewPage() && } +
+ +
diff --git a/src/app/common/components/NetworkIcon/NetworkIcon.tsx b/src/app/common/components/NetworkIcon/NetworkIcon.tsx new file mode 100644 index 0000000..683758a --- /dev/null +++ b/src/app/common/components/NetworkIcon/NetworkIcon.tsx @@ -0,0 +1,16 @@ +import React, { ImgHTMLAttributes } from 'react'; +import { useStores } from '~app/hooks/useStores'; +import ApplicationStore from '~app/common/stores/Application.store'; +import { EChain } from '~lib/utils/ChainService'; + +const NetworkIcon = (props: { network: EChain } & ImgHTMLAttributes) => { + const stores = useStores(); + const applicationStore: ApplicationStore = stores.Application; + const imgSrc = `/images/networks/${props.network}${applicationStore.isDarkMode ? '_light' : '_dark'}.svg`; + + return ( + {props.network} + ); +}; + +export default NetworkIcon; diff --git a/src/app/common/components/NetworkIcon/index.ts b/src/app/common/components/NetworkIcon/index.ts new file mode 100644 index 0000000..3f03632 --- /dev/null +++ b/src/app/common/components/NetworkIcon/index.ts @@ -0,0 +1 @@ +export { default } from './NetworkIcon'; diff --git a/src/app/common/components/NetworkSelect/NetworkSelect.tsx b/src/app/common/components/NetworkSelect/NetworkSelect.tsx new file mode 100644 index 0000000..9821775 --- /dev/null +++ b/src/app/common/components/NetworkSelect/NetworkSelect.tsx @@ -0,0 +1,77 @@ +import React, { ChangeEvent } from 'react'; +import Box from '@material-ui/core/Box'; +import MenuItem from '@material-ui/core/MenuItem'; +import Select from '@material-ui/core/Select'; +import chainService, { EChain } from '~lib/utils/ChainService'; +import NetworkIcon from '~app/common/components/NetworkIcon'; +import { useStyles } from './NeworkSelect.styles'; +import { KeyboardArrowDown } from '@material-ui/icons'; + +const availableNetworks = [EChain.Ethereum, EChain.Holesky]; + +const networkToConfigMap = { + [EChain.Ethereum]: { + url: 'https://explorer.ssv.network', + label: 'Ethereum Mainnet', + }, + [EChain.Holesky]: { + url: 'https://holesky.explorer.ssv.network', + label: 'Holesky Testnet', + }, +}; + +export default function NetworkSelect() { + const currentNetwork: EChain = chainService().getNetwork() as EChain; + + const classes = useStyles(); + + const handleChange = ( + event: ChangeEvent<{ name?: string; value: unknown }>, + ) => { + const urlToGo = networkToConfigMap[event.target.value as EChain].url; + if (urlToGo) { + window.open(urlToGo, '_self'); + } + }; + + return ( + + + + ); +} diff --git a/src/app/common/components/NetworkSelect/NeworkSelect.styles.ts b/src/app/common/components/NetworkSelect/NeworkSelect.styles.ts new file mode 100644 index 0000000..2af6be1 --- /dev/null +++ b/src/app/common/components/NetworkSelect/NeworkSelect.styles.ts @@ -0,0 +1,57 @@ +import { makeStyles } from '@material-ui/core/styles'; + +export const useStyles = makeStyles((theme) => ({ + Wrapper: { + borderRadius: 8, + background: theme.colors.gray0, + padding: '0 16px', + }, + Root: { + minWidth: 205, + '&:after, &:before': { + display: 'none !important', + }, + }, + Select: { + backgroundColor: 'initial !important', + }, + Icon: { + boxSizing: 'content-box', + width: 24, + height: 24, + }, + + ItemListWrapper: { + width: 240, + boxShadow: 'none', + border: `1px solid ${theme.colors.gray20}`, + }, + + ItemList: { + backgroundColor: `${theme.colors.white}`, + padding: 0, + '& li:hover': { + backgroundColor: `${theme.colors.gray20} !important`, + }, + '& li': { + backgroundColor: `${theme.colors.white} !important`, + }, + '& li:not(:last-child)': { + borderBottom: `1px solid ${theme.colors.gray20}`, + }, + }, + + ItemWrapper: { + display: 'flex', + 'align-items': 'center', + padding: '6px 0', + paddingRight: '6px', + + fontSize: 16, + fontWeight: 600, + }, + ItemIcon: { + boxSizing: 'content-box', + paddingRight: '12px', + }, +})); diff --git a/src/app/common/components/NetworkSelect/index.tsx b/src/app/common/components/NetworkSelect/index.tsx new file mode 100644 index 0000000..e9ee2d3 --- /dev/null +++ b/src/app/common/components/NetworkSelect/index.tsx @@ -0,0 +1 @@ +export { default } from './NetworkSelect'; diff --git a/src/lib/utils/ChainService.ts b/src/lib/utils/ChainService.ts index af4d2f3..767074c 100644 --- a/src/lib/utils/ChainService.ts +++ b/src/lib/utils/ChainService.ts @@ -4,15 +4,11 @@ import config from '~app/common/config'; export enum EChain { Holesky = 'holesky', Ethereum = 'mainnet', // ethereum - Goerli = 'goerli', - Prater = 'prater', } export const CHAIN = { HOLESKY: EChain.Holesky, ETHEREUM: EChain.Ethereum, - PRATER: EChain.Prater, // Goerli was merged with Prater. The combined network retained the Goerli name post-merge. - GOERLI: EChain.Goerli, }; function extractChain(apiUrl: string): string {