transactions, job details

.env.example

@@ -7,20 +7,20 @@ SECRET_STORE_URI='http://localhost:12001'
 FAUCET_URI='https://localhost:3001'
 RATING_URI='http://localhost:8000'
 
-#Nile dexFreight
+#Nile market
 #NODE_URI='https://nile.dev-ocean.com'
-#AQUARIUS_URI='https://aquarius.nile.dexfreight.dev-ocean.com'
-#BRIZO_URI='https://brizo.nile.dexfreight.dev-ocean.com'
+#AQUARIUS_URI='https://aquarius.nile.market.dev-ocean.com'
+#BRIZO_URI='https://brizo.nile.market.dev-ocean.com'
 #BRIZO_ADDRESS='0xeD792C5FcC8bF3322a6ba89A6e51eF0B6fB3C530'
 #SECRET_STORE_URI='https://secret-store.nile.dev-ocean.com'
 #FAUCET_URI='https://faucet.nile.dev-ocean.com'
-#RATING_URI='https://rating.nile.dexfreight.dev-ocean.com'
+#RATING_URI='https://rating.nile.market.dev-ocean.com'
 
-#Pacific dexFreight
+#Pacific market
 #NODE_URI='https://pacific.oceanprotocol.com'
-#AQUARIUS_URI='https://aquarius.pacific.dexfreight.dev-ocean.com'
-#BRIZO_URI='https://brizo.pacific.dexfreight.dev-ocean.com'
+#AQUARIUS_URI='https://aquarius.pacific.market.dev-ocean.com'
+#BRIZO_URI='https://brizo.pacific.market.dev-ocean.com'
 #BRIZO_ADDRESS='0xeD792C5FcC8bF3322a6ba89A6e51eF0B6fB3C530'
 #SECRET_STORE_URI='https://secret-store.oceanprotocol.com'
 #FAUCET_URI='https://faucet.oceanprotocol.com'
-#RATING_URI='https://rating.pacific.dexfreight.dev-ocean.com'
+#RATING_URI='https://rating.pacific.market.dev-ocean.com'

.travis.yml

@@ -24,7 +24,7 @@ before_script:
   # - cd ..
   - cp .env.example .env && cp .env.example .env.build
   # overwrite AQUARIUS_URI from above .env files, which default to Spree
-  - export AQUARIUS_URI='https://aquarius.pacific.dexfreight.dev-ocean.com'
+  - export AQUARIUS_URI='https://aquarius.pacific.market.dev-ocean.com'
 
 script:
   # will run `npm ci` automatically here

package-lock.json

@@ -3444,6 +3444,11 @@
       "resolved": "https://registry.npmjs.org/@oceanprotocol/typographies/-/typographies-0.1.0.tgz",
       "integrity": "sha512-kMsZsqvzpz9KzVbVZzllwhPoIC3zbqsdRrClagZL/C2PHzgLrKGC1kYn3gPt0RMIFg9ZjrwieKaxlgIK9i9zzg=="
     },
+    "@popperjs/core": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.4.0.tgz",
+      "integrity": "sha512-NMrDy6EWh9TPdSRiHmHH2ye1v5U0gBD7pRYwSwJvomx7Bm4GG04vu63dYiVzebLOx2obPpJugew06xVP0Nk7hA=="
+    },
     "@reach/router": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/@reach/router/-/router-1.3.3.tgz",
@@ -4695,6 +4700,15 @@
         "@types/testing-library__react-hooks": "^3.0.0"
       }
     },
+    "@tippyjs/react": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@tippyjs/react/-/react-4.0.2.tgz",
+      "integrity": "sha512-iAKTjUmrXqTTJ4HZRDgmvVfUiv9pTzJoDjPLDbmvB6vttkuYvZ/o8NhHa72vMFgHpiMFNoYWtB8OCRR6x5Zs8w==",
+      "requires": {
+        "prop-types": "^15.6.2",
+        "tippy.js": "^6.2.0"
+      }
+    },
     "@toruslabs/fetch-node-details": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/@toruslabs/fetch-node-details/-/fetch-node-details-2.0.2.tgz",
@@ -25387,6 +25401,14 @@
       "dev": true,
       "optional": true
     },
+    "tippy.js": {
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.2.3.tgz",
+      "integrity": "sha512-MzqHMrr2C0IC8ZUnG5kLQPxonWJ7V+Usqiy2W5b+dCvAfousio0mA85h+Ea5wRq94AQGd8mbFGeciRgkP+F+7w==",
+      "requires": {
+        "@popperjs/core": "^2.3.2"
+      }
+    },
     "tlds": {
       "version": "1.207.0",
       "resolved": "https://registry.npmjs.org/tlds/-/tlds-1.207.0.tgz",

package.json

@@ -23,6 +23,7 @@
     "@oceanprotocol/squid": "^2.2.0",
     "@oceanprotocol/typographies": "^0.1.0",
     "@sindresorhus/slugify": "^1.0.0",
+    "@tippyjs/react": "^4.0.2",
     "@types/classnames": "^2.2.10",
     "axios": "^0.19.2",
     "classnames": "^2.2.6",

site.config.js

@@ -1,7 +1,7 @@
 module.exports = {
   title: 'Ocean Market',
   description: `A marketplace to find and publish open data sets in the Ocean Network.`,
-  url: 'https://dexfreight.oceanprotocol.com',
+  url: 'https://market.oceanprotocol.now.sh/',
   copyright:
     'All Rights Reserved. Powered by [Ocean Protocol](https://oceanprotocol.com)',
   refundPolicy: [

src/@types/MetaData.d.ts

@@ -18,8 +18,8 @@ export interface Sample {
 
 export declare type AccessType = 'Download' | 'Compute'
 
-export interface AdditionalInformationDexFreight extends AdditionalInformation {
-  description: string // required for dexFreight
+export interface AdditionalInformationMarket extends AdditionalInformation {
+  description: string
   links?: Sample[] // redefine existing key, cause not specific enough in Squid
   deliveryType: DeliveryType
   termsAndConditions: boolean
@@ -29,6 +29,6 @@ export interface AdditionalInformationDexFreight extends AdditionalInformation {
   access: AccessType
 }
 
-export interface MetaDataDexFreight extends MetaData {
-  additionalInformation: AdditionalInformationDexFreight
+export interface MetaDataMarket extends MetaData {
+  additionalInformation: AdditionalInformationMarket
 }

src/components/atoms/BaseDialog.module.css

@@ -2,4 +2,5 @@
 }
 .customModal {
   border-radius: 15px;
+  margin: auto;
 }

src/components/atoms/BaseDialog.tsx

@@ -23,13 +23,13 @@ export default function BaseDialog({
       open={open}
       onClose={onClose}
       classNames={{
-        overlay: 'customOverlay',
-        modal: 'customModal'
+        overlay: styles.customOverlay,
+        modal: styles.customModal
       }}
       {...other}
     >
       <h2>{title}</h2>
-      <p>{children}</p>
+      <div>{children}</div>
     </Modal>
   )
 }

src/components/atoms/Table/ActionsCell.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import Eye from '../../../images/eye.svg'
+import Button from '../Button'
+import Tooltip from '../Tooltip'
+import { ComputeItem } from '@oceanprotocol/react'
+
+export declare type ActionsCellProps = {
+  handleOnClickViewJobDetails?: (computeItem: ComputeItem) => void
+}
+
+export default function ActionsCell({
+  handleOnClickViewJobDetails
+}: ActionsCellProps) {
+  return (
+    <>
+      {handleOnClickViewJobDetails && (
+        <Tooltip content="View job details">
+          <Button onClick={handleOnClickViewJobDetails}>
+            <Eye />
+          </Button>
+        </Tooltip>
+      )}
+    </>
+  )
+}

src/components/atoms/Tooltip.tsx

@@ -0,0 +1,24 @@
+import React, { ReactElement, forwardRef } from 'react'
+import Tippy from '@tippyjs/react'
+
+export default function Tooltip({
+  content,
+  children
+}: {
+  content: string
+  children: ReactElement
+}) {
+  return (
+    <Tippy content={content}>
+      <CustomWrapper>{children}</CustomWrapper>
+    </Tippy>
+  )
+}
+
+// Forward ref for Tippy.js
+// eslint-disable-next-line
+const CustomWrapper = forwardRef(
+  ({ children }: { children: ReactElement }, ref: any) => {
+    return <div ref={ref}>{children}</div>
+  }
+)

src/components/molecules/AssetTeaser.module.css

@@ -72,4 +72,5 @@ p.copyright {
   color: var(--brand-black);
   background: var(--brand-grey-lighter);
   padding: 0.1px 0.5px 0.1px 0.5px;
+  border-radius: 2px;
 }

src/components/molecules/AssetTeaser.tsx

@@ -3,8 +3,8 @@ import { DDO } from '@oceanprotocol/squid'
 import Link from 'next/link'
 import Dotdotdot from 'react-dotdotdot'
 import {
-  AdditionalInformationDexFreight,
-  MetaDataDexFreight
+  AdditionalInformationMarket,
+  MetaDataMarket
 } from '../../@types/MetaData'
 import { findServiceByType } from '../../utils'
 import Tags from '../atoms/Tags'
@@ -33,10 +33,10 @@ const AssetTeaser: React.FC<AssetTeaserProps> = ({ ddo }: AssetTeaserProps) => {
       tags,
       categories,
       access
-    } = attributes.additionalInformation as AdditionalInformationDexFreight)
+    } = attributes.additionalInformation as AdditionalInformationMarket)
   }
 
-  const { curation } = attributes as MetaDataDexFreight
+  const { curation } = attributes as MetaDataMarket
 
   return (
     <article className={styles.teaser}>

src/components/molecules/DeleteAsset.tsx

@@ -0,0 +1,82 @@
+import React, { useState, useEffect } from 'react'
+import { DDO, Ocean } from '@oceanprotocol/squid'
+import { useRouter } from 'next/router'
+import { findServiceByType, redeploy } from '../../utils'
+import Button from '../atoms/Button'
+import BaseDialog from '../atoms/BaseDialog'
+import { useOcean } from '@oceanprotocol/react'
+
+const content = [
+  'You are about to delete your Data Set.',
+  'Your Data Set is being deleted...',
+  'You have deleted your Data Set ',
+  'Something happened... Your Data Set cannot be deleted'
+]
+
+export default function DeleteAction({ ddo }: { ddo: DDO }) {
+  const { ocean, accountId } = useOcean()
+
+  const isOwner = ddo.publicKey[0].owner === accountId
+
+  const router = useRouter()
+  const [isModal, setIsModal] = useState(false)
+  const [status, setStatus] = useState(0) // 0-confirmation, 1-deleting, 2-success, 3-error
+  const { attributes } = findServiceByType(ddo, 'metadata')
+
+  useEffect(() => {
+    let tId: number
+    if (status === 2) {
+      tId = window.setTimeout(() => {
+        router.push(`/explore`)
+      }, 1000)
+    }
+    return () => {
+      clearTimeout(tId)
+    }
+  }, [status])
+  if (!accountId || !ocean || !isOwner) return null
+  async function handleDeleteAction() {
+    if (!ocean) return
+
+    setStatus(1)
+    setIsModal(true)
+    try {
+      const consumerAddress = (await ocean.accounts.list())[0]
+      await ocean.assets.retire(ddo.id, consumerAddress)
+
+      // trigger new live deployment
+      await redeploy()
+
+      setStatus(2)
+    } catch (error) {
+      // TODO: handle error
+      console.log(error)
+      setStatus(3)
+    }
+  }
+
+  const handleCancel = () => {
+    setIsModal(false)
+    setStatus(0)
+  }
+
+  const handleOpenConfirmation = () => setIsModal(true)
+
+  return (
+    <>
+      <Button onClick={handleOpenConfirmation}>Delete</Button>
+
+      <BaseDialog
+        title={`Delete ${attributes.main.name}`}
+        open={isModal}
+        onClose={() => setIsModal(false)}
+      >
+        {content[status]}
+        <footer>
+          <Button onClick={handleDeleteAction}>Confirm</Button>
+          <Button onClick={handleCancel}>Cancel</Button>
+        </footer>
+      </BaseDialog>
+    </>
+  )
+}

src/components/molecules/JobDetailsDialog.module.css

@@ -0,0 +1,14 @@
+.metaGrid {
+  border-radius: var(--border-radius);
+  display: grid;
+  gap: calc(var(--spacer) / 2);
+  grid-template-columns: 1fr 1fr;
+}
+
+.metaRow {
+  padding-top: calc(var(--spacer) / 2);
+  border-radius: var(--border-radius);
+  display: grid;
+  gap: calc(var(--spacer) / 2);
+  grid-template-columns: auto;
+}

src/components/molecules/JobDetailsDialog.tsx

@@ -0,0 +1,80 @@
+import React from 'react'
+import { ComputeItem } from '@oceanprotocol/react'
+import BaseDialog from '../atoms/BaseDialog'
+import { findServiceByType } from '../../utils'
+import styles from './JobDetailsDialog.module.css'
+import MetaItem from '../templates/AssetDetails/MetaItem'
+import Time from '../atoms/Time'
+import shortid from 'shortid'
+import Link from 'next/link'
+
+export default function JobDetailsDialog({
+  computeItem,
+  isOpen,
+  onClose
+}: {
+  computeItem: ComputeItem | undefined
+  isOpen: boolean
+  onClose: () => void
+}) {
+  if (!computeItem) return null
+
+  const { attributes } = findServiceByType(computeItem.ddo, 'metadata')
+  const { name } = attributes.main
+  const {
+    dateCreated,
+    dateFinished,
+    statusText,
+    jobId,
+    resultsUrls,
+    algorithmLogUrl
+  } = computeItem.job
+
+  return (
+    <BaseDialog title={name} open={isOpen} onClose={onClose}>
+      <div className={styles.metaGrid}>
+        <MetaItem title="Date Created" content={<Time date={dateCreated} />} />
+        <MetaItem title="Status" content={statusText} />
+        <MetaItem
+          title="Date Finished"
+          content={<Time date={dateFinished} />}
+        />
+        <MetaItem title="Job Id" content={jobId} />
+      </div>
+      <div className={styles.metaRow}>
+        {resultsUrls && (
+          <MetaItem
+            title="Results"
+            content={resultsUrls.map((url: string) => (
+              <Link href={url} key={shortid.generate()} passHref>
+                <a>{url}</a>
+              </Link>
+            ))}
+          />
+        )}
+        {algorithmLogUrl && (
+          <MetaItem
+            title="Algorithm Log"
+            content={
+              <Link href={algorithmLogUrl} key={shortid.generate()} passHref>
+                <a>{algorithmLogUrl}</a>
+              </Link>
+            }
+          />
+        )}
+        <MetaItem
+          title="Data Set"
+          content={
+            <Link
+              href="/asset/[did]"
+              as={`/asset/${computeItem.ddo.id}`}
+              passHref
+            >
+              <a>{name}</a>
+            </Link>
+          }
+        />
+      </div>
+    </BaseDialog>
+  )
+}

src/components/molecules/PublishForm/PublishForm.tsx

@@ -7,7 +7,7 @@ import {
   PublishFormDataInterface
 } from '../../../models/PublishForm'
 import useStoredValue from '../../../hooks/useStoredValue'
-import { MetaDataDexFreight } from '../../../@types/MetaData'
+import { MetaDataMarket } from '../../../@types/MetaData'
 import { File, MetaData } from '@oceanprotocol/squid'
 import { isBrowser, toStringNoMS } from '../../../utils'
 import { toast } from 'react-toastify'
@@ -44,7 +44,7 @@ export function clearFilesData() {
 
 export function transformPublishFormToMetadata(
   data: PublishFormDataInterface
-): MetaDataDexFreight {
+): MetaDataMarket {
   const currentTime = toStringNoMS(new Date())
 
   const {
@@ -62,7 +62,7 @@ export function transformPublishFormToMetadata(
     access
   } = data
 
-  const metadata: MetaDataDexFreight = {
+  const metadata: MetaDataMarket = {
     main: {
       ...AssetModel.main,
       name: title,

src/components/organisms/Compute.tsx

@@ -16,10 +16,6 @@ import {
 import styles from './Compute.module.css'
 import Button from '../atoms/Button'
 import Input from '../atoms/Input/Input'
-import {
-  LoggerInstance,
-  LogLevel
-} from '@oceanprotocol/squid/dist/node/utils/Logger'
 
 export default function Compute({
   ddo,
@@ -36,7 +32,6 @@ export default function Compute({
   const [isJobStarting, setIsJobStarting] = useState(false)
   const [, setError] = useState('')
   const [isBalanceSufficient, setIsBalanceSufficient] = useState(false)
-
   const [computeType, setComputeType] = useState('')
   const [computeContainer, setComputeContainer] = useState({
     entrypoint: '',

src/components/organisms/Consume.tsx

@@ -6,7 +6,7 @@ import compareAsBN, { Comparisson } from '../../utils/compareAsBN'
 import Button from '../atoms/Button'
 import File from '../atoms/File'
 import Price from '../atoms/Price'
-import { MetaDataDexFreight } from '../../@types/MetaData'
+import { MetaDataMarket } from '../../@types/MetaData'
 import Web3Feedback from '../molecules/Web3Feedback'
 import styles from './Consume.module.css'
 import Loader from '../atoms/Loader'
@@ -20,7 +20,7 @@ export default function Consume({ ddo }: { ddo: DDO | undefined }) {
   const { consume, consumeStepText, isLoading } = useConsume()
   const { attributes } = findServiceByType(ddo, 'metadata')
   const { price } = attributes.main
-  const file = (attributes as MetaDataDexFreight).main.files[0]
+  const file = (attributes as MetaDataMarket).main.files[0]
   const isFree = price === '0'
   const isBalanceSufficient =
     isFree ||

src/components/organisms/JobsList.tsx

@@ -6,8 +6,7 @@ import {
   useSearch,
   ComputeItem
 } from '@oceanprotocol/react'
-import Time from '../atoms/Time'
-import Link from 'next/link'
+
 import Price from '../atoms/Price'
 import { fromWei } from 'web3-utils'
 import { findServiceByType } from '../../utils'
@@ -18,6 +17,10 @@ import DateCell from '../atoms/Table/DateCell'
 import DdoLinkCell from '../atoms/Table/DdoLinkCell'
 import { config } from '../../config/ocean'
 import shortid from 'shortid'
+import ActionsCell from '../atoms/Table/ActionsCell'
+import Tooltip from '../atoms/Tooltip'
+import Tippy from '@tippyjs/react'
+import JobDetailsDialog from '../molecules/JobDetailsDialog'
 
 const columns = [
   {
@@ -58,17 +61,32 @@ const columns = [
   },
   {
     name: 'Actions',
-    selector: 'actions'
+    selector: 'actions',
+    cell: function getCell(row: any) {
+      return (
+        <ActionsCell handleOnClickViewJobDetails={row.onClickViewJobDetails} />
+      )
+    }
   }
 ]
 
 export default function JobsList() {
-  const { ocean, status, accountId, account } = useOcean()
+  const { ocean, status, accountId } = useOcean()
 
   const [jobList, setJobList] = useState<any[]>([])
   const [isLoading, setIsLoading] = useState(false)
   const [userAgreed, setUserAgreed] = useState(false)
   const { getComputeItems } = useSearch()
+  const [isOpen, setIsOpen] = useState(false)
+  const [detailsComputeItem, setDetailsComputeItem] = useState<ComputeItem>()
+
+  const onClickViewJobDetails = (compute: ComputeItem) => {
+    setDetailsComputeItem(compute)
+    setIsOpen(true)
+  }
+  const dialogClose = () => {
+    setIsOpen(false)
+  }
 
   const getJobs = async () => {
     if (!accountId || !ocean || status !== OceanConnectionStatus.CONNECTED)
@@ -76,48 +94,7 @@ export default function JobsList() {
     setIsLoading(true)
     setUserAgreed(true)
     try {
-      const jobList = await ocean.compute.status(account)
-      console.log(jobList)
-      const computeItemss = await Promise.all(
-        jobList.map(async job => {
-          if (!job) return
-          try {
-            const {
-              did
-            } = await ocean.keeper.agreementStoreManager.getAgreement(
-              job.agreementId
-            )
-            console.log(did)
-            if (
-              did ===
-              '0x0000000000000000000000000000000000000000000000000000000000000000'
-            )
-              return
-            const ddo = await ocean.assets.resolve(did)
-            if (ddo) {
-              // Since we are getting assets from chain there might be
-              // assets from other marketplaces. So return only those assets
-              // whose serviceEndpoint contains the configured Aquarius URI.
-              const metadata = findServiceByType(ddo, 'metadata')
-              console.log(did, metadata)
-              if (!metadata) return
-              const { serviceEndpoint } = metadata
-              if (serviceEndpoint?.includes(config.aquariusUri)) {
-                return { job, ddo }
-              }
-            }
-          } catch (err) {
-            console.log(err)
-          }
-        })
-      )
-
-      const computeItems = computeItemss.filter(
-        value => value !== undefined
-      ) as ComputeItem[] | undefined
-
-      // const computeItems = await getComputeItems()
-      console.log('compute items', computeItems)
+      const computeItems = await getComputeItems()
       if (!computeItems) return
       const data = computeItems.map(item => {
         const { attributes } = findServiceByType(item.ddo, 'metadata')
@@ -129,7 +106,8 @@ export default function JobsList() {
           name: name,
           price: price,
           did: item.ddo.id,
-          id: shortid.generate()
+          id: shortid.generate(),
+          onClickViewJobDetails: () => onClickViewJobDetails(item)
         }
       })
 
@@ -147,7 +125,14 @@ export default function JobsList() {
     <Loader />
   ) : accountId && ocean ? (
     userAgreed ? (
-      <Table data={jobList} columns={columns} />
+      <>
+        <JobDetailsDialog
+          computeItem={detailsComputeItem}
+          isOpen={isOpen}
+          onClose={dialogClose}
+        />
+        <Table data={jobList} columns={columns} />
+      </>
     ) : (
       <>
         <div>

src/components/organisms/PublishedList.tsx

@@ -43,7 +43,7 @@ const publishedColumns = [
 ]
 
 export default function PublishedList() {
-  const { ocean, status, account } = useOcean()
+  const { ocean, status, account, accountId } = useOcean()
   const { getPublishedList } = useSearch()
   const [publishedList, setPublishedList] = useState<any[]>([])
   const [isLoading, setIsLoading] = useState(false)
@@ -55,7 +55,12 @@ export default function PublishedList() {
 
   useEffect(() => {
     async function getPublished() {
-      if (!account || !ocean || status !== OceanConnectionStatus.CONNECTED)
+      if (
+        !account ||
+        !accountId ||
+        !ocean ||
+        status !== OceanConnectionStatus.CONNECTED
+      )
         return
 
       setIsLoading(true)
@@ -83,7 +88,7 @@ export default function PublishedList() {
       setIsLoading(false)
     }
     getPublished()
-  }, [account, ocean, status])
+  }, [accountId, ocean, status])
 
   return isLoading ? (
     <Loader />

src/components/templates/AssetDetails/MetaFull.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { DDO } from '@oceanprotocol/squid'
-import { MetaDataDexFreight } from '../../../@types/MetaData'
+import { MetaDataMarket } from '../../../@types/MetaData'
 import Time from '../../atoms/Time'
 import MetaItem from './MetaItem'
 import styles from './MetaFull.module.css'
@@ -10,7 +10,7 @@ export default function MetaFull({
   attributes
 }: {
   ddo: DDO | undefined
-  attributes: MetaDataDexFreight
+  attributes: MetaDataMarket
 }) {
   const { dateCreated, author, license } = attributes.main
   let dateRange

src/components/templates/AssetDetails/MetaSecondary.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import shortid from 'shortid'
-import { MetaDataDexFreight } from '../../../@types/MetaData'
+import { MetaDataMarket } from '../../../@types/MetaData'
 import { ListItem } from '../../atoms/Lists'
 import { refundPolicy, assetTerms } from '../../../../site.config'
 import MetaItem from './MetaItem'
@@ -9,7 +9,7 @@ import styles from './MetaSecondary.module.css'
 export default function MetaSecondary({
   attributes
 }: {
-  attributes: MetaDataDexFreight
+  attributes: MetaDataMarket
 }) {
   const { price } = attributes.main
   let links, supportName, supportEmail

src/components/templates/AssetDetails/index.module.css

@@ -40,3 +40,7 @@
   height: 100%;
   min-height: 70vh;
 }
+.buttonGroup {
+  margin-top: var(--spacer);
+  margin-bottom: var(--spacer);
+}

src/components/templates/AssetDetails/index.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react'
 import { DDO, Aquarius, Logger, Curation } from '@oceanprotocol/squid'
 import Link from 'next/link'
 import Layout from '../../../Layout'
-import { MetaDataDexFreight } from '../../../@types/MetaData'
+import { MetaDataMarket } from '../../../@types/MetaData'
 import Time from '../../atoms/Time'
 import Markdown from '../../atoms/Markdown'
 import Consume from '../../organisms/Consume'
@@ -13,15 +13,14 @@ import MetaSecondary from './MetaSecondary'
 import Rating from '../../atoms/Rating'
 import RatingAction from './RatingAction'
 import styles from './index.module.css'
-import { config } from '../../../config/ocean'
-import { findServiceByType } from '../../../utils'
-import { useMetadata, useWeb3, useOcean } from '@oceanprotocol/react'
+import { useMetadata, useOcean } from '@oceanprotocol/react'
 import Compute from '../../organisms/Compute'
+import DeleteAction from '../../molecules/DeleteAsset'
 
 export declare type AssetDetailsPageProps = {
   title: string
   ddo?: DDO
-  attributes?: MetaDataDexFreight
+  attributes?: MetaDataMarket
   error?: string
 }
 
@@ -29,7 +28,7 @@ const AssetDetailsPageMeta = ({
   attributes,
   ddo
 }: {
-  attributes: MetaDataDexFreight
+  attributes: MetaDataMarket
   ddo: DDO
 }) => {
   if (!attributes) return null
@@ -82,6 +81,15 @@ const AssetDetailsPageMeta = ({
         {tags && tags.length > 0 && <Tags items={tags} />}
 
         <MetaFull ddo={ddo} attributes={attributes} />
+        <div className={styles.buttonGroup}>
+          {/* <EditAction
+            ddo={ddo}
+            ocean={ocean}
+            account={account}
+            refetchMetadata={refetchMetadata}
+          /> */}
+          <DeleteAction ddo={ddo} />
+        </div>
       </div>
       <div>
         <div className={styles.sticky}>

src/config/ocean.ts

@@ -29,7 +29,7 @@ export interface OceanConfig extends Config {
 //     process.env.SECRET_STORE_URI || 'https://secret-store.oceanprotocol.com',
 //   faucetUri: process.env.FAUCET_URI || 'https://faucet.oceanprotocol.com',
 //   ratingUri:
-//     process.env.RATING_URI || 'https://rating.pacific.dexfreight.dev-ocean.com',
+//     process.env.RATING_URI || 'https://rating.pacific.marketplace.dev-ocean.com',
 //   verbose: 3
 // }
 
@@ -41,7 +41,7 @@ export const config: OceanConfig = {
   brizoAddress: '0x00c6A0BC5cD0078d6Cd0b659E8061B404cfa5704',
   secretStoreUri: 'https://secret-store.oceanprotocol.com',
   faucetUri: 'https://faucet.oceanprotocol.com',
-  ratingUri: 'https://rating.pacific.dexfreight.dev-ocean.com',
+  ratingUri: 'https://rating.pacific.marketplace.dev-ocean.com',
   verbose: 3
 }
 

src/images/eye.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-eye"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>

src/models/Asset.ts

@@ -1,6 +1,6 @@
-import { MetaDataDexFreight } from '../@types/MetaData'
+import { MetaDataMarket } from '../@types/MetaData'
 
-const AssetModel: MetaDataDexFreight = {
+const AssetModel: MetaDataMarket = {
   // OEP-8 Attributes
   // https://github.com/oceanprotocol/OEPs/tree/master/8
   main: {

src/pages/_app.tsx

@@ -8,6 +8,8 @@ import { title, description, url } from '../../site.config'
 import { toast } from 'react-toastify'
 
 // this is the place to import global css
+import 'tippy.js/dist/tippy.css'
+import 'react-responsive-modal/styles.css'
 import '@oceanprotocol/typographies/css/ocean-typo.css'
 import 'react-toastify/dist/ReactToastify.css'
 import '../styles/global.css'
@@ -15,7 +17,7 @@ import '../components/atoms/NProgress.css'
 import { Web3Provider, OceanProvider, Config } from '@oceanprotocol/react'
 import { config } from '../config/ocean'
 
-export default function dexfreightApp({ Component, pageProps }: AppProps) {
+export default function marketApp({ Component, pageProps }: AppProps) {
   const { asPath } = useRouter()
 
   toast.configure()

src/pages/api/redeploy.tsx

@@ -0,0 +1,31 @@
+import { NextApiRequest, NextApiResponse } from 'next'
+import axios, { AxiosResponse } from 'axios'
+import siteConfig from '../../../site.config'
+
+async function redeploy(
+  req: NextApiRequest
+): Promise<AxiosResponse | undefined | string> {
+  // Cancel if we are not on live
+  if (req.headers.host !== siteConfig.url) return ''
+  console.log('not canceled', req)
+  try {
+    // Trigger new `master` deployment with Deploy Hook
+    const newDeployment = await axios.post(
+      'https://api.zeit.co/v1/integrations/deploy/Qmd5YCS9PCCCqn4mjgVR3vGkYWNmEB5UnAzhnjZiGbMCKa/Q6viwRoT4V'
+    )
+    return newDeployment
+  } catch (error) {
+    console.error(error.message)
+  }
+}
+
+export default async (req: NextApiRequest, res: NextApiResponse) => {
+  switch (req.method) {
+    case 'POST':
+      res.status(200).json(await redeploy(req))
+      break
+    default:
+      res.setHeader('Allow', ['POST'])
+      res.status(405).end(`Method ${req.method} Not Allowed`)
+  }
+}

src/utils/getFromFaucet.ts

@@ -16,7 +16,7 @@ export default async function getFromFaucet(
       url: `${config.faucetUri}/faucet`,
       data: {
         address: account,
-        agent: 'dexFreight'
+        agent: 'market'
       }
     })
 

src/utils/index.ts

@@ -149,3 +149,12 @@ export function formatBytes(a: number, b: number) {
   const f = Math.floor(Math.log(a) / Math.log(c))
   return parseFloat((a / Math.pow(c, f)).toFixed(d)) + ' ' + e[f]
 }
+
+export async function redeploy(): Promise<AxiosResponse | undefined> {
+  try {
+    const response = await axios.post('/api/redeploy')
+    return response
+  } catch (err) {
+    console.error(err.message)
+  }
+}

tests/unit/AssetModel.test.ts

@@ -1,9 +1,9 @@
 import AssetModel from '../../src/models/Asset'
-import { MetaDataDexFreight } from '../../src/@types/MetaData'
+import { MetaDataMarket } from '../../src/@types/MetaData'
 
 describe('AssetModel', () => {
   it('values can be reassigned', () => {
-    const newMeta: MetaDataDexFreight = {
+    const newMeta: MetaDataMarket = {
       main: Object.assign(AssetModel.main, {
         name: 'Hello'
       }),

tests/unit/__fixtures__/ddo.ts

@@ -1,5 +1,5 @@
 import { DDO } from '@oceanprotocol/squid'
-import { MetaDataDexFreight } from '../../../src/@types/MetaData'
+import { MetaDataMarket } from '../../../src/@types/MetaData'
 
 const ddo: Partial<DDO> = {
   '@context': 'https://w3id.org/did/v1',
@@ -82,7 +82,7 @@ const ddo: Partial<DDO> = {
           numVotes: 100,
           rating: 5
         }
-      } as MetaDataDexFreight,
+      } as MetaDataMarket,
       index: 0
     },
     {

tests/unit/components/PublishForm.test.tsx

@@ -9,7 +9,7 @@ import {
 } from '../../../src/models/PublishForm'
 import testFormData from '../__fixtures__/testFormData'
 import { transformPublishFormToMetadata } from '../../../src/components/molecules/PublishForm/PublishForm'
-import { MetaDataDexFreight } from '../../../src/@types/MetaData'
+import { MetaDataMarket } from '../../../src/@types/MetaData'
 
 describe('PublishForm', () => {
   it('renders without crashing', async () => {
@@ -60,7 +60,7 @@ describe('PublishForm', () => {
 
   it('Form data is correctly transformed to asset MetaData', () => {
     const data: PublishFormDataInterface = publishFormData
-    let metadata: MetaDataDexFreight = transformPublishFormToMetadata(data)
+    let metadata: MetaDataMarket = transformPublishFormToMetadata(data)
 
     expect(metadata.additionalInformation).toBeDefined()
     expect(metadata.main).toBeDefined()

tests/unit/pages/[did].test.tsx

@@ -4,7 +4,7 @@ import AssetDetails, { getMetadata } from '../../../src/pages/asset/[did]'
 import ddo from '../__fixtures__/ddo'
 import { findServiceByType } from '../../../src/utils'
 import web3ProviderMock, { context } from '../__mocks__/web3provider'
-import { MetaDataDexFreight } from '../../../src/@types/MetaData'
+import { MetaDataMarket } from '../../../src/@types/MetaData'
 
 const { attributes } = findServiceByType(ddo, 'metadata')
 
@@ -16,7 +16,7 @@ describe('AssetDetails', () => {
       <context.Provider value={web3ProviderMock}>
         <AssetDetails
           ddo={JSON.stringify(ddo) as any}
-          attributes={attributes as MetaDataDexFreight}
+          attributes={attributes as MetaDataMarket}
           title="Hello"
         />
       </context.Provider>