Merge branch 'main' into tbtc-minting-redesign

package.json

@@ -1,6 +1,6 @@
 {
   "name": "token-dashboard",
-  "version": "1.11.0-pre",
+  "version": "1.12.0-pre",
   "private": true,
   "dependencies": {
     "@chakra-ui/icons": "^1.0.15",

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"
+}