Merge pull request #636 from threshold-network/feature/authorization-…

…events-update

Update contract for AuthorizationIncreased event

tBTC and RB app contracts define `AuthorizationIncreased` events with the exact signature than those from the staking contract, so for their particular case, listening for app events work. However, this is problematic for the TACo app contract that doesn't define them in the same way. For the sake of consistency contract-providing hook (`useStakingAppContract` to `useTStakingContract`) has been replaced. Moreover `getStakingAppLabel` utility set has been refactored with unit tests included.

src/App.tsx

@@ -68,8 +68,7 @@ const Web3EventHandlerComponent = () => {
   useSubscribeToStakedEvent()
   useSubscribeToUnstakedEvent()
   useSubscribeToToppedUpEvent()
-  useSubscribeToAuthorizationIncreasedEvent("tbtc")
-  useSubscribeToAuthorizationIncreasedEvent("randomBeacon")
+  useSubscribeToAuthorizationIncreasedEvent()
   useSubscribeToAuthorizationDecreaseApprovedEvent("tbtc")
   useSubscribeToAuthorizationDecreaseApprovedEvent("randomBeacon")
   useSubscribeToAuthorizationDecreaseRequestedEvent("tbtc")

src/components/Modal/DeauthorizeApplicationModal/InititateDeauthorization.tsx

@@ -24,7 +24,7 @@ import shortenAddress from "../../../utils/shortenAddress"
 import TokenBalance from "../../TokenBalance"
 import { StakingAppName } from "../../../store/staking-applications"
 import { useInitiateDeauthorization } from "../../../hooks/staking-applications"
-import { getSakingAppLabel } from "../../../utils/getStakingAppLabel"
+import { getStakingAppLabelFromAppName } from "../../../utils/getStakingAppLabel"
 import ModalCloseButton from "../ModalCloseButton"
 import { StakingProviderAppInfo } from "../../../threshold-ts/applications"
 
@@ -62,7 +62,7 @@ const InitiateDeauthorization: FC<
         <InfoBox variant="modal">
           <H5 mb={4}>
             You're about to initiate the decrease of your{" "}
-            {getSakingAppLabel(stakingAppName)} authorization.
+            {getStakingAppLabelFromAppName(stakingAppName)} authorization.
           </H5>
           <BodyLg>
             Initiation and confirmation of deauthorization is a two step action.

src/components/Modal/StakingApplications/AuthorizeStakingApps.tsx

@@ -29,7 +29,7 @@ import {
   selectStakingAppByStakingProvider,
   StakingAppName,
 } from "../../../store/staking-applications"
-import { getSakingAppLabel } from "../../../utils/getStakingAppLabel"
+import { getStakingAppLabelFromAppName } from "../../../utils/getStakingAppLabel"
 import ModalCloseButton from "../ModalCloseButton"
 
 export type AuthorizeAppsProps = BaseModalProps & {
@@ -125,7 +125,7 @@ const StakingApplicationToAuth: FC<{
     <Card>
       <LabelSm mb="4">
         <CheckCircleIcon color="green.500" verticalAlign="top" mr="2" />
-        {getSakingAppLabel(appName)} app - {percentage}
+        {getStakingAppLabelFromAppName(appName)} app - {percentage}
       </LabelSm>
       <BodyMd mb="3">Authorization Amount</BodyMd>
       <TokenBalance

src/components/Modal/StakingApplications/StakingApplicationsAuthorized.tsx

@@ -32,7 +32,7 @@ import { formatTokenAmount } from "../../../utils/formatAmount"
 import { ExplorerDataType } from "../../../utils/createEtherscanLink"
 import { ExternalHref } from "../../../enums"
 import { BaseModalProps } from "../../../types"
-import { getStakingAppNameFromAddress } from "../../../utils/getStakingAppLabel"
+import { getStakingAppNameFromAppAddress } from "../../../utils/getStakingAppLabel"
 import StakingTimeline from "../../StakingTimeline"
 import ButtonLink from "../../ButtonLink"
 import ModalCloseButton from "../ModalCloseButton"
@@ -79,7 +79,7 @@ const StakingApplicationsAuthorizedBase: FC<
           {authorizedStakingApplications.map((_) => (
             <ListItem key={_.address}>
               <HStack justifyContent="space-between">
-                <BodySm>{`${getStakingAppNameFromAddress(
+                <BodySm>{`${getStakingAppNameFromAppAddress(
                   _.address
                 )} Authorization Amount`}</BodySm>
                 <BodySm>{`${formatTokenAmount(_.amount)} T (${formatPercentage(

src/hooks/staking-applications/useSubscribeToAuthorizationIncreasedEvent.ts

@@ -1,22 +1,22 @@
+import { stakingApplicationsSlice } from "../../store/staking-applications"
+import { getStakingAppNameFromAppAddress } from "../../utils/getStakingAppLabel"
 import {
-  stakingApplicationsSlice,
-  StakingAppName,
-} from "../../store/staking-applications"
-import { useSubscribeToContractEvent } from "../../web3/hooks"
+  useSubscribeToContractEvent,
+  useTStakingContract,
+} from "../../web3/hooks"
 import { useAppDispatch } from "../store"
-import { useStakingAppContract } from "./useStakingAppContract"
 
-export const useSubscribeToAuthorizationIncreasedEvent = (
-  appName: StakingAppName
-) => {
-  const contract = useStakingAppContract(appName)
+export const useSubscribeToAuthorizationIncreasedEvent = () => {
+  const contract = useTStakingContract()
   const dispatch = useAppDispatch()
 
   useSubscribeToContractEvent(
     contract,
     "AuthorizationIncreased",
     // @ts-ignore
-    async (stakingProvider, operator, fromAmount, toAmount) => {
+    async (stakingProvider, application, fromAmount, toAmount) => {
+      const appName = getStakingAppNameFromAppAddress(application)
+
       dispatch(
         stakingApplicationsSlice.actions.authorizationIncreased({
           stakingProvider,

src/pages/Staking/OperatorAddressMappingCard.tsx

@@ -23,7 +23,7 @@ import { selectMappedOperators } from "../../store/account/selectors"
 import shortenAddress from "../../utils/shortenAddress"
 import { isAddressZero } from "../../web3/utils"
 import { FcCheckmark, FiLink2 } from "react-icons/all"
-import { getSakingAppLabel } from "../../utils/getStakingAppLabel"
+import { getStakingAppLabelFromAppName } from "../../utils/getStakingAppLabel"
 import { StakingAppName } from "../../store/staking-applications"
 
 const OperatorAddressMappingCard: FC<{ stakingProvider: string }> = ({
@@ -63,7 +63,7 @@ const OperatorAddressMappingCard: FC<{ stakingProvider: string }> = ({
             <Box key={`mapped_operator_${appName}_${operator}`}>
               <HStack mt={5}>
                 <BoxLabel status="secondary" size={"sm"}>
-                  {getSakingAppLabel(appName as StakingAppName)} App
+                  {getStakingAppLabelFromAppName(appName as StakingAppName)} App
                 </BoxLabel>
                 <Badge variant="subtle" size={"md"} bgColor={"green.50"} py={1}>
                   <HStack>

src/utils/__tests__/getStakingAppLabel.test.ts

@@ -0,0 +1,56 @@
+import {
+  getStakingAppLabelFromAppAddress,
+  getStakingAppLabelFromAppName,
+  getStakingAppNameFromAppAddress,
+} from "../getStakingAppLabel"
+import { StakingAppName } from "../../store/staking-applications"
+import { getThresholdLib } from "../getThresholdLib"
+
+const mockAddresses: Record<StakingAppName, string> = {
+  tbtc: getThresholdLib().multiAppStaking.ecdsa.address,
+  randomBeacon: getThresholdLib().multiAppStaking.randomBeacon.address,
+}
+const mockLabels: Record<StakingAppName, string> = {
+  tbtc: "tBTC",
+  randomBeacon: "Random Beacon",
+}
+const mockAppNames: StakingAppName[] = ["tbtc", "randomBeacon"]
+
+describe("Staking app label utils tests", () => {
+  const [tbtcName, randomBeaconName] = mockAppNames
+  const tbtcAddress = mockAddresses[tbtcName]
+  const randomBeaconAddress = mockAddresses[randomBeaconName]
+
+  it("returns correct app label if app address is given", () => {
+    const resultTbtcLabel = getStakingAppLabelFromAppAddress(tbtcAddress)
+    const resultRandomBeaconLabel =
+      getStakingAppLabelFromAppAddress(randomBeaconAddress)
+
+    expect(resultTbtcLabel).toBe(mockLabels[tbtcName])
+    expect(resultRandomBeaconLabel).toBe(mockLabels[randomBeaconName])
+  })
+
+  it("returns correct app label if app name is given", () => {
+    const resultTbtcLabel = getStakingAppLabelFromAppName(tbtcName)
+    const resultRandomBeaconLabel =
+      getStakingAppLabelFromAppName(randomBeaconName)
+
+    expect(resultTbtcLabel).toBe(mockLabels[tbtcName])
+    expect(resultRandomBeaconLabel).toBe(mockLabels[randomBeaconName])
+  })
+
+  it("returns correct app name if address is given", () => {
+    const resultTbtcName = getStakingAppNameFromAppAddress(tbtcAddress)
+    const resultRandomBeaconName =
+      getStakingAppNameFromAppAddress(randomBeaconAddress)
+
+    expect(resultTbtcName).toBe(tbtcName)
+    expect(resultRandomBeaconName).toBe(randomBeaconName)
+  })
+
+  it("returns fallback value if address is unexpected", () => {
+    const resultName = getStakingAppLabelFromAppAddress("0xun3xp3c73d400r3s5")
+
+    expect(resultName).toBe("App")
+  })
+})

src/utils/getStakingAppLabel.ts

@@ -6,16 +6,22 @@ const stakingAppNameToAppLabel: Record<StakingAppName, string> = {
   randomBeacon: "Random Beacon",
 }
 
-const stakingAppAddressToName: { [key: string]: string } = {
-  [threshold.multiAppStaking.ecdsa.address]: stakingAppNameToAppLabel.tbtc,
-  [threshold.multiAppStaking.randomBeacon.address]:
-    stakingAppNameToAppLabel.randomBeacon,
+const stakingAppAddressToAppName: Record<string, StakingAppName> = {
+  [threshold.multiAppStaking.ecdsa.address]: "tbtc",
+  [threshold.multiAppStaking.randomBeacon.address]: "randomBeacon",
 }
 
-export const getStakingAppNameFromAddress = (stakingAppAddress: string) => {
-  return stakingAppAddressToName[stakingAppAddress] ?? "App"
+export const getStakingAppNameFromAppAddress = (stakingAppAddress: string) => {
+  return stakingAppAddressToAppName[stakingAppAddress]
 }
 
-export const getSakingAppLabel = (stakingAppName: StakingAppName) => {
+export const getStakingAppLabelFromAppName = (
+  stakingAppName: StakingAppName
+) => {
   return stakingAppNameToAppLabel[stakingAppName]
 }
+
+export const getStakingAppLabelFromAppAddress = (address: string) => {
+  const appName = getStakingAppNameFromAppAddress(address)
+  return getStakingAppLabelFromAppName(appName) || "App"
+}