From c944b71c033f326161a2c5a7cd6a977e6ce15b4e Mon Sep 17 00:00:00 2001 From: sirpy Date: Wed, 27 Nov 2024 16:17:16 +0200 Subject: [PATCH 1/8] wip: working has stream design --- .../app/src/components/ViewCollective.tsx | 261 +++++++++--------- packages/app/src/theme/theme.ts | 2 +- 2 files changed, 136 insertions(+), 127 deletions(-) diff --git a/packages/app/src/components/ViewCollective.tsx b/packages/app/src/components/ViewCollective.tsx index e1668a9c..19175b8b 100644 --- a/packages/app/src/components/ViewCollective.tsx +++ b/packages/app/src/components/ViewCollective.tsx @@ -1,5 +1,5 @@ -import { StyleSheet, Text, Image } from 'react-native'; -import { Link, View } from 'native-base'; +import { StyleSheet, Image } from 'react-native'; +import { Link, useBreakpointValue, Text, View, VStack, HStack } from 'native-base'; import { useAccount, useEnsName } from 'wagmi'; import RowItem from './RowItem'; @@ -13,7 +13,7 @@ import { Colors } from '../utils/colors'; import { useScreenSize } from '../theme/hooks'; import { formatTime } from '../lib/formatTime'; -import { Collective } from '../models/models'; +import { Collective, DonorCollective } from '../models/models'; import { useDonorCollectiveByAddresses, useGetTokenPrice } from '../hooks'; import { AtIcon, @@ -33,11 +33,120 @@ import { } from '../assets/'; import { calculateGoodDollarAmounts } from '../lib/calculateGoodDollarAmounts'; import FlowingDonationsRowItem from './FlowingDonationsRowItem'; -import { defaultInfoLabel, SUBGRAPH_POLL_INTERVAL } from '../models/constants'; +import { defaultInfoLabel, GDToken, SUBGRAPH_POLL_INTERVAL } from '../models/constants'; import env from '../lib/env'; import { ActiveStreamCard } from './ActiveStreamCard'; -import { WalletDonatedCard } from './WalletCards/WalletDonatedCard'; +import { useGetTokenBalance } from '../hooks/useGetTokenBalance'; +import { useFlowingBalance } from '../hooks/useFlowingBalance'; +import { GoodDollarAmount } from './GoodDollarAmount'; +import { styles as walletCardStyles } from '../components/WalletCards/styles'; +import { formatFlowRate } from '../lib/formatFlowRate'; +import { StopDonationActionButton } from './StopDonationActionButton'; +import { V } from '../../dist/assets/transactionRequest-be6a8ea9-6f2aa5fb'; +const HasDonatedCard = ({ + donorCollective, + tokenPrice, +}: { + donorCollective?: DonorCollective; + tokenPrice?: number; +}) => { + const { address } = useAccount(); + const { data: ensName } = useEnsName({ address, chainId: 1 }); + const userName = ensName ?? 'This wallet'; + const { navigate } = useCrossNavigate(); + const isDonating = donorCollective && donorCollective.flowRate !== '0'; + const hasDonated = isDonating || (donorCollective && donorCollective.contribution !== '0'); + const donorBalance = useGetTokenBalance(GDToken.address, donorCollective?.donor as any); + const secondsLeft = isDonating ? Number(BigInt(donorBalance) / BigInt(donorCollective?.flowRate || 1)) : 0; + const endDate = formatTime(Date.now() / 1000 + secondsLeft); + + const { wei: donationsFormatted, usdValue: donationsUsdValue } = useFlowingBalance( + donorCollective?.contribution || '0', + donorCollective?.timestamp || 0, // Timestamp in Subgraph's UTC. + donorCollective?.flowRate || '0', + tokenPrice + ); + const container = useBreakpointValue({ + base: { + flexDirection: 'column', + borderTopWidth: 1, + borderColor: 'goodGrey.600', + gap: 4, + marginTop: 8, + }, + xl: { + gap: 8, + flexDirection: 'row', + borderTopWidth: 1, + borderColor: 'goodGrey.600', + marginTop: 8, + paddingTop: 8, + marginBottom: 8, + justifyContent: 'space-between', + }, + }); + if (!donorCollective || !hasDonated) return null; + return ( + + + + + You {isDonating ? 'Support' : 'Supported'} this GoodCollective!! + + + + {userName} has donated + + G$ + + + = {donationsUsdValue || 0} USD + + Donation Streaming Rate + G$ {formatFlowRate(donorCollective.flowRate)} / Monthly + + + {/* Stream Rate */} + + {/* Dates */} + + + Date Initiated + {formatTime(donorCollective.timestamp)} + + + Estimated End Date + {endDate} + + + + {/* Buttons */} + + + + { + navigate(`/collective/${donorCollective.collective}/donors`); + }} + /> + + + + + ); +}; interface ViewCollectiveProps { collective: Collective; } @@ -63,11 +172,7 @@ function ViewCollective({ collective }: ViewCollectiveProps) { const infoLabel = collective.ipfs.rewardDescription ?? defaultInfoLabel; const { address } = useAccount(); - const { data: ensName } = useEnsName({ address, chainId: 1 }); - const userName = ensName ?? 'This wallet'; const maybeDonorCollective = useDonorCollectiveByAddresses(address ?? '', poolAddress, SUBGRAPH_POLL_INTERVAL); - const isDonating = maybeDonorCollective && maybeDonorCollective.flowRate !== '0'; - const hasDonated = isDonating || (maybeDonorCollective && maybeDonorCollective.contribution !== '0'); const { price: tokenPrice } = useGetTokenPrice('G$'); @@ -76,7 +181,6 @@ function ViewCollective({ collective }: ViewCollectiveProps) { tokenPrice, 2 ); - if (isDesktopView) { return ( @@ -119,66 +223,25 @@ function ViewCollective({ collective }: ViewCollectiveProps) { {infoLabel} - {hasDonated ? ( - - {!isDesktopView && ( - <> - - - You {isDonating ? 'Support' : 'Supported'} this GoodCollective!! - - - )} - - - {isDonating ? ( - - ) : ( - { - navigate(`/donate/${poolAddress}`); - }} - /> - )}{' '} - { - navigate(`/collective/${poolAddress}/donors`); - }} - /> - - - ) : ( - - { - navigate(`/donate/${poolAddress}`); - }} - /> - { - navigate(`/collective/${poolAddress}/donors`); - }} - /> - - )} + + { + navigate(`/donate/${poolAddress}`); + }} + /> + { + navigate(`/collective/${poolAddress}/donors`); + }} + /> + @@ -215,6 +278,7 @@ function ViewCollective({ collective }: ViewCollectiveProps) { /> + @@ -301,62 +365,7 @@ function ViewCollective({ collective }: ViewCollectiveProps) { currency={collective.rewardToken} /> - - {hasDonated ? ( - - - You {isDonating ? 'Support' : 'Supported'} this GoodCollective!! - - - {isDonating ? ( - - ) : ( - { - navigate(`/donate/${poolAddress}`); - }} - /> - )} - { - navigate(`/collective/${poolAddress}/donors`); - }} - /> - - - ) : ( - - { - navigate(`/donate/${poolAddress}`); - }} - /> - { - navigate(`/collective/${poolAddress}/donors`); - }} - /> - - )} + diff --git a/packages/app/src/theme/theme.ts b/packages/app/src/theme/theme.ts index e5ff5681..022d6fbc 100644 --- a/packages/app/src/theme/theme.ts +++ b/packages/app/src/theme/theme.ts @@ -19,7 +19,7 @@ export const nbTheme = extendTheme({ 300: '#CCCCCC', 400: '#B0B0B0', 500: '#1F2937', - 600: '#5A5A5A', + 600: '#D4D4D4', }, goodPurple: { 100: '#E2EAFF', From 4a74b48a7d09eff18409652301725535f58200c5 Mon Sep 17 00:00:00 2001 From: sirpy Date: Wed, 27 Nov 2024 16:31:09 +0200 Subject: [PATCH 2/8] add: finalize design --- .../app/src/components/ViewCollective.tsx | 48 +++++++++++++------ 1 file changed, 34 insertions(+), 14 deletions(-) diff --git a/packages/app/src/components/ViewCollective.tsx b/packages/app/src/components/ViewCollective.tsx index 19175b8b..270dd5b2 100644 --- a/packages/app/src/components/ViewCollective.tsx +++ b/packages/app/src/components/ViewCollective.tsx @@ -106,31 +106,51 @@ const HasDonatedCard = ({ /> = {donationsUsdValue || 0} USD - - Donation Streaming Rate - G$ {formatFlowRate(donorCollective.flowRate)} / Monthly - + {isDonating && ( + + Donation Streaming Rate + G$ {formatFlowRate(donorCollective.flowRate)} / Monthly + + )} {/* Stream Rate */} {/* Dates */} - - Date Initiated - {formatTime(donorCollective.timestamp)} - - - Estimated End Date - {endDate} - + {isDonating && ( + <> + + Date Initiated + {formatTime(donorCollective.timestamp)} + + + + Estimated End Date + {endDate} + + + )} {/* Buttons */} - - + + {isDonating ? ( + + ) : ( + { + navigate(`/donate/${donorCollective.collective}`); + }} + /> + )} Date: Wed, 27 Nov 2024 16:42:43 +0200 Subject: [PATCH 3/8] fix: lint --- packages/app/src/components/ViewCollective.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/app/src/components/ViewCollective.tsx b/packages/app/src/components/ViewCollective.tsx index 270dd5b2..4da9f6cd 100644 --- a/packages/app/src/components/ViewCollective.tsx +++ b/packages/app/src/components/ViewCollective.tsx @@ -1,5 +1,5 @@ import { StyleSheet, Image } from 'react-native'; -import { Link, useBreakpointValue, Text, View, VStack, HStack } from 'native-base'; +import { Link, useBreakpointValue, Text, View, VStack } from 'native-base'; import { useAccount, useEnsName } from 'wagmi'; import RowItem from './RowItem'; @@ -35,14 +35,12 @@ import { calculateGoodDollarAmounts } from '../lib/calculateGoodDollarAmounts'; import FlowingDonationsRowItem from './FlowingDonationsRowItem'; import { defaultInfoLabel, GDToken, SUBGRAPH_POLL_INTERVAL } from '../models/constants'; import env from '../lib/env'; -import { ActiveStreamCard } from './ActiveStreamCard'; import { useGetTokenBalance } from '../hooks/useGetTokenBalance'; import { useFlowingBalance } from '../hooks/useFlowingBalance'; import { GoodDollarAmount } from './GoodDollarAmount'; import { styles as walletCardStyles } from '../components/WalletCards/styles'; import { formatFlowRate } from '../lib/formatFlowRate'; import { StopDonationActionButton } from './StopDonationActionButton'; -import { V } from '../../dist/assets/transactionRequest-be6a8ea9-6f2aa5fb'; const HasDonatedCard = ({ donorCollective, From 97098a1df8f69fdad58f0b97b87e57561afa40ef Mon Sep 17 00:00:00 2001 From: sirpy Date: Wed, 27 Nov 2024 16:44:17 +0200 Subject: [PATCH 4/8] fix: eslint --- packages/app/index.js | 1 - packages/app/src/components/CollectiveHomeCard.tsx | 2 +- packages/app/src/hooks/useFetchFullName.ts | 2 +- 3 files changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/app/index.js b/packages/app/index.js index e3744aff..1cb00b3a 100644 --- a/packages/app/index.js +++ b/packages/app/index.js @@ -1,4 +1,3 @@ -import React from 'react'; // Import the crypto getRandomValues shim (**BEFORE** the shims) import 'react-native-get-random-values'; diff --git a/packages/app/src/components/CollectiveHomeCard.tsx b/packages/app/src/components/CollectiveHomeCard.tsx index 90ce7917..a895fbd6 100644 --- a/packages/app/src/components/CollectiveHomeCard.tsx +++ b/packages/app/src/components/CollectiveHomeCard.tsx @@ -1,4 +1,4 @@ -import { Image, StyleSheet, Text, TouchableOpacity, TouchableOpacityProps, View } from 'react-native'; +import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native'; import { InterSemiBold, InterSmall } from '../utils/webFonts'; import useCrossNavigate from '../routes/useCrossNavigate'; diff --git a/packages/app/src/hooks/useFetchFullName.ts b/packages/app/src/hooks/useFetchFullName.ts index 53347898..bfa34ce8 100644 --- a/packages/app/src/hooks/useFetchFullName.ts +++ b/packages/app/src/hooks/useFetchFullName.ts @@ -49,7 +49,7 @@ export function useFetchFullNames(addresses: string[]): any { const hashedAddresses = Object.keys(addressToHashMapping); - const { data, error } = useMongoDbQuery(findProfiles, { + const { data } = useMongoDbQuery(findProfiles, { variables: { query: { index: { walletAddress: { hash_in: hashedAddresses } }, From e36b019f0f8952d8b1195253e9c60eb6da45eeda Mon Sep 17 00:00:00 2001 From: LewisB Date: Thu, 28 Nov 2024 12:01:00 +0100 Subject: [PATCH 5/8] fix: fixed impact button on mobile --- packages/app/src/components/ImpactButton.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/app/src/components/ImpactButton.tsx b/packages/app/src/components/ImpactButton.tsx index 35bcb017..7ae280c9 100644 --- a/packages/app/src/components/ImpactButton.tsx +++ b/packages/app/src/components/ImpactButton.tsx @@ -1,4 +1,4 @@ -import { Image, Text, TouchableOpacity, View, StyleSheet } from 'react-native'; +import { Image, Platform, Text, TouchableOpacity, View, StyleSheet } from 'react-native'; import { InterSemiBold } from '../utils/webFonts'; import { Colors } from '../utils/colors'; @@ -14,7 +14,13 @@ function ImpactButton({ title, onClick }: ImpactButtonProps) { const { isDesktopView } = useScreenSize(); return ( - + {title} From b45aea3c2b713e801453c1ec87246a68e422e85f Mon Sep 17 00:00:00 2001 From: LewisB Date: Thu, 28 Nov 2024 12:01:29 +0100 Subject: [PATCH 6/8] fix: layout difference on collective page --- packages/app/src/components/Layout/Layout.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/app/src/components/Layout/Layout.tsx b/packages/app/src/components/Layout/Layout.tsx index dc12b005..cee63f70 100644 --- a/packages/app/src/components/Layout/Layout.tsx +++ b/packages/app/src/components/Layout/Layout.tsx @@ -41,7 +41,7 @@ function Layout({ children, breadcrumbPath }: LayoutProps) { styles.scrollView, { ...(!isMobileView && { maxHeight: scrollViewHeight, minHeight: scrollViewHeight }) }, { paddingBottom: isCollectivePage ? 61 : 0 }, - { paddingHorizontal: isTabletView ? 48 : isMobileView ? 8 : 24 }, + { paddingHorizontal: isTabletView ? 48 : isMobileView ? 0 : isCollectivePage ? 0 : 24 }, ]; return ( From 58c47fe9e598c9157251f8b2f60a4450e302c33e Mon Sep 17 00:00:00 2001 From: Lewis B Date: Thu, 28 Nov 2024 20:17:45 +0900 Subject: [PATCH 7/8] Update packages/app/src/components/ViewCollective.tsx --- packages/app/src/components/ViewCollective.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/app/src/components/ViewCollective.tsx b/packages/app/src/components/ViewCollective.tsx index 4da9f6cd..9f69f67d 100644 --- a/packages/app/src/components/ViewCollective.tsx +++ b/packages/app/src/components/ViewCollective.tsx @@ -119,7 +119,7 @@ const HasDonatedCard = ({ justifyContent={'space-between'} flexGrow={{ xl: 1, base: 0 }} flexDirection={{ xl: 'column', base: 'row' }}> - {isDonating && ( + {isDonating ? ( <> Date Initiated @@ -131,7 +131,7 @@ const HasDonatedCard = ({ {endDate} - )} + ) : null} {/* Buttons */} From 1910cb7de2540a96f7c438c8509dfe6eccd37bd5 Mon Sep 17 00:00:00 2001 From: Lewis B Date: Thu, 28 Nov 2024 20:17:54 +0900 Subject: [PATCH 8/8] Update packages/app/src/components/ViewCollective.tsx --- packages/app/src/components/ViewCollective.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/app/src/components/ViewCollective.tsx b/packages/app/src/components/ViewCollective.tsx index 9f69f67d..ff13e62f 100644 --- a/packages/app/src/components/ViewCollective.tsx +++ b/packages/app/src/components/ViewCollective.tsx @@ -104,12 +104,12 @@ const HasDonatedCard = ({ /> = {donationsUsdValue || 0} USD - {isDonating && ( + {isDonating ? ( Donation Streaming Rate G$ {formatFlowRate(donorCollective.flowRate)} / Monthly - )} + ) : null} {/* Stream Rate */}