feat(frontend): new post popup

packages/frontend-main/src/components/popups/NewPostDialog.vue

@@ -0,0 +1,110 @@
+<script lang="ts" setup>
+import { computed, ref, watch } from 'vue';
+
+import { useBalanceFetcher } from '@/composables/useBalanceFetcher';
+import { usePopups } from '@/composables/usePopups';
+import { useWallet } from '@/composables/useWallet';
+
+import
+{ Button }
+    from '@/components/ui/button';
+import {
+    Dialog,
+    DialogContent,
+    DialogTitle,
+} from '@/components/ui/dialog';
+import InputPhoton from '@/components/ui/input/InputPhoton.vue';
+import { Textarea } from '@/components/ui/textarea';
+
+const popovers = usePopups();
+const wallet = useWallet();
+const balanceFetcher = useBalanceFetcher();
+
+const photonValue = ref(1);
+const txError = ref<string>();
+const txSuccess = ref<string>();
+const isBalanceInputValid = ref(false);
+const message = ref('');
+
+const MAX_CHARS = 512 - 'dither.Post("")'.length;
+
+async function handleSubmit() {
+    if (!popovers.state.newPost) {
+        return;
+    }
+
+    const result = await wallet.dither.post(message.value, BigInt(photonValue.value).toString());
+    if (!result.broadcast) {
+        txError.value = result.msg;
+        return;
+    }
+
+    txSuccess.value = result.tx?.transactionHash;
+}
+
+const isBroadcasting = computed(() => {
+    return wallet.isBroadcasting.value;
+});
+
+function handleClose() {
+    popovers.state.newPost = null;
+    txError.value = undefined;
+    txSuccess.value = undefined;
+    photonValue.value = 1;
+}
+
+function handleInputValidity(value: boolean) {
+    isBalanceInputValid.value = value;
+}
+
+const canSubmit = computed(() => {
+    return isBalanceInputValid.value && message.value.length > 0;
+});
+
+function capChars(event: { target: HTMLTextAreaElement }) {
+    if (event.target.value.length > MAX_CHARS) {
+        event.target.value = event.target.value.substring(0, MAX_CHARS);
+    }
+}
+
+watch(wallet.loggedIn, async () => {
+    if (!wallet.loggedIn.value) {
+        return;
+    }
+
+    balanceFetcher.updateAddress(wallet.address.value);
+});
+</script>
+
+<template>
+  <div>
+    <Dialog :open="popovers.state.newPost !== null" @update:open="handleClose" v-if="popovers.state.newPost !== null">
+      <DialogContent>
+        <DialogTitle>{{ $t('components.PopupTitles.newPost') }}</DialogTitle>
+
+        <Textarea placeholder="What's up?" v-model="message" @input="capChars" v-if="!isBroadcasting && !txSuccess" />
+
+        <!-- Transaction Form -->
+        <div class="flex flex-col w-full gap-4" v-if="!isBroadcasting && !txSuccess">
+          <InputPhoton v-model="photonValue" @on-validity-change="handleInputValidity" />
+          <span v-if="txError" class="text-red-500 text-left text-xs">{{ txError }}</span>
+          <Button class="w-full xl:inline hidden" :disabled="!canSubmit" @click="isBalanceInputValid ? handleSubmit() : () => {}">
+            {{ $t('components.Button.submit') }}
+          </Button>
+        </div>
+        <!-- Broadcast Status -->
+        <div class="flex flex-col w-full gap-4" v-if="isBroadcasting && !txSuccess">
+          {{  $t('components.Wallet.popupSign') }}
+        </div>
+        <!-- Success Status -->
+        <div class="flex flex-col w-full gap-4 overflow-hidden" v-if="!isBroadcasting && txSuccess">
+          <span>{{ $t('components.Wallet.broadcastSuccess') }}</span>
+          <span class="flex lowercase overflow-x-scroll py-2">{{ txSuccess }}</span>
+          <Button class="w-full xl:inline hidden" @click="handleClose">
+            {{ $t('components.Button.close') }}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  </div>
+</template>

packages/frontend-main/src/components/ui/textarea/Textarea.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+
+import { useVModel } from '@vueuse/core';
+
+import { cn } from '@/utility';
+
+const props = defineProps<{
+    class?: HTMLAttributes['class'];
+    defaultValue?: string | number;
+    modelValue?: string | number;
+}>();
+
+const emits = defineEmits<{
+    (e: 'update:modelValue', payload: string | number): void;
+}>();
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+    passive: true,
+    defaultValue: props.defaultValue,
+});
+</script>
+
+<template>
+  <textarea
+    v-model="modelValue"
+    data-slot="textarea"
+    :class="cn('border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm', props.class)"
+  />
+</template>

packages/frontend-main/src/components/ui/textarea/index.ts

@@ -0,0 +1 @@
+export { default as Textarea } from './Textarea.vue';

packages/frontend-main/src/composables/usePopups.ts

@@ -7,22 +7,24 @@ export type PopupState = {
     dislike: Post | null;
     flag: Post | null;
     reply: Post | null;
+    newPost: object | null;
 };
 
 const state = reactive<PopupState>({
     like: null,
     dislike: null,
     flag: null,
     reply: null,
+    newPost: null,
 });
 
 export function usePopups() {
-    const show = (key: keyof PopupState, post: Post) => {
+    const show = <T extends keyof PopupState>(key: T, val: Exclude<PopupState[T], null>) => {
         for (const key of Object.keys(state)) {
             state[key as keyof PopupState] = null;
         }
 
-        state[key] = post;
+        state[key] = val;
     };
 
     return {

packages/frontend-main/src/layouts/panels/LeftPanel.vue

@@ -2,10 +2,18 @@
 
 import { Bell, House, User } from 'lucide-vue-next';
 
+import { usePopups } from '@/composables/usePopups';
+import { useWallet } from '@/composables/useWallet';
+
 import DislikePostDialog from '@/components/popups/DislikePostDialog.vue';
 import LikePostDialog from '@/components/popups/LikePostDialog.vue';
+import NewPostDialog from '@/components/popups/NewPostDialog.vue';
+import { Button } from '@/components/ui/button';
 import WalletConnect from '@/components/wallet/WalletConnect.vue';
 
+const wallet = useWallet();
+const popovers = usePopups();
+
 </script>
 
 <template>
@@ -53,9 +61,12 @@ import WalletConnect from '@/components/wallet/WalletConnect.vue';
         </div>
       </nav>
 
+      <Button class="w-[207px] xl:inline hidden" @click="popovers.show('newPost', {})" v-if="wallet.loggedIn.value">New post</Button>
       <WalletConnect />
+
       <LikePostDialog />
       <DislikePostDialog />
+      <NewPostDialog />
     </div>
 
     <div>Stuff here?</div>

packages/frontend-main/src/localization/index.ts

@@ -39,6 +39,7 @@ export const messages = {
             PopupTitles: {
                 likePost: 'Like Post',
                 dislikePost: 'Dislike Post',
+                newPost: 'New Post',
             },
         },
         feedbacks: {