From c4e71173bae546f4cfc8c55fd96c0aef09324951 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Thu, 12 Sep 2019 11:11:47 +0200
Subject: [PATCH 1/5] fix error output on asset details loading

---
 .../templates/Asset/AssetDetails.tsx          | 168 ++++++++----------
 .../src/components/templates/Asset/index.tsx  |   5 +-
 2 files changed, 79 insertions(+), 94 deletions(-)

diff --git a/client/src/components/templates/Asset/AssetDetails.tsx b/client/src/components/templates/Asset/AssetDetails.tsx
index 371d29e..ac9881a 100644
--- a/client/src/components/templates/Asset/AssetDetails.tsx
+++ b/client/src/components/templates/Asset/AssetDetails.tsx
@@ -21,103 +21,87 @@ export function datafilesLine(files: File[]) {
     return <span>{files.length} data files</span>
 }
 
-export default class AssetDetails extends PureComponent<AssetDetailsProps> {
-    public render() {
-        const { metadata, ddo } = this.props
-        const { base } = metadata
+const Pricing = ({ price }: { price: string }) => (
+    <li>
+        <span className={styles.metaLabel}>
+            <strong>Price</strong>
+        </span>
+        <span className={styles.metaValue}>
+            {price === '0' ? 0 : Web3.utils.fromWei(price.toString())} OCEAN
+        </span>
+    </li>
+)
 
-        return (
-            <>
-                <aside className={styles.metaPrimary}>
-                    <h2
-                        className={styles.copyrightHolder}
-                        title="Copyright Holder"
+export default function AssetDetails({ metadata, ddo }: AssetDetailsProps) {
+    const { base } = metadata
+
+    return (
+        <>
+            <aside className={styles.metaPrimary}>
+                <h2 className={styles.copyrightHolder} title="Copyright Holder">
+                    {base.copyrightHolder}
+                </h2>
+                <div className={styles.metaPrimaryData}>
+                    <span
+                        title={`Date created, published on ${base.datePublished}`}
                     >
-                        {base.copyrightHolder}
-                    </h2>
-                    <div className={styles.metaPrimaryData}>
-                        <span
-                            title={`Date created, published on ${base.datePublished}`}
-                        >
-                            <Moment
-                                date={base.dateCreated}
-                                format="L"
-                                interval={0}
-                            />
-                        </span>
+                        <Moment
+                            date={base.dateCreated}
+                            format="L"
+                            interval={0}
+                        />
+                    </span>
 
-                        {base.categories && (
-                            <CategoryLink category={base.categories[0]} />
-                        )}
+                    {base.categories && (
+                        <CategoryLink category={base.categories[0]} />
+                    )}
 
-                        {base.files && datafilesLine(base.files)}
-                    </div>
-                </aside>
-
-                {base.description && (
-                    <Markdown
-                        text={base.description}
-                        className={styles.description}
-                    />
-                )}
-
-                <Report did={ddo.id} title={metadata.base.name} />
-
-                <div className={styles.metaFixed}>
-                    <h2
-                        className={styles.metaFixedTitle}
-                        title="This metadata can not be changed because it is used to generate the checksums for the DDO, and to encrypt the file urls."
-                    >
-                        Fixed Metadata
-                    </h2>
-                    <ul>
-                        <li>
-                            <span className={styles.metaLabel}>
-                                <strong>Author</strong>
-                            </span>
-                            <span className={styles.metaValue}>
-                                {base.author}
-                            </span>
-                        </li>
-                        <li>
-                            <span className={styles.metaLabel}>
-                                <strong>License</strong>
-                            </span>
-                            <span className={styles.metaValue}>
-                                {base.license}
-                            </span>
-                        </li>
-                        <li>
-                            <span className={styles.metaLabel}>
-                                <strong>DID</strong>
-                            </span>
-                            <span className={styles.metaValue}>
-                                <code>{ddo.id}</code>
-                            </span>
-                        </li>
-                        {allowPricing ? (
-                            <li>
-                                <span className={styles.metaLabel}>
-                                    <strong>Price</strong>
-                                </span>
-                                <span className={styles.metaValue}>
-                                    {base.price === '0'
-                                        ? 0
-                                        : Web3.utils.fromWei(
-                                              base.price.toString()
-                                          )}{' '}
-                                    OCEAN
-                                </span>
-                            </li>
-                        ) : null}
-                    </ul>
+                    {base.files && datafilesLine(base.files)}
                 </div>
+            </aside>
 
-                <AssetFilesDetails
-                    files={base.files ? base.files : []}
-                    ddo={ddo}
+            {base.description && (
+                <Markdown
+                    text={base.description}
+                    className={styles.description}
                 />
-            </>
-        )
-    }
+            )}
+
+            <Report did={ddo.id} title={metadata.base.name} />
+
+            <div className={styles.metaFixed}>
+                <h2
+                    className={styles.metaFixedTitle}
+                    title="This metadata can not be changed because it is used to generate the checksums for the DDO, and to encrypt the file urls."
+                >
+                    Fixed Metadata
+                </h2>
+                <ul>
+                    <li>
+                        <span className={styles.metaLabel}>
+                            <strong>Author</strong>
+                        </span>
+                        <span className={styles.metaValue}>{base.author}</span>
+                    </li>
+                    <li>
+                        <span className={styles.metaLabel}>
+                            <strong>License</strong>
+                        </span>
+                        <span className={styles.metaValue}>{base.license}</span>
+                    </li>
+                    <li>
+                        <span className={styles.metaLabel}>
+                            <strong>DID</strong>
+                        </span>
+                        <span className={styles.metaValue}>
+                            <code>{ddo.id}</code>
+                        </span>
+                    </li>
+                    {allowPricing ? <Pricing price={base.price} /> : null}
+                </ul>
+            </div>
+
+            <AssetFilesDetails files={base.files ? base.files : []} ddo={ddo} />
+        </>
+    )
 }
diff --git a/client/src/components/templates/Asset/index.tsx b/client/src/components/templates/Asset/index.tsx
index f196668..5b10e2d 100644
--- a/client/src/components/templates/Asset/index.tsx
+++ b/client/src/components/templates/Asset/index.tsx
@@ -54,12 +54,13 @@ class Asset extends Component<AssetProps, AssetState> {
     public render() {
         const { metadata, ddo, error } = this.state
         const isLoading = metadata.base.name === ''
+        const hasError = error !== ''
 
-        return isLoading ? (
+        return isLoading && !hasError ? (
             <div className={stylesApp.loader}>
                 <Spinner message="Loading asset..." />
             </div>
-        ) : error !== '' ? (
+        ) : hasError ? (
             <div className={styles.error}>{error}</div>
         ) : (
             <Route

From 821f80da0f6c9bda862472f2a2b094a92a73ce6e Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Thu, 12 Sep 2019 11:27:32 +0200
Subject: [PATCH 2/5] asset details refactor

---
 client/package-lock.json                      | 19 ++++++
 client/package.json                           |  2 +
 .../templates/Asset/AssetDetails.tsx          | 68 +++++++++++--------
 3 files changed, 62 insertions(+), 27 deletions(-)

diff --git a/client/package-lock.json b/client/package-lock.json
index 1d46c82..e384407 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -2382,6 +2382,12 @@
         "@types/react": "*"
       }
     },
+    "@types/shortid": {
+      "version": "0.0.29",
+      "resolved": "https://registry.npmjs.org/@types/shortid/-/shortid-0.0.29.tgz",
+      "integrity": "sha1-gJPuBBam4r8qpjOBCRFLP7/6Dps=",
+      "dev": true
+    },
     "@types/stack-utils": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz",
@@ -11304,6 +11310,11 @@
       "resolved": "https://registry.npmjs.org/nano-json-stream-parser/-/nano-json-stream-parser-0.1.2.tgz",
       "integrity": "sha1-DMj20OK2IrR5xA1JnEbWS3Vcb18="
     },
+    "nanoid": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-2.1.1.tgz",
+      "integrity": "sha512-0YbJdaL4JFoejIOoawgLcYValFGJ2iyUuVDIWL3g8Es87SSOWFbWdRUMV3VMSiyPs3SQ3QxCIxFX00q5DLkMCw=="
+    },
     "nanomatch": {
       "version": "1.2.13",
       "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",
@@ -15078,6 +15089,14 @@
       "integrity": "sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==",
       "dev": true
     },
+    "shortid": {
+      "version": "2.2.15",
+      "resolved": "https://registry.npmjs.org/shortid/-/shortid-2.2.15.tgz",
+      "integrity": "sha512-5EaCy2mx2Jgc/Fdn9uuDuNIIfWBpzY4XIlhoqtXF6qsf+/+SGZ+FxDdX/ZsMZiWupIWNqAEmiNY4RC+LSmCeOw==",
+      "requires": {
+        "nanoid": "^2.1.0"
+      }
+    },
     "signal-exit": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
diff --git a/client/package.json b/client/package.json
index e86c35b..9a37a73 100644
--- a/client/package.json
+++ b/client/package.json
@@ -40,6 +40,7 @@
     "react-popper": "^1.3.3",
     "react-router-dom": "^5.0.1",
     "react-transition-group": "^4.2.1",
+    "shortid": "^2.2.15",
     "truffle-hdwallet-provider": "1.0.14",
     "web3": "1.2.0"
   },
@@ -60,6 +61,7 @@
     "@types/react-paginate": "^6.2.1",
     "@types/react-router-dom": "^4.3.4",
     "@types/react-transition-group": "^4.2.0",
+    "@types/shortid": "0.0.29",
     "@types/web3": "^1.0.19",
     "jest-mock-axios": "^3.1.0",
     "node-sass": "^4.12.0",
diff --git a/client/src/components/templates/Asset/AssetDetails.tsx b/client/src/components/templates/Asset/AssetDetails.tsx
index ac9881a..14ce9a8 100644
--- a/client/src/components/templates/Asset/AssetDetails.tsx
+++ b/client/src/components/templates/Asset/AssetDetails.tsx
@@ -1,6 +1,7 @@
-import React, { PureComponent } from 'react'
+import React from 'react'
 import Moment from 'react-moment'
 import { DDO, MetaData, File } from '@oceanprotocol/squid'
+import shortid from 'shortid'
 import Markdown from '../../atoms/Markdown'
 import CategoryLink from '../../atoms/CategoryLink'
 import styles from './AssetDetails.module.scss'
@@ -21,20 +22,45 @@ export function datafilesLine(files: File[]) {
     return <span>{files.length} data files</span>
 }
 
-const Pricing = ({ price }: { price: string }) => (
+const MetaFixedItem = ({ name, value }: { name: string; value: string }) => (
     <li>
         <span className={styles.metaLabel}>
-            <strong>Price</strong>
-        </span>
-        <span className={styles.metaValue}>
-            {price === '0' ? 0 : Web3.utils.fromWei(price.toString())} OCEAN
+            <strong>{name}</strong>
         </span>
+        <span className={styles.metaValue}>{value}</span>
     </li>
 )
 
 export default function AssetDetails({ metadata, ddo }: AssetDetailsProps) {
     const { base } = metadata
 
+    const metaFixed = [
+        {
+            name: 'Author',
+            value: base.author,
+            show: true
+        },
+        {
+            name: 'License',
+            value: base.license,
+            show: true
+        },
+        {
+            name: 'DID',
+            value: ddo.id,
+            show: true
+        },
+        {
+            name: 'Price',
+            value: `${
+                base.price === '0'
+                    ? 0
+                    : Web3.utils.fromWei(base.price.toString())
+            } OCEAN`,
+            show: allowPricing
+        }
+    ]
+
     return (
         <>
             <aside className={styles.metaPrimary}>
@@ -77,27 +103,15 @@ export default function AssetDetails({ metadata, ddo }: AssetDetailsProps) {
                     Fixed Metadata
                 </h2>
                 <ul>
-                    <li>
-                        <span className={styles.metaLabel}>
-                            <strong>Author</strong>
-                        </span>
-                        <span className={styles.metaValue}>{base.author}</span>
-                    </li>
-                    <li>
-                        <span className={styles.metaLabel}>
-                            <strong>License</strong>
-                        </span>
-                        <span className={styles.metaValue}>{base.license}</span>
-                    </li>
-                    <li>
-                        <span className={styles.metaLabel}>
-                            <strong>DID</strong>
-                        </span>
-                        <span className={styles.metaValue}>
-                            <code>{ddo.id}</code>
-                        </span>
-                    </li>
-                    {allowPricing ? <Pricing price={base.price} /> : null}
+                    {metaFixed
+                        .filter(item => item.show)
+                        .map(item => (
+                            <MetaFixedItem
+                                key={shortid.generate()}
+                                name={item.name}
+                                value={item.value}
+                            />
+                        ))}
                 </ul>
             </div>
 

From 12f6cfcb8049fb035bcbeabe099af51329334667 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Thu, 12 Sep 2019 11:33:20 +0200
Subject: [PATCH 3/5] test fixes

---
 client/src/components/templates/Asset/AssetDetails.tsx | 7 ++-----
 client/src/components/templates/Asset/index.test.tsx   | 1 -
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/client/src/components/templates/Asset/AssetDetails.tsx b/client/src/components/templates/Asset/AssetDetails.tsx
index 14ce9a8..c9ec9fc 100644
--- a/client/src/components/templates/Asset/AssetDetails.tsx
+++ b/client/src/components/templates/Asset/AssetDetails.tsx
@@ -33,6 +33,7 @@ const MetaFixedItem = ({ name, value }: { name: string; value: string }) => (
 
 export default function AssetDetails({ metadata, ddo }: AssetDetailsProps) {
     const { base } = metadata
+    const price = base.price && Web3.utils.fromWei(base.price.toString())
 
     const metaFixed = [
         {
@@ -52,11 +53,7 @@ export default function AssetDetails({ metadata, ddo }: AssetDetailsProps) {
         },
         {
             name: 'Price',
-            value: `${
-                base.price === '0'
-                    ? 0
-                    : Web3.utils.fromWei(base.price.toString())
-            } OCEAN`,
+            value: `${price === '0' ? 0 : price} OCEAN`,
             show: allowPricing
         }
     ]
diff --git a/client/src/components/templates/Asset/index.test.tsx b/client/src/components/templates/Asset/index.test.tsx
index f4158b6..30f1e1d 100644
--- a/client/src/components/templates/Asset/index.test.tsx
+++ b/client/src/components/templates/Asset/index.test.tsx
@@ -16,6 +16,5 @@ describe('Details', () => {
             />
         )
         expect(container.firstChild).toBeInTheDocument()
-        expect(container.querySelector('.loader')).toBeInTheDocument()
     })
 })

From e32f3bbb6266525588c110a78a99dcac7939d456 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Thu, 12 Sep 2019 11:45:52 +0200
Subject: [PATCH 4/5] fix event bubbling on wallet selector button

* closes #197
---
 client/src/components/organisms/WalletSelector.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/client/src/components/organisms/WalletSelector.tsx b/client/src/components/organisms/WalletSelector.tsx
index e45110d..ef47663 100644
--- a/client/src/components/organisms/WalletSelector.tsx
+++ b/client/src/components/organisms/WalletSelector.tsx
@@ -15,19 +15,20 @@ export default class WalletSelector extends PureComponent<
         isModalOpen: false
     }
 
-    private toggleModal = () => {
+    private handleToggleModal = (e?: Event) => {
+        e && e.preventDefault()
         this.setState({ isModalOpen: !this.state.isModalOpen })
     }
 
     private loginBurnerWallet = () => {
         this.context.loginBurnerWallet()
-        this.toggleModal()
+        this.handleToggleModal()
     }
 
     private loginMetamask = () => {
         this.context.loginMetamask()
         this.context.logoutBurnerWallet()
-        this.toggleModal()
+        this.handleToggleModal()
     }
 
     private WalletButton = ({
@@ -80,7 +81,7 @@ export default class WalletSelector extends PureComponent<
                 <Button
                     link
                     className={styles.openLink}
-                    onClick={this.toggleModal}
+                    onClick={this.handleToggleModal}
                     data-action="wallet"
                 >
                     {content.title}
@@ -89,7 +90,7 @@ export default class WalletSelector extends PureComponent<
                     title={content.title}
                     description={content.description}
                     isOpen={this.state.isModalOpen}
-                    toggleModal={this.toggleModal}
+                    toggleModal={this.handleToggleModal}
                 >
                     <div className={styles.info}>
                         {content.buttons.map(({ title, description, icon }) => (

From b77e38c3ab9bd1575f628d7830051235b5c9ff36 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Thu, 12 Sep 2019 13:52:50 +0200
Subject: [PATCH 5/5] always show price on asset detail when bigger than 0

---
 client/src/components/templates/Asset/AssetDetails.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/templates/Asset/AssetDetails.tsx b/client/src/components/templates/Asset/AssetDetails.tsx
index c9ec9fc..cfbb262 100644
--- a/client/src/components/templates/Asset/AssetDetails.tsx
+++ b/client/src/components/templates/Asset/AssetDetails.tsx
@@ -53,8 +53,8 @@ export default function AssetDetails({ metadata, ddo }: AssetDetailsProps) {
         },
         {
             name: 'Price',
-            value: `${price === '0' ? 0 : price} OCEAN`,
-            show: allowPricing
+            value: `${price} OCEAN`,
+            show: price !== '0'
         }
     ]