From 8a41d98f61feb6caf30d5c402a13f03100795698 Mon Sep 17 00:00:00 2001 From: dominhquang Date: Thu, 24 Aug 2023 17:48:01 +0700 Subject: [PATCH] [Issue-932]: Update showing staking account on the Staking detail screen --- .../screen/Staking/useGetAccountsByStaking.ts | 32 +++++++++++++++++++ .../StakingDetailModal/index.tsx | 9 ++++-- 2 files changed, 39 insertions(+), 2 deletions(-) create mode 100644 src/hooks/screen/Staking/useGetAccountsByStaking.ts diff --git a/src/hooks/screen/Staking/useGetAccountsByStaking.ts b/src/hooks/screen/Staking/useGetAccountsByStaking.ts new file mode 100644 index 000000000..4f3202f93 --- /dev/null +++ b/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]); +} diff --git a/src/screens/Home/Staking/StakingDetail/StakingDetailModal/index.tsx b/src/screens/Home/Staking/StakingDetail/StakingDetailModal/index.tsx index 6aba9f5e1..dd7a9e8d8 100644 --- a/src/screens/Home/Staking/StakingDetail/StakingDetailModal/index.tsx +++ b/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(false); - const { accounts, currentAccount } = useSelector((state: RootState) => state.accountState); + const { currentAccount } = useSelector((state: RootState) => state.accountState); const toastRef = useRef(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(null); + const stakingAccounts = useGetAccountsByStaking( + nominatorMetadata?.chain || '', + nominatorMetadata?.type || StakingType.NOMINATED, + ); const onCloseDetailModal = useCallback(() => modalRef?.current?.close(), []); @@ -319,7 +324,7 @@ export const StakingDetailModal = ({ acc.address)} + addresses={stakingAccounts.map(acc => acc.address)} /> ) : (