fix(feed): Add loader when Gno react

packages/components/socialFeed/SocialActions/DislikeButton.tsx

@@ -17,16 +17,16 @@ export const DislikeButton: FC<{
   post: Post;
   setPost: Dispatch<SetStateAction<Post>>;
 }> = ({ post, setPost }) => {
-  const { handleReaction, isPostMutationLoading } = useSocialReactions({
+  const { handleReact, isReactLoading } = useSocialReactions({
     post,
     setPost,
   });
 
-  if (isPostMutationLoading)
+  if (isReactLoading)
     return <ActivityIndicator animating color={secondaryColor} size={32} />;
   return (
     <TouchableOpacity
-      onPress={() => handleReaction(DISLIKE_EMOJI)}
+      onPress={() => handleReact(DISLIKE_EMOJI)}
       style={{
         flexDirection: "row",
         alignItems: "center",

packages/components/socialFeed/SocialActions/LikeButton.tsx

@@ -17,16 +17,16 @@ export const LikeButton: FC<{
   post: Post;
   setPost: Dispatch<SetStateAction<Post>>;
 }> = ({ post, setPost }) => {
-  const { handleReaction, isPostMutationLoading } = useSocialReactions({
+  const { handleReact, isReactLoading } = useSocialReactions({
     post,
     setPost,
   });
 
-  if (isPostMutationLoading)
+  if (isReactLoading)
     return <ActivityIndicator animating color={secondaryColor} size={32} />;
   return (
     <TouchableOpacity
-      onPress={() => handleReaction(LIKE_EMOJI)}
+      onPress={() => handleReact(LIKE_EMOJI)}
       style={{
         flexDirection: "row",
         alignItems: "center",

packages/components/socialFeed/SocialCard/SocialCardFooter.tsx

@@ -34,7 +34,7 @@ export const SocialCardFooter: FC<{
 }) => {
   const wallet = useSelectedWallet();
   const postNetwork = getNetwork(post.networkId);
-  const { handleReaction, isPostMutationLoading } = useSocialReactions({
+  const { handleReact, isReactLoading } = useSocialReactions({
     post,
     setPost,
   });
@@ -44,8 +44,8 @@ export const SocialCardFooter: FC<{
       <Reactions
         nbShown={nbReactionsShown(cardWidth)}
         reactions={post.reactions}
-        onPressReaction={handleReaction}
-        isLoading={isPostMutationLoading}
+        onPressReaction={handleReact}
+        isLoading={isReactLoading}
       />
 
       <SpacerRow size={1.5} />
@@ -58,8 +58,8 @@ export const SocialCardFooter: FC<{
         }}
       >
         <EmojiSelector
-          onEmojiSelected={handleReaction}
-          isLoading={isPostMutationLoading}
+          onEmojiSelected={handleReact}
+          isLoading={isReactLoading}
         />
         {isPostConsultation && handleReply && (
           <>

packages/hooks/feed/useSocialReactions.ts

@@ -1,11 +1,12 @@
 import { GnoJSONRPCProvider } from "@gnolang/gno-js-client";
-import { Dispatch, SetStateAction } from "react";
+import { Dispatch, SetStateAction, useEffect, useState } from "react";
 
 import { useFeedPosting } from "./useFeedPosting";
 import useSelectedWallet from "../useSelectedWallet";
 
 import { Post } from "@/api/feed/v1/feed";
 import { signingSocialFeedClient } from "@/client-creators/socialFeedClient";
+import { useFeedbacks } from "@/context/FeedbacksProvider";
 import { useWalletControl } from "@/context/WalletControlProvider";
 import { useTeritoriSocialFeedReactPostMutation } from "@/contracts-clients/teritori-social-feed/TeritoriSocialFeed.react-query";
 import {
@@ -31,6 +32,7 @@ export const useSocialReactions = ({
   setPost: Dispatch<SetStateAction<Post>>;
 }) => {
   const selectedWallet = useSelectedWallet();
+  const { setToast } = useFeedbacks();
   const userId = selectedWallet?.userId;
   const { showNotEnoughFundsModal, showConnectWalletModal } =
     useWalletControl();
@@ -40,18 +42,32 @@ export const useSocialReactions = ({
     userId,
     postCategory,
   );
-  const { mutate: postMutate, isLoading: isPostMutationLoading } =
+  const { mutate: postMutate, isLoading: isReactLoading } =
     useTeritoriSocialFeedReactPostMutation({
       onSuccess(_data, variables) {
         const reactions = getUpdatedReactions(
           post.reactions,
           variables.msg.icon,
         );
-
         setPost({ ...post, reactions });
       },
+      onError(err) {
+        console.error(err);
+        setToast({
+          mode: "normal",
+          type: "error",
+          title: "Failed to react on Cosmos network",
+          message: err.message,
+        });
+      },
     });
-  const cosmosReaction = async (emoji: string, walletAddress: string) => {
+  const [isLoading, setLoading] = useState(false);
+
+  useEffect(() => {
+    setLoading(isReactLoading);
+  }, [isReactLoading]);
+
+  const reactOnCosmos = async (emoji: string, walletAddress: string) => {
     const client = await signingSocialFeedClient({
       networkId: post.networkId,
       walletAddress,
@@ -61,12 +77,13 @@ export const useSocialReactions = ({
       client,
       msg: {
         icon: emoji,
-        identifier: post.localIdentifier,
+        identifier: "post.localIdentifier",
         up: true,
       },
     });
   };
-  const gnoReaction = async (emoji: string, rpcEndpoint: string) => {
+
+  const reactOnGno = async (emoji: string, rpcEndpoint: string) => {
     const gnoNetwork = mustGetGnoNetwork(post.networkId);
     const vmCall = {
       caller: selectedWallet?.address || "",
@@ -75,31 +92,48 @@ export const useSocialReactions = ({
       func: "ReactPost",
       args: [TERITORI_FEED_ID, post.id.split("-")[1], emoji, "true"],
     };
-    const txHash = await adenaDoContract(
-      post.networkId,
-      [{ type: AdenaDoContractMessageType.CALL, value: vmCall }],
-      {
-        gasWanted: 2_000_000,
-      },
-    );
-    const provider = new GnoJSONRPCProvider(rpcEndpoint);
-    // Wait for tx done
-    await provider.waitForTransaction(txHash);
-    const reactions = [...post.reactions];
-    const currentReactionIdx = reactions.findIndex((r) => r.icon === emoji);
 
-    if (currentReactionIdx > -1) {
-      reactions[currentReactionIdx].count++;
-    } else {
-      reactions.push({
-        icon: emoji,
-        count: 1,
-        ownState: true,
-      });
+    try {
+      setLoading(true);
+      const txHash = await adenaDoContract(
+        post.networkId,
+        [{ type: AdenaDoContractMessageType.CALL, value: vmCall }],
+        {
+          gasWanted: 2_000_000,
+        },
+      );
+      const provider = new GnoJSONRPCProvider(rpcEndpoint);
+      // Wait for tx done
+      await provider.waitForTransaction(txHash);
+      const reactions = [...post.reactions];
+      const currentReactionIdx = reactions.findIndex((r) => r.icon === emoji);
+
+      if (currentReactionIdx > -1) {
+        reactions[currentReactionIdx].count++;
+      } else {
+        reactions.push({
+          icon: emoji,
+          count: 1,
+          ownState: true,
+        });
+      }
+      setPost({ ...post, reactions });
+    } catch (err) {
+      console.error(err);
+      if (err instanceof Error) {
+        setToast({
+          mode: "normal",
+          type: "error",
+          title: "Failed to react on Gno network",
+          message: err.message,
+        });
+      }
+    } finally {
+      setLoading(false);
     }
-    setPost({ ...post, reactions });
   };
-  const handleReaction = async (emoji: string) => {
+
+  const handleReact = async (emoji: string) => {
     const action =
       emoji === LIKE_EMOJI
         ? "Like"
@@ -126,11 +160,11 @@ export const useSocialReactions = ({
     }
     const network = getNetwork(post.networkId);
     if (network?.kind === NetworkKind.Gno) {
-      gnoReaction(emoji, network?.endpoint || "");
+      reactOnGno(emoji, network?.endpoint || "");
     } else {
-      cosmosReaction(emoji, selectedWallet.address);
+      reactOnCosmos(emoji, selectedWallet.address);
     }
   };
 
-  return { handleReaction, isPostMutationLoading };
+  return { handleReact, isReactLoading: isLoading };
 };

packages/screens/Mini/Feed/components/PostActions.tsx

@@ -20,15 +20,15 @@ type CardFooterProps = {
 
 export function PostActions({ post, setPost }: CardFooterProps) {
   const wallet = useSelectedWallet();
-  const { handleReaction, isPostMutationLoading } = useSocialReactions({
+  const { handleReact, isReactLoading } = useSocialReactions({
     post,
     setPost,
   });
   const [loading, setLoading] = useState(false);
 
   const handleEmojiReactions = async (emoji: string) => {
     setLoading(true);
-    await handleReaction(emoji);
+    await handleReact(emoji);
     setLoading(false);
   };
 
@@ -53,10 +53,10 @@ export function PostActions({ post, setPost }: CardFooterProps) {
       >
         <PostReactions
           reactions={post.reactions}
-          onPressReaction={handleReaction}
+          onPressReaction={handleReact}
         />
         <SpacerRow size={0.75} />
-        {loading || isPostMutationLoading ? (
+        {loading || isReactLoading ? (
           <Spinner size={14} />
         ) : (
           <EmojiSelector