Update file metadata from provider (#631)

* get file metadata from provider

* get file metadata without a wallet connected

* unused import deleted

* get file metadata from provider


get file metadata without a wallet connected


unused import deleted

* loader added

* lint fix

* loaded added on file icon

* fileMetadata empty object init

* lint error fixed, deleted unused imports

Co-authored-by: claudia.holhos <claudia.holhos@hpm.ro>

src/components/atoms/File.module.css

@@ -25,3 +25,7 @@
   width: 4.5rem;
   padding: calc(var(--spacer) / 2) calc(var(--spacer) / 4);
 }
+
+.loaderWrap {
+  margin-right: calc(var(--spacer)/6);
+}

src/components/atoms/File.tsx

@@ -4,17 +4,28 @@ import filesize from 'filesize'
 import classNames from 'classnames/bind'
 import cleanupContentType from '../../utils/cleanupContentType'
 import styles from './File.module.css'
+import Loader from '../atoms/Loader'
 
 const cx = classNames.bind(styles)
 
+function LoaderArea() {
+  return (
+    <div className={styles.loaderWrap}>
+      <Loader />
+    </div>
+  )
+}
+
 export default function File({
   file,
   className,
-  small
+  small,
+  isLoading
 }: {
   file: FileMetadata
   className?: string
   small?: boolean
+  isLoading?: boolean
 }): ReactElement {
   if (!file) return null
 
@@ -26,17 +37,23 @@ export default function File({
 
   return (
     <ul className={styleClasses}>
-      {file.contentType || file.contentLength ? (
+      {isLoading === false || isLoading === undefined ? (
         <>
-          <li>{cleanupContentType(file.contentType)}</li>
-          <li>
-            {file.contentLength && file.contentLength !== '0'
-              ? filesize(Number(file.contentLength))
-              : ''}
-          </li>
+          {file.contentType || file.contentLength ? (
+            <>
+              <li>{cleanupContentType(file.contentType)}</li>
+              <li>
+                {file.contentLength && file.contentLength !== '0'
+                  ? filesize(Number(file.contentLength))
+                  : ''}
+              </li>
+            </>
+          ) : (
+            <li className={styles.empty}>No file info available</li>
+          )}
         </>
       ) : (
-        <li className={styles.empty}>No file info available</li>
+        <LoaderArea />
       )}
     </ul>
   )

src/components/organisms/AssetActions/Compute/index.tsx

@@ -48,11 +48,13 @@ const SuccessAction = () => (
 export default function Compute({
   isBalanceSufficient,
   dtBalance,
-  file
+  file,
+  fileIsLoading
 }: {
   isBalanceSufficient: boolean
   dtBalance: string
   file: FileMetadata
+  fileIsLoading?: boolean
 }): ReactElement {
   const { appConfig } = useSiteMetadata()
   const { accountId } = useWeb3()
@@ -370,7 +372,7 @@ export default function Compute({
   return (
     <>
       <div className={styles.info}>
-        <File file={file} small />
+        <File file={file} isLoading={fileIsLoading} small />
         <Price price={price} conversion />
       </div>
 

src/components/organisms/AssetActions/Consume.tsx

@@ -35,12 +35,14 @@ export default function Consume({
   ddo,
   file,
   isBalanceSufficient,
-  dtBalance
+  dtBalance,
+  fileIsLoading
 }: {
   ddo: DDO
   file: FileMetadata
   isBalanceSufficient: boolean
   dtBalance: string
+  fileIsLoading?: boolean
 }): ReactElement {
   const { accountId } = useWeb3()
   const { ocean } = useOcean()
@@ -159,7 +161,7 @@ export default function Consume({
     <aside className={styles.consume}>
       <div className={styles.info}>
         <div className={styles.filewrapper}>
-          <File file={file} />
+          <File file={file} isLoading={fileIsLoading} />
         </div>
         <div className={styles.pricewrapper}>
           <Price price={price} conversion />

src/components/organisms/AssetActions/index.tsx

@@ -2,7 +2,7 @@ import React, { ReactElement, useState, useEffect } from 'react'
 import styles from './index.module.css'
 import Compute from './Compute'
 import Consume from './Consume'
-import { Logger } from '@oceanprotocol/lib'
+import { Logger, File as FileMetadata, DID } from '@oceanprotocol/lib'
 import Tabs from '../../atoms/Tabs'
 import compareAsBN from '../../../utils/compareAsBN'
 import Pool from './Pool'
@@ -10,20 +10,44 @@ import Trade from './Trade'
 import { useAsset } from '../../../providers/Asset'
 import { useOcean } from '../../../providers/Ocean'
 import { useWeb3 } from '../../../providers/Web3'
+import { getFileInfo } from '../../../utils/provider'
+import axios from 'axios'
 
 export default function AssetActions(): ReactElement {
   const { accountId } = useWeb3()
-  const { ocean, balance, account } = useOcean()
-  const { price, ddo, metadata } = useAsset()
+  const { config, ocean, balance, account } = useOcean()
+  const { price, ddo } = useAsset()
 
   const [isBalanceSufficient, setIsBalanceSufficient] = useState<boolean>()
   const [dtBalance, setDtBalance] = useState<string>()
+  const [fileMetadata, setFileMetadata] = useState<FileMetadata>(Object)
+  const [fileIsLoading, setFileIsLoading] = useState<boolean>(false)
   const isCompute = Boolean(ddo?.findServiceByType('compute'))
 
+  useEffect(() => {
+    if (!config) return
+    const source = axios.CancelToken.source()
+    async function initFileInfo() {
+      setFileIsLoading(true)
+      try {
+        const fileInfo = await getFileInfo(
+          DID.parse(`${ddo.id}`),
+          config.providerUri,
+          source.token
+        )
+        setFileMetadata(fileInfo.data[0])
+      } catch (error) {
+        Logger.error(error.message)
+      } finally {
+        setFileIsLoading(false)
+      }
+    }
+    initFileInfo()
+  }, [config, ddo.id])
+
   // Get and set user DT balance
   useEffect(() => {
     if (!ocean || !accountId) return
-
     async function init() {
       try {
         const dtBalance = await ocean.datatokens.balance(
@@ -55,14 +79,16 @@ export default function AssetActions(): ReactElement {
     <Compute
       dtBalance={dtBalance}
       isBalanceSufficient={isBalanceSufficient}
-      file={metadata?.main.files[0]}
+      file={fileMetadata}
+      fileIsLoading={fileIsLoading}
     />
   ) : (
     <Consume
       ddo={ddo}
       dtBalance={dtBalance}
       isBalanceSufficient={isBalanceSufficient}
-      file={metadata?.main.files[0]}
+      file={fileMetadata}
+      fileIsLoading={fileIsLoading}
     />
   )
 

src/utils/provider.ts

@@ -1,6 +1,6 @@
 import axios, { CancelToken, AxiosResponse } from 'axios'
 import { toast } from 'react-toastify'
-import { File as FileMetadata, Logger } from '@oceanprotocol/lib'
+import { DID, File as FileMetadata, Logger } from '@oceanprotocol/lib'
 
 export async function fileinfo(
   url: string,
@@ -57,3 +57,26 @@ export async function fileinfo(
     Logger.error(error.message)
   }
 }
+
+export async function getFileInfo(
+  url: string | DID,
+  providerUri: string,
+  cancelToken: CancelToken
+): Promise<AxiosResponse> {
+  let postBody
+  try {
+    if (url instanceof DID)
+      postBody = {
+        did: url.getDid(),
+        cancelToken
+      }
+    else
+      postBody = {
+        url,
+        cancelToken
+      }
+    return await axios.post(`${providerUri}/api/v1/services/fileinfo`, postBody)
+  } catch (error) {
+    Logger.error(error.message)
+  }
+}