[Issue-932]: Update showing staking account on the Staking detail screen

src/hooks/screen/Staking/useGetAccountsByStaking.ts

@@ -0,0 +1,32 @@
+import { StakingType } from '@subwallet/extension-base/background/KoniTypes';
+import { useMemo } from 'react';
+import { useSelector } from 'react-redux';
+import { RootState } from 'stores/index';
+import { findAccountByAddress } from 'utils/account';
+import { AccountJson } from '@subwallet/extension-base/background/types';
+
+export default function useGetAccountsByStaking(chain: string, stakingType: StakingType): AccountJson[] {
+  const stakingItems = useSelector((state: RootState) => state.staking.stakingMap);
+  const accounts = useSelector((state: RootState) => state.accountState.accounts);
+
+  return useMemo(() => {
+    const accountInfos: AccountJson[] = [];
+
+    stakingItems.forEach(stakingItem => {
+      if (stakingItem.chain === chain && stakingItem.type === stakingType) {
+        accountInfos.push({ address: stakingItem.address });
+      }
+    });
+
+    accountInfos.forEach(accountInfo => {
+      const accountJson = findAccountByAddress(accounts, accountInfo.address);
+
+      if (accountJson) {
+        accountInfo.name = accountJson.name;
+        accountInfo.type = accountJson.type;
+      }
+    });
+
+    return accountInfos;
+  }, [accounts, chain, stakingItems, stakingType]);
+}

src/screens/Home/Staking/StakingDetail/StakingDetailModal/index.tsx

@@ -44,6 +44,7 @@ import i18n from 'utils/i18n/i18n';
 import { CustomToast } from 'components/design-system-ui/toast';
 import { SWModalRefProps } from 'components/design-system-ui/modal/ModalBaseV2';
 import StakingActionModal from 'screens/Home/Staking/StakingDetail/StakingActionModal';
+import useGetAccountsByStaking from 'hooks/screen/Staking/useGetAccountsByStaking';
 
 interface Props {
   nominatorMetadata?: NominatorMetadata;
@@ -104,7 +105,7 @@ export const StakingDetailModal = ({
       : i18n.header.poolDetails;
   const theme = useSubWalletTheme().swThemes;
   const [seeMore, setSeeMore] = useState<boolean>(false);
-  const { accounts, currentAccount } = useSelector((state: RootState) => state.accountState);
+  const { currentAccount } = useSelector((state: RootState) => state.accountState);
   const toastRef = useRef<ToastContainer>(null);
   const onClickFooterButton = usePreCheckReadOnly(toastRef, currentAccount?.address);
   const chainInfo = useFetchChainInfo(staking.chain);
@@ -117,6 +118,10 @@ export const StakingDetailModal = ({
     pooled: i18n.filterOptions.pooled,
   };
   const modalRef = useRef<SWModalRefProps>(null);
+  const stakingAccounts = useGetAccountsByStaking(
+    nominatorMetadata?.chain || '',
+    nominatorMetadata?.type || StakingType.NOMINATED,
+  );
 
   const onCloseDetailModal = useCallback(() => modalRef?.current?.close(), []);
 
@@ -319,7 +324,7 @@ export const StakingDetailModal = ({
                     <MetaInfo.AccountGroup
                       label={i18n.inputLabel.account}
                       content={nominatorMetadata?.address === 'ALL' ? i18n.common.allAccounts : ''}
-                      addresses={accounts.map(acc => acc.address)}
+                      addresses={stakingAccounts.map(acc => acc.address)}
                     />
                   ) : (
                     <MetaInfo.Account