From c944b71c033f326161a2c5a7cd6a977e6ce15b4e Mon Sep 17 00:00:00 2001
From: sirpy <hadar@gooddollar.org>
Date: Wed, 27 Nov 2024 16:17:16 +0200
Subject: [PATCH] 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 (
+    <View width={'100%'}>
+      <View {...container} flexGrow={1}>
+        <View flexGrow={0}>
+          <Image source={SupportImage} style={styles.supportImg} />
+          <Text style={styles.supportText}>You {isDonating ? 'Support' : 'Supported'} this GoodCollective!!</Text>
+        </View>
+
+        <VStack flexGrow={{ xl: 1, base: 0 }} borderRightWidth={{ xl: 1, base: 0 }} borderColor={'goodGrey.600'}>
+          <Text style={walletCardStyles.info}>{userName} has donated</Text>
+          <VStack style={walletCardStyles.row}>
+            <Text style={walletCardStyles.bold}>G$ </Text>
+            <GoodDollarAmount
+              style={walletCardStyles.totalReceived}
+              lastDigitsProps={{ style: { fontSize: 18, fontWeight: '300', lineHeight: 33 } }}
+              amount={donationsFormatted || '0'}
+            />
+          </VStack>
+          <Text style={walletCardStyles.formattedUsd}>= {donationsUsdValue || 0} USD</Text>
+          <VStack space={1} marginTop={4}>
+            <Text {...walletCardStyles.description}>Donation Streaming Rate</Text>
+            <Text {...walletCardStyles.text}>G$ {formatFlowRate(donorCollective.flowRate)} / Monthly</Text>
+          </VStack>
+        </VStack>
+        {/* Stream Rate */}
+
+        {/* Dates */}
+        <VStack
+          justifyContent={'space-between'}
+          flexGrow={{ xl: 1, base: 0 }}
+          flexDirection={{ xl: 'column', base: 'row' }}>
+          <VStack>
+            <Text {...walletCardStyles.description}>Date Initiated</Text>
+            <Text {...walletCardStyles.text}>{formatTime(donorCollective.timestamp)}</Text>
+          </VStack>
+          <VStack marginTop={{ xl: 4, base: 0 }}>
+            <Text {...walletCardStyles.description}>Estimated End Date</Text>
+            <Text {...walletCardStyles.text}>{endDate}</Text>
+          </VStack>
+        </VStack>
+
+        {/* Buttons */}
+        <View justifyContent={'right'} flexDirection={'column'} flexGrow={1} marginTop={{ xl: 0, base: 8 }}>
+          <StopDonationActionButton donorCollective={donorCollective} />
+          <View flex={1} marginTop={{ xl: 0, base: 4 }}>
+            <RoundedButton
+              title="See all donors"
+              backgroundColor={Colors.purple[100]}
+              color={Colors.purple[200]}
+              seeType={true}
+              onPress={() => {
+                navigate(`/collective/${donorCollective.collective}/donors`);
+              }}
+            />
+          </View>
+        </View>
+      </View>
+    </View>
+  );
+};
 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 (
       <View style={{ gap: 24, flex: 1 }}>
@@ -119,66 +223,25 @@ function ViewCollective({ collective }: ViewCollectiveProps) {
                 <Text style={styles.informationLabel}>{infoLabel}</Text>
               </View>
 
-              {hasDonated ? (
-                <View style={styles.collectiveDonateBox}>
-                  {!isDesktopView && (
-                    <>
-                      <Image source={SupportImage} style={styles.supportImg} />
-                      <Text style={styles.supportText}>
-                        You {isDonating ? 'Support' : 'Supported'} this GoodCollective!!
-                      </Text>
-                    </>
-                  )}
-                  <View style={{ gap: 16 }}>
-                    <WalletDonatedCard
-                      donorCollective={maybeDonorCollective}
-                      tokenPrice={tokenPrice || 0}
-                      userName={userName}
-                    />
-                    {isDonating ? (
-                      <ActiveStreamCard donorCollective={maybeDonorCollective} />
-                    ) : (
-                      <RoundedButton
-                        title="Donate"
-                        backgroundColor={Colors.green[100]}
-                        color={Colors.green[200]}
-                        seeType={false}
-                        onPress={() => {
-                          navigate(`/donate/${poolAddress}`);
-                        }}
-                      />
-                    )}{' '}
-                    <RoundedButton
-                      title="See all donors"
-                      backgroundColor={Colors.purple[100]}
-                      color={Colors.purple[200]}
-                      onPress={() => {
-                        navigate(`/collective/${poolAddress}/donors`);
-                      }}
-                    />
-                  </View>
-                </View>
-              ) : (
-                <View style={styles.collectiveDonateBox}>
-                  <RoundedButton
-                    title="Donate"
-                    backgroundColor={Colors.green[100]}
-                    color={Colors.green[200]}
-                    seeType={false}
-                    onPress={() => {
-                      navigate(`/donate/${poolAddress}`);
-                    }}
-                  />
-                  <RoundedButton
-                    title="See all donors"
-                    backgroundColor={Colors.purple[100]}
-                    color={Colors.purple[200]}
-                    onPress={() => {
-                      navigate(`/collective/${poolAddress}/donors`);
-                    }}
-                  />
-                </View>
-              )}
+              <View style={styles.collectiveDonateBox}>
+                <RoundedButton
+                  title="Donate"
+                  backgroundColor={Colors.green[100]}
+                  color={Colors.green[200]}
+                  seeType={false}
+                  onPress={() => {
+                    navigate(`/donate/${poolAddress}`);
+                  }}
+                />
+                <RoundedButton
+                  title="See all donors"
+                  backgroundColor={Colors.purple[100]}
+                  color={Colors.purple[200]}
+                  onPress={() => {
+                    navigate(`/collective/${poolAddress}/donors`);
+                  }}
+                />
+              </View>
             </View>
           </View>
 
@@ -215,6 +278,7 @@ function ViewCollective({ collective }: ViewCollectiveProps) {
               />
             </View>
           </View>
+          <HasDonatedCard donorCollective={maybeDonorCollective} tokenPrice={tokenPrice} />
         </View>
 
         <View style={styles.collectiveDesktopActions}>
@@ -301,62 +365,7 @@ function ViewCollective({ collective }: ViewCollectiveProps) {
               currency={collective.rewardToken}
             />
           </View>
-
-          {hasDonated ? (
-            <View style={{ gap: 24 }}>
-              <Image source={SupportImage} style={styles.supportImg} />
-              <Text style={styles.supportText}>You {isDonating ? 'Support' : 'Supported'} this GoodCollective!!</Text>
-              <View style={{ gap: 16 }}>
-                <WalletDonatedCard
-                  donorCollective={maybeDonorCollective}
-                  tokenPrice={tokenPrice || 0}
-                  userName={userName}
-                />
-                {isDonating ? (
-                  <ActiveStreamCard donorCollective={maybeDonorCollective} />
-                ) : (
-                  <RoundedButton
-                    title="Donate"
-                    backgroundColor={Colors.green[100]}
-                    color={Colors.green[200]}
-                    seeType={false}
-                    onPress={() => {
-                      navigate(`/donate/${poolAddress}`);
-                    }}
-                  />
-                )}
-                <RoundedButton
-                  title="See all donors"
-                  backgroundColor={Colors.purple[100]}
-                  color={Colors.purple[200]}
-                  onPress={() => {
-                    navigate(`/collective/${poolAddress}/donors`);
-                  }}
-                />
-              </View>
-            </View>
-          ) : (
-            <View style={{ gap: 16 }}>
-              <RoundedButton
-                title="Donate"
-                backgroundColor={Colors.green[100]}
-                color={Colors.green[200]}
-                seeType={false}
-                onPress={() => {
-                  navigate(`/donate/${poolAddress}`);
-                }}
-              />
-              <RoundedButton
-                title="See all donors"
-                backgroundColor={Colors.purple[100]}
-                color={Colors.purple[200]}
-                fontSize={18}
-                onPress={() => {
-                  navigate(`/collective/${poolAddress}/donors`);
-                }}
-              />
-            </View>
-          )}
+          <HasDonatedCard donorCollective={maybeDonorCollective} tokenPrice={tokenPrice} />
         </View>
 
         <View style={[styles.container]}>
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',