From 0c39a478c830e973ba22c3d089e918bef23a2d15 Mon Sep 17 00:00:00 2001
From: AuroraHuang22 <aurora90376@gmail.com>
Date: Fri, 29 Dec 2023 15:51:37 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=9A=B8=20Enable=20copy=20iscnId=20on?=
 =?UTF-8?q?=20new=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/IscnUploadedInfo.vue | 321 +++++++++++++++-----------------
 1 file changed, 152 insertions(+), 169 deletions(-)

diff --git a/components/IscnUploadedInfo.vue b/components/IscnUploadedInfo.vue
index 5282aa2e..6d32e1b8 100644
--- a/components/IscnUploadedInfo.vue
+++ b/components/IscnUploadedInfo.vue
@@ -1,38 +1,38 @@
 <template>
-    <Card
-      :class="[
-        'p-[32px]',
-        'border-[2px]',
-        'border-like-cyan',
-      ]"
-      :has-padding="false"
-    >
-      <!-- header -->
-      <IscnFormHeader :step="step" :total-step="4"/>
-      <!-- guide title -->
-      <div class="flex items-center justify-between mt-[12px] mb-[28px]">
-        <Label
-          align="middle"
-          :text="$t('IscnUploaded.guide.title')"
-          class="text-medium-gray"
-        />
-        <Button preset="plain" :text="$t('NFTPortal.button.download.iscn')" @click="handleClickDownload">
-          <template #prepend>
-            <IconDownload />
-          </template>
-        </Button>
-      </div>
-
-      <!-- ISCN card -->
-      <IscnCard
-        v-if="record"
-        :key="`${record.id}-landscape`"
-        class="mb-[16px]"
-        :record="record"
-        :is-animated="true"
-        orientation="landscape"
+  <Card
+    :class="['p-[32px]', 'border-[2px]', 'border-like-cyan']"
+    :has-padding="false"
+  >
+    <!-- header -->
+    <IscnFormHeader :step="step" :total-step="4" />
+    <!-- guide title -->
+    <div class="flex items-center justify-between mt-[12px] mb-[28px]">
+      <Label
+        align="middle"
+        :text="$t('IscnUploaded.guide.title')"
+        class="text-medium-gray"
       />
-      <!--
+      <Button
+        preset="plain"
+        :text="$t('NFTPortal.button.download.iscn')"
+        @click="handleClickDownload"
+      >
+        <template #prepend>
+          <IconDownload />
+        </template>
+      </Button>
+    </div>
+
+    <!-- ISCN card -->
+    <IscnCard
+      v-if="record"
+      :key="`${record.id}-landscape`"
+      class="mb-[16px]"
+      :record="record"
+      :is-animated="true"
+      orientation="landscape"
+    />
+    <!--
       <div class="flex flex-row justify-center items-center my-[16px]">
         <Button circle size="small" preset="tertiary" class="mx-[8px]">
           <IconUploadMini />
@@ -45,143 +45,113 @@
         </Button>
       </div>
       -->
-      <slot name="card-footer" />
-      <Divider class="mb-[24px]" />
-      <div
-        :class="[
-          'sm:flex',
-          'items-start',
-          'justify-between',
-          'mb-[28px]',
-        ]"
+    <slot name="card-footer" />
+    <Divider class="mb-[24px]" />
+    <div :class="['sm:flex', 'items-start', 'justify-between', 'mb-[28px]']">
+      <Label
+        :text="type"
+        tag="div"
+        preset="p5"
+        content-class="font-semibold whitespace-nowrap text-like-green"
+        prepend-class="text-like-green"
       >
-        <Label
-          :text="type"
-          tag="div"
-          preset="p5"
-          content-class="font-semibold whitespace-nowrap text-like-green"
-          prepend-class="text-like-green"
-        >
-          <template #prepend>
-            <ISCNTypeIcon :type="type" />
-          </template>
-        </Label>
-        <Label
-          :text="recordTimestamp"
-          :class="[
-            'mt-[8px]',
-            'sm:mt-0',
-          ]"
-          tag="div"
-          preset="p6"
-          content-class="text-medium-gray"
-        />
-      </div>
-      <FormField
-        v-if="name"
-        :label="$t('iscn.meta.name')"
-        content-type="strong"
-        class="mb-[12px]"
-      >
-        {{ name }}
-      </FormField>
-      <FormField
-        v-if="description"
-        :label="$t('iscn.meta.description')"
-        class="mb-[12px]"
-      >
-        {{ description }}
-      </FormField>
-      <Divider class="mb-[12px]" />
-      <FormField
-        v-if="owner"
-        :label="$t('iscn.meta.owner')"
-        :class="[
-          'mb-[12px]',
-          'text-[14px]',
-        ]"
-      >
-        {{ owner }}
-      </FormField>
-      <FormField
-        :label="$t('iscn.meta.transaction')"
-        class="mb-[12px]"
-      >
-        <Link
-          v-if="iscnHash"
-          :class="[
-            'text-[14px]',
-            'break-all',
-          ]"
-          nofollow="true"
-          :href="transactionsURL"
-        >
-          {{ iscnHash }}
-        </Link>
-        <ProgressIndicator
-          v-else
-          class="my-[4px]"
-          preset="thin"
-        />
-      </FormField>
-      <IconDiverMini
-        :class="[
-          'mb-[12px]',
-          'text-shade-gray',
-        ]"
+        <template #prepend>
+          <ISCNTypeIcon :type="type" />
+        </template>
+      </Label>
+      <Label
+        :text="recordTimestamp"
+        :class="['mt-[8px]', 'sm:mt-0']"
+        tag="div"
+        preset="p6"
+        content-class="text-medium-gray"
       />
-      <FormField
-        v-if="iscnId"
-        :label="$t('iscn.meta.id')"
-        :class="[
-          'mb-[12px]',
-          'text-[14px]',
-        ]"
-      >
-        <Link
-          :to="localeLocation({
-            name: 'view-iscnId',
-            params: { iscnId: iscnId },
-          })"
-          class="text-[14px]"
-        >
-          {{ iscnId }}
-        </Link>
-      </FormField>
-      <FormField
-        v-if="contentFingerprints"
-        :label="$t('iscn.meta.content.fingerprints')"
-        class="mb-[12px]"
-      >
-        <ContentFingerprintLink
-          v-for="item in contentFingerprints"
-          :key="item.key"
-          :item="item"
-          :class="[
-            'mb-[8px]',
-            'break-all',
-            'text-[14px]',
-          ]"
-        />
-      </FormField>
-      <Divider class="mb-[24px]" />
-      <FormField
-        v-if="keywords.length"
-        :label="$t('iscn.meta.tags.title')"
-        class="mb-[12px]"
+    </div>
+    <FormField
+      v-if="name"
+      :label="$t('iscn.meta.name')"
+      content-type="strong"
+      class="mb-[12px]"
+    >
+      {{ name }}
+    </FormField>
+    <FormField
+      v-if="description"
+      :label="$t('iscn.meta.description')"
+      class="mb-[12px]"
+    >
+      {{ description }}
+    </FormField>
+    <Divider class="mb-[12px]" />
+    <FormField
+      v-if="owner"
+      :label="$t('iscn.meta.owner')"
+      :class="['mb-[12px]', 'text-[14px]']"
+    >
+      {{ owner }}
+    </FormField>
+    <FormField :label="$t('iscn.meta.transaction')" class="mb-[12px]">
+      <Link
+        v-if="iscnHash"
+        :class="['text-[14px]', 'break-all']"
+        nofollow="true"
+        :href="transactionsURL"
       >
-        <Keyword
-          v-for="item in keywords"
-          :key="item.key"
-          :keyword="item"
-          :class="[
-            'mr-[8px]',
-            'mb-[4px]',
-          ]"
-        />
-      </FormField>
-      <slot name="footer" />
-    </Card>
+        {{ iscnHash }}
+      </Link>
+      <ProgressIndicator v-else class="my-[4px]" preset="thin" />
+    </FormField>
+    <IconDiverMini :class="['mb-[12px]', 'text-shade-gray']" />
+    <FormField v-if="iscnId" :label="$t('iscn.meta.id.copy')" class="mb-[12px]">
+      <Button
+        size="mini"
+        preset="tertiary"
+        tag="div"
+        text-preset="h6"
+        type="button"
+        content-class="font-medium ml-[-4px]"
+        prepend-class="font-bold"
+        :text="iscnId"
+        @click="handleCopyIscnId"
+      />
+    </FormField>
+    <FormField
+      v-if="contentFingerprints"
+      :label="$t('iscn.meta.content.fingerprints')"
+      class="mb-[12px]"
+    >
+      <ContentFingerprintLink
+        v-for="item in contentFingerprints"
+        :key="item.key"
+        :item="item"
+        :class="['mb-[8px]', 'break-all', 'text-[14px]']"
+      />
+    </FormField>
+    <Divider class="mb-[24px]" />
+    <FormField
+      v-if="keywords.length"
+      :label="$t('iscn.meta.tags.title')"
+      class="mb-[12px]"
+    >
+      <Keyword
+        v-for="item in keywords"
+        :key="item.key"
+        :keyword="item"
+        :class="['mr-[8px]', 'mb-[4px]']"
+      />
+    </FormField>
+    <slot name="footer" />
+    <Snackbar
+      v-model="isOpenCopiedAlert"
+      :text="$t('iscn.meta.stakeholders.wallet.copied')"
+      preset="success"
+      :timeout="2000"
+    >
+      <template #prepend>
+        <IconDone />
+      </template>
+    </Snackbar>
+  </Card>
 </template>
 
 <script lang="ts">
@@ -190,6 +160,8 @@ import { Vue, Component, Prop } from 'vue-property-decorator'
 import { ISCNRecordWithID } from '~/utils/cosmos/iscn/iscn.type'
 import { downloadJSON } from '~/utils/misc'
 import { BIG_DIPPER_TX_BASE_URL } from '~/constant'
+import { logTrackerEvent } from '~/utils/logger'
+import { copyToClipboard, extractIscnIdPrefix } from '~/utils/ui'
 
 @Component({
   components: { IscnCard: () => import('~/components/IscnCard.vue') },
@@ -202,6 +174,8 @@ export default class IscnUploadedInfo extends Vue {
   @Prop({ default: null }) readonly exifInfo: any | null | undefined
   @Prop(Number) readonly step: number | undefined
 
+  isOpenCopiedAlert: boolean = false
+
   get recordData() {
     return this.record?.data
   }
@@ -227,7 +201,7 @@ export default class IscnUploadedInfo extends Vue {
   }
 
   get keywords(): Array<string> {
-    return this.metadata?.keywords && this.metadata?.keywords.split(',') || []
+    return (this.metadata?.keywords && this.metadata?.keywords.split(',')) || []
   }
 
   get contentFingerprints() {
@@ -243,7 +217,7 @@ export default class IscnUploadedInfo extends Vue {
       contentMetadata: {
         ...this.metadata,
         '@type': this.type,
-        '@context': "http://schema.org/",
+        '@context': 'http://schema.org/',
       },
       stakeholders: this.recordData?.stakeholders,
       contentFingerprints: this.contentFingerprints,
@@ -252,5 +226,14 @@ export default class IscnUploadedInfo extends Vue {
 
     downloadJSON(generateData, 'iscn.json')
   }
+
+  handleCopyIscnId() {
+    logTrackerEvent(this, 'ISCNView', 'CopyISCNID', this.iscnId, 1)
+    const iscnIdPrefix = extractIscnIdPrefix(this.iscnId)
+    if (iscnIdPrefix) {
+      copyToClipboard(iscnIdPrefix)
+      this.isOpenCopiedAlert = true
+    }
+  }
 }
 </script>

From 05fad9afdae85129f97df22a3f76800caa05477e Mon Sep 17 00:00:00 2001
From: AuroraHuang22 <75730405+AuroraHuang22@users.noreply.github.com>
Date: Sat, 30 Dec 2023 02:20:45 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E2=9C=A8=20Enable=20update=20ISCN=20(#429)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 💄 Add entrance for editing ISCN

* ✨ Add [edit/_iscnId] page

* 🎨 Handle sign update ISCN

* 🚸 Improve the guidance throughout the process

* 🐛 Redirect to the latest version

* 🎨 Refine the contentMetadata

* 🩹 Increase gas fee

* 🐛 Fix incorrect sameAs value

* 🎨 Increase gas fee using multiplier

* 🎨 End asyncData after the redirect

* ♻️ Use signISCN update method to update ISCN

* 🩹 Increase gas fee for update ISCN

* 🎨 Move iscn multiplier to default param

---------

Co-authored-by: William Chong <me@williamchong.cloud>
---
 components/IscnUploadForm.vue  |  12 +-
 components/SameAsFieldList.vue |   6 +-
 locales/en.json                |   6 +
 pages/edit/_iscnId.vue         | 448 +++++++++++++++++++++++++++++++++
 pages/view/_iscnId/index.vue   |  23 +-
 utils/cosmos/iscn/sign.ts      |   5 +-
 6 files changed, 491 insertions(+), 9 deletions(-)
 create mode 100644 pages/edit/_iscnId.vue

diff --git a/components/IscnUploadForm.vue b/components/IscnUploadForm.vue
index 156e0604..2ac330d6 100644
--- a/components/IscnUploadForm.vue
+++ b/components/IscnUploadForm.vue
@@ -2,7 +2,7 @@
   <div>
     <Card class="p-[32px]" :has-padding="false">
       <!-- header -->
-      <IscnFormHeader :step="step" :total-step="4" />
+      <IscnFormHeader v-if="mode === 'register'" :step="step" :total-step="4" />
       <!-- guide text -->
       <Label
         :text="$t('UploadForm.guide.selectFile')"
@@ -134,7 +134,7 @@
           </div>
         </div>
         <div v-else class="flex gap-[8px] justify-end mt-[12px] text-medium-gray">
-          <Button preset="outline" @click="onSkipUpload"
+          <Button v-if="mode === 'register'" preset="outline" @click="onSkipUpload"
             >{{ $t('UploadForm.button.skip') }}
           </Button>
           <Button
@@ -199,7 +199,7 @@
         />
       </Dialog>
     </Card>
-    <AttentionsLedger />
+    <AttentionsLedger v-if="mode === 'register'" />
     <Snackbar
       v-model="isSizeExceeded"
       :text="$t('UploadForm.warning',{ size: Math.round(uploadSizeLimit / (1024*1024)) })"
@@ -246,9 +246,15 @@ import { getAccountBalance } from '~/utils/cosmos'
 const walletModule = namespace('wallet')
 type UploadStatus = '' | 'loading' | 'signing' | 'uploading';
 
+const MODE = {
+  REGISTER: 'register',
+  EDIT: 'edit',
+}
+
 @Component
 export default class UploadForm extends Vue {
   @Prop(Number) readonly step: number | undefined
+  @Prop({ default: MODE.REGISTER }) readonly mode: string | undefined
 
   @walletModule.Getter('getSigner') signer!: OfflineSigner | null
   @walletModule.Action('initIfNecessary') initIfNecessary!: () => Promise<any>
diff --git a/components/SameAsFieldList.vue b/components/SameAsFieldList.vue
index 73a56370..9222d67e 100644
--- a/components/SameAsFieldList.vue
+++ b/components/SameAsFieldList.vue
@@ -115,7 +115,7 @@ export default class WalletFieldList extends Vue {
   }
 
   get filteredUrlOptions() {
-    return this.urlOptions.filter(url => url.startsWith('ar://'))
+    return this.urlOptions?.filter(url => url.startsWith('ar://'))
   }
 
   mounted() {
@@ -129,7 +129,7 @@ export default class WalletFieldList extends Vue {
       }))
     } else if (this.filteredUrlOptions.length) {
       this.sameAsList = this.fileRecords
-        .filter((file) => this.fileTypeToFind.includes(this.formatFileType(file.fileType)) && file.arweaveId)
+        ?.filter((file) => this.fileTypeToFind.includes(this.formatFileType(file.fileType)) && file.arweaveId)
         .map((file, index) => {
           const url = this.filteredUrlOptions.find((ar) => ar.includes(file.arweaveId));
           const formattedFileType = this.formatFileType(file.fileType);
@@ -168,7 +168,7 @@ export default class WalletFieldList extends Vue {
 
   deleteEmptyField() {
     if (this.sameAsList.length > 1) {
-      this.sameAsList = this.sameAsList.filter(
+      this.sameAsList = this.sameAsList?.filter(
         (items: any) => items.filename && items.url,
       )
     }
diff --git a/locales/en.json b/locales/en.json
index 37880133..349de5b9 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -134,6 +134,7 @@
   "iscn.meta.card.preview": "File Preview",
   "iscn.meta.card.title": "File Info",
   "iscn.meta.content.fingerprints": "Content Fingerprints",
+  "iscn.meta.content.sameAs": "SameAs",
   "iscn.meta.creator.name.placeholder": "Creator Name",
   "iscn.meta.creator.name": "Creator Name",
   "iscn.meta.creator.url.placeholder": "https://",
@@ -179,6 +180,10 @@
   "IscnCardPage.button.landscape": "Landscape",
   "IscnCardPage.button.portrait": "Portrait",
   "IscnCardPage.button.print": "Print",
+  "IscnEditInfo.title": "Edit ISCN Info",
+  "IscnEditInfo.reUpload": "Re-upload files to update links",
+  "IscnEditInfo.updating": "Updating ISCN...",
+  "IscnEditInfo.button.confirm": "Update ISCN",
   "IscnRegisterForm.arweave.link": "ar://{arweaveId}",
   "IscnRegisterForm.button.back": "Back",
   "IscnRegisterForm.button.confirm": "Confirm",
@@ -209,6 +214,7 @@
   "IscnRegisterForm.guide.uploadOnly": "Upload only mode without ISCN",
   "IscnRegisterForm.guide.review": "Review and edit metadata",
   "IscnRegisterForm.ipfs.link": "ipfs://{hash}",
+  "IscnRegisterForm.fileSHA256.link": "hash://sha256/{hash}",
   "IscnRegisterForm.label.author": "Author",
   "IscnRegisterForm.label.stakeholder": "Stakeholders",
   "IscnRegisterForm.label.description": "Description",
diff --git a/pages/edit/_iscnId.vue b/pages/edit/_iscnId.vue
new file mode 100644
index 00000000..1451d891
--- /dev/null
+++ b/pages/edit/_iscnId.vue
@@ -0,0 +1,448 @@
+<template>
+  <Card class="p-[32px] w-full max-w-[780px] mx-auto" :has-padding="false">
+    <Label
+      :text="$t('IscnEditInfo.title')"
+      class="text-like-green font-bold my-[12px]"
+    >
+      <template #prepend>
+        <IconEdit />
+      </template>
+    </Label>
+    <form @submit.prevent="onSubmitUpdate">
+      <FormField :label="$t('IscnRegisterForm.label.iscn')" class="my-[12px]">
+        <TextField
+          v-model="name"
+          :placeholder="$t('IscnRegisterForm.placeholder.iscn')"
+        />
+      </FormField>
+      <FormField
+        :label="$t('IscnRegisterForm.label.description')"
+        class="mb-[12px]"
+      >
+        <TextField
+          v-model="description"
+          :is-textarea="true"
+          :placeholder="$t('IscnRegisterForm.placeholder.description')"
+        />
+      </FormField>
+
+      <!-- upload content fingerprint -->
+      <div
+        v-if="shouldShowUploadSection"
+        :label="$t('iscn.meta.content.fingerprints')"
+        class="mb-[12px]"
+      >
+        <FormField
+          v-if="step === 1"
+          :label="$t('iscn.meta.content.fingerprints')"
+          class="mb-[12px]"
+        >
+          <IscnUploadForm
+            mode="edit"
+            @submit="onSubmitUpload"
+            @arweaveUploaded="onArweaveIdUpload"
+          />
+        </FormField>
+        <div v-if="step === 2">
+          <FormField
+            :label="$t('iscn.meta.content.fingerprints')"
+            class="mb-[12px]"
+          >
+            <ContentFingerprintLink
+              v-for="item in contentFingerprints"
+              :key="item.key"
+              :item="item"
+              :class="['mb-[8px]', 'break-all', 'text-[14px]']"
+            />
+            <ContentFingerprintLink
+              v-for="(f, i) in customContentFingerprints"
+              :key="f + i"
+              :item="f"
+            />
+            <div :class="['flex', 'mt-[12px]', 'gap-[8px]']">
+              <TextField v-model="contentFingerprintInput" class="w-full" />
+              <Button
+                preset="secondary"
+                type="button"
+                @click="addContentFingerprint"
+              >
+                <IconAddMini />
+              </Button>
+            </div>
+          </FormField>
+          <FormField
+            :label="$t('IscnRegisterForm.label.sameAs')"
+            content-classes="flex flex-row flex-wrap"
+          >
+            <span v-if="sameAsList.length" class="mr-[8px] mb-[4px]">
+              <Button
+                size="mini"
+                preset="secondary"
+                tag="div"
+                text-preset="h6"
+                type="button"
+                :text="`${sameAsList.length} urls`"
+                @click="handleOpenSameAsDialog()"
+              />
+            </span>
+            <Button
+              v-else
+              type="button"
+              class="mb-[4px]"
+              size="mini"
+              preset="secondary"
+              content-class="py-[4px]"
+              @click="handleOpenSameAsDialog()"
+            >
+              <IconAddMini />
+            </Button>
+          </FormField>
+        </div>
+      </div>
+
+      <!-- default content fingerprint -->
+      <div
+        v-else-if="contentFingerprints.length"
+        :class="[
+          'relative',
+          'rounded-[12px]',
+          'border-dashed',
+          'border-[2px]',
+          'border-like-green',
+          'p-[20px]',
+
+          'cursor-pointer',
+          'transition',
+          'duration-100',
+
+          'group',
+          'hover:bg-[rgba(0,0,0,0.4)]',
+        ]"
+      >
+        <div
+          :class="[
+            'absolute',
+            'top-0',
+            'left-0',
+
+            'items-center',
+            'justify-center',
+            'w-full',
+            'h-full',
+
+            'hidden',
+            'group-hover:flex',
+            'transition',
+            'duration-100',
+          ]"
+          @click="handleClickUpload"
+        >
+          <Label
+            class="text-[26px] text-white font-bold"
+            :text="$t('IscnEditInfo.reUpload')"
+          />
+        </div>
+        <FormField
+          v-if="contentFingerprints.length"
+          :label="$t('iscn.meta.content.fingerprints')"
+          class="mb-[12px]"
+        >
+          <ContentFingerprintLink
+            v-for="item in contentFingerprints"
+            :key="item.key"
+            :item="item"
+            :class="['mb-[8px]', 'break-all', 'text-[14px]']"
+          />
+        </FormField>
+        <FormField
+          v-if="sameAs.length"
+          :label="$t('iscn.meta.content.sameAs')"
+          class="mb-[12px]"
+        >
+          <ContentFingerprintLink
+            v-for="item in sameAs"
+            :key="item.key"
+            :item="item"
+            :class="['mb-[8px]', 'break-all', 'text-[14px]']"
+          />
+        </FormField>
+      </div>
+      <div class="flex justify-end items-center my-[20px]">
+        <div
+          v-if="isSubmitLoading"
+          class="flex flex-col items-center justify-center gap-[4px]"
+        >
+          <ProgressIndicator />
+          <Label class="text-medium-gray" :text="$t('IscnEditInfo.updating')" />
+        </div>
+
+        <Button
+          v-else
+          :text="$t('IscnEditInfo.button.confirm')"
+          :is-disabled="shouldDisableSubmit"
+          type="submit"
+          :preset="step !== 2 ? 'tertiary' : 'secondary'"
+        >
+          <template #append>
+            <IconArrowRight />
+          </template>
+        </Button>
+      </div>
+    </form>
+
+    <Dialog
+      v-model="isOpenSameAsDialog"
+      :has-padding="false"
+      preset="custom"
+      :is-disabled-backdrop-click="true"
+    >
+      <Card
+        :class="[
+          'flex',
+          'flex-col',
+          'w-[616px]',
+          'max-h-[75vh]',
+          'pb-[40px]',
+          'overflow-y-scroll',
+          'scrollbar-hidden',
+        ]"
+      >
+        <Label
+          class="w-min mb-[16px]"
+          :text="$t('IscnRegisterForm.sameAsDialog.title')"
+          tag="div"
+          preset="p5"
+          valign="middle"
+          content-class="font-semibold whitespace-nowrap text-like-green"
+          prepend-class="text-like-green"
+        >
+          <template #prepend>
+            <IconAdd />
+          </template>
+        </Label>
+        <SameAsFieldList
+          :name="name"
+          :url-options="contentFingerprintOptions"
+          :file-records="uploadFileRecords"
+          :current-list="sameAsList"
+          @onConfirm="confirmSameAsChange"
+        />
+      </Card>
+    </Dialog>
+
+    <Snackbar v-model="shouldShowAlert" :text="errorMessage" preset="warn" />
+  </Card>
+</template>
+
+<script lang="ts">
+import { Vue, Component } from 'vue-property-decorator'
+import { namespace } from 'vuex-class'
+import { OfflineSigner } from '@cosmjs/proto-signing'
+import { ISCN_PREFIX } from '~/constant'
+import { logTrackerEvent } from '~/utils/logger'
+import { signISCN } from '~/utils/cosmos/iscn/sign'
+import { extractIscnIdPrefix } from '~/utils/ui'
+
+const walletModule = namespace('wallet')
+
+@Component({
+  async asyncData({ params, store, error, redirect }) {
+    try {
+      const { iscnId } = params
+      if (iscnId && iscnId.startsWith(ISCN_PREFIX)) {
+        const res: any = await store.dispatch('iscn/fetchISCNById', iscnId)
+        if (res) {
+          return {
+            iscnId: res.records[0].id,
+            iscnOwner: res.owner,
+            iscnRecord: res.records[0].data,
+            latestVersion: res.latestVersion.low,
+          }
+        }
+      } else {
+        redirect({ name: 'index' })
+        return {}
+      }
+    } catch (err) {
+      error(err as Error)
+    }
+    return {}
+  },
+})
+export default class EditIscnPage extends Vue {
+  @walletModule.Getter('getWalletAddress') address!: string
+  @walletModule.Getter('getSigner') signer!: OfflineSigner
+  @walletModule.Action('initIfNecessary') initIfNecessary!: () => Promise<any>
+
+  iscnOwner: string = ''
+  iscnId: string = ''
+  iscnRecord: any = null
+  name: string = ''
+  description: string = ''
+  contentFingerprints: string[] = []
+  sameAs: string[] = []
+  contentMetadata: any = null
+  shouldShowUploadSection: boolean = false
+  uploadFileRecords: any = null
+  uploadArweaveIdList: string[] = []
+  uploadIpfsList: string[] = []
+  sameAsList: any = []
+
+  step: number = 1
+  customContentFingerprints: string[] = []
+  contentFingerprintInput: string = ''
+  isOpenSameAsDialog: boolean = false
+  isSubmitLoading: boolean = false
+  shouldShowAlert: boolean = false
+  errorMessage: string = ''
+
+  latestVersion: number | string = ''
+
+  get formattedSameAsList() {
+    if (this.sameAsList.length) {
+      return this.sameAsList.map(
+        (sameAs: { filename: any; filetype: any; url: any }) => {
+          if (sameAs.filename && sameAs.filetype) {
+            return `${sameAs.url}?name=${sameAs.filename}.${sameAs.filetype}`
+          }
+          return ''
+        },
+      )
+    }
+    return this.sameAs
+  }
+
+  get shouldDisableSubmit() {
+    return Boolean(this.step === 1 && this.shouldShowUploadSection)
+  }
+
+  get contentFingerprintOptions() {
+    const array = []
+    if (this.uploadArweaveIdList) {
+      array.push(...this.uploadArweaveIdList.map((id: string) => id))
+    }
+    if (this.uploadIpfsList.length) {
+      array.push(...this.uploadIpfsList.map((ipfs) => ipfs))
+    }
+    if (this.customContentFingerprints.length) {
+      array.push(...this.customContentFingerprints)
+    }
+    return array
+  }
+
+  get payload() {
+    return {
+      name: this.name,
+      description: this.description,
+      keywords: this.contentMetadata.keywords,
+      url: this.contentMetadata.url,
+      contentFingerprints: [
+        ...this.contentFingerprints,
+        ...this.customContentFingerprints,
+      ],
+      stakeholders: this.iscnRecord?.stakeholders,
+      type: this.contentMetadata['@type'],
+      usageInfo: this.contentMetadata.usageInfo,
+      recordNotes: this.iscnRecord?.recordNotes,
+      contentMetadata: {
+        ...this.contentMetadata,
+        name: this.name,
+        description: this.description,
+        sameAs: this.formattedSameAsList,
+        version: (Number(this.latestVersion) + 1).toString(),
+      },
+    }
+  }
+
+  mounted() {
+    if (this.iscnRecord) {
+      this.contentMetadata = this.iscnRecord?.contentMetadata
+      this.name = this.contentMetadata.name
+      this.description = this.contentMetadata.description
+      this.contentFingerprints = this.iscnRecord?.contentFingerprints || []
+      this.sameAs = this.contentMetadata.sameAs || []
+    }
+  }
+
+  handleClickUpload() {
+    this.shouldShowUploadSection = true
+  }
+
+  onArweaveIdUpload({ arweaveId }: { arweaveId: string }) {
+    logTrackerEvent(this, 'ISCNEdit', 'ISCNFileUploadToARSuccess', arweaveId, 1)
+  }
+
+  formatIpfs(ipfsHash: string) {
+    return this.$t('IscnRegisterForm.ipfs.link', { hash: ipfsHash })
+  }
+
+  formatArweave(arweaveId: string) {
+    return this.$t('IscnRegisterForm.arweave.link', { arweaveId })
+  }
+
+  formatFileSHA256(hash: string) {
+    return this.$t('IscnRegisterForm.fileSHA256.link', { hash })
+  }
+
+  addContentFingerprint() {
+    this.customContentFingerprints.push(this.contentFingerprintInput)
+    this.contentFingerprintInput = ''
+  }
+
+  handleOpenSameAsDialog() {
+    this.isOpenSameAsDialog = true
+  }
+
+  confirmSameAsChange(value: any) {
+    logTrackerEvent(this, 'ISCNEdit', 'ConfirmSameAsChange', '', 1)
+    this.sameAsList = value
+    this.isOpenSameAsDialog = false
+  }
+
+  onSubmitUpload({ fileRecords }: { fileRecords: any[] }) {
+    this.contentFingerprints = []
+    if (fileRecords && fileRecords.length) {
+      this.uploadFileRecords = [...fileRecords]
+      this.uploadIpfsList = fileRecords.map(
+        (file) => this.formatIpfs(file.ipfsHash) as string,
+      )
+      this.uploadArweaveIdList = fileRecords.map(
+        (file) => this.formatArweave(file.arweaveId) as string,
+      )
+
+      this.contentFingerprints = [
+        ...fileRecords.map(
+          (file) => this.formatFileSHA256(file.fileSHA256) as string,
+        ),
+        ...this.uploadIpfsList,
+        ...this.uploadArweaveIdList,
+      ]
+    }
+    logTrackerEvent(this, 'ISCNEdit', 'ISCNConfirmFile', '', 1)
+    this.step = 2
+  }
+
+  async onSubmitUpdate() {
+    this.isSubmitLoading = true
+    try {
+      await this.initIfNecessary()
+      const result = await signISCN(this.payload, this.signer, this.address, {
+        iscnId: this.iscnId,
+      })
+      if (result) {
+        this.$router.replace(
+          this.localeLocation({
+            name: 'view-iscnId',
+            params: { iscnId: extractIscnIdPrefix(this.iscnId) },
+          })!,
+        )
+      }
+    } catch (error) {
+      this.shouldShowAlert = true
+      this.errorMessage = (error as Error).toString()
+    }
+
+    this.isSubmitLoading = false
+  }
+}
+</script>
diff --git a/pages/view/_iscnId/index.vue b/pages/view/_iscnId/index.vue
index 048ed1b6..211c07fb 100644
--- a/pages/view/_iscnId/index.vue
+++ b/pages/view/_iscnId/index.vue
@@ -92,6 +92,14 @@
         'lg:pt-0',
       ]"
     >
+      <div v-if="isIscnOwner" class="flex justify-center items-center gap-[4px] mr-[8px]">
+        <Button preset="plain" text="Edit ISCN" @click="handleEdit">
+          <template #prepend>
+            <IconEdit />
+          </template>
+        </Button>
+        <div class="h-[20px] w-[2px] bg-medium-gray" />
+      </div>
       <Button preset="tertiary" :text="$t('NFTPortal.button.download.iscn')" @click="handleClickDownload">
         <template #prepend>
           <IconDownload />
@@ -654,7 +662,11 @@ export default class ViewIscnIdPage extends Vue {
   @walletModule.Getter('getWalletAddress') currentAddress!: string
 
   get isShowMintButton() {
-    return !this.isPreminted && this.iscnOwner === this.currentAddress
+    return !this.isPreminted && this.isIscnOwner
+  }
+
+  get isIscnOwner() {
+    return Boolean(this.iscnOwner === this.currentAddress)
   }
 
   get isPopupLayout() {
@@ -950,5 +962,14 @@ export default class ViewIscnIdPage extends Vue {
       this.isOpenCopiedAlert = true
     }
   }
+
+  handleEdit() {
+    this.$router.replace(
+      this.localeLocation({
+        name: 'edit-iscnId',
+        params: { iscnId: this.iscnId },
+      })!,
+    )
+  }
 }
 </script>
diff --git a/utils/cosmos/iscn/sign.ts b/utils/cosmos/iscn/sign.ts
index 3f67dcb7..feee7f9a 100644
--- a/utils/cosmos/iscn/sign.ts
+++ b/utils/cosmos/iscn/sign.ts
@@ -5,7 +5,7 @@ import network from '@/constant/network';
 import { DeliverTxResponse } from '@cosmjs/stargate';
 import { BigNumber } from 'bignumber.js';
 import { ISCNRegisterPayload } from './iscn.type';
-import { WALLET_TYPE_REPLACER, ISCN_GAS_FEE, DEFAULT_GAS_PRICE } from '~/constant'
+import { WALLET_TYPE_REPLACER, ISCN_GAS_FEE, DEFAULT_GAS_PRICE, ISCN_GAS_MULTIPLIER } from '~/constant'
 import { getPublisherISCNPayload } from '.';
 import { ISCN_PUBLISHERS } from '~/constant/iscn';
 
@@ -159,7 +159,7 @@ export async function signISCN(
   {
     iscnId,
     memo,
-    gas = ISCN_GAS_FEE.toString(),
+    gas = new BigNumber(ISCN_GAS_FEE).multipliedBy(ISCN_GAS_MULTIPLIER).toFixed(0),
   }: { iscnId?: string, memo?: string, gas?: string } = {},
 ) {
   const isUpdate = !!iscnId
@@ -189,3 +189,4 @@ export async function signISCN(
   const res = await signingPromise
   return res as DeliverTxResponse
 }
+