From 5ac8ba28dbd657401b0ead7a35b6aae930cbc146 Mon Sep 17 00:00:00 2001
From: Lucio Rubens <luciorubeens@users.noreply.github.com>
Date: Mon, 12 Jan 2026 20:36:16 -0300
Subject: [PATCH] refactor(frontend): introduce promoted posts and safer "burn"
 mechanism

---
 packages/frontend-main/.env.example           |   5 +-
 .../components/popups/DislikePostDialog.vue   |  26 ++--
 .../src/components/popups/FlagPostDialog.vue  |  25 ++--
 .../components/popups/FollowUserDialog.vue    |  25 ++--
 .../src/components/popups/LikePostDialog.vue  |  30 ++--
 .../src/components/popups/NewPostDialog.vue   |  29 ++--
 .../src/components/popups/ReplyDialog.vue     |  28 ++--
 .../src/components/popups/TipUserDialog.vue   |  26 ++--
 .../components/popups/UnfollowUserDialog.vue  |  25 ++--
 .../src/components/posts/PostActions.vue      | 130 ++++++++++--------
 .../src/components/posts/PromoteToggle.vue    | 125 +++++++++++++++++
 .../frontend-main/src/localization/index.ts   |  16 +++
 .../src/stores/useConfigStore.ts              |   4 +
 13 files changed, 330 insertions(+), 164 deletions(-)
 create mode 100644 packages/frontend-main/src/components/posts/PromoteToggle.vue

diff --git a/packages/frontend-main/.env.example b/packages/frontend-main/.env.example
index 9f0e09a8..ce17b076 100644
--- a/packages/frontend-main/.env.example
+++ b/packages/frontend-main/.env.example
@@ -1,5 +1,8 @@
 VITE_ENVIRONMENT_TYPE=testnet
 
+VITE_DEFAULT_SEND_AMOUNT_ATOMICS=1
+VITE_PROMOTION_SEND_AMOUNT_ATOMICS=100000
+
 VITE_API_ROOT_DEVNET=https://dither-staging.stuyk.com/v1
 VITE_EXPLORER_URL_DEVNET=https://testnet.explorer.allinbits.services/atomone-devnet-1/tx
 VITE_COMMUNITY_WALLET_DEVNET=atone1uq6zjslvsa29cy6uu75y8txnl52mw06j6fzlep
@@ -13,4 +16,4 @@ VITE_AUTHZ_GRANTEE_TESTNET=atone1uq6zjslvsa29cy6uu75y8txnl52mw06j6fzlep
 VITE_API_ROOT_MAINNET=https://api.mainnet.dither.chat/v1
 VITE_EXPLORER_URL_MAINNET=https://www.mintscan.io/atomone/tx
 VITE_COMMUNITY_WALLET_MAINNET=atone1uq6zjslvsa29cy6uu75y8txnl52mw06j6fzlep
-VITE_AUTHZ_GRANTEE_MAINNET=atone1uq6zjslvsa29cy6uu75y8txnl52mw06j6fzlep
\ No newline at end of file
+VITE_AUTHZ_GRANTEE_MAINNET=atone1uq6zjslvsa29cy6uu75y8txnl52mw06j6fzlep
diff --git a/packages/frontend-main/src/components/popups/DislikePostDialog.vue b/packages/frontend-main/src/components/popups/DislikePostDialog.vue
index 9260e308..efddbd91 100644
--- a/packages/frontend-main/src/components/popups/DislikePostDialog.vue
+++ b/packages/frontend-main/src/components/popups/DislikePostDialog.vue
@@ -1,35 +1,35 @@
 <script lang="ts" setup>
 import type { Post } from 'api-main/types/feed';
 
-import { Decimal } from '@cosmjs/math';
 import { computed, ref } from 'vue';
 import { toast } from 'vue-sonner';
 
+import PromoteToggle from '@/components/posts/PromoteToggle.vue';
 import { Button } from '@/components/ui/button';
 import { Dialog, DialogTitle, ResponsiveDialogContent } from '@/components/ui/dialog';
-import InputPhoton from '@/components/ui/input/InputPhoton.vue';
 import { useDislikePost } from '@/composables/useDislikePost';
 import { useTxDialog } from '@/composables/useTxDialog';
 import { useConfigStore } from '@/stores/useConfigStore';
-import { fractionalDigits } from '@/utility/atomics';
 import { shorten } from '@/utility/text';
 import { showBroadcastingToast } from '@/utility/toast';
 
 import DialogDescription from '../ui/dialog/DialogDescription.vue';
 
-const isBalanceInputValid = ref(false);
 const { dislikePost, txError, txSuccess } = useDislikePost();
-const { isShown, inputPhotonModel, handleClose, popupState: dislike } = useTxDialog<Post>('dislike', txSuccess, txError);
+const { isShown, handleClose, popupState: dislike } = useTxDialog<Post>('dislike', txSuccess, txError);
 const configStore = useConfigStore();
-const amountAtomics = computed(() => configStore.config.defaultAmountEnabled ? configStore.config.defaultAmountAtomics : Decimal.fromUserInput(inputPhotonModel.value.toString(), fractionalDigits).atomics);
+const amountAtomics = computed(() => {
+  if (configStore.config.defaultAmountEnabled) {
+    return configStore.config.defaultAmountAtomics;
+  }
 
-const canSubmit = computed(() => {
-  return isBalanceInputValid.value;
+  return configStore.config.regularSendAmountAtomics;
 });
 
-function handleInputValidity(value: boolean) {
-  isBalanceInputValid.value = value;
-}
+// TODO: Verify wallet has enough balance for amountAtomics before allowing submit
+const canSubmit = computed(() => {
+  return true;
+});
 
 async function handleSubmit() {
   if (!canSubmit.value || !dislike.value) {
@@ -56,8 +56,8 @@ async function handleSubmit() {
 
       <!-- Transaction Form -->
       <div class="flex flex-col w-full gap-4">
-        <InputPhoton v-if="!configStore.config.defaultAmountEnabled" v-model="inputPhotonModel" @on-validity-change="handleInputValidity" />
-        <Button class="w-full" :disabled="!isBalanceInputValid" @click="handleSubmit">
+        <PromoteToggle :show-promote-button="false" />
+        <Button class="w-full" :disabled="!canSubmit" @click="handleSubmit">
           {{ $t('components.Button.submit') }}
         </Button>
       </div>
diff --git a/packages/frontend-main/src/components/popups/FlagPostDialog.vue b/packages/frontend-main/src/components/popups/FlagPostDialog.vue
index 465433e6..5681484b 100644
--- a/packages/frontend-main/src/components/popups/FlagPostDialog.vue
+++ b/packages/frontend-main/src/components/popups/FlagPostDialog.vue
@@ -1,17 +1,15 @@
 <script lang="ts" setup>
 import type { Post } from 'api-main/types/feed';
 
-import { Decimal } from '@cosmjs/math';
 import { computed, ref } from 'vue';
 import { toast } from 'vue-sonner';
 
+import PromoteToggle from '@/components/posts/PromoteToggle.vue';
 import { Button } from '@/components/ui/button';
 import { Dialog, DialogTitle, ResponsiveDialogContent } from '@/components/ui/dialog';
-import InputPhoton from '@/components/ui/input/InputPhoton.vue';
 import { useFlagPost } from '@/composables/useFlagPost';
 import { useTxDialog } from '@/composables/useTxDialog';
 import { useConfigStore } from '@/stores/useConfigStore';
-import { fractionalDigits } from '@/utility/atomics';
 import { showBroadcastingToast } from '@/utility/toast';
 
 import PostMessage from '../posts/PostMessage.vue';
@@ -19,24 +17,25 @@ import PrettyTimestamp from '../posts/PrettyTimestamp.vue';
 import UserAvatar from '../users/UserAvatar.vue';
 import Username from '../users/Username.vue';
 
-const isBalanceInputValid = ref(false);
 const { flagPost, txError, txSuccess } = useFlagPost();
 const {
   isShown,
-  inputPhotonModel,
   popupState: flag,
   handleClose,
 } = useTxDialog<Post>('flag', txSuccess, txError);
 const configStore = useConfigStore();
-const amountAtomics = computed(() => configStore.config.defaultAmountEnabled ? configStore.config.defaultAmountAtomics : Decimal.fromUserInput(inputPhotonModel.value.toString(), fractionalDigits).atomics);
+const amountAtomics = computed(() => {
+  if (configStore.config.defaultAmountEnabled) {
+    return configStore.config.defaultAmountAtomics;
+  }
 
-const canSubmit = computed(() => {
-  return isBalanceInputValid.value;
+  return configStore.config.regularSendAmountAtomics;
 });
 
-function handleInputValidity(value: boolean) {
-  isBalanceInputValid.value = value;
-}
+// TODO: Verify wallet has enough balance for amountAtomics before allowing submit
+const canSubmit = computed(() => {
+  return true;
+});
 
 async function handleSubmit() {
   if (!canSubmit.value || !flag.value) {
@@ -73,8 +72,8 @@ async function handleSubmit() {
 
       <!-- Transaction Form -->
       <div class="flex flex-col w-full gap-4">
-        <InputPhoton v-if="!configStore.config.defaultAmountEnabled" v-model="inputPhotonModel" @on-validity-change="handleInputValidity" />
-        <Button class="w-full" :disabled="!isBalanceInputValid" @click="handleSubmit">
+        <PromoteToggle :show-promote-button="false" />
+        <Button class="w-full" :disabled="!canSubmit" @click="handleSubmit">
           {{ $t('components.Button.submit') }}
         </Button>
       </div>
diff --git a/packages/frontend-main/src/components/popups/FollowUserDialog.vue b/packages/frontend-main/src/components/popups/FollowUserDialog.vue
index dc2c8f0b..d5f475f9 100644
--- a/packages/frontend-main/src/components/popups/FollowUserDialog.vue
+++ b/packages/frontend-main/src/components/popups/FollowUserDialog.vue
@@ -1,38 +1,37 @@
 <script lang="ts" setup>
-import { Decimal } from '@cosmjs/math';
 import { computed, ref } from 'vue';
 import { toast } from 'vue-sonner';
 
+import PromoteToggle from '@/components/posts/PromoteToggle.vue';
 import { Button } from '@/components/ui/button';
 import { Dialog, DialogTitle, ResponsiveDialogContent } from '@/components/ui/dialog';
-import InputPhoton from '@/components/ui/input/InputPhoton.vue';
 import { useFollowUser } from '@/composables/useFollowUser';
 import { useTxDialog } from '@/composables/useTxDialog';
 import { useConfigStore } from '@/stores/useConfigStore';
-import { fractionalDigits } from '@/utility/atomics';
 import { showBroadcastingToast } from '@/utility/toast';
 
 import DialogDescription from '../ui/dialog/DialogDescription.vue';
 import UserAvatarUsername from '../users/UserAvatarUsername.vue';
 
-const isBalanceInputValid = ref(false);
 const { followUser, txError, txSuccess } = useFollowUser();
 const {
   isShown,
-  inputPhotonModel,
   popupState: follow,
   handleClose,
 } = useTxDialog<string>('follow', txSuccess, txError);
 const configStore = useConfigStore();
-const amountAtomics = computed(() => configStore.config.defaultAmountEnabled ? configStore.config.defaultAmountAtomics : Decimal.fromUserInput(inputPhotonModel.value.toString(), fractionalDigits).atomics);
+const amountAtomics = computed(() => {
+  if (configStore.config.defaultAmountEnabled) {
+    return configStore.config.defaultAmountAtomics;
+  }
 
-const canSubmit = computed(() => {
-  return isBalanceInputValid.value;
+  return configStore.config.regularSendAmountAtomics;
 });
 
-function handleInputValidity(value: boolean) {
-  isBalanceInputValid.value = value;
-}
+// TODO: Verify wallet has enough balance for amountAtomics before allowing submit
+const canSubmit = computed(() => {
+  return true;
+});
 
 async function handleSubmit() {
   if (!canSubmit.value || !follow.value) {
@@ -61,8 +60,8 @@ async function handleSubmit() {
 
       <!-- Transaction Form -->
       <div class="flex flex-col w-full gap-4">
-        <InputPhoton v-if="!configStore.config.defaultAmountEnabled" v-model="inputPhotonModel" @on-validity-change="handleInputValidity" />
-        <Button class="w-full" :disabled="!isBalanceInputValid" @click="handleSubmit">
+        <PromoteToggle :show-promote-button="false" />
+        <Button class="w-full" :disabled="!canSubmit" @click="handleSubmit">
           {{ $t('components.Button.submit') }}
         </Button>
       </div>
diff --git a/packages/frontend-main/src/components/popups/LikePostDialog.vue b/packages/frontend-main/src/components/popups/LikePostDialog.vue
index d5677fb6..a7232f0f 100644
--- a/packages/frontend-main/src/components/popups/LikePostDialog.vue
+++ b/packages/frontend-main/src/components/popups/LikePostDialog.vue
@@ -1,33 +1,33 @@
 <script lang="ts" setup>
 import type { Post } from 'api-main/types/feed';
 
-import { Decimal } from '@cosmjs/math';
 import { computed, ref } from 'vue';
 import { toast } from 'vue-sonner';
 
+import PromoteToggle from '@/components/posts/PromoteToggle.vue';
 import { Button } from '@/components/ui/button';
 import { Dialog, DialogDescription, DialogTitle, ResponsiveDialogContent } from '@/components/ui/dialog';
-import InputPhoton from '@/components/ui/input/InputPhoton.vue';
 import { useLikePost } from '@/composables/useLikePost';
 import { useTxDialog } from '@/composables/useTxDialog';
 import { useConfigStore } from '@/stores/useConfigStore';
-import { fractionalDigits } from '@/utility/atomics';
 import { shorten } from '@/utility/text';
 import { showBroadcastingToast } from '@/utility/toast';
 
-const isBalanceInputValid = ref(false);
 const { likePost, txError, txSuccess } = useLikePost();
-const { isShown, inputPhotonModel, handleClose, popupState: like } = useTxDialog<Post>('like', txSuccess, txError);
+const { isShown, handleClose, popupState: like } = useTxDialog<Post>('like', txSuccess, txError);
 const configStore = useConfigStore();
-const amountAtomics = computed(() => configStore.config.defaultAmountEnabled ? configStore.config.defaultAmountAtomics : Decimal.fromUserInput(inputPhotonModel.value.toString(), fractionalDigits).atomics);
+const amountAtomics = computed(() => {
+  if (configStore.config.defaultAmountEnabled) {
+    return configStore.config.defaultAmountAtomics;
+  }
 
-const canSubmit = computed(() => {
-  return isBalanceInputValid.value;
+  return configStore.config.regularSendAmountAtomics;
 });
 
-function handleInputValidity(value: boolean) {
-  isBalanceInputValid.value = value;
-}
+// TODO: Verify wallet has enough balance for amountAtomics before allowing submit
+const canSubmit = computed(() => {
+  return true;
+});
 
 async function handleSubmit() {
   if (!canSubmit.value || !like.value) {
@@ -52,12 +52,8 @@ async function handleSubmit() {
 
       <!-- Transaction Form -->
       <div class="flex flex-col w-full gap-4">
-        <InputPhoton
-          v-if="!configStore.config.defaultAmountEnabled"
-          v-model="inputPhotonModel"
-          @on-validity-change="handleInputValidity"
-        />
-        <Button class="w-full" :disabled="!isBalanceInputValid" @click="handleSubmit">
+        <PromoteToggle :show-promote-button="false" />
+        <Button class="w-full" :disabled="!canSubmit" @click="handleSubmit">
           {{ $t('components.Button.submit') }}
         </Button>
       </div>
diff --git a/packages/frontend-main/src/components/popups/NewPostDialog.vue b/packages/frontend-main/src/components/popups/NewPostDialog.vue
index 787edc3d..c7d0dc70 100644
--- a/packages/frontend-main/src/components/popups/NewPostDialog.vue
+++ b/packages/frontend-main/src/components/popups/NewPostDialog.vue
@@ -1,10 +1,10 @@
 <script lang="ts" setup>
-import { Decimal } from '@cosmjs/math';
 import { computed, ref } from 'vue';
 import { toast } from 'vue-sonner';
 
 import PostEditorToolbar from '@/components/posts/PostEditorToolbar.vue';
 import PostMediaThumbnail from '@/components/posts/PostMediaThumbnail.vue';
+import PromoteToggle from '@/components/posts/PromoteToggle.vue';
 import
 { Button }
   from '@/components/ui/button';
@@ -13,32 +13,39 @@ import {
   DialogTitle,
   ResponsiveDialogContent,
 } from '@/components/ui/dialog';
-import InputPhoton from '@/components/ui/input/InputPhoton.vue';
 import { Textarea } from '@/components/ui/textarea';
 import { useConfirmDialog } from '@/composables/useConfirmDialog';
 import { useCreatePost } from '@/composables/useCreatePost';
 import { useTxDialog } from '@/composables/useTxDialog';
 import { useConfigStore } from '@/stores/useConfigStore';
-import { fractionalDigits } from '@/utility/atomics';
 import { showBroadcastingToast } from '@/utility/toast';
 
 const MAX_CHARS = 512 - 'dither.Post("")'.length;
 const message = ref('');
-const isBalanceInputValid = ref(false);
+const isPromoted = ref(false);
 
 const { createPost, txError, txSuccess } = useCreatePost();
 const { showConfirmDialog } = useConfirmDialog();
 
-const { isShown, inputPhotonModel, handleClose } = useTxDialog<object>('newPost', txSuccess, txError);
+const { isShown, handleClose } = useTxDialog<object>('newPost', txSuccess, txError);
 const configStore = useConfigStore();
-const amountAtomics = computed(() => configStore.config.defaultAmountEnabled ? configStore.config.defaultAmountAtomics : Decimal.fromUserInput(inputPhotonModel.value.toString(), fractionalDigits).atomics);
+const amountAtomics = computed(() => {
+  if (isPromoted.value) {
+    // When promoted, use promotion amount
+    return configStore.config.promotionSendAmountAtomics;
+  }
 
-function handleInputValidity(value: boolean) {
-  isBalanceInputValid.value = value;
-}
+  // Otherwise use default amount from settings or regular amount from env
+  if (configStore.config.defaultAmountEnabled) {
+    return configStore.config.defaultAmountAtomics;
+  }
+
+  return configStore.config.regularSendAmountAtomics;
+});
 
+// TODO: Verify wallet has enough balance for amountAtomics before allowing submit
 const canSubmit = computed(() => {
-  return isBalanceInputValid.value && message.value.length > 0;
+  return message.value.length > 0;
 });
 
 function handleCloseWithSaveDraft() {
@@ -108,7 +115,7 @@ function handleRemoveText(text: string) {
 
         <!-- Transaction Form -->
         <div class="flex flex-col w-full gap-4">
-          <InputPhoton v-if="!configStore.config.defaultAmountEnabled" v-model="inputPhotonModel" @on-validity-change="handleInputValidity" />
+          <PromoteToggle v-model="isPromoted" :show-promote-button="true" />
           <Button class="w-full" :disabled="!canSubmit" @click="handleSubmit">
             {{ $t('components.Button.submit') }}
           </Button>
diff --git a/packages/frontend-main/src/components/popups/ReplyDialog.vue b/packages/frontend-main/src/components/popups/ReplyDialog.vue
index 45fe967f..246253b3 100644
--- a/packages/frontend-main/src/components/popups/ReplyDialog.vue
+++ b/packages/frontend-main/src/components/popups/ReplyDialog.vue
@@ -1,39 +1,47 @@
 <script lang="ts" setup>
 import type { Post } from 'api-main/types/feed';
 
-import { Decimal } from '@cosmjs/math';
 import { computed, ref } from 'vue';
 import { toast } from 'vue-sonner';
 
 import PostMessage from '@/components/posts/PostMessage.vue';
 import PrettyTimestamp from '@/components/posts/PrettyTimestamp.vue';
+import PromoteToggle from '@/components/posts/PromoteToggle.vue';
 import { Button } from '@/components/ui/button';
 import { Dialog, DialogTitle, ResponsiveDialogContent } from '@/components/ui/dialog';
-import InputPhoton from '@/components/ui/input/InputPhoton.vue';
 import { Textarea } from '@/components/ui/textarea';
 import UserAvatar from '@/components/users/UserAvatar.vue';
 import Username from '@/components/users/Username.vue';
 import { useCreateReply } from '@/composables/useCreateReply';
 import { useTxDialog } from '@/composables/useTxDialog';
 import { useConfigStore } from '@/stores/useConfigStore';
-import { fractionalDigits } from '@/utility/atomics';
 import { showBroadcastingToast } from '@/utility/toast';
 
 const POST_HASH_LEN = 64;
 const MAX_CHARS = 512 - ('dither.Reply("", "")'.length + POST_HASH_LEN);
 const message = ref('');
-const isBalanceInputValid = ref(false);
+const isPromoted = ref(false);
 const configStore = useConfigStore();
 
 const { createReply, txError, txSuccess } = useCreateReply();
 const {
   isShown,
-  inputPhotonModel,
   popupState: reply,
   handleClose,
 } = useTxDialog<Post>('reply', txSuccess, txError);
-const amountAtomics = computed(() => configStore.config.defaultAmountEnabled ? configStore.config.defaultAmountAtomics : Decimal.fromUserInput(inputPhotonModel.value.toString(), fractionalDigits).atomics);
-const canSubmit = computed(() => configStore.config.defaultAmountEnabled || (isBalanceInputValid.value && message.value.length > 0));
+const amountAtomics = computed(() => {
+  if (isPromoted.value) {
+    return configStore.config.promotionSendAmountAtomics;
+  }
+
+  if (configStore.config.defaultAmountEnabled) {
+    return configStore.config.defaultAmountAtomics;
+  }
+
+  return configStore.config.regularSendAmountAtomics;
+});
+// TODO: Verify wallet has enough balance for amountAtomics before allowing submit
+const canSubmit = computed(() => message.value.length > 0);
 
 async function handleSubmit() {
   if (!canSubmit.value || !reply.value) {
@@ -50,10 +58,6 @@ async function handleSubmit() {
     toast.dismiss(toastId);
   }
 }
-
-function handleInputValidity(value: boolean) {
-  isBalanceInputValid.value = value;
-}
 </script>
 
 <template>
@@ -80,7 +84,7 @@ function handleInputValidity(value: boolean) {
 
         <!-- Transaction Form -->
         <div class="flex flex-col w-full gap-4">
-          <InputPhoton v-if="!configStore.config.defaultAmountEnabled" v-model="inputPhotonModel" @on-validity-change="handleInputValidity" />
+          <PromoteToggle v-model="isPromoted" :show-promote-button="true" />
           <span v-if="txError" class="text-red-500 text-xs">{{ txError }}</span>
           <Button class="w-full" :disabled="!canSubmit" @click="handleSubmit">
             {{ $t('components.Button.submit') }}
diff --git a/packages/frontend-main/src/components/popups/TipUserDialog.vue b/packages/frontend-main/src/components/popups/TipUserDialog.vue
index 195114c9..95c70dbc 100644
--- a/packages/frontend-main/src/components/popups/TipUserDialog.vue
+++ b/packages/frontend-main/src/components/popups/TipUserDialog.vue
@@ -1,39 +1,37 @@
 <script lang="ts" setup>
-import { Decimal } from '@cosmjs/math';
 import { computed, ref } from 'vue';
 import { toast } from 'vue-sonner';
 
+import PromoteToggle from '@/components/posts/PromoteToggle.vue';
 import { Button } from '@/components/ui/button';
 import { Dialog, DialogTitle, ResponsiveDialogContent } from '@/components/ui/dialog';
-import InputPhoton from '@/components/ui/input/InputPhoton.vue';
 import { useTipUser } from '@/composables/useTipUser';
 import { useTxDialog } from '@/composables/useTxDialog';
 import { useConfigStore } from '@/stores/useConfigStore';
-import { fractionalDigits } from '@/utility/atomics';
 import { showBroadcastingToast } from '@/utility/toast';
 
 import DialogDescription from '../ui/dialog/DialogDescription.vue';
 import UserAvatarUsername from '../users/UserAvatarUsername.vue';
 
-const isBalanceInputValid = ref(false);
-
 const { tipUser, txError, txSuccess } = useTipUser();
 const {
   isShown,
-  inputPhotonModel,
   popupState: tip,
   handleClose,
 } = useTxDialog<string>('tipUser', txSuccess, txError);
 const configStore = useConfigStore();
-const amountAtomics = computed(() => configStore.config.defaultAmountEnabled ? configStore.config.defaultAmountAtomics : Decimal.fromUserInput(inputPhotonModel.value.toString(), fractionalDigits).atomics);
+const amountAtomics = computed(() => {
+  if (configStore.config.defaultAmountEnabled) {
+    return configStore.config.defaultAmountAtomics;
+  }
 
-const canSubmit = computed(() => {
-  return isBalanceInputValid.value;
+  return configStore.config.regularSendAmountAtomics;
 });
 
-function handleInputValidity(value: boolean) {
-  isBalanceInputValid.value = value;
-}
+// TODO: Verify wallet has enough balance for amountAtomics before allowing submit
+const canSubmit = computed(() => {
+  return true;
+});
 
 async function handleSubmit() {
   if (!canSubmit.value || !tip.value) {
@@ -62,8 +60,8 @@ async function handleSubmit() {
 
       <!-- Transaction Form -->
       <div class="flex flex-col w-full gap-4">
-        <InputPhoton v-if="!configStore.config.defaultAmountEnabled" v-model="inputPhotonModel" @on-validity-change="handleInputValidity" />
-        <Button class="w-full" :disabled="!isBalanceInputValid" @click="handleSubmit">
+        <PromoteToggle :show-promote-button="false" />
+        <Button class="w-full" :disabled="!canSubmit" @click="handleSubmit">
           {{ $t('components.Button.submit') }}
         </Button>
       </div>
diff --git a/packages/frontend-main/src/components/popups/UnfollowUserDialog.vue b/packages/frontend-main/src/components/popups/UnfollowUserDialog.vue
index 4ac9478a..b4872411 100644
--- a/packages/frontend-main/src/components/popups/UnfollowUserDialog.vue
+++ b/packages/frontend-main/src/components/popups/UnfollowUserDialog.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import { Decimal } from '@cosmjs/math';
 import { computed, ref } from 'vue';
 import { toast } from 'vue-sonner';
 
+import PromoteToggle from '@/components/posts/PromoteToggle.vue';
 import { Button }
   from '@/components/ui/button';
 import {
@@ -10,11 +10,9 @@ import {
   DialogTitle,
   ResponsiveDialogContent,
 } from '@/components/ui/dialog';
-import InputPhoton from '@/components/ui/input/InputPhoton.vue';
 import { useTxDialog } from '@/composables/useTxDialog';
 import { useUnfollowUser } from '@/composables/useUnfollowUser';
 import { useConfigStore } from '@/stores/useConfigStore';
-import { fractionalDigits } from '@/utility/atomics';
 import { showBroadcastingToast } from '@/utility/toast';
 
 import DialogDescription from '../ui/dialog/DialogDescription.vue';
@@ -22,23 +20,24 @@ import UserAvatarUsername from '../users/UserAvatarUsername.vue';
 
 const { unfollowUser, txError, txSuccess } = useUnfollowUser();
 
-const isBalanceInputValid = ref(false);
 const {
   isShown,
-  inputPhotonModel,
   popupState: unfollow,
   handleClose,
 } = useTxDialog<string>('unfollow', txSuccess, txError);
 const configStore = useConfigStore();
-const amountAtomics = computed(() => configStore.config.defaultAmountEnabled ? configStore.config.defaultAmountAtomics : Decimal.fromUserInput(inputPhotonModel.value.toString(), fractionalDigits).atomics);
+const amountAtomics = computed(() => {
+  if (configStore.config.defaultAmountEnabled) {
+    return configStore.config.defaultAmountAtomics;
+  }
 
-const canSubmit = computed(() => {
-  return isBalanceInputValid.value;
+  return configStore.config.regularSendAmountAtomics;
 });
 
-function handleInputValidity(value: boolean) {
-  isBalanceInputValid.value = value;
-}
+// TODO: Verify wallet has enough balance for amountAtomics before allowing submit
+const canSubmit = computed(() => {
+  return true;
+});
 
 async function handleSubmit() {
   if (!canSubmit.value || !unfollow.value) {
@@ -66,8 +65,8 @@ async function handleSubmit() {
 
       <!-- Transaction Form -->
       <div class="flex flex-col w-full gap-4">
-        <InputPhoton v-if="!configStore.config.defaultAmountEnabled" v-model="inputPhotonModel" @on-validity-change="handleInputValidity" />
-        <Button class="w-full xl:inline hidden" :disabled="!isBalanceInputValid" @click="handleSubmit">
+        <PromoteToggle :show-promote-button="false" />
+        <Button class="w-full xl:inline hidden" :disabled="!canSubmit" @click="handleSubmit">
           {{ $t('components.Button.submit') }}
         </Button>
       </div>
diff --git a/packages/frontend-main/src/components/posts/PostActions.vue b/packages/frontend-main/src/components/posts/PostActions.vue
index f4d8b3f8..5dd627e9 100644
--- a/packages/frontend-main/src/components/posts/PostActions.vue
+++ b/packages/frontend-main/src/components/posts/PostActions.vue
@@ -26,7 +26,7 @@ import PopoverContent from '../ui/popover/PopoverContent.vue';
 import PopoverTrigger from '../ui/popover/PopoverTrigger.vue';
 
 const props = defineProps<{ post: Post }>();
-const buttonWrapperClass = 'flex items-center flex-1 min-w-[84px]';
+const buttonWrapperClass = 'flex items-center gap-0.5 flex-1';
 const buttonClass = 'flex flex-row items-center gap-1 p-2 rounded-full hover:bg-accent active:bg-accent transition-colors';
 const amountTextClass = 'text-[#A2A2A9] text-xs font-medium hover:underline active:underline transition-colors';
 const amountPopoverContentClass = 'py-2 px-3 size-fit';
@@ -42,6 +42,16 @@ const { likePost } = useLikePost();
 const { dislikePost } = useDislikePost();
 const { flagPost } = useFlagPost();
 
+// Check if post is promoted
+const isPromoted = ref(false);
+try {
+  const postQuantity = Decimal.fromAtomics(props.post.quantity ?? '0', fractionalDigits);
+  const promotionAmount = Decimal.fromAtomics(configStore.config.promotionSendAmountAtomics, fractionalDigits);
+  isPromoted.value = postQuantity.isGreaterThanOrEqual(promotionAmount);
+} catch {
+  isPromoted.value = false;
+}
+
 function handleAction(type: keyof PopupState, post: Post) {
   if (wallet.loggedIn.value) {
     popups.show(type, post);
@@ -105,70 +115,76 @@ async function onClickFlag() {
 </script>
 
 <template>
-  <div :class="cn('flex flex-row items-center justify-between pr-2 flex-wrap')">
-    <div :class="buttonWrapperClass">
-      <button :class="buttonClass" @click.stop="onClickReply">
-        <MessageCircle class="size-5" color="#A2A2A9" />
-      </button>
-      <Popover>
-        <PopoverTrigger @click.stop>
-          <span :class="amountTextClass">{{ formatCompactNumber(post.replies) }}</span>
-        </PopoverTrigger>
-        <PopoverContent :class="amountPopoverContentClass">
-          <span :class="fullAmountTextClass">{{ `${formatCompactNumber(post.replies)} ${$t('components.PostActions.replies', post.replies ?? 0)}` }}</span>
-        </PopoverContent>
-      </Popover>
-    </div>
+  <div :class="cn('flex flex-row items-center justify-between flex-wrap w-full')">
+    <!-- Left: Action Buttons -->
+    <div class="flex flex-1">
+      <div :class="buttonWrapperClass">
+        <button :class="buttonClass" @click.stop="onClickReply">
+          <MessageCircle class="size-5" color="#A2A2A9" />
+        </button>
+        <Popover>
+          <PopoverTrigger @click.stop>
+            <span :class="amountTextClass">{{ formatCompactNumber(post.replies) }}</span>
+          </PopoverTrigger>
+          <PopoverContent :class="amountPopoverContentClass">
+            <span :class="fullAmountTextClass">{{ `${formatCompactNumber(post.replies)} ${$t('components.PostActions.replies', post.replies ?? 0)}` }}</span>
+          </PopoverContent>
+        </Popover>
+      </div>
 
-    <div :class="buttonWrapperClass">
-      <button :class="buttonClass" @click.stop="onClickLike">
-        <ThumbsUp class="size-5" color="#A2A2A9" />
-      </button>
-      <Popover>
-        <PopoverTrigger @click.stop>
-          <span :class="amountTextClass">{{ formatCompactAtomics(post.likes_burnt, fractionalDigits) }}</span>
-        </PopoverTrigger>
-        <PopoverContent :class="amountPopoverContentClass">
-          <span :class="fullAmountTextClass">{{ Decimal.fromAtomics(post.likes_burnt ?? '0', fractionalDigits).toString() }} PHOTON</span>
-        </PopoverContent>
-      </Popover>
-    </div>
+      <div :class="buttonWrapperClass">
+        <button :class="buttonClass" @click.stop="onClickLike">
+          <ThumbsUp class="size-5" color="#A2A2A9" />
+        </button>
+        <Popover>
+          <PopoverTrigger @click.stop>
+            <span :class="amountTextClass">{{ formatCompactAtomics(post.likes_burnt, fractionalDigits) }}</span>
+          </PopoverTrigger>
+          <PopoverContent :class="amountPopoverContentClass">
+            <span :class="fullAmountTextClass">{{ Decimal.fromAtomics(post.likes_burnt ?? '0', fractionalDigits).toString() }} PHOTON</span>
+          </PopoverContent>
+        </Popover>
+      </div>
 
-    <div :class="buttonWrapperClass">
-      <button :class="buttonClass" @click.stop="onClickDislike">
-        <ThumbsDown class="size-5 scale-x-[-1]" color="#A2A2A9" />
-      </button>
-      <Popover>
-        <PopoverTrigger @click.stop>
-          <span :class="amountTextClass">{{ formatCompactAtomics(post.dislikes_burnt, fractionalDigits) }}</span>
-        </PopoverTrigger>
-        <PopoverContent :class="amountPopoverContentClass">
-          <span :class="fullAmountTextClass">{{ Decimal.fromAtomics(post.dislikes_burnt ?? '0', fractionalDigits).toString() }} PHOTON</span>
-        </PopoverContent>
-      </Popover>
+      <div :class="buttonWrapperClass">
+        <button :class="buttonClass" @click.stop="onClickDislike">
+          <ThumbsDown class="size-5 scale-x-[-1]" color="#A2A2A9" />
+        </button>
+        <Popover>
+          <PopoverTrigger @click.stop>
+            <span :class="amountTextClass">{{ formatCompactAtomics(post.dislikes_burnt, fractionalDigits) }}</span>
+          </PopoverTrigger>
+          <PopoverContent :class="amountPopoverContentClass">
+            <span :class="fullAmountTextClass">{{ Decimal.fromAtomics(post.dislikes_burnt ?? '0', fractionalDigits).toString() }} PHOTON</span>
+          </PopoverContent>
+        </Popover>
+      </div>
+
+      <div :class="buttonWrapperClass">
+        <button :class="buttonClass" @click.stop="onClickFlag">
+          <Flag class="size-5" color="#A2A2A9" />
+        </button>
+        <Popover>
+          <PopoverTrigger @click.stop>
+            <span :class="amountTextClass">{{ formatCompactAtomics(post.flags_burnt, fractionalDigits) }}</span>
+          </PopoverTrigger>
+          <PopoverContent :class="amountPopoverContentClass">
+            <span :class="fullAmountTextClass">{{ Decimal.fromAtomics(post.flags_burnt ?? '0', fractionalDigits).toString() }} PHOTON</span>
+          </PopoverContent>
+        </Popover>
+      </div>
     </div>
 
-    <div :class="buttonWrapperClass">
-      <button :class="buttonClass" @click.stop="onClickFlag">
-        <Flag class="size-5" color="#A2A2A9" />
-      </button>
-      <Popover>
-        <PopoverTrigger @click.stop>
-          <span :class="amountTextClass">{{ formatCompactAtomics(post.flags_burnt, fractionalDigits) }}</span>
+    <!-- Right: Promoted Badge -->
+    <div class="flex items-center min-w-18 justify-end">
+      <Popover v-if="isPromoted">
+        <PopoverTrigger class="text-right" @click.stop>
+          <span :class="amountTextClass">{{ $t('components.PostActions.promoted') }}</span>
         </PopoverTrigger>
         <PopoverContent :class="amountPopoverContentClass">
-          <span :class="fullAmountTextClass">{{ Decimal.fromAtomics(post.flags_burnt ?? '0', fractionalDigits).toString() }} PHOTON</span>
+          <span :class="fullAmountTextClass">{{ Decimal.fromAtomics(post.quantity ?? '0', fractionalDigits).toString() }} PHOTON</span>
         </PopoverContent>
       </Popover>
     </div>
-
-    <Popover>
-      <PopoverTrigger class="min-w-[114px] ml-auto text-right" @click.stop>
-        <span :class="amountTextClass">{{ formatCompactAtomics(post.quantity, fractionalDigits) }} PHOTON</span>
-      </PopoverTrigger>
-      <PopoverContent :class="amountPopoverContentClass">
-        <span :class="fullAmountTextClass">{{ Decimal.fromAtomics(post.quantity ?? '0', fractionalDigits).toString() }} PHOTON</span>
-      </PopoverContent>
-    </Popover>
   </div>
 </template>
diff --git a/packages/frontend-main/src/components/posts/PromoteToggle.vue b/packages/frontend-main/src/components/posts/PromoteToggle.vue
new file mode 100644
index 00000000..f448258c
--- /dev/null
+++ b/packages/frontend-main/src/components/posts/PromoteToggle.vue
@@ -0,0 +1,125 @@
+<script lang="ts" setup>
+import { Decimal } from '@cosmjs/math';
+import { Info, Rocket } from 'lucide-vue-next';
+import { computed, ref } from 'vue';
+
+import { Button } from '@/components/ui/button';
+import { ResponsivePopoverDialog } from '@/components/ui/popover';
+import Switch from '@/components/ui/switch/Switch.vue';
+import { useConfigStore } from '@/stores/useConfigStore';
+import { fractionalDigits } from '@/utility/atomics';
+
+defineProps<{
+  showPromoteButton?: boolean;
+}>();
+
+const isPromoted = defineModel<boolean>({ default: false });
+
+const isPopoverOpen = ref(false);
+const isLearnMoreOpen = ref(false);
+
+const configStore = useConfigStore();
+
+// Get send amounts from config
+const regularSendAtomics = computed(() => {
+  return configStore.config.defaultAmountEnabled
+    ? configStore.config.defaultAmountAtomics
+    : configStore.config.regularSendAmountAtomics;
+});
+
+const promotionSendAtomics = computed(() => configStore.config.promotionSendAmountAtomics);
+
+// Display values
+const regularSendDisplay = computed(() =>
+  Decimal.fromAtomics(regularSendAtomics.value, fractionalDigits).toString(),
+);
+
+const promotionSendDisplay = computed(() =>
+  Decimal.fromAtomics(promotionSendAtomics.value, fractionalDigits).toString(),
+);
+
+const currentAmountDisplay = computed(() => {
+  return isPromoted.value ? promotionSendDisplay.value : regularSendDisplay.value;
+});
+</script>
+
+<template>
+  <div class="flex flex-col w-full gap-2">
+    <!-- Send Amount Info -->
+    <div class="flex items-center justify-between w-full">
+      <div class="flex items-center gap-1 text-xs">
+        <span class="text-muted-foreground">
+          {{ $t('components.PromoteToggle.willSend') }}
+          <span class="font-semibold text-foreground">{{ currentAmountDisplay }} PHOTON</span>
+        </span>
+
+        <!-- Learn More Button -->
+        <ResponsivePopoverDialog v-model:open="isLearnMoreOpen" modal>
+          <template #trigger>
+            <Button
+              variant="ghost"
+              size="icon"
+              type="button"
+              class="h-4 w-4 p-0"
+              :title="$t('components.PromoteToggle.learnMore')"
+            >
+              <Info class="size-3 text-muted-foreground hover:text-foreground" />
+            </Button>
+          </template>
+          <div class="flex flex-col gap-2">
+            <h4 class="font-semibold">
+              {{ $t('components.PromoteToggle.sendExplainTitle') }}
+            </h4>
+            <p class="text-sm text-muted-foreground">
+              {{ $t('components.PromoteToggle.sendExplainDescription') }}
+            </p>
+          </div>
+        </ResponsivePopoverDialog>
+      </div>
+
+      <!-- Promote Button (bottom right) -->
+      <ResponsivePopoverDialog v-if="showPromoteButton" v-model:open="isPopoverOpen" modal>
+        <template #trigger>
+          <Button
+            variant="outline"
+            size="sm"
+            type="button"
+            class="gap-1.5 relative h-7 text-xs px-2"
+            :class="{ 'border-primary text-primary hover:bg-primary/5': isPromoted }"
+          >
+            <Rocket class="size-3.5" />
+            {{ $t('components.PromoteToggle.promoteButton') }}
+            <span
+              v-if="isPromoted"
+              class="absolute -top-1 -right-1 w-2 h-2 bg-primary rounded-full"
+            />
+          </Button>
+        </template>
+        <div class="flex flex-col gap-4">
+          <div class="flex items-start gap-3">
+            <div class="flex items-center justify-center w-10 h-10 rounded-full bg-primary/10 shrink-0">
+              <Rocket class="size-5 text-primary" />
+            </div>
+            <div class="flex flex-col gap-1 flex-1">
+              <h4 class="font-semibold">
+                {{ $t('components.PromoteToggle.popoverTitle') }}
+              </h4>
+              <p class="text-sm text-muted-foreground">
+                {{ $t('components.PromoteToggle.popoverDescription', { amount: promotionSendDisplay }) }}
+              </p>
+            </div>
+          </div>
+
+          <!-- Toggle inside popover -->
+          <div class="flex items-center justify-between p-3 bg-muted/50 rounded-lg">
+            <div class="flex flex-col gap-1">
+              <span class="text-sm font-medium">{{ $t('components.PromoteToggle.enablePromotion') }}</span>
+              <span class="text-xs text-muted-foreground">{{ promotionSendDisplay }} PHOTON</span>
+            </div>
+            <Switch id="promote-switch" v-model="isPromoted" />
+          </div>
+        </div>
+      </ResponsivePopoverDialog>
+    </div>
+  </div>
+</template>
diff --git a/packages/frontend-main/src/localization/index.ts b/packages/frontend-main/src/localization/index.ts
index 0e73076b..be917825 100644
--- a/packages/frontend-main/src/localization/index.ts
+++ b/packages/frontend-main/src/localization/index.ts
@@ -59,6 +59,21 @@ export const messages = {
         placeholder: 'Type amount',
         remaining: 'remaining',
       },
+      PromoteToggle: {
+        willSend: 'This will send',
+        learnMore: 'Learn more',
+        sendExplainTitle: 'Where does this PHOTON go?',
+        sendExplainDescription: 'PHOTON is sent to the community wallet to support the network and prioritize your content.',
+        promoteButton: 'Promote',
+        popoverTitle: 'Promote your post',
+        popoverDescription: 'Send {amount} PHOTON to boost your post and increase its visibility in the feed.',
+        regularAmount: 'Regular amount',
+        promotionBoost: 'Promotion boost',
+        total: 'Total',
+        enablePromotion: 'Enable Promotion',
+        promotionEnabled: 'Promotion enabled',
+        remove: 'Remove',
+      },
       PopupTitles: {
         likePost: 'Like Post',
         dislikePost: 'Dislike Post',
@@ -150,6 +165,7 @@ export const messages = {
       },
       PostActions: {
         replies: 'reply | replies',
+        promoted: 'Promoted',
       },
       PostEditorToolbar: {
         insertImageTitle: 'Insert Image URL',
diff --git a/packages/frontend-main/src/stores/useConfigStore.ts b/packages/frontend-main/src/stores/useConfigStore.ts
index 72c74267..ac998b4e 100644
--- a/packages/frontend-main/src/stores/useConfigStore.ts
+++ b/packages/frontend-main/src/stores/useConfigStore.ts
@@ -10,6 +10,8 @@ interface Config {
   envConfigs: typeof envConfigs;
   defaultAmountAtomics: string;
   defaultAmountEnabled: boolean;
+  regularSendAmountAtomics: string;
+  promotionSendAmountAtomics: string;
 }
 
 const defaultConfig: Config = {
@@ -17,6 +19,8 @@ const defaultConfig: Config = {
   selectedChain: import.meta.env.VITE_ENVIRONMENT_TYPE ?? 'mainnet',
   defaultAmountAtomics: Decimal.fromUserInput('0.1', fractionalDigits).atomics,
   defaultAmountEnabled: false,
+  regularSendAmountAtomics: import.meta.env.VITE_DEFAULT_SEND_AMOUNT_ATOMICS,
+  promotionSendAmountAtomics: import.meta.env.VITE_PROMOTION_SEND_AMOUNT_ATOMICS,
 };
 
 // deep clone the default config to avoid mutating the original object