From d9ecd9649a86e523aef46e315d6392b89d655c2e Mon Sep 17 00:00:00 2001 From: louis-md Date: Thu, 17 Oct 2024 09:46:02 +0200 Subject: [PATCH] Supported networks design fixes (#620) * Create unified supported networks page * Edit generation script * Replace existing supported network pages by links to the new one * Add redirections * Implement requested changes * Generate separate API references per network * Use prettier instead of numso.prettier-standard * Use typed script to generate API reference * Fix generate api reference script * Fix generate supported networks script * Re-generate supported networks * Re-generate API reference * Fix lazy loading * Unsplit and and fix addresses margins --- components/ResourceHub/Resources.tsx | 10 +- components/SupportedNetworks/Card.tsx | 20 +- components/SupportedNetworks/NetworkModal.tsx | 501 ++++++++---------- components/SupportedNetworks/Networks.tsx | 17 +- pages/_document.tsx | 28 + 5 files changed, 288 insertions(+), 288 deletions(-) create mode 100644 pages/_document.tsx diff --git a/components/ResourceHub/Resources.tsx b/components/ResourceHub/Resources.tsx index b5fdd77d..ead97f25 100644 --- a/components/ResourceHub/Resources.tsx +++ b/components/ResourceHub/Resources.tsx @@ -334,7 +334,7 @@ export const Resources: React.FC = () => { alignItems='center' justifyContent='center' > - + Resource Hub { variant='outlined' placeholder='Search by name, description, or tag' InputProps={{ + style: { + color: 'white', + backgroundColor: 'rgba(28, 28, 28, 1)', + borderRadius: '8px', + border: 'none' + }, startAdornment: ( @@ -357,7 +363,7 @@ export const Resources: React.FC = () => { ) : undefined }} value={searchQuery} - sx={{ border: 'none', width: '80%', mt: [2, 0] }} + sx={{ border: 'none', width: ['80%', '500px'], mt: [2, 0] }} onChange={e => { if (e.target.value.length === 0) onResetSearch() else setSelectedFilter([e.target.value], 'search') diff --git a/components/SupportedNetworks/Card.tsx b/components/SupportedNetworks/Card.tsx index ad4fbc42..57c9202c 100644 --- a/components/SupportedNetworks/Card.tsx +++ b/components/SupportedNetworks/Card.tsx @@ -48,12 +48,16 @@ const NetworkCard = (network: Network): JSX.Element => { }} className={css.card} onClick={() => { - void push({ - query: { - ...query, - expand: network.chainId - } - }) + void push( + { + query: { + ...query, + expand: network.chainId + } + }, + undefined, + { scroll: false } + ) // sendGAEvent('event', 'supported_networks_link', { // network_chainId: network.chainId, // network_name: network.name @@ -104,7 +108,7 @@ const NetworkCard = (network: Network): JSX.Element => { height: '23px', fontSize: '14px', cursor: 'pointer', - ml: 1 + mr: 1 }} className={css.chip} label={version} @@ -131,7 +135,7 @@ const NetworkCard = (network: Network): JSX.Element => { height: '23px', fontSize: '14px', cursor: 'pointer', - ml: 1 + mr: 1 }} className={css.chip} label={feature} diff --git a/components/SupportedNetworks/NetworkModal.tsx b/components/SupportedNetworks/NetworkModal.tsx index 3fb5deaa..a72bcf1c 100644 --- a/components/SupportedNetworks/NetworkModal.tsx +++ b/components/SupportedNetworks/NetworkModal.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useEffect } from 'react' +import React from 'react' import Img from 'next/image' import { Typography, @@ -11,7 +11,6 @@ import { AccordionDetails } from '@mui/material' import { capitalize } from 'lodash' -import Modal from '@mui/material/Modal' import ClearIcon from '@mui/icons-material/Clear' import OpenInNewIcon from '@mui/icons-material/OpenInNew' @@ -39,254 +38,210 @@ const NetworkModal: React.FC<{ .map(m => m.moduleName?.split('-').map(capitalize).join(' ')) .filter((v, i, a) => a.indexOf(v) === i) - const handleClose = useCallback((): void => { - void push({ - query: { - ...rest - } - }) - }, [push, rest]) - - useEffect(() => { - const handleClickAway: (event: MouseEvent) => void = event => { - const target = event.target as HTMLElement - if (target?.id === 'backdrop') { - handleClose() - } - } - if (typeof window !== 'undefined') { - window.addEventListener('click', handleClickAway) - } - return () => { - if (typeof window !== 'undefined') { - window.removeEventListener('click', handleClickAway) - } - } - }, [handleClose]) - return ( - - <> - + + - - network-logo - - - {network?.name} - - - Chain ID: {network?.chainId} - - {txServiceNetworks - .map(n => n.chainId) - .includes(network?.chainId ?? 0) && ( - <> - {/* + + + + network-logo + + + {network?.name} + + + Chain ID: {network?.chainId} + + {txServiceNetworks + .map(n => n.chainId) + .includes(network?.chainId ?? 0) && ( + <> + {/* {'Testnet'} */} - - Services - - {apiServices(network?.chainId.toString() ?? '0').map(s => ( - - - {s.name} - - - } - /> - - ))} - - )} - - Smart Account + + Services - {versions - .filter(v => - network?.smartAccounts.map(c => c.version).includes(v) - ) - .map((version, idx) => ( - + {apiServices(network?.chainId.toString() ?? '0').map(s => ( + - }> - {version} - - - - {network?.smartAccounts - .filter(c => c.version === version) - .map((contract, idx) => ( - + {s.name} + - ))} - - + + } + /> + ))} - {moduleTypes?.length != null && moduleTypes.length > 0 && ( - - Modules - - )} - {moduleTypes?.map((type, idx) => { - const versions = network?.modules - .filter( - m => - m.moduleName?.split('-').map(capitalize).join(' ') === type - ) - .map(m => m.version) - .filter((v, i, a) => a.indexOf(v) === i) - return ( - - }> - {type} - - - - {versions?.reverse().map(version => ( -
- - {version} - - {network?.modules - .filter( - m => - m.moduleName - ?.split('-') - .map(capitalize) - .join(' ') === type && m.version === version - ) - .map(contract => { - const hasBlockExplorer = - curatedBlockExplorers.includes( - network?.explorers?.[0].url - ) - return ( - - ) - })} -
- ))} - - - ) - })} - - - - - ) -} + + + )} + + Smart Account + + {versions + .filter(v => network?.smartAccounts.map(c => c.version).includes(v)) + .map((version, idx) => ( + + }> + {version} + -function splitAddress(address: string, charDisplayed: number = 8): string { - const firstPart = address.slice(0, charDisplayed) - const lastPart = address.slice(address.length - charDisplayed) + + {network?.smartAccounts + .filter(c => c.version === version) + .map((contract, idx) => ( + + ))} + + + ))} + {moduleTypes?.length != null && moduleTypes.length > 0 && ( + + Modules + + )} + {moduleTypes?.map((type, idx) => { + const versions = network?.modules + .filter( + m => m.moduleName?.split('-').map(capitalize).join(' ') === type + ) + .map(m => m.version) + .filter((v, i, a) => a.indexOf(v) === i) + return ( + + }> + {type} + - return `${firstPart}...${lastPart}` + + {versions?.reverse().map(version => ( +
+ + {version} + + {network?.modules + .filter( + m => + m.moduleName?.split('-').map(capitalize).join(' ') === + type && m.version === version + ) + .map(contract => { + const hasBlockExplorer = curatedBlockExplorers.includes( + network?.explorers?.[0].url + ) + return ( + + ) + })} +
+ ))} + + + ) + })} + + + ) } export const SplitAddress: React.FC<{ address: string }> = ({ address }) => { return ( - <> - {splitAddress(address)} + + {address} address} style={{ marginLeft: '8px' }} /> - + ) } @@ -294,53 +249,53 @@ const ContractAddress: React.FC<{ contract: Contract hasBlockExplorer: boolean network: Network -}> = ({ contract, network, hasBlockExplorer }) => { - return ( -
  • - {contract.name}.sol:{' '} - - {(contract.address?.length ?? 0) > 0 ? ( +}> = ({ contract, network, hasBlockExplorer }) => ( +
  • + {contract.name}.sol:{' '} + + {(contract.address?.length ?? 0) > 0 ? ( + hasBlockExplorer ? ( + <> + + {contract.address ?? ''} + + contract.address ?? ''} /> + + ) : ( + + ) + ) : ( + contract.addresses?.map((a: [string, string]) => hasBlockExplorer ? ( - <> +
  • + {a[0].slice(0, -1)}:{' '} - {splitAddress(contract.address ?? '')} + {a[1]} - contract.address ?? ''} /> - + a[1]} /> +
    • ) : ( - +
  • + {a[0].slice(0, -1)}: {} +
    • ) - ) : ( - contract.addresses?.map((a: [string, string]) => - hasBlockExplorer ? ( -
  • - {a[0].slice(0, -1)}:{' '} - - {a[1]} - - a[1]} /> -
    • - ) : ( -
  • - {a[0].slice(0, -1)}: {} -
    • - ) - ) - )} -     - - ) -} + ) + )} + + +) export default NetworkModal diff --git a/components/SupportedNetworks/Networks.tsx b/components/SupportedNetworks/Networks.tsx index d4f49ab2..9478486a 100644 --- a/components/SupportedNetworks/Networks.tsx +++ b/components/SupportedNetworks/Networks.tsx @@ -374,7 +374,7 @@ const SupportedNetworks: React.FC = () => { alignItems='center' justifyContent='center' > - + Supported Networks { variant='outlined' placeholder='Search by network name or chain ID' InputProps={{ + style: { + color: 'white', + backgroundColor: 'rgba(28, 28, 28, 1)', + borderRadius: '8px', + border: 'none' + }, startAdornment: ( @@ -397,7 +403,7 @@ const SupportedNetworks: React.FC = () => { ) : undefined }} value={searchQuery} - sx={{ border: 'none', width: '80%', mt: [2, 0] }} + sx={{ border: 'none', width: ['80%', '500px'], mt: [2, 0] }} onChange={e => { if (e.target.value.length === 0) onResetSearch() else setSelectedFilter([e.target.value], 'search') @@ -488,8 +494,10 @@ const SupportedNetworks: React.FC = () => { {sidebar} - - {visibleResults.length > 0 ? ( + + {query.expand !== undefined ? ( + + ) : visibleResults.length > 0 ? ( { - ) } diff --git a/pages/_document.tsx b/pages/_document.tsx new file mode 100644 index 00000000..2b849b40 --- /dev/null +++ b/pages/_document.tsx @@ -0,0 +1,28 @@ +import Document, { Html, Head, Main, NextScript } from 'next/document' + +class MyDocument extends Document { + render(): JSX.Element { + return ( + + + + + + + +
    + + + + ) + } +} + +export default MyDocument