arweave instead of thirdweb

.env.example

@@ -1,8 +1,16 @@
+ARWEAVE_KTY=
+ARWEAVE_N=
+ARWEAVE_E=
+ARWEAVE_D=
+ARWEAVE_P=
+ARWEAVE_Q=
+ARWEAVE_DP=
+ARWEAVE_DQ=
+ARWEAVE_QI=
 FILE_UPLOAD_SERVICE=
 IMAGEKIT_ENDPOINT=
 IMAGEKIT_PUBLIC_KEY=
 IMAGEKIT_PRIVATE_KEY=
 LINK_PREVIEW_SERVICE=
 RPC_CUSTOM=
-TENOR_KEY=
-THIRDWEB_CLIENT_ID=
+TENOR_KEY=

.github/workflows/build.yml

@@ -9,8 +9,6 @@ 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 }}
       IMAGEKIT_ENDPOINT: ${{ secrets.IMAGEKIT_ENDPOINT }}
       IMAGEKIT_PUBLIC_KEY: ${{ secrets.IMAGEKIT_PUBLIC_KEY }}
       IMAGEKIT_PRIVATE_KEY: ${{ secrets.IMAGEKIT_PRIVATE_KEY }}

README.md

@@ -53,29 +53,39 @@ Then, when you create a project on 4everland, make sure you select the `build` b
 
 And in the build section delete the command and set build folder to empty (or `./`). The preset can be set to `Other`. No install command is needed either.
 
-![](https://bafkreid6mzglrk5hklraua267sker6gqsfpy2ezmjj7yc2oqmx2arbynru.ipfs.w3s.link)
+![](https://arweave.net/j6bPfBOYMOYFqg9V_80i8sPPqy7EXc3Nw9Lfyz6wjVg)
 
 ## GIFs (Tenor)
 
 If you want to have GIF search implemented, create your own Tenor API Key on Google Cloud Console. Follow the instructions here: https://developers.google.com/tenor/guides/quickstart. 
 
 Then enter the key in environment variables (`TENOR_KEY`).
 
-## Image upload (ThirdWeb/IPFS)
+## Image upload (Arweave)
 
-To support image uploads on IPFS please create an API key on ThirdWeb: https://thirdweb.com/dashboard/settings/api-keys 
+To support image uploads, create an Arweave Wallet (e.g. here: https://arweave.app/) and send some AR to it.
 
-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 go to the wallet settings and download Backup Keyfile.
 
-Then add the Client ID of your API key to your environment variables:
+In this file you'll find 10 different variables, enter these into your .env file:
 
 ```bash
-THIRDWEB_CLIENT_ID=
+ARWEAVE_KTY=
+ARWEAVE_N=
+ARWEAVE_E=
+ARWEAVE_D=
+ARWEAVE_P=
+ARWEAVE_Q=
+ARWEAVE_DP=
+ARWEAVE_DQ=
+ARWEAVE_QI=
 ```
 
+Also make sure these variables are set on your hosting provider (Netlify, Vercel, etc).
+
 ## Image upload fallback
 
-It is recommended to use ImageKit as the fallback option, in case ThirdWeb has technical issues.
+It is recommended to use ImageKit as the fallback option, in case Arweave has technical issues.
 
 For this to work, create an account at [ImageKit.io](https://imagekit.io/) and add these environment variables to your project:
 

api/arweaveUploader.js

@@ -0,0 +1,61 @@
+import Arweave from 'arweave';
+import { Buffer } from 'buffer';
+
+export default async function handler(req, res) {
+  // Check if the request method is POST
+  if (req.method !== 'POST') {
+    return res.status(405).json({ message: 'Method Not Allowed' });
+  }
+
+  try {
+    const { fileData, fileName, fileType } = req.body;
+
+    // Initialize Arweave
+    const arweave = Arweave.init({
+      host: 'arweave.net',
+      port: 443,
+      protocol: 'https'
+    });
+
+    // Construct the key file object from environment variables
+    const keyFile = {
+      kty: process.env.ARWEAVE_KTY,
+      n: process.env.ARWEAVE_N,
+      e: process.env.ARWEAVE_E,
+      d: process.env.ARWEAVE_D,
+      p: process.env.ARWEAVE_P,
+      q: process.env.ARWEAVE_Q,
+      dp: process.env.ARWEAVE_DP,
+      dq: process.env.ARWEAVE_DQ,
+      qi: process.env.ARWEAVE_QI
+    };
+
+    // Convert base64 file data to buffer
+    const fileBuffer = Buffer.from(fileData, 'base64');
+
+    // Create a transaction
+    const transaction = await arweave.createTransaction({ data: fileBuffer }, keyFile);
+
+    // Add tags to the transaction
+    transaction.addTag('Content-Type', fileType);
+    transaction.addTag('File-Name', fileName);
+
+    // Sign the transaction
+    await arweave.transactions.sign(transaction, keyFile);
+
+    // Submit the transaction
+    const response = await arweave.transactions.post(transaction);
+
+    if (response.status === 200) {
+      return res.status(200).json({ 
+        message: 'File uploaded successfully',
+        transactionId: transaction.id
+      });
+    } else {
+      throw new Error('Failed to upload file to Arweave');
+    }
+  } catch (error) {
+    console.error('Error:', error);
+    return res.status(500).json({ message: 'Internal server error' });
+  }
+}

components/chat/ChatFeed.vue

@@ -44,7 +44,7 @@
               @processFileUrl="insertImage"
               title="Upload image"
               infoText="Upload an image."
-              storageType="imagekit"
+              storageType="arweave"
               :componentId="$.uid"
               :maxFileSize="$config.fileUploadSizeLimit"
             />

components/nft/collection/AddImageToCollectionModal.vue

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

components/nft/collection/ChangeCollectionPreviewModal.vue

@@ -17,7 +17,7 @@
               <FileUploadInput 
                 btnCls="btn btn-primary"
                 :maxFileSize="$config.fileUploadSizeLimit" 
-                storageType="imagekit"
+                storageType="arweave"
                 @processUploadedFileUrl="insertImageLink"
               />
 

components/profile/PunkProfile.vue

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