From 5cb13243cfaf139078101ac674c673ffc7cda53a Mon Sep 17 00:00:00 2001
From: AuroraHuang22 <aurora90376@gmail.com>
Date: Wed, 27 Dec 2023 21:05:12 +0800
Subject: [PATCH 1/5] =?UTF-8?q?=F0=9F=92=84=20Add=20entrance=20for=20editi?=
 =?UTF-8?q?ng=20ISCN?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/view/_iscnId/index.vue | 23 ++++++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

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>

From 359538919ba8b1b1c563f1486be12d5b5dcc72e7 Mon Sep 17 00:00:00 2001
From: AuroraHuang22 <aurora90376@gmail.com>
Date: Wed, 27 Dec 2023 21:07:22 +0800
Subject: [PATCH 2/5] =?UTF-8?q?=E2=9C=A8=20Add=20[edit/=5FiscnId]=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/IscnUploadForm.vue  |  12 +-
 components/SameAsFieldList.vue |   6 +-
 locales/en.json                |   3 +
 pages/edit/_iscnId.vue         | 407 +++++++++++++++++++++++++++++++++
 4 files changed, 422 insertions(+), 6 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..77891a49 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,8 @@
   "IscnCardPage.button.landscape": "Landscape",
   "IscnCardPage.button.portrait": "Portrait",
   "IscnCardPage.button.print": "Print",
+  "IscnEditInfo.title": "Edit ISCN Info",
+  "IscnEditInfo.button.confirm": "Update ISCN",
   "IscnRegisterForm.arweave.link": "ar://{arweaveId}",
   "IscnRegisterForm.button.back": "Back",
   "IscnRegisterForm.button.confirm": "Confirm",
diff --git a/pages/edit/_iscnId.vue b/pages/edit/_iscnId.vue
new file mode 100644
index 00000000..89154d91
--- /dev/null
+++ b/pages/edit/_iscnId.vue
@@ -0,0 +1,407 @@
+<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="ipfs of uploadIpfsList"
+              :key="ipfs"
+              :item="formatIpfs(ipfs)"
+            />
+            <ContentFingerprintLink
+              v-for="ar of uploadArweaveIdList"
+              :key="ar"
+              :item="formatArweave(ar)"
+            />
+            <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="formattedSameAsList.length" class="mr-[8px] mb-[4px]">
+              <Button
+                size="mini"
+                preset="secondary"
+                tag="div"
+                text-preset="h6"
+                type="button"
+                :text="`${formattedSameAsList.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.3)]',
+        ]"
+      >
+        <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">Re-Upload data</Label>
+        </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]">
+        <ProgressIndicator v-if="isSubmitLoading" />
+        <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>
+  </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 { updateISCNRecord } from '~/utils/cosmos/iscn/sign'
+
+const walletModule = namespace('wallet')
+
+@Component({
+  async asyncData({ params, store, error, redirect }) {
+    try {
+      const { iscnId } = params
+      if (iscnId && iscnId.startsWith(ISCN_PREFIX)) {
+        const res = await store.dispatch('iscn/fetchISCNById', iscnId)
+        if (res) {
+          return {
+            iscnId: res.records[0].id,
+            iscnOwner: res.owner,
+            iscnRecord: res.records[0].data,
+          }
+        }
+      } else {
+        redirect({ name: 'index' })
+      }
+    } 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
+
+  get formattedSameAsList() {
+    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 ''
+      },
+    )
+  }
+
+  get shouldDisableSubmit() {
+    return Boolean(this.step === 1 && this.shouldShowUploadSection)
+  }
+
+  get contentFingerprintOptions() {
+    const array = []
+    if (this.uploadArweaveIdList) {
+      array.push(
+        ...this.uploadArweaveIdList.map((id: string) => this.formatArweave(id)),
+      )
+    }
+    if (this.uploadIpfsList.length) {
+      array.push(...this.uploadIpfsList.map((ipfs) => this.formatIpfs(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.sameAsList.length ? this.sameAsList : this.sameAs,
+      },
+    }
+  }
+
+  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 })
+  }
+
+  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[]
+    arweaveIds: string[]
+  }) {
+    this.contentFingerprints = []
+    if (fileRecords && fileRecords.length) {
+      this.uploadFileRecords = [...fileRecords]
+      this.uploadIpfsList = fileRecords.map((file) => file.ipfsHash)
+      this.uploadArweaveIdList = fileRecords.map((file) => file.arweaveId)
+
+      this.contentFingerprints = [
+        ...fileRecords.map((file) => file.fileSHA256),
+        ...this.uploadIpfsList,
+        ...this.uploadArweaveIdList,
+      ]
+    }
+    logTrackerEvent(this, 'ISCNEdit', 'ISCNConfirmFile', '', 1)
+    this.step = 2
+  }
+
+  onSubmitUpdate() {
+    this.isSubmitLoading = true
+  }
+}
+</script>

From 1606cf6fd159c34e15586d4342a483bb8f7fbee7 Mon Sep 17 00:00:00 2001
From: AuroraHuang22 <aurora90376@gmail.com>
Date: Wed, 27 Dec 2023 21:08:14 +0800
Subject: [PATCH 3/5] =?UTF-8?q?=F0=9F=8E=A8=20Handle=20sign=20update=20ISC?=
 =?UTF-8?q?N?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/edit/_iscnId.vue    | 19 ++++++++++++++++++-
 utils/cosmos/iscn/sign.ts | 18 ++++++++++++++++++
 2 files changed, 36 insertions(+), 1 deletion(-)

diff --git a/pages/edit/_iscnId.vue b/pages/edit/_iscnId.vue
index 89154d91..e1684487 100644
--- a/pages/edit/_iscnId.vue
+++ b/pages/edit/_iscnId.vue
@@ -400,8 +400,25 @@ export default class EditIscnPage extends Vue {
     this.step = 2
   }
 
-  onSubmitUpdate() {
+  async onSubmitUpdate() {
     this.isSubmitLoading = true
+    await this.initIfNecessary()
+    const result = await updateISCNRecord(
+      this.signer,
+      this.address,
+      this.iscnId,
+      this.payload,
+    )
+    this.isSubmitLoading = false
+
+    if (result) {
+      this.$router.replace(
+        this.localeLocation({
+          name: 'view-iscnId',
+          params: { iscnId: this.iscnId },
+        })!,
+      )
+    }
   }
 }
 </script>
diff --git a/utils/cosmos/iscn/sign.ts b/utils/cosmos/iscn/sign.ts
index b297003d..c3422b20 100644
--- a/utils/cosmos/iscn/sign.ts
+++ b/utils/cosmos/iscn/sign.ts
@@ -188,3 +188,21 @@ export async function signISCN(
   const res = await signingPromise
   return res as DeliverTxResponse
 }
+
+export async function updateISCNRecord(
+  signer: OfflineSigner,
+  address: string,
+  iscnId: string,
+  payload: ISCNSignPayload,
+) {
+  const signingClient = await getSigningClient()
+  await signingClient.connectWithSigner(network.rpcURL, signer)
+  const signingPromise = signingClient.updateISCNRecord(
+    address,
+    iscnId,
+    payload,
+  )
+
+  const res = await signingPromise
+  return res as DeliverTxResponse
+}

From 6b47d12839e75986aec03e0dec2334a65442f1df Mon Sep 17 00:00:00 2001
From: AuroraHuang22 <aurora90376@gmail.com>
Date: Wed, 27 Dec 2023 21:23:07 +0800
Subject: [PATCH 4/5] =?UTF-8?q?=F0=9F=9A=B8=20Improve=20the=20guidance=20t?=
 =?UTF-8?q?hroughout=20the=20process?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 locales/en.json        |  2 ++
 pages/edit/_iscnId.vue | 55 ++++++++++++++++++++++++++++--------------
 2 files changed, 39 insertions(+), 18 deletions(-)

diff --git a/locales/en.json b/locales/en.json
index 77891a49..4b804abd 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -181,6 +181,8 @@
   "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",
diff --git a/pages/edit/_iscnId.vue b/pages/edit/_iscnId.vue
index e1684487..d49a6ec1 100644
--- a/pages/edit/_iscnId.vue
+++ b/pages/edit/_iscnId.vue
@@ -120,7 +120,7 @@
           'duration-100',
 
           'group',
-          'hover:bg-[rgba(0,0,0,0.3)]',
+          'hover:bg-[rgba(0,0,0,0.4)]',
         ]"
       >
         <div
@@ -141,7 +141,10 @@
           ]"
           @click="handleClickUpload"
         >
-          <Label class="text-[26px] text-white font-bold">Re-Upload data</Label>
+          <Label
+            class="text-[26px] text-white font-bold"
+            :text="$t('IscnEditInfo.reUpload')"
+          />
         </div>
         <FormField
           v-if="contentFingerprints.length"
@@ -169,7 +172,14 @@
         </FormField>
       </div>
       <div class="flex justify-end items-center my-[20px]">
-        <ProgressIndicator v-if="isSubmitLoading" />
+        <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')"
@@ -223,6 +233,8 @@
         />
       </Card>
     </Dialog>
+
+    <Snackbar v-model="shouldShowAlert" :text="errorMessage" preset="warn" />
   </Card>
 </template>
 
@@ -282,6 +294,8 @@ export default class EditIscnPage extends Vue {
   contentFingerprintInput: string = ''
   isOpenSameAsDialog: boolean = false
   isSubmitLoading: boolean = false
+  shouldShowAlert: boolean = false
+  errorMessage: string = ''
 
   get formattedSameAsList() {
     return this.sameAsList.map(
@@ -402,23 +416,28 @@ export default class EditIscnPage extends Vue {
 
   async onSubmitUpdate() {
     this.isSubmitLoading = true
-    await this.initIfNecessary()
-    const result = await updateISCNRecord(
-      this.signer,
-      this.address,
-      this.iscnId,
-      this.payload,
-    )
-    this.isSubmitLoading = false
-
-    if (result) {
-      this.$router.replace(
-        this.localeLocation({
-          name: 'view-iscnId',
-          params: { iscnId: this.iscnId },
-        })!,
+    try {
+      await this.initIfNecessary()
+      const result = await updateISCNRecord(
+        this.signer,
+        this.address,
+        this.iscnId,
+        this.payload,
       )
+      if (result) {
+        this.$router.replace(
+          this.localeLocation({
+            name: 'view-iscnId',
+            params: { iscnId: this.iscnId },
+          })!,
+        )
+      }
+    } catch (error) {
+      this.shouldShowAlert = true
+      this.errorMessage = (error as Error).toString()
     }
+
+    this.isSubmitLoading = false
   }
 }
 </script>

From 29d70c137ad415e5fd41228503e028f5bc373710 Mon Sep 17 00:00:00 2001
From: AuroraHuang22 <aurora90376@gmail.com>
Date: Wed, 27 Dec 2023 21:27:00 +0800
Subject: [PATCH 5/5] =?UTF-8?q?=F0=9F=90=9B=20Redirect=20to=20the=20latest?=
 =?UTF-8?q?=20version?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/edit/_iscnId.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/pages/edit/_iscnId.vue b/pages/edit/_iscnId.vue
index d49a6ec1..af2ab955 100644
--- a/pages/edit/_iscnId.vue
+++ b/pages/edit/_iscnId.vue
@@ -245,6 +245,7 @@ import { OfflineSigner } from '@cosmjs/proto-signing'
 import { ISCN_PREFIX } from '~/constant'
 import { logTrackerEvent } from '~/utils/logger'
 import { updateISCNRecord } from '~/utils/cosmos/iscn/sign'
+import { extractIscnIdPrefix } from '~/utils/ui'
 
 const walletModule = namespace('wallet')
 
@@ -428,7 +429,7 @@ export default class EditIscnPage extends Vue {
         this.$router.replace(
           this.localeLocation({
             name: 'view-iscnId',
-            params: { iscnId: this.iscnId },
+            params: { iscnId: extractIscnIdPrefix(this.iscnId) },
           })!,
         )
       }