From 546df03d0d3173438c5d6f233674f552ef2042ed Mon Sep 17 00:00:00 2001 From: sirpy Date: Tue, 1 Oct 2024 14:19:06 +0300 Subject: [PATCH] add: more flow styles #210 --- packages/app/index.html | 2 +- .../src/components/DonorsList/DonorsListItem.tsx | 14 ++++++-------- packages/app/src/components/Dropdown.tsx | 1 - packages/app/src/components/GoodDollarAmount.tsx | 4 ++-- .../app/src/components/TransactionList/styles.ts | 2 +- .../components/WalletCards/DonorCollectiveCard.tsx | 9 +++++++-- .../components/WalletDetails/BothWalletDetails.tsx | 11 ++++++++--- .../WalletDetails/DonorWalletDetails.tsx | 11 ++++++++--- 8 files changed, 33 insertions(+), 21 deletions(-) diff --git a/packages/app/index.html b/packages/app/index.html index b6773b2e..0e84f010 100644 --- a/packages/app/index.html +++ b/packages/app/index.html @@ -7,7 +7,7 @@ GoodCollective - + diff --git a/packages/app/src/components/DonorsList/DonorsListItem.tsx b/packages/app/src/components/DonorsList/DonorsListItem.tsx index 6bfa974a..29c8cbac 100644 --- a/packages/app/src/components/DonorsList/DonorsListItem.tsx +++ b/packages/app/src/components/DonorsList/DonorsListItem.tsx @@ -6,6 +6,7 @@ import useCrossNavigate from '../../routes/useCrossNavigate'; import { formatAddress } from '../../lib/formatAddress'; import { useEnsName } from 'wagmi'; import { useFlowingBalance } from '../../hooks/useFlowingBalance'; +import { GoodDollarAmount } from '../GoodDollarAmount'; interface DonorsListItemProps { donor: DonorCollective; @@ -16,12 +17,7 @@ interface DonorsListItemProps { export const DonorsListItem = ({ donor, rank, userFullName }: DonorsListItemProps) => { const { navigate } = useCrossNavigate(); - const { formatted: formattedDonations } = useFlowingBalance( - donor.contribution, - donor.timestamp, - donor.flowRate, - undefined - ); + const { wei: formattedDonations } = useFlowingBalance(donor.contribution, donor.timestamp, donor.flowRate, undefined); const { data: ensName } = useEnsName({ address: donor.donor as `0x${string}`, chainId: 1 }); const userIdentifier = userFullName ?? ensName ?? formatAddress(donor.donor); @@ -39,7 +35,8 @@ export const DonorsListItem = ({ donor, rank, userFullName }: DonorsListItemProp {userIdentifier} - G$ {formattedDonations} + G$ + ); @@ -52,7 +49,8 @@ export const DonorsListItem = ({ donor, rank, userFullName }: DonorsListItemProp {userIdentifier} - G$ {formattedDonations} + G$ + ); diff --git a/packages/app/src/components/Dropdown.tsx b/packages/app/src/components/Dropdown.tsx index b9a70941..c9c9cf22 100644 --- a/packages/app/src/components/Dropdown.tsx +++ b/packages/app/src/components/Dropdown.tsx @@ -35,7 +35,6 @@ function Dropdown({ onSelect, value, options }: DropdownProps) { style={[ styles.button, styles.row, - // eslint-disable-next-line react-native/no-inline-styles { flexGrow: 1, backgroundColor: getDropdownBGC(open), diff --git a/packages/app/src/components/GoodDollarAmount.tsx b/packages/app/src/components/GoodDollarAmount.tsx index 352056b1..429e47d9 100644 --- a/packages/app/src/components/GoodDollarAmount.tsx +++ b/packages/app/src/components/GoodDollarAmount.tsx @@ -12,10 +12,10 @@ export const GoodDollarAmount: FC = ({ amount, lastDigitsPr const formatted = formatGoodDollarAmount(amount); return ( <> - + {formatted.slice(0, -2)} - + {formatted.slice(-2)} diff --git a/packages/app/src/components/TransactionList/styles.ts b/packages/app/src/components/TransactionList/styles.ts index da40a48a..abe4a9f9 100644 --- a/packages/app/src/components/TransactionList/styles.ts +++ b/packages/app/src/components/TransactionList/styles.ts @@ -53,7 +53,7 @@ export const styles = StyleSheet.create({ ...InterRegular, fontSize: 14, color: Colors.gray[200], - weight: 400, + fontWeight: 400, textAlign: 'right', }, hash: { diff --git a/packages/app/src/components/WalletCards/DonorCollectiveCard.tsx b/packages/app/src/components/WalletCards/DonorCollectiveCard.tsx index 43b9add3..cb540bd2 100644 --- a/packages/app/src/components/WalletCards/DonorCollectiveCard.tsx +++ b/packages/app/src/components/WalletCards/DonorCollectiveCard.tsx @@ -7,6 +7,7 @@ import { DonorGreenIcon, InfoIcon } from '../../assets'; import { useFlowingBalance } from '../../hooks/useFlowingBalance'; import { useCountPeopleSupported } from '../../hooks/useCountPeopleSupported'; import { defaultInfoLabel } from '../../models/constants'; +import { GoodDollarAmount } from '../GoodDollarAmount'; interface DonorCollectiveCardProps { donorCollective: DonorCollective; @@ -29,7 +30,7 @@ function DonorCollectiveCard({ const peopleSupported = useCountPeopleSupported([donorCollective]) ?? 0; - const { formatted: donationsFormatted, usdValue: donationsUsdValue } = useFlowingBalance( + const { wei: donationsFormatted, usdValue: donationsUsdValue } = useFlowingBalance( donorCollective.contribution, donorCollective.timestamp, // Timestamp in Subgraph's UTC. donorCollective.flowRate, @@ -54,7 +55,11 @@ function DonorCollectiveCard({ {userName} has donated G$ - {donationsFormatted} + = {donationsUsdValue} USD diff --git a/packages/app/src/components/WalletDetails/BothWalletDetails.tsx b/packages/app/src/components/WalletDetails/BothWalletDetails.tsx index c6d069f2..b43941b8 100644 --- a/packages/app/src/components/WalletDetails/BothWalletDetails.tsx +++ b/packages/app/src/components/WalletDetails/BothWalletDetails.tsx @@ -6,6 +6,7 @@ import { countUniqueValuesInTwoArrays } from '../../lib/countUniqueValuesInTwoAr import { calculateGoodDollarAmounts } from '../../lib/calculateGoodDollarAmounts'; import { useDonorCollectivesFlowingBalances } from '../../hooks/useFlowingBalance'; import { useCountPeopleSupported } from '../../hooks/useCountPeopleSupported'; +import { GoodDollarAmount } from '../GoodDollarAmount'; interface BothWalletDetailsProps { donor: Donor; @@ -14,7 +15,7 @@ interface BothWalletDetailsProps { } function BothWalletDetails({ donor, steward, tokenPrice }: BothWalletDetailsProps) { - const { formatted: formattedDonations, usdValue: donationsUsdValue } = useDonorCollectivesFlowingBalances( + const { wei: formattedDonations, usdValue: donationsUsdValue } = useDonorCollectivesFlowingBalances( donor.collectives, tokenPrice ); @@ -38,8 +39,12 @@ function BothWalletDetails({ donor, steward, tokenPrice }: BothWalletDetailsProp This wallet has donated a total of - G$ - {formattedDonations} + G$ + = {donationsUsdValue} USD diff --git a/packages/app/src/components/WalletDetails/DonorWalletDetails.tsx b/packages/app/src/components/WalletDetails/DonorWalletDetails.tsx index 1c2a9968..01b347f9 100644 --- a/packages/app/src/components/WalletDetails/DonorWalletDetails.tsx +++ b/packages/app/src/components/WalletDetails/DonorWalletDetails.tsx @@ -4,6 +4,7 @@ import { styles } from './styles'; import { formatTime } from '../../lib/formatTime'; import { useDonorCollectivesFlowingBalances } from '../../hooks/useFlowingBalance'; import { useCountPeopleSupported } from '../../hooks/useCountPeopleSupported'; +import { GoodDollarAmount } from '../GoodDollarAmount'; interface DonorWalletDetailsProps { firstName: string; @@ -12,7 +13,7 @@ interface DonorWalletDetailsProps { } function DonorWalletDetails({ firstName, donor, tokenPrice }: DonorWalletDetailsProps) { - const { formatted: formattedDonations, usdValue } = useDonorCollectivesFlowingBalances(donor.collectives, tokenPrice); + const { wei: formattedDonations, usdValue } = useDonorCollectivesFlowingBalances(donor.collectives, tokenPrice); const peopleSupported = useCountPeopleSupported(donor.collectives) ?? 0; @@ -23,8 +24,12 @@ function DonorWalletDetails({ firstName, donor, tokenPrice }: DonorWalletDetails {firstName} has donated a total of - G$ - {formattedDonations} + G$ + = {usdValue} USD