From 9e843e94b8811327571efb0dcb91df06371b92c4 Mon Sep 17 00:00:00 2001
From: William Chong <6198816+williamchong@users.noreply.github.com>
Date: Fri, 15 Sep 2023 03:24:38 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20upload=20only=20mode=20(#385)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* ✨ Add upload only mode

* 🎨 Fix indentation and remove unused slot
---
 components/FileUploadedInfo.vue |  60 ++++++++++++++++++
 components/IscnRegisterForm.vue | 105 +++++++++++++++++++++++++++-----
 locales/en.json                 |  12 +++-
 pages/new/index.vue             |  73 +++++++++++++---------
 4 files changed, 204 insertions(+), 46 deletions(-)
 create mode 100644 components/FileUploadedInfo.vue

diff --git a/components/FileUploadedInfo.vue b/components/FileUploadedInfo.vue
new file mode 100644
index 00000000..48572dfd
--- /dev/null
+++ b/components/FileUploadedInfo.vue
@@ -0,0 +1,60 @@
+<template>
+  <Card
+    :class="[
+      'p-[32px]',
+      'border-[2px]',
+      'border-like-cyan',
+    ]"
+    :has-padding="false"
+  >
+    <!-- header -->
+    <IscnFormHeader :step="step" :total-step="4"/>
+    <!-- guide title -->
+    <Label
+      :text="$t('FileUploaded.guide.title')"
+      class="text-medium-gray mt-[12px] mb-[28px]"
+    />
+
+    <Divider class="mb-[12px]" />
+
+    <FormField
+      v-if="ipfsHash"
+      :label="$t('iscn.meta.ipfsHash')"
+      content-type="strong"
+      class="mb-[12px]"
+    >
+      <a
+        :href="`https://ipfs.io/ipfs/${ipfsHash}`"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        {{ ipfsHash }}
+      </a>
+    </FormField>
+    <FormField
+      v-if="arweaveId"
+      :label="$t('iscn.meta.arweaveId')"
+      content-type="strong"
+      class="mb-[12px]"
+    >
+      <a
+        :href="`https://arweave.net/${arweaveId}`"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        {{ arweaveId }}
+      </a>
+    </FormField>
+  </Card>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop } from 'vue-property-decorator'
+
+@Component
+export default class FileUploadedInfo extends Vue {
+  @Prop(String) readonly ipfsHash!: string
+  @Prop(String) readonly arweaveId!: string
+  @Prop(Number) readonly step: number | undefined
+}
+</script>
diff --git a/components/IscnRegisterForm.vue b/components/IscnRegisterForm.vue
index 9e4b639b..d8d596b3 100644
--- a/components/IscnRegisterForm.vue
+++ b/components/IscnRegisterForm.vue
@@ -9,7 +9,11 @@
       <!-- header -->
       <IscnFormHeader :step="step" :total-step="4" />
       <!-- guide text -->
-      <Label
+      <Label v-if="showUploadOnly"
+        :text="$t('IscnRegisterForm.guide.uploadOnly')"
+        class="text-medium-gray my-[12px]"
+      />
+      <Label v-else
         :text="$t('IscnRegisterForm.guide.review')"
         class="text-medium-gray my-[12px]"
       />
@@ -39,7 +43,7 @@
             ]"
           >
             <div
-              v-if="uploadStatus === 'Loading'"
+              v-if="uploadStatus === 'loading'"
               :class="[
                 'flex',
                 'items-center',
@@ -118,7 +122,7 @@
       </FormField>
       <!-- Numbers Protocol -->
       <FormField
-        v-if="isPhoto || isImage"
+        v-if="!showUploadOnly && (isPhoto || isImage)"
         :label="$t('IscnRegisterForm.label.numbersProtocol')"
         class="mb-[12px]"
       >
@@ -149,9 +153,35 @@
           :all-exif="exifInfo"
         />
       </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"
     >
@@ -279,7 +309,7 @@
           </FormField>
           <div class="flex flex-row justify-end pt-[24px] text-medium-gray">
             <Label :text="formattedRegisterFee" class="mx-[24px]" />
-            <div v-if="uploadStatus === 'Loading'">
+            <div v-if="uploadStatus === 'loading'">
               <Button
                 :text="$t('IscnRegisterForm.button.loading')"
                 preset="outline"
@@ -308,16 +338,30 @@
                 {{ formattedUploadStatus }}
               </div>
             </div>
-            <Button
-              v-else
-              :text="$t('IscnRegisterForm.button.register')"
-              type="submit"
-              preset="secondary"
+            <div v-else
+              :class="[
+                'flex',
+                'flex',
+                'items-end',
+                'gap-[12px]',
+              ]"
             >
-              <template #append>
-                <IconArrowRight />
-              </template>
-            </Button>
+              <Button
+                  v-if="!uploadStatus"
+                  preset="outline"
+                  :text="$t('IscnRegisterForm.button.uploadOnly')"
+                  @click="showUploadOnly = true"
+              />
+              <Button
+                :text="$t('IscnRegisterForm.button.register')"
+                type="submit"
+                preset="secondary"
+              >
+                <template #append>
+                  <IconArrowRight />
+                </template>
+              </Button>
+            </div>
           </div>
         </form>
       </div>
@@ -585,6 +629,7 @@ export default class IscnRegisterForm extends Vue {
   @Prop({ default: null }) readonly fileSize: string | null | undefined
   @Prop(String) readonly fileSHA256!: string
   @Prop({ default: false }) readonly isIPFSLink!: boolean
+  @Prop({ default: false }) readonly isUploadOnly!: boolean
   @Prop(String) readonly ipfsHash!: string
   @Prop(String) readonly arweaveId!: string
   @Prop(Number) readonly step: number | undefined
@@ -640,6 +685,8 @@ export default class IscnRegisterForm extends Vue {
   isChecked = false
   charactersLimit = CharactersLimit
 
+  showUploadOnly = this.isUploadOnly
+
   get tagsString(): string {
     return this.tags.join(',')
   }
@@ -840,7 +887,7 @@ export default class IscnRegisterForm extends Vue {
   }
 
   async mounted() {
-    this.uploadStatus = 'Loading'
+    this.uploadStatus = 'loading'
     await this.estimateArweaveFee();
     // ISCN Fee needs Arweave fee to calculate
     await this.calculateISCNFee()
@@ -1020,6 +1067,33 @@ export default class IscnRegisterForm extends Vue {
     return undefined
   }
 
+  async onUploadOnly(): Promise<void> {
+    logTrackerEvent(this, 'ISCNCreate', 'ClickUpload', '', 1);
+    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.fileBlob) {
+      this.error = 'NO_FILE_TO_UPLOAD'
+      this.isOpenWarningSnackbar = true
+      this.uploadStatus = ''
+      return
+    }
+    await this.submitToArweave();
+    if (this.uploadArweaveId) {
+      this.$emit('fileUploaded', {
+        ipfsHash: this.ipfsHash,
+        arweaveId: this.uploadArweaveId,
+      })
+    }
+  }
+
   async onSubmit(): Promise<void> {
     logTrackerEvent(this, 'ISCNCreate', 'ClickSubmit', '', 1);
     await this.getLikerIdsAddresses()
@@ -1057,6 +1131,9 @@ export default class IscnRegisterForm extends Vue {
         },
       );
       this.uploadArweaveId = arweaveId;
+      if (arweaveId) {
+        this.$emit('arweaveUploaded', { arweaveId })
+      }
       if (LIKE) this.arweaveFee = new BigNumber(LIKE);
       this.arweaveFeeTargetAddress = address;
     } catch (err) {
diff --git a/locales/en.json b/locales/en.json
index 3cfc9aa4..2328eead 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -96,6 +96,7 @@
   "error.not.support.browser.header": "Browser not supported",
   "error.not.support.browser": "Keplr wallet is a browser extension supporting only Chrome and Brave browser on a desktop. You may consider revisiting this link by Chrome or Brave browser, or login by Mobile Wallet Connect via {LikerLandApp}.",
   "error.not.support.browser.app": "Liker Land App",
+  "FileUploaded.guide.title": "Upload only mode. Files uploaded",
   "general.closeWindow": "Close Window",
   "general.loading": "Loading",
   "HomePage.button.faucet": "Faucet",
@@ -129,6 +130,7 @@
   "iscn.exif.label.lens": "Lens",
   "iscn.exif.label.size": "Size",
   "iscn.meta.author.name": "Author",
+  "iscn.meta.arweaveId": "Arweave ID",
   "iscn.meta.card.preview": "File Preview",
   "iscn.meta.card.title": "File Info",
   "iscn.meta.content.fingerprints": "Content Fingerprints",
@@ -143,6 +145,7 @@
   "iscn.meta.id": "ISCN ID",
   "iscn.meta.keywords.placeholder": "Keywords (seperate by ,)",
   "iscn.meta.keywords": "Keywords",
+  "iscn.meta.ipfsHash": "IPFS Hash",
   "iscn.meta.license.placeholder": "License URL",
   "iscn.meta.license": "License",
   "iscn.meta.metadata.title": "ISCN Metadata",
@@ -174,11 +177,13 @@
   "IscnRegisterForm.arweave.link": "ar://{arweaveId}",
   "IscnRegisterForm.button.back": "Back",
   "IscnRegisterForm.button.confirm": "Confirm",
-  "IscnRegisterForm.button.loading": "File Uploading...",
+  "IscnRegisterForm.button.loading": "Loading files...",
   "IscnRegisterForm.button.register": "Register",
   "IscnRegisterForm.button.signing": "Waiting for signature",
   "IscnRegisterForm.button.success": "Success",
+  "IscnRegisterForm.button.upload": "Upload",
   "IscnRegisterForm.button.uploading": "Uploading",
+  "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.",
   "IscnRegisterForm.error.authorNameIsEmpty": "Please enter the author name",
@@ -194,6 +199,7 @@
   "IscnRegisterForm.error.notWhitelisted.title": "Whitelist Required",
   "IscnRegisterForm.error.notWhitelisted": "Thank you for your interest in Writing NFT. Unfortunately, minting is currently only available to whitelisted users.\nIf you would like to apply for Writing NFT whitelist access, please click the 'Apply for Whitelist' button below.",
   "IscnRegisterForm.error.walletConnect": "Wallet Connect is temporarily unavailable for minting. Please try the other signing methods",
+  "IscnRegisterForm.guide.uploadOnly": "Upload only mode without ISCN",
   "IscnRegisterForm.guide.review": "Review and edit metadata",
   "IscnRegisterForm.ipfs.link": "ipfs://{hash}",
   "IscnRegisterForm.label.author": "Author",
@@ -210,7 +216,7 @@
   "IscnRegisterForm.label.numbersProtocol.details.link": "Numbers Protocol",
   "IscnRegisterForm.label.registrant": "Registrant",
   "IscnRegisterForm.label.tags": "Tags",
-  "IscnRegisterForm.label.uploading": "File uploading...",
+  "IscnRegisterForm.label.uploading": "Loading files...",
   "IscnRegisterForm.label.url": "URL",
   "IscnRegisterForm.label.wallet": "Wallet Address",
   "IscnRegisterForm.placeholder.description": "Description",
@@ -239,7 +245,7 @@
   "IscnRegisterForm.warning.shortage": "Should be more than {least} characters",
   "IscnUploaded.button.new": "Register Another ISCN",
   "IscnUploaded.guide.title": "Completed! Here is your ISCN",
-  "IscnUploaded.title": "ISCN Registed",
+  "IscnUploaded.title": "ISCN Registerd",
   "NFTPortal.attention.openApp": "You have connected with WalletConnect. Please approve the transaction in Liker Land app.",
   "NFTPortal.button.create": "Create",
   "NFTPortal.button.collect": "Collect Now",
diff --git a/pages/new/index.vue b/pages/new/index.vue
index ea623599..e361c055 100644
--- a/pages/new/index.vue
+++ b/pages/new/index.vue
@@ -43,45 +43,55 @@
       :file-s-h-a256="fileSHA256"
       :file-blob="fileBlob"
       :is-image="isImage"
+      :is-upload-only="isUploadOnly"
       :exif-info="exifInfo"
       :step="step"
       @arweaveUploaded="onArweaveIdUpdate"
       @txBroadcasted="onISCNTxInfo"
+      @fileUploaded="onFileOnlyUpload"
       @handleSubmit="isSubmit = true"
       @handleQuit="isSubmit = false"
     />
-    <IscnUploadedInfo
-      v-else-if="state === 'done'"
-      :owner="currentAddress"
-      :iscn-id="iscnId"
-      :iscn-hash="iscnTxHash"
-      :record="record"
-      :exif-info="exifInfo"
-      :step="step"
-    >
-      <template #card-footer>
-        <div
-          :class="[
-            'flex',
-            'justify-center',
-          ]"
-        >
-          <Button
+    <template v-else-if="state === 'done'">
+      <IscnUploadedInfo
+        v-if="iscnId"
+        :owner="currentAddress"
+        :iscn-id="iscnId"
+        :iscn-hash="iscnTxHash"
+        :record="record"
+        :exif-info="exifInfo"
+        :step="step"
+      >
+        <template #card-footer>
+          <div
             :class="[
-              'mt-[16px]',
-              'mb-[28px]',
+              'flex',
+              'justify-center',
             ]"
-            preset="secondary"
-            :text="$t('IscnUploaded.button.new')"
-            @click="handleCreateAnotherButtonClick"
           >
-            <template #prepend>
-              <IconAddToISCN class="w-[20px]" />
-            </template>
-          </Button>
-        </div>
-      </template>
-    </IscnUploadedInfo>
+            <Button
+              :class="[
+                'mt-[16px]',
+                'mb-[28px]',
+              ]"
+              preset="secondary"
+              :text="$t('IscnUploaded.button.new')"
+              @click="handleCreateAnotherButtonClick"
+            >
+              <template #prepend>
+                <IconAddToISCN class="w-[20px]" />
+              </template>
+            </Button>
+          </div>
+        </template>
+      </IscnUploadedInfo>
+      <FileUploadedInfo
+        v-else
+        :ipfs-hash="ipfsHash"
+        :arweave-id="arweaveId"
+        :step="step"
+      />
+    </template>
   </Page>
 </template>
 
@@ -113,6 +123,7 @@ export default class NewIndexPage extends Vue {
   state = 'init'
   ipfsHash = this.$route.query.ipfs_hash || ''
   arweaveId = this.$route.query.arweave_id || ''
+  isUploadOnly = this.$route.query.upload_only === '1'
   fileSHA256 = ''
   fileData = ''
   fileType = ''
@@ -202,6 +213,10 @@ export default class NewIndexPage extends Vue {
     logTrackerEvent(this, 'ISCNCreate', 'ISCNFileUploadToARSuccess', arweaveId, 1);
   }
 
+  onFileOnlyUpload() {
+    this.state = 'done'
+  }
+
   async onISCNTxInfo({
     txHash,
     iscnId,