From 112cc6b5b76b225ad1f7379e7a6f14a572c9b3ab Mon Sep 17 00:00:00 2001
From: AuroraHuang22 <aurora90376@gmail.com>
Date: Mon, 30 Oct 2023 20:01:28 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=9A=20Separate=20upload=20only=20mode?=
 =?UTF-8?q?=20and=20register=20ISCN?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/IscnRegisterForm.vue | 237 ++-------------------
 components/IscnUploadForm.vue   | 357 +++++++++++++++++++++++++++++++-
 components/SameAsFieldList.vue  |   1 -
 locales/en.json                 |   2 +-
 pages/new/index.vue             |  36 ++--
 5 files changed, 383 insertions(+), 250 deletions(-)

diff --git a/components/IscnRegisterForm.vue b/components/IscnRegisterForm.vue
index 233d17f9..e707cfdb 100644
--- a/components/IscnRegisterForm.vue
+++ b/components/IscnRegisterForm.vue
@@ -8,12 +8,7 @@
     <Card class="p-[32px]" :has-padding="false">
       <!-- header -->
       <IscnFormHeader :step="step" :total-step="4" />
-      <!-- guide text -->
-      <Label v-if="showUploadOnly"
-        :text="$t('IscnRegisterForm.guide.uploadOnly')"
-        class="text-medium-gray my-[12px]"
-      />
-      <Label v-else
+      <Label
         :text="$t('IscnRegisterForm.guide.review')"
         class="text-medium-gray my-[12px]"
       />
@@ -203,35 +198,9 @@
           :all-exif="displayExifInfo"
         />
       </Dialog>
-      <div v-if="showUploadOnly" :class="[
-        'flex',
-        'flex-col',
-        'items-end',
-      ]">
-        <template v-if="uploadStatus">
-          <ProgressIndicator />
-          <div :class="[
-            'text-[12px]',
-            'mt-[4px]',
-          ]">
-            {{ formattedUploadStatus }}
-          </div>
-        </template>
-        <Button
-          v-else
-          :text="$t('IscnRegisterForm.button.upload')"
-          preset="secondary"
-          @click.native="onUploadOnly"
-        >
-          <template #append>
-            <IconArrowRight />
-          </template>
-        </Button>
-      </div>
     </Card>
     <!-- ////// Input Card /////// -->
     <Card
-      v-if="!showUploadOnly"
       class="flex flex-col mt-[16px] p-[32px]"
       :has-padding="false"
     >
@@ -463,12 +432,6 @@
                 'gap-[12px]',
               ]"
             >
-              <Button
-                  v-if="!uploadStatus"
-                  preset="outline"
-                  :text="$t('IscnRegisterForm.button.uploadOnly')"
-                  @click="showUploadOnly = true"
-              />
               <Button
                 :text="$t('IscnRegisterForm.button.register')"
                 type="submit"
@@ -743,9 +706,7 @@ import { namespace } from 'vuex-class'
 import { AxiosResponse } from 'axios'
 import { Author } from '~/types/author'
 
-import { estimateBundlrFilePrice, uploadSingleFileToBundlr } from '~/utils/arweave/v2'
 import { signISCNTx } from '~/utils/cosmos/iscn';
-import { DEFAULT_TRANSFER_FEE, sendLIKE } from '~/utils/cosmos/sign';
 import { estimateISCNTxGasAndFee, formatISCNTxPayload } from '~/utils/cosmos/iscn/sign';
 import { ISCN_GAS_MULTIPLIER } from '~/constant';
 import {
@@ -778,9 +739,10 @@ export enum AuthorDialogType {
 @Component
 export default class IscnRegisterForm extends Vue {
   @Prop({ default: [] }) readonly fileRecords!: any[]
+  @Prop({ default: [] }) readonly uploadArweaveList!: any[]
+
   @Prop(String) readonly ipfsHash!: string
   @Prop(String) readonly arweaveId!: string
-  @Prop({ default: false }) readonly isUploadOnly!: boolean
   @Prop(Number) readonly step: number | undefined
 
   @walletModule.Getter('getWalletAddress') address!: string
@@ -832,7 +794,7 @@ export default class IscnRegisterForm extends Vue {
   >()
 
   uploadStatus: string = ''
-  uploadArweaveIdList: string[] = []
+  uploadArweaveIdList: any = []
   error: string = ''
   likerId: string = ''
   likerIdsAddresses: (string | void)[] = []
@@ -844,7 +806,6 @@ export default class IscnRegisterForm extends Vue {
   displayImageSrc: string = ''
   displayExifInfo: any = null
 
-  arweaveFeeTargetAddress: string = ''
   arweaveFee = new BigNumber(0)
   iscnFee = new BigNumber(0)
   iscnGasFee = ''
@@ -872,8 +833,6 @@ export default class IscnRegisterForm extends Vue {
   isChecked = false
   charactersLimit = CharactersLimit
 
-  showUploadOnly = this.isUploadOnly
-
   currentAuthorDialogType: AuthorDialogType = AuthorDialogType.stakeholder
   sameAsList: any = []
 
@@ -932,7 +891,7 @@ export default class IscnRegisterForm extends Vue {
   get contentFingerprintLinks() {
     const array=[]
     if (this.uploadArweaveIdList) {
-      array.push(...this.uploadArweaveIdList.map(id => this.formatArweave(id)))
+      array.push(...this.uploadArweaveIdList.map((id: string) => this.formatArweave(id)))
     }
     if (this.ipfsHashList.length) {
       array.push(...this.ipfsHashList.map(ipfs => this.formatIpfs(ipfs)))
@@ -1046,14 +1005,8 @@ export default class IscnRegisterForm extends Vue {
     }
   }
 
-  get arweaveFeePlusGas() {
-    if (this.arweaveFee.lte(0)) return this.arweaveFee;
-    const gasAmount = new BigNumber(DEFAULT_TRANSFER_FEE.amount[0].amount).shiftedBy(-9);
-    return this.arweaveFee.plus(gasAmount);
-  }
-
   get totalFee() {
-    return this.iscnFee.plus(this.arweaveFeePlusGas)
+    return this.iscnFee
   }
 
   get currentSignStep() {
@@ -1084,8 +1037,7 @@ export default class IscnRegisterForm extends Vue {
   }
 
   get signDialogFee() {
-    if (this.uploadArweaveIdList.length) return this.iscnFee;
-    return this.arweaveFeePlusGas;
+    return this.iscnFee
   }
 
   get buttonState() {
@@ -1122,11 +1074,13 @@ export default class IscnRegisterForm extends Vue {
   }
 
   async mounted() {
-    if (this.arweaveId) {
-      this.uploadArweaveIdList = [this.arweaveId];
+    if (this.uploadArweaveList && this.uploadArweaveList.length) {
+      this.uploadArweaveIdList = [...this.uploadArweaveList]
+    }
+    if (this.arweaveId){
+      this.uploadArweaveIdList.push(this.arweaveId)
     }
     this.uploadStatus = 'loading'
-    await this.estimateArweaveFee();
     // ISCN Fee needs Arweave fee to calculate
     await this.calculateISCNFee()
     this.uploadStatus = ''
@@ -1359,50 +1313,6 @@ export default class IscnRegisterForm extends Vue {
     return undefined
   }
 
-  async onUploadOnly(): Promise<void> {
-    logTrackerEvent(this, 'ISCNCreate', 'ClickUpload', '', 1);
-    this.uploadStatus = 'loading'
-    await this.getLikerIdsAddresses()
-    this.$emit('handleSubmit')
-    this.error = ''
-    this.signDialogError = ''
-    if (this.balance.lt(this.totalFee)) {
-      this.error = 'INSUFFICIENT_BALANCE'
-      this.isOpenWarningSnackbar = true
-      this.uploadStatus = ''
-      return
-    }
-    if (!this.fileRecords.some(file => file.fileBlob)) {
-      this.error = 'NO_FILE_TO_UPLOAD'
-      this.isOpenWarningSnackbar = true
-      this.uploadStatus = ''
-      return
-    }
-    try {
-      this.isUploadingArweave = true;
-      this.uploadStatus = 'uploading';
-
-      // eslint-disable-next-line no-restricted-syntax
-      for (const record of this.fileRecords) {
-        // eslint-disable-next-line no-await-in-loop
-        await this.submitToArweave(record);
-      }
-    } catch (error) {
-      // eslint-disable-next-line no-console
-      console.error(error)
-    } finally {
-      this.isUploadingArweave = false;
-      this.uploadStatus = '';
-    }
-
-    if (this.uploadArweaveIdList.length) {
-      this.$emit('fileUploaded', {
-        ipfsHash: this.ipfsHashList,
-        arweaveId: this.uploadArweaveIdList,
-      })
-    }
-  }
-
   async onSubmit(): Promise<void> {
     logTrackerEvent(this, 'ISCNCreate', 'ClickSubmit', '', 1);
     await this.getLikerIdsAddresses()
@@ -1424,7 +1334,6 @@ export default class IscnRegisterForm extends Vue {
         // eslint-disable-next-line no-restricted-syntax
         for (const record of this.fileRecords) {
           // eslint-disable-next-line no-await-in-loop
-          await this.submitToArweave(record);
           if (this.isRegisterNumbersProtocolAsset && !this.numbersProtocolAssetIds.has(record.ipfsHash)) {
           // eslint-disable-next-line no-await-in-loop
             await this.submitToNumbers(record);
@@ -1441,128 +1350,6 @@ export default class IscnRegisterForm extends Vue {
     if (!this.fileRecords.some(file => file.fileBlob) || this.uploadArweaveIdList.length) await this.submitToISCN()
   }
 
-  async estimateArweaveFee(): Promise<void> {
-    try {
-      const pricePromises = this.fileRecords.map(record =>
-        estimateBundlrFilePrice({
-          fileSize: record.fileBlob?.size || 0,
-          ipfsHash: record.ipfsHash,
-        }),
-      );
-
-      const results = await Promise.all(pricePromises);
-      let totalFee = new BigNumber(0);
-      const arweaveIds: string[] = [];
-
-      results.forEach(result => {
-        const { address, arweaveId, LIKE } = result;
-        if (LIKE) {
-          totalFee = totalFee.plus(new BigNumber(LIKE));
-        }
-        if (arweaveId) {
-          arweaveIds.push(arweaveId);
-        }
-        if (!this.arweaveFeeTargetAddress) {
-          this.arweaveFeeTargetAddress = address;
-        }
-      });
-
-      this.arweaveFee = totalFee;
-      if (arweaveIds.length) {
-        this.uploadArweaveIdList = [
-          ...this.uploadArweaveIdList,
-          ...arweaveIds,
-          ];
-        this.$emit('arweaveUploaded', { arweaveId: arweaveIds[0] });
-      }
-
-    } catch (err) {
-      // TODO: Handle error
-      // eslint-disable-next-line no-console
-      console.error(err);
-    }
-  }
-
-  async sendArweaveFeeTx(records: any): Promise<string> {
-    logTrackerEvent(this, 'ISCNCreate', 'SendArFeeTx', '', 1);
-    if (this.sentArweaveTransactionHashes.has(records.ipfsHash)) {
-      const transactionInfo = this.sentArweaveTransactionHashes.get(records.ipfsHash);
-      if (transactionInfo && transactionInfo.transactionHash) {
-        return transactionInfo.transactionHash;
-      }
-    }
-    await this.initIfNecessary()
-    if (!this.signer) throw new Error('SIGNER_NOT_INITED');
-    if (!this.arweaveFeeTargetAddress) throw new Error('TARGET_ADDRESS_NOT_SET');
-    this.uploadStatus = 'signing';
-    const memo = JSON.stringify({ ipfs: records.ipfsHash, fileSize: records.fileBlob?.size || 0 });
-    try {
-      const { transactionHash } = await sendLIKE(this.address, this.arweaveFeeTargetAddress, this.arweaveFee.toFixed(), this.signer, memo);
-      if (transactionHash) {
-        const existingData = this.sentArweaveTransactionHashes.get(records.ipfsHash) || {};
-        this.sentArweaveTransactionHashes.set(records.ipfsHash, { ...existingData, transactionHash });
-        return transactionHash;
-      }
-    } catch (err) {
-      this.signDialogError = (err as Error).toString()
-      // TODO: Handle error
-      // eslint-disable-next-line no-console
-      console.error(err);
-    } finally {
-      this.uploadStatus = '';
-    }
-    return '';
-  }
-
-  async submitToArweave(records: any): Promise<void> {
-    const existingData = this.sentArweaveTransactionHashes.get(records.ipfsHash) || {};
-    const { transactionHash, arweaveId: uploadArweaveId } = existingData;
-    if (transactionHash && uploadArweaveId) return
-    const tempRecord = {...records}
-    logTrackerEvent(this, 'ISCNCreate', 'SubmitToArweave', '', 1);
-    if (!tempRecord.fileBlob) return;
-    this.isOpenSignDialog = true;
-    this.onOpenKeplr();
-    tempRecord.transactionHash = transactionHash
-    if (!tempRecord.transactionHash) {
-      tempRecord.transactionHash = await this.sendArweaveFeeTx(tempRecord);
-    }
-    // Register Numbers Protocol assets along with Arweave
-    if (this.isRegisterNumbersProtocolAsset) {
-      logTrackerEvent(this, 'ISCNCreate', 'SubmitToNumbers', '', 1);
-    }
-
-    if (tempRecord.transactionHash && !uploadArweaveId) {
-      try {
-        const arrayBuffer = await tempRecord.fileBlob.arrayBuffer();
-        const buffer = Buffer.from(arrayBuffer);
-        const arweaveId = await uploadSingleFileToBundlr(buffer, {
-          fileSize: tempRecord.fileBlob?.size || 0,
-          ipfsHash: tempRecord.ipfsHash,
-          fileType: tempRecord.fileType as string,
-          txHash: tempRecord.transactionHash,
-        });
-        if (arweaveId) {
-          const uploadedData = this.sentArweaveTransactionHashes.get(records.ipfsHash) || {};
-          this.sentArweaveTransactionHashes.set(records.ipfsHash, { ...uploadedData, arweaveId });
-          this.uploadArweaveIdList.push(arweaveId)
-          this.$emit('arweaveUploaded', { arweaveId })
-          this.isOpenSignDialog = false
-        } else {
-          this.shouldShowAlert = true
-          this.errorMessage = this.$t('IscnRegisterForm.error.arweave') as string
-          this.$emit('handleContinue')
-        }
-      } catch (err) {
-        // TODO: Handle error
-        // eslint-disable-next-line no-console
-        console.error(err)
-        this.shouldShowAlert = true
-        this.errorMessage = (err as Error).toString()
-      }
-    }
-  }
-
   async submitToNumbers(record: any): Promise<void> {
     logTrackerEvent(this, 'ISCNCreate', 'SubmitToNumbers', '', 1);
     this.isOpenSignDialog = true;
diff --git a/components/IscnUploadForm.vue b/components/IscnUploadForm.vue
index 193b4e4d..1b23b125 100644
--- a/components/IscnUploadForm.vue
+++ b/components/IscnUploadForm.vue
@@ -114,7 +114,26 @@
           </NuxtLink>
         </div>
         <!-- Publish btn -->
-        <div class="flex gap-[8px] justify-end mt-[12px] text-medium-gray">
+        <div
+          v-if="uploadStatus"
+          :class="[
+            'flex',
+            'flex-col',
+            'items-end',
+            'mt-[12px]'
+          ]"
+        >
+          <ProgressIndicator />
+          <div
+            :class="[
+              'text-[12px]',
+              'mt-[4px]',
+            ]"
+          >
+            {{ formattedUploadStatus }}
+          </div>
+        </div>
+        <div v-else class="flex gap-[8px] justify-end mt-[12px] text-medium-gray">
           <Button preset="outline" @click="onSkipUpload"
             >{{ $t('UploadForm.button.skip') }}
           </Button>
@@ -146,6 +165,72 @@
           :all-exif="displayExifInfo"
         />
       </Dialog>
+      <Dialog
+        v-model="isOpenSignDialog"
+        :header-text="$t('IscnRegisterForm.button.uploading')"
+        :is-disabled-backdrop-click="true"
+        :has-close-button="signDialogError"
+        @close="handleSignDialogClose"
+      >
+        <template #header-prepend>
+          <IconStar class="w-[20px]" />
+        </template>
+        <ProgressIndicator
+          class="mx-auto mb-[24px]"
+        />
+        <div class="text-center text-medium-gray text-[24px] font-500">{{ signDialogMessage }}</div>
+        <pre
+          v-if="signDialogError"
+          :class="[
+            'mt-[12px]',
+            'p-[8px]',
+            'bg-red',
+            'bg-opacity-20',
+            'rounded-[8px]',
+            'text-red',
+            'text-[12px]',
+            'font-400',
+          ]"
+        >{{ signDialogError }}</pre>
+        <Divider class="mt-[12px] mb-[8px]" />
+        <span
+          v-t="'IscnRegisterForm.signDialog.sign.arweave.uploading'"
+          class="whitespace-pre-line"
+        />
+      </Dialog>
+      <Dialog
+        v-model="isOpenSignDialog"
+        :header-text="$t('IscnRegisterForm.button.uploading')"
+        :is-disabled-backdrop-click="true"
+        :has-close-button="signDialogError"
+        @close="handleSignDialogClose"
+      >
+        <template #header-prepend>
+          <IconStar class="w-[20px]" />
+        </template>
+        <ProgressIndicator
+          class="mx-auto mb-[24px]"
+        />
+        <div class="text-center text-medium-gray text-[24px] font-500">{{ signDialogMessage }}</div>
+        <pre
+          v-if="signDialogError"
+          :class="[
+            'mt-[12px]',
+            'p-[8px]',
+            'bg-red',
+            'bg-opacity-20',
+            'rounded-[8px]',
+            'text-red',
+            'text-[12px]',
+            'font-400',
+          ]"
+        >{{ signDialogError }}</pre>
+        <Divider class="mt-[12px] mb-[8px]" />
+        <span
+          v-t="'IscnRegisterForm.signDialog.sign.arweave.uploading'"
+          class="whitespace-pre-line"
+        />
+      </Dialog>
     </Card>
     <AttentionsLedger />
     <Snackbar
@@ -153,26 +238,52 @@
       :text="$t('UploadForm.warning',{ size: Math.round(uploadSizeLimit / (1024*1024)) })"
       preset="warn"
     />
+    <Snackbar
+      v-model="isOpenWarningSnackbar"
+      preset="warn"
+    >
+      {{ errorMsg }}
+      <Link
+        v-if="error === 'INSUFFICIENT_BALANCE'"
+        :class="['text-white','ml-[2px]']"
+        href="https://app.osmosis.zone/?from=USDC&to=LIKE"
+      >
+        {{ $t('IscnRegisterForm.error.buy') }}
+      </Link>
+    </Snackbar>
   </div>
 </template>
 
 <script lang="ts">
+import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
+import { namespace } from 'vuex-class'
 import exifr from 'exifr'
 import Hash from 'ipfs-only-hash'
-import { Vue, Component, Prop } from 'vue-property-decorator'
-import { logTrackerEvent } from '~/utils/logger'
-import { IS_CHAIN_UPGRADING, UPLOAD_FILESIZE_MAX } from '~/constant'
+import BigNumber from 'bignumber.js'
+
+import { OfflineSigner } from '@cosmjs/proto-signing'
 
+import { IS_CHAIN_UPGRADING, UPLOAD_FILESIZE_MAX } from '~/constant'
+import { logTrackerEvent } from '~/utils/logger'
+import { estimateBundlrFilePrice, uploadSingleFileToBundlr } from '~/utils/arweave/v2'
 import {
   fileToArrayBuffer,
   digestFileSHA256,
   readImageType,
 } from '~/utils/misc'
+import { DEFAULT_TRANSFER_FEE, sendLIKE } from '~/utils/cosmos/sign';
+import { getAccountBalance } from '~/utils/cosmos'
+
+const walletModule = namespace('wallet')
 
 @Component
 export default class UploadForm extends Vue {
   @Prop(Number) readonly step: number | undefined
 
+  @walletModule.Getter('getSigner') signer!: OfflineSigner | null
+  @walletModule.Action('initIfNecessary') initIfNecessary!: () => Promise<any>
+  @walletModule.Getter('getWalletAddress') address!: string
+
   isImage: boolean = false
   ipfsURL: string = ''
   ipfsHash: string = ''
@@ -190,9 +301,26 @@ export default class UploadForm extends Vue {
   fileRecords: any[] = []
 
   isOpenFileInfoDialog = false
+  isOpenSignDialog = false
+  isOpenWarningSnackbar = false
+  isOpenKeplr = true
   isSizeExceeded = false
 
   uploadSizeLimit: number = UPLOAD_FILESIZE_MAX
+  uploadStatus: string = ''
+  uploadArweaveIdList: string[] = []
+  arweaveFeeTargetAddress: string = ''
+  arweaveFee = new BigNumber(0)
+  sentArweaveTransactionHashes = new Map<string, string>()
+
+  likerId: string = ''
+  likerIdsAddresses: (string | void)[] = []
+  error: string = ''
+  shouldShowAlert = false
+  errorMessage = ''
+
+  signDialogError = ''
+  balance = new BigNumber(0)
 
   get formClasses() {
     return [
@@ -225,6 +353,62 @@ export default class UploadForm extends Vue {
     return `${Math.round(this.fileSize * 0.001)} KB`
   }
 
+  get arweaveFeePlusGas() {
+    if (this.arweaveFee.lte(0)) return this.arweaveFee;
+    const gasAmount = new BigNumber(DEFAULT_TRANSFER_FEE.amount[0].amount).shiftedBy(-9);
+    return this.arweaveFee.plus(gasAmount);
+  }
+
+  get signDialogMessage() {
+    return this.$t('IscnRegisterForm.signDialog.closeWarning')
+  }
+
+  get formattedUploadStatus() {
+    switch (this.uploadStatus) {
+      case 'loading':
+        return this.$t('IscnRegisterForm.button.loading')
+
+      case 'signing':
+        return this.$t('IscnRegisterForm.button.signing')
+
+      case 'uploading':
+        return this.$t('IscnRegisterForm.button.uploading')
+
+      case 'success':
+        return this.$t('IscnRegisterForm.button.success')
+
+      default:
+        return this.$t('IscnRegisterForm.button.register')
+    }
+  }
+
+  get errorMsg() {
+    switch (this.error) {
+      case 'INSUFFICIENT_BALANCE':
+        return this.$t('IscnRegisterForm.error.insufficient')
+      case 'MISSING_SIGNER':
+        return this.$t('IscnRegisterForm.error.missingSigner')
+      default:
+        return ''
+    }
+  }
+
+  @Watch('error')
+  showWarning(errormsg: any) {
+    if (errormsg) this.isOpenWarningSnackbar = true
+  }
+
+  @Watch('fileRecords')
+  async estimateArFee(fileRecords: any) {
+    if (fileRecords.length) {
+      this.uploadStatus = 'loading'
+      await this.estimateArweaveFee();
+      this.uploadStatus = ''
+    } else {
+      this.arweaveFee = new BigNumber(0)
+    }
+  }
+
   async onFileUpload(event: DragEvent) {
     logTrackerEvent(this, 'ISCNCreate', 'SelectFile', '', 1)
     this.isSizeExceeded = false
@@ -320,11 +504,6 @@ export default class UploadForm extends Vue {
     this.$emit('submit', {})
   }
 
-  onSubmit() {
-    if (IS_CHAIN_UPGRADING) return
-    this.$emit('submit', this.fileRecords)
-  }
-
   handleDeleteFile(index: number) {
     this.fileRecords.splice(index, 1)
   }
@@ -334,5 +513,165 @@ export default class UploadForm extends Vue {
     this.displayImageSrc = this.fileRecords[index].fileData
     this.displayExifInfo = this.fileRecords[index].exifInfo
   }
+
+  onOpenKeplr() {
+    logTrackerEvent(this, 'ISCNCreate', 'OpenKeplr', '', 1);
+    this.isOpenKeplr = true
+    setTimeout(() => {
+      this.isOpenKeplr = false
+    }, 5000)
+  }
+
+  async estimateArweaveFee(): Promise<void> {
+    try {
+      const pricePromises = this.fileRecords.map(record =>
+        estimateBundlrFilePrice({
+          fileSize: record.fileBlob?.size || 0,
+          ipfsHash: record.ipfsHash,
+        }),
+      );
+
+      const results = await Promise.all(pricePromises);
+      let totalFee = new BigNumber(0);
+      const arweaveIds: string[] = [];
+
+      results.forEach(result => {
+        const { address, arweaveId, LIKE } = result;
+        if (LIKE) {
+          totalFee = totalFee.plus(new BigNumber(LIKE));
+        }
+        if (arweaveId) {
+          arweaveIds.push(arweaveId);
+        }
+        if (!this.arweaveFeeTargetAddress) {
+          this.arweaveFeeTargetAddress = address;
+        }
+      });
+
+      this.arweaveFee = totalFee;
+      if (arweaveIds.length) {
+        this.uploadArweaveIdList = [...arweaveIds];
+        this.$emit('arweaveUploaded', { arweaveId: arweaveIds[0] });
+      }
+
+    } catch (err) {
+      // TODO: Handle error
+      // eslint-disable-next-line no-console
+      console.error(err);
+    }
+  }
+
+  async sendArweaveFeeTx(records: any): Promise<string> {
+    logTrackerEvent(this, 'ISCNCreate', 'SendArFeeTx', '', 1);
+    if (this.sentArweaveTransactionHashes.has(records.ipfsHash)) {
+      const transactionHash = this.sentArweaveTransactionHashes.get(records.ipfsHash);
+      if (transactionHash) {
+        return transactionHash;
+      }
+    }
+    await this.initIfNecessary()
+    if (!this.signer) throw new Error('SIGNER_NOT_INITED');
+    if (!this.arweaveFeeTargetAddress) throw new Error('TARGET_ADDRESS_NOT_SET');
+    this.uploadStatus = 'signing';
+    const memo = JSON.stringify({ ipfs: records.ipfsHash, fileSize: records.fileBlob?.size || 0 });
+    try {
+      const { transactionHash } = await sendLIKE(this.address, this.arweaveFeeTargetAddress, this.arweaveFee.toFixed(), this.signer, memo);
+      if (transactionHash) {
+        this.sentArweaveTransactionHashes.set(records.ipfsHash, transactionHash);
+        return transactionHash;
+      }
+    } catch (err) {
+      this.signDialogError = (err as Error).toString()
+      // TODO: Handle error
+      // eslint-disable-next-line no-console
+      console.error(err);
+    } finally {
+      this.uploadStatus = '';
+    }
+    return '';
+  }
+
+  async submitToArweave(records: any): Promise<void> {
+    const tempRecord = {...records}
+    logTrackerEvent(this, 'ISCNCreate', 'SubmitToArweave', '', 1);
+    if (!tempRecord.fileBlob) return;
+      this.isOpenSignDialog = true;
+      this.onOpenKeplr();
+      tempRecord.transactionHash = this.sentArweaveTransactionHashes.get(tempRecord.ipfsHash)
+    if (!tempRecord.transactionHash) {
+     tempRecord.transactionHash = await this.sendArweaveFeeTx(tempRecord);
+    }
+
+    try {
+      const arrayBuffer = await tempRecord.fileBlob.arrayBuffer();
+      const buffer = Buffer.from(arrayBuffer);
+      const arweaveId = await uploadSingleFileToBundlr(buffer, {
+        fileSize: tempRecord.fileBlob?.size || 0,
+        ipfsHash: tempRecord.ipfsHash,
+        fileType: tempRecord.fileType as string,
+        txHash: tempRecord.transactionHash,
+      });
+      if (arweaveId) {
+        this.uploadArweaveIdList.push(arweaveId)
+        this.$emit('arweaveUploaded', { arweaveId })
+        this.isOpenSignDialog = false
+      } else {
+        this.shouldShowAlert = true
+        this.errorMessage = this.$t('IscnRegisterForm.error.arweave') as string
+        this.$emit('handleContinue')
+      }
+    } catch (err) {
+      // TODO: Handle error
+      // eslint-disable-next-line no-console
+      console.error(err)
+      this.shouldShowAlert = true
+      this.errorMessage = (err as Error).toString()
+    }
+  }
+
+  async onSubmit() {
+    if (IS_CHAIN_UPGRADING) return
+    logTrackerEvent(this, 'ISCNCreate', 'ClickUpload', '', 1);
+    this.uploadStatus = 'uploading'
+    this.$emit('handleSubmit')
+    this.error = ''
+    this.signDialogError = ''
+
+    const [balance] = await Promise.all([getAccountBalance(this.address)])
+    this.balance = new BigNumber(balance);
+    if (this.balance.lt(this.arweaveFee)) {
+      this.error = 'INSUFFICIENT_BALANCE'
+      this.isOpenWarningSnackbar = true
+      this.uploadStatus = ''
+      return
+    }
+    if (!this.fileRecords.some(file => file.fileBlob)) {
+      this.error = 'NO_FILE_TO_UPLOAD'
+      this.isOpenWarningSnackbar = true
+      this.uploadStatus = ''
+      return
+    }
+
+    try {
+      this.uploadStatus = 'uploading';
+      // eslint-disable-next-line no-restricted-syntax
+      for (const record of this.fileRecords) {
+        // eslint-disable-next-line no-await-in-loop
+        await this.submitToArweave(record);
+      }
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error(error)
+    } finally {
+      this.uploadStatus = '';
+    }
+
+    this.$emit('submit', { fileRecords: this.fileRecords, arweaveIds: this.uploadArweaveIdList })
+  }
+
+  handleSignDialogClose() {
+    logTrackerEvent(this, 'ISCNCreate', 'CloseSignDialog', '', 1);
+    this.isOpenSignDialog = false
+  }
 }
 </script>
diff --git a/components/SameAsFieldList.vue b/components/SameAsFieldList.vue
index aeedeaf3..ce882d65 100644
--- a/components/SameAsFieldList.vue
+++ b/components/SameAsFieldList.vue
@@ -33,7 +33,6 @@
         </div>
       </div>
       <div
-        v-if="sameAsList.length > 1"
         class="self-end flex-shrink ml-auto cursor-pointer"
         @click="deleteField(i)"
       >
diff --git a/locales/en.json b/locales/en.json
index 50e5bc5f..8eed747d 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -182,7 +182,7 @@
   "IscnRegisterForm.button.signing": "Waiting for signature",
   "IscnRegisterForm.button.success": "Success",
   "IscnRegisterForm.button.upload": "Upload",
-  "IscnRegisterForm.button.uploading": "Uploading",
+  "IscnRegisterForm.button.uploading": "Uploading files to Arweave....",
   "IscnRegisterForm.button.uploadOnly": "Switch to upload only mode",
   "IscnRegisterForm.button.whitelist": "Apply for Whitelist",
   "IscnRegisterForm.error.arweave": "Oops. Unable to upload to Arweave. Please try again later.",
diff --git a/pages/new/index.vue b/pages/new/index.vue
index f592ea60..c72946b7 100644
--- a/pages/new/index.vue
+++ b/pages/new/index.vue
@@ -32,19 +32,19 @@
       v-if="state === 'init'"
       :step="step"
       @submit="onSubmitUpload"
+      @arweaveUploaded="onArweaveIdUpload"
+      @handleSubmit="isSubmit = true"
     />
     <IscnRegisterForm
       v-else-if="state === 'iscn'"
       :file-records="formattedFileRecords"
 
       :ipfs-hash="urlIpfsHash"
-      :arweave-id="arweaveId"
+      :arweave-id="urlArweaveId"
+      :upload-arweave-list=uploadArweaveList
 
-      :is-upload-only="isUploadOnly"
       :step="step"
-      @arweaveUploaded="onArweaveIdUpdate"
       @txBroadcasted="onISCNTxInfo"
-      @fileUploaded="fileUploaded"
       @handleSubmit="isSubmit = true"
       @handleQuit="isSubmit = false"
     />
@@ -118,8 +118,8 @@ export default class NewIndexPage extends Vue {
 
   state = 'init'
   urlIpfsHash = this.$route.query.ipfs_hash || ''
-  arweaveId = this.$route.query.arweave_id || ''
-  isUploadOnly = this.$route.query.upload_only === '1'
+  urlArweaveId = this.$route.query.arweave_id || ''
+  uploadArweaveList: any[] = []
   fileSHA256 = ''
   fileData = ''
   fileType = ''
@@ -167,17 +167,17 @@ export default class NewIndexPage extends Vue {
   }
 
   async mounted() {
-    if ((this.urlIpfsHash || this.arweaveId) && this.shouldSkipToMintNFT) {
+    if ((this.urlIpfsHash || this.urlArweaveId) && this.shouldSkipToMintNFT) {
       this.state = 'iscn';
       let url;
-      if (this.arweaveId) url = `https://arweave.net/${this.arweaveId}`;
+      if (this.urlArweaveId) url = `https://arweave.net/${this.urlArweaveId}`;
       else if (this.urlIpfsHash) url = `https://ipfs.io/ipfs/${this.urlIpfsHash}`;
       if (url) {
         const { data, headers } = await this.$axios.get(url, { responseType: 'blob' })
         this.urlFileRecords = [{
           fileBlob: data as Blob,
           ipfsHash: this.urlIpfsHash,
-          arweaveId: this.arweaveId,
+          arweaveId: this.urlArweaveId,
           isFileImage:  headers['content-type'].startsWith('image'),
           fileType: headers['content-type'],
           fileSize: headers['content-length'],
@@ -187,16 +187,24 @@ export default class NewIndexPage extends Vue {
     }
   }
 
-  onSubmitUpload(fileRecords: any[] | []) {
+  onSubmitUpload({
+    fileRecords,
+    arweaveIds,
+  }: {
+    fileRecords: any[] | []
+    arweaveIds: any[] | []
+  }) {
     if (fileRecords && fileRecords.length) {
       this.uploadFileRecords = [...fileRecords]
     }
+    if (arweaveIds && arweaveIds.length) {
+      this.uploadArweaveList = [...arweaveIds]
+    }
     this.state = 'iscn'
-    logTrackerEvent(this, 'ISCNCreate', 'ISCNConfirmFile', '', 1);
+    logTrackerEvent(this, 'ISCNCreate', 'ISCNConfirmFile', '', 1)
   }
 
-  onArweaveIdUpdate({ arweaveId }: { arweaveId: string }) {
-    this.arweaveId = arweaveId
+  onArweaveIdUpload({ arweaveId }: { arweaveId: string }) {
     logTrackerEvent(this, 'ISCNCreate', 'ISCNFileUploadToARSuccess', arweaveId, 1);
   }
 
@@ -233,7 +241,7 @@ export default class NewIndexPage extends Vue {
   handleCreateAnotherButtonClick() {
     this.state = 'init'
     this.urlIpfsHash = ''
-    this.arweaveId = ''
+    this.urlArweaveId = ''
     this.fileSHA256 = ''
     this.fileData = ''
     this.fileType = ''