From 5b3beb10062f2284e70ddbe286c5e0ae4217edbb Mon Sep 17 00:00:00 2001
From: Tempe Techie <95053628+tempe-techie@users.noreply.github.com>
Date: Thu, 30 May 2024 16:44:03 +0200
Subject: [PATCH] uploading images to ThirdWeb instead of Spheron

---
 .env.example                                  |   5 +-
 .github/workflows/build.yml                   |   3 +-
 README.md                                     |  15 +-
 api/imageUploader.js                          |  24 -
 components/Image.vue                          |  81 +++
 components/chat/ChatFeed.vue                  |   9 +
 .../collection/AddImageToCollectionModal.vue  |  12 +-
 .../ChangeCollectionPreviewModal.vue          |  20 +-
 .../RemoveImageFromCollectionModal.vue        |   7 +-
 components/profile/ProfileImage.vue           |  14 +-
 components/profile/PunkProfile.vue            |   1 +
 components/storage/FileUploadInput.vue        |  79 +--
 components/storage/FileUploadModal.vue        |   3 +-
 netlify/functions/imageUploader.js            |  25 -
 nuxt.config.ts                                |   7 +-
 package-lock.json                             | 644 ++++++++++++------
 package.json                                  |   3 +-
 pages/nft/collection.vue                      |   4 +-
 pages/nft/create.vue                          |  17 +-
 pages/nft/index.vue                           |   6 +-
 utils/ipfsUtils.js                            |  13 +
 21 files changed, 631 insertions(+), 361 deletions(-)
 delete mode 100644 api/imageUploader.js
 create mode 100644 components/Image.vue
 delete mode 100644 netlify/functions/imageUploader.js
 create mode 100644 utils/ipfsUtils.js

diff --git a/.env.example b/.env.example
index ff707c70..b72c0792 100644
--- a/.env.example
+++ b/.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=
\ No newline at end of file
+TENOR_KEY=
+THIRDWEB_CLIENT_ID=
\ No newline at end of file
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index 33a3e782..567f98cb 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -9,8 +9,7 @@ jobs:
     timeout-minutes: 20
     env:  # Environment variables from either organization or repository settings page (for GitHub Actions).
       TENOR_KEY: ${{ secrets.TENOR_KEY }}
-      SPHERON_BUCKET_NAME: ${{ secrets.SPHERON_BUCKET_NAME }}
-      SPHERON_STORAGE_TOKEN: ${{ secrets.SPHERON_STORAGE_TOKEN }}
+      THIRDWEB_CLIENT_ID: ${{ secrets.THIRDWEB_CLIENT_ID }}
       IMAGEKIT_ENDPOINT: ${{ secrets.IMAGEKIT_ENDPOINT }}
       IMAGEKIT_PUBLIC_KEY: ${{ secrets.IMAGEKIT_PUBLIC_KEY }}
       IMAGEKIT_PRIVATE_KEY: ${{ secrets.IMAGEKIT_PRIVATE_KEY }}
diff --git a/README.md b/README.md
index 4c1fbb31..4cf4b552 100644
--- a/README.md
+++ b/README.md
@@ -62,22 +62,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:
 
diff --git a/api/imageUploader.js b/api/imageUploader.js
deleted file mode 100644
index 8985be85..00000000
--- a/api/imageUploader.js
+++ /dev/null
@@ -1,24 +0,0 @@
-const { SpheronClient, ProtocolEnum } = require('@spheron/storage')
-
-export default async function handler(request, response) {
-	try {
-		const bucketName = process.env.SPHERON_BUCKET_NAME // add bucket name to environment variables
-		const token = process.env.SPHERON_STORAGE_TOKEN // add spheron storage token to environment variables
-
-		const protocol = ProtocolEnum.IPFS
-
-		const client = new SpheronClient({ token })
-
-		const { uploadToken } = await client.createSingleUploadToken({
-			name: bucketName,
-			protocol,
-		})
-
-		return response.status(200).json({
-			data: uploadToken,
-		})
-	} catch (error) {
-		console.error(error)
-		next(error)
-	}
-}
diff --git a/components/Image.vue b/components/Image.vue
new file mode 100644
index 00000000..5daf94d8
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/components/chat/ChatFeed.vue b/components/chat/ChatFeed.vue
index 8cd63bf7..a0cf3005 100644
--- a/components/chat/ChatFeed.vue
+++ b/components/chat/ChatFeed.vue
@@ -59,6 +59,7 @@
 							@processFileUrl="insertImage"
 							title="Upload image"
 							infoText="Upload an image."
+							storageType="ipfs"
 							:componentId="$.uid"
 							:maxFileSize="$config.fileUploadSizeLimit"
 						/>
@@ -420,6 +421,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 + ' '
diff --git a/components/nft/collection/AddImageToCollectionModal.vue b/components/nft/collection/AddImageToCollectionModal.vue
index 604a19bf..93da1b54 100644
--- a/components/nft/collection/AddImageToCollectionModal.vue
+++ b/components/nft/collection/AddImageToCollectionModal.vue
@@ -26,6 +26,7 @@
 
 							<FileUploadInput
 								btnCls="btn btn-primary"
+								storageType="ipfs" 
 								:maxFileSize="$config.fileUploadSizeLimit"
 								@processUploadedFileUrl="insertImageLink"
 							/>
@@ -38,15 +39,15 @@
 						<input v-model="imageUrl" type="text" class="form-control" id="addImageToCollectionInput" />
 
 						<div v-if="imageUrl" class="mt-3">
-							<img
-								:src="imageUrl"
+							<Image
+								:url="imageUrl"
 								:key="imageUrl"
-								class="img-thumbnail img-fluid"
+								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
+								>If image didn't appear above, then something is wrong with the link you added (wait until the loading indicator completes).</small
 							>
 						</div>
 					</div>
@@ -72,13 +73,14 @@
 import { ethers } from 'ethers'
 import { useEthers } from '~/store/ethers'
 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 {
diff --git a/components/nft/collection/ChangeCollectionPreviewModal.vue b/components/nft/collection/ChangeCollectionPreviewModal.vue
index 7a1268d3..0e4ac8c8 100644
--- a/components/nft/collection/ChangeCollectionPreviewModal.vue
+++ b/components/nft/collection/ChangeCollectionPreviewModal.vue
@@ -28,6 +28,7 @@
 
 							<FileUploadInput
 								btnCls="btn btn-primary"
+								storageType="ipfs" 
 								:maxFileSize="$config.fileUploadSizeLimit"
 								@processUploadedFileUrl="insertImageLink"
 							/>
@@ -40,10 +41,10 @@
 						<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
+								>If image didn't appear above, then something is wrong with the link you added (wait until the loading indicator completes).</small
 							>
 						</div>
 					</div>
@@ -69,6 +70,7 @@
 import { ethers } from 'ethers'
 import { useEthers } from '~/store/ethers'
 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'
 
@@ -76,7 +78,7 @@ export default {
 	name: 'ChangeCollectionPreviewModal',
 	props: ['cAddress', 'mdAddress'],
 	emits: ['saveCollection'],
-	components: { FileUploadInput },
+	components: { FileUploadInput, Image },
 
 	data() {
 		return {
@@ -90,6 +92,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
diff --git a/components/nft/collection/RemoveImageFromCollectionModal.vue b/components/nft/collection/RemoveImageFromCollectionModal.vue
index aa41b55c..11dc45f7 100644
--- a/components/nft/collection/RemoveImageFromCollectionModal.vue
+++ b/components/nft/collection/RemoveImageFromCollectionModal.vue
@@ -41,7 +41,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
@@ -70,6 +70,7 @@
 import { ethers } from 'ethers'
 import { useEthers } from '~/store/ethers'
 import { useToast } from 'vue-toastification/dist/index.mjs'
+import Image from '~/components/Image.vue'
 import WaitingToast from '~/components/WaitingToast'
 
 export default {
@@ -86,6 +87,10 @@ export default {
 		}
 	},
 
+	components: {
+		Image,
+	},
+
 	mounted() {
 		this.componentId = this.$.uid
 	},
diff --git a/components/profile/ProfileImage.vue b/components/profile/ProfileImage.vue
index c43bc021..a3138b24 100644
--- a/components/profile/ProfileImage.vue
+++ b/components/profile/ProfileImage.vue
@@ -1,5 +1,5 @@
 <template>
-	<img :src="imgPath" />
+	<img :src="parseImageLink" />
 </template>
 
 <script>
@@ -29,6 +29,18 @@ 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) {
diff --git a/components/profile/PunkProfile.vue b/components/profile/PunkProfile.vue
index ac5491d0..fe1b71f0 100644
--- a/components/profile/PunkProfile.vue
+++ b/components/profile/PunkProfile.vue
@@ -267,6 +267,7 @@
 				@processFileUrl="insertImage"
 				title="Change profile image"
 				infoText="Upload a new profile picture."
+				storageType="ipfs"
 				:componentId="$.uid"
 				:maxFileSize="$config.fileUploadSizeLimit"
 			/>
diff --git a/components/storage/FileUploadInput.vue b/components/storage/FileUploadInput.vue
index e36b2e9d..a2b3bb04 100644
--- a/components/storage/FileUploadInput.vue
+++ b/components/storage/FileUploadInput.vue
@@ -17,12 +17,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() {
@@ -86,42 +86,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
@@ -152,30 +116,27 @@ export default {
 		},
 
 		async uploadFile() {
-			this.waitingUpload = true
-
-			try {
-				// get session token
-				await this.fetchUploadToken()
-
-				if (this.uploadToken) {
-					const token = this.uploadToken
-
-					const { protocolLink, cid } = await upload([this.file], { token })
+      this.waitingUpload = true;
 
-					//const fullFileUrl = protocolLink + "/" + this.newFileName;
-					const fullFileUrl = this.$config.ipfsGateway + cid + '/' + this.newFileName
+      if (this.storageType === "ipfs") {
+				try {
+					// upload to IPFS
+					const fileUri = await uploadFileToThirdWeb(this.file);
 
 					// emit file url
-					this.$emit('processUploadedFileUrl', fullFileUrl)
-				}
-			} catch (e) {
-				console.log('Error uploading file. Switching to fallback upload method.')
-				await this.fallbackUpload()
-			}
-
-			this.waitingUpload = false
-		},
+					this.$emit("processUploadedFileUrl", fileUri);
+				} catch (error) {
+					console.error("Error uploading file to IPFS", error);
+					console.log("Falling back to centralized storage service");
+					await this.fallbackUpload();
+				}							
+      } else {
+        // upload to a centralized storage service (imagekit)
+        await this.fallbackUpload();
+      }
+
+      this.waitingUpload = false;
+    }
 	},
 }
 </script>
diff --git a/components/storage/FileUploadModal.vue b/components/storage/FileUploadModal.vue
index b95c16e9..6db33a9f 100644
--- a/components/storage/FileUploadModal.vue
+++ b/components/storage/FileUploadModal.vue
@@ -54,6 +54,7 @@
 							<FileUploadInput
 								btnCls="btn btn-primary"
 								:maxFileSize="maxFileSize"
+								storageType="ipfs"
 								@processUploadedFileUrl="processUploadedFileUrl"
 							/>
 						</div>
@@ -90,7 +91,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 },
 
diff --git a/netlify/functions/imageUploader.js b/netlify/functions/imageUploader.js
deleted file mode 100644
index 7210b4d9..00000000
--- a/netlify/functions/imageUploader.js
+++ /dev/null
@@ -1,25 +0,0 @@
-const { SpheronClient, ProtocolEnum } = require('@spheron/storage')
-
-exports.handler = async function (event, context) {
-	try {
-		const bucketName = process.env.SPHERON_BUCKET_NAME // enter bucket name in environment variables
-		const token = process.env.SPHERON_STORAGE_TOKEN // add spheron storage token in environment variables
-
-		const protocol = ProtocolEnum.IPFS
-
-		const client = new SpheronClient({ token })
-
-		const { uploadToken } = await client.createSingleUploadToken({
-			name: bucketName,
-			protocol,
-		})
-
-		return {
-			statusCode: 200,
-			body: JSON.stringify({ data: uploadToken }),
-		}
-	} catch (error) {
-		console.error(error)
-		next(error)
-	}
-}
diff --git a/nuxt.config.ts b/nuxt.config.ts
index a72cab95..6eba6291 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -67,7 +67,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
@@ -77,7 +77,9 @@ export default defineNuxtConfig({
 			iggyPostStatsAddress: '0x3Fa0EaC3058828Cc4BA97F51A33597C695bF6F9e',
 			imagekitEndpoint: process.env.IMAGEKIT_ENDPOINT,
 			imagekitPublicKey: process.env.IMAGEKIT_PUBLIC_KEY,
-			ipfsGateway: 'https://cloudflare-ipfs.com/ipfs/',
+			ipfsGateway: "https://cloudflare-ipfs.com/ipfs/", 
+      ipfsGateway2: "https://ipfs.io/ipfs/", 
+      ipfsGateway3: "https://nftdegeniggy.myfilebase.com/ipfs/",
 			keysAddress: '0x0c6A6030121FB3071cB2347DEAC127037785436C', // FriendKeys contract address
 			keysFeatured: ['tempe', 'tekr'],
 			linkPreviews: process.env.LINK_PREVIEW_SERVICE || 'netlify', // "netlify", "vercel", or "microlink" (or leave empty for no link previews)
@@ -138,6 +140,7 @@ export default defineNuxtConfig({
 			swapPriceImpactMaxBps: 1000, // max price impact in bips (1 bps = 0.01%, 1000bps = 10%) for the swap function
 			swapRouterAddress: '', // iggy swap router contract address
 			tenorApiKey: process.env.TENOR_KEY || '',
+			thirdwebClientId: process.env.THIRDWEB_CLIENT_ID || "",
 			tldName: '.sepolia',
 			tokenAddress: null, // leave null if it's a native token of the chain
 			tokenDecimals: 18,
diff --git a/package-lock.json b/package-lock.json
index a9a30171..9e6274e0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,8 +9,7 @@
 				"@openzeppelin/merkle-tree": "^1.0.5",
 				"@orbisclub/orbis-sdk": "^0.4.70",
 				"@pinia/nuxt": "^0.4.6",
-				"@spheron/browser-upload": "^2.0.1",
-				"@spheron/storage": "^2.0.4",
+				"@thirdweb-dev/storage": "^2.0.15",
 				"@vue-dapp/core": "^1.5.1",
 				"@vue-dapp/modal": "^1.5.1",
 				"@vueuse/core": "^9.2.0",
@@ -6237,102 +6236,6 @@
 				"ieee754": "^1.2.1"
 			}
 		},
-		"node_modules/@spheron/browser-upload": {
-			"version": "2.0.1",
-			"resolved": "https://registry.npmjs.org/@spheron/browser-upload/-/browser-upload-2.0.1.tgz",
-			"integrity": "sha512-k0eCsggHazSzQAZ4Yi40bg4dGi5J3/9eh5wDP7QufRsMqVzGLnHtqWW9L0FPufa6POuUHV5BQsRfMCH67R7Okw==",
-			"dependencies": {
-				"@spheron/core": "2.0.0",
-				"@spheron/encryption": "1.0.0",
-				"form-data": "^4.0.0",
-				"jwt-decode": "^3.1.2"
-			}
-		},
-		"node_modules/@spheron/browser-upload/node_modules/@spheron/core": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/@spheron/core/-/core-2.0.0.tgz",
-			"integrity": "sha512-BkOxHoUVGH6AE1FzyO1Ut7lSoXWxMUKWDlnann5kCQ3qJYPOZ38MpUNt4UxuKqlyYuk6mvX2lI08HX6iRgO4Cw==",
-			"dependencies": {
-				"axios": "1.1.2",
-				"eventsource": "^2.0.2",
-				"p-limit": "^3.0.0"
-			}
-		},
-		"node_modules/@spheron/browser-upload/node_modules/axios": {
-			"version": "1.1.2",
-			"resolved": "https://registry.npmjs.org/axios/-/axios-1.1.2.tgz",
-			"integrity": "sha512-bznQyETwElsXl2RK7HLLwb5GPpOLlycxHCtrpDR/4RqqBzjARaOTo3jz4IgtntWUYee7Ne4S8UHd92VCuzPaWA==",
-			"dependencies": {
-				"follow-redirects": "^1.15.0",
-				"form-data": "^4.0.0",
-				"proxy-from-env": "^1.1.0"
-			}
-		},
-		"node_modules/@spheron/browser-upload/node_modules/p-limit": {
-			"version": "3.1.0",
-			"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
-			"integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
-			"dependencies": {
-				"yocto-queue": "^0.1.0"
-			},
-			"engines": {
-				"node": ">=10"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/sindresorhus"
-			}
-		},
-		"node_modules/@spheron/core": {
-			"version": "2.0.5",
-			"resolved": "https://registry.npmjs.org/@spheron/core/-/core-2.0.5.tgz",
-			"integrity": "sha512-euSXQszAizQDHq7CXT8vDb+RnJg6RwnEs0JUAmqE301kqjBqnmbtfiK7udEu+E/FZamC2q2Xzt9XldSbv6aDmw==",
-			"dependencies": {
-				"async-lock": "^1.4.0",
-				"axios": "1.1.2",
-				"eventsource": "^2.0.2",
-				"p-limit": "^3.0.0"
-			}
-		},
-		"node_modules/@spheron/core/node_modules/axios": {
-			"version": "1.1.2",
-			"resolved": "https://registry.npmjs.org/axios/-/axios-1.1.2.tgz",
-			"integrity": "sha512-bznQyETwElsXl2RK7HLLwb5GPpOLlycxHCtrpDR/4RqqBzjARaOTo3jz4IgtntWUYee7Ne4S8UHd92VCuzPaWA==",
-			"dependencies": {
-				"follow-redirects": "^1.15.0",
-				"form-data": "^4.0.0",
-				"proxy-from-env": "^1.1.0"
-			}
-		},
-		"node_modules/@spheron/core/node_modules/p-limit": {
-			"version": "3.1.0",
-			"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
-			"integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
-			"dependencies": {
-				"yocto-queue": "^0.1.0"
-			},
-			"engines": {
-				"node": ">=10"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/sindresorhus"
-			}
-		},
-		"node_modules/@spheron/encryption": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/@spheron/encryption/-/encryption-1.0.0.tgz",
-			"integrity": "sha512-Teald+lhbi1MtwZ6tbWeg4gbWCvQFuRTmCx4jhxoE48tZmHByJNu9ZBHIcsNjCWNzkwg8lA+FQO4HZoAxLF5KQ=="
-		},
-		"node_modules/@spheron/storage": {
-			"version": "2.0.4",
-			"resolved": "https://registry.npmjs.org/@spheron/storage/-/storage-2.0.4.tgz",
-			"integrity": "sha512-WykfOQO0VCEui/EXjH0peprIw0QwHQHmtmfMJ3a2N4TZUK3ufPS+uCgSOgvgm0kdzxx6MAQtRusxclu7tWN/cA==",
-			"dependencies": {
-				"@spheron/core": "2.0.5",
-				"@spheron/encryption": "1.0.0",
-				"form-data": "^4.0.0",
-				"multiformats": "^9.9.0"
-			}
-		},
 		"node_modules/@spruceid/siwe-parser": {
 			"version": "1.1.3",
 			"resolved": "https://registry.npmjs.org/@spruceid/siwe-parser/-/siwe-parser-1.1.3.tgz",
@@ -6695,6 +6598,60 @@
 				}
 			]
 		},
+		"node_modules/@thirdweb-dev/crypto": {
+			"version": "0.2.6",
+			"resolved": "https://registry.npmjs.org/@thirdweb-dev/crypto/-/crypto-0.2.6.tgz",
+			"integrity": "sha512-l9kuYAw0+S+ItvQR2c5k6y+qn+L6YT1I5+KN+cQNN848nPFGECVajED2fVLadkZW7xaGEyc+U6nj8Y1KB5bgNg==",
+			"dependencies": {
+				"@noble/hashes": "^1.4.0",
+				"js-sha3": "^0.9.3"
+			},
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@thirdweb-dev/crypto/node_modules/@noble/hashes": {
+			"version": "1.4.0",
+			"resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.4.0.tgz",
+			"integrity": "sha512-V1JJ1WTRUqHHrOSh597hURcMqVKVGL/ea3kv0gSnEdsEZ0/+VyPghM1lMNGc00z7CIQorSvbKpuJkxvuHbvdbg==",
+			"engines": {
+				"node": ">= 16"
+			},
+			"funding": {
+				"url": "https://paulmillr.com/funding/"
+			}
+		},
+		"node_modules/@thirdweb-dev/crypto/node_modules/js-sha3": {
+			"version": "0.9.3",
+			"resolved": "https://registry.npmjs.org/js-sha3/-/js-sha3-0.9.3.tgz",
+			"integrity": "sha512-BcJPCQeLg6WjEx3FE591wVAevlli8lxsxm9/FzV4HXkV49TmBH38Yvrpce6fjbADGMKFrBMGTqrVz3qPIZ88Gg=="
+		},
+		"node_modules/@thirdweb-dev/storage": {
+			"version": "2.0.15",
+			"resolved": "https://registry.npmjs.org/@thirdweb-dev/storage/-/storage-2.0.15.tgz",
+			"integrity": "sha512-6E5ZlUCTPTMThpUvrPf1XASsfAmSHK/UZXPV5xLc7V66Qq5RTphQYUPoLDsvSNXECo65Jegj0LTIvRFFb30Z4w==",
+			"dependencies": {
+				"@thirdweb-dev/crypto": "0.2.6",
+				"cid-tool": "^3.0.0",
+				"form-data": "^4.0.0",
+				"uuid": "^9.0.1"
+			},
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@thirdweb-dev/storage/node_modules/uuid": {
+			"version": "9.0.1",
+			"resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
+			"integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
+			"funding": [
+				"https://github.com/sponsors/broofa",
+				"https://github.com/sponsors/ctavan"
+			],
+			"bin": {
+				"uuid": "dist/bin/uuid"
+			}
+		},
 		"node_modules/@tootallnate/once": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
@@ -8104,11 +8061,6 @@
 			"resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.1.tgz",
 			"integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ=="
 		},
-		"node_modules/async-lock": {
-			"version": "1.4.0",
-			"resolved": "https://registry.npmjs.org/async-lock/-/async-lock-1.4.0.tgz",
-			"integrity": "sha512-coglx5yIWuetakm3/1dsX9hxCNox22h7+V80RQOu2XUUMidtArxKoZoOtHUPuR84SycKTXzgGzAUR5hJxujyJQ=="
-		},
 		"node_modules/async-mutex": {
 			"version": "0.2.6",
 			"resolved": "https://registry.npmjs.org/async-mutex/-/async-mutex-0.2.6.tgz",
@@ -9067,6 +9019,151 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/cid-tool": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/cid-tool/-/cid-tool-3.0.0.tgz",
+			"integrity": "sha512-rgpV/LzuxUsGCJvUHe9+OuOAENVCiTn+mgGT8Nee1qDLS3xFGBUvZQdsY9MEpUi0YOFy6oz1pybHErcvE4SlGw==",
+			"dependencies": {
+				"cids": "^1.0.0",
+				"explain-error": "^1.0.4",
+				"multibase": "^4.0.2",
+				"multihashes": "^4.0.2",
+				"split2": "^3.1.1",
+				"uint8arrays": "^2.1.3",
+				"yargs": "^16.2.0"
+			},
+			"bin": {
+				"cid": "src/cli/bin.js"
+			}
+		},
+		"node_modules/cid-tool/node_modules/ansi-regex": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+			"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/cid-tool/node_modules/cliui": {
+			"version": "7.0.4",
+			"resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
+			"integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
+			"dependencies": {
+				"string-width": "^4.2.0",
+				"strip-ansi": "^6.0.0",
+				"wrap-ansi": "^7.0.0"
+			}
+		},
+		"node_modules/cid-tool/node_modules/emoji-regex": {
+			"version": "8.0.0",
+			"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+			"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+		},
+		"node_modules/cid-tool/node_modules/is-fullwidth-code-point": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+			"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/cid-tool/node_modules/string-width": {
+			"version": "4.2.3",
+			"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+			"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+			"dependencies": {
+				"emoji-regex": "^8.0.0",
+				"is-fullwidth-code-point": "^3.0.0",
+				"strip-ansi": "^6.0.1"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/cid-tool/node_modules/strip-ansi": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+			"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+			"dependencies": {
+				"ansi-regex": "^5.0.1"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/cid-tool/node_modules/uint8arrays": {
+			"version": "2.1.10",
+			"resolved": "https://registry.npmjs.org/uint8arrays/-/uint8arrays-2.1.10.tgz",
+			"integrity": "sha512-Q9/hhJa2836nQfEJSZTmr+pg9+cDJS9XEAp7N2Vg5MzL3bK/mkMVfjscRGYruP9jNda6MAdf4QD/y78gSzkp6A==",
+			"dependencies": {
+				"multiformats": "^9.4.2"
+			}
+		},
+		"node_modules/cid-tool/node_modules/wrap-ansi": {
+			"version": "7.0.0",
+			"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+			"integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+			"dependencies": {
+				"ansi-styles": "^4.0.0",
+				"string-width": "^4.1.0",
+				"strip-ansi": "^6.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+			}
+		},
+		"node_modules/cid-tool/node_modules/y18n": {
+			"version": "5.0.8",
+			"resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+			"integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/cid-tool/node_modules/yargs": {
+			"version": "16.2.0",
+			"resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
+			"integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
+			"dependencies": {
+				"cliui": "^7.0.2",
+				"escalade": "^3.1.1",
+				"get-caller-file": "^2.0.5",
+				"require-directory": "^2.1.1",
+				"string-width": "^4.2.0",
+				"y18n": "^5.0.5",
+				"yargs-parser": "^20.2.2"
+			},
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/cid-tool/node_modules/yargs-parser": {
+			"version": "20.2.9",
+			"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
+			"integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/cids": {
+			"version": "1.1.9",
+			"resolved": "https://registry.npmjs.org/cids/-/cids-1.1.9.tgz",
+			"integrity": "sha512-l11hWRfugIcbGuTZwAM5PwpjPPjyb6UZOGwlHSnOBV5o07XhQ4gNpBN67FbODvpjyHtd+0Xs6KNvUcGBiDRsdg==",
+			"deprecated": "This module has been superseded by the multiformats module",
+			"dependencies": {
+				"multibase": "^4.0.1",
+				"multicodec": "^3.0.1",
+				"multihashes": "^4.0.1",
+				"uint8arrays": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=4.0.0",
+				"npm": ">=3.0.0"
+			}
+		},
 		"node_modules/cipher-base": {
 			"version": "1.0.4",
 			"resolved": "https://registry.npmjs.org/cipher-base/-/cipher-base-1.0.4.tgz",
@@ -11524,14 +11621,6 @@
 				"node": ">=0.8.x"
 			}
 		},
-		"node_modules/eventsource": {
-			"version": "2.0.2",
-			"resolved": "https://registry.npmjs.org/eventsource/-/eventsource-2.0.2.tgz",
-			"integrity": "sha512-IzUmBGPR3+oUG9dUeXynyNmf91/3zUSJg1lCktzKw47OXuhco54U3r9B7O4XX+Rb1Itm9OZ2b0RkTs10bICOxA==",
-			"engines": {
-				"node": ">=12.0.0"
-			}
-		},
 		"node_modules/evp_bytestokey": {
 			"version": "1.0.3",
 			"resolved": "https://registry.npmjs.org/evp_bytestokey/-/evp_bytestokey-1.0.3.tgz",
@@ -11700,6 +11789,11 @@
 			"integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
 			"peer": true
 		},
+		"node_modules/explain-error": {
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/explain-error/-/explain-error-1.0.4.tgz",
+			"integrity": "sha512-/wSgNMxFusiYRy1rd19LT2SQlIXDppHpumpWo06wxjflD1OYxDLbl6rMVw+U3bxD5Nuhex4TKqv9Aem4D0lVzQ=="
+		},
 		"node_modules/exponential-backoff": {
 			"version": "3.1.1",
 			"resolved": "https://registry.npmjs.org/exponential-backoff/-/exponential-backoff-3.1.1.tgz",
@@ -14348,11 +14442,6 @@
 			"resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
 			"integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw=="
 		},
-		"node_modules/jwt-decode": {
-			"version": "3.1.2",
-			"resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-3.1.2.tgz",
-			"integrity": "sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A=="
-		},
 		"node_modules/keccak": {
 			"version": "3.0.2",
 			"resolved": "https://registry.npmjs.org/keccak/-/keccak-3.0.2.tgz",
@@ -16392,6 +16481,16 @@
 				"npm": ">=6.0.0"
 			}
 		},
+		"node_modules/multicodec": {
+			"version": "3.2.1",
+			"resolved": "https://registry.npmjs.org/multicodec/-/multicodec-3.2.1.tgz",
+			"integrity": "sha512-+expTPftro8VAW8kfvcuNNNBgb9gPeNYV9dn+z1kJRWF2vih+/S79f2RVeIwmrJBUJ6NT9IUPWnZDQvegEh5pw==",
+			"deprecated": "This module has been superseded by the multiformats module",
+			"dependencies": {
+				"uint8arrays": "^3.0.0",
+				"varint": "^6.0.0"
+			}
+		},
 		"node_modules/multiformats": {
 			"version": "9.9.0",
 			"resolved": "https://registry.npmjs.org/multiformats/-/multiformats-9.9.0.tgz",
@@ -20427,6 +20526,27 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/split2": {
+			"version": "3.2.2",
+			"resolved": "https://registry.npmjs.org/split2/-/split2-3.2.2.tgz",
+			"integrity": "sha512-9NThjpgZnifTkJpzTZ7Eue85S49QwpNhZTq6GRJwObb6jnLFNGB7Qm73V5HewTROPyxD0C29xqmaI68bQtV+hg==",
+			"dependencies": {
+				"readable-stream": "^3.0.0"
+			}
+		},
+		"node_modules/split2/node_modules/readable-stream": {
+			"version": "3.6.2",
+			"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+			"integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+			"dependencies": {
+				"inherits": "^2.0.3",
+				"string_decoder": "^1.1.1",
+				"util-deprecate": "^1.0.1"
+			},
+			"engines": {
+				"node": ">= 6"
+			}
+		},
 		"node_modules/sprintf-js": {
 			"version": "1.0.3",
 			"resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
@@ -22890,6 +23010,7 @@
 			"version": "0.1.0",
 			"resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
 			"integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+			"peer": true,
 			"engines": {
 				"node": ">=10"
 			},
@@ -27291,94 +27412,6 @@
 				}
 			}
 		},
-		"@spheron/browser-upload": {
-			"version": "2.0.1",
-			"resolved": "https://registry.npmjs.org/@spheron/browser-upload/-/browser-upload-2.0.1.tgz",
-			"integrity": "sha512-k0eCsggHazSzQAZ4Yi40bg4dGi5J3/9eh5wDP7QufRsMqVzGLnHtqWW9L0FPufa6POuUHV5BQsRfMCH67R7Okw==",
-			"requires": {
-				"@spheron/core": "2.0.0",
-				"@spheron/encryption": "1.0.0",
-				"form-data": "^4.0.0",
-				"jwt-decode": "^3.1.2"
-			},
-			"dependencies": {
-				"@spheron/core": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/@spheron/core/-/core-2.0.0.tgz",
-					"integrity": "sha512-BkOxHoUVGH6AE1FzyO1Ut7lSoXWxMUKWDlnann5kCQ3qJYPOZ38MpUNt4UxuKqlyYuk6mvX2lI08HX6iRgO4Cw==",
-					"requires": {
-						"axios": "1.1.2",
-						"eventsource": "^2.0.2",
-						"p-limit": "^3.0.0"
-					}
-				},
-				"axios": {
-					"version": "1.1.2",
-					"resolved": "https://registry.npmjs.org/axios/-/axios-1.1.2.tgz",
-					"integrity": "sha512-bznQyETwElsXl2RK7HLLwb5GPpOLlycxHCtrpDR/4RqqBzjARaOTo3jz4IgtntWUYee7Ne4S8UHd92VCuzPaWA==",
-					"requires": {
-						"follow-redirects": "^1.15.0",
-						"form-data": "^4.0.0",
-						"proxy-from-env": "^1.1.0"
-					}
-				},
-				"p-limit": {
-					"version": "3.1.0",
-					"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
-					"integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
-					"requires": {
-						"yocto-queue": "^0.1.0"
-					}
-				}
-			}
-		},
-		"@spheron/core": {
-			"version": "2.0.5",
-			"resolved": "https://registry.npmjs.org/@spheron/core/-/core-2.0.5.tgz",
-			"integrity": "sha512-euSXQszAizQDHq7CXT8vDb+RnJg6RwnEs0JUAmqE301kqjBqnmbtfiK7udEu+E/FZamC2q2Xzt9XldSbv6aDmw==",
-			"requires": {
-				"async-lock": "^1.4.0",
-				"axios": "1.1.2",
-				"eventsource": "^2.0.2",
-				"p-limit": "^3.0.0"
-			},
-			"dependencies": {
-				"axios": {
-					"version": "1.1.2",
-					"resolved": "https://registry.npmjs.org/axios/-/axios-1.1.2.tgz",
-					"integrity": "sha512-bznQyETwElsXl2RK7HLLwb5GPpOLlycxHCtrpDR/4RqqBzjARaOTo3jz4IgtntWUYee7Ne4S8UHd92VCuzPaWA==",
-					"requires": {
-						"follow-redirects": "^1.15.0",
-						"form-data": "^4.0.0",
-						"proxy-from-env": "^1.1.0"
-					}
-				},
-				"p-limit": {
-					"version": "3.1.0",
-					"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
-					"integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
-					"requires": {
-						"yocto-queue": "^0.1.0"
-					}
-				}
-			}
-		},
-		"@spheron/encryption": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/@spheron/encryption/-/encryption-1.0.0.tgz",
-			"integrity": "sha512-Teald+lhbi1MtwZ6tbWeg4gbWCvQFuRTmCx4jhxoE48tZmHByJNu9ZBHIcsNjCWNzkwg8lA+FQO4HZoAxLF5KQ=="
-		},
-		"@spheron/storage": {
-			"version": "2.0.4",
-			"resolved": "https://registry.npmjs.org/@spheron/storage/-/storage-2.0.4.tgz",
-			"integrity": "sha512-WykfOQO0VCEui/EXjH0peprIw0QwHQHmtmfMJ3a2N4TZUK3ufPS+uCgSOgvgm0kdzxx6MAQtRusxclu7tWN/cA==",
-			"requires": {
-				"@spheron/core": "2.0.5",
-				"@spheron/encryption": "1.0.0",
-				"form-data": "^4.0.0",
-				"multiformats": "^9.9.0"
-			}
-		},
 		"@spruceid/siwe-parser": {
 			"version": "1.1.3",
 			"resolved": "https://registry.npmjs.org/@spruceid/siwe-parser/-/siwe-parser-1.1.3.tgz",
@@ -27714,6 +27747,45 @@
 				}
 			}
 		},
+		"@thirdweb-dev/crypto": {
+			"version": "0.2.6",
+			"resolved": "https://registry.npmjs.org/@thirdweb-dev/crypto/-/crypto-0.2.6.tgz",
+			"integrity": "sha512-l9kuYAw0+S+ItvQR2c5k6y+qn+L6YT1I5+KN+cQNN848nPFGECVajED2fVLadkZW7xaGEyc+U6nj8Y1KB5bgNg==",
+			"requires": {
+				"@noble/hashes": "^1.4.0",
+				"js-sha3": "^0.9.3"
+			},
+			"dependencies": {
+				"@noble/hashes": {
+					"version": "1.4.0",
+					"resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.4.0.tgz",
+					"integrity": "sha512-V1JJ1WTRUqHHrOSh597hURcMqVKVGL/ea3kv0gSnEdsEZ0/+VyPghM1lMNGc00z7CIQorSvbKpuJkxvuHbvdbg=="
+				},
+				"js-sha3": {
+					"version": "0.9.3",
+					"resolved": "https://registry.npmjs.org/js-sha3/-/js-sha3-0.9.3.tgz",
+					"integrity": "sha512-BcJPCQeLg6WjEx3FE591wVAevlli8lxsxm9/FzV4HXkV49TmBH38Yvrpce6fjbADGMKFrBMGTqrVz3qPIZ88Gg=="
+				}
+			}
+		},
+		"@thirdweb-dev/storage": {
+			"version": "2.0.15",
+			"resolved": "https://registry.npmjs.org/@thirdweb-dev/storage/-/storage-2.0.15.tgz",
+			"integrity": "sha512-6E5ZlUCTPTMThpUvrPf1XASsfAmSHK/UZXPV5xLc7V66Qq5RTphQYUPoLDsvSNXECo65Jegj0LTIvRFFb30Z4w==",
+			"requires": {
+				"@thirdweb-dev/crypto": "0.2.6",
+				"cid-tool": "^3.0.0",
+				"form-data": "^4.0.0",
+				"uuid": "^9.0.1"
+			},
+			"dependencies": {
+				"uuid": {
+					"version": "9.0.1",
+					"resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
+					"integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA=="
+				}
+			}
+		},
 		"@tootallnate/once": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
@@ -28892,11 +28964,6 @@
 			"resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.1.tgz",
 			"integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ=="
 		},
-		"async-lock": {
-			"version": "1.4.0",
-			"resolved": "https://registry.npmjs.org/async-lock/-/async-lock-1.4.0.tgz",
-			"integrity": "sha512-coglx5yIWuetakm3/1dsX9hxCNox22h7+V80RQOu2XUUMidtArxKoZoOtHUPuR84SycKTXzgGzAUR5hJxujyJQ=="
-		},
 		"async-mutex": {
 			"version": "0.2.6",
 			"resolved": "https://registry.npmjs.org/async-mutex/-/async-mutex-0.2.6.tgz",
@@ -29616,6 +29683,118 @@
 			"resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.7.0.tgz",
 			"integrity": "sha512-2CpRNYmImPx+RXKLq6jko/L07phmS9I02TyqkcNU20GCF/GgaWvc58hPtjxDX8lPpkdwc9sNh72V9k00S7ezog=="
 		},
+		"cid-tool": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/cid-tool/-/cid-tool-3.0.0.tgz",
+			"integrity": "sha512-rgpV/LzuxUsGCJvUHe9+OuOAENVCiTn+mgGT8Nee1qDLS3xFGBUvZQdsY9MEpUi0YOFy6oz1pybHErcvE4SlGw==",
+			"requires": {
+				"cids": "^1.0.0",
+				"explain-error": "^1.0.4",
+				"multibase": "^4.0.2",
+				"multihashes": "^4.0.2",
+				"split2": "^3.1.1",
+				"uint8arrays": "^2.1.3",
+				"yargs": "^16.2.0"
+			},
+			"dependencies": {
+				"ansi-regex": {
+					"version": "5.0.1",
+					"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+					"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="
+				},
+				"cliui": {
+					"version": "7.0.4",
+					"resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
+					"integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
+					"requires": {
+						"string-width": "^4.2.0",
+						"strip-ansi": "^6.0.0",
+						"wrap-ansi": "^7.0.0"
+					}
+				},
+				"emoji-regex": {
+					"version": "8.0.0",
+					"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+					"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+				},
+				"is-fullwidth-code-point": {
+					"version": "3.0.0",
+					"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+					"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg=="
+				},
+				"string-width": {
+					"version": "4.2.3",
+					"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+					"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+					"requires": {
+						"emoji-regex": "^8.0.0",
+						"is-fullwidth-code-point": "^3.0.0",
+						"strip-ansi": "^6.0.1"
+					}
+				},
+				"strip-ansi": {
+					"version": "6.0.1",
+					"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+					"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+					"requires": {
+						"ansi-regex": "^5.0.1"
+					}
+				},
+				"uint8arrays": {
+					"version": "2.1.10",
+					"resolved": "https://registry.npmjs.org/uint8arrays/-/uint8arrays-2.1.10.tgz",
+					"integrity": "sha512-Q9/hhJa2836nQfEJSZTmr+pg9+cDJS9XEAp7N2Vg5MzL3bK/mkMVfjscRGYruP9jNda6MAdf4QD/y78gSzkp6A==",
+					"requires": {
+						"multiformats": "^9.4.2"
+					}
+				},
+				"wrap-ansi": {
+					"version": "7.0.0",
+					"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+					"integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+					"requires": {
+						"ansi-styles": "^4.0.0",
+						"string-width": "^4.1.0",
+						"strip-ansi": "^6.0.0"
+					}
+				},
+				"y18n": {
+					"version": "5.0.8",
+					"resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+					"integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA=="
+				},
+				"yargs": {
+					"version": "16.2.0",
+					"resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
+					"integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
+					"requires": {
+						"cliui": "^7.0.2",
+						"escalade": "^3.1.1",
+						"get-caller-file": "^2.0.5",
+						"require-directory": "^2.1.1",
+						"string-width": "^4.2.0",
+						"y18n": "^5.0.5",
+						"yargs-parser": "^20.2.2"
+					}
+				},
+				"yargs-parser": {
+					"version": "20.2.9",
+					"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
+					"integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w=="
+				}
+			}
+		},
+		"cids": {
+			"version": "1.1.9",
+			"resolved": "https://registry.npmjs.org/cids/-/cids-1.1.9.tgz",
+			"integrity": "sha512-l11hWRfugIcbGuTZwAM5PwpjPPjyb6UZOGwlHSnOBV5o07XhQ4gNpBN67FbODvpjyHtd+0Xs6KNvUcGBiDRsdg==",
+			"requires": {
+				"multibase": "^4.0.1",
+				"multicodec": "^3.0.1",
+				"multihashes": "^4.0.1",
+				"uint8arrays": "^3.0.0"
+			}
+		},
 		"cipher-base": {
 			"version": "1.0.4",
 			"resolved": "https://registry.npmjs.org/cipher-base/-/cipher-base-1.0.4.tgz",
@@ -31508,11 +31687,6 @@
 			"resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
 			"integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q=="
 		},
-		"eventsource": {
-			"version": "2.0.2",
-			"resolved": "https://registry.npmjs.org/eventsource/-/eventsource-2.0.2.tgz",
-			"integrity": "sha512-IzUmBGPR3+oUG9dUeXynyNmf91/3zUSJg1lCktzKw47OXuhco54U3r9B7O4XX+Rb1Itm9OZ2b0RkTs10bICOxA=="
-		},
 		"evp_bytestokey": {
 			"version": "1.0.3",
 			"resolved": "https://registry.npmjs.org/evp_bytestokey/-/evp_bytestokey-1.0.3.tgz",
@@ -31651,6 +31825,11 @@
 				}
 			}
 		},
+		"explain-error": {
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/explain-error/-/explain-error-1.0.4.tgz",
+			"integrity": "sha512-/wSgNMxFusiYRy1rd19LT2SQlIXDppHpumpWo06wxjflD1OYxDLbl6rMVw+U3bxD5Nuhex4TKqv9Aem4D0lVzQ=="
+		},
 		"exponential-backoff": {
 			"version": "3.1.1",
 			"resolved": "https://registry.npmjs.org/exponential-backoff/-/exponential-backoff-3.1.1.tgz",
@@ -33662,11 +33841,6 @@
 				}
 			}
 		},
-		"jwt-decode": {
-			"version": "3.1.2",
-			"resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-3.1.2.tgz",
-			"integrity": "sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A=="
-		},
 		"keccak": {
 			"version": "3.0.2",
 			"resolved": "https://registry.npmjs.org/keccak/-/keccak-3.0.2.tgz",
@@ -35367,6 +35541,15 @@
 				"@multiformats/base-x": "^4.0.1"
 			}
 		},
+		"multicodec": {
+			"version": "3.2.1",
+			"resolved": "https://registry.npmjs.org/multicodec/-/multicodec-3.2.1.tgz",
+			"integrity": "sha512-+expTPftro8VAW8kfvcuNNNBgb9gPeNYV9dn+z1kJRWF2vih+/S79f2RVeIwmrJBUJ6NT9IUPWnZDQvegEh5pw==",
+			"requires": {
+				"uint8arrays": "^3.0.0",
+				"varint": "^6.0.0"
+			}
+		},
 		"multiformats": {
 			"version": "9.9.0",
 			"resolved": "https://registry.npmjs.org/multiformats/-/multiformats-9.9.0.tgz",
@@ -38357,6 +38540,26 @@
 				"extend-shallow": "^3.0.0"
 			}
 		},
+		"split2": {
+			"version": "3.2.2",
+			"resolved": "https://registry.npmjs.org/split2/-/split2-3.2.2.tgz",
+			"integrity": "sha512-9NThjpgZnifTkJpzTZ7Eue85S49QwpNhZTq6GRJwObb6jnLFNGB7Qm73V5HewTROPyxD0C29xqmaI68bQtV+hg==",
+			"requires": {
+				"readable-stream": "^3.0.0"
+			},
+			"dependencies": {
+				"readable-stream": {
+					"version": "3.6.2",
+					"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+					"integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+					"requires": {
+						"inherits": "^2.0.3",
+						"string_decoder": "^1.1.1",
+						"util-deprecate": "^1.0.1"
+					}
+				}
+			}
+		},
 		"sprintf-js": {
 			"version": "1.0.3",
 			"resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
@@ -40229,7 +40432,8 @@
 		"yocto-queue": {
 			"version": "0.1.0",
 			"resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
-			"integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q=="
+			"integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+			"peer": true
 		},
 		"zip-stream": {
 			"version": "4.1.0",
diff --git a/package.json b/package.json
index 32519ee0..9c7262d2 100644
--- a/package.json
+++ b/package.json
@@ -12,8 +12,7 @@
 		"@openzeppelin/merkle-tree": "^1.0.5",
 		"@orbisclub/orbis-sdk": "^0.4.70",
 		"@pinia/nuxt": "^0.4.6",
-		"@spheron/browser-upload": "^2.0.1",
-		"@spheron/storage": "^2.0.4",
+		"@thirdweb-dev/storage": "^2.0.15",
 		"@vue-dapp/core": "^1.5.1",
 		"@vue-dapp/modal": "^1.5.1",
 		"@vueuse/core": "^9.2.0",
diff --git a/pages/nft/collection.vue b/pages/nft/collection.vue
index 63e3b1de..4a352070 100644
--- a/pages/nft/collection.vue
+++ b/pages/nft/collection.vue
@@ -27,7 +27,7 @@
 
 			<div class="row">
 				<div class="col-md-5 text-center mb-3">
-					<img :src="cImage" class="img-fluid img-thumbnail rounded col-12" />
+					<Image v-if="cImage" :url="cImage" :cls="'img-fluid img-thumbnail rounded col-12'" :alt="cName" :key="cImage" />
 
 					<div class="dropdown mt-3">
 						<button
@@ -257,6 +257,7 @@ import { useEthers, shortenAddress } from '~/store/ethers'
 import { useToast } from 'vue-toastification/dist/index.mjs'
 import ChatFeed from '~/components/chat/ChatFeed.vue'
 import ConnectWalletButton from '~/components/ConnectWalletButton.vue'
+import Image from '~/components/Image.vue'
 import SwitchChainButton from '~/components/SwitchChainButton.vue'
 import WaitingToast from '~/components/WaitingToast'
 import AddImageToCollectionModal from '~/components/nft/collection/AddImageToCollectionModal'
@@ -297,6 +298,7 @@ export default {
 		ChangeNftTypeModal,
 		ChatFeed,
 		ConnectWalletButton,
+		Image,
 		RemoveImageFromCollectionModal,
 		SwitchChainButton,
 		WaitingToast,
diff --git a/pages/nft/create.vue b/pages/nft/create.vue
index 71903c98..87d64a26 100644
--- a/pages/nft/create.vue
+++ b/pages/nft/create.vue
@@ -92,9 +92,9 @@
 			</div>
 
 			<div v-if="cImage" class="mb-4">
-				<img :src="cImage" class="img-thumbnail img-fluid" style="max-width: 100px" />
+				<Image :url="cImage" 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>
+				<small>If image didn't appear above, then something is wrong with the link you added (wait until the loading indicator completes).</small>
 			</div>
 
 			<!-- Description -->
@@ -203,6 +203,7 @@
 				@processFileUrl="insertImage"
 				title="Upload your NFT image"
 				infoText="Upload the NFT image."
+				storageType="ipfs"
 				:componentId="$.uid"
 				:maxFileSize="$config.fileUploadSizeLimit"
 			/>
@@ -216,6 +217,7 @@ import { ethers } from 'ethers'
 import { useEthers } from '~/store/ethers'
 import { useToast } from 'vue-toastification/dist/index.mjs'
 import ConnectWalletButton from '~/components/ConnectWalletButton.vue'
+import Image from '~/components/Image.vue'
 import SwitchChainButton from '~/components/SwitchChainButton.vue'
 import WaitingToast from '~/components/WaitingToast'
 import FileUploadModal from '~/components/storage/FileUploadModal.vue'
@@ -246,6 +248,7 @@ export default {
 	components: {
 		ConnectWalletButton,
 		FileUploadModal,
+		Image,
 		SwitchChainButton,
 		WaitingToast,
 	},
@@ -298,6 +301,16 @@ export default {
 				return false
 			}
 		},
+
+		parseImageLink() {
+      let parsedImage = this.cImage;
+
+      if (parsedImage && parsedImage.includes("ipfs://")) {
+        parsedImage = parsedImage.replace("ipfs://", this.$config.ipfsGateway);
+      }
+
+      return parsedImage;
+    }
 	},
 
 	methods: {
diff --git a/pages/nft/index.vue b/pages/nft/index.vue
index baaa8897..93a30b1a 100644
--- a/pages/nft/index.vue
+++ b/pages/nft/index.vue
@@ -59,7 +59,7 @@
 					:to="'/nft/collection?id=' + nft.address"
 				>
 					<div class="card border mb-3">
-						<img :src="nft.image" class="card-img-top" :alt="nft.name" />
+						<Image :url="nft.image" :alt="nft.name" cls="card-img-top" />
 						<div class="card-body rounded-bottom-3">
 							<p class="card-text mb-1">
 								<strong>{{ nft.name }}</strong>
@@ -80,7 +80,7 @@
 					:to="'/nft/collection?id=' + nft.address"
 				>
 					<div class="card border mb-3">
-						<img :src="nft.image" class="card-img-top" :alt="nft.name" />
+						<Image :url="nft.image" :alt="nft.name" cls="card-img-top" />
 						<div class="card-body rounded-bottom-3">
 							<p class="card-text mb-1">
 								<strong>{{ nft.name }}</strong>
@@ -116,6 +116,7 @@
 <script>
 import { ethers } from 'ethers'
 import { useEthers } from '~/store/ethers'
+import Image from '~/components/Image.vue'
 import SearchNftModal from '~/components/nft/SearchNftModal.vue'
 import { fetchCollection, storeCollection } from '~/utils/storageUtils'
 
@@ -135,6 +136,7 @@ export default {
 	},
 
 	components: {
+		Image,
 		SearchNftModal,
 	},
 
diff --git a/utils/ipfsUtils.js b/utils/ipfsUtils.js
new file mode 100644
index 00000000..b85a62d2
--- /dev/null
+++ b/utils/ipfsUtils.js
@@ -0,0 +1,13 @@
+import { ThirdwebStorage } from "@thirdweb-dev/storage";
+
+export async function uploadFileToThirdWeb(file) {
+  const config = useRuntimeConfig();
+
+  const storage = new ThirdwebStorage({
+    clientId: config.thirdwebClientId,
+  });
+
+  const fileUri = await storage.upload(file);
+
+  return fileUri;
+}
\ No newline at end of file