From 3fd1b65ee8537d66d010c66c830a9605759cfdda Mon Sep 17 00:00:00 2001 From: sirpy Date: Mon, 7 Oct 2024 16:05:12 +0300 Subject: [PATCH] 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 --- packages/app/src/components/ProfileView.tsx | 54 ++++++++----------- .../app/src/components/ViewCollective.tsx | 3 +- .../WalletCards/StewardCollectiveCard.tsx | 3 +- .../WalletDetails/BothWalletDetails.tsx | 5 +- .../WalletDetails/StewardWalletDetails.tsx | 2 +- packages/app/src/components/WalletProfile.tsx | 9 ++-- .../app/src/hooks/useIsStewardVerified.ts | 29 +++++----- .../app/src/lib/calculateGoodDollarAmounts.ts | 12 +++-- packages/app/src/lib/formatFiatCurrency.ts | 6 +-- packages/app/src/pages/WalletProfilePage.tsx | 4 +- 10 files changed, 62 insertions(+), 65 deletions(-) diff --git a/packages/app/src/components/ProfileView.tsx b/packages/app/src/components/ProfileView.tsx index d25afdd4..ad806a96 100644 --- 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 ( - - - - {profileType === ProfileTypes.nameAndDomain && ( - <> - - {firstName} {lastName} - - {ensDomain} - - )} - {profileType === ProfileTypes.domain && {ensDomain}} - {profileType === ProfileTypes.claimDomain && ( - <> - {formattedAddress} - - Claim your .Celo domain. - - - )} - - + + + + + { + <> + + {displayName} {isWhitelisted ? : null} + + {secondary ? {secondary} : null} + + } + + + ); } diff --git a/packages/app/src/components/ViewCollective.tsx b/packages/app/src/components/ViewCollective.tsx index 83e9242a..6ed9580a 100644 --- 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 index 22122fe1..883d078b 100644 --- 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 index b43941b8..4f21c89e 100644 --- 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 And received - G$ + G$ {formattedRewards} = {rewardsUsdValue} USD diff --git a/packages/app/src/components/WalletDetails/StewardWalletDetails.tsx b/packages/app/src/components/WalletDetails/StewardWalletDetails.tsx index 78645407..359af860 100644 --- 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 ( diff --git a/packages/app/src/components/WalletProfile.tsx b/packages/app/src/components/WalletProfile.tsx index 457b7144..d44116ba 100644 --- 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} /> @@ -85,7 +84,7 @@ function WalletProfile({ address, ensName, firstName, lastName, donor, steward } lastName={lastName} ensDomain={ensName ?? undefined} userAddress={address} - profileType={profileType} + isWhitelisted={isWhitelisted} /> diff --git a/packages/app/src/hooks/useIsStewardVerified.ts b/packages/app/src/hooks/useIsStewardVerified.ts index 4a946434..fd0c5bcb 100644 --- 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(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 index 8f33d219..3e56a3b9 100644 --- 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 index b498036c..61055939 100644 --- 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 index a648d292..ef787522 100644 --- 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 ( );