From 10b29c6e375b83663c2944f734da523e736c104a Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Thu, 27 May 2021 12:51:47 +0200 Subject: [PATCH] unify network names, more icons --- src/components/atoms/AssetType.module.css | 12 +++++++++ src/components/atoms/AssetType.tsx | 19 +++++++++++--- ...work.module.css => NetworkName.module.css} | 0 .../atoms/{Network.tsx => NetworkName.tsx} | 24 +++++++++++++----- src/components/molecules/AssetTeaser.tsx | 8 ++---- .../molecules/UserPreferences/Chain.tsx | 14 ++++++++--- src/components/molecules/Wallet/Network.tsx | 2 +- src/images/moonbeam.svg | 16 ++++++++++++ src/utils/web3.ts | 25 +++++++++++++++---- 9 files changed, 95 insertions(+), 25 deletions(-) rename src/components/atoms/{Network.module.css => NetworkName.module.css} (100%) rename src/components/atoms/{Network.tsx => NetworkName.tsx} (65%) create mode 100644 src/images/moonbeam.svg diff --git a/src/components/atoms/AssetType.module.css b/src/components/atoms/AssetType.module.css index a578aa0f8..0c16f1982 100644 --- a/src/components/atoms/AssetType.module.css +++ b/src/components/atoms/AssetType.module.css @@ -13,4 +13,16 @@ border-right: 1px solid var(--border-color); padding-right: calc(var(--spacer) / 3.5); margin-right: calc(var(--spacer) / 4); + border-left: 1px solid var(--border-color); + padding-left: calc(var(--spacer) / 3.5); + margin-left: calc(var(--spacer) / 4); +} + +.network { + display: inline-block; +} + +.network svg { + vertical-align: baseline; + margin-bottom: -0.1em; } diff --git a/src/components/atoms/AssetType.tsx b/src/components/atoms/AssetType.tsx index c1776ec20..235d72b5d 100644 --- a/src/components/atoms/AssetType.tsx +++ b/src/components/atoms/AssetType.tsx @@ -4,6 +4,8 @@ import classNames from 'classnames/bind' import { ReactComponent as Compute } from '../../images/compute.svg' import { ReactComponent as Download } from '../../images/download.svg' import { ReactComponent as Lock } from '../../images/lock.svg' +import NetworkName from './NetworkName' +import { useOcean } from '../../providers/Ocean' const cx = classNames.bind(styles) @@ -16,14 +18,13 @@ export default function AssetType({ accessType: string className?: string }): ReactElement { + const { config } = useOcean() + const styleClasses = cx({ [className]: className }) return (
-
- {type === 'dataset' ? 'data set' : 'algorithm'} -
{accessType === 'access' ? ( ) : accessType === 'compute' && type === 'algorithm' ? ( @@ -31,6 +32,18 @@ export default function AssetType({ ) : ( )} + +
+ {type === 'dataset' ? 'data set' : 'algorithm'} +
+ {/* TODO: networkId needs to come from the multinetwork DDO for each asset */} + {config?.networkId && ( + + )}
) } diff --git a/src/components/atoms/Network.module.css b/src/components/atoms/NetworkName.module.css similarity index 100% rename from src/components/atoms/Network.module.css rename to src/components/atoms/NetworkName.module.css diff --git a/src/components/atoms/Network.tsx b/src/components/atoms/NetworkName.tsx similarity index 65% rename from src/components/atoms/Network.tsx rename to src/components/atoms/NetworkName.tsx index 9c3e15726..502b16e76 100644 --- a/src/components/atoms/Network.tsx +++ b/src/components/atoms/NetworkName.tsx @@ -2,12 +2,13 @@ import { graphql, useStaticQuery } from 'gatsby' import React, { FunctionComponent, ReactElement } from 'react' import { ReactComponent as EthIcon } from '../../images/eth.svg' import { ReactComponent as PolygonIcon } from '../../images/polygon.svg' +import { ReactComponent as MoonbeamIcon } from '../../images/moonbeam.svg' import { EthereumListsChain, getNetworkData, getNetworkDisplayName } from '../../utils/web3' -import styles from './Network.module.css' +import styles from './NetworkName.module.css' const networksQuery = graphql` query { @@ -26,19 +27,27 @@ const networksQuery = graphql` const icons: { [key: string]: FunctionComponent> -} = { ETH: EthIcon, Matic: PolygonIcon } +} = { ETH: EthIcon, Polygon: PolygonIcon, Moonbeam: MoonbeamIcon } export function NetworkIcon({ name }: { name: string }): ReactElement { - const IconMapped = name.includes('ETH') ? icons.ETH : icons[name.trim()] + const IconMapped = name.includes('ETH') + ? icons.ETH + : name.includes('Polygon') + ? icons.Polygon + : name.includes('Moon') + ? icons.Moonbeam + : icons[name.trim()] return IconMapped ? : null } -export default function Network({ +export default function NetworkName({ networkId, + minimal, className }: { networkId: number + minimal?: boolean className?: string }): ReactElement { const data = useStaticQuery(networksQuery) @@ -48,8 +57,11 @@ export default function Network({ const networkName = getNetworkDisplayName(networkData, networkId) return ( - - {networkName} + + {!minimal && networkName} ) } diff --git a/src/components/molecules/AssetTeaser.tsx b/src/components/molecules/AssetTeaser.tsx index 2ffca75c0..82e91f9ae 100644 --- a/src/components/molecules/AssetTeaser.tsx +++ b/src/components/molecules/AssetTeaser.tsx @@ -2,13 +2,13 @@ import React from 'react' import { Link } from 'gatsby' import Dotdotdot from 'react-dotdotdot' import Price from '../atoms/Price' -import styles from './AssetTeaser.module.css' import { DDO, BestPrice } from '@oceanprotocol/lib' import removeMarkdown from 'remove-markdown' import Publisher from '../atoms/Publisher' import AssetType from '../atoms/AssetType' -import Network from '../atoms/Network' +import NetworkName from '../atoms/NetworkName' import { useOcean } from '../../providers/Ocean' +import styles from './AssetTeaser.module.css' declare type AssetTeaserProps = { ddo: DDO @@ -54,10 +54,6 @@ const AssetTeaser: React.FC = ({
- {/* TODO: networkId needs to come from the multinetwork DDO for each asset */} - {config?.networkId && ( - - )}
diff --git a/src/components/molecules/UserPreferences/Chain.tsx b/src/components/molecules/UserPreferences/Chain.tsx index 71cad403b..312e861ba 100644 --- a/src/components/molecules/UserPreferences/Chain.tsx +++ b/src/components/molecules/UserPreferences/Chain.tsx @@ -6,6 +6,9 @@ import { getOceanConfig } from '../../../utils/ocean' import FormHelp from '../../atoms/Input/Help' import Label from '../../atoms/Input/Label' import BoxSelection, { BoxSelectionOption } from '../FormFields/BoxSelection' +import { ReactComponent as EthIcon } from '../../../images/eth.svg' +import { ReactComponent as PolygonIcon } from '../../../images/polygon.svg' +import { ReactComponent as MoonbeamIcon } from '../../../images/moonbeam.svg' import styles from './Chain.module.css' export default function Chain(): ReactElement { @@ -26,19 +29,22 @@ export default function Chain(): ReactElement { name: 'mainnet', checked: isNetworkSelected('mainnet'), title: 'ETH', - text: 'Mainnet' + text: 'Mainnet', + icon: }, { name: 'polygon', checked: isNetworkSelected('polygon'), - title: 'Polygon/Matic', - text: 'Mainnet' + title: 'Polygon', + text: 'Mainnet', + icon: }, { name: 'moonbeamalpha', checked: isNetworkSelected('moonbeamalpha'), title: 'Moonbase Alpha', - text: 'Testnet' + text: 'Testnet', + icon: } ] diff --git a/src/components/molecules/Wallet/Network.tsx b/src/components/molecules/Wallet/Network.tsx index d66d391b6..26fbf363b 100644 --- a/src/components/molecules/Wallet/Network.tsx +++ b/src/components/molecules/Wallet/Network.tsx @@ -5,7 +5,7 @@ import { ConfigHelper, ConfigHelperConfig } from '@oceanprotocol/lib' import Badge from '../../atoms/Badge' import Tooltip from '../../atoms/Tooltip' import { useWeb3 } from '../../../providers/Web3' -import NetworkName from '../../atoms/Network' +import NetworkName from '../../atoms/NetworkName' import styles from './Network.module.css' export default function Network(): ReactElement { diff --git a/src/images/moonbeam.svg b/src/images/moonbeam.svg new file mode 100644 index 000000000..b649d23f1 --- /dev/null +++ b/src/images/moonbeam.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/src/utils/web3.ts b/src/utils/web3.ts index d35841009..fa5ce829a 100644 --- a/src/utils/web3.ts +++ b/src/utils/web3.ts @@ -30,11 +30,26 @@ export function getNetworkDisplayName( data: EthereumListsChain, networkId: number ): string { - const displayName = data - ? `${data.chain} ${data.network === 'mainnet' ? '' : data.network}` - : networkId === 8996 - ? 'Development' - : 'Unknown' + if (!data) return 'Unknown' + + let displayName + + switch (networkId) { + case 1287: + displayName = 'Moonbase Alpha' + break + case 137: + displayName = 'Polygon' + break + case 8996: + displayName = 'Development' + break + default: + displayName = `${data.chain} ${ + data.network === 'mainnet' ? '' : data.network + }` + break + } return displayName }