arweave address is shown in case balance drops below threshold

.env.example

@@ -1,3 +1,4 @@
+ARWEAVE_ADDRESS=
 ARWEAVE_KTY=
 ARWEAVE_N=
 ARWEAVE_E=

README.md

@@ -81,6 +81,12 @@ ARWEAVE_DQ=
 ARWEAVE_QI=
 ```
 
+And add the arweave address too:
+
+```bash
+ARWEAVE_ADDRESS=
+```
+
 Also make sure these variables are set on your hosting provider (Netlify, Vercel, etc).
 
 ## Image upload fallback

components/chat/ChatFeed.vue

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

components/nft/collection/AddImageToCollectionModal.vue

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

components/nft/collection/ChangeCollectionPreviewModal.vue

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

components/profile/PunkProfile.vue

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

components/storage/FileUploadInput.vue

@@ -4,9 +4,10 @@
     type="file"
     class="form-control form-control-lg mb-3"
     :id="'file-input-' + componentId"
+    :disabled="waitingUpload || disable"
   />
 
-  <button type="button" :class="btnCls" @click="uploadFile" :disabled="waitingUpload || !file || fileTooBig">
+  <button type="button" :class="btnCls" @click="uploadFile" :disabled="waitingUpload || !file || fileTooBig || disable">
     <span v-if="waitingUpload" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
     Upload
   </button>
@@ -22,7 +23,7 @@ import ImageKit from 'imagekit-javascript'
 
 export default {
   name: 'FileUploadInput',
-  props: ['btnCls', 'maxFileSize', 'storageType'],
+  props: ['btnCls', 'disable', 'maxFileSize', 'storageType'],
   emits: ['processUploadedFileUrl'],
 
   data() {

components/storage/FileUploadModal.vue

@@ -1,48 +1,75 @@
 <template>
   <!-- Modal -->
-  <div class="modal fade" :id="'fileUploadModal'+componentId" tabindex="-1" :aria-labelledby="'fileUploadModalLabel'+componentId" aria-hidden="true">
+  <div
+    class="modal fade"
+    :id="'fileUploadModal' + componentId"
+    tabindex="-1"
+    :aria-labelledby="'fileUploadModalLabel' + componentId"
+    aria-hidden="true"
+  >
     <div class="modal-dialog">
       <div class="modal-content">
         <div class="modal-header">
-          <h1 class="modal-title fs-5" :id="'fileUploadModalLabel'+componentId">{{ getTitle }}</h1>
-          <button :id="'closeFileUploadModal'+componentId" type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+          <h1 class="modal-title fs-5" :id="'fileUploadModalLabel' + componentId">{{ getTitle }}</h1>
+          <button
+            :id="'closeFileUploadModal' + componentId"
+            type="button"
+            class="btn-close"
+            data-bs-dismiss="modal"
+            aria-label="Close"
+          ></button>
         </div>
-
-        <div class="modal-body mb-4">
 
+        <div class="modal-body mb-4">
           <!-- Tabs Navigation -->
           <ul class="nav nav-tabs nav-fill">
             <li class="nav-item">
-              <button 
+              <button
                 :disabled="!this.fileUploadEnabled"
-                class="nav-link" 
-                :class="currentTab === 'upload' ? 'active' : ''" 
-                @click="currentTab = 'upload'" 
-              >Upload</button>
+                class="nav-link"
+                :class="currentTab === 'upload' ? 'active' : ''"
+                @click="currentTab = 'upload'"
+              >
+                Upload
+              </button>
             </li>
             <li class="nav-item">
-              <button 
-                class="nav-link" 
-                :class="currentTab === 'paste' ? 'active' : ''" 
-                @click="currentTab = 'paste'" 
-              >Paste Link</button>
+              <button class="nav-link" :class="currentTab === 'paste' ? 'active' : ''" @click="currentTab = 'paste'">
+                Paste Link
+              </button>
             </li>
           </ul>
           <!-- END Tabs Navigation -->
 
           <!-- Tabs Content -->
           <div class="tab-content mt-3">
-
             <!-- Upload Tab -->
             <div v-if="currentTab === 'upload'">
               <p v-if="infoText">{{ infoText }}</p>
-
-              <FileUploadInput 
+
+              <div v-if="arweaveBalanceTooLow">
+                <p class="text-danger">
+                  Error: Arweave is used as file storage. Current balance in the Arweave wallet is insufficient to do the upload. 
+                </p>
+                <p>
+                  Please send AR tokens to this wallet (min. {{ $config.arweaveMinBalance }} AR): <a :href="'https://arscan.io/address/' + this.$config.arweaveAddress" target="_blank">{{ this.$config.arweaveAddress }}</a>.
+                </p>
+              </div>
+
+              <FileUploadInput
                 btnCls="btn btn-primary"
+                :disable="arweaveBalanceTooLow"
                 :maxFileSize="maxFileSize"
-                :storageType="storageType" 
+                :storageType="storageType"
                 @processUploadedFileUrl="processUploadedFileUrl"
               />
+
+              <!--
+              <div v-if="!arweaveBalanceTooLow">
+                <hr />
+                <p><small>The file will be uploaded to Arweave. Current balance in the wallet: {{ arweaveBalance }} AR.</small></p>
+              </div>
+              -->
             </div>
 
             <!-- Paste Link Tab -->
@@ -51,79 +78,92 @@
 
               <input v-model="pastedLink" type="text" class="form-control mb-3" placeholder="Enter http link to file" />
 
-              <button 
-                class="btn btn-primary" 
-                @click="processUploadedFileUrl(pastedLink)"
-                :disabled="!pastedLink"
-              >
+              <button class="btn btn-primary" @click="processUploadedFileUrl(pastedLink)" :disabled="!pastedLink">
                 Submit link
               </button>
             </div>
-
           </div>
-
         </div>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import { useSiteStore } from '~/store/site';
-import FileUploadInput from '~/components/storage/FileUploadInput.vue';
+import { useSiteStore } from '~/store/site'
+import FileUploadInput from '~/components/storage/FileUploadInput.vue'
 
 export default {
-  name: "FileUploadModal",
-  props: ["title", "componentId", "infoText", "maxFileSize", "storageType"],
-  emits: ["processFileUrl"],
+  name: 'FileUploadModal',
+  props: ['title', 'componentId', 'infoText', 'maxFileSize', 'storageType'],
+  emits: ['processFileUrl'],
   components: { FileUploadInput },
 
-  data()  {
+  data() {
     return {
-      currentTab: "upload",
-      pastedLink: null
+      currentTab: 'upload',
+      pastedLink: null,
     }
   },
 
   mounted() {
     if (!this.fileUploadEnabled) {
-      this.currentTab = "paste";
+      this.currentTab = 'paste'
     }
   },
 
   computed: {
+    arweaveBalance() {
+      const arBalance = this.siteStore.arweaveBalance
+
+      if (arBalance) {
+        const balancePrecision = Number(arBalance).toFixed(6);
+        return Number.parseFloat(balancePrecision);
+      }
+      
+      return 0
+    },
+
+    arweaveBalanceTooLow() {
+      if (this.storageType !== 'arweave') {
+        return false
+      }
+      
+      return this.arweaveBalance < this.$config.arweaveMinBalance
+    },
+
     fileUploadEnabled() {
-      return this.siteStore.getFileUploadEnabled;
+      return this.siteStore.getFileUploadEnabled
     },
 
     getTitle() {
-      return this.title || "Upload file";
+      return this.title || 'Upload file'
     },
   },
 
   methods: {
     processUploadedFileUrl(fileUrl) {
-      this.$emit("processFileUrl", fileUrl);
-      document.getElementById('closeFileUploadModal'+this.componentId).click();
-    }
+      this.$emit('processFileUrl', fileUrl)
+      document.getElementById('closeFileUploadModal' + this.componentId).click()
+    },
   },
 
   setup() {
-    const siteStore = useSiteStore();
+    const siteStore = useSiteStore()
 
     return {
-      siteStore
+      siteStore,
     }
   },
 
   watch: {
     fileUploadEnabled() {
       if (!this.fileUploadEnabled) {
-        this.currentTab = "paste";
+        this.currentTab = 'paste'
       } else {
-        this.currentTab = "upload";
+        this.currentTab = 'upload'
       }
-    }
-  }
+    },
+  },
 }
-</script>
+</script>

layouts/default.vue

@@ -122,7 +122,7 @@ import NavbarMobile from "~/components/navbars/NavbarMobile.vue";
 import SidebarLeft from "~/components/sidebars/SidebarLeft.vue";
 import SidebarRight from "~/components/sidebars/SidebarRight.vue";
 import ChatSettingsModal from "~/components/ChatSettingsModal.vue";
-import { getActivityPoints } from '~/utils/balanceUtils';
+import { getActivityPoints, getArweaveBalance } from '~/utils/balanceUtils';
 import { getAltDomainName, getDomainHolder, getDomainName } from '~/utils/domainUtils';
 import { storeAltname, storeReferrer, storeUsername } from '~/utils/storageUtils';
 import VerifyAccountOwnership from '~/components/VerifyAccountOwnership.vue';
@@ -193,6 +193,9 @@ export default {
       selector: "[data-bs-toggle='popover']",
     })
 
+    // fetch Arweave balance
+    this.fetchArweaveBalance()
+
     // check if file upload is enabled
     this.siteStore.setFileUploadEnabled(this.$config.fileUploadEnabled);
 
@@ -255,6 +258,15 @@ export default {
       }
     },
 
+    async fetchArweaveBalance() {
+      if (this.$config.arweaveAddress) {
+        const balance = await getArweaveBalance(this.$config.arweaveAddress)
+        //console.log('Arweave balance:', balance)
+
+        this.siteStore.setArweaveBalance(balance)
+      }
+    },
+
     async fetchChatTokenBalance() {
       if (this.$config.chatTokenAddress) {
         const chatTokenInterface = new ethers.utils.Interface([

nuxt.config.ts

@@ -54,7 +54,9 @@ export default defineNuxtConfig({
       airdropApAddress: "", // chat token claim for APs
       airdropClaimDomainsAddress: "", // chat token claim for domain holders
       altDomain: ".mode", // alternative domain (e.g. .eth, .crypto, etc.)
+      arweaveAddress: process.env.ARWEAVE_ADDRESS,
       arweaveGateway: 'https://arweave.net/',
+      arweaveMinBalance: 0.02, // minimum AR balance to upload files
       blockExplorerBaseUrl: "https://explorer.mode.network", // no trailing slash!
       chatChannels: { // go to Orbis Dashboard (https://useorbis.com/dashboard), create a new Project and then create a new Context for each of the channels below
         "general": "kjzl6cwe1jw149v2ugvw3kux2bllw3bka0vl2rzgmdkaceg3srm62nww7iuvkwi", // general discussion channel
@@ -72,6 +74,7 @@ export default defineNuxtConfig({
       favicon: "/img/favicon.svg",
       fileUploadEnabled: true, // enable/disable file uploads (enable only if external file storage is used, e.g. Arweave)
       fileUploadSizeLimit: 1 * 1024 * 1024, // max file upload size in bytes (1 * 1024 * 1024 = 1 MB)
+      fileUploadStorageType: "arweave", // "imagekit" or "arweave" (or leave empty for no file uploads)
       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
       governanceUrl: "", // governance url (snapshot, Tally, etc.)

pages/nft/create.vue

@@ -160,7 +160,7 @@
         @processFileUrl="insertImage"
         title="Upload your NFT image"
         infoText="Upload the NFT image."
-        storageType="arweave"
+        :storageType="$config.fileUploadStorageType"
         :componentId="$.uid"
         :maxFileSize="$config.fileUploadSizeLimit"
       />