feat: Allow to edit asset creator data when deploy/mint asset (#137)

src/components/endpoints/Assets.vue

@@ -2,7 +2,7 @@
 import { getState, setState } from '@/stores'
 import Notifications from '@/components/Notification.vue'
 import useNotifications from '@/compositions/useNotifications'
-import { ref } from 'vue'
+import { ref, toRaw } from 'vue'
 import { createBlockScoutLink } from '@/utils/createLinks'
 import Lsp4MetadataForm from '@/components/shared/Lsp4MetadataForm.vue'
 import LSP8Mintable from '@lukso/lsp-smart-contracts/artifacts/LSP8Mintable.json'
@@ -45,11 +45,15 @@ const lsp4Metadata = ref<Lsp4Metadata>({
     },
   ],
 })
-
+const creators = ref<string[]>()
 const tokenAddress = ref<string>()
 
-const handleNewLsp4Metadata = (metadata: Lsp4Metadata) => {
+const handleNewLsp4Metadata = (
+  metadata: Lsp4Metadata,
+  newCreators: string[]
+) => {
   lsp4Metadata.value = metadata
+  creators.value = newCreators
 }
 
 const handleStandardSelected = (standard: string) => {
@@ -72,37 +76,43 @@ const create = async () => {
     const { deployERC20Token } = useERC20()
 
     let deployedAsset
+    let digitalAssetData
     switch (token.value.type) {
       case ContractStandard.LSP7:
-        deployedAsset = await deployLSP7DigitalAsset({
+        digitalAssetData = {
           isNFT: token.value.isNonDivisible,
           controllerAddress: erc725AccountAddress,
           name: token.value.name,
           symbol: token.value.symbol,
-          creators: [erc725AccountAddress],
+          creators: toRaw(creators.value),
           digitalAssetMetadata: {
             LSP4Metadata: {
               ...lsp4Metadata.value,
             },
           },
-        })
+        }
+        console.log(digitalAssetData)
+        deployedAsset = await deployLSP7DigitalAsset(digitalAssetData)
         console.log('Deployed asset', deployedAsset.LSP7DigitalAsset)
         addTokenToLocalStore(
           (tokenAddress.value = deployedAsset.LSP7DigitalAsset.address)
         )
         break
       case ContractStandard.LSP8:
-        deployedAsset = await deployLSP8IdentifiableDigitalAsset({
+        digitalAssetData = {
           controllerAddress: erc725AccountAddress,
           name: token.value.name,
           symbol: token.value.symbol,
-          creators: [erc725AccountAddress],
+          creators: toRaw(creators.value),
           digitalAssetMetadata: {
             LSP4Metadata: {
               ...lsp4Metadata.value,
             },
           },
-        })
+        }
+        console.log(digitalAssetData)
+        deployedAsset =
+          await deployLSP8IdentifiableDigitalAsset(digitalAssetData)
         console.log(
           'Deployed asset',
           deployedAsset.LSP8IdentifiableDigitalAsset

src/components/endpoints/Mint.vue

@@ -36,6 +36,7 @@ const lsp4Metadata = ref<Lsp4Metadata>({
     },
   ],
 })
+const creators = ref<string[]>([getState('address')])
 
 const metadataJsonUrl =
   '0x6f357c6a6143da573459ba01321df3eb223e96b0015c2914a1907df319804573d538c311697066733a2f2f516d51357071797167637a6d6b736e4e434a734a76333453664469776e4676426d64456f74704254337642464865'
@@ -45,6 +46,14 @@ watchEffect(() => {
   mintToken.value = getState('tokenAddress')
 })
 
+const handleNewLsp4Metadata = (
+  metadata: Lsp4Metadata,
+  newCreators: string[]
+) => {
+  lsp4Metadata.value = metadata
+  creators.value = newCreators
+}
+
 const handleTokenSelected = (info: TokenInfo) => {
   tokenType.value =
     info.type === LSPType.LSP7DigitalAsset
@@ -213,7 +222,7 @@ const mint = async () => {
         </div>
       </div>
       <div v-else>
-        <Lsp4MetadataForm disabled :new-metadata="lsp4Metadata" />
+        <Lsp4MetadataForm @new-metadata="handleNewLsp4Metadata" />
       </div>
       <div class="field">
         <button

src/components/shared/Lsp4MetadataForm.vue

@@ -1,14 +1,16 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { ref, watch, watchEffect } from 'vue'
 import { Lsp4Metadata } from '@/types'
+import { getState } from '@/stores'
 
 type Emits = {
-  (event: 'newMetadata', metadata: Lsp4Metadata): void
+  (event: 'newMetadata', metadata: Lsp4Metadata, creators: string[]): void
 }
 
 type Props = {
   disabled?: boolean
   newMetadata?: Lsp4Metadata
+  newCreators?: string[]
 }
 
 const props = defineProps<Props>()
@@ -24,8 +26,10 @@ const defaultValue = {
   ],
 }
 
+console.log(props.newCreators)
 // eslint-disable-next-line vue/no-setup-props-destructure
 const metadata = ref<Lsp4Metadata>(props.newMetadata || defaultValue)
+const creators = ref<string[]>([])
 
 watch(
   () => props.newMetadata,
@@ -34,6 +38,10 @@ watch(
   }
 )
 
+watchEffect(() => {
+  creators.value = props.newCreators || [getState('address')]
+})
+
 const handleTokenIcon = (event: Event) => {
   const target = event.target as HTMLInputElement
   metadata.value.icon = (target.files as FileList)[0]
@@ -69,8 +77,23 @@ const handleLinkUrlChange = (index: number, event: Event) => {
   emitMetadata()
 }
 
+const handleCreatorChange = (index: number, event: Event) => {
+  creators.value[index] = (event.target as HTMLInputElement).value
+  emitMetadata()
+}
+
+const removeCreator = (index: number) => {
+  creators.value.splice(index, 1)
+  emitMetadata()
+}
+
+const addCreator = () => {
+  creators.value.push('')
+  emitMetadata()
+}
+
 const emitMetadata = () => {
-  emits('newMetadata', metadata.value)
+  emits('newMetadata', metadata.value, creators.value)
 }
 </script>
 
@@ -151,4 +174,37 @@ const emitMetadata = () => {
       Add link
     </button>
   </div>
+  <div class="field mb-3">
+    <label class="label">Token Creators</label>
+    <div
+      v-for="(creator, index) in creators"
+      :key="index"
+      class="control mb-2 is-flex"
+    >
+      <input
+        :v-model="creator"
+        :value="creator"
+        class="input"
+        type="text"
+        placeholder="Title"
+        :disabled="props.disabled"
+        @keyup="event => handleCreatorChange(index, event)"
+      />
+      <button
+        class="button ml-2"
+        :disabled="props.disabled"
+        @click="removeCreator(index)"
+      >
+        Remove
+      </button>
+    </div>
+    <button
+      class="button"
+      data-testid="addCreator"
+      :disabled="props.disabled"
+      @click="addCreator"
+    >
+      Add Creator
+    </button>
+  </div>
 </template>

src/compositions/useLspFactory.ts

@@ -62,22 +62,7 @@ const uploadUniversalProfileMetaData = async (
   )
 }
 
-export function useLspFactory(): {
-  deployUniversalProfile: (
-    profileDeploymentOptions: ProfileDeploymentOptions,
-    contractDeploymentOptions?: ContractDeploymentOptions | undefined
-  ) => Promise<DeployedUniversalProfileContracts>
-  uploadUniversalProfileMetaData: (
-    profileData: ProfileDataBeforeUpload,
-    uploadOptions?: UploadOptions
-  ) => Promise<ProfileDataForEncoding>
-  deployLSP7DigitalAsset: (
-    digitalAssetDeploymentOptions: LSP7DigitalAssetDeploymentOptions
-  ) => Promise<DeployedLSP7DigitalAsset>
-  deployLSP8IdentifiableDigitalAsset: (
-    digitalAssetDeploymentOptions: DigitalAssetDeploymentOptions
-  ) => Promise<DeployedLSP8IdentifiableDigitalAsset>
-} {
+export function useLspFactory() {
   const hasExtension = !!getProvider()
   if (!hasExtension) {
     throw new Error('Extension not installed')