feat: improve gas fee detection

package.json

@@ -23,7 +23,8 @@
     "cosmjs-types": "^0.9.0",
     "next": "14.1.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-toastify": "^10.0.4"
   },
   "devDependencies": {
     "@stylistic/eslint-plugin": "^1.6.2",

src/app/layout.tsx

@@ -4,6 +4,8 @@ import { AbstraxionProvider } from "@burnt-labs/abstraxion";
 import "@burnt-labs/abstraxion/dist/index.css";
 import "@burnt-labs/ui/dist/index.css";
 import { Inter } from "next/font/google";
+import { ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
 
 import { StakingProvider } from "@/features/staking/context/provider";
 import {
@@ -33,6 +35,7 @@ export default function RootLayout({
         <AbstraxionProvider config={abstraxionConfig}>
           <StakingProvider>{children}</StakingProvider>
         </AbstraxionProvider>
+        <ToastContainer closeOnClick />
       </body>
     </html>
   );

src/features/staking/components/logged-in.tsx

@@ -5,6 +5,7 @@ import { Button } from "@burnt-labs/ui";
 import type { Validator } from "cosmjs-types/cosmos/staking/v1beta1/staking";
 import Link from "next/link";
 import { memo, useMemo, useState } from "react";
+import { toast } from "react-toastify";
 
 import {
   claimRewardsAction,
@@ -57,7 +58,10 @@ const ValidatorItem = ({
 function StakingPage() {
   const { account, staking } = useStaking();
   const [isLoading, setIsLoading] = useState(false);
-  const { delegations, tokens, unbondings, validators } = staking.state;
+
+  const { delegations, isInfoLoading, tokens, unbondings, validators } =
+    staking.state;
+
   const { client } = useAbstraxionSigningClient();
   const [, setShowAbstraxion] = useModal();
 
@@ -96,6 +100,7 @@ function StakingPage() {
           </div>
         )}
       </div>
+      {isInfoLoading && <div>Loading ...</div>}
       {!!delegations?.items.length && (
         <div>
           <div>Delegations:</div>
@@ -126,13 +131,20 @@ function StakingPage() {
                         validator: validator.operatorAddress,
                       };
 
-                      unstakeValidatorAction(
-                        addresses,
-                        client,
-                        staking,
-                      ).finally(() => {
-                        setIsLoading(false);
-                      });
+                      unstakeValidatorAction(addresses, client, staking)
+                        .then(() => {
+                          toast("Unstake successful", {
+                            type: "success",
+                          });
+                        })
+                        .catch(() => {
+                          toast("Unstake error", {
+                            type: "error",
+                          });
+                        })
+                        .finally(() => {
+                          setIsLoading(false);
+                        });
                     }}
                   >
                     Undelegate
@@ -150,11 +162,16 @@ function StakingPage() {
                           validator: delegation.validatorAddress,
                         };
 
-                        claimRewardsAction(addresses, client, staking).finally(
-                          () => {
+                        claimRewardsAction(addresses, client, staking)
+                          .then(() => {
+                            toast("Claim success", { type: "success" });
+                          })
+                          .catch(() => {
+                            toast("Claim error", { type: "error" });
+                          })
+                          .finally(() => {
                             setIsLoading(false);
-                          },
-                        );
+                          });
                       }}
                     >
                       Claim rewards
@@ -240,11 +257,20 @@ function StakingPage() {
                     validator: validator.operatorAddress,
                   };
 
-                  stakeValidatorAction(addresses, client, staking).finally(
-                    () => {
+                  stakeValidatorAction(addresses, client, staking)
+                    .then(() => {
+                      toast("Staking successful", {
+                        type: "success",
+                      });
+                    })
+                    .catch(() => {
+                      toast("Staking error", {
+                        type: "error",
+                      });
+                    })
+                    .finally(() => {
                       setIsLoading(false);
-                    },
-                  );
+                    });
                 }}
                 validator={validator}
               />

src/features/staking/context/actions.ts

@@ -15,6 +15,7 @@ import { sumAllCoins } from "../lib/core/coins";
 import {
   addDelegations,
   addUnbondings,
+  setIsInfoLoading,
   setTokens,
   setValidators,
 } from "./reducer";
@@ -25,6 +26,8 @@ export const fetchStakingDataAction = async (
   staking: StakingContextType,
 ) => {
   try {
+    staking.dispatch(setIsInfoLoading(true));
+
     const [balance, validators, delegations, unbondings] = await Promise.all([
       getBalance(address),
       getValidatorsList(),
@@ -102,6 +105,8 @@ export const fetchStakingDataAction = async (
         true,
       ),
     );
+
+    staking.dispatch(setIsInfoLoading(false));
   } catch (error) {
     console.error("error fetching staking data:", error);
   }
@@ -125,14 +130,11 @@ export const unstakeValidatorAction = async (
   client: AbstraxionSigningClient,
   staking: StakingContextType,
 ) => {
-  const result = await unstakeAmount(addresses, client, {
+  await unstakeAmount(addresses, client, {
     amount: "1000",
     denom: "uxion",
   });
 
-  // eslint-disable-next-line no-console
-  console.log("debug: actions.ts: result", result);
-
   await fetchStakingDataAction(addresses.delegator, staking);
 };
 
@@ -141,10 +143,7 @@ export const claimRewardsAction = async (
   client: AbstraxionSigningClient,
   staking: StakingContextType,
 ) => {
-  const result = await claimRewards(addresses, client);
-
-  // eslint-disable-next-line no-console
-  console.log("debug: actions.ts: result", result);
+  await claimRewards(addresses, client);
 
   await fetchStakingDataAction(addresses.delegator, staking);
 };
@@ -154,10 +153,7 @@ export const setRedelegateAction = async (
   client: AbstraxionSigningClient,
   staking: StakingContextType,
 ) => {
-  const result = await setRedelegate(delegatorAddress, client);
-
-  // eslint-disable-next-line no-console
-  console.log("debug: actions.ts: result", result);
+  await setRedelegate(delegatorAddress, client);
 
   await fetchStakingDataAction(delegatorAddress, staking);
 };

src/features/staking/context/hooks.ts

@@ -10,7 +10,8 @@ export const useStaking = () => {
   const staking = useContext(StakingContext);
 
   // It is important to not override the `current` object reference so it
-  // doesn't trigger more hooks than it should
+  // doesn't trigger more hooks than it should if it is added as a hook
+  // dependency
   stakingRef.current.state = staking.state;
   stakingRef.current.dispatch = staking.dispatch;
 

src/features/staking/context/reducer.ts

@@ -16,6 +16,10 @@ export type StakingAction =
       reset: boolean;
       type: "ADD_VALIDATORS";
     }
+  | {
+      content: StakingState["isInfoLoading"];
+      type: "SET_IS_INFO_LOADING";
+    }
   | {
       content: StakingState["tokens"];
       type: "SET_TOKENS";
@@ -31,6 +35,13 @@ export const setTokens = (tokens: Content<"SET_TOKENS">): StakingAction => ({
   type: "SET_TOKENS",
 });
 
+export const setIsInfoLoading = (
+  isInfoLoading: Content<"SET_IS_INFO_LOADING">,
+): StakingAction => ({
+  content: isInfoLoading,
+  type: "SET_IS_INFO_LOADING",
+});
+
 export const setValidators = (
   validators: Content<"ADD_VALIDATORS">,
   reset: boolean,
@@ -174,6 +185,13 @@ export const reducer = (state: StakingState, action: StakingAction) => {
       };
     }
 
+    case "SET_IS_INFO_LOADING": {
+      return {
+        ...state,
+        isInfoLoading: action.content,
+      };
+    }
+
     default:
       action satisfies never;
 

src/features/staking/context/state.tsx

@@ -27,6 +27,7 @@ type Delegation = {
 
 export type StakingState = {
   delegations: Paginated<Delegation>;
+  isInfoLoading: boolean;
   tokens: Coin | null;
   unbondings: Paginated<Unbonding>;
   validators: Paginated<Validator>;
@@ -39,6 +40,7 @@ export type StakingContextType = {
 
 export const defaultState: StakingState = {
   delegations: null,
+  isInfoLoading: false,
   tokens: null,
   unbondings: null,
   validators: null,