#638 fix import and get value from env file

.env.example

@@ -8,3 +8,5 @@ GATSBY_NETWORK="rinkeby"
 #GATSBY_PORTIS_ID="xxx"
 #GATSBY_ALLOW_FIXED_PRICING="true"
 #GATSBY_ALLOW_DYNAMIC_PRICING="true"
+#GATSBY_ALLOW_ADVANCE_SETTINGS="true"
+#GATSBY_CREDENTIAL_TYPE="address"

app.config.js

@@ -43,5 +43,9 @@ module.exports = {
   // Used to show or hide the fixed and dynamic price options
   // tab to publishers during the price creation.
   allowFixedPricing: process.env.GATSBY_ALLOW_FIXED_PRICING || 'true',
-  allowDynamicPricing: process.env.GATSBY_ALLOW_DYNAMIC_PRICING || 'true'
+  allowDynamicPricing: process.env.GATSBY_ALLOW_DYNAMIC_PRICING || 'true',
+
+  // Used to show or hide advance settings button in asset details page
+  allowAdvanceSettings: process.env.GATSBY_ALLOW_ADVANCE_SETTINGS || 'false',
+  credentialType: process.env.GATSBY_CREDENTIAL_TYPE || 'address'
 }

src/components/organisms/AssetActions/Edit/DebugEditAdvanceSettings.tsx

@@ -1,29 +1,32 @@
-import { DDO, ServiceComputePrivacy } from '@oceanprotocol/lib'
+import { DDO, Credentials, CredentialType } from '@oceanprotocol/lib'
 import React, { ReactElement, useEffect, useState } from 'react'
 import { AdvanceSettingsForm } from '../../../../models/FormEditCredential'
 import { useOcean } from '../../../../providers/Ocean'
 import DebugOutput from '../../../atoms/DebugOutput'
-import { Credential } from '@oceanprotocol/lib/dist/node/ddo/interfaces/Credentials'
 
 export default function DebugEditCredential({
   values,
-  ddo
+  ddo,
+  credentialType
 }: {
   values: AdvanceSettingsForm
   ddo: DDO
+  credentialType: CredentialType
 }): ReactElement {
   const { ocean } = useOcean()
-  const [credential, setCredential] = useState<Credential>()
+  const [credential, setCredential] = useState<Credentials>()
 
   useEffect(() => {
     if (!ocean) return
 
     async function transformValues() {
-      // const credential = await transformComputeFormToServiceComputePrivacy(
-      //   values,
-      //   ocean
-      // )
-      // setCredential(credential)
+      const newDdo = await ocean.assets.updateCredentials(
+        ddo,
+        credentialType,
+        values.allowCredentail,
+        [] // TODO: denyCredential
+      )
+      setCredential(newDdo.credentials)
     }
     transformValues()
   }, [values, ddo, ocean])

src/components/organisms/AssetActions/Edit/EditAdvanceSettings.tsx

@@ -3,7 +3,7 @@ import React, { ReactElement, useState } from 'react'
 import { useAsset } from '../../../../providers/Asset'
 import { useUserPreferences } from '../../../../providers/UserPreferences'
 import styles from './index.module.css'
-import { DDO, Logger } from '@oceanprotocol/lib'
+import { Logger, CredentialType } from '@oceanprotocol/lib'
 import MetadataFeedback from '../../../molecules/MetadataFeedback'
 import { graphql, useStaticQuery } from 'gatsby'
 import { useWeb3 } from '../../../../providers/Web3'
@@ -15,7 +15,7 @@ import {
   validationSchema
 } from '../../../../models/FormEditCredential'
 import DebugEditAdvanceSettings from './DebugEditAdvanceSettings'
-import { CredentialType } from '@oceanprotocol/lib/dist/node/ddo/interfaces/Credentials'
+import { useSiteMetadata } from '../../../../hooks/useSiteMetadata'
 
 const contentQuery = graphql`
   query EditAvanceSettingsQuery {
@@ -59,24 +59,38 @@ export default function EditAdvanceSettings({
   const { metadata, ddo, refreshDdo, price } = useAsset()
   const [success, setSuccess] = useState<string>()
   const [error, setError] = useState<string>()
+  const { appConfig } = useSiteMetadata()
 
   const hasFeedback = error || success
-  // TODO : get from env
-  //const credentialType = CredentialType.address
+
+  let credentialType: CredentialType
+  switch (appConfig.credentialType) {
+    case 'address':
+      credentialType = CredentialType.address
+      break
+    case 'credential3Box':
+      credentialType = CredentialType.credential3Box
+      break
+    default:
+      credentialType = CredentialType.address
+  }
 
   async function handleSubmit(
     values: Partial<AdvanceSettingsForm>,
     resetForm: () => void
   ) {
     try {
-      // const ddoEditedCredential = await ocean.assets.updateCredentials(
-      //   ddo,
-      //   credentialType,
-      //   values.allowCredentail,
-      //   []
-      // )
+      const ddoEditedCredential = await ocean.assets.updateCredentials(
+        ddo,
+        credentialType,
+        values.allowCredentail,
+        [] // TODO: denyCredential
+      )
 
-      const storedddo = await ocean.assets.updateMetadata(ddo, accountId)
+      const storedddo = await ocean.assets.updateMetadata(
+        ddoEditedCredential,
+        accountId
+      )
 
       if (!storedddo) {
         setError(content.form.error)
@@ -94,8 +108,7 @@ export default function EditAdvanceSettings({
 
   return (
     <Formik
-      // TODO: get credential from DDO
-      initialValues={getInitialValues([])}
+      initialValues={getInitialValues(ddo, credentialType)}
       validationSchema={validationSchema}
       onSubmit={async (values, { resetForm }) => {
         window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })
@@ -124,13 +137,16 @@ export default function EditAdvanceSettings({
               <FormAdvanceSettings
                 data={content.form.data}
                 setShowEdit={setShowEdit}
-                values={initialValues}
               />
             </article>
 
             {debug === true && (
               <div className={styles.grid}>
-                <DebugEditAdvanceSettings values={values} ddo={ddo} />
+                <DebugEditAdvanceSettings
+                  values={values}
+                  ddo={ddo}
+                  credentialType={credentialType}
+                />
               </div>
             )}
           </>

src/components/organisms/AssetActions/Edit/FormAdvanceSettings.tsx

@@ -1,5 +1,5 @@
 import React, { ChangeEvent, ReactElement } from 'react'
-import styles from './FormEditMetadata.module.css' //TODO
+import styles from './FormEditMetadata.module.css' // TODO
 import { Field, Form, FormikContextType, useFormikContext } from 'formik'
 import Button from '../../../atoms/Button'
 import Input from '../../../atoms/Input'
@@ -10,12 +10,10 @@ import { AdvanceSettingsForm } from '../../../../models/FormEditCredential'
 
 export default function FormAdvanceSettings({
   data,
-  setShowEdit,
-  values
+  setShowEdit
 }: {
   data: FormFieldProps[]
   setShowEdit: (show: boolean) => void
-  values: Partial<AdvanceSettingsForm>
 }): ReactElement {
   const { accountId } = useWeb3()
   const { ocean, config } = useOcean()
@@ -40,7 +38,6 @@ export default function FormAdvanceSettings({
           key={field.name}
           {...field}
           component={Input}
-          prefix={field.name === 'price' && config.oceanTokenSymbol}
           onChange={(e: ChangeEvent<HTMLInputElement>) =>
             handleFieldChange(e, field)
           }
@@ -48,6 +45,9 @@ export default function FormAdvanceSettings({
       ))}
 
       <footer className={styles.actions}>
+        <Button style="primary" disabled={!ocean || !accountId || !isValid}>
+          Submit
+        </Button>
         <Button style="text" onClick={() => setShowEdit(false)}>
           Cancel
         </Button>

src/components/organisms/AssetContent/index.tsx

@@ -18,6 +18,7 @@ import EditHistory from './EditHistory'
 import { useWeb3 } from '../../../providers/Web3'
 import styles from './index.module.css'
 import EditAdvanceSettings from '../AssetActions/Edit/EditAdvanceSettings'
+import { useSiteMetadata } from '../../../hooks/useSiteMetadata'
 
 export interface AssetContentProps {
   path?: string
@@ -55,6 +56,7 @@ export default function AssetContent(props: AssetContentProps): ReactElement {
   ] = useState<boolean>()
   const [isOwner, setIsOwner] = useState(false)
   const { ddo, price, metadata, type } = useAsset()
+  const { appConfig } = useSiteMetadata()
 
   useEffect(() => {
     if (!accountId || !owner) return
@@ -85,7 +87,7 @@ export default function AssetContent(props: AssetContentProps): ReactElement {
   ) : showEditCompute ? (
     <EditComputeDataset setShowEdit={setShowEditCompute} />
   ) : showEditAdvanceSettings ? (
-    <EditAdvanceSettings setShowEdit={setShowEditCompute} />
+    <EditAdvanceSettings setShowEdit={setShowEditAdvanceSettings} />
   ) : (
     <article className={styles.grid}>
       <div>
@@ -115,14 +117,18 @@ export default function AssetContent(props: AssetContentProps): ReactElement {
                   <Button style="text" size="small" onClick={handleEditButton}>
                     Edit Metadata
                   </Button>
-                  <span className={styles.separator}>|</span>
-                  <Button
-                    style="text"
-                    size="small"
-                    onClick={handleEditAdvanceSettingsButton}
-                  >
-                    Edit Advanced Settings
-                  </Button>
+                  {appConfig.allowAdvanceSettings === 'true' && (
+                    <>
+                      <span className={styles.separator}>|</span>
+                      <Button
+                        style="text"
+                        size="small"
+                        onClick={handleEditAdvanceSettingsButton}
+                      >
+                        Edit Advanced Settings
+                      </Button>
+                    </>
+                  )}
                   {ddo.findServiceByType('compute') && type === 'dataset' && (
                     <>
                       <span className={styles.separator}>|</span>

src/hooks/useSiteMetadata.ts

@@ -27,6 +27,8 @@ interface UseSiteMetadata {
     portisId: string
     allowFixedPricing: string
     allowDynamicPricing: string
+    allowAdvanceSettings: string
+    credentialType: string
   }
 }
 
@@ -59,6 +61,8 @@ const query = graphql`
           portisId
           allowFixedPricing
           allowDynamicPricing
+          allowAdvanceSettings
+          credentialType
         }
       }
     }

src/models/FormEditCredential.ts

@@ -1,3 +1,9 @@
+import {
+  CredentialAction,
+  Credentials,
+  CredentialType,
+  DDO
+} from '@oceanprotocol/lib'
 import * as Yup from 'yup'
 
 export interface AdvanceSettingsForm {
@@ -10,8 +16,38 @@ export const validationSchema: Yup.SchemaOf<AdvanceSettingsForm> = Yup.object().
   }
 )
 
-export function getInitialValues(
-  allowCredentail: string[]
-): AdvanceSettingsForm {
-  return { allowCredentail }
+function getAssetCredentials(
+  credentials: Credentials,
+  credentialType: CredentialType,
+  credentialAction: CredentialAction
+): string[] {
+  let values: string[] = []
+  if (credentialAction === 'allow') {
+    if (credentials && credentials.allow) {
+      const allowList = credentials.allow.find(
+        (credential) => credential.type === credentialType
+      )
+      values = allowList && allowList.value.length > 0 ? allowList.value : []
+    }
+  } else {
+    if (credentials && credentials.deny) {
+      const dennyList = credentials.deny.find(
+        (credential) => credential.type === credentialType
+      )
+      values = dennyList && dennyList.value.length > 0 ? dennyList.value : []
+    }
+  }
+  return values
+}
+
+export function getInitialValues(
+  ddo: DDO,
+  credentailType: CredentialType
+): AdvanceSettingsForm {
+  const allowCrendtail = getAssetCredentials(
+    ddo.credentials,
+    credentailType,
+    'allow'
+  )
+  return { allowCredentail: allowCrendtail }
 }