Merge pull request #151 from oceanprotocol/feature/events-publish

output event messages during publishing flow
2023-03-15 18:03:00 +01:00 · 2019-06-03 10:30:19 +02:00 · 2019-06-03 10:30:19 +02:00 · 5a0689703d
commit 5a0689703d
parent 7b60127899 b27c458fb2
7 changed files with 61 additions and 124 deletions
--- a/client/package-lock.json
+++ b/client/package-lock.json
@ -1296,14 +1296,13 @@
      "integrity": "sha512-nOpbSE/BG+tQBfLXZ/EqSOvUPzOuot84vHxjAfEU8K3v4eOnqFJVo+oyB7KlcF87wBJXDmi/Ir9qHY4c0Saipg=="
    },
    "@oceanprotocol/squid": {
-      "version": "0.5.12",
-      "resolved": "https://registry.npmjs.org/@oceanprotocol/squid/-/squid-0.5.12.tgz",
-      "integrity": "sha512-RhP0wK4nA9ro/HQl3SohJ21XknxD1PtOCY+gQS3iUyyAabcGKVgMrpcuKKPi7SJLMBpUlV5O1V+4qPozCQZbWg==",
+      "version": "0.5.14",
+      "resolved": "https://registry.npmjs.org/@oceanprotocol/squid/-/squid-0.5.14.tgz",
+      "integrity": "sha512-LyJ9Dv3kJD/th7bqk5iTqDNlQfidy4j5bTcLbzCIFvzFqPztTCWRON01G52z1A1jCYXBhtncX2jzwaOZDdmxsg==",
      "requires": {
        "@oceanprotocol/keeper-contracts": "^0.9.7",
        "bignumber.js": "^8.1.1",
        "deprecated-decorator": "^0.1.6",
-        "ethereumjs-util": "^6.1.0",
        "node-fetch": "^2.3.0",
        "save-file": "^2.3.1",
        "uuid": "^3.3.2",
@ -2966,22 +2965,6 @@
      "integrity": "sha512-Un7MIEDdUC5gNpcGDV97op1Ywk748MpHcFTHoYs6qnj1Z3j7I53VG3nwZhKzoBZmbdRNnb6WRdFlwl7tSDuZGw==",
      "dev": true
    },
-    "bindings": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
-      "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
-      "requires": {
-        "file-uri-to-path": "1.0.0"
-      }
-    },
-    "bip66": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/bip66/-/bip66-1.1.5.tgz",
-      "integrity": "sha1-AfqHSHhcpwlV1QESF9GzE5lpyiI=",
-      "requires": {
-        "safe-buffer": "^5.0.1"
-      }
-    },
    "bl": {
      "version": "1.2.2",
      "resolved": "https://registry.npmjs.org/bl/-/bl-1.2.2.tgz",
@ -5361,16 +5344,6 @@
      "integrity": "sha1-3vHxyl1gWdJKdm5YeULCEQbOEnU=",
      "dev": true
    },
-    "drbg.js": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/drbg.js/-/drbg.js-1.0.1.tgz",
-      "integrity": "sha1-Pja2xCs3BDgjzbwzLVjzHiRFSAs=",
-      "requires": {
-        "browserify-aes": "^1.0.6",
-        "create-hash": "^1.1.2",
-        "create-hmac": "^1.1.4"
-      }
-    },
    "dtype": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/dtype/-/dtype-2.0.0.tgz",
@ -6053,20 +6026,6 @@
      "version": "github:MyEtherWallet/blockies#d36f87e50149aacafb34f099fe0bea1df76e010c",
      "from": "github:MyEtherWallet/blockies"
    },
-    "ethereumjs-util": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/ethereumjs-util/-/ethereumjs-util-6.1.0.tgz",
-      "integrity": "sha512-URESKMFbDeJxnAxPppnk2fN6Y3BIatn9fwn76Lm8bQlt+s52TpG8dN9M66MLPuRAiAOIqL3dfwqWJf0sd0fL0Q==",
-      "requires": {
-        "bn.js": "^4.11.0",
-        "create-hash": "^1.1.2",
-        "ethjs-util": "0.1.6",
-        "keccak": "^1.0.2",
-        "rlp": "^2.0.0",
-        "safe-buffer": "^5.1.1",
-        "secp256k1": "^3.0.1"
-      }
-    },
    "ethers": {
      "version": "4.0.0-beta.1",
      "resolved": "https://registry.npmjs.org/ethers/-/ethers-4.0.0-beta.1.tgz",
@ -6137,15 +6096,6 @@
        }
      }
    },
-    "ethjs-util": {
-      "version": "0.1.6",
-      "resolved": "https://registry.npmjs.org/ethjs-util/-/ethjs-util-0.1.6.tgz",
-      "integrity": "sha512-CUnVOQq7gSpDHZVVrQW8ExxUETWrnrvXYvYz55wOU8Uj4VCgw56XC2B/fVqQN+f7gmrnRHSLVnFAwsCuNwji8w==",
-      "requires": {
-        "is-hex-prefixed": "1.0.0",
-        "strip-hex-prefix": "1.0.0"
-      }
-    },
    "eventemitter3": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-1.1.1.tgz",
@ -6544,11 +6494,6 @@
      "resolved": "https://registry.npmjs.org/file-type/-/file-type-5.2.0.tgz",
      "integrity": "sha1-LdvqfHP/42No365J3DOMBYwritY="
    },
-    "file-uri-to-path": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
-      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw=="
-    },
    "filesize": {
      "version": "4.1.2",
      "resolved": "https://registry.npmjs.org/filesize/-/filesize-4.1.2.tgz",
@ -9931,17 +9876,6 @@
        "array-includes": "^3.0.3"
      }
    },
-    "keccak": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/keccak/-/keccak-1.4.0.tgz",
-      "integrity": "sha512-eZVaCpblK5formjPjeTBik7TAg+pqnDrMHIffSvi9Lh7PQgM1+hSzakUeZFCk9DVVG0dacZJuaz2ntwlzZUIBw==",
-      "requires": {
-        "bindings": "^1.2.1",
-        "inherits": "^2.0.3",
-        "nan": "^2.2.1",
-        "safe-buffer": "^5.1.0"
-      }
-    },
    "keccakjs": {
      "version": "0.2.3",
      "resolved": "https://registry.npmjs.org/keccakjs/-/keccakjs-0.2.3.tgz",
@ -13816,15 +13750,6 @@
        "inherits": "^2.0.1"
      }
    },
-    "rlp": {
-      "version": "2.2.3",
-      "resolved": "https://registry.npmjs.org/rlp/-/rlp-2.2.3.tgz",
-      "integrity": "sha512-l6YVrI7+d2vpW6D6rS05x2Xrmq8oW7v3pieZOJKBEdjuTF4Kz/iwk55Zyh1Zaz+KOB2kC8+2jZlp2u9L4tTzCQ==",
-      "requires": {
-        "bn.js": "^4.11.1",
-        "safe-buffer": "^5.1.1"
-      }
-    },
    "rsvp": {
      "version": "4.8.4",
      "resolved": "https://registry.npmjs.org/rsvp/-/rsvp-4.8.4.tgz",
@ -14081,21 +14006,6 @@
        }
      }
    },
-    "secp256k1": {
-      "version": "3.7.1",
-      "resolved": "https://registry.npmjs.org/secp256k1/-/secp256k1-3.7.1.tgz",
-      "integrity": "sha512-1cf8sbnRreXrQFdH6qsg2H71Xw91fCCS9Yp021GnUNJzWJS/py96fS4lHbnTnouLp08Xj6jBoBB6V78Tdbdu5g==",
-      "requires": {
-        "bindings": "^1.5.0",
-        "bip66": "^1.1.5",
-        "bn.js": "^4.11.8",
-        "create-hash": "^1.2.0",
-        "drbg.js": "^1.0.1",
-        "elliptic": "^6.4.1",
-        "nan": "^2.14.0",
-        "safe-buffer": "^5.1.2"
-      }
-    },
    "seek-bzip": {
      "version": "1.0.5",
      "resolved": "https://registry.npmjs.org/seek-bzip/-/seek-bzip-1.0.5.tgz",
--- a/client/package.json
+++ b/client/package.json
@ -13,7 +13,7 @@
  },
  "dependencies": {
    "@oceanprotocol/art": "^2.2.0",
-    "@oceanprotocol/squid": "^0.5.12",
+    "@oceanprotocol/squid": "^0.5.14",
    "@oceanprotocol/typographies": "^0.1.0",
    "@sindresorhus/slugify": "^0.9.1",
    "axios": "^0.18.0",
--- a/client/src/routes/Publish/Step.tsx
+++ b/client/src/routes/Publish/Step.tsx
@ -154,7 +154,13 @@ export default class Step extends PureComponent<StepProps, {}> {
                    {this.nextButton()}

                    {lastStep && (
-                        <Button disabled={!this.context.isLogged} primary>
+                        <Button
+                            disabled={
+                                !this.context.isLogged ||
+                                this.props.state.isPublishing
+                            }
+                            primary
+                        >
                            Register asset
                        </Button>
                    )}
--- a/client/src/routes/Publish/StepRegisterContent.test.tsx
+++ b/client/src/routes/Publish/StepRegisterContent.test.tsx
@ -1,11 +1,12 @@
 import React from 'react'
 import { render, fireEvent } from '@testing-library/react'
 import { BrowserRouter as Router } from 'react-router-dom'
-import StepRegisterContent from './StepRegisterContent'
+import StepRegisterContent, { messages } from './StepRegisterContent'

 const stateMock = {
    publishedDid: '',
    publishingError: '',
+    publishingStep: 0,
    isPublishing: false,
    isPublished: false
 }
@ -36,7 +37,7 @@ describe('StepRegisterContent', () => {
            </Router>
        )
        expect(container.querySelector('.spinnerMessage')).toHaveTextContent(
-            'Please sign with your crypto wallet'
+            messages[stateMock.publishingStep].replace(/<(?:.|\n)*?>/gm, '')
        )
    })

--- a/client/src/routes/Publish/StepRegisterContent.tsx
+++ b/client/src/routes/Publish/StepRegisterContent.tsx
@ -4,6 +4,17 @@ import Spinner from '../../components/atoms/Spinner'
 import Button from '../../components/atoms/Button'
 import styles from './StepRegisterContent.module.scss'

+export const messages: any = {
+    0: '1/4<br />Encrypting files...',
+    1: '1/4<br />Successfully encrypted files.',
+    2: '2/4<br />Generating proof...',
+    3: '2/4<br />Successfully generated proof.',
+    4: '3/4<br /> Registering DID...',
+    5: '3/4<br /> Successfully registered DID.',
+    6: '4/4<br /> Storing DDO...',
+    7: '4/4<br /> Successfully stored DDO.'
+}
+
 interface StepRegisterContentProps {
    tryAgain(): void
    toStart(): void
@ -12,6 +23,7 @@ interface StepRegisterContentProps {
        isPublishing: boolean
        publishingError: string
        isPublished: boolean
+        publishingStep: number
    }
    content?: string
 }
@ -20,9 +32,13 @@ export default class StepRegisterContent extends PureComponent<
    StepRegisterContentProps,
    {}
 > {
-    public publishingState = () => (
-        <Spinner message={'Please sign with your crypto wallet'} />
-    )
+    public publishingState = () => {
+        const { publishingStep } = this.props.state
+
+        const message = messages[publishingStep]
+
+        return <Spinner message={message} />
+    }

    public errorState = () => (
        <div className={styles.message}>
--- a/client/src/routes/Publish/index.tsx
+++ b/client/src/routes/Publish/index.tsx
@ -30,11 +30,14 @@ interface PublishState {
    isPublished?: boolean
    publishedDid?: string
    publishingError?: string
+    publishingStep?: number
    currentStep?: number
    validationStatus?: any
 }

-class Publish extends Component<{}, PublishState> {
+export default class Publish extends Component<{}, PublishState> {
+    public static contextType = User
+
    public state = {
        currentStep: 1,
        name: '',
@ -51,6 +54,7 @@ class Publish extends Component<{}, PublishState> {
        isPublished: false,
        publishedDid: '',
        publishingError: '',
+        publishingStep: 0,
        validationStatus: {
            1: { name: false, files: false, allFieldsValid: false },
            2: {
@ -126,6 +130,7 @@ class Publish extends Component<{}, PublishState> {
            categories: '',
            isPublishing: false,
            isPublished: false,
+            publishingStep: 0,
            currentStep: 1
        })
    }
@ -251,14 +256,15 @@ class Publish extends Component<{}, PublishState> {

    private registerAsset = async (event: FormEvent<HTMLFormElement>) => {
        event.preventDefault()
-        ReactGA.event({
-            category: 'Publish',
-            action: 'registerAsset-start'
-        })
+
+        ReactGA.event({ category: 'Publish', action: 'registerAsset-start' })
+
        this.setState({
            publishingError: '',
-            isPublishing: true
+            isPublishing: true,
+            publishingStep: 0
        })
+
        const { ocean } = this.context
        const account = await ocean.accounts.list()
        const newAsset = {
@ -286,32 +292,33 @@ class Publish extends Component<{}, PublishState> {
        }

        try {
-            const asset = await this.context.ocean.assets.create(
-                newAsset,
-                account[0]
-            )
+            const asset = await this.context.ocean.assets
+                .create(newAsset, account[0])
+                .next((publishingStep: number) =>
+                    this.setState({ publishingStep })
+                )
+
            this.setState({
                publishedDid: asset.id,
                isPublished: true
            })
+
            ReactGA.event({
                category: 'Publish',
-                action: 'registerAsset-end' + asset.id
+                action: `registerAsset-end ${asset.id}`
            })
-        } catch (e) {
+        } catch (error) {
            // make readable errors
-            Logger.log('error:', e)
-            this.setState({
-                publishingError: e.message
-            })
+            Logger.error('error:', error.message)
+            this.setState({ publishingError: error.message })
+
            ReactGA.event({
                category: 'Publish',
-                action: 'registerAsset-error' + e.message
+                action: `registerAsset-error ${error.message}`
            })
        }
-        this.setState({
-            isPublishing: false
-        })
+
+        this.setState({ isPublishing: false })
    }

    public render() {
@ -355,6 +362,3 @@ class Publish extends Component<{}, PublishState> {
        )
    }
 }
-
-Publish.contextType = User
-export default Publish
--- a/library.json
+++ b/library.json
@ -19,7 +19,7 @@
    },
    {
      "name": "squid-js",
-      "version": "~0.5.12"
+      "version": "~0.5.14"
    },
    {
      "name": "faucet",