spheron replaced with thirdweb

.env.example

@@ -4,6 +4,5 @@ IMAGEKIT_PUBLIC_KEY=
 IMAGEKIT_PRIVATE_KEY=
 LINK_PREVIEW_SERVICE=
 RPC_CUSTOM=
-SPHERON_BUCKET_NAME=
-SPHERON_STORAGE_TOKEN=
-TENOR_KEY=
+TENOR_KEY=
+THIRDWEB_CLIENT_ID=

README.md

@@ -61,22 +61,21 @@ If you want to have GIF search implemented, create your own Tenor API Key on Goo
 
 Then enter the key in environment variables (`TENOR_KEY`).
 
-## Image upload (Spheron/IPFS)
+## Image upload (ThirdWeb/IPFS)
 
-To support image uploads on IPFS please create a key/token on Spheron Storage: https://app.spheron.network/#/storage 
+To support image uploads on IPFS please create an API key on ThirdWeb: https://thirdweb.com/dashboard/settings/api-keys 
 
-Then add this key (and your bucket ID/name) to your environment variables:
+Make sure to whitelist only your website domain/URL. And also restrict (toggle off) the API key usage for other services apart from Storage Upload service (even Storage Download is not needed).
+
+Then add the Client ID of your API key to your environment variables:
 
 ```bash
-SPHERON_BUCKET_NAME=
-SPHERON_STORAGE_TOKEN=
+THIRDWEB_CLIENT_ID=
 ```
 
-Image uploads via Spheron work only if you have Netlify/Vercel background functions enabled (see `netlify/functions/imageUploader.js`).
-
 ## Image upload fallback
 
-It is recommended to use ImageKit as the fallback option, in case Spheron has technical issues.
+It is recommended to use ImageKit as the fallback option, in case ThirdWeb has technical issues.
 
 For this to work, create an account at [ImageKit.io](https://imagekit.io/) and add these environment variables to your project:
 

components/Image.vue

@@ -0,0 +1,81 @@
+<template>
+  <div>
+    <img @load="loading=false" :src="parseImageLink" @error="handleLoadError" :alt="alt" :class="cls" />
+    <div class="d-flex justify-content-center">
+      <span v-if="loading" class="spinner-grow spinner-grow-lg" role="status" aria-hidden="true"></span>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Image",
+  props: ["alt", "cls", "url"],
+
+  data() {
+    return {
+      cid: null,
+      imageUrl: null,
+      loading: true,
+    };
+  },
+
+  mounted() {
+    this.fetchImageData();
+  },
+
+  computed: {
+    parseImageLink() {
+      let parsedImage = this.imageUrl;
+
+      if (parsedImage && parsedImage.includes("ipfs://")) {
+        parsedImage = parsedImage.replace("ipfs://", this.$config.ipfsGateway);
+      }
+
+      return parsedImage;
+    },
+  },
+
+  methods: {
+    fetchImageData() {
+      this.imageUrl = this.url;
+
+      if (this.url) {
+        if (this.url.startsWith(this.$config.ipfsGateway)) {
+          this.cid = this.url.replace(this.$config.ipfsGateway, "");
+        } else if (this.url.startsWith(this.$config.ipfsGateway2)) {
+          this.cid = this.url.replace(this.$config.ipfsGateway2, "");
+        } else if (this.url.startsWith(this.$config.ipfsGateway3)) {
+          this.cid = this.url.replace(this.$config.ipfsGateway3, "");
+        } else if (this.url.startsWith("https://cloudflare-ipfs.com/ipfs/")) {
+          this.cid = this.url.replace("https://cloudflare-ipfs.com/ipfs/", "");
+        } else if (this.url.startsWith("https://ipfs.io/ipfs/")) {
+          this.cid = this.url.replace("https://ipfs.io/ipfs/", "");
+        } else if (this.url.startsWith("ipfs://")) {
+          this.cid = this.url.replace("ipfs://", "");
+        } else if (this.url.startsWith("https://ipfs.itslit.org/ipfs/")) {
+          this.cid = this.url.replace("https://ipfs.itslit.org/ipfs/", "");
+        } else if (this.url.startsWith("https://ipfs.dylmusic.com/ipfs/")) {
+          this.cid = this.url.replace("https://ipfs.dylmusic.com/ipfs/", "");
+        }
+      }
+    },
+
+    handleLoadError() {
+      if (this.cid) {
+        if (this.imageUrl.startsWith(this.$config.ipfsGateway)) {
+          return this.imageUrl = this.$config.ipfsGateway3 + this.cid;
+        } else if (this.imageUrl.startsWith(this.$config.ipfsGateway3)) {
+          return this.imageUrl = this.$config.ipfsGateway2 + this.cid;
+        }
+      }
+
+      this.imageUrl = "https://placeholder.pics/svg/300/8e85e6/ffffff/loading%20error";
+      this.loading = false;
+      return;
+
+    },
+  },
+}
+</script>

components/chat/ChatFeed.vue

@@ -44,6 +44,7 @@
               @processFileUrl="insertImage"
               title="Upload image"
               infoText="Upload an image."
+              storageType="imagekit"
               :componentId="$.uid"
               :maxFileSize="$config.fileUploadSizeLimit"
             />
@@ -384,6 +385,14 @@ export default {
     },
 
     async insertImage(imageUrl) {
+      if (imageUrl.startsWith("ipfs://")) {
+        imageUrl = imageUrl.replace("ipfs://", this.$config.ipfsGateway);
+      }
+      
+      if (imageUrl.endsWith(".JPG") || imageUrl.endsWith(".PNG") || imageUrl.endsWith(".JPEG") || imageUrl.endsWith(".GIF")) {
+        imageUrl = imageUrl.replace(".JPG", ".jpg").replace(".PNG", ".png").replace(".JPEG", ".jpeg").replace(".GIF", ".gif");
+      }
+
       // add image url to postText
       if (!this.postText) {
         this.postText = imageUrl + " ";

components/chat/ChatPost.vue

@@ -58,7 +58,7 @@
 
           <div class="card col-md-6">
             <NuxtLink :to="'/nft/collection?id='+collection.address" class="text-decoration-none text-reset">
-              <img :src="collection?.image" class="card-img-top" />
+              <Image :url="collection?.image" :alt="collection?.name" cls="card-img-top" />
 
               <div class="card-body bg-body rounded-bottom-3 border-end border-bottom border-start">
                 <h5 class="card-title text-break">{{ collection?.name }}</h5>
@@ -175,6 +175,7 @@ import sanitizeHtml from 'sanitize-html';
 import { useEthers, shortenAddress } from 'vue-dapp';
 import { useToast } from "vue-toastification/dist/index.mjs";
 import { useUserStore } from '~/store/user';
+import Image from "~/components/Image.vue";
 import ProfileImage from "~/components/profile/ProfileImage.vue";
 import IggyPostMint from "~/components/minted-posts/IggyPostMint.vue";
 import MintedPostImage from '~/components/minted-posts/MintedPostImage.vue';
@@ -194,6 +195,7 @@ export default {
   components: {
     ChatQuote,
     IggyPostMint,
+    Image,
     MintedPostImage,
     ProfileImage
   },

components/nft/collection/AddImageToCollectionModal.vue

@@ -15,10 +15,10 @@
 
               <FileUploadInput 
                 btnCls="btn btn-primary"
+                storageType="ipfs"
                 :maxFileSize="$config.fileUploadSizeLimit" 
                 @processUploadedFileUrl="insertImageLink"
               />
-
 
               <p class="mt-3">Or paste image link here:</p>
             </div>
@@ -28,7 +28,7 @@
             <input v-model="imageUrl" type="text" class="form-control" id="addImageToCollectionInput" />
 
             <div v-if="imageUrl" class="mt-3">
-              <img :src="imageUrl" :key="imageUrl" class="img-thumbnail img-fluid" style="max-width: 100px;" />
+              <Image :url="imageUrl" alt="Image" cls="img-thumbnail img-fluid" style="max-width: 100px;" />
               <br />
               <small>If image didn't appear above, then something is wrong with the link you added.</small>
             </div>
@@ -51,13 +51,14 @@
 import { ethers } from 'ethers';
 import { useEthers } from 'vue-dapp';
 import { useToast } from "vue-toastification/dist/index.mjs";
+import Image from "~/components/Image.vue";
 import WaitingToast from "~/components/WaitingToast";
 import FileUploadInput from '~/components/storage/FileUploadInput.vue';
 
 export default {
   name: 'AddImageToCollectionModal',
   props: ["cAddress", "mdAddress"],
-  components: { FileUploadInput },
+  components: { FileUploadInput, Image },
 
   data() {
     return {

components/nft/collection/ChangeCollectionPreviewModal.vue

@@ -17,6 +17,7 @@
               <FileUploadInput 
                 btnCls="btn btn-primary"
                 :maxFileSize="$config.fileUploadSizeLimit" 
+                storageType="ipfs"
                 @processUploadedFileUrl="insertImageLink"
               />
 
@@ -29,9 +30,9 @@
             <input v-model="imageUrl" type="text" class="form-control">
 
             <div v-if="imageUrl" class="mt-3">
-              <img :src="imageUrl" class="img-thumbnail img-fluid" style="max-width: 100px;" />
+              <Image :url="imageUrl" cls="img-thumbnail img-fluid" style="max-width: 100px" />
               <br />
-              <small>If image didn't appear above, then something is wrong with the link you added.</small>
+              <small>If image didn't appear above, then something is wrong with the link you added (wait until the loading indicator completes).</small>
             </div>
           </div>
 
@@ -52,14 +53,15 @@
 import { ethers } from 'ethers';
 import { useEthers } from 'vue-dapp';
 import { useToast } from "vue-toastification/dist/index.mjs";
+import Image from "~/components/Image.vue";
 import WaitingToast from "~/components/WaitingToast";
 import FileUploadInput from '~/components/storage/FileUploadInput.vue';
 
 export default {
   name: 'ChangeCollectionPreviewModal',
   props: ["cAddress", "mdAddress"],
   emits: ["saveCollection"],
-  components: { FileUploadInput },
+  components: { FileUploadInput, Image },
 
   data() {
     return {

components/nft/collection/RemoveImageFromCollectionModal.vue

@@ -27,7 +27,7 @@
           <div class="row mt-3" v-if="images">
             <div v-for="(image, index) in images" :key="image" class="col-md-4 mb-3">
               <div class="card">
-                <img :src="image" class="card-img-top">
+                <Image :url="image" alt="Image" cls="card-img-top" />
                 <div class="card-body">
                   <div class="row">
                     <button class="btn btn-danger" @click="removeImage(index)" :disabled="waitingRemove || images.length == 1">
@@ -53,6 +53,7 @@
 import { ethers } from 'ethers';
 import { useEthers } from 'vue-dapp';
 import { useToast } from "vue-toastification/dist/index.mjs";
+import Image from "~/components/Image.vue";
 import WaitingToast from "~/components/WaitingToast";
 
 export default {
@@ -69,6 +70,10 @@ export default {
     }
   },
 
+  components: {
+    Image,
+  },
+
   mounted() {
     this.componentId = this.$.uid;
   },

components/profile/ProfileImage.vue

@@ -1,5 +1,5 @@
 <template>
-  <img :src="imgPath" />
+  <img :src="parseImageLink" />
 </template>
 
 <script>
@@ -29,6 +29,16 @@ export default {
     }
   },
 
+  computed: {
+    parseImageLink() {
+      let parsedImage = this.imgPath;
+      if (parsedImage && parsedImage.includes("ipfs://")) {
+        parsedImage = parsedImage.replace("ipfs://", this.$config.ipfsGateway);
+      }
+      return parsedImage;
+    }
+  },
+
   watch: {
     image(oldValue, newValue) {
       if (newValue) {

components/profile/PunkProfile.vue

@@ -205,6 +205,7 @@
       @processFileUrl="insertImage"
       title="Change profile image"
       infoText="Upload a new profile picture."
+      storageType="ipfs"
       :componentId="$.uid"
       :maxFileSize="$config.fileUploadSizeLimit"
     />