adding ipfs / arweave support (#1765)

* support storage type publish

* adding storageType to edit form

* add IPFS type

* fix testst and rollback ipfs typing

* update oceanjs lib

* fix Ipfs type

* Update package-lock.json

* added graphql and smartcontract options UI (WIP)

* update package.json

* removed graphql and smartcontracts

* make various fixes for edit and publish with IPFS (missing Arweave)

* removed no-case-declarations lines

* moved ipfs utils

* renamed getFileUrlInfo to getFileInfo

* added is-ipfs to jest mock

* Update package-lock.json

* fix things

* npm is fun

* rename url to file in getFileInfo

* refactor publish form (storage type field)

* fix tab value when changing tabs

* refactoring edit form

* more refactor edit form

* fix edit validation

* fix validation when input is empty on edit form

* fix validation when loading asset in edit form

* change URL to file confirmed

* change messages based on service type

* Update form.json

* fix FileInput tests and added ipfs / arweave tests

* removed unnecessary comment

* Update index.tsx

* cleanup logic

* update @oceanprotocol/lib

* Update package-lock.json

* fix test error

* fix test assetsWithAccessDetails

Co-authored-by: Matthias Kretschmann <m@kretschmann.io>

.jest/__fixtures__/assetAquarius.ts

@@ -57,12 +57,12 @@ export const assetAquarius: Asset = {
     }
   ],
   stats: {
-    orders: 22
+    orders: 22,
-    // price: {
+    price: {
-    //   value: 3231343254,
+      value: 3231343254,
-    //   tokenAddress: '0xCfDdA22C9837aE76E0faA845354f33C62E03653a',
+      tokenAddress: '0xCfDdA22C9837aE76E0faA845354f33C62E03653a',
-    //   tokenSymbol: 'OCEAN'
+      tokenSymbol: 'OCEAN'
-    // }
+    }
   },
   purgatory: {
     state: false,

.jest/__fixtures__/assetsWithAccessDetails.ts

@@ -68,8 +68,12 @@ export const assets: AssetExtended[] = [
     ],
     stats: {
       allocated: 0,
-      orders: 0
+      orders: 0,
-      // price: {}
+      price: {
+        value: 3231343254,
+        tokenAddress: '0xCfDdA22C9837aE76E0faA845354f33C62E03653a',
+        tokenSymbol: 'OCEAN'
+      }
     },
     version: '4.1.0',
     accessDetails: {
@@ -151,12 +155,12 @@ export const assets: AssetExtended[] = [
     ],
     stats: {
       allocated: 45554.69921875,
-      orders: 1
+      orders: 1,
-      // price: {
+      price: {
-      //   tokenAddress: '0x282d8efCe846A88B159800bd4130ad77443Fa1A1',
+        value: 3231343254,
-      //   tokenSymbol: 'mOCEAN',
+        tokenAddress: '0xCfDdA22C9837aE76E0faA845354f33C62E03653a',
-      //   value: 100
+        tokenSymbol: 'OCEAN'
-      // }
+      }
     },
     version: '4.1.0',
     accessDetails: {
@@ -245,12 +249,12 @@ export const assets: AssetExtended[] = [
     ],
     stats: {
       allocated: 0,
-      orders: 1
+      orders: 1,
-      // price: {
+      price: {
-      //   tokenAddress: '0xCfDdA22C9837aE76E0faA845354f33C62E03653a',
+        value: 3231343254,
-      //   tokenSymbol: 'OCEAN',
+        tokenAddress: '0xCfDdA22C9837aE76E0faA845354f33C62E03653a',
-      //   value: 7
+        tokenSymbol: 'OCEAN'
-      // }
+      }
     },
     version: '4.1.0',
     accessDetails: {
@@ -339,12 +343,12 @@ export const assets: AssetExtended[] = [
     ],
     stats: {
       allocated: 50.2051887512,
-      orders: 1
+      orders: 1,
-      // price: {
+      price: {
-      //   tokenAddress: '0xCfDdA22C9837aE76E0faA845354f33C62E03653a',
+        value: 3231343254,
-      //   tokenSymbol: 'OCEAN',
+        tokenAddress: '0xCfDdA22C9837aE76E0faA845354f33C62E03653a',
-      //   value: 10
+        tokenSymbol: 'OCEAN'
-      // }
+      }
     },
     version: '4.1.0',
     accessDetails: {
@@ -439,12 +443,12 @@ export const assets: AssetExtended[] = [
     ],
     stats: {
       allocated: 0,
-      orders: 1
+      orders: 1,
-      // price: {
+      price: {
-      //   tokenAddress: '0xCfDdA22C9837aE76E0faA845354f33C62E03653a',
+        value: 3231343254,
-      //   tokenSymbol: 'OCEAN',
+        tokenAddress: '0xCfDdA22C9837aE76E0faA845354f33C62E03653a',
-      //   value: 6
+        tokenSymbol: 'OCEAN'
-      // }
+      }
     },
     version: '4.1.0',
     accessDetails: {
@@ -569,12 +573,12 @@ export const assets: AssetExtended[] = [
     ],
     stats: {
       allocated: 0,
-      orders: 1
+      orders: 1,
-      // price: {
+      price: {
-      //   tokenAddress: '0xCfDdA22C9837aE76E0faA845354f33C62E03653a',
+        value: 3231343254,
-      //   tokenSymbol: 'OCEAN',
+        tokenAddress: '0xCfDdA22C9837aE76E0faA845354f33C62E03653a',
-      //   value: 5
+        tokenSymbol: 'OCEAN'
-      // }
+      }
     },
     version: '4.1.0'
   },
@@ -657,12 +661,12 @@ export const assets: AssetExtended[] = [
     ],
     stats: {
       allocated: 0,
-      orders: 1
+      orders: 1,
-      // price: {
+      price: {
-      //   tokenAddress: '0xCfDdA22C9837aE76E0faA845354f33C62E03653a',
+        value: 3231343254,
-      //   tokenSymbol: 'OCEAN',
+        tokenAddress: '0xCfDdA22C9837aE76E0faA845354f33C62E03653a',
-      //   value: 5
+        tokenSymbol: 'OCEAN'
-      // }
+      }
     },
     version: '4.1.0',
     accessDetails: {
@@ -751,12 +755,12 @@ export const assets: AssetExtended[] = [
     ],
     stats: {
       allocated: 0,
-      orders: 1
+      orders: 1,
-      // price: {
+      price: {
-      //   tokenAddress: '0xCfDdA22C9837aE76E0faA845354f33C62E03653a',
+        value: 3231343254,
-      //   tokenSymbol: 'OCEAN',
+        tokenAddress: '0xCfDdA22C9837aE76E0faA845354f33C62E03653a',
-      //   value: 5
+        tokenSymbol: 'OCEAN'
-      // }
+      }
     },
     version: '4.1.0',
     accessDetails: {
@@ -844,10 +848,12 @@ export const assets: AssetExtended[] = [
     ],
     stats: {
       allocated: 114.1658859253,
-      orders: 1
+      orders: 1,
-      // price: {
+      price: {
-      //   value: 0
+        value: 3231343254,
-      // }
+        tokenAddress: '0xCfDdA22C9837aE76E0faA845354f33C62E03653a',
+        tokenSymbol: 'OCEAN'
+      }
     },
     version: '4.1.0',
     accessDetails: {
@@ -927,12 +933,12 @@ export const assets: AssetExtended[] = [
       }
     ],
     stats: {
-      orders: 1
+      orders: 1,
-      // price: {
+      price: {
-      //   tokenAddress: '0xCfDdA22C9837aE76E0faA845354f33C62E03653a',
+        value: 3231343254,
-      //   tokenSymbol: 'OCEAN',
+        tokenAddress: '0xCfDdA22C9837aE76E0faA845354f33C62E03653a',
-      //   value: 2
+        tokenSymbol: 'OCEAN'
-      // }
+      }
     },
     version: '4.1.0',
     accessDetails: {
@@ -1018,10 +1024,12 @@ export const assets: AssetExtended[] = [
       }
     ],
     stats: {
-      orders: 1
+      orders: 1,
-      // price: {
+      price: {
-      //   value: 0
+        value: 3231343254,
-      // }
+        tokenAddress: '0xCfDdA22C9837aE76E0faA845354f33C62E03653a',
+        tokenSymbol: 'OCEAN'
+      }
     },
     version: '4.1.0',
     accessDetails: {
@@ -1103,10 +1111,12 @@ export const assets: AssetExtended[] = [
     ],
     stats: {
       allocated: 11159.279296875,
-      orders: 1
+      orders: 1,
-      // price: {
+      price: {
-      //   value: 0
+        value: 3231343254,
-      // }
+        tokenAddress: '0xCfDdA22C9837aE76E0faA845354f33C62E03653a',
+        tokenSymbol: 'OCEAN'
+      }
     },
     version: '4.1.0',
     accessDetails: {
@@ -1186,10 +1196,12 @@ export const assets: AssetExtended[] = [
       }
     ],
     stats: {
-      orders: 0
+      orders: 0,
-      // price: {
+      price: {
-      //   value: 0
+        value: 3231343254,
-      // }
+        tokenAddress: '0xCfDdA22C9837aE76E0faA845354f33C62E03653a',
+        tokenSymbol: 'OCEAN'
+      }
     },
     version: '4.1.0',
     accessDetails: {
@@ -1270,8 +1282,12 @@ export const assets: AssetExtended[] = [
     ],
     stats: {
       allocated: 0,
-      orders: 0
+      orders: 0,
-      // price: {}
+      price: {
+        value: 3231343254,
+        tokenAddress: '0xCfDdA22C9837aE76E0faA845354f33C62E03653a',
+        tokenSymbol: 'OCEAN'
+      }
     },
     version: '4.1.0',
     accessDetails: {
@@ -1339,12 +1355,12 @@ export const assets: AssetExtended[] = [
       }
     ],
     stats: {
-      orders: 1
+      orders: 1,
-      // price: {
+      price: {
-      //   tokenAddress: '0xCfDdA22C9837aE76E0faA845354f33C62E03653a',
+        value: 3231343254,
-      //   tokenSymbol: 'OCEAN',
+        tokenAddress: '0xCfDdA22C9837aE76E0faA845354f33C62E03653a',
-      //   value: 1
+        tokenSymbol: 'OCEAN'
-      // }
+      }
     },
     version: '4.1.0',
     accessDetails: {
@@ -1430,10 +1446,12 @@ export const assets: AssetExtended[] = [
       }
     ],
     stats: {
-      orders: 0
+      orders: 0,
-      // price: {
+      price: {
-      //   value: 0
+        value: 3231343254,
-      // }
+        tokenAddress: '0xCfDdA22C9837aE76E0faA845354f33C62E03653a',
+        tokenSymbol: 'OCEAN'
+      }
     },
     version: '4.1.0',
     accessDetails: {
@@ -1525,7 +1543,12 @@ export const assets: AssetExtended[] = [
     ],
     stats: {
       allocated: 422.9883117676,
-      orders: 0
+      orders: 0,
+      price: {
+        value: 3231343254,
+        tokenAddress: '0xCfDdA22C9837aE76E0faA845354f33C62E03653a',
+        tokenSymbol: 'OCEAN'
+      }
     },
     version: '4.1.0',
     accessDetails: {

.jest/__mocks__/is-ipfs/index.ts

@@ -0,0 +1 @@
+export default true

.jest/__mocks__/is-url-superb/index.ts

@@ -1 +1,3 @@
-export default true
+export default function isUrl() {
+  return true
+}

content/pages/editMetadata.json

@@ -29,19 +29,62 @@
       },
       {
         "name": "files",
-        "label": "New file",
+        "label": "File",
-        "placeholder": "e.g. https://file.com/file.json",
+        "prominentHelp": false, 
-        "help": "This URL will be stored encrypted after publishing. **Please make sure that the endpoint is accessible over the internet and is not protected by a firewall or by credentials.** For a compute dataset, your file should match the file type required by the algorithm, and should not exceed 1 GB in file size. Leaving this field empty will not remove the current value.",
+        "type": "tabs",
+        "fields": [{
+          "value": "ipfs",
+          "title": "IPFS",
+          "label": "CID",
+          "placeholder": "e.g. bafkreidgvpkjawlxz6sffxzwgooowe5yt7i6wsyg236mfoks77nywkptdq",
+          "help": "This CID will be stored encrypted after publishing.",
+          "computeHelp": "For a compute dataset, your file should match the file type required by the algorithm, and should not exceed 1 GB in file size. ",
           "prominentHelp": true,
-        "type": "files"
+          "type": "files",
+          "required": true
         },
         {
-        "name": "links",
+          "value": "arweave",
-        "label": "New sample file",
+          "title": "Arweave",
-        "placeholder": "e.g. https://file.com/samplefile.json",
+          "label": "Transaction ID",
-        "help": "Please provide a URL to a sample of your dataset file. This file should reveal the data structure of your dataset, e.g. by including the header and one line of a CSV file. This file URL will be publicly available after publishing. **Please make sure that the endpoint is accessible over the internet and is not protected by a firewall or by credentials.** Leaving this field empty will not remove the current value.",
+          "placeholder": "e.g. DBRCL94j3QqdPaUtt4VWRen8rZfJZBb7Ey40iMpXfhtd",
+          "help": "This Transaction ID will be stored encrypted after publishing.",
+          "computeHelp": "For a compute dataset, your file should match the file type required by the algorithm, and should not exceed 1 GB in file size. ",
           "prominentHelp": true,
-        "type": "files"
+          "type": "files",
+          "required": true
+        },
+        {
+          "value": "url",
+          "title": "URL",
+          "label": "File",
+          "placeholder": "e.g. https://file.com/file.json",
+          "help": "This URL will be stored encrypted after publishing. **Please make sure that the endpoint is accessible over the internet and is not protected by a firewall or by credentials.**",
+          "computeHelp": "For a compute dataset, your file should match the file type required by the algorithm, and should not exceed 1 GB in file size. ",
+          "prominentHelp": true,
+          "type": "files",
+          "required": true
+        }],
+        "sortOptions": false,
+        "required": true
+      },{
+        "name": "links",
+        "label": "Sample file",
+        "prominentHelp": false,
+        "type": "tabs",
+        "fields": [
+          {
+            "value": "url",
+            "title": "URL",
+            "label": "File",
+            "placeholder": "e.g. https://file.com/file.json",
+            "help": "This URL will be stored encrypted after publishing. **Please make sure that the endpoint is accessible over the internet and is not protected by a firewall or by credentials.**",
+            "computeHelp": "For a compute dataset, your file should match the file type required by the algorithm, and should not exceed 1 GB in file size. ",
+            "prominentHelp": true,
+            "type": "files",
+            "required": false
+          }],
+        "required": false
       },
 
       {

content/publish/form.json

@@ -104,19 +104,61 @@
       {
         "name": "files",
         "label": "File",
-        "placeholder": "e.g. https://file.com/file.json",
+        "prominentHelp": false, 
-        "help": "This URL will be stored encrypted after publishing. **Please make sure that the endpoint is accessible over the internet and is not protected by a firewall or by credentials.** For a compute dataset, your file should match the file type required by the algorithm, and should not exceed 1 GB in file size. ",
+        "type": "tabs",
+        "fields": [{
+          "value": "ipfs",
+          "title": "IPFS",
+          "label": "CID",
+          "placeholder": "e.g. bafkreidgvpkjawlxz6sffxzwgooowe5yt7i6wsyg236mfoks77nywkptdq",
+          "help": "This CID will be stored encrypted after publishing.",
+          "computeHelp": "For a compute dataset, your file should match the file type required by the algorithm, and should not exceed 1 GB in file size. ",
           "prominentHelp": true,
           "type": "files",
           "required": true
         },
         {
+          "value": "arweave",
+          "title": "Arweave",
+          "label": "Transaction ID",
+          "placeholder": "e.g. DBRCL94j3QqdPaUtt4VWRen8rZfJZBb7Ey40iMpXfhtd",
+          "help": "This Transaction ID will be stored encrypted after publishing.",
+          "computeHelp": "For a compute dataset, your file should match the file type required by the algorithm, and should not exceed 1 GB in file size. ",
+          "prominentHelp": true,
+          "type": "files",
+          "required": true
+        },
+        {
+          "value": "url",
+          "title": "URL",
+          "label": "File",
+          "placeholder": "e.g. https://file.com/file.json",
+          "help": "This URL will be stored encrypted after publishing. **Please make sure that the endpoint is accessible over the internet and is not protected by a firewall or by credentials.**",
+          "computeHelp": "For a compute dataset, your file should match the file type required by the algorithm, and should not exceed 1 GB in file size. ",
+          "prominentHelp": true,
+          "type": "files",
+          "required": true
+        }],
+        "sortOptions": false,
+        "required": true
+      },{
         "name": "links",
         "label": "Sample file",
-        "placeholder": "e.g. https://file.com/samplefile.json",
+        "prominentHelp": false,
-        "help": "This file should reveal the data structure of your dataset, e.g. by including the header and one line of a CSV file. This file URL will be publicly available after publishing. **Please make sure that the endpoint is accessible over the internet and is not protected by a firewall or by credentials.**",
+        "type": "tabs",
+        "fields": [
+          {
+          "value": "url",
+          "title": "URL",
+          "label": "File",
+          "placeholder": "e.g. https://file.com/file.json",
+          "help": "This URL will be stored encrypted after publishing. **Please make sure that the endpoint is accessible over the internet and is not protected by a firewall or by credentials.**",
+          "computeHelp": "For a compute dataset, your file should match the file type required by the algorithm, and should not exceed 1 GB in file size. ",
           "prominentHelp": true,
-        "type": "files"
+          "type": "files",
+          "required": false
+        }],
+        "required": false
       },
       {
         "name": "algorithmPrivacy",

package.json

@@ -26,7 +26,7 @@
     "@coingecko/cryptoformat": "^0.5.4",
     "@loadable/component": "^5.15.2",
     "@oceanprotocol/art": "^3.2.0",
-    "@oceanprotocol/lib": "^2.4.0",
+    "@oceanprotocol/lib": "^2.5.2",
     "@oceanprotocol/typographies": "^0.1.0",
     "@oceanprotocol/use-dark-mode": "^2.4.3",
     "@tippyjs/react": "^4.2.6",
@@ -41,6 +41,7 @@
     "filesize": "^10.0.5",
     "formik": "^2.2.9",
     "gray-matter": "^4.0.3",
+    "is-ipfs": "^7.0.3",
     "is-url-superb": "^6.1.0",
     "js-cookie": "^3.0.1",
     "match-sorter": "^6.3.1",

src/@utils/ipfs.ts

@@ -0,0 +1,5 @@
+import * as isIPFS from 'is-ipfs'
+
+export function isCID(value: string) {
+  return isIPFS.cid(value)
+}

src/@utils/provider.ts

@@ -1,9 +1,11 @@
 import {
+  Arweave,
   ComputeAlgorithm,
   ComputeAsset,
   ComputeEnvironment,
   downloadFileBrowser,
   FileInfo,
+  Ipfs,
   LoggerInstance,
   ProviderComputeInitializeResults,
   ProviderInstance,
@@ -83,18 +85,45 @@ export async function getFileDidInfo(
   }
 }
 
-export async function getFileUrlInfo(
+export async function getFileInfo(
-  url: string,
+  file: string,
-  providerUrl: string
+  providerUrl: string,
+  storageType: string
 ): Promise<FileInfo[]> {
   try {
+    let response
+    switch (storageType) {
+      case 'ipfs': {
+        const fileIPFS: Ipfs = {
+          type: 'ipfs',
+          hash: file
+        }
+
+        response = await ProviderInstance.getFileInfo(fileIPFS, providerUrl)
+
+        break
+      }
+      case 'arweave': {
+        const fileArweave: Arweave = {
+          type: 'arweave',
+          transactionId: file
+        }
+
+        response = await ProviderInstance.getFileInfo(fileArweave, providerUrl)
+        break
+      }
+      default: {
         const fileUrl: UrlFile = {
           type: 'url',
           index: 0,
-      url,
+          url: file,
           method: 'get'
         }
-    const response = await ProviderInstance.getFileInfo(fileUrl, providerUrl)
+
+        response = await ProviderInstance.getFileInfo(fileUrl, providerUrl)
+        break
+      }
+    }
     return response
   } catch (error) {
     LoggerInstance.error(error.message)

src/@utils/yup.ts

@@ -0,0 +1,44 @@
+import { isCID } from '@utils/ipfs'
+import isUrl from 'is-url-superb'
+import * as Yup from 'yup'
+
+export function testLinks() {
+  return Yup.string().test((value, context) => {
+    const { type } = context.parent
+    let validField
+    let errorMessage
+
+    switch (type) {
+      case 'url':
+        validField = isUrl(value?.toString() || '')
+        if (!validField) {
+          errorMessage = 'Must be a valid url.'
+        } else {
+          if (value?.toString().includes('drive.google')) {
+            validField = false
+            errorMessage =
+              'Google Drive is not a supported hosting service. Please use an alternative.'
+          }
+        }
+        break
+      case 'ipfs':
+        validField = isCID(value?.toString())
+        errorMessage = !value?.toString() ? 'CID required.' : 'CID not valid.'
+        break
+      case 'arweave':
+        validField = !value?.toString().includes('http')
+        errorMessage = !value?.toString()
+          ? 'Transaction ID required.'
+          : 'Transaction ID not valid.'
+        break
+    }
+
+    if (!validField) {
+      return context.createError({
+        message: errorMessage
+      })
+    }
+
+    return true
+  })
+}

src/components/@shared/FormInput/InputElement/ContainerInput/index.tsx

@@ -75,6 +75,7 @@ export default function ContainerInput(props: InputProps): ReactElement {
           name={`${field.name}[0].url`}
           checkUrl={false}
           isLoading={isLoading}
+          storageType={'url'}
           handleButtonClick={handleValidation}
         />
       )}

src/components/@shared/FormInput/InputElement/FilesInput/Info.tsx

@@ -23,7 +23,7 @@ export default function FileInfo({
         {hideUrl ? 'https://oceanprotocol/placeholder' : file.url}
       </h3>
       <ul>
-        <li className={styles.success}>✓ URL confirmed</li>
+        <li className={styles.success}>✓ File confirmed</li>
         {file.contentLength && <li>{prettySize(+file.contentLength)}</li>}
         {contentTypeCleaned && <li>{contentTypeCleaned}</li>}
       </ul>

src/components/@shared/FormInput/InputElement/FilesInput/index.test.tsx

@@ -2,7 +2,7 @@ import { fireEvent, render, screen } from '@testing-library/react'
 import React from 'react'
 import FilesInput from './index'
 import { useField } from 'formik'
-import { getFileUrlInfo } from '@utils/provider'
+import { getFileInfo } from '@utils/provider'
 
 jest.mock('formik')
 jest.mock('@utils/provider')
@@ -48,16 +48,17 @@ const mockForm = {
 describe('@shared/FormInput/InputElement/FilesInput', () => {
   it('renders without crashing', async () => {
     ;(useField as jest.Mock).mockReturnValue([mockField, mockMeta, mockHelpers])
-    ;(getFileUrlInfo as jest.Mock).mockReturnValue([
+    ;(getFileInfo as jest.Mock).mockReturnValue([
       {
         valid: true,
         url: 'https://hello.com',
+        type: 'url',
         contentType: 'text/html',
         contentLength: 100
       }
     ])
 
-    render(<FilesInput form={mockForm} {...props} />)
+    render(<FilesInput form={mockForm} field={mockField} {...props} />)
     expect(screen.getByText('Validate')).toBeInTheDocument()
     fireEvent.click(screen.getByText('Validate'))
 
@@ -67,13 +68,14 @@ describe('@shared/FormInput/InputElement/FilesInput', () => {
     expect(mockHelpers.setValue).toHaveBeenCalled()
   })
 
-  it('renders fileinfo when file is valid', () => {
+  it('renders fileinfo when file url is valid', () => {
     ;(useField as jest.Mock).mockReturnValue([
       {
         value: [
           {
             valid: true,
             url: 'https://hello.com',
+            type: 'url',
             contentType: 'text/html',
             contentLength: 100
           }
@@ -82,10 +84,52 @@ describe('@shared/FormInput/InputElement/FilesInput', () => {
       mockMeta,
       mockHelpers
     ])
-    render(<FilesInput {...props} />)
+    render(<FilesInput {...props} field={mockField} />)
     expect(screen.getByText('https://hello.com')).toBeInTheDocument()
   })
 
+  it('renders fileinfo when ipfs is valid', () => {
+    ;(useField as jest.Mock).mockReturnValue([
+      {
+        value: [
+          {
+            valid: true,
+            hash: 'bafkreicxccbk4blsx5qtovqfgsuutxjxom47dvyzyz3asi2ggjg5ipwlc4',
+            type: 'ipfs',
+            contentLength: '40492',
+            contentType: 'text/csv',
+            index: 0
+          }
+        ]
+      },
+      mockMeta,
+      mockHelpers
+    ])
+    render(<FilesInput {...props} field={mockField} />)
+    expect(screen.getByText('✓ File confirmed')).toBeInTheDocument()
+  })
+
+  it('renders fileinfo when arweave is valid', () => {
+    ;(useField as jest.Mock).mockReturnValue([
+      {
+        value: [
+          {
+            valid: true,
+            transactionId: 'T6NL8Zc0LCbT3bF9HacAGQC4W0_hW7b3tXbm8OtWtlA',
+            type: 'arweave',
+            contentLength: '57043',
+            contentType: 'image/jpeg',
+            index: 0
+          }
+        ]
+      },
+      mockMeta,
+      mockHelpers
+    ])
+    render(<FilesInput {...props} field={mockField} />)
+    expect(screen.getByText('✓ File confirmed')).toBeInTheDocument()
+  })
+
   it('renders fileinfo without contentType', () => {
     ;(useField as jest.Mock).mockReturnValue([
       {
@@ -93,6 +137,7 @@ describe('@shared/FormInput/InputElement/FilesInput', () => {
           {
             valid: true,
             url: 'https://hello.com',
+            type: 'url',
             contentLength: 100
           }
         ]
@@ -100,7 +145,7 @@ describe('@shared/FormInput/InputElement/FilesInput', () => {
       mockMeta,
       mockHelpers
     ])
-    render(<FilesInput {...props} />)
+    render(<FilesInput {...props} field={mockField} />)
   })
 
   it('renders fileinfo placeholder when hideUrl is passed', () => {
@@ -117,7 +162,7 @@ describe('@shared/FormInput/InputElement/FilesInput', () => {
       mockMeta,
       mockHelpers
     ])
-    render(<FilesInput {...props} />)
+    render(<FilesInput {...props} field={mockField} />)
     expect(
       screen.getByText('https://oceanprotocol/placeholder')
     ).toBeInTheDocument()

src/components/@shared/FormInput/InputElement/FilesInput/index.tsx

@@ -1,9 +1,9 @@
-import React, { ReactElement, useState } from 'react'
+import React, { ReactElement, useEffect, useState } from 'react'
 import { useField } from 'formik'
 import FileInfo from './Info'
 import UrlInput from '../URLInput'
 import { InputProps } from '@shared/FormInput'
-import { getFileUrlInfo } from '@utils/provider'
+import { getFileInfo } from '@utils/provider'
 import { LoggerInstance } from '@oceanprotocol/lib'
 import { useAsset } from '@context/Asset'
 
@@ -12,14 +12,17 @@ export default function FilesInput(props: InputProps): ReactElement {
   const [isLoading, setIsLoading] = useState(false)
   const { asset } = useAsset()
 
+  const providerUrl = props.form?.values?.services
+    ? props.form?.values?.services[0].providerUrl.url
+    : asset.services[0].serviceEndpoint
+
+  const storageType = field.value[0].type
+
   async function handleValidation(e: React.SyntheticEvent, url: string) {
     // File example 'https://oceanprotocol.com/tech-whitepaper.pdf'
     e?.preventDefault()
 
     try {
-      const providerUrl = props.form?.values?.services
-        ? props.form?.values?.services[0].providerUrl.url
-        : asset.services[0].serviceEndpoint
       setIsLoading(true)
 
       // TODO: handled on provider
@@ -29,7 +32,7 @@ export default function FilesInput(props: InputProps): ReactElement {
         )
       }
 
-      const checkedFile = await getFileUrlInfo(url, providerUrl)
+      const checkedFile = await getFileInfo(url, providerUrl, storageType)
 
       // error if something's not right from response
       if (!checkedFile)
@@ -39,7 +42,7 @@ export default function FilesInput(props: InputProps): ReactElement {
         throw Error('✗ No valid file detected. Check your URL and try again.')
 
       // if all good, add file to formik state
-      helpers.setValue([{ url, ...checkedFile[0] }])
+      helpers.setValue([{ url, type: storageType, ...checkedFile[0] }])
     } catch (error) {
       props.form.setFieldError(`${field.name}[0].url`, error.message)
       LoggerInstance.error(error.message)
@@ -50,7 +53,9 @@ export default function FilesInput(props: InputProps): ReactElement {
 
   function handleClose() {
     helpers.setTouched(false)
-    helpers.setValue(meta.initialValue)
+    helpers.setValue([
+      { url: '', type: storageType === 'hidden' ? 'ipfs' : storageType }
+    ])
   }
 
   return (
@@ -64,7 +69,9 @@ export default function FilesInput(props: InputProps): ReactElement {
           {...props}
           name={`${field.name}[0].url`}
           isLoading={isLoading}
+          checkUrl={true}
           handleButtonClick={handleValidation}
+          storageType={storageType}
         />
       )}
     </>

src/components/@shared/FormInput/InputElement/URLInput/index.tsx

@@ -6,6 +6,7 @@ import styles from './index.module.css'
 import InputGroup from '@shared/FormInput/InputGroup'
 import InputElement from '@shared/FormInput/InputElement'
 import isUrl from 'is-url-superb'
+import { isCID } from '@utils/ipfs'
 
 export interface URLInputProps {
   submitText: string
@@ -13,6 +14,7 @@ export interface URLInputProps {
   isLoading: boolean
   name: string
   checkUrl?: boolean
+  storageType?: string
 }
 
 export default function URLInput({
@@ -21,6 +23,7 @@ export default function URLInput({
   isLoading,
   name,
   checkUrl,
+  storageType,
   ...props
 }: URLInputProps): ReactElement {
   const [field, meta] = useField(name)
@@ -32,7 +35,8 @@ export default function URLInput({
     setIsButtonDisabled(
       !field?.value ||
         field.value === '' ||
-        (checkUrl && !isUrl(field.value)) ||
+        (checkUrl && storageType === 'url' && !isUrl(field.value)) ||
+        (checkUrl && storageType === 'ipfs' && !isCID(field.value)) ||
         field.value.includes('javascript:') ||
         meta?.error
     )

src/components/@shared/FormInput/InputElement/index.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement } from 'react'
+import React, { ReactElement, useCallback, useState } from 'react'
 import styles from './index.module.css'
 import { InputProps } from '..'
 import FilesInput from './FilesInput'
@@ -11,6 +11,7 @@ import Nft from './Nft'
 import InputRadio from './Radio'
 import ContainerInput from '@shared/FormInput/InputElement/ContainerInput'
 import TagsAutoComplete from './TagsAutoComplete'
+import TabsFile from '@shared/atoms/TabsFile'
 
 const cx = classNames.bind(styles)
 
@@ -55,6 +56,7 @@ export default function InputElement({
   ...props
 }: InputProps): ReactElement {
   const styleClasses = cx({ select: true, [size]: size })
+
   switch (props.type) {
     case 'select': {
       const sortedOptions =
@@ -80,6 +82,26 @@ export default function InputElement({
         </select>
       )
     }
+    case 'tabs': {
+      const tabs: any = []
+      props.fields.map((field: any, i) => {
+        return tabs.push({
+          title: field.title,
+          field,
+          props,
+          content: (
+            <FilesInput
+              key={`fileInput_${i}`}
+              {...field}
+              form={form}
+              {...props}
+            />
+          )
+        })
+      })
+
+      return <TabsFile items={tabs} className={styles.pricing} />
+    }
     case 'textarea':
       return <textarea id={props.name} className={styles.textarea} {...props} />
 

src/components/@shared/FormInput/index.tsx

@@ -32,6 +32,7 @@ export interface InputProps {
   type?: string
   options?: string[] | AssetSelectionAsset[] | BoxSelectionOption[]
   sortOptions?: boolean
+  fields?: FieldInputProps<any>[]
   additionalComponent?: ReactElement
   value?: string | number
   onChange?(

src/components/@shared/atoms/TabsFile/index.module.css

@@ -0,0 +1,87 @@
+.tabListContainer {
+  margin-left: auto;
+  margin-right: auto;
+  border-bottom: 1px solid var(--border-color);
+  max-width: 100%;
+}
+
+.tabList {
+  text-align: center;
+  padding: calc(var(--spacer) / 2) 0 0 0;
+  display: flex;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.tab {
+  display: inline-block;
+  padding: calc(var(--spacer) / 8) calc(var(--spacer) / 2);
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-small);
+  text-transform: uppercase;
+  color: var(--color-secondary);
+  margin-right: -1px;
+  background: none;
+  border: 0;
+}
+
+.tab,
+.tab label {
+  cursor: pointer;
+}
+
+.tab:focus-visible {
+  outline: none;
+}
+
+.tab[aria-selected='true'] {
+  background-color: inherit;
+  color: inherit;
+  list-style: none;
+  background-color: var(--background-body);
+  border: 1px solid var(--border-color);
+  border-top-left-radius: var(--border-radius);
+  border-top-right-radius: var(--border-radius);
+  border-bottom: 0;
+}
+
+.tab[aria-disabled='true'] {
+  cursor: not-allowed;
+}
+
+.tab > div {
+  margin: 0;
+}
+
+.tabContent {
+  padding: calc(var(--spacer) / 2);
+  border: 1px solid var(--border-color);
+  border-bottom-left-radius: var(--border-radius);
+  border-bottom-right-radius: var(--border-radius);
+  border-top: 0;
+}
+
+.tabLabel{
+  color: var(--font-color-text);
+    font-size: var(--font-size-small);
+    font-family: var(--font-family-heading);
+    line-height: 1.2;
+    display: block;
+    margin-bottom: calc(var(--spacer) / 2);
+}
+
+@media (min-width: 40rem) {
+  .tabContent {
+    padding: calc(var(--spacer) / 2);
+  }
+}
+
+@media (min-width: 60rem) {
+  .tab {
+    padding: calc(var(--spacer) / 8) var(--spacer);
+  }
+}
+
+.radio {
+  composes: radio from '../../FormInput/InputElement/Radio/index.module.css';
+}

src/components/@shared/atoms/TabsFile/index.stories.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+
+import Tabs, { TabsProps } from '@shared/atoms/Tabs'
+
+export default {
+  title: 'Component/@shared/atoms/Tabs',
+  component: Tabs
+} as ComponentMeta<typeof Tabs>
+
+const Template: ComponentStory<typeof Tabs> = (args) => <Tabs {...args} />
+
+interface Props {
+  args: TabsProps
+}
+
+const items = [
+  {
+    title: 'First tab',
+    content: 'this is the content for the first tab'
+  },
+  {
+    title: 'Second tab',
+    content: 'this is the content for the second tab'
+  },
+  {
+    title: 'Third tab',
+    content: 'this is the content for the third tab'
+  }
+]
+
+export const Default = Template.bind({})
+Default.args = {
+  items
+}
+
+export const WithRadio: Props = Template.bind({})
+WithRadio.args = {
+  items,
+  showRadio: true
+}
+
+export const WithDefaultIndex: Props = Template.bind({})
+WithDefaultIndex.args = {
+  items,
+  defaultIndex: 1
+}
+
+export const LotsOfTabs: Props = Template.bind({})
+LotsOfTabs.args = {
+  items: items.flatMap((i) => [i, i, i])
+}

src/components/@shared/atoms/TabsFile/index.test.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { Default, WithRadio } from './index.stories'
+
+describe('Tabs', () => {
+  test('should be able to change', async () => {
+    render(<Default {...Default.args} />)
+
+    fireEvent.click(screen.getByText('Second tab'))
+    const secondTab = await screen.findByText(/content for the second tab/i)
+    expect(secondTab).toBeInTheDocument()
+  })
+
+  test('should fire custom change handler', async () => {
+    const handler = jest.fn()
+    render(<Default {...Default.args} handleTabChange={handler} />)
+
+    fireEvent.click(screen.getByText('Second tab'))
+    expect(handler).toBeCalledTimes(1)
+  })
+
+  test('renders WithRadio', () => {
+    render(<Default {...WithRadio.args} />)
+  })
+})

src/components/@shared/atoms/TabsFile/index.tsx

@@ -0,0 +1,109 @@
+import Label from '@shared/FormInput/Label'
+import Markdown from '@shared/Markdown'
+import { useFormikContext } from 'formik'
+import React, { ReactElement, ReactNode, useEffect, useState } from 'react'
+import { Tab, Tabs as ReactTabs, TabList, TabPanel } from 'react-tabs'
+import { FormPublishData } from 'src/components/Publish/_types'
+import Tooltip from '../Tooltip'
+import styles from './index.module.css'
+
+export interface TabsItem {
+  field: any
+  title: string
+  content: ReactNode
+  disabled?: boolean
+  props: any
+}
+
+export interface TabsProps {
+  items: TabsItem[]
+  className?: string
+}
+
+export default function TabsFile({
+  items,
+  className
+}: TabsProps): ReactElement {
+  const { values, setFieldValue } = useFormikContext<FormPublishData>()
+  const [tabIndex, setTabIndex] = useState(0)
+  // hide tabs if are hidden
+  const isHidden = items[tabIndex].props.value[0].type === 'hidden'
+
+  const setIndex = (tabName: string) => {
+    const index = items.findIndex((tab: any) => {
+      if (tab.title !== tabName) return false
+      return tab
+    })
+    setTabIndex(index)
+    setFieldValue(`${items[index].props.name}[0]`, {
+      url: '',
+      type: items[index].field.value
+    })
+  }
+
+  const handleTabChange = (tabName: string) => {
+    setIndex(tabName)
+  }
+
+  let textToolTip = false
+  if (values?.services) {
+    textToolTip = values.services[0].access === 'compute'
+  }
+
+  return (
+    <ReactTabs className={`${className || ''}`} defaultIndex={tabIndex}>
+      <div className={styles.tabListContainer}>
+        <TabList className={styles.tabList}>
+          {items.map((item, index) => {
+            if (isHidden) return null
+
+            return (
+              <Tab
+                className={styles.tab}
+                key={`tab_${items[tabIndex].props.name}_${index}`}
+                onClick={
+                  handleTabChange ? () => handleTabChange(item.title) : null
+                }
+                disabled={item.disabled}
+              >
+                {item.title}
+              </Tab>
+            )
+          })}
+        </TabList>
+      </div>
+      <div className={styles.tabContent}>
+        {items.map((item, index) => {
+          return (
+            <>
+              <TabPanel key={`tabpanel_${items[tabIndex].props.name}_${index}`}>
+                {!isHidden && (
+                  <label className={styles.tabLabel}>
+                    {item.field.label}
+                    {item.field.required && (
+                      <span title="Required" className={styles.required}>
+                        *
+                      </span>
+                    )}
+                    {item.field.help && item.field.prominentHelp && (
+                      <Tooltip
+                        content={
+                          <Markdown
+                            text={`${item.field.help} ${
+                              textToolTip ? item.field.computeHelp : ''
+                            }`}
+                          />
+                        }
+                      />
+                    )}
+                  </label>
+                )}
+                {item.content}
+              </TabPanel>
+            </>
+          )
+        })}
+      </div>
+    </ReactTabs>
+  )
+}

src/components/Asset/AssetActions/index.tsx

@@ -7,7 +7,7 @@ import { compareAsBN } from '@utils/numbers'
 import { useAsset } from '@context/Asset'
 import { useWeb3 } from '@context/Web3'
 import Web3Feedback from '@shared/Web3Feedback'
-import { getFileDidInfo, getFileUrlInfo } from '@utils/provider'
+import { getFileDidInfo, getFileInfo } from '@utils/provider'
 import { getOceanConfig } from '@utils/ocean'
 import { useCancelToken } from '@hooks/useCancelToken'
 import { useIsMounted } from '@hooks/useIsMounted'
@@ -52,14 +52,20 @@ export default function AssetActions({
         formikState?.values?.services[0].providerUrl.url ||
         asset?.services[0]?.serviceEndpoint
 
+      const storageType = formikState?.values?.services
+        ? formikState?.values?.services[0].files[0].type
+        : null
+
       try {
         const fileInfoResponse = formikState?.values?.services?.[0].files?.[0]
           .url
-          ? await getFileUrlInfo(
+          ? await getFileInfo(
               formikState?.values?.services?.[0].files?.[0].url,
-              providerUrl
+              providerUrl,
+              storageType
             )
           : await getFileDidInfo(asset?.id, asset?.services[0]?.id, providerUrl)
+
         fileInfoResponse && setFileMetadata(fileInfoResponse[0])
 
         // set the content type in the Dataset Schema

src/components/Asset/Edit/EditMetadata.tsx

@@ -115,7 +115,7 @@ export default function Edit({
           datatokenAddress: asset.services[0].datatokenAddress,
           files: [
             {
-              type: 'url',
+              type: values.files[0].type,
               index: 0,
               url: values.files[0].url,
               method: 'GET'

src/components/Asset/Edit/FormEditMetadata.tsx

@@ -1,10 +1,11 @@
 import React, { ReactElement, useEffect } from 'react'
 import { Field, Form, useFormikContext } from 'formik'
-import Input, { InputProps } from '@shared/FormInput'
+import Input from '@shared/FormInput'
 import FormActions from './FormActions'
 import { useAsset } from '@context/Asset'
 import { FormPublishData } from 'src/components/Publish/_types'
-import { getFileUrlInfo } from '@utils/provider'
+import { getFileInfo } from '@utils/provider'
+import { getFieldContent } from '@utils/form'
 
 export function checkIfTimeoutInPredefinedValues(
   timeout: string,
@@ -21,11 +22,11 @@ export default function FormEditMetadata({
   showPrice,
   isComputeDataset
 }: {
-  data: InputProps[]
+  data: FormFieldContent[]
   showPrice: boolean
   isComputeDataset: boolean
 }): ReactElement {
-  const { oceanConfig, asset } = useAsset()
+  const { asset } = useAsset()
   const { values, setFieldValue } = useFormikContext<FormPublishData>()
 
   // This component is handled by Formik so it's not rendered like a "normal" react component,
@@ -56,9 +57,10 @@ export default function FormEditMetadata({
     const providerUrl = values?.services
       ? values?.services[0].providerUrl.url
       : asset.services[0].serviceEndpoint
+
     // if we have a sample file, we need to get the files' info before setting defaults links value
     asset?.metadata?.links?.[0] &&
-      getFileUrlInfo(asset.metadata.links[0], providerUrl).then(
+      getFileInfo(asset.metadata.links[0], providerUrl, 'url').then(
         (checkedFile) => {
           // set valid false if url is using google drive
           if (asset.metadata.links[0].includes('drive.google')) {
@@ -74,6 +76,7 @@ export default function FormEditMetadata({
           setFieldValue('links', [
             {
               url: asset.metadata.links[0],
+              type: 'url',
               ...checkedFile[0]
             }
           ])
@@ -83,23 +86,48 @@ export default function FormEditMetadata({
 
   return (
     <Form>
-      {data.map(
+      <Field {...getFieldContent('name', data)} component={Input} name="name" />
-        (field: InputProps) =>
+
-          (!showPrice && field.name === 'price') || (
       <Field
-              key={field.name}
+        {...getFieldContent('description', data)}
-              options={
-                field.name === 'timeout' && isComputeDataset === true
-                  ? timeoutOptionsArray
-                  : field.options
-              }
-              {...field}
         component={Input}
-              prefix={field.name === 'price' && oceanConfig?.oceanTokenSymbol}
+        name="description"
+      />
+
+      {showPrice && (
+        <Field
+          {...getFieldContent('price', data)}
+          component={Input}
+          name="price"
         />
-          )
       )}
 
+      <Field
+        {...getFieldContent('files', data)}
+        component={Input}
+        name="files"
+      />
+
+      <Field
+        {...getFieldContent('links', data)}
+        component={Input}
+        name="links"
+      />
+
+      <Field
+        {...getFieldContent('timeout', data)}
+        component={Input}
+        name="timeout"
+      />
+
+      <Field
+        {...getFieldContent('author', data)}
+        component={Input}
+        name="author"
+      />
+
+      <Field {...getFieldContent('tags', data)} component={Input} name="tags" />
+
       <FormActions />
     </Form>
   )

src/components/Asset/Edit/_constants.ts

@@ -12,8 +12,8 @@ export function getInitialValues(
     name: metadata?.name,
     description: metadata?.description,
     price,
-    links: [{ url: '', type: '' }],
+    links: [{ url: '', type: 'url' }],
-    files: [{ url: '', type: '' }],
+    files: [{ url: '', type: 'ipfs' }],
     timeout: secondsToString(timeout),
     author: metadata?.author,
     tags: metadata?.tags,

src/components/Asset/Edit/_validation.ts

@@ -1,6 +1,7 @@
 import { FileInfo } from '@oceanprotocol/lib'
 import * as Yup from 'yup'
 import web3 from 'web3'
+import { testLinks } from '../../../@utils/yup'
 
 export const validationSchema = Yup.object().shape({
   name: Yup.string()
@@ -11,35 +12,32 @@ export const validationSchema = Yup.object().shape({
   files: Yup.array<FileInfo[]>()
     .of(
       Yup.object().shape({
-        url: Yup.string()
+        url: testLinks(),
-          .url('Must be a valid URL.')
+        valid: Yup.boolean().test((value, context) => {
-          .test(
+          const { type } = context.parent
-            'GoogleNotSupported',
+
-            'Google Drive is not a supported hosting service. Please use an alternative.',
+          // allow user to submit if the value type is hidden
-            (value) => {
+          if (type === 'hidden') return true
-              return !value?.toString().includes('drive.google')
+
-            }
+          return value || false
-          ),
+        })
-        valid: Yup.boolean().isTrue()
       })
     )
     .nullable(),
-  links: Yup.array<FileInfo[]>()
+  links: Yup.array<FileInfo[]>().of(
-    .of(
     Yup.object().shape({
-        url: Yup.string()
+      url: testLinks(),
-          .url('Must be a valid URL.')
+      valid: Yup.boolean().test((value, context) => {
-          .test(
+        // allow user to submit if the value is null
-            'GoogleNotSupported',
+        const { valid, url } = context.parent
-            'Google Drive is not a supported hosting service. Please use an alternative.',
+
-            (value) => {
+        // allow user to continue if the url is empty
-              return !value?.toString().includes('drive.google')
+        if (!url) return true
-            }
+
-          ),
+        return valid
-        valid: Yup.boolean().isTrue()
       })
-    )
+    })
-    .nullable(),
+  ),
   timeout: Yup.string().required('Required'),
   author: Yup.string().nullable(),
   tags: Yup.array<string[]>().nullable(),

src/components/Profile/History/index.tsx

@@ -5,7 +5,6 @@ import Downloads from './Downloads'
 import ComputeJobs from './ComputeJobs'
 import styles from './index.module.css'
 import { useWeb3 } from '@context/Web3'
-import { chainIds } from 'app.config'
 import { getComputeJobs } from '@utils/compute'
 import { useUserPreferences } from '@context/UserPreferences'
 import { useCancelToken } from '@hooks/useCancelToken'

src/components/Publish/_constants.tsx

@@ -72,8 +72,8 @@ export const initialValues: FormPublishData = {
   },
   services: [
     {
-      files: [{ url: '', type: '' }],
+      files: [{ url: '', type: 'ipfs' }],
-      links: [{ url: '', type: '' }],
+      links: [{ url: '', type: 'url' }],
       dataTokenOptions: { name: '', symbol: '' },
       timeout: '',
       access: 'access',

src/components/Publish/_utils.ts

@@ -139,18 +139,24 @@ export async function transformPublishFormToDdo(
   }
 
   // this is the default format hardcoded
+
   const file = {
     nftAddress,
     datatokenAddress,
     files: [
       {
-        type: 'url',
+        type: files[0].type,
         index: 0,
-        url: files[0].url,
+        [files[0].type === 'ipfs'
+          ? 'hash'
+          : files[0].type === 'arweave'
+          ? 'transactionId'
+          : 'url']: files[0].url,
         method: 'GET'
       }
     ]
   }
+
   const filesEncrypted =
     !isPreview &&
     files?.length &&

src/components/Publish/_validation.ts

@@ -2,6 +2,7 @@ import { MAX_DECIMALS } from '@utils/constants'
 import * as Yup from 'yup'
 import { getMaxDecimalsValidation } from '@utils/numbers'
 import { FileInfo } from '@oceanprotocol/lib'
+import { testLinks } from '../../@utils/yup'
 
 // TODO: conditional validation
 // e.g. when algo is selected, Docker image is required
@@ -32,16 +33,7 @@ const validationService = {
   files: Yup.array<FileInfo[]>()
     .of(
       Yup.object().shape({
-        url: Yup.string()
+        url: testLinks().required('Required'),
-          .test(
-            'GoogleNotSupported',
-            'Google Drive is not a supported hosting service. Please use an alternative.',
-            (value) => {
-              return !value?.toString().includes('drive.google')
-            }
-          )
-          .url('Must be a valid URL.')
-          .required('Required'),
 
         valid: Yup.boolean().isTrue().required('File must be valid.')
       })
@@ -51,16 +43,7 @@ const validationService = {
   links: Yup.array<FileInfo[]>()
     .of(
       Yup.object().shape({
-        url: Yup.string()
+        url: testLinks(),
-          .url('Must be a valid URL.')
-          .test(
-            'GoogleNotSupported',
-            'Google Drive is not a supported hosting service. Please use an alternative.',
-            (value) => {
-              return !value?.toString().includes('drive.google')
-            }
-          ),
-        // TODO: require valid file only when URL is given
         valid: Yup.boolean()
         // valid: Yup.boolean().isTrue('File must be valid.')
       })