feat(tangle-dapp): Implement useLsUpdateCommissionTx hook

apps/tangle-dapp/components/LiquidStaking/UpdateCommissionModal.tsx

@@ -7,8 +7,10 @@ import {
   ModalHeader,
   Typography,
 } from '@webb-tools/webb-ui-components';
-import { FC, useState } from 'react';
+import { FC, useCallback, useState } from 'react';
 
+import useLsUpdateCommissionTx from '../../data/liquidStaking/tangle/useLsUpdateCommissionTx';
+import { TxStatus } from '../../hooks/useSubstrateTx';
 import PercentageInput from '../PercentageInput';
 
 export type UpdateCommissionModalProps = {
@@ -25,6 +27,19 @@ const UpdateCommissionModal: FC<UpdateCommissionModalProps> = ({
   setIsOpen,
 }) => {
   const [commission, setCommission] = useState<number | null>(0);
+  const { execute, status } = useLsUpdateCommissionTx();
+
+  const handleUpdateCommissionClick = useCallback(() => {
+    if (
+      execute === null ||
+      commission === null ||
+      commission === currentCommission
+    ) {
+      return;
+    }
+
+    return execute({ poolId, commission });
+  }, [commission, currentCommission, execute, poolId]);
 
   return (
     <Modal>
@@ -53,16 +68,25 @@ const UpdateCommissionModal: FC<UpdateCommissionModalProps> = ({
           <Button
             isFullWidth
             variant="secondary"
+            isDisabled={status === TxStatus.PROCESSING}
             onClick={() => setIsOpen(false)}
           >
             Cancel
           </Button>
 
           <Button
             isFullWidth
-            isDisabled={commission === null || commission === currentCommission}
+            onClick={handleUpdateCommissionClick}
+            isLoading={status === TxStatus.PROCESSING}
+            loadingText="Processing"
+            isDisabled={
+              execute === null ||
+              commission === null ||
+              commission === currentCommission ||
+              status === TxStatus.PROCESSING
+            }
           >
-            Update
+            Update Commission
           </Button>
         </ModalFooter>
       </ModalContent>

apps/tangle-dapp/constants/index.ts

@@ -57,6 +57,7 @@ export enum TxName {
   LST_REDEEM = 'redeem',
   LST_REBOND = 'cancel unstake request',
   LST_WITHDRAW_REDEEM = 'withdraw redeemed tokens',
+  LST_UPDATE_COMMISSION = 'update commission',
   LS_LIQUIFIER_APPROVE = 'approve spending for liquifier',
   LS_LIQUIFIER_DEPOSIT = 'liquifier deposit',
   LS_LIQUIFIER_UNLOCK = 'liquifier unlock',

apps/tangle-dapp/data/liquidStaking/tangle/useLsUpdateCommissionTx.ts

@@ -0,0 +1,30 @@
+import { useCallback } from 'react';
+
+import { TxName } from '../../../constants';
+import {
+  SubstrateTxFactory,
+  useSubstrateTxWithNotification,
+} from '../../../hooks/useSubstrateTx';
+
+export type LsPoolUpdateCommissionTxContext = {
+  poolId: number;
+  commission: number;
+};
+
+const useLsUpdateCommissionTx = () => {
+  const substrateTxFactory: SubstrateTxFactory<LsPoolUpdateCommissionTxContext> =
+    useCallback(
+      async (api, _activeSubstrateAddress, { poolId, commission }) => {
+        return api.tx.lst.setCommission(poolId, commission);
+      },
+      [],
+    );
+
+  // TODO: Add EVM support once precompile(s) for the `lst` pallet are implemented on Tangle.
+  return useSubstrateTxWithNotification(
+    TxName.LST_UPDATE_COMMISSION,
+    substrateTxFactory,
+  );
+};
+
+export default useLsUpdateCommissionTx;

apps/tangle-dapp/hooks/useTxNotification.tsx

@@ -31,6 +31,7 @@ const SUCCESS_MESSAGES: Record<TxName, string> = {
   [TxName.LST_REDEEM]: 'Redeem request submitted',
   [TxName.LST_REBOND]: 'Unstake request cancelled',
   [TxName.LST_WITHDRAW_REDEEM]: 'Unstake request executed',
+  [TxName.LST_UPDATE_COMMISSION]: 'Updated commission rate',
   [TxName.LS_LIQUIFIER_DEPOSIT]: 'Liquifier deposit successful',
   [TxName.LS_LIQUIFIER_APPROVE]: 'Liquifier approval successful',
   [TxName.LS_LIQUIFIER_UNLOCK]: 'Liquifier unlock successful',