spheron replaced with thirdweb

components/chat/ChatFeed.vue

@@ -45,6 +45,7 @@
               @processFileUrl="insertImage"
               title="Upload image"
               infoText="Upload an image."
+              storageType="ipfs"
               :componentId="$.uid"
               :maxFileSize="$config.fileUploadSizeLimit"
             />
@@ -385,6 +386,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/nft/collection/AddImageToCollectionModal.vue

@@ -15,7 +15,8 @@
 
               <FileUploadInput 
                 btnCls="btn btn-primary"
-                :maxFileSize="$config.fileUploadSizeLimit" 
+                :maxFileSize="$config.fileUploadSizeLimit"
+                storageType="ipfs" 
                 @processUploadedFileUrl="insertImageLink"
               />
 

components/nft/collection/ChangeCollectionPreviewModal.vue

@@ -16,6 +16,7 @@
 
               <FileUploadInput 
                 btnCls="btn btn-primary"
+                storageType="ipfs" 
                 :maxFileSize="$config.fileUploadSizeLimit" 
                 @processUploadedFileUrl="insertImageLink"
               />
@@ -29,7 +30,7 @@
             <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;" />
+              <img :src="parseImageLink" class="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>
@@ -74,6 +75,18 @@ export default {
     this.componentId = this.$.uid;
   },
 
+  computed: {
+    parseImageLink() {
+      let parsedImage = this.imageUrl;
+
+      if (parsedImage && parsedImage.includes("ipfs://")) {
+        parsedImage = parsedImage.replace("ipfs://", this.$config.ipfsGateway);
+      }
+
+      return parsedImage;
+    }
+  },
+
   methods: {
     async updateImage() {
       this.waiting = true;

components/profile/PunkProfile.vue

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

components/storage/FileUploadInput.vue

@@ -22,12 +22,12 @@
 </template>
 
 <script>
-import { upload } from "@spheron/browser-upload";
 import ImageKit from "imagekit-javascript";
+import { uploadFileToThirdWeb } from "~/utils/ipfsUtils";
 
 export default {
   name: "FileUploadInput",
-  props: ["btnCls", "maxFileSize"],
+  props: ["btnCls", "maxFileSize", "storageType"],
   emits: ["processUploadedFileUrl"],
 
   data()  {
@@ -91,43 +91,6 @@ export default {
       this.waitingUpload = false;
     },
 
-    async fetchUploadToken() {
-      const thisAppUrl = window.location.origin;
-
-      let fetcherService;
-
-      if (this.$config.fileUploadTokenService === "netlify") {
-        fetcherService = thisAppUrl + "/.netlify/functions/imageUploader";
-      } else if (this.$config.fileUploadTokenService === "vercel") {
-        fetcherService = thisAppUrl + "/api/imageUploader";
-      }
-
-      if (fetcherService) {
-        try {
-          const resp = await $fetch(fetcherService).catch((error) => error.data);
-
-          let response = resp;
-
-          if (typeof(resp) === "string") {
-            response = JSON.parse(resp);
-          }
-
-          if (response?.error) {
-            console.log("Error fetching upload token: ", response["error"]);
-            throw response["error"];
-          }
-
-          if (response?.data) {
-            this.uploadToken = response["data"];
-          }
-          
-        } catch (e) {
-          console.log("Error fetching a file upload token: ", e);
-          throw e;
-        }
-      }
-    },
-
     handleFileInput(event) {
       const uploadedFile = event.target.files[0];
       this.uploadedFileSize = uploadedFile.size;
@@ -191,28 +154,22 @@ export default {
 
     async uploadFile() {
       this.waitingUpload = true;
-      
-      try {
-        // get session token
-        await this.fetchUploadToken();
 
-        if (this.uploadToken) {
-          const token = this.uploadToken;
+      if (this.storageType === "ipfs") {
+        // upload to IPFS
+        const fileUri = await uploadFileToThirdWeb(this.file);
 
-          const { protocolLink, cid } = await upload([this.file], { token });
+        const cid = fileUri.replace("ipfs://", "").split("/")[0];
 
-          //const fullFileUrl = protocolLink + "/" + this.newFileName;
-          const fullFileUrl = this.$config.ipfsGateway + cid + "/" + this.newFileName;
+        if (cid) {
+          await this.pinCid(cid);
+        }
 
-          if (cid) {
-            await this.pinCid(cid);
-          }
+        // emit file url
+        this.$emit("processUploadedFileUrl", fileUri);
 
-          // emit file url
-          this.$emit("processUploadedFileUrl", fullFileUrl);
-        }
-      } catch (e) {
-        console.log("Error uploading file. Switching to fallback upload method.");
+      } else {
+        // upload to a centralized storage service (imagekit)
         await this.fallbackUpload();
       }
 

components/storage/FileUploadModal.vue

@@ -40,6 +40,7 @@
               <FileUploadInput 
                 btnCls="btn btn-primary"
                 :maxFileSize="maxFileSize" 
+                :storageType="storageType" 
                 @processUploadedFileUrl="processUploadedFileUrl"
               />
             </div>
@@ -73,7 +74,7 @@ import FileUploadInput from '~/components/storage/FileUploadInput.vue';
 
 export default {
   name: "FileUploadModal",
-  props: ["title", "componentId", "infoText", "maxFileSize"],
+  props: ["title", "componentId", "infoText", "maxFileSize", "storageType"],
   emits: ["processFileUrl"],
   components: { FileUploadInput },
 

nuxt.config.ts

@@ -68,7 +68,7 @@ export default defineNuxtConfig({
       expiryCollections: 1000 * 60 * 60 * 24 * 7, // must be in milliseconds (0 means no expiration)
       expiryUsernames: 1000 * 60 * 60 * 24 * 7, // must be in milliseconds (0 means no expiration)
       favicon: "/img/favicon.svg",
-      fileUploadEnabled: true, // enable/disable file uploads (enable only if external file storage is used, e.g. IPFS via Spheron)
+      fileUploadEnabled: true, // enable/disable file uploads (enable only if external file storage is used, e.g. IPFS via Thirdweb)
       fileUploadSizeLimit: 1 * 1024 * 1024, // max file upload size in bytes (1 * 1024 * 1024 = 1 MB)
       fileUploadTokenService: process.env.FILE_UPLOAD_SERVICE || "netlify", // "netlify" or "vercel" (or leave empty for no file uploads)
       getPostsLimit: 30, // number of posts to fetch from Orbis in the getPosts() function
@@ -138,6 +138,7 @@ export default defineNuxtConfig({
       swapPriceImpactMaxBps: 1000, // max price impact in bips (1 bps = 0.01%, 1000bps = 10%) for the swap function
       swapRouterAddress: "0x0b7F9c544FAF10DFc6137Bd2ba9fF423cC62FBD7", // iggy swap router contract address
       tenorApiKey: process.env.TENOR_KEY || "",
+      thirdwebClientId: process.env.THIRDWEB_CLIENT_ID || "",
       tldName: ".degen",
       tokenAddress: null, // leave null if it's a native token of the chain
       tokenDecimals: 18,