Skip to content

Commit

Permalink
✨ Add upload only mode (#385)
Browse files Browse the repository at this point in the history 
* ✨ Add upload only mode

* 🎨 Fix indentation and remove unused slot
  • Loading branch information
@williamchong
williamchong committed Sep 15, 2023
1 parent 3a92db9 commit 9e843e9
Show file tree
Hide file tree
Showing 4 changed files with 204 additions and 46 deletions.
60 changes: 60 additions & 0 deletions components/FileUploadedInfo.vue
View file
Original file line number Diff line number Diff line change
@@ -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>
105 changes: 91 additions & 14 deletions components/IscnRegisterForm.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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]"
/>
Expand Down Expand Up @@ -39,7 +43,7 @@
]"
>
<div
v-if="uploadStatus === 'Loading'"
v-if="uploadStatus === 'loading'"
:class="[
'flex',
'items-center',
Expand Down Expand Up @@ -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]"
>
Expand Down Expand Up @@ -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"
>
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -640,6 +685,8 @@ export default class IscnRegisterForm extends Vue {
isChecked = false
charactersLimit = CharactersLimit
showUploadOnly = this.isUploadOnly
get tagsString(): string {
return this.tags.join(',')
}
Expand Down Expand Up @@ -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()
Expand Down Expand Up @@ -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()
Expand Down Expand Up @@ -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) {
Expand Down
12 changes: 9 additions & 3 deletions locales/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand All @@ -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",
Expand Down Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand Down Expand Up @@ -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",
Expand Down
Loading

0 comments on commit 9e843e9

Please sign in to comment.