add: GoodDollar verification shown for wallet that is not Face Verified

#191 [Bug] "Claim Celo Domain" shows for wallet with Celo Domain; Celo Domain not displayed #190
GoodDollar · Oct 7, 2024 · 3fd1b65 · 3fd1b65
1 parent 0cface8
commit 3fd1b65
Show file tree

Hide file tree

Showing 10 changed files with 62 additions and 65 deletions.
diff --git a/packages/app/src/components/ProfileView.tsx b/packages/app/src/components/ProfileView.tsx
@@ -1,52 +1,44 @@
-import { StyleSheet, Text, TouchableOpacity, View, Image } from 'react-native';
+import { StyleSheet, Text, View, Image, TouchableOpacity } from 'react-native';
 import { InterSemiBold, InterSmall } from '../utils/webFonts';
 import { Colors } from '../utils/colors';
 import { Link } from 'native-base';
-import { ProfileTypes } from '../models/ProfileTypes';
 import { useMemo } from 'react';
-import { profilePictures } from '../utils/profilePictures';
 import { VerifiedIcon } from '../assets';
+import env from '../lib/env';
 
 interface ProfileViewProps {
   firstName?: string;
   lastName?: string;
   ensDomain?: string;
   userAddress?: string;
-  profileType: ProfileTypes;
+  isWhitelisted?: boolean;
 }
 
-function ProfileView({ firstName, lastName, ensDomain, userAddress, profileType }: ProfileViewProps) {
+function ProfileView({ firstName, lastName, ensDomain, userAddress, isWhitelisted = false }: ProfileViewProps) {
   const profileImage = useMemo(() => {
-    return profilePictures.sort(() => Math.random())[0];
-  }, []);
-
-  const profileLink = 'https://app.prosperity.global';
+    return { uri: `https://robohash.org/${userAddress}` };
+  }, [userAddress]);
 
   const formattedAddress = userAddress?.slice(0, 6) + '...' + userAddress?.slice(-4);
 
+  const displayName = firstName ? firstName + ' ' + lastName : ensDomain ?? formattedAddress;
+  const secondary = firstName ? ensDomain ?? formattedAddress : ensDomain ? formattedAddress : undefined;
   return (
-    <TouchableOpacity style={styles.profileView}>
-      <Image source={profileImage} style={styles.pfp} />
-      <View style={styles.profileText}>
-        {profileType === ProfileTypes.nameAndDomain && (
-          <>
-            <Text style={styles.title}>
-              {firstName} {lastName} <Image source={VerifiedIcon} style={styles.verifiedIcon} />
-            </Text>
-            <Text style={styles.line}>{ensDomain}</Text>
-          </>
-        )}
-        {profileType === ProfileTypes.domain && <Text style={styles.title}>{ensDomain}</Text>}
-        {profileType === ProfileTypes.claimDomain && (
-          <>
-            <Text style={styles.title}>{formattedAddress}</Text>
-            <Link style={styles.line} href={profileLink} isExternal>
-              Claim your .Celo domain.
-            </Link>
-          </>
-        )}
-      </View>
-    </TouchableOpacity>
+    <Link href={`${env.REACT_APP_CELO_EXPLORER}/address/${userAddress}`} isExternal>
+      <TouchableOpacity style={styles.profileView}>
+        <Image source={profileImage} style={styles.pfp} />
+        <View style={styles.profileText}>
+          {
+            <>
+              <Text style={styles.title}>
+                {displayName} {isWhitelisted ? <Image source={VerifiedIcon} style={styles.verifiedIcon} /> : null}
+              </Text>
+              {secondary ? <Text style={styles.line}>{secondary}</Text> : null}
+            </>
+          }
+        </View>
+      </TouchableOpacity>
+    </Link>
   );
 }
 

diff --git a/packages/app/src/components/ViewCollective.tsx b/packages/app/src/components/ViewCollective.tsx
@@ -83,7 +83,8 @@ function ViewCollective({ collective }: ViewCollectiveProps) {
 
   const { wei: formattedTotalRewards, usdValue: totalRewardsUsdValue } = calculateGoodDollarAmounts(
     totalRewards,
-    tokenPrice
+    tokenPrice,
+    2
   );
 
   if (isDesktopResolution) {

diff --git a/packages/app/src/components/WalletCards/StewardCollectiveCard.tsx b/packages/app/src/components/WalletCards/StewardCollectiveCard.tsx
@@ -28,7 +28,8 @@ function StewardCollectiveCard({
 
   const { formatted: rewardsFormatted, usdValue: rewardsUsdValue } = calculateGoodDollarAmounts(
     collective.totalEarned,
-    tokenPrice
+    tokenPrice,
+    2
   );
 
   const dynamicContainerStyle = isDesktopResolution ? { width: '48%' } : {};

diff --git a/packages/app/src/components/WalletDetails/BothWalletDetails.tsx b/packages/app/src/components/WalletDetails/BothWalletDetails.tsx
@@ -22,7 +22,8 @@ function BothWalletDetails({ donor, steward, tokenPrice }: BothWalletDetailsProp
 
   const { formatted: formattedRewards, usdValue: rewardsUsdValue } = calculateGoodDollarAmounts(
     steward.totalEarned,
-    tokenPrice
+    tokenPrice,
+    2
   );
 
   const peopleSupported = useCountPeopleSupported(donor.collectives) ?? 0;
@@ -74,7 +75,7 @@ function BothWalletDetails({ donor, steward, tokenPrice }: BothWalletDetailsProp
         <View style={styles.rowContent}>
           <Text style={styles.rowTitle}>And received</Text>
           <View style={[styles.row]}>
-            <Text style={styles.rowBoldText}>G$</Text>
+            <Text style={styles.rowBoldText}>G$ </Text>
             <Text style={styles.rowText}>{formattedRewards}</Text>
           </View>
           <Text>= {rewardsUsdValue} USD</Text>

diff --git a/packages/app/src/components/WalletDetails/StewardWalletDetails.tsx b/packages/app/src/components/WalletDetails/StewardWalletDetails.tsx
@@ -10,7 +10,7 @@ interface StewardWalletDetailsProps {
 }
 
 function StewardWalletDetails({ firstName, steward, tokenPrice }: StewardWalletDetailsProps) {
-  const { formatted: formattedRewards, usdValue } = calculateGoodDollarAmounts(steward.totalEarned, tokenPrice);
+  const { formatted: formattedRewards, usdValue } = calculateGoodDollarAmounts(steward.totalEarned, tokenPrice, 2);
 
   return (
     <View style={styles.walletDetailsContainer}>

diff --git a/packages/app/src/components/WalletProfile.tsx b/packages/app/src/components/WalletProfile.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { Image, StyleSheet, Text, View } from 'react-native';
-import { ProfileTypes } from '../models/ProfileTypes';
 import { Colors } from '../utils/colors';
 import { InterSemiBold, InterSmall } from '../utils/webFonts';
 import ProfileView from './ProfileView';
@@ -19,14 +18,14 @@ interface WalletProfileProps {
   lastName?: string;
   donor?: Donor;
   steward?: Steward;
+  isWhitelisted?: boolean;
 }
 
-function WalletProfile({ address, ensName, firstName, lastName, donor, steward }: WalletProfileProps) {
+function WalletProfile({ address, ensName, firstName, lastName, donor, steward, isWhitelisted }: WalletProfileProps) {
   const [isDesktopResolution] = useMediaQuery({
     minWidth: 920,
   });
 
-  const profileType = ensName ? ProfileTypes.nameAndDomain : ProfileTypes.claimDomain;
   const userIdentifier = firstName
     ? `${firstName} ${lastName}`
     : ensName
@@ -55,7 +54,7 @@ function WalletProfile({ address, ensName, firstName, lastName, donor, steward }
               lastName={lastName}
               ensDomain={ensName ?? undefined}
               userAddress={address}
-              profileType={profileType}
+              isWhitelisted={isWhitelisted}
             />
             <View style={styles.row}>
               <Image style={styles.lIcon} source={LightningIcon} />
@@ -85,7 +84,7 @@ function WalletProfile({ address, ensName, firstName, lastName, donor, steward }
             lastName={lastName}
             ensDomain={ensName ?? undefined}
             userAddress={address}
-            profileType={profileType}
+            isWhitelisted={isWhitelisted}
           />
           <View style={styles.row}>
             <Image style={styles.lIcon} source={LightningIcon} />

diff --git a/packages/app/src/hooks/useIsStewardVerified.ts b/packages/app/src/hooks/useIsStewardVerified.ts
@@ -1,20 +1,17 @@
-import { ClaimSDK, useSDK } from '@gooddollar/web3sdk-v2';
-import { useEffect, useState } from 'react';
-import { SupportedNetwork } from '../models/constants';
+import { G$ContractAddresses, CONTRACT_TO_ABI } from '@gooddollar/web3sdk-v2';
+import { useContractRead, useNetwork } from 'wagmi';
 
 export const useIsStewardVerified = (address: string): boolean => {
-  const sdk = useSDK(false, 'claim', SupportedNetwork.CELO) as ClaimSDK;
-  const [isVerified, setIsVerified] = useState<boolean>(false);
+  const chain = useNetwork();
+  const idAddress = G$ContractAddresses('Identity', 'production-celo') as `0x{string}`;
+  const abi = CONTRACT_TO_ABI.Identity.abi;
+  const result = useContractRead({
+    chainId: chain.chain?.id,
+    abi,
+    address: idAddress,
+    args: [address],
+    functionName: 'isWhitelisted',
+  });
 
-  useEffect(() => {
-    const verify = async () => {
-      if (address && sdk) {
-        setIsVerified(await sdk.isAddressVerified(address));
-      }
-      return setIsVerified(false);
-    };
-    verify();
-  }, [address, sdk]);
-
-  return isVerified;
+  return result.data as any as boolean;
 };
diff --git a/packages/app/src/lib/calculateGoodDollarAmounts.ts b/packages/app/src/lib/calculateGoodDollarAmounts.ts
@@ -5,7 +5,11 @@ import { formatEther } from 'viem';
 export type CalculatedAmounts = { decimal?: Decimal; formatted?: string; usdValue?: number; wei?: string };
 
 // assumes 18 decimals
-export function calculateGoodDollarAmounts(onChainAmount?: string, tokenPrice?: number): CalculatedAmounts {
+export function calculateGoodDollarAmounts(
+  onChainAmount?: string,
+  tokenPrice?: number,
+  decimals = 4
+): CalculatedAmounts {
   if (onChainAmount === undefined) {
     return {
       decimal: undefined,
@@ -14,7 +18,7 @@ export function calculateGoodDollarAmounts(onChainAmount?: string, tokenPrice?:
     };
   }
   const decimalAmount = new Decimal(formatEther(BigInt(onChainAmount)));
-  const formattedAmount: string = formatNumberWithCommas(formatEther(BigInt(onChainAmount)));
+  const formattedAmount: string = formatNumberWithCommas(formatEther(BigInt(onChainAmount)), decimals);
   const usdValue = tokenPrice ? parseFloat(decimalAmount.mul(tokenPrice).toFixed(2)) : undefined;
   return {
     wei: onChainAmount,
@@ -24,6 +28,6 @@ export function calculateGoodDollarAmounts(onChainAmount?: string, tokenPrice?:
   };
 }
 
-export function formatGoodDollarAmount(onChainAmount: string): string {
-  return formatNumberWithCommas(formatEther(BigInt(onChainAmount)));
+export function formatGoodDollarAmount(onChainAmount: string, decimals = 4): string {
+  return formatNumberWithCommas(formatEther(BigInt(onChainAmount)), decimals);
 }
diff --git a/packages/app/src/lib/formatFiatCurrency.ts b/packages/app/src/lib/formatFiatCurrency.ts
@@ -12,13 +12,13 @@ export const formatFiatCurrency = (
   }).format(number);
 };
 
-export const formatNumberWithCommas = (num: string): string => {
+export const formatNumberWithCommas = (num: string, decimals = 4): string => {
   const number = parseFloat(num);
   return new Intl.NumberFormat('en-US', {
     style: 'currency',
     currency: 'USD',
-    minimumFractionDigits: 4,
-    maximumFractionDigits: 4,
+    minimumFractionDigits: decimals,
+    maximumFractionDigits: decimals,
   })
     .format(number)
     .substring(1);

diff --git a/packages/app/src/pages/WalletProfilePage.tsx b/packages/app/src/pages/WalletProfilePage.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import Layout from '../components/Layout/Layout';
-import { useDonorById, useStewardById } from '../hooks';
+import { useDonorById, useIsStewardVerified, useStewardById } from '../hooks';
 import { useParams } from 'react-router-native';
 import WalletProfile from '../components/WalletProfile';
 import { useEnsName } from 'wagmi';
@@ -25,6 +25,7 @@ function WalletProfilePage() {
 
   const userIdentifier = firstName ? `${firstName} ${lastName}` : ensName ?? address ?? '0x';
 
+  const isWhitelisted = useIsStewardVerified(address || '');
   return (
     <Layout breadcrumbPath={[{ text: userIdentifier, route: `/profile/${address}` }]}>
       <WalletProfile
@@ -34,6 +35,7 @@ function WalletProfilePage() {
         lastName={lastName}
         donor={donor}
         steward={steward}
+        isWhitelisted={isWhitelisted}
       />
     </Layout>
   );