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 && (
<>
>