addL Update Wallet Detail page & Collective page for active donation …

…streams #220

packages/app/src/components/ActiveStreamCard.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { VStack, HStack, Text, Button } from 'native-base';
+import { styles } from './WalletCards/styles';
+import { StopDonationActionButton } from './StopDonationActionButton';
+import { DonorCollective } from '../models/models';
+import { formatFlowRate } from '../lib/formatFlowRate';
+import { formatTime } from '../lib/formatTime';
+import { useGetTokenBalance } from '../hooks/useGetTokenBalance';
+import { GDToken } from '../models/constants';
+
+export interface DonationStatusCardProps {
+  donorCollective: DonorCollective;
+}
+
+export const ActiveStreamCard = React.memo(({ donorCollective }: DonationStatusCardProps) => {
+  const donorBalance = useGetTokenBalance(GDToken.address, donorCollective.donor as any);
+  const secondsLeft = Number(BigInt(donorBalance) / BigInt(donorCollective.flowRate));
+  const endDate = formatTime(Date.now() / 1000 + secondsLeft);
+
+  return (
+    <VStack space={4}>
+      {/* Stream Rate */}
+      <VStack space={1}>
+        <Text {...styles.description}>Donation Streaming Rate</Text>
+        <Text {...styles.text}>G$ {formatFlowRate(donorCollective.flowRate)} / Monthly</Text>
+      </VStack>
+
+      {/* Dates */}
+      <HStack justifyContent="space-between" marginBottom={4}>
+        <VStack>
+          <Text {...styles.description}>Date Initiated</Text>
+          <Text {...styles.text}>{formatTime(donorCollective.timestamp)}</Text>
+        </VStack>
+        <VStack>
+          <Text {...styles.description}>Estimated End Date</Text>
+          <Text {...styles.text}>{endDate}</Text>
+        </VStack>
+      </HStack>
+
+      {/* Stop Button */}
+      <StopDonationActionButton donorCollective={donorCollective} />
+    </VStack>
+  );
+});

packages/app/src/components/RoundedButton.tsx

@@ -7,8 +7,8 @@ interface RoundedButtonProps {
   title: string;
   backgroundColor: string;
   color: string;
-  fontSize: number;
-  seeType: boolean;
+  fontSize?: number;
+  seeType?: boolean;
   onPress?: () => void;
   maxWidth?: number | string;
   disabled?: boolean;
@@ -20,7 +20,7 @@ function RoundedButton({
   backgroundColor,
   color,
   fontSize,
-  seeType,
+  seeType = false,
   onPress,
   maxWidth,
   disabled,
@@ -58,10 +58,10 @@ const styles = StyleSheet.create({
   button: {
     width: '100%',
     borderRadius: 30,
-    paddingTop: 12,
-    paddingRight: 22,
-    paddingBottom: 12,
-    paddingLeft: 20,
+    paddingTop: 10,
+    paddingRight: 16,
+    paddingBottom: 10,
+    paddingLeft: 16,
     gap: 8,
     alignContent: 'center',
     borderWidth: 0,
@@ -77,11 +77,15 @@ const styles = StyleSheet.create({
     textAlign: 'right',
     marginTop: 0,
     marginBottom: 0,
+    lineHeight: 27,
+    fontSize: 18,
   },
   nonSeeTypeText: {
     ...InterSemiBold,
     textAlign: 'center',
     width: '100%',
+    lineHeight: 27,
+    fontSize: 18,
   },
   seeTypeRow: {
     flexDirection: 'row',

packages/app/src/components/StopDonationActionButton.tsx

@@ -0,0 +1,41 @@
+import { useState } from 'react';
+import ErrorModal from './modals/ErrorModal';
+import StopDonationModal from './modals/StopDonationModal';
+import ProcessingModal from './modals/ProcessingModal';
+import { useDeleteFlow } from '../hooks/useContractCalls/useDeleteFlow';
+import RoundedButton from './RoundedButton';
+import { Colors } from '../utils/colors';
+import { DonorCollective } from '../models/models';
+import { useAccount } from 'wagmi';
+
+export const StopDonationActionButton = ({ donorCollective }: { donorCollective: DonorCollective }) => {
+  const { address: maybeAddress } = useAccount();
+  const [stopDonationModalVisible, setStopDonationModalVisible] = useState(false);
+  const [processingModalVisible, setProcessingModalVisible] = useState(false);
+  const [errorMessage, setErrorMessage] = useState<string | undefined>(undefined);
+
+  const handleStopDonation = useDeleteFlow(
+    donorCollective.collective,
+    (error: string) => setErrorMessage(error),
+    (value: boolean) => setStopDonationModalVisible(value),
+    (value: boolean) => setProcessingModalVisible(value)
+  );
+  if (maybeAddress?.toLowerCase() !== donorCollective.donor.toLowerCase()) return null;
+  return (
+    <>
+      <RoundedButton
+        title="Stop Your Donation Stream"
+        backgroundColor={Colors.orange[100]}
+        color={Colors.orange[300]}
+        onPress={handleStopDonation}
+      />
+      <ErrorModal
+        openModal={!!errorMessage}
+        setOpenModal={() => setErrorMessage(undefined)}
+        message={errorMessage ?? ''}
+      />
+      <StopDonationModal openModal={stopDonationModalVisible} setOpenModal={setStopDonationModalVisible} />
+      <ProcessingModal openModal={processingModalVisible} />
+    </>
+  );
+};