diff --git a/client/src/components/molecules/AssetTeaser.tsx b/client/src/components/molecules/AssetTeaser.tsx index c0d4df5..0f11cbd 100644 --- a/client/src/components/molecules/AssetTeaser.tsx +++ b/client/src/components/molecules/AssetTeaser.tsx @@ -1,4 +1,4 @@ -import React from 'react' +import React, { useContext } from 'react' import { Link } from 'react-router-dom' import moment from 'moment' import Dotdotdot from 'react-dotdotdot' @@ -7,6 +7,7 @@ import styles from './AssetTeaser.module.scss' import CategoryImage from '../atoms/CategoryImage' import { allowPricing } from '../../config' import Web3 from 'web3' +import { User } from '../../context' const AssetTeaser = ({ asset, @@ -19,6 +20,7 @@ const AssetTeaser = ({ }) => { const { attributes } = asset.findServiceByType('metadata') const { main, additionalInformation } = attributes + const { network } = useContext(User) return list ? (
@@ -38,7 +40,7 @@ const AssetTeaser = ({ minimal ? cx(styles.asset, styles.minimal) : styles.asset } > - + {additionalInformation && additionalInformation.categories && !minimal && ( diff --git a/client/src/components/molecules/NetworkSwitcher.module.scss b/client/src/components/molecules/NetworkSwitcher.module.scss new file mode 100644 index 0000000..4e47343 --- /dev/null +++ b/client/src/components/molecules/NetworkSwitcher.module.scss @@ -0,0 +1,44 @@ +@import '../../styles/variables'; + +.networkListWrapper { + position: relative; + cursor: pointer; + font-size: $font-size-mini; +} + +.networkList { + position: absolute; + border: 1px solid $brand-grey-lighter; + padding: 8px; + border-radius: $border-radius; + max-width: 200px; + display: none; +} + +.networkListWrapper:hover .networkList { + display: block; +} + +.networkList li { + cursor: pointer; + font-size: $font-size-mini; + text-align: left; +} + +.networkList li span { + text-transform: capitalize; +} + +.networkList li:hover { + color: $brand-violet; + font-size: $font-size-mini; +} + +.networkList li:before { + display: none; +} + +.selected { + color: $brand-violet; + font-weight: $font-weight-bold; +} diff --git a/client/src/components/molecules/NetworkSwitcher.tsx b/client/src/components/molecules/NetworkSwitcher.tsx index 1b9cc22..1e73b37 100644 --- a/client/src/components/molecules/NetworkSwitcher.tsx +++ b/client/src/components/molecules/NetworkSwitcher.tsx @@ -2,6 +2,7 @@ import React, { useState, useContext, useEffect } from 'react' import { urlq } from '../../utils/utils' import { CONNECTIONS } from '../../config' import { User } from '../../context' +import styles from './NetworkSwitcher.module.scss' const networkUrlParam = urlq.get('network') || '' @@ -28,7 +29,7 @@ export function NetworkSwitcher() { }, []) */ - const userContext = useContext(User) + const { network } = useContext(User) const switchNetwork = (networkName: string): any => // Force page to get refreshed @@ -36,28 +37,20 @@ export function NetworkSwitcher() { //userContext.switchNetwork(networkName, getNetworkConfig(networkName)) return ( -
-