move network switcher to the bottom, add network url param to assets links

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 ? (
         <article className={styles.assetList}>
@@ -38,7 +40,7 @@ const AssetTeaser = ({
                 minimal ? cx(styles.asset, styles.minimal) : styles.asset
             }
         >
-            <Link to={`/asset/${asset.id}`}>
+            <Link to={`/asset/${asset.id}?network=${network}`}>
                 {additionalInformation &&
                     additionalInformation.categories &&
                     !minimal && (

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

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 (
-        <div>
+        <div className={styles.networkListWrapper}>
-            <ul>
+            <em>Change</em>
+            <ul className={styles.networkList}>
                 {Object.keys(CONNECTIONS).map((networkName, i) => (
                     <li
                         key={i}
                         onClick={() => switchNetwork(networkName)}
-                        style={{
+                        className={
-                            cursor: 'pointer',
+                            network.toUpperCase() === networkName.toUpperCase()
-                            color:
+                                ? styles.selected
-                                userContext.network.toUpperCase() ===
-                                networkName.toUpperCase()
-                                    ? 'red'
                                 : ''
-                        }}
+                        }
                     >
-                        <span
+                        <span>{networkName}</span>
-                            style={{
-                                textTransform: 'capitalize'
-                            }}
-                        >
-                            {networkName}
-                        </span>
                     </li>
                 ))}
             </ul>

client/src/components/molecules/VersionNumbers/VersionTable.tsx

@@ -5,16 +5,6 @@ import styles from './VersionTable.module.scss'
 import VersionNumber from './VersionNumber'
 import { useParams } from 'react-router-dom'
 
-// const commonsConfig = {
-//   serviceUri,
-//   nodeUri,
-//   aquariusUri,
-//   brizoUri,
-//   brizoAddress,
-//   secretStoreUri,
-//   faucetUri
-// }
-
 import { NetworkSwitcher, oceanConfig } from '../../molecules/NetworkSwitcher'
 
 export const VersionTableContracts = ({

client/src/components/molecules/VersionNumbers/index.module.scss

@@ -11,3 +11,10 @@
     font-size: $font-size-mini;
     margin-top: $spacer;
 }
+
+.versionsMinimalWrapper {
+    display: flex;
+    flex-flow: row;
+    justify-content: center;
+    align-items: baseline;
+}

client/src/components/molecules/VersionNumbers/index.tsx

@@ -8,15 +8,13 @@ import axios from 'axios'
 import { version } from '../../../../package.json'
 import styles from './index.module.scss'
 
-//import { nodeUri, faucetUri } from '../../../config'
-
-import { oceanConfig } from '../../molecules/NetworkSwitcher'
-
 import { User, Market } from '../../../context'
 
 import VersionTable from './VersionTable'
 import VersionStatus from './VersionStatus'
 
+import { NetworkSwitcher, oceanConfig } from '../../molecules/NetworkSwitcher'
+
 const { nodeUri, faucetUri } = oceanConfig
 
 interface VersionNumbersProps {
@@ -172,7 +170,10 @@ export default class VersionNumbers extends PureComponent<
         const { minimal } = this.props
 
         return minimal ? (
+            <div className={styles.versionsMinimalWrapper}>
                 <this.MinimalOutput />
+                <NetworkSwitcher />
+            </div>
         ) : (
             <>
                 <h2 className={styles.versionsTitle} id="#oceanversions">

client/src/context/UserProvider.tsx

@@ -7,10 +7,7 @@ import MarketProvider from './MarketProvider'
 import { MetamaskProvider } from './MetamaskProvider'
 import { BurnerWalletProvider } from './BurnerWalletProvider'
 import { urlq } from '../utils/utils'
-import {
+import { oceanConfig } from '../components/molecules/NetworkSwitcher'
-    NetworkSwitcher,
-    oceanConfig
-} from '../components/molecules/NetworkSwitcher'
 
 const { nodeUri } = oceanConfig
 
@@ -272,7 +269,6 @@ export default class UserProvider extends PureComponent<{}, UserProviderState> {
         return (
             <User.Provider value={this.state}>
                 <MarketProvider ocean={this.state.ocean}>
-                    <NetworkSwitcher />
                     {this.props.children}
                 </MarketProvider>
             </User.Provider>