Use native token decimals for reputation display

JoinColony · Mar 30, 2020 · 9594b33 · 9594b33
1 parent 3490aac
commit 9594b33
Showing 1 changed file with 29 additions and 13 deletions.
diff --git 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}
             />
           </div>
-          {userReputationData && nativeTokenData && (
+          {userReputationData && tokenInfoData && (
             <Numeral
               appearance={{ theme: 'blue', weight: 'medium' }}
               value={userReputationData.userReputation}
-              unit={DEFAULT_TOKEN_DECIMALS}
+              unit={tokenInfoData.tokenInfo.decimals}
             />
           )}
         </div>
-        {(loadingUserReputation || loadingNativeToken) && <SpinnerLoader />}
-        {userReputationData && (
+        {(loadingUserReputation ||
+          loadingNativeTokenAddress ||
+          loadingTokenInfoData) && <SpinnerLoader />}
+        {userReputationData && tokenInfoData && (
           <>
             <FormattedMessage tagName="b" {...MSG.descriptionReputation} />
           </>