Skip to content

refactor(frontend): introduce promoted posts & safer "burn" mechanism #506

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
luciorubeens wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

refactor(frontend): introduce promoted posts & safer "burn" mechanism #506

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion packages/frontend-main/.env.example
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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
VITE_AUTHZ_GRANTEE_MAINNET=atone1uq6zjslvsa29cy6uu75y8txnl52mw06j6fzlep
26 changes: 13 additions & 13 deletions packages/frontend-main/src/components/popups/DislikePostDialog.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
});
Comment on lines +29 to +32
Copy link
Member

@jeronimoalbi jeronimoalbi Feb 2, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It would be nice to have this check 👍


async function handleSubmit() {
if (!canSubmit.value || !dislike.value) {
Expand All @@ -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>
Expand Down
25 changes: 12 additions & 13 deletions packages/frontend-main/src/components/popups/FlagPostDialog.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,42 +1,41 @@
<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';
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) {
Expand Down Expand Up @@ -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>
Expand Down
25 changes: 12 additions & 13 deletions packages/frontend-main/src/components/popups/FollowUserDialog.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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) {
Expand Down Expand Up @@ -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>
Expand Down
30 changes: 13 additions & 17 deletions packages/frontend-main/src/components/popups/LikePostDialog.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}

Comment on lines +19 to 23
Copy link
Member

@jeronimoalbi jeronimoalbi Feb 2, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It would be great if the redundancy between the components' amountAtomics and canSubmit could be improved

Copy link
Member

@jeronimoalbi jeronimoalbi Feb 2, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is just a nit

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) {
Expand All @@ -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>
Expand Down
29 changes: 18 additions & 11 deletions packages/frontend-main/src/components/popups/NewPostDialog.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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() {
Expand Down Expand Up @@ -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>
Expand Down
Loading
Loading