diff --git a/client/src/components/atoms/Account.module.scss b/client/src/components/atoms/Account.module.scss index 3bff029..8f6a92e 100644 --- a/client/src/components/atoms/Account.module.scss +++ b/client/src/components/atoms/Account.module.scss @@ -20,6 +20,8 @@ width: 100%; margin-left: calc(1.5rem + #{$spacer / 3}); font-size: $font-size-mini; + font-weight: $font-weight-bold; + opacity: .7; } .blockies { diff --git a/client/src/components/organisms/WalletSelector.module.scss b/client/src/components/organisms/WalletSelector.module.scss index 855649f..9e3be32 100644 --- a/client/src/components/organisms/WalletSelector.module.scss +++ b/client/src/components/organisms/WalletSelector.module.scss @@ -2,8 +2,9 @@ .openLink { margin: 0; - margin-top: $spacer / 2; - margin-left: $spacer; + margin-left: $spacer * 1.5; + font-size: $font-size-small !important; // stylelint-disable-line + text-transform: uppercase; } .info { diff --git a/client/src/components/organisms/Web3message.module.scss b/client/src/components/organisms/Web3message.module.scss index 99c21e3..b8f2bb5 100644 --- a/client/src/components/organisms/Web3message.module.scss +++ b/client/src/components/organisms/Web3message.module.scss @@ -9,20 +9,24 @@ padding-top: $spacer / 2; padding-bottom: $spacer / 2; text-align: left; + font-size: $font-size-small; > div:first-child { margin-bottom: $spacer / 2; + background: $brand-white; + border-radius: $border-radius; + border: 1px solid $brand-grey-lighter; + padding: $spacer / 2; } } .text { - margin-left: $spacer; + padding-left: $spacer * 1.5; display: inline-block; } .status { - position: absolute; - left: 0; - top: $spacer / 1.5; + margin-left: -($spacer / 1.2); + margin-right: $spacer / 2.5; padding: 0; } diff --git a/client/src/components/organisms/Web3message.test.tsx b/client/src/components/organisms/Web3message.test.tsx index 5ae22c4..b8dde63 100644 --- a/client/src/components/organisms/Web3message.test.tsx +++ b/client/src/components/organisms/Web3message.test.tsx @@ -1,5 +1,5 @@ import React from 'react' -import { render, fireEvent } from '@testing-library/react' +import { render } from '@testing-library/react' import Web3message from './Web3message' import { User } from '../../context' import { userMock, userMockConnected } from '../../../__mocks__/user-mock' @@ -16,7 +16,9 @@ describe('Web3message', () => { it('renders with wrongNetwork message', () => { const { container } = render( - + ) @@ -27,9 +29,7 @@ describe('Web3message', () => { it('renders with noAccount message', () => { const { container } = render( - + ) diff --git a/client/src/components/organisms/Web3message.tsx b/client/src/components/organisms/Web3message.tsx index 8fce377..6e382ba 100644 --- a/client/src/components/organisms/Web3message.tsx +++ b/client/src/components/organisms/Web3message.tsx @@ -13,7 +13,7 @@ export default class Web3message extends PureComponent { const { isOceanNetwork, isLogged, isBurner } = this.context return !isOceanNetwork && !isBurner - ? content.wrongNetwork + ? content.wrongNetworkPacific : !isLogged ? content.noAccount : isBurner @@ -26,18 +26,16 @@ export default class Web3message extends PureComponent { public render() { return (
- {this.context.account ? ( + {this.context.account && ( - ) : ( - )} - {' '} +

+ + +

) diff --git a/client/src/data/web3message.json b/client/src/data/web3message.json index edbb663..0378668 100644 --- a/client/src/data/web3message.json +++ b/client/src/data/web3message.json @@ -1,6 +1,8 @@ { "noAccount": "No wallet selected. For publishing and downloading an asset you need to use one.", - "hasBurnerWallet": "

We created a temporary burner wallet for you, allowing you to use all Commons functionality without any setup on your side. This wallet will persist in your browser across sessions, but not across different browsers or devices.

To personalize your experience and improve your security, migrate to MetaMask.", + "hasBurnerWallet": "We created a temporary burner wallet for you, allowing you to use all Commons functionality without any setup on your side. This wallet will persist in your browser across sessions, but not across different browsers or devices. To personalize your experience and improve your security, learn how to migrate to MetaMask.", "hasMetaMaskWallet": "Connected with MetaMask.", - "wrongNetwork": "Not connected to Pacific network.
Please connect in MetaMask with Custom RPC https://pacific.oceanprotocol.com" + "wrongNetworkPacific": "Not connected to Pacific network.
Please connect in MetaMask with Custom RPC https://pacific.oceanprotocol.com", + "wrongNetworkNile": "Not connected to Nile network.
Please connect in MetaMask with Custom RPC https://nile.dev-ocean.com", + "wrongNetworkDuero": "Not connected to Duero network.
Please connect in MetaMask with Custom RPC https://duero.dev-ocean.com" } diff --git a/client/src/routes/About.tsx b/client/src/routes/About.tsx index 799e617..901387b 100644 --- a/client/src/routes/About.tsx +++ b/client/src/routes/About.tsx @@ -1,4 +1,5 @@ import React, { Component } from 'react' +import { Market } from '../context' import Route from '../components/templates/Route' import Content from '../components/atoms/Content' import VersionNumbers from '../components/molecules/VersionNumbers' @@ -6,17 +7,19 @@ import Web3message from '../components/organisms/Web3message' import stylesVersionNumbers from '../components/molecules/VersionNumbers/index.module.scss' class About extends Component { + public static contextType = Market + public render() { return (

Commons is built on top of the Ocean{' '} - Pacific network + {this.context.network} network {' '} and is targeted at enthusiastic data scientists with some crypto experience. It can be used with any diff --git a/client/src/routes/History.test.tsx b/client/src/routes/History.test.tsx index e6eb11b..7bca7e4 100644 --- a/client/src/routes/History.test.tsx +++ b/client/src/routes/History.test.tsx @@ -16,7 +16,6 @@ describe('History', () => { }) it('outputs no wallet selected', () => { - const { container } = render(