fixed thank you modal behavior

GoodDollar · Jan 19, 2024 · 396f622 · 396f622
1 parent 4d655cf
commit 396f622
Show file tree

Hide file tree

Showing 15 changed files with 171 additions and 191 deletions.
diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx
@@ -13,7 +13,6 @@ import * as WebRoute from './routes/routing.web';
 import ActivityLogPage from './pages/ActivityLogPage';
 import { Providers } from './Providers';
 import DonatePage from './pages/DonatePage';
-import ModalTestPage from './pages/ModalTestPage';
 import { configureChains, createConfig, WagmiConfig } from 'wagmi';
 import { celo, mainnet } from 'wagmi/chains';
 import { publicProvider } from 'wagmi/providers/public';
@@ -95,7 +94,6 @@ function App(): JSX.Element {
                   <MobileRoute.Route path="/collective/:id/donors" element={<ViewDonorsPage />} />
                   <MobileRoute.Route path="/profile/:id" element={<WalletProfilePage />} />
                   <MobileRoute.Route path="/profile/:id/activity" element={<ActivityLogPage />} />
-                  <MobileRoute.Route path="/modalTest" element={<ModalTestPage />} />
                   <MobileRoute.Route path="/donate" element={<DonatePage />} />
                 </MobileRoute.Routes>
               </MobileRoute.Router>
@@ -113,7 +111,6 @@ function App(): JSX.Element {
                   <WebRoute.Route path="/profile/:id/activity" element={<ActivityLogPage />} />
                   <WebRoute.Route path="/profile/" element={<WalletProfilePage />} />
                   <WebRoute.Route path="/donate/:id" element={<DonatePage />} />
-                  <WebRoute.Route path="/modalTest" element={<ModalTestPage />} />
                 </WebRoute.Routes>
               </WebRoute.Router>
             )}

diff --git a/packages/app/src/components/DonateComponent.tsx b/packages/app/src/components/DonateComponent.tsx
@@ -2,7 +2,7 @@ import { useCallback, useMemo, useState } from 'react';
 import { Image, StyleSheet, Text, TextInput, View } from 'react-native';
 import { InterRegular, InterSemiBold, InterSmall } from '../utils/webFonts';
 import RoundedButton from './RoundedButton';
-import CompleteDonationModal from './CompleteDonationModal';
+import CompleteDonationModal from './modals/CompleteDonationModal';
 import { Colors } from '../utils/colors';
 import { Link, useMediaQuery } from 'native-base';
 import Dropdown from './Dropdown';
@@ -16,14 +16,15 @@ import { InfoIconOrange } from '../assets';
 import { useLocation } from 'react-router-native';
 import Decimal from 'decimal.js';
 import { formatFiatCurrency } from '../lib/formatFiatCurrency';
-import ErrorModal from './ErrorModal';
+import ErrorModal from './modals/ErrorModal';
 import { SwapRouteState, useSwapRoute } from '../hooks/useSwapRoute';
 import { useApproveSwapTokenCallback } from '../hooks/useApproveSwapTokenCallback';
-import ApproveSwapModal from './ApproveSwapModal';
+import ApproveSwapModal from './modals/ApproveSwapModal';
 import { waitForTransaction } from '@wagmi/core';
 import { TransactionReceipt } from 'viem';
 import { useToken, useTokenList } from '../hooks/useTokenList';
 import { formatDecimalStringInput } from '../lib/formatDecimalStringInput';
+import ThankYouModal from './modals/ThankYouModal';
 
 interface DonateComponentProps {
   collective: IpfsCollective;
@@ -42,6 +43,7 @@ function DonateComponent({ collective }: DonateComponentProps) {
   const [completeDonationModalVisible, setCompleteDonationModalVisible] = useState(false);
   const [errorMessage, setErrorMessage] = useState<string | undefined>(undefined);
   const [approveSwapModalVisible, setApproveSwapModalVisible] = useState(false);
+  const [thankYouModalVisible, setThankYouModalVisible] = useState(false);
 
   const [currency, setCurrency] = useState<string>('G$');
   const [frequency, setFrequency] = useState<Frequency>(Frequency.OneTime);
@@ -84,6 +86,7 @@ function DonateComponent({ collective }: DonateComponentProps) {
     frequency,
     (error) => setErrorMessage(error),
     (value: boolean) => setCompleteDonationModalVisible(value),
+    (value: boolean) => setThankYouModalVisible(value),
     rawMinimumAmountOut,
     swapPath
   );
@@ -473,6 +476,7 @@ function DonateComponent({ collective }: DonateComponentProps) {
       <ErrorModal openModal={!!errorMessage} setOpenModal={onCloseErrorModal} message={errorMessage ?? ''} />
       <ApproveSwapModal openModal={approveSwapModalVisible} setOpenModal={setApproveSwapModalVisible} />
       <CompleteDonationModal openModal={completeDonationModalVisible} setOpenModal={setCompleteDonationModalVisible} />
+      <ThankYouModal openModal={thankYouModalVisible} setOpenModal={setThankYouModalVisible} collective={collective} />
     </View>
   );
 }

diff --git a/packages/app/src/components/ViewCollective.tsx b/packages/app/src/components/ViewCollective.tsx
@@ -6,8 +6,7 @@ import StewardList from './StewardsList/StewardsList';
 import TransactionList from './TransactionList/TransactionList';
 import { InterSemiBold, InterSmall } from '../utils/webFonts';
 import useCrossNavigate from '../routes/useCrossNavigate';
-import StopDonationModal from './StopDonationModal';
-import ThankYouModal from './ThankYouModal';
+import StopDonationModal from './modals/StopDonationModal';
 import { Colors } from '../utils/colors';
 import { Link, useMediaQuery } from 'native-base';
 import { formatTime } from '../lib/formatTime';
@@ -33,7 +32,7 @@ import {
 import { calculateGoodDollarAmounts } from '../lib/calculateGoodDollarAmounts';
 import FlowingDonationsRowItem from './FlowingDonationsRowItem';
 import { useDeleteFlow } from '../hooks/useContractCalls/useDeleteFlow';
-import ErrorModal from './ErrorModal';
+import ErrorModal from './modals/ErrorModal';
 import FlowingCurrentPoolRowItem from './FlowingCurrentPoolRowItem';
 
 interface ViewCollectiveProps {
@@ -69,7 +68,6 @@ function ViewCollective({ collective }: ViewCollectiveProps) {
   const isDonating = maybeDonorCollective && maybeDonorCollective.flowRate !== '0';
 
   const [stopDonationModalVisible, setStopDonationModalVisible] = useState(false);
-  const [donationModalVisible, setDonationModalVisible] = useState(false);
   const [errorMessage, setErrorMessage] = useState<string | undefined>(undefined);
 
   const handleStopDonation = useDeleteFlow(
@@ -234,7 +232,6 @@ function ViewCollective({ collective }: ViewCollectiveProps) {
           setOpenModal={() => setErrorMessage(undefined)}
           message={errorMessage ?? ''}
         />
-        <ThankYouModal openModal={donationModalVisible} setOpenModal={setDonationModalVisible} />
         <StopDonationModal openModal={stopDonationModalVisible} setOpenModal={setStopDonationModalVisible} />
       </View>
     );
@@ -367,7 +364,6 @@ function ViewCollective({ collective }: ViewCollectiveProps) {
           message={errorMessage ?? ''}
         />
         <StopDonationModal openModal={stopDonationModalVisible} setOpenModal={setStopDonationModalVisible} />
-        <ThankYouModal openModal={donationModalVisible} setOpenModal={setDonationModalVisible} />
       </View>
     </View>
   );

diff --git a/...s/app/src/components/ApproveSwapModal.tsx → ...rc/components/modals/ApproveSwapModal.tsx b/...s/app/src/components/ApproveSwapModal.tsx → ...rc/components/modals/ApproveSwapModal.tsx
@@ -1,8 +1,8 @@
 import { Modal, StyleSheet, Text, View, Image, TouchableOpacity } from 'react-native';
-import { InterRegular, InterSemiBold } from '../utils/webFonts';
-import { Colors } from '../utils/colors';
-import { modalStyles } from './shared';
-import { CloseIcon, ApproveTokenImg } from '../assets';
+import { InterRegular, InterSemiBold } from '../../utils/webFonts';
+import { Colors } from '../../utils/colors';
+import { modalStyles } from '../shared';
+import { CloseIcon, ApproveTokenImg } from '../../assets';
 
 interface AproveSwapModalProps {
   openModal: boolean;
@@ -11,25 +11,23 @@ interface AproveSwapModalProps {
 
 const ApproveSwapModal = ({ openModal, setOpenModal }: AproveSwapModalProps) => {
   return (
-    <View style={styles.centeredView}>
-      <Modal animationType="slide" transparent={true} visible={openModal}>
-        <View style={styles.centeredView}>
-          <View style={styles.modalView}>
-            <View style={modalStyles.modalCloseIconWrapper}>
-              <TouchableOpacity style={modalStyles.modalCloseIcon} onPress={() => setOpenModal(false)}>
-                <Image source={CloseIcon} style={styles.closeIcon} />
-              </TouchableOpacity>
-            </View>
-            <Text style={styles.title}>APPROVE TOKEN SWAP</Text>
-            <Text style={styles.paragraph}>
-              To approve the exchange from your donation currency to this GoodCollective's currency, sign with your
-              wallet.
-            </Text>
-            <Image source={ApproveTokenImg} alt="woman" style={styles.image} />
+    <Modal style={styles.centeredView} animationType="slide" transparent={true} visible={openModal}>
+      <View style={styles.centeredView}>
+        <View style={styles.modalView}>
+          <View style={modalStyles.modalCloseIconWrapper}>
+            <TouchableOpacity style={modalStyles.modalCloseIcon} onPress={() => setOpenModal(false)}>
+              <Image source={CloseIcon} style={styles.closeIcon} />
+            </TouchableOpacity>
           </View>
+          <Text style={styles.title}>APPROVE TOKEN SWAP</Text>
+          <Text style={styles.paragraph}>
+            To approve the exchange from your donation currency to this GoodCollective's currency, sign with your
+            wallet.
+          </Text>
+          <Image source={ApproveTokenImg} alt="woman" style={styles.image} />
         </View>
-      </Modal>
-    </View>
+      </View>
+    </Modal>
   );
 };
 

diff --git a/.../src/components/CompleteDonationModal.tsx → ...mponents/modals/CompleteDonationModal.tsx b/.../src/components/CompleteDonationModal.tsx → ...mponents/modals/CompleteDonationModal.tsx
@@ -1,9 +1,8 @@
 import { Modal, StyleSheet, Text, View, Image, TouchableOpacity } from 'react-native';
-import { InterRegular, InterSemiBold } from '../utils/webFonts';
-// import useCrossNavigate from '../routes/useCrossNavigate';
-import { Colors } from '../utils/colors';
-import { modalStyles } from './shared';
-import { CloseIcon, PhoneImg } from '../assets';
+import { InterRegular, InterSemiBold } from '../../utils/webFonts';
+import { Colors } from '../../utils/colors';
+import { modalStyles } from '../shared';
+import { CloseIcon, PhoneImg } from '../../assets';
 
 interface CompleteDonationModalProps {
   openModal: boolean;
@@ -14,22 +13,20 @@ const CompleteDonationModal = ({ openModal, setOpenModal }: CompleteDonationModa
   const onClickClose = () => setOpenModal(false);
 
   return (
-    <View style={styles.centeredView}>
-      <Modal animationType="slide" transparent={true} visible={openModal}>
-        <View style={styles.centeredView}>
-          <View style={styles.modalView}>
-            <View style={modalStyles.modalCloseIconWrapper}>
-              <TouchableOpacity style={modalStyles.modalCloseIcon} onPress={onClickClose}>
-                <Image source={CloseIcon} style={styles.closeIcon} />
-              </TouchableOpacity>
-            </View>
-            <Text style={styles.title}>COMPLETE YOUR DONATION</Text>
-            <Text style={styles.paragraph}>To complete your donation, sign with your wallet.</Text>
-            <Image source={PhoneImg} alt="woman" style={styles.image} />
+    <Modal style={styles.centeredView} animationType="slide" transparent={true} visible={openModal}>
+      <View style={styles.centeredView}>
+        <View style={styles.modalView}>
+          <View style={modalStyles.modalCloseIconWrapper}>
+            <TouchableOpacity style={modalStyles.modalCloseIcon} onPress={onClickClose}>
+              <Image source={CloseIcon} style={styles.closeIcon} />
+            </TouchableOpacity>
           </View>
+          <Text style={styles.title}>COMPLETE YOUR DONATION</Text>
+          <Text style={styles.paragraph}>To complete your donation, sign with your wallet.</Text>
+          <Image source={PhoneImg} alt="woman" style={styles.image} />
         </View>
-      </Modal>
-    </View>
+      </View>
+    </Modal>
   );
 };
 

diff --git a/packages/app/src/components/ErrorModal.tsx → .../app/src/components/modals/ErrorModal.tsx b/packages/app/src/components/ErrorModal.tsx → .../app/src/components/modals/ErrorModal.tsx
@@ -1,7 +1,7 @@
 import { Modal, StyleSheet, Text, View, Image, TouchableOpacity } from 'react-native';
-import { InterRegular, InterSemiBold } from '../utils/webFonts';
-import { Colors } from '../utils/colors';
-import { CloseIcon, ThankYouImg } from '../assets';
+import { InterRegular, InterSemiBold } from '../../utils/webFonts';
+import { Colors } from '../../utils/colors';
+import { CloseIcon, ThankYouImg } from '../../assets';
 
 interface ErrorModalProps {
   openModal: boolean;
@@ -12,27 +12,25 @@ interface ErrorModalProps {
 const ErrorModal = ({ openModal, setOpenModal, message }: ErrorModalProps) => {
   const onCloseClicked = () => setOpenModal(false);
   return (
-    <View style={styles.centeredView}>
-      <Modal animationType="slide" transparent={true} visible={openModal}>
-        <View style={styles.centeredView}>
-          <View style={styles.modalView}>
-            <View style={styles.modalCloseIconWrapper}>
-              <TouchableOpacity style={styles.modalCloseIcon} onPress={onCloseClicked}>
-                <Image source={CloseIcon} style={styles.closeIcon} />
-              </TouchableOpacity>
-            </View>
-
-            <Text style={styles.title}>SOMETHING WENT WRONG</Text>
-            <Text style={styles.paragraph}>Please try again later.</Text>
-            <Text style={styles.paragraph}>Reason: {message}</Text>
-            <Image source={ThankYouImg} alt="woman" style={styles.image} />
-            <TouchableOpacity style={styles.button} onPress={onCloseClicked}>
-              <Text style={styles.buttonText}>OK</Text>
+    <Modal style={styles.centeredView} animationType="slide" transparent={true} visible={openModal}>
+      <View style={styles.centeredView}>
+        <View style={styles.modalView}>
+          <View style={styles.modalCloseIconWrapper}>
+            <TouchableOpacity style={styles.modalCloseIcon} onPress={onCloseClicked}>
+              <Image source={CloseIcon} style={styles.closeIcon} />
             </TouchableOpacity>
           </View>
+
+          <Text style={styles.title}>SOMETHING WENT WRONG</Text>
+          <Text style={styles.paragraph}>Please try again later.</Text>
+          <Text style={styles.paragraph}>Reason: {message}</Text>
+          <Image source={ThankYouImg} alt="woman" style={styles.image} />
+          <TouchableOpacity style={styles.button} onPress={onCloseClicked}>
+            <Text style={styles.buttonText}>OK</Text>
+          </TouchableOpacity>
         </View>
-      </Modal>
-    </View>
+      </View>
+    </Modal>
   );
 };
 

diff --git a/.../app/src/components/StopDonationModal.tsx → ...c/components/modals/StopDonationModal.tsx b/.../app/src/components/StopDonationModal.tsx → ...c/components/modals/StopDonationModal.tsx
@@ -1,35 +1,30 @@
 import { Modal, StyleSheet, Text, View, Image, TouchableOpacity } from 'react-native';
-import { InterRegular, InterSemiBold } from '../utils/webFonts';
-// import useCrossNavigate from '../routes/useCrossNavigate';
-import { Colors } from '../utils/colors';
-import { QuestionImg } from '../assets';
+import { InterRegular, InterSemiBold } from '../../utils/webFonts';
+import { Colors } from '../../utils/colors';
+import { QuestionImg } from '../../assets';
 
 interface StopDonationModalProps {
   openModal: boolean;
   setOpenModal: any;
 }
 
 const StopDonationModal = ({ openModal, setOpenModal }: StopDonationModalProps) => {
-  // const { navigate } = useCrossNavigate();
   return (
-    <View style={styles.centeredView}>
-      <Modal animationType="slide" transparent={true} visible={openModal}>
-        <View style={styles.centeredView}>
-          <View style={styles.modalView}>
-            <Text style={styles.title}>ARE YOU SURE YOU WANT TO STOP YOUR DONATION?</Text>
-            <Text style={styles.paragraph}>
-              If so, please sign with your wallet. If not, please click below to return to the GoodCollective you
-              support.
-            </Text>
+    <Modal style={styles.centeredView} animationType="slide" transparent={true} visible={openModal}>
+      <View style={styles.centeredView}>
+        <View style={styles.modalView}>
+          <Text style={styles.title}>ARE YOU SURE YOU WANT TO STOP YOUR DONATION?</Text>
+          <Text style={styles.paragraph}>
+            If so, please sign with your wallet. If not, please click below to return to the GoodCollective you support.
+          </Text>
 
-            <Image source={QuestionImg} alt="woman" style={styles.image} />
-            <TouchableOpacity style={styles.button} onPress={() => setOpenModal(false)}>
-              <Text style={styles.buttonText}>GO BACK</Text>
-            </TouchableOpacity>
-          </View>
+          <Image source={QuestionImg} alt="woman" style={styles.image} />
+          <TouchableOpacity style={styles.button} onPress={() => setOpenModal(false)}>
+            <Text style={styles.buttonText}>GO BACK</Text>
+          </TouchableOpacity>
         </View>
-      </Modal>
-    </View>
+      </View>
+    </Modal>
   );
 };
 

diff --git a/packages/app/src/components/SwitchModal.tsx → ...app/src/components/modals/SwitchModal.tsx b/packages/app/src/components/SwitchModal.tsx → ...app/src/components/modals/SwitchModal.tsx
diff --git a/...ages/app/src/components/ThankYouModal.tsx → ...p/src/components/modals/ThankYouModal.tsx b/...ages/app/src/components/ThankYouModal.tsx → ...p/src/components/modals/ThankYouModal.tsx
@@ -1,37 +1,34 @@
 import { Modal, StyleSheet, Text, View, Image, TouchableOpacity } from 'react-native';
-import useCrossNavigate from '../routes/useCrossNavigate';
-import { InterRegular, InterSemiBold } from '../utils/webFonts';
-import { Colors } from '../utils/colors';
-import { useAccount } from 'wagmi';
-import { ThankYouImg } from '../assets';
+import { InterRegular, InterSemiBold } from '../../utils/webFonts';
+import { Colors } from '../../utils/colors';
+import { ThankYouImg } from '../../assets';
+import { IpfsCollective } from '../../models/models';
 
 interface ThankYouModalProps {
   openModal: boolean;
-  setOpenModal: any;
+  setOpenModal: (openModal: boolean) => void;
+  collective: IpfsCollective;
 }
 
-const ThankYouModal = ({ openModal }: ThankYouModalProps) => {
-  // const [modalVisible, setModalVisible] = useState(openModal);
-  const { navigate } = useCrossNavigate();
-  const { address } = useAccount();
+const ThankYouModal = ({ openModal, setOpenModal, collective }: ThankYouModalProps) => {
+  const onClick = () => setOpenModal(false);
+
   return (
-    <View style={styles.centeredView}>
-      <Modal animationType="slide" transparent={true} visible={openModal}>
-        <View style={styles.centeredView}>
-          <View style={styles.modalView}>
-            <Text style={styles.title}>THANK YOU!</Text>
-            <Text style={styles.paragraph}>You have just donated to Restoring the Kakamega Forest GoodCollective!</Text>
-            <Text style={styles.paragraph}>
-              To stop your donation, visit the Restoring the Kakamega Forest GoodCollective page.
-            </Text>
-            <Image source={ThankYouImg} alt="woman" style={styles.image} />
-            <TouchableOpacity style={styles.button} onPress={() => navigate('/walletProfile/' + address)}>
-              <Text style={styles.buttonText}>GO TO PROFILE</Text>
-            </TouchableOpacity>
-          </View>
+    <Modal style={styles.centeredView} animationType="slide" transparent={true} visible={openModal}>
+      <View style={styles.centeredView}>
+        <View style={styles.modalView}>
+          <Text style={styles.title}>THANK YOU!</Text>
+          <Text style={styles.paragraph}>{`You have just donated to ${collective.name} GoodCollective!`}</Text>
+          <Text style={styles.paragraph}>
+            {`To stop your donation, visit the ${collective.name} GoodCollective page.`}
+          </Text>
+          <Image source={ThankYouImg} alt="woman" style={styles.image} />
+          <TouchableOpacity style={styles.button} onPress={onClick}>
+            <Text style={styles.buttonText}>GO TO PROFILE</Text>
+          </TouchableOpacity>
         </View>
-      </Modal>
-    </View>
+      </View>
+    </Modal>
   );
 };