refactor staking actions: consolidate buttons into a single StakeButton component and update staking info fetching logic

Author: QSchlegel

src/components/common/overall-layout/menus/multisig-wallet.tsx

@@ -1,18 +1,20 @@
-import { Banknote, Info, List, Signature, UserRoundPen } from "lucide-react";
+import { Banknote, Info, List, Signature, UserRoundPen, ChartNoAxesColumnIncreasing } from "lucide-react";
 import { useRouter } from "next/router";
 import MenuLink from "./menu-link";
 import usePendingTransactions from "@/hooks/usePendingTransactions";
 import useUserWallets from "@/hooks/useUserWallets";
 import { Badge } from "@/components/ui/badge";
 import { ChatBubbleIcon } from "@radix-ui/react-icons";
 import usePendingSignables from "@/hooks/usePendingSignables";
+import useMultisigWallet from "@/hooks/useMultisigWallet";
 
 export default function MenuWallet() {
   const router = useRouter();
   const baseUrl = `/wallets/${router.query.wallet as string | undefined}/`;
   const { wallets } = useUserWallets();
   const { transactions } = usePendingTransactions();
   const { signables } = usePendingSignables();
+  const { multisigWallet } = useMultisigWallet();
   if (!wallets) return;
   return (
     <nav className="grid h-full items-start px-2 text-sm font-medium lg:px-4">
@@ -51,6 +53,15 @@ export default function MenuWallet() {
             )}
           </div>
         </MenuLink>
+        {multisigWallet && multisigWallet.stakingEnabled() && <MenuLink
+          href={`${baseUrl}staking`}
+          className={
+            router.pathname == "/wallets/[wallet]/staking" ? "text-white" : ""
+          }
+        >
+          <ChartNoAxesColumnIncreasing className="h-6 w-6" />
+          Staking
+        </MenuLink>}
         <MenuLink
           href={`${baseUrl}assets`}
           className={

src/components/pages/wallet/staking/StakingActions/delegate.tsx

@@ -10,31 +10,36 @@ import { toast } from "@/hooks/use-toast";
 import { getTxBuilder } from "@/utils/get-tx-builder";
 import { getProvider } from "@/utils/get-provider";
 import useTransaction from "@/hooks/useTransaction";
-export default function RegisterButton({
+export default function StakeButton({
   stakingInfo,
   appWallet,
   mWallet,
   utxos,
   network,
   poolHex,
+  action,
 }: {
   stakingInfo: StakingInfo;
   appWallet: Wallet;
   mWallet: MultisigWallet;
   utxos: UTxO[];
   network: number;
   poolHex: string;
+  action: "register" | "deregister" | "delegate" | "withdrawal" | "registerAndDelegate";
 }) {
   const { newTransaction } = useTransaction();
   const [loading, setLoading] = useState(false);
 
-  async function register() {
+  async function Stake() {
     setLoading(true);
     try {
       if (!mWallet) throw new Error("Multisig Wallet could not be built.");
+      
       const rewardAddress = mWallet.getStakeAddress();
-      if (!rewardAddress)
-        throw new Error("Reward Address could not be built.");
+      if (!rewardAddress) throw new Error("Reward Address could not be built.");
+
+      const stakingScript = mWallet.getStakingScript();
+      if (!stakingScript) throw new Error("Staking Script could not be built.");
 
       const txBuilder = getTxBuilder(network);
       const selectedUtxos = utxos;
@@ -49,42 +54,73 @@ export default function RegisterButton({
           )
           .txInScript(appWallet.scriptCbor);
       }
-      txBuilder
-        .selectUtxosFrom(utxos)
-        .changeAddress(appWallet.address)
-        //.registerStakeCertificate(rewardAddress)
-        .delegateStakeCertificate(rewardAddress, poolHex);
 
+      const actionsMap = {
+        register: {
+          execute: () => txBuilder.registerStakeCertificate(rewardAddress),
+          description: "Register stake.",
+          successTitle: "Stake Registered",
+          successMessage: "Your stake address has been registered.",
+        },
+        deregister: {
+          execute: () => txBuilder.deregisterStakeCertificate(rewardAddress),
+          description: "Deregister stake.",
+          successTitle: "Stake Deregistered",
+          successMessage: "Your stake address has been deregistered.",
+        },
+        delegate: {
+          execute: () => txBuilder.delegateStakeCertificate(rewardAddress, poolHex),
+          description: "Delegate stake.",
+          successTitle: "Stake Delegated",
+          successMessage: "Your stake has been delegated.",
+        },
+        withdrawal: {
+          execute: () => txBuilder.withdrawal(rewardAddress, stakingInfo.rewards),
+          description: "Withdraw rewards.",
+          successTitle: "Rewards Withdrawn",
+          successMessage: "Your staking rewards have been withdrawn.",
+        },
+        registerAndDelegate: {
+          execute: () => {
+            txBuilder.registerStakeCertificate(rewardAddress);
+            txBuilder.delegateStakeCertificate(rewardAddress, poolHex);
+          },
+          description: "Register & delegate stake.",
+          successTitle: "Stake Registered & Delegated",
+          successMessage: "Your stake address has been registered and delegated.",
+        },
+      };
 
-      const paymentKeys = mWallet.getKeysByRole(0) ?? [];
-      for (const key of paymentKeys) {
-        txBuilder.requiredSignerHash(key.keyHash);
+      const actionConfig = actionsMap[action];
+      if (!actionConfig) {
+        throw new Error("Invalid staking action.");
       }
 
-      const stakingKeys = mWallet.getKeysByRole(2) ?? [];
-      for (const key of stakingKeys) {
-        txBuilder.requiredSignerHash(key.keyHash);
-      }
+      actionConfig.execute();
+
+      txBuilder
+        .selectUtxosFrom(utxos)
+        .changeAddress(appWallet.address)
+        .certificateScript(stakingScript);
 
       await newTransaction({
         txBuilder,
-        description: `Register stake.`,
+        description: actionConfig.description,
       });
 
       toast({
-        title: "Transaction Successful",
-        description: `Your Registration has been recorded.`,
+        title: actionConfig.successTitle,
+        description: actionConfig.successMessage,
         duration: 5000,
       });
-
     } catch (error) {
       if (
         error instanceof Error &&
         error.message.includes("User rejected transaction")
       ) {
         toast({
           title: "Transaction Aborted",
-          description: "You canceled the registration transaction.",
+          description: "You canceled the transaction.",
           duration: 5000,
         });
       } else {
@@ -117,11 +153,9 @@ export default function RegisterButton({
   }
 
   return (
-    <Button variant="outline" onClick={register} disabled={loading}>
-      {loading ? (
-        <Loader className="mr-2 h-4 w-4 animate-spin" />
-      ) : null}
-      Register
+    <Button variant="outline" onClick={Stake} disabled={loading}>
+      {loading ? <Loader className="mr-2 h-4 w-4 animate-spin" /> : null}
+      {action.charAt(0).toUpperCase() + action.slice(1)}
     </Button>
   );
 }

src/components/pages/wallet/staking/StakingActions/deregister.tsx

@@ -2,10 +2,7 @@ import CardUI from "@/components/ui/card-content";
 import UTxOSelector from "@/components/pages/wallet/new-transaction/utxoSelector";
 import { StakingInfo } from "../stakingInfoCard";
 import { Wallet } from "@/types/wallet";
-import DelegateButton from "./delegate";
-import RegisterButton from "./register";
-import DeregisterButton from "./deregister";
-import WithdrawalButton from "./withdrawal";
+import StakeButton from "./stake";
 import { UTxO } from "@meshsdk/core";
 import { useState } from "react";
 import { MultisigWallet } from "@/utils/multisigSDK";
@@ -29,40 +26,48 @@ export default function StakingActionCard({
   return (
     <CardUI title="Staking Actions">
       <div className="flex flex-wrap gap-2">
-        {stakingInfo.active && (
-          <RegisterButton
+        {!stakingInfo.active && (
+          <StakeButton
             stakingInfo={stakingInfo}
             appWallet={appWallet}
             mWallet={mWallet}
             utxos={selectedUtxos}
             network={network}
             poolHex={poolHex}
+            action="registerAndDelegate"
           />
         )}
-
         {stakingInfo.active && (
           <>
-            <DelegateButton
+            <StakeButton
               stakingInfo={stakingInfo}
               appWallet={appWallet}
+              mWallet={mWallet}
               utxos={selectedUtxos}
-              manualSelected={manualSelected}
+              network={network}
+              poolHex={poolHex}
+              action="delegate"
             />
-            <DeregisterButton
+            <StakeButton
               stakingInfo={stakingInfo}
               appWallet={appWallet}
+              mWallet={mWallet}
               utxos={selectedUtxos}
-              manualSelected={manualSelected}
+              network={network}
+              poolHex={poolHex}
+              action="deregister"
             />
           </>
         )}
-
         {Number(stakingInfo.rewards) > 0 && (
-          <WithdrawalButton
+          <StakeButton
             stakingInfo={stakingInfo}
             appWallet={appWallet}
+            mWallet={mWallet}
             utxos={selectedUtxos}
-            manualSelected={manualSelected}
+            network={network}
+            poolHex={poolHex}
+            action="withdrawal"
           />
         )}
       </div>

…llet/staking/StakingActions/register.tsx …/wallet/staking/StakingActions/stake.tsxsrc/components/pages/wallet/staking/StakingActions/register.tsx renamed to src/components/pages/wallet/staking/StakingActions/stake.tsx src/components/pages/wallet/staking/StakingActions/register.tsx renamed to src/components/pages/wallet/staking/StakingActions/stake.tsx

@@ -24,14 +24,14 @@ export default function PageStaking() {
   useEffect(() => {
     if (!address) return;
     blockchainProvider
-      .fetchAccountInfo(address)
+      .get(`/accounts/${address}`)
       .then((data) => {
         setStakingInfo({
-          poolId: data.poolId,
+          poolId: data.pool_id,
           active: data.active,
-          balance: data.balance,
-          rewards: data.rewards,
-          withdrawals: data.withdrawals,
+          balance: data.controlled_amount,
+          rewards: data.rewards_sum,
+          withdrawals: data.withdrawals_sum,
         });
       })
       .catch((err) => {
@@ -44,13 +44,6 @@ export default function PageStaking() {
           withdrawals: "NA",
         });
       });
-    blockchainProvider
-    .get(`/accounts/${address}/registrations`)
-    .then((data)=>{
-    })
-    .catch((err)=>{
-      console.error("failed:", err)
-    })
   }, [address, blockchainProvider]);
 
   if (!stakingInfo) return <p>Loading staking info...</p>;