#638 Improved UI

src/components/molecules/FormFields/Credential/index.tsx

@@ -6,6 +6,7 @@ import Button from '../../../atoms/Button'
 import styles from './Credential.module.css'
 import { isAddress } from 'web3-utils'
 import { toast } from 'react-toastify'
+import { ReactComponent as Cross } from '../../../../images/cross.svg'
 
 export default function Credential(props: InputProps) {
   const [field, meta, helpers] = useField(props.name)
@@ -66,7 +67,7 @@ export default function Credential(props: InputProps) {
                 style="text"
                 onClick={(even) => handleDeleteChip(value)}
               >
-                X
+                <Cross />
               </Button>
             </div>
           )

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

@@ -23,7 +23,7 @@ export default function DebugEditCredential({
       const newDdo = await ocean.assets.updateCredentials(
         ddo,
         credentialType,
-        values.allowCredentail,
+        values.allow,
         [] // TODO: denyCredential
       )
       setCredential(newDdo.credentials)

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

@@ -83,7 +83,7 @@ export default function EditAdvanceSettings({
       const ddoEditedCredential = await ocean.assets.updateCredentials(
         ddo,
         credentialType,
-        values.allowCredentail,
+        values.allow,
         [] // TODO: denyCredential
       )
 

src/images/cross.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-circle-fill" viewBox="0 0 16 16">
+  <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
+</svg>

src/models/FormEditCredential.ts

@@ -7,12 +7,12 @@ import {
 import * as Yup from 'yup'
 
 export interface AdvanceSettingsForm {
-  allowCredentail: string[]
+  allow: string[]
 }
 
 export const validationSchema: Yup.SchemaOf<AdvanceSettingsForm> = Yup.object().shape(
   {
-    allowCredentail: Yup.array().nullable()
+    allow: Yup.array().nullable()
   }
 )
 
@@ -49,5 +49,5 @@ export function getInitialValues(
     credentailType,
     'allow'
   )
-  return { allowCredentail: allowCrendtail }
+  return { allow: allowCrendtail }
 }