oceanprotocol
/
market
mirror of https://github.com/oceanprotocol/market.git
1
0
Fork 0
Code Releases Activity

unify network names, more icons

This commit is contained in:
Matthias Kretschmann 2021-05-27 12:51:47 +02:00
parent 476147f65a
commit 10b29c6e37
Signed by: m
GPG Key ID: 606EEEF3C479A91F
9 changed files with 95 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/atoms/AssetType.module.css
View File

@ -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;
}

19
src/components/atoms/AssetType.tsx
View File

@ -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 (
<div className={styleClasses}>
<div className={styles.typeLabel}>
{type === 'dataset' ? 'data set' : 'algorithm'}
</div>
{accessType === 'access' ? (
<Download role="img" aria-label="Download" className={styles.icon} />
) : accessType === 'compute' && type === 'algorithm' ? (
@ -31,6 +32,18 @@ export default function AssetType({
) : (
<Compute role="img" aria-label="Compute" className={styles.icon} />
)}
<div className={styles.typeLabel}>
{type === 'dataset' ? 'data set' : 'algorithm'}
</div>
{/* TODO: networkId needs to come from the multinetwork DDO for each asset */}
{config?.networkId && (
<NetworkName
networkId={config.networkId}
className={styles.network}
minimal
/>
)}
</div>
)
}

0
src/components/atoms/Network.module.css → src/components/atoms/NetworkName.module.css
View File

24
src/components/atoms/Network.tsx → src/components/atoms/NetworkName.tsx
View File

@ -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<React.SVGProps<SVGSVGElement>>
} = { 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 ? <IconMapped className={styles.icon} /> : 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 (
<span className={`${styles.network} ${className || ''}`}>
<NetworkIcon name={networkName} /> {networkName}
<span
className={`${styles.network} ${className || ''}`}
title={minimal ? networkName : null}
>
<NetworkIcon name={networkName} /> {!minimal && networkName}
</span>
)
}

8
src/components/molecules/AssetTeaser.tsx
View File

@ -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<AssetTeaserProps> = ({
<footer className={styles.foot}>
<Price price={price} small />
{/* TODO: networkId needs to come from the multinetwork DDO for each asset */}
{config?.networkId && (
<Network networkId={config.networkId} className={styles.network} />
)}
</footer>
</Link>
</article>

14
src/components/molecules/UserPreferences/Chain.tsx
View File

@ -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: <EthIcon />
},
{
name: 'polygon',
checked: isNetworkSelected('polygon'),
title: 'Polygon/Matic',
text: 'Mainnet'
title: 'Polygon',
text: 'Mainnet',
icon: <PolygonIcon />
},
{
name: 'moonbeamalpha',
checked: isNetworkSelected('moonbeamalpha'),
title: 'Moonbase Alpha',
text: 'Testnet'
text: 'Testnet',
icon: <MoonbeamIcon />
}
]

2
src/components/molecules/Wallet/Network.tsx
View File

@ -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 {

16
src/images/moonbeam.svg Normal file
View File

@ -0,0 +1,16 @@
<svg width="20" height="17" viewBox="0 0 20 17" xmlns="http://www.w3.org/2000/svg">
<path d="M11.9072 0C10.2486 0.000152742 8.65813 0.656483 7.48551 1.82455C6.31279 2.99267 5.65395 4.5769 5.65379 6.22891V6.25182C5.6589 6.32956 5.69361 6.40247 5.75076 6.45563C5.80795 6.50888 5.88329 6.53846 5.96149 6.53826H17.8516C17.9303 6.53846 18.0054 6.50888 18.0626 6.45563C18.1199 6.40247 18.1541 6.32956 18.1598 6.25182V6.24204C18.1598 6.23766 18.1598 6.23323 18.1598 6.22891C18.1592 4.57701 17.5004 2.99287 16.3279 1.8248C15.1554 0.656636 13.5653 0.000305483 11.9072 0Z" />
<path d="M1.13367 13.563C1.34395 13.563 1.51441 13.3932 1.51441 13.1837C1.51441 12.9742 1.34395 12.8044 1.13367 12.8044C0.923397 12.8044 0.752939 12.9742 0.752939 13.1837C0.752939 13.3932 0.923397 13.563 1.13367 13.563Z" />
<path d="M17.4391 11.0856H4.68072C4.61586 11.0856 4.55207 11.1024 4.49564 11.1343C4.43921 11.1662 4.39214 11.2121 4.35881 11.2676C4.32559 11.3231 4.30734 11.3862 4.30586 11.4508C4.30443 11.5154 4.31981 11.5793 4.35058 11.6362L4.35749 11.6482C4.38958 11.7073 4.43722 11.7567 4.49523 11.7911C4.55324 11.8255 4.61954 11.8436 4.68701 11.8436H17.4319C17.4994 11.8436 17.5658 11.8254 17.6241 11.791C17.6819 11.7567 17.7299 11.7073 17.7621 11.6482L17.7688 11.6362C17.7994 11.5793 17.8148 11.5155 17.8132 11.4509C17.8117 11.3864 17.7938 11.3233 17.7606 11.2679C17.7273 11.2124 17.6803 11.1664 17.6236 11.1345C17.5674 11.1025 17.504 11.0857 17.4391 11.0856Z" />
<path d="M19.134 7.64803H4.6801C4.62909 7.64823 4.57865 7.65872 4.53183 7.67893C4.48501 7.69915 4.44284 7.72868 4.40788 7.76559C4.37292 7.8026 4.34583 7.84634 4.3283 7.89404C4.31087 7.94185 4.30336 7.99261 4.30622 8.04338V8.05483C4.31153 8.14999 4.35329 8.23949 4.42281 8.30492C4.49237 8.37034 4.58442 8.40675 4.6801 8.40659H19.1329C19.228 8.40675 19.321 8.37039 19.3905 8.30497C19.4601 8.23955 19.502 8.15004 19.5071 8.05483V8.04338C19.5101 7.99272 19.5025 7.94195 19.4846 7.8943C19.4672 7.84659 19.4406 7.80296 19.4054 7.766C19.3706 7.72903 19.3287 7.69955 19.2817 7.67924C19.2352 7.65897 19.1851 7.64833 19.134 7.64803Z" />
<path d="M13.6915 16.242H7.17622C6.78112 16.242 6.65861 16.772 7.00945 16.9495L7.03301 16.9616C7.08509 16.9872 7.14244 17.0003 7.2004 17H13.6675C13.7258 17.0003 13.783 16.9872 13.8346 16.9616L13.8587 16.9495C14.2118 16.7714 14.0866 16.242 13.6915 16.242Z" />
<path d="M17.6711 14.5231H11.1575C10.7618 14.5231 10.6399 15.0531 10.9907 15.2307L11.0143 15.2428C11.0663 15.2683 11.1236 15.2814 11.1816 15.2811H17.6476C17.7054 15.2813 17.7626 15.2683 17.8142 15.2428L17.8388 15.2307C17.9139 15.1931 17.9747 15.1311 18.0105 15.055C18.0463 14.9789 18.055 14.8929 18.0356 14.8111C18.0161 14.7292 17.9696 14.6562 17.9037 14.604C17.8378 14.5517 17.7555 14.5233 17.6711 14.5231Z" />
<path d="M8.78969 13.4438L8.77819 13.4318C8.72835 13.3786 8.69523 13.312 8.68291 13.2403C8.67065 13.1686 8.67959 13.0948 8.70883 13.0283C8.73807 12.9616 8.78621 12.9048 8.84739 12.8651C8.90858 12.8253 8.98008 12.8042 9.05312 12.8044H19.6251C19.6982 12.8043 19.7693 12.8255 19.8306 12.8652C19.8914 12.9049 19.9395 12.9616 19.9691 13.0281C19.9978 13.0946 20.007 13.1683 19.9947 13.2399C19.9829 13.3115 19.9497 13.378 19.9001 13.4312L19.8889 13.4433C19.8541 13.4808 19.8112 13.5107 19.7642 13.5311C19.7166 13.5516 19.666 13.5623 19.6139 13.5624H9.06406C9.01254 13.5624 8.96173 13.5519 8.91451 13.5314C8.86733 13.5111 8.82485 13.4812 8.78969 13.4438Z" />
<path d="M2.49275 12.8044H7.54153C7.93724 12.8044 8.05914 13.3344 7.70831 13.512L7.68474 13.5234C7.63271 13.5492 7.57547 13.5625 7.51735 13.5624H2.51749C2.45943 13.5625 2.40213 13.5492 2.3501 13.5234L2.32653 13.512C1.97279 13.335 2.09704 12.8044 2.49275 12.8044Z" />
<path d="M3.32098 8.40833C3.53125 8.40833 3.70176 8.23853 3.70176 8.02907C3.70176 7.81961 3.53125 7.64976 3.32098 7.64976C3.11065 7.64976 2.94024 7.81961 2.94024 8.02907C2.94024 8.23853 3.11065 8.40833 3.32098 8.40833Z" />
<path d="M12.6723 9.8499L12.6759 9.83784C12.6907 9.78254 12.6928 9.72465 12.6815 9.66849C12.6703 9.61234 12.6458 9.55959 12.611 9.51417C12.5757 9.46881 12.5308 9.4321 12.4791 9.4069C12.4275 9.38165 12.3708 9.36856 12.3135 9.36861H1.74038C1.68293 9.36856 1.62624 9.38165 1.57467 9.4069C1.5231 9.4321 1.47807 9.46881 1.44306 9.51417C1.408 9.55959 1.38392 9.61234 1.37262 9.66849C1.36138 9.72465 1.36322 9.78254 1.37804 9.83784L1.38152 9.8499C1.40294 9.92917 1.45001 9.99923 1.51538 10.0492C1.58081 10.0992 1.66085 10.1264 1.74329 10.1266H12.31C12.3928 10.1264 12.4725 10.0992 12.5379 10.0491C12.6039 9.99918 12.6509 9.92917 12.6723 9.8499Z" />
<path d="M0.380788 10.1266C0.591116 10.1266 0.761526 9.95672 0.761526 9.74726C0.761526 9.53775 0.591116 9.368 0.380788 9.368C0.170512 9.368 0 9.53775 0 9.74726C0 9.95672 0.170512 10.1266 0.380788 10.1266Z" />
<path d="M3.32098 11.8448C3.53125 11.8448 3.70176 11.675 3.70176 11.4655C3.70176 11.256 3.53125 11.0862 3.32098 11.0862C3.11065 11.0862 2.94024 11.256 2.94024 11.4655C2.94024 11.675 3.11065 11.8448 3.32098 11.8448Z" />
<path d="M9.79849 15.2817C10.0088 15.2817 10.1793 15.1119 10.1793 14.9024C10.1793 14.693 10.0088 14.5231 9.79849 14.5231C9.58827 14.5231 9.41776 14.693 9.41776 14.9024C9.41776 15.1119 9.58827 15.2817 9.79849 15.2817Z" />
<path d="M5.81832 16.9999C6.0286 16.9999 6.19906 16.8301 6.19906 16.6206C6.19906 16.4112 6.0286 16.2414 5.81832 16.2414C5.608 16.2414 5.43759 16.4112 5.43759 16.6206C5.43759 16.8301 5.608 16.9999 5.81832 16.9999Z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 5.3 KiB

25
src/utils/web3.ts
View File

@ -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
}