feat: support canceling all unstakings

README.md

@@ -1,4 +1,4 @@
-# Xion Staking
+# XION Staking
 
-A proof of concept application to stake tokens in Xion, using the native
+A proof of concept application to stake tokens in XION, using the native
 authentication via the dashboard.

src/features/core/components/base.tsx

@@ -95,7 +95,7 @@ export const ButtonPill = ({
     {...props}
     className={[
       "cursor-pointer rounded-full bg-bg-550 px-[8px] py-[4px] text-white hover:bg-bg-600 disabled:cursor-not-allowed disabled:bg-bg-600 disabled:text-typo-150",
-      variant === "danger" ? "[&]:text-danger" : "",
+      variant === "danger" ? "[&]:bg-dangerBg [&]:text-danger" : "",
       className,
     ].join(" ")}
   />

src/features/staking/components/delegation-details.tsx

@@ -254,8 +254,8 @@ const UnbondingRow = ({
           onClick={() => {
             staking.dispatch(
               setModalOpened({
-                content: { unbonding },
-                type: "cancel-staking",
+                content: { unbondings: [unbonding] },
+                type: "cancel-unstaking",
               }),
             );
           }}

src/features/staking/components/modals/cancel-unstaking.tsx

@@ -6,10 +6,10 @@ import CommonModal, {
   ModalDescription,
 } from "@/features/core/components/common-modal";
 
-import { cancelUnstakingAction } from "../../context/actions";
+import { fetchUserDataAction } from "../../context/actions";
 import { useStaking } from "../../context/hooks";
 import { setModalOpened } from "../../context/reducer";
-import type { StakeAddresses } from "../../lib/core/tx";
+import { type StakeAddresses, cancelUnbonding } from "../../lib/core/tx";
 
 type Step = "completed" | "confirm";
 
@@ -24,13 +24,13 @@ const CancelUnstakingModal = () => {
 
   const { modal } = staking.state;
 
-  const isOpen = modal?.type === "cancel-staking";
+  const isOpen = modal?.type === "cancel-unstaking";
 
   if (!isOpen) return null;
 
-  const { unbonding } = modal?.content || {};
+  const { unbondings } = modal?.content || {};
 
-  if (!unbonding) return null;
+  if (!unbondings?.length) return null;
 
   const content = (() => {
     if (currentStep === "confirm") {
@@ -52,14 +52,21 @@ const CancelUnstakingModal = () => {
 
               setIsLoading(true);
 
-              const addresses: StakeAddresses = {
-                delegator: account.bech32Address,
-                validator: unbonding.validator,
-              };
+              unbondings
+                .reduce(async (promise, unbonding) => {
+                  await promise;
+
+                  const addresses: StakeAddresses = {
+                    delegator: account.bech32Address,
+                    validator: unbonding.validator,
+                  };
+
+                  await cancelUnbonding(addresses, unbonding, client);
+                }, Promise.resolve())
+                .then(() => {
+                  // Don't await for this so the button can be enabled earlier
+                  fetchUserDataAction(account.bech32Address, staking);
 
-              cancelUnstakingAction(addresses, unbonding, client, staking)
-                .then((fetchFn) => {
-                  fetchFn();
                   setStep("completed");
                 })
                 .catch(() => {

src/features/staking/components/validator-delegation.tsx

@@ -71,6 +71,7 @@ export default function ValidatorDelegation() {
   const totalRewards = getTotalRewards(null, staking.state);
 
   const canShowDetail = getCanShowDetails(staking.state);
+  const unbondings = staking.state.unbondings?.items || [];
 
   const content = !isConnected ? (
     <div className="flex h-[220px] min-w-[1000px] flex-col items-center justify-center gap-[32px] rounded-[24px] bg-bg-600 uppercase">
@@ -163,6 +164,28 @@ export default function ValidatorDelegation() {
             {userTotalUnbondings ? formatXionToUSD(userTotalUnbondings) : "-"}
           </Heading8>
         </div>
+        {!!unbondings?.length && (
+          <div className="flex h-full flex-row items-end justify-end text-right">
+            <span>
+              <ButtonPill
+                className="text-[14px]"
+                onClick={() => {
+                  staking.dispatch(
+                    setModalOpened({
+                      content: {
+                        unbondings,
+                      },
+                      type: "cancel-unstaking",
+                    }),
+                  );
+                }}
+                variant="danger"
+              >
+                Cancel Unstake
+              </ButtonPill>
+            </span>
+          </div>
+        )}
       </div>
     </div>
   );

src/features/staking/context/actions.ts

@@ -13,7 +13,7 @@ import {
 import type { AbstraxionSigningClient } from "../lib/core/client";
 import { sumAllCoins } from "../lib/core/coins";
 import type { StakeAddresses } from "../lib/core/tx";
-import { cancelUnbonding, stakeAmount, unstakeAmount } from "../lib/core/tx";
+import { stakeAmount, unstakeAmount } from "../lib/core/tx";
 import {
   addDelegations,
   addUnbondings,
@@ -172,19 +172,6 @@ export const stakeValidatorAction = async (
   };
 };
 
-export const cancelUnstakingAction = async (
-  addresses: StakeAddresses,
-  unbonding: Unbonding,
-  client: AbstraxionSigningClient,
-  staking: StakingContextType,
-) => {
-  await cancelUnbonding(addresses, unbonding, client);
-
-  return async () => {
-    await fetchUserDataAction(addresses.delegator, staking);
-  };
-};
-
 export const unstakeValidatorAction = async (
   addresses: StakeAddresses,
   amount: Coin,

src/features/staking/context/selectors.ts

@@ -105,16 +105,16 @@ export const getAllValidators = (
   Object.values(state.validators)
     .map((v) => v?.items)
     .flat()
-    .reduce((acc, v) => {
-      if (!v) {
-        return acc;
-      }
+    .reduce(
+      (acc, v) => {
+        if (v) {
+          acc[v.operatorAddress] = v;
+        }
 
-      return {
-        ...acc,
-        [v.operatorAddress]: v,
-      };
-    }, state.extraValidators);
+        return acc;
+      },
+      { ...state.extraValidators },
+    );
 
 // As discussed internally, in XION the APR is the same as the inflation
 export const getAPR = (state: StakingState) =>

src/features/staking/context/state.tsx

@@ -35,8 +35,8 @@ type ModalContent =
       type: "rewards";
     }
   | {
-      content: { unbonding: Unbonding };
-      type: "cancel-staking";
+      content: { unbondings: Unbonding[] };
+      type: "cancel-unstaking";
     }
   | {
       content: { validator: Validator };

tailwind.config.ts

@@ -19,6 +19,7 @@ const config: Config = {
           600: "#1A1A1A",
         },
         danger: "#D74506",
+        dangerBg: "#402217",
         success: "#04C700",
         successBg: "#04C7001A",
         typo: {