Improve condition for Commitment button and display commitment end date

src/pages/Staking/StakeDetailsPage/index.tsx

@@ -75,6 +75,12 @@ const StakeDetailsPage: FC = () => {
     stakingProviderAddress || AddressZero
   )
 
+  const endCommitment = tacoApp.stakingProviderInfo?.endCommitment
+  const isCommited = (Number(endCommitment) ?? 0) > 0
+  const endCommitmentDate = new Date(
+    (Number(endCommitment) ?? 0) * 1000
+  ).toLocaleDateString()
+
   const isInActiveStake = BigNumber.from(stake?.totalInTStake ?? "0").isZero()
 
   const { total: rewardsForStake } = useAppSelector((state) =>
@@ -166,10 +172,12 @@ const StakeDetailsPage: FC = () => {
           </StakeDetailRow>
         </Stack>
       </SimpleGrid>
-      {tacoApp.isAuthorized && (
+      {tacoApp.isAuthorized && !isCommited ? (
         <Button onClick={handleCommitToTaco} type="submit">
           Commit to TACo
         </Button>
+      ) : (
+        <p>Your commitment ends on {endCommitmentDate}</p>
       )}
     </Card>
   ) : (

src/store/staking-applications/slice.ts

@@ -287,6 +287,7 @@ export const stakingApplicationsSlice = createSlice({
           deauthorizationCreatedAt: undefined,
           isOperatorInPool: undefined,
           operator: AddressZero,
+          stakingProviderInfo: undefined,
         }
 
         state.randomBeacon.stakingProviders.data[stakingProvider] = {

src/threshold-ts/applications/index.ts

@@ -38,6 +38,20 @@ export interface AuthorizationParameters<
   authorizationDecreaseChangePeriod: NumberType
 }
 
+export interface StakingProviderInfo<
+  NumberType extends BigNumberish = BigNumber
+> {
+  operator: string
+  operatorConfirmed: boolean
+  operatorStartTimestamp: NumberType
+  authorized: NumberType
+  deauthorizing: NumberType
+  endDeauthorization: NumberType
+  tReward: NumberType
+  rewardPerTokenPaid: NumberType
+  endCommitment: NumberType
+}
+
 export interface StakingProviderAppInfo<
   NumberType extends BigNumberish = BigNumber
 > {
@@ -75,6 +89,8 @@ export interface StakingProviderAppInfo<
    * it means that the operator for a given staking provider is not set.
    */
   isOperatorInPool: boolean | undefined
+
+  stakingProviderInfo?: StakingProviderInfo | undefined
 }
 
 /**
@@ -202,6 +218,8 @@ export interface IApplication {
    */
   stakingProviderToOperator(stakingProvider: string): Promise<string>
 
+  stakingProviderInfo(stakingProvider: string): Promise<StakingProviderInfo>
+
   /**
    * Used to get staking provider address mapped to the given registered
    * operator address
@@ -314,6 +332,15 @@ export class Application implements IApplication {
       },
     ]
 
+    const tacoCalls: ContractCall[] = [
+      {
+        interface: this.contract.interface,
+        address: this.contract.address,
+        method: "stakingProviderInfo",
+        args: [stakingProvider],
+      },
+    ]
+
     const [
       authorizedStake,
       pendingAuthorizationDecrease,
@@ -323,6 +350,14 @@ export class Application implements IApplication {
       [operator],
     ] = await this._multicall.aggregate(calls)
 
+    let stakingProviderInfo
+    try {
+      ;[stakingProviderInfo] = await this._multicall.aggregate(tacoCalls)
+    } catch (error) {
+      console.warn("Failed to aggregate tacoCalls", error)
+      stakingProviderInfo = undefined
+    }
+
     let isOperatorInPool = undefined
     if (operator && !isAddressZero(operator)) {
       try {
@@ -368,6 +403,7 @@ export class Application implements IApplication {
       deauthorizationCreatedAt,
       isOperatorInPool,
       operator,
+      stakingProviderInfo,
     }
   }
 
@@ -448,6 +484,12 @@ export class Application implements IApplication {
     )
   }
 
+  stakingProviderInfo = async (
+    stakingProvider: string
+  ): Promise<StakingProviderInfo> => {
+    return await this._application.stakingProviderInfo(stakingProvider)
+  }
+
   stakingProviderToOperator = async (
     stakingProvider: string
   ): Promise<string> => {