Skip to content

F
frontend
Commit dfe7227c authored by tom's avatar tom
Browse files
Options

short logo

parent 0030818e
Show whitespace changes
Inline Side-by-side
Showing with 141 additions and 89 deletions
icons/networks/icons/goerli.svg 0 → 100644
View file @ dfe7227c
<svg viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.822 15.052h-6.9v2.731h3.19l-.01 3.433c-.123.132-.269.24-.43.319-.21.108-.43.197-.656.267a5.653 5.653 0 0 1-1.656.247 3.012 3.012 0 0 1-2.715-1.424 7.746 7.746 0 0 1-.9-4.064v-2.6a9.44 9.44 0 0 1 .265-2.36 5.76 5.76 0 0 1 .715-1.71c.267-.427.63-.785 1.06-1.047.4-.237.858-.36 1.323-.357a2.922 2.922 0 0 1 2.191.735c.526.615.84 1.383.895 2.191h3.627a8.472 8.472 0 0 0-.615-2.458 5.315 5.315 0 0 0-1.304-1.857 5.626 5.626 0 0 0-2.047-1.164 9.016 9.016 0 0 0-2.84-.4 6.71 6.71 0 0 0-2.774.572A6.354 6.354 0 0 0 2.016 7.77a7.927 7.927 0 0 0-1.483 2.659 10.954 10.954 0 0 0-.532 3.557v2.575a11.475 11.475 0 0 0 .51 3.557c.3.97.793 1.871 1.45 2.646a6.251 6.251 0 0 0 2.264 1.65 7.406 7.406 0 0 0 2.966.573c.765.005 1.529-.07 2.278-.221a10.497 10.497 0 0 0 1.914-.58 7.636 7.636 0 0 0 1.477-.8c.362-.247.691-.54.98-.87l-.018-7.464Zm2.66 2.783c-.01.97.143 1.935.451 2.855.281.837.73 1.61 1.317 2.269a5.985 5.985 0 0 0 2.133 1.5 7.278 7.278 0 0 0 2.88.54 7.194 7.194 0 0 0 2.86-.54 5.935 5.935 0 0 0 2.118-1.5 6.602 6.602 0 0 0 1.311-2.27c.308-.92.46-1.884.45-2.854v-.274a8.673 8.673 0 0 0-.45-2.84 6.532 6.532 0 0 0-1.317-2.27 6.078 6.078 0 0 0-2.125-1.508 7.812 7.812 0 0 0-5.74 0 6.082 6.082 0 0 0-2.12 1.508 6.516 6.516 0 0 0-1.317 2.27 8.647 8.647 0 0 0-.45 2.84v.274Zm3.681-.273a7.394 7.394 0 0 1 .174-1.625c.1-.478.284-.936.541-1.352a2.633 2.633 0 0 1 2.357-1.26c.495-.016.984.1 1.418.337.387.224.712.542.947.923.253.417.435.874.535 1.352a7.4 7.4 0 0 1 .173 1.625v.273a7.613 7.613 0 0 1-.172 1.659c-.1.478-.281.935-.537 1.352a2.622 2.622 0 0 1-2.337 1.255 2.818 2.818 0 0 1-1.424-.338 2.759 2.759 0 0 1-.96-.917 4.143 4.143 0 0 1-.541-1.352 7.6 7.6 0 0 1-.174-1.659v-.274.001Zm-1.747-10.3c.086.196.212.37.37.514.167.147.36.262.57.338.472.164.985.164 1.456 0 .21-.076.404-.19.57-.338.16-.143.285-.318.37-.514a1.594 1.594 0 0 0 0-1.274 1.562 1.562 0 0 0-.37-.52 1.7 1.7 0 0 0-.57-.344 2.206 2.206 0 0 0-1.456 0 1.7 1.7 0 0 0-.57.345 1.562 1.562 0 0 0-.502 1.157c0 .219.045.436.133.637v-.001Zm6.357.013c.086.197.212.374.37.52a1.7 1.7 0 0 0 .57.345c.47.165.984.165 1.456 0a1.7 1.7 0 0 0 .57-.345c.157-.146.283-.323.37-.52.089-.205.134-.427.132-.65a1.561 1.561 0 0 0-.503-1.151 1.761 1.761 0 0 0-.57-.338 2.206 2.206 0 0 0-1.456 0c-.21.075-.403.19-.57.338a1.546 1.546 0 0 0-.503 1.151c-.002.224.043.446.134.65Z" fill="currentColor"/>
</svg>
lib/networks/featuredNetworks.ts
View file @ dfe7227c
import type { FeaturedNetwork, PreDefinedNetwork } from 'types/networks'; import type { FeaturedNetwork } from 'types/networks';
import appConfig from 'configs/app/config'; import appConfig from 'configs/app/config';
import arbitrumIcon from 'icons/networks/icons/arbitrum.svg'; import ASSETS from 'lib/networks/networkAssets';
import artisIcon from 'icons/networks/icons/artis.svg';
import ethereumClassicIcon from 'icons/networks/icons/ethereum-classic.svg';
import ethereumIcon from 'icons/networks/icons/ethereum.svg';
import gnosisIcon from 'icons/networks/icons/gnosis.svg';
import optimismIcon from 'icons/networks/icons/optimism.svg';
import poaSokolIcon from 'icons/networks/icons/poa-sokol.svg';
import poaIcon from 'icons/networks/icons/poa.svg';
import rskIcon from 'icons/networks/icons/rsk.svg';
// predefined network icons
const ICONS: Partial<Record<PreDefinedNetwork, React.FunctionComponent<React.SVGAttributes<SVGElement>>>> = {
xdai_mainnet: gnosisIcon,
xdai_optimism: optimismIcon,
xdai_aox: arbitrumIcon,
eth_mainnet: ethereumIcon,
etc_mainnet: ethereumClassicIcon,
poa_core: poaIcon,
rsk_mainnet: rskIcon,
xdai_testnet: arbitrumIcon,
poa_sokol: poaSokolIcon,
artis_sigma1: artisIcon,
};
// for easy .env.example update // for easy .env.example update
// const FEATURED_NETWORKS = JSON.stringify([ // const FEATURED_NETWORKS = JSON.stringify([
...@@ -136,7 +114,7 @@ const ICONS: Partial<Record<PreDefinedNetwork, React.FunctionComponent<React.SVG ...@@ -136,7 +114,7 @@ const ICONS: Partial<Record<PreDefinedNetwork, React.FunctionComponent<React.SVG
const featuredNetworks: Array<FeaturedNetwork> = (() => { const featuredNetworks: Array<FeaturedNetwork> = (() => {
return appConfig.featuredNetworks.map((network) => ({ return appConfig.featuredNetworks.map((network) => ({
...network, ...network,
icon: network.icon || (network.type ? ICONS[network.type] : undefined), icon: network.icon || (network.type ? ASSETS[network.type]?.icon : undefined),
})); }));
})(); })();
......
lib/networks/networkAssets.ts 0 → 100644
View file @ dfe7227c
import type React from 'react';
import type { PreDefinedNetwork } from 'types/networks';
import arbitrumIcon from 'icons/networks/icons/arbitrum.svg';
import artisIcon from 'icons/networks/icons/artis.svg';
import ethereumClassicIcon from 'icons/networks/icons/ethereum-classic.svg';
import ethereumIcon from 'icons/networks/icons/ethereum.svg';
import gnosisIcon from 'icons/networks/icons/gnosis.svg';
import goerliIcon from 'icons/networks/icons/goerli.svg';
import optimismIcon from 'icons/networks/icons/optimism.svg';
import poaSokolIcon from 'icons/networks/icons/poa-sokol.svg';
import poaIcon from 'icons/networks/icons/poa.svg';
import rskIcon from 'icons/networks/icons/rsk.svg';
import artisLogo from 'icons/networks/logos/artis.svg';
import astarLogo from 'icons/networks/logos/astar.svg';
import etcLogo from 'icons/networks/logos/etc.svg';
import ethLogo from 'icons/networks/logos/eth.svg';
import gnosisLogo from 'icons/networks/logos/gnosis.svg';
import goerliLogo from 'icons/networks/logos/goerli.svg';
import luksoLogo from 'icons/networks/logos/lukso.svg';
import poaLogo from 'icons/networks/logos/poa.svg';
import rskLogo from 'icons/networks/logos/rsk.svg';
import shibuyaLogo from 'icons/networks/logos/shibuya.svg';
import shidenLogo from 'icons/networks/logos/shiden.svg';
import sokolLogo from 'icons/networks/logos/sokol.svg';
interface NetworkAssets {
icon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
logo?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
shortLogo?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
}
const networkAssets: Partial<Record<PreDefinedNetwork, NetworkAssets>> = {
xdai_mainnet: {
icon: gnosisIcon,
logo: gnosisLogo,
},
xdai_optimism: {
icon: optimismIcon,
},
xdai_aox: {
icon: arbitrumIcon,
},
eth_mainnet: {
icon: ethereumIcon,
logo: ethLogo,
},
etc_mainnet: {
icon: ethereumClassicIcon,
logo: etcLogo,
},
poa_core: {
icon: poaIcon,
logo: poaLogo,
},
rsk_mainnet: {
icon: rskIcon,
logo: rskLogo,
},
xdai_testnet: {
icon: arbitrumIcon,
logo: gnosisLogo,
},
poa_sokol: {
icon: poaSokolIcon,
logo: sokolLogo,
},
artis_sigma1: {
icon: artisIcon,
logo: artisLogo,
},
lukso_l14: {
logo: luksoLogo,
},
astar: {
logo: astarLogo,
},
shiden: {
logo: shidenLogo,
},
shibuya: {
logo: shibuyaLogo,
},
goerli: {
logo: goerliLogo,
icon: goerliIcon,
},
};
export default networkAssets;
ui/snippets/navigation/NavigationDesktop.tsx
View file @ dfe7227c
...@@ -63,12 +63,13 @@ const NavigationDesktop = () => { ...@@ -63,12 +63,13 @@ const NavigationDesktop = () => {
<Box <Box
as="header" as="header"
display="flex" display="flex"
justifyContent="center" justifyContent="flex-start"
alignItems="center" alignItems="center"
flexDirection="row" flexDirection="row"
w="100%" w="100%"
px={ 3 } px={ isCollapsed ? '15px' : 3 }
h={ 10 } h={ 10 }
{ ...getDefaultTransitionProps({ transitionProperty: 'padding' }) }
> >
<NetworkLogo isCollapsed={ isCollapsed }/> <NetworkLogo isCollapsed={ isCollapsed }/>
<NetworkMenu isCollapsed={ isCollapsed }/> <NetworkMenu isCollapsed={ isCollapsed }/>
......
ui/snippets/networkMenu/NetworkLogo.tsx
View file @ dfe7227c
import { Icon, Box, Image, useColorModeValue } from '@chakra-ui/react'; import { Icon, Box, Image, useColorModeValue } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
import type { FunctionComponent, SVGAttributes } from 'react';
import type { PreDefinedNetwork } from 'types/networks';
import appConfig from 'configs/app/config'; import appConfig from 'configs/app/config';
import blockscoutLogo from 'icons/logo.svg'; import logoPlaceholder from 'icons/logo.svg';
import artisLogo from 'icons/networks/logos/artis.svg'; import shortLogoPlaceholder from 'icons/networks/icons/placeholder.svg';
import astarLogo from 'icons/networks/logos/astar.svg';
import etcLogo from 'icons/networks/logos/etc.svg';
import ethLogo from 'icons/networks/logos/eth.svg';
import gnosisLogo from 'icons/networks/logos/gnosis.svg';
import goerliIcon from 'icons/networks/logos/goerli.svg';
import luksoLogo from 'icons/networks/logos/lukso.svg';
import poaLogo from 'icons/networks/logos/poa.svg';
import rskLogo from 'icons/networks/logos/rsk.svg';
import shibuyaLogo from 'icons/networks/logos/shibuya.svg';
import shidenLogo from 'icons/networks/logos/shiden.svg';
import sokolLogo from 'icons/networks/logos/sokol.svg';
import link from 'lib/link/link'; import link from 'lib/link/link';
import ASSETS from 'lib/networks/networkAssets';
import getDefaultTransitionProps from 'theme/utils/getDefaultTransitionProps'; import getDefaultTransitionProps from 'theme/utils/getDefaultTransitionProps';
// predefined network logos
const LOGOS: Partial<Record<PreDefinedNetwork, React.FunctionComponent<React.SVGAttributes<SVGElement>>>> = {
xdai_mainnet: gnosisLogo,
eth_mainnet: ethLogo,
etc_mainnet: etcLogo,
poa_core: poaLogo,
rsk_mainnet: rskLogo,
xdai_testnet: gnosisLogo,
poa_sokol: sokolLogo,
artis_sigma1: artisLogo,
lukso_l14: luksoLogo,
astar: astarLogo,
shiden: shidenLogo,
shibuya: shibuyaLogo,
goerli: goerliIcon,
};
interface Props { interface Props {
isCollapsed?: boolean; isCollapsed?: boolean;
onClick?: (event: React.SyntheticEvent) => void; onClick?: (event: React.SyntheticEvent) => void;
...@@ -46,54 +16,59 @@ interface Props { ...@@ -46,54 +16,59 @@ interface Props {
const NetworkLogo = ({ isCollapsed, onClick }: Props) => { const NetworkLogo = ({ isCollapsed, onClick }: Props) => {
const logoColor = useColorModeValue('blue.600', 'white'); const logoColor = useColorModeValue('blue.600', 'white');
const href = link('network_index'); const href = link('network_index');
const logo = appConfig.network.logo || (appConfig.network.type ? LOGOS[appConfig.network.type] : undefined);
const style = useColorModeValue({}, { filter: 'brightness(0) invert(1)' }); const style = useColorModeValue({}, { filter: 'brightness(0) invert(1)' });
let logoEl; const logoEl = (() => {
if (isCollapsed) {
if (logo && typeof logo === 'string') { const shortLogo = appConfig.network.type ? ASSETS[appConfig.network.type]?.shortLogo || ASSETS[appConfig.network.type]?.icon : undefined;
logoEl = ( return (
<Image
w="auto"
h="100%"
src={ logo }
alt={ `${ appConfig.network.name } network icon` }
/>
);
} else if (typeof logo !== 'undefined') {
logoEl = (
<Icon <Icon
as={ logo as FunctionComponent<SVGAttributes<SVGElement>> } as={ shortLogo || shortLogoPlaceholder }
width="auto" width="auto"
height="100%" height="100%"
color={ shortLogo ? undefined : logoColor }
{ ...getDefaultTransitionProps() } { ...getDefaultTransitionProps() }
style={ style } style={ style }
/> />
); );
} else { }
logoEl = (
if (appConfig.network.logo) {
return (
<Image
w="auto"
h="100%"
src={ appConfig.network.logo }
alt={ `${ appConfig.network.name } network icon` }
/>
);
}
const logo = appConfig.network.type ? ASSETS[appConfig.network.type]?.logo : undefined;
return (
<Icon <Icon
as={ blockscoutLogo } as={ logo || logoPlaceholder }
width="auto" width="auto"
height="100%" height="100%"
color={ logoColor } color={ logo ? undefined : logoColor }
{ ...getDefaultTransitionProps() } { ...getDefaultTransitionProps() }
style={ style } style={ style }
/> />
); );
} })();
return ( return (
// TODO switch to <NextLink href={ href } passHref> when main page for network will be ready // TODO switch to <NextLink href={ href } passHref> when main page for network will be ready
<Box <Box
as="a" as="a"
href={ href } href={ href }
width={{ base: 'auto', lg: isCollapsed === false ? '113px' : 0, xl: isCollapsed ? '0' : '113px' }} width={{ base: 'auto', lg: isCollapsed === false ? '113px' : '30px' }}
height="20px" height={ isCollapsed ? '30px' : '20px' }
display="inline-flex" display="inline-flex"
overflow="hidden" overflow="hidden"
onClick={ onClick } onClick={ onClick }
flexShrink={ 0 }
{ ...getDefaultTransitionProps({ transitionProperty: 'width' }) } { ...getDefaultTransitionProps({ transitionProperty: 'width' }) }
aria-label="Link to main page" aria-label="Link to main page"
> >
......
ui/snippets/networkMenu/NetworkMenu.tsx
View file @ dfe7227c
...@@ -13,7 +13,11 @@ const NetworkMenu = ({ isCollapsed }: Props) => { ...@@ -13,7 +13,11 @@ const NetworkMenu = ({ isCollapsed }: Props) => {
{ ({ isOpen }) => ( { ({ isOpen }) => (
<> <>
<PopoverTrigger> <PopoverTrigger>
<Box marginLeft={{ base: '7px', lg: isCollapsed === false ? '7px' : '0px', xl: isCollapsed ? '0px' : '7px' }}> <Box
marginLeft="auto"
overflow="hidden"
width={ isCollapsed ? '0px' : 'auto' }
>
<NetworkMenuButton isActive={ isOpen }/> <NetworkMenuButton isActive={ isOpen }/>
</Box> </Box>
</PopoverTrigger> </PopoverTrigger>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment