Skip to content

Commit

Permalink
NFT: change description modal
Browse files Browse the repository at this point in the history
  • Loading branch information
tempe-techie committed Oct 2, 2023
1 parent 4fdf143 commit 5e5fb53
Show file tree
Hide file tree
Showing 8 changed files with 207 additions and 29 deletions.
19 changes: 13 additions & 6 deletions components/nft/collection/ChangeCollectionPreviewModal.vue
Original file line number Diff line number Diff line change
Expand Up @@ -4,20 +4,20 @@
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="changeCollectionPreviewModalLabel">Change Collection Preview Image</h1>
<button id="closeChangeCollectionPreviewModal" type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<button :id="'closeModal-'+componentId" type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>

<div class="modal-body">
<p>Change your collection preview image.</p>

<div class="mt-4">
<label for="collectionImageInput" class="form-label">
<label :for="'input-'+componentId" class="form-label">
<strong>
Enter new preview image URL:
</strong>
</label>

<input v-model="editImageUrl" type="text" class="form-control" id="collectionImageInput">
<input v-model="editImageUrl" type="text" class="form-control" :id="'input-'+componentId">
</div>

</div>
Expand All @@ -43,16 +43,21 @@ import WaitingToast from "~/components/WaitingToast";
export default {
name: 'ChangeCollectionPreviewModal',
props: ["cAddress", "cType", "mdAddress"],
props: ["cAddress", "mdAddress"],
emits: ["saveCollection"],
data() {
return {
componentId: null,
editImageUrl: null,
waiting: false
}
},
mounted() {
this.componentId = this.$.uid;
},
methods: {
async updateImage() {
this.waiting = true;
Expand Down Expand Up @@ -89,12 +94,14 @@ export default {
onClick: () => window.open(this.$config.blockExplorerBaseUrl+"/tx/"+tx.hash, '_blank').focus()
});
this.$emit("saveCollection", this.cType, this.editImageUrl);
this.$emit("saveCollection", {
image: this.editImageUrl
});
this.editImageUrl = null;
// close the modal
document.getElementById('closeChangeCollectionPreviewModal').click();
document.getElementById('closeModal-'+this.componentId).click();
this.waiting = false;
} else {
Expand Down
152 changes: 152 additions & 0 deletions components/nft/collection/ChangeDescriptionModal.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,152 @@
<template>
<div class="modal fade" id="changeDescriptionModal" tabindex="-1" aria-labelledby="changeDescriptionModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="changeDescriptionModalLabel">Change description</h1>
<button :id="'closeModal-'+componentId" type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>

<div class="modal-body">
<p>Change your collection description.</p>

<div class="mt-4">
<label :for="'input-'+componentId" class="form-label">
<strong>
Enter new description:
</strong>
</label>

<input v-model="editDescription" type="text" class="form-control" :id="'input-'+componentId">
</div>

</div>

<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>

<button @click="update" type="button" class="btn btn-primary" :disabled="!editDescription || waiting">
<span v-if="waiting" class="spinner-border spinner-border-sm mx-1" role="status" aria-hidden="true"></span>
Submit
</button>
</div>
</div>
</div>
</div>
</template>

<script>
import { ethers } from 'ethers';
import { useEthers } from 'vue-dapp';
import { useToast } from "vue-toastification/dist/index.mjs";
import WaitingToast from "~/components/WaitingToast";
export default {
name: 'ChangeDescriptionModal',
props: ["cAddress", "cDescription", "mdAddress"],
emits: ["saveCollection"],
data() {
return {
componentId: null,
editDescription: null,
waiting: false
}
},
mounted() {
this.componentId = this.$.uid;
this.editDescription = this.cDescription;
},
methods: {
async update() {
this.waiting = true;
const metadataInterface = new ethers.utils.Interface([
"function setDescription(address nftAddress_, string memory description_) external"
]);
const metadataContract = new ethers.Contract(this.mdAddress, metadataInterface, this.signer);
try {
const tx = await metadataContract.setDescription(this.cAddress, this.editDescription);
const toastWait = this.toast(
{
component: WaitingToast,
props: {
text: "Please wait for your transaction to confirm. Click on this notification to see transaction in the block explorer."
}
},
{
type: "info",
onClick: () => window.open(this.$config.blockExplorerBaseUrl+"/tx/"+tx.hash, '_blank').focus()
}
);
const receipt = await tx.wait();
if (receipt.status === 1) {
this.toast.dismiss(toastWait);
this.toast("You have updated the NFT description.", {
type: "success",
onClick: () => window.open(this.$config.blockExplorerBaseUrl+"/tx/"+tx.hash, '_blank').focus()
});
this.$emit("saveCollection", {
description: this.editDescription
});
this.editDescription = null;
// close the modal
document.getElementById('closeModal-'+this.componentId).click();
this.waiting = false;
} else {
this.toast.dismiss(toastWait);
this.waiting = false;
this.toast("Transaction has failed.", {
type: "error",
onClick: () => window.open(this.$config.blockExplorerBaseUrl+"/tx/"+tx.hash, '_blank').focus()
});
console.log(receipt);
}
} catch (e) {
console.error(e);
try {
let extractMessage = e.message.split("reason=")[1];
extractMessage = extractMessage.split(", method=")[0];
extractMessage = extractMessage.replace('"', "");
extractMessage = extractMessage.replace('"', "");
extractMessage = extractMessage.replace('execution reverted:', "Error:");
console.log(extractMessage);
this.toast(extractMessage, {type: "error"});
} catch (e) {
this.toast("Transaction has failed.", {type: "error"});
}
this.waiting = false;
}
},
},
setup() {
const { signer } = useEthers();
const toast = useToast();
return { signer, toast };
},
watch: {
cDescription() {
this.editDescription = this.cDescription;
}
}
}
</script>
18 changes: 12 additions & 6 deletions components/nft/collection/ChangeNftTypeModal.vue
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="changeNftTypeModalLabel">Change NFT Type</h1>
<button id="closeChangeNftTypeModal" type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<button :id="'closeModal-'+componentId" type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>

<div class="modal-body">
Expand Down Expand Up @@ -104,7 +104,7 @@ export default {
data() {
return {
typeChoice: 0, // 0 = static image URL, 1 = static metadata URL, 2 = generative metadata URL, 3 = generative metadata URL without .json extension
componentId: null,
editImageMetadataUrl: null,
editImageOptions: [
{ description: "0) Onchain image(s)" },
Expand All @@ -113,10 +113,15 @@ export default {
{ description: "3) Generative metadata" }
],
editImagePreviewUrl: "", // important: should be empty string, not null
typeChoice: 0, // 0 = static image URL, 1 = static metadata URL, 2 = generative metadata URL, 3 = generative metadata URL without .json extension
waitingMetadata: false
}
},
mounted() {
this.componentId = this.$.uid;
},
methods: {
async updateMetadata() {
this.waitingMetadata = true;
Expand Down Expand Up @@ -166,15 +171,16 @@ export default {
onClick: () => window.open(this.$config.blockExplorerBaseUrl+"/tx/"+tx.hash, '_blank').focus()
});
if (this.editImagePreviewUrl) {
this.$emit("saveCollection", this.typeChoice, this.editImagePreviewUrl);
}
this.$emit("saveCollection", {
type: this.typeChoice,
image: this.editImagePreviewUrl
});
this.editImageMetadataUrl = null;
this.editImagePreviewUrl = ""; // important: should be empty string, not null
// close the modal
document.getElementById('closeChangeNftTypeModal').click();
document.getElementById('closeModal-'+componentId).click();
this.waitingMetadata = false;
} else {
Expand Down
39 changes: 26 additions & 13 deletions pages/nft/collection.vue
Original file line number Diff line number Diff line change
Expand Up @@ -36,21 +36,27 @@
</button>
<ul class="dropdown-menu">

<li v-if="isCurrentAddressOwner && cType == 0">
<span class="dropdown-item cursor-pointer" data-bs-toggle="modal" data-bs-target="#addImageToCollectionModal">
Add new image to collection
<li v-if="isCurrentAddressOwner">
<span class="dropdown-item cursor-pointer" data-bs-toggle="modal" data-bs-target="#changeDescriptionModal">
Change description
</span>
</li>

<li v-if="isCurrentAddressOwner">
<span class="dropdown-item cursor-pointer" data-bs-toggle="modal" data-bs-target="#changeCollectionPreviewModal">
Change Collection Preview Image
Change collection preview image
</span>
</li>

<li v-if="isCurrentAddressOwner && cType == 0">
<span class="dropdown-item cursor-pointer" data-bs-toggle="modal" data-bs-target="#addImageToCollectionModal">
Add new image to collection
</span>
</li>

<li v-if="isCurrentAddressOwner">
<span class="dropdown-item cursor-pointer" data-bs-toggle="modal" data-bs-target="#changeNftTypeModal">
Change Collection Type
Change collection type
</span>
</li>

Expand Down Expand Up @@ -169,7 +175,10 @@
/>

<!-- Change collection preview image modal -->
<ChangeCollectionPreviewModal :cAddress="cAddress" :cType="cType" :mdAddress="mdAddress" @saveCollection="saveCollection" />
<ChangeCollectionPreviewModal :cAddress="cAddress" :mdAddress="mdAddress" @saveCollection="saveCollection" />

<!-- Change description modal -->
<ChangeDescriptionModal :cAddress="cAddress" :cDescription="cDescription" :mdAddress="mdAddress" @saveCollection="saveCollection" />

<!-- Change Metadata URL Modal -->
<ChangeNftTypeModal :mdAddress="mdAddress" :cType="cType" :cAddress="cAddress" @saveCollection="saveCollection" />
Expand All @@ -183,6 +192,7 @@ import ChatFeed from "~/components/chat/ChatFeed.vue";
import ConnectWalletButton from "~/components/ConnectWalletButton.vue";
import WaitingToast from "~/components/WaitingToast";
import ChangeCollectionPreviewModal from "~/components/nft/collection/ChangeCollectionPreviewModal";
import ChangeDescriptionModal from "~/components/nft/collection/ChangeDescriptionModal";
import ChangeNftTypeModal from "~/components/nft/collection/ChangeNftTypeModal";
import { getDomainName } from '~/utils/domainUtils';
import { fetchCollection, fetchUsername, storeCollection, storeUsername } from '~/utils/storageUtils';
Expand Down Expand Up @@ -213,6 +223,7 @@ export default {
components: {
ChangeCollectionPreviewModal,
ChangeDescriptionModal,
ChangeNftTypeModal,
ChatFeed,
ConnectWalletButton,
Expand Down Expand Up @@ -447,15 +458,13 @@ export default {
this.cDescription = collection.description;
} else {
this.cDescription = await metadataContract.getCollectionDescription(this.cAddress);
console.log("Collection description:", this.cDescription);
}
// get type
if (collection?.type >= 0) {
this.cType = collection.type;
} else {
this.cType = Number(await metadataContract.getCollectionMetadataType(this.cAddress));
console.log("Collection type 2:", this.cType);
}
// get name
Expand Down Expand Up @@ -505,14 +514,18 @@ export default {
storeCollection(window, this.cAddress, collection);
},
saveCollection(nftType, editImagePreviewUrl) {
saveCollection(newCollectionData) {
if (newCollectionData?.type) {
this.cType = newCollectionData.type;
}
if (nftType !== null) {
this.cType = nftType;
if (newCollectionData?.description) {
this.cDescription = newCollectionData.description;
}
if (editImagePreviewUrl) {
this.cImage = editImagePreviewUrl;
if (newCollectionData?.image) {
this.cImage = newCollectionData.image;
}
// create collection object, JSON.stringify it and save it to session storage
Expand Down
2 changes: 1 addition & 1 deletion pages/notifications.vue
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@

<script>
import { useNotificationsStore } from '~/store/notifications';
import OrbisNotification from '~~/components/notifications/OrbisNotification.vue';
import OrbisNotification from '~/components/notifications/OrbisNotification.vue';
import { useToast } from "vue-toastification/dist/index.mjs";
export default {
Expand Down
2 changes: 1 addition & 1 deletion pages/send-tokens.vue
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@

<script>
import tokens from '~/assets/data/tokens.json';
import SendTokensComponent from '~~/components/send-tokens/SendTokensComponent.vue';
import SendTokensComponent from '~/components/send-tokens/SendTokensComponent.vue';
export default {
name: 'SendTokens',
Expand Down
Loading

1 comment on commit 5e5fb53

@vercel
Copy link

@vercel vercel bot commented on 5e5fb53 Oct 2, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.