diff --git a/src/modules/core/components/InfoPopover/MemberInfoPopover.tsx b/src/modules/core/components/InfoPopover/MemberInfoPopover.tsx index ce31a85ea6..ffb2ba621d 100644 --- a/src/modules/core/components/InfoPopover/MemberInfoPopover.tsx +++ b/src/modules/core/components/InfoPopover/MemberInfoPopover.tsx @@ -1,7 +1,6 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import { defineMessages, FormattedMessage, useIntl } from 'react-intl'; -import { DEFAULT_TOKEN_DECIMALS } from '~constants'; import Badge from '~core/Badge'; import Heading from '~core/Heading'; import Numeral from '~core/Numeral'; @@ -11,6 +10,7 @@ import { useUserBadgesQuery, useUserReputationQuery, useColonyNativeTokenQuery, + useTokenInfoLazyQuery, } from '~data/index'; import { Address } from '~types/index'; @@ -55,6 +55,18 @@ const MemberInfoPopover = ({ colonyAddress, domainId, user }: Props) => { profile: { walletAddress }, } = user; + const { + data: nativeTokenAddressData, + loading: loadingNativeTokenAddress, + } = useColonyNativeTokenQuery({ + variables: { address: colonyAddress }, + }); + + const [ + fetchTokenInfo, + { data: tokenInfoData, loading: loadingTokenInfoData }, + ] = useTokenInfoLazyQuery(); + const { data: userReputationData, loading: loadingUserReputation, @@ -63,17 +75,19 @@ const MemberInfoPopover = ({ colonyAddress, domainId, user }: Props) => { variables: { address: walletAddress, colonyAddress, domainId }, }); - const { - data: nativeTokenData, - loading: loadingNativeToken, - } = useColonyNativeTokenQuery({ - variables: { address: colonyAddress }, - }); - const { data } = useUserBadgesQuery({ variables: { address: walletAddress, colonyAddress }, }); + useEffect(() => { + if (nativeTokenAddressData) { + const { + colony: { nativeTokenAddress }, + } = nativeTokenAddressData; + fetchTokenInfo({ variables: { address: nativeTokenAddress } }); + } + }, [fetchTokenInfo, nativeTokenAddressData]); + const completedLevels = data ? data.user.completedLevels : []; return ( @@ -89,16 +103,18 @@ const MemberInfoPopover = ({ colonyAddress, domainId, user }: Props) => { text={MSG.headingReputation} /> - {userReputationData && nativeTokenData && ( + {userReputationData && tokenInfoData && ( )} - {(loadingUserReputation || loadingNativeToken) && } - {userReputationData && ( + {(loadingUserReputation || + loadingNativeTokenAddress || + loadingTokenInfoData) && } + {userReputationData && tokenInfoData && ( <>