From bb215210ae3f065fea64719e2eb2ec45240c9662 Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Thu, 9 Jan 2025 10:28:37 +0300
Subject: [PATCH 1/2] Changed behavior of proposals vote button

---
 .../_components/proposal-vote-btn/index.tsx   | 25 ++++++++-----------
 1 file changed, 11 insertions(+), 14 deletions(-)

diff --git a/src/app/proposals/_components/proposal-vote-btn/index.tsx b/src/app/proposals/_components/proposal-vote-btn/index.tsx
index 531ed9444..4d98c3812 100644
--- a/src/app/proposals/_components/proposal-vote-btn/index.tsx
+++ b/src/app/proposals/_components/proposal-vote-btn/index.tsx
@@ -1,12 +1,12 @@
 import React, { useMemo } from "react";
 import "./_index.scss";
 import { useGlobalStore } from "@/core/global-store";
-import { chevronUpSvg } from "@ui/svg";
 import { KeyOrHotDialog, LoginRequired } from "@/features/shared";
 import { useProposalVoteByKey, useProposalVoteByKeychain } from "@/api/mutations/proposal-vote";
 import { proposalVoteHot } from "@/api/operations";
 import { getProposalVotesQuery } from "@/api/queries";
-import { UilSpinner } from "@tooni/iconscout-unicons-react";
+import { UilArrowUp } from "@tooni/iconscout-unicons-react";
+import { Button } from "@ui/button";
 
 interface Props {
   proposal: number;
@@ -40,11 +40,7 @@ export function ProposalVoteBtn({ proposal }: Props) {
   if (!activeUser) {
     return (
       <LoginRequired>
-        <div className="proposal-vote-btn">
-          <div className={cls}>
-            <span className="btn-inner">{chevronUpSvg}</span>
-          </div>
-        </div>
+        <Button icon={<UilArrowUp />} outline={true} noPadding={true} className="w-[34px]" />
       </LoginRequired>
     );
   }
@@ -55,13 +51,14 @@ export function ProposalVoteBtn({ proposal }: Props) {
       onKc={() => voteByKeychain({})}
       onHot={() => proposalVoteHot(activeUser?.username, proposal, false)}
     >
-      <div className="proposal-vote-btn">
-        <div className={cls}>
-          <span className="btn-inner">
-            {isVotingByKey ? <UilSpinner className="w-4 h-4 animate-spin" /> : chevronUpSvg}
-          </span>
-        </div>
-      </div>
+      <Button
+        disabled={isVotingByKey || isVotingByKeychain || isLoading}
+        icon={<UilArrowUp />}
+        outline={!voted}
+        noPadding={true}
+        className="w-[34px]"
+        isLoading={isVotingByKey}
+      />
     </KeyOrHotDialog>
   );
 }

From 4c5638c01c43f5fd15c29e2f3aacd421b572ef96 Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Thu, 9 Jan 2025 10:53:57 +0300
Subject: [PATCH 2/2] Fixed proposal vote button

---
 src/api/mutations/proposal-vote.ts            | 54 +++++++++++++++----
 .../_components/proposal-vote-btn/index.tsx   | 10 ++--
 2 files changed, 47 insertions(+), 17 deletions(-)

diff --git a/src/api/mutations/proposal-vote.ts b/src/api/mutations/proposal-vote.ts
index 9e82d3aac..cf2837d11 100644
--- a/src/api/mutations/proposal-vote.ts
+++ b/src/api/mutations/proposal-vote.ts
@@ -1,5 +1,5 @@
 import { InfiniteData, useMutation, useQueryClient } from "@tanstack/react-query";
-import { formatError, proposalVote } from "@/api/operations";
+import { formatError } from "@/api/operations";
 import { Operation, PrivateKey } from "@hiveio/dhive";
 import { client as hiveClient } from "@/api/hive";
 import { useGlobalStore } from "@/core/global-store";
@@ -14,7 +14,7 @@ export function useProposalVoteByKey(proposalId: number) {
 
   return useMutation({
     mutationKey: ["proposalVote", proposalId],
-    mutationFn: ({ key, approve }: { key: PrivateKey; approve?: boolean }) => {
+    mutationFn: async ({ key, approve }: { key: PrivateKey; approve?: boolean }) => {
       const op: Operation = [
         "update_proposal_votes",
         {
@@ -25,9 +25,9 @@ export function useProposalVoteByKey(proposalId: number) {
         }
       ];
 
-      return hiveClient.broadcast.sendOperations([op], key);
+      return [approve ?? false, await hiveClient.broadcast.sendOperations([op], key)] as const;
     },
-    onSuccess: () => {
+    onSuccess: ([approve]) => {
       queryClient.setQueryData<InfiniteData<ProposalVote[]>>(
         [QueryIdentifiers.PROPOSAL_VOTES, proposalId, activeUser?.username, 1],
         (data) => {
@@ -38,10 +38,14 @@ export function useProposalVoteByKey(proposalId: number) {
           return {
             pages: [
               [
-                {
-                  id: 1,
-                  voter: activeUser?.username ?? ""
-                }
+                ...(approve
+                  ? [
+                      {
+                        id: 1,
+                        voter: activeUser?.username ?? ""
+                      }
+                    ]
+                  : [])
               ]
             ],
             pageParams: [""]
@@ -55,10 +59,11 @@ export function useProposalVoteByKey(proposalId: number) {
 
 export function useProposalVoteByKeychain(proposalId: number) {
   const activeUser = useGlobalStore((s) => s.activeUser);
+  const queryClient = useQueryClient();
 
   return useMutation({
     mutationKey: ["proposalVoteByKeychain", proposalId],
-    mutationFn: ({ approve }: { approve?: boolean }) => {
+    mutationFn: async ({ approve }: { approve?: boolean }) => {
       if (!activeUser) {
         throw new Error("Active user not found");
       }
@@ -73,7 +78,36 @@ export function useProposalVoteByKeychain(proposalId: number) {
         }
       ];
 
-      return keychain.broadcast(activeUser.username, [op], "Active");
+      return [
+        approve ?? false,
+        await keychain.broadcast(activeUser.username, [op], "Active")
+      ] as const;
+    },
+    onSuccess: ([approve]) => {
+      queryClient.setQueryData<InfiniteData<ProposalVote[]>>(
+        [QueryIdentifiers.PROPOSAL_VOTES, proposalId, activeUser?.username, 1],
+        (data) => {
+          if (!data) {
+            return data;
+          }
+
+          return {
+            pages: [
+              [
+                ...(approve
+                  ? [
+                      {
+                        id: 1,
+                        voter: activeUser?.username ?? ""
+                      }
+                    ]
+                  : [])
+              ]
+            ],
+            pageParams: [""]
+          };
+        }
+      );
     },
     onError: (e) => error(...formatError(e))
   });
diff --git a/src/app/proposals/_components/proposal-vote-btn/index.tsx b/src/app/proposals/_components/proposal-vote-btn/index.tsx
index 4d98c3812..cc8082228 100644
--- a/src/app/proposals/_components/proposal-vote-btn/index.tsx
+++ b/src/app/proposals/_components/proposal-vote-btn/index.tsx
@@ -33,10 +33,6 @@ export function ProposalVoteBtn({ proposal }: Props) {
   const { mutateAsync: voteByKeychain, isPending: isVotingByKeychain } =
     useProposalVoteByKeychain(proposal);
 
-  const cls = `btn-proposal-vote btn-up-vote vote-btn-lg ${
-    isVotingByKey || isVotingByKeychain || isLoading ? "in-progress" : ""
-  } ${voted ? "voted" : ""}`;
-
   if (!activeUser) {
     return (
       <LoginRequired>
@@ -47,9 +43,9 @@ export function ProposalVoteBtn({ proposal }: Props) {
 
   return (
     <KeyOrHotDialog
-      onKey={(key) => voteByKey({ key })}
-      onKc={() => voteByKeychain({})}
-      onHot={() => proposalVoteHot(activeUser?.username, proposal, false)}
+      onKey={(key) => voteByKey({ key, approve: !voted })}
+      onKc={() => voteByKeychain({ approve: !voted })}
+      onHot={() => proposalVoteHot(activeUser?.username, proposal, !voted)}
     >
       <Button
         disabled={isVotingByKey || isVotingByKeychain || isLoading}