fix: refactor get current extension, navigatePath, partialStakeColony

src/components/common/Extensions/UserHub/partials/StakesTab/helpers.ts

@@ -1,9 +1,7 @@
 import { MotionState as NetworkMotionState } from '@colony/colony-js';
 
-import {
-  type VotingReputationByColonyId,
-  type MotionStatesMap,
-} from '~hooks/useNetworkMotionStates.ts';
+import { type MotionStatesMap } from '~hooks/useNetworkMotionStates.ts';
+import { type VotingReputationByColonyAddress } from '~hooks/useNetworkMotionStatesAllColonies.ts';
 import { type UserStake } from '~types/graphql.ts';
 import { UserStakeStatus } from '~types/userStake.ts';
 
@@ -32,7 +30,7 @@ export const getStakesTabItems = (
 export const getStakeStatus = (
   stake: UserStake,
   statesMap: MotionStatesMap,
-  votingReputationByColony: VotingReputationByColonyId,
+  votingReputationByColony: VotingReputationByColonyAddress,
 ) => {
   if (stake.isClaimed) {
     return UserStakeStatus.Claimed;

src/components/common/Extensions/UserHub/partials/StakesTab/partials/ClaimAllButton.tsx

@@ -3,7 +3,7 @@ import { useIntl } from 'react-intl';
 
 import { useAppContext } from '~context/AppContext/AppContext.ts';
 import useAsyncFunction from '~hooks/useAsyncFunction.ts';
-import { type VotingReputationByColonyId } from '~hooks/useNetworkMotionStates.ts';
+import { type VotingReputationByColonyAddress } from '~hooks/useNetworkMotionStatesAllColonies.ts';
 import { ActionTypes } from '~redux/index.ts';
 import { type UserStakeWithStatus } from '~types/userStake.ts';
 
@@ -12,7 +12,7 @@ const displayName = 'common.Extensions.UserHub.partials.StakesTab';
 interface ClaimAllButtonProps {
   claimableStakes: UserStakeWithStatus[];
   updateClaimedStakesCache: (stakesIds: string[]) => void;
-  votingReputationByColony: VotingReputationByColonyId;
+  votingReputationByColony: VotingReputationByColonyAddress;
 }
 
 const ClaimAllButton = ({

src/components/common/Extensions/UserHub/partials/StakesTab/partials/StakeItem.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState, type FC } from 'react';
+import React, { useMemo, type FC } from 'react';
 import { FormattedDate, useIntl } from 'react-intl';
 import { useNavigate, useParams } from 'react-router-dom';
 
@@ -17,8 +17,6 @@ const StakeItem: FC<StakeItemProps> = ({ stake }) => {
   const { formatMessage } = useIntl();
   const navigate = useNavigate();
 
-  const [navigatePath, setNavigatePath] = useState(window.location.pathname);
-
   const stakeItemTitle =
     stake.action?.metadata?.customTitle ||
     stake.action?.decisionData?.title ||
@@ -28,32 +26,29 @@ const StakeItem: FC<StakeItemProps> = ({ stake }) => {
 
   const stakeColonyName = stake.action?.colony.name ?? '';
 
-  const stakeColony = useMemo(() => {
-    if (!stake.action) {
+  const partialStakeColony = useMemo(() => {
+    if (!stake.action?.colony) {
       return null;
     }
+
+    const { nativeToken, metadata } = stake.action.colony;
+
     return {
       nativeToken: {
-        decimals: stake.action?.colony.nativeToken.nativeTokenDecimals,
-        symbol: stake.action?.colony.nativeToken.nativeTokenSymbol,
-        tokenAddress: stake.action?.colony.nativeToken.tokenAddress,
-        name: stake.action?.colony.nativeToken.name,
+        decimals: nativeToken.nativeTokenDecimals,
+        symbol: nativeToken.nativeTokenSymbol,
+        tokenAddress: nativeToken.tokenAddress,
+        name: nativeToken.name,
       },
-      metadata: stake.action?.colony.metadata,
+      metadata,
     };
   }, [stake.action]);
 
-  useEffect(() => {
-    if (colonyNameUrl !== stakeColonyName) {
-      // For transactions from other colonies it should redirect to /{ownColony}?tx={hash}
-      setNavigatePath(`/${stakeColonyName}`);
-    }
-  }, [
-    colonyNameUrl,
-    stakeColonyName,
-    setNavigatePath,
-    stake.action?.transactionHash,
-  ]);
+  const navigatePath = useMemo(() => {
+    return colonyNameUrl !== stakeColonyName
+      ? `/${stakeColonyName}`
+      : window.location.pathname;
+  }, [colonyNameUrl, stakeColonyName]);
 
   return (
     <li className="flex flex-col border-b border-gray-100 first:pt-2 last:pb-6 sm:first:pt-0 sm:last:border-none sm:last:pb-1.5">
@@ -85,21 +80,21 @@ const StakeItem: FC<StakeItemProps> = ({ stake }) => {
           </div>
           <div className="flex text-xs">
             <div className="mr-2 font-medium">
-              {stakeColony && (
+              {partialStakeColony && (
                 <Numeral
                   value={stake.amount}
-                  decimals={stakeColony.nativeToken.decimals}
-                  suffix={` ${stakeColony.nativeToken.symbol}`}
+                  decimals={partialStakeColony.nativeToken.decimals}
+                  suffix={` ${partialStakeColony.nativeToken.symbol}`}
                 />
               )}
             </div>
             <div className="text-gray-600">
-              {stake.action && stakeColony
+              {stake.action && partialStakeColony
                 ? formatMessage(
                     { id: 'action.title' },
                     getActionTitleValues({
                       actionData: stake.action,
-                      colony: stakeColony,
+                      colony: partialStakeColony,
                     }),
                   )
                 : '-'}

src/hooks/useNetworkMotionStates.ts

@@ -6,7 +6,6 @@ import { useAppContext } from '~context/AppContext/AppContext.ts';
 import useEnabledExtensions from './useEnabledExtensions.ts';
 
 export type MotionStatesMap = Map<string, MotionState | null>;
-export type VotingReputationByColonyId = Record<string, string>;
 
 export type RefetchMotionStates = (motionIdsToRefetch?: string[]) => void;
 

src/hooks/useNetworkMotionStatesAllColonies.ts

@@ -6,13 +6,14 @@ import {
 import { Extension } from '@colony/colony-js';
 import { useEffect, useMemo, useState } from 'react';
 
-import { ADDRESS_ZERO, supportedExtensionsConfig } from '~constants/index.ts';
+import { ADDRESS_ZERO } from '~constants/index.ts';
 import { useAppContext } from '~context/AppContext/AppContext.ts';
 import { useGetJoinedColoniesExtensionsQuery } from '~gql';
 import { type JoinedColonyWithExtensions } from '~types/graphql.ts';
 import { notNull, notUndefined } from '~utils/arrays/index.ts';
 
 export type MotionStatesMap = Map<string, MotionState | null>;
+export type VotingReputationByColonyAddress = Record<string, string>;
 
 export type UserMotionStake = {
   motionId: string;
@@ -28,13 +29,12 @@ const getVotingReputationAddressByColony = (
     return [];
   }
 
-  const currentExtensionAddress = colonyExtensions.find((extension) => {
-    const extensionConfig = supportedExtensionsConfig.find(
-      (e) => getExtensionHash(e?.extensionId) === extension?.hash,
-    );
-    return extensionConfig?.extensionId === Extension.VotingReputation;
-  });
-  return currentExtensionAddress?.address;
+  const votingRepExtension = colonyExtensions.find(
+    (extension) =>
+      extension.hash === getExtensionHash(Extension.VotingReputation),
+  );
+
+  return votingRepExtension?.address;
 };
 
 const useGetVotingReputationByColony = (userAddress?: string) => {
@@ -74,7 +74,7 @@ const useGetVotingReputationByColony = (userAddress?: string) => {
 
 /**
  * Hook that accepts an array of UserMotionStake and returns a map of motion IDs to their states
- * Make sure to memoize the array of motion IDs to avoid infinite loops
+ * Make sure to memoize the array of UserMotionStakes to avoid infinite loops
  */
 const useNetworkMotionStatesAllColonies = (
   userMotionStakes: UserMotionStake[],