From 0d4d955194a07ed21a016273373f17b8da5cbbe5 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Wed, 3 Apr 2019 16:39:13 +0200 Subject: [PATCH 1/8] success message styling --- .../src/components/atoms/Button.module.scss | 1 + client/src/components/atoms/Button.tsx | 25 ++++++++++++--- .../Publish/StepRegisterContent.module.scss | 32 +++++++++++++++++++ .../routes/Publish/StepRegisterContent.tsx | 15 +++++---- 4 files changed, 62 insertions(+), 11 deletions(-) diff --git a/client/src/components/atoms/Button.module.scss b/client/src/components/atoms/Button.module.scss index 1726a92..1fb2f81 100644 --- a/client/src/components/atoms/Button.module.scss +++ b/client/src/components/atoms/Button.module.scss @@ -66,6 +66,7 @@ padding: 0; color: $brand-pink; font-size: $font-size-base; + font-weight: $font-weight-base; font-family: inherit; box-shadow: none; cursor: pointer; diff --git a/client/src/components/atoms/Button.tsx b/client/src/components/atoms/Button.tsx index 473db50..4beb571 100644 --- a/client/src/components/atoms/Button.tsx +++ b/client/src/components/atoms/Button.tsx @@ -1,4 +1,5 @@ import React, { PureComponent } from 'react' +import { Link } from 'react-router-dom' import cx from 'classnames' import styles from './Button.module.scss' @@ -10,6 +11,7 @@ interface ButtonProps { href?: string onClick?: any disabled?: boolean + to?: string } export default class Button extends PureComponent { @@ -21,6 +23,7 @@ export default class Button extends PureComponent { href, children, className, + to, ...props } = this.props @@ -32,11 +35,23 @@ export default class Button extends PureComponent { classes = styles.button } - return href ? ( - - {children} - - ) : ( + if (to) { + return ( + + {children} + + ) + } + + if (href) { + return ( + + {children} + + ) + } + + return ( diff --git a/client/src/routes/Publish/StepRegisterContent.module.scss b/client/src/routes/Publish/StepRegisterContent.module.scss index 60a5936..ce10169 100644 --- a/client/src/routes/Publish/StepRegisterContent.module.scss +++ b/client/src/routes/Publish/StepRegisterContent.module.scss @@ -3,3 +3,35 @@ .message { margin-bottom: $spacer; } + +.success { + composes: message; + background: $green; + padding: $spacer / 1.5; + border-radius: $border-radius; + color: $brand-white; + font-weight: $font-weight-bold; + text-align: center; + + &, + a, + button { + color: $brand-white; + } + + a, + button { + transition: color .2s ease-out; + + &:hover, + &:focus { + color: $brand-pink; + transform: none; + } + } + + a { + display: inline-block; + margin-right: $spacer; + } +} diff --git a/client/src/routes/Publish/StepRegisterContent.tsx b/client/src/routes/Publish/StepRegisterContent.tsx index 566f36a..982141f 100644 --- a/client/src/routes/Publish/StepRegisterContent.tsx +++ b/client/src/routes/Publish/StepRegisterContent.tsx @@ -1,6 +1,7 @@ import React, { PureComponent } from 'react' import Web3message from '../../components/organisms/Web3message' import Spinner from '../../components/atoms/Spinner' +import Button from '../../components/atoms/Button' import styles from './StepRegisterContent.module.scss' interface StepRegisterContentProps { @@ -26,11 +27,14 @@ export default class StepRegisterContent extends PureComponent< ) public publishedState = () => ( -
- Your asset is published! See it{' '} - here, submit - another asset by clicking{' '} - this.props.toStart()}>here +
+

Your asset is published!

+ +
) @@ -38,7 +42,6 @@ export default class StepRegisterContent extends PureComponent< return ( <> - {this.props.state.isPublishing ? ( this.publishingState() ) : this.props.state.publishingError ? ( From de91b301f02c0f7d0a8f44100e8ae9e487ac92d1 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Wed, 3 Apr 2019 16:51:54 +0200 Subject: [PATCH 2/8] new asset file style --- client/src/routes/Details/AssetDetails.tsx | 15 +++++++++------ .../Details/AssetFilesDetails.module.scss | 17 +++++++++++++++-- client/src/styles/_variables.scss | 2 ++ client/src/styles/global.scss | 2 +- 4 files changed, 27 insertions(+), 9 deletions(-) diff --git a/client/src/routes/Details/AssetDetails.tsx b/client/src/routes/Details/AssetDetails.tsx index 5fbeffe..d79736f 100644 --- a/client/src/routes/Details/AssetDetails.tsx +++ b/client/src/routes/Details/AssetDetails.tsx @@ -10,6 +10,13 @@ interface AssetDetailsProps { } export default class AssetDetails extends PureComponent { + private datafilesLine = (files: any) => { + if (files.length === 1) { + return {files.length} data file + } + return {files.length} data files + } + public render() { const { metadata, ddo } = this.props const { base } = metadata @@ -32,18 +39,14 @@ export default class AssetDetails extends PureComponent { /> - {base.categories ? ( + {base.categories && ( // TODO: Make this link to search for respective category {base.categories[0]} - ) : ( - Fake Category )} - {base.files && ( - {base.files.length} data files - )} + {base.files && this.datafilesLine(base.files)}
diff --git a/client/src/routes/Details/AssetFilesDetails.module.scss b/client/src/routes/Details/AssetFilesDetails.module.scss index 9eb32b5..9709932 100644 --- a/client/src/routes/Details/AssetFilesDetails.module.scss +++ b/client/src/routes/Details/AssetFilesDetails.module.scss @@ -18,16 +18,29 @@ .file { display: inline-block; - border: .1rem solid $brand-grey-light; + background: $brand-grey; padding: $spacer $spacer / 2; text-align: left; margin-left: $spacer / 4; margin-right: $spacer / 4; + position: relative; + min-height: 100px; + + &:before { + content: ''; + position: absolute; + right: 0; + top: 0; + width: 0; + height: 0; + border-top: 1rem solid $body-background; + border-left: 1rem solid transparent; + } li { font-size: $font-size-small; font-weight: $font-weight-bold; - color: $brand-grey-light; + color: $brand-white; &:before { display: none; diff --git a/client/src/styles/_variables.scss b/client/src/styles/_variables.scss index bd89d12..c645247 100644 --- a/client/src/styles/_variables.scss +++ b/client/src/styles/_variables.scss @@ -18,6 +18,8 @@ $yellow: #eac146; $brand-gradient: linear-gradient(to right bottom, $brand-purple, $brand-pink); +$body-background: darken($brand-white, 1%); + // Fonts $font-family-base: 'Sharp Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; diff --git a/client/src/styles/global.scss b/client/src/styles/global.scss index 006cac5..f48f88d 100644 --- a/client/src/styles/global.scss +++ b/client/src/styles/global.scss @@ -29,7 +29,7 @@ body { font-family: $font-family-base; font-weight: $font-weight-base; line-height: $line-height; - background: darken($brand-white, 1%); + background: $body-background; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; From 3fb426413dc4adcfb2fc7c4e5c27e509abc9136e Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Wed, 3 Apr 2019 18:01:00 +0200 Subject: [PATCH 3/8] prepare outputting more status messages from network --- client/src/App.tsx | 6 +++-- .../src/routes/Details/AssetFilesDetails.tsx | 23 +++++++++++++++---- 2 files changed, 22 insertions(+), 7 deletions(-) diff --git a/client/src/App.tsx b/client/src/App.tsx index 63cb397..5bf933f 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -40,6 +40,7 @@ interface AppState { web3: Web3 ocean: {} startLogin: () => void + message: string } class App extends Component<{}, AppState> { @@ -94,7 +95,8 @@ class App extends Component<{}, AppState> { account: '', ocean: {}, startLogin: this.startLogin, - requestFromFaucet: this.requestFromFaucet + requestFromFaucet: this.requestFromFaucet, + message: 'Connecting to Ocean...' } public async componentDidMount() { @@ -185,7 +187,7 @@ class App extends Component<{}, AppState> {
{this.state.isLoading ? (
- +
) : ( diff --git a/client/src/routes/Details/AssetFilesDetails.tsx b/client/src/routes/Details/AssetFilesDetails.tsx index a2fe3c2..068ab93 100644 --- a/client/src/routes/Details/AssetFilesDetails.tsx +++ b/client/src/routes/Details/AssetFilesDetails.tsx @@ -11,13 +11,26 @@ interface AssetFilesDetailsProps { ddo: any } +interface AssetFilesDetailsState { + isLoading: boolean + error: string + message: string +} + export default class AssetFilesDetails extends PureComponent< - AssetFilesDetailsProps + AssetFilesDetailsProps, + AssetFilesDetailsState > { - public state = { isLoading: false, error: null } + public state = { + isLoading: false, + error: '', + message: 'Decrypting files, please sign with your wallet...' + } + + private resetState = () => this.setState({ isLoading: true, error: '' }) private purchaseAsset = async (ddo: any) => { - this.setState({ isLoading: true, error: null }) + this.resetState() const { ocean } = this.context const accounts = await ocean.accounts.list() @@ -69,7 +82,7 @@ export default class AssetFilesDetails extends PureComponent< {this.state.isLoading ? ( - + ) : ( + )} + + {this.state.error !== '' && ( +
{this.state.error}
+ )} + + ) + } +} + +AssetFile.contextType = User diff --git a/client/src/routes/Details/AssetFilesDetails.module.scss b/client/src/routes/Details/AssetFilesDetails.module.scss index 9709932..c52cfe6 100644 --- a/client/src/routes/Details/AssetFilesDetails.module.scss +++ b/client/src/routes/Details/AssetFilesDetails.module.scss @@ -1,49 +1,8 @@ @import '../../styles/variables'; -.buttonMain { - margin: auto; - margin-bottom: $spacer / 2; - display: block; -} - -.error { - text-align: center; - color: $red; - font-size: $font-size-small; -} - .files { text-align: center; -} - -.file { - display: inline-block; - background: $brand-grey; - padding: $spacer $spacer / 2; - text-align: left; - margin-left: $spacer / 4; - margin-right: $spacer / 4; - position: relative; - min-height: 100px; - - &:before { - content: ''; - position: absolute; - right: 0; - top: 0; - width: 0; - height: 0; - border-top: 1rem solid $body-background; - border-left: 1rem solid transparent; - } - - li { - font-size: $font-size-small; - font-weight: $font-weight-bold; - color: $brand-white; - - &:before { - display: none; - } - } + display: flex; + flex-wrap: wrap; + justify-content: center; } diff --git a/client/src/routes/Details/AssetFilesDetails.tsx b/client/src/routes/Details/AssetFilesDetails.tsx index 068ab93..1c7cfe0 100644 --- a/client/src/routes/Details/AssetFilesDetails.tsx +++ b/client/src/routes/Details/AssetFilesDetails.tsx @@ -1,64 +1,11 @@ import React, { PureComponent } from 'react' -import { Logger } from '@oceanprotocol/squid' -import filesize from 'filesize' -import { User } from '../../context/User' -import Button from '../../components/atoms/Button' -import Spinner from '../../components/atoms/Spinner' +import AssetFile from './AssetFile' import styles from './AssetFilesDetails.module.scss' -interface AssetFilesDetailsProps { +export default class AssetFilesDetails extends PureComponent<{ files: any[] ddo: any -} - -interface AssetFilesDetailsState { - isLoading: boolean - error: string - message: string -} - -export default class AssetFilesDetails extends PureComponent< - AssetFilesDetailsProps, - AssetFilesDetailsState -> { - public state = { - isLoading: false, - error: '', - message: 'Decrypting files, please sign with your wallet...' - } - - private resetState = () => this.setState({ isLoading: true, error: '' }) - - private purchaseAsset = async (ddo: any) => { - this.resetState() - - const { ocean } = this.context - const accounts = await ocean.accounts.list() - - try { - const service = ddo.findServiceByType('Access') - const agreementId = await ocean.assets.order( - ddo.id, - service.serviceDefinitionId, - accounts[0] - ) - - const path = await ocean.assets.consume( - agreementId, - ddo.id, - service.serviceDefinitionId, - accounts[0], - '' - ) - Logger.log('path', path) - - this.setState({ isLoading: false }) - } catch (error) { - Logger.log('error', error) - this.setState({ isLoading: false, error: error.message }) - } - } - +}> { public render() { const { files, ddo } = this.props @@ -66,41 +13,12 @@ export default class AssetFilesDetails extends PureComponent< <>
{files.map(file => ( -
    -
  • - {file.contentType && - file.contentType.split('/')[1]} -
    • -
  • - {file.contentLength && - filesize(file.contentLength)} -
    • - {/*
  • {file.encoding}
    • */} - {/*
  • {file.compression}
    • */} -
+ ))}
- - {this.state.isLoading ? ( - - ) : ( - - )} - - {this.state.error !== '' && ( -
{this.state.error}
- )} ) : (
No files attached.
) } } - -AssetFilesDetails.contextType = User From 9b9cbfaff3213a2ad461846469a0d10c6c6138fa Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Thu, 4 Apr 2019 14:07:16 +0200 Subject: [PATCH 5/8] filter some menu items based on Web3 status --- client/src/components/organisms/Header.tsx | 38 +++++++++++++++------- client/src/data/menu.json | 9 +++-- 2 files changed, 33 insertions(+), 14 deletions(-) diff --git a/client/src/components/organisms/Header.tsx b/client/src/components/organisms/Header.tsx index 36d133e..553c136 100644 --- a/client/src/components/organisms/Header.tsx +++ b/client/src/components/organisms/Header.tsx @@ -1,12 +1,28 @@ import React from 'react' import { NavLink } from 'react-router-dom' import { ReactComponent as Logo } from '@oceanprotocol/art/logo/logo.svg' +import { User } from '../../context/User' import AccountStatus from '../molecules/AccountStatus' import styles from './Header.module.scss' import menu from '../../data/menu.json' import meta from '../../data/meta.json' +const MenuItem = ({ item, isWeb3 }: { item: any; isWeb3: boolean }) => { + if (item.web3 && !isWeb3) return null + + return ( + + {item.title} + + ) +} + const Header = () => (
@@ -16,17 +32,17 @@ const Header = () => (
diff --git a/client/src/data/menu.json b/client/src/data/menu.json index 9f1f822..3ee7b03 100644 --- a/client/src/data/menu.json +++ b/client/src/data/menu.json @@ -1,15 +1,18 @@ [ { "title": "Publish", - "link": "/publish" + "link": "/publish", + "web3": true }, { "title": "History", - "link": "/history" + "link": "/history", + "web3": true }, { "title": "Faucet", - "link": "/faucet" + "link": "/faucet", + "web3": true }, { "title": "About", From 67f6d3f508b9becc2a822e18580a03a2d456de91 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Thu, 4 Apr 2019 14:08:13 +0200 Subject: [PATCH 6/8] kick out prototyping stuff * closes #58 --- client/src/data/menu.json | 4 ---- client/src/routes/Details/AssetDetails.tsx | 4 ++-- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/client/src/data/menu.json b/client/src/data/menu.json index 3ee7b03..7f48dd7 100644 --- a/client/src/data/menu.json +++ b/client/src/data/menu.json @@ -17,9 +17,5 @@ { "title": "About", "link": "/about" - }, - { - "title": "Styleguide", - "link": "/styleguide" } ] diff --git a/client/src/routes/Details/AssetDetails.tsx b/client/src/routes/Details/AssetDetails.tsx index d79736f..09add94 100644 --- a/client/src/routes/Details/AssetDetails.tsx +++ b/client/src/routes/Details/AssetDetails.tsx @@ -80,9 +80,9 @@ export default class AssetDetails extends PureComponent { ddo={ddo} /> - 
+                {/* 
                     {JSON.stringify(metadata, null, 2)}
-                

+
*/} ) } From 7df93c89ad4930a1b7a390301eec3da18777383c Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Thu, 4 Apr 2019 14:14:09 +0200 Subject: [PATCH 7/8] switch to datePublished in asset history --- client/src/components/molecules/Asset.tsx | 7 +++++-- client/src/components/organisms/AssetsUser.tsx | 2 +- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/client/src/components/molecules/Asset.tsx b/client/src/components/molecules/Asset.tsx index db1d048..8bd1296 100644 --- a/client/src/components/molecules/Asset.tsx +++ b/client/src/components/molecules/Asset.tsx @@ -12,8 +12,11 @@ const AssetLink = ({ asset, list }: { asset: any; list?: boolean }) => {

{base.name}

-
- {moment(base.dateCreated, 'YYYYMMDD').fromNow()} +
+ {moment(base.datePublished, 'YYYYMMDD').fromNow()}
diff --git a/client/src/components/organisms/AssetsUser.tsx b/client/src/components/organisms/AssetsUser.tsx index d7833d5..4089868 100644 --- a/client/src/components/organisms/AssetsUser.tsx +++ b/client/src/components/organisms/AssetsUser.tsx @@ -52,7 +52,7 @@ export default class AssetsUser extends PureComponent<
{this.props.recent && (

- Your Latest Data Sets + Your Latest Published Data Sets

)} From d78b80a76b62fa47dba26195ed0b1445ab9457a9 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Thu, 4 Apr 2019 16:49:15 +0200 Subject: [PATCH 8/8] bump squid-js --- client/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/package.json b/client/package.json index 2f830f0..a3b11c0 100644 --- a/client/package.json +++ b/client/package.json @@ -11,7 +11,7 @@ }, "dependencies": { "@oceanprotocol/art": "^2.2.0", - "@oceanprotocol/squid": "^0.5.0", + "@oceanprotocol/squid": "^0.5.1", "@oceanprotocol/typographies": "^0.1.0", "classnames": "^2.2.6", "filesize": "^4.1.2",