Recent transactions list (#114)

* Initial re-work UI for desktop based on latest changes * deps * deps * Add typeform to create a good collective button * Wagmi integration * conditional render of address or ens. Truncate address shown * Desktop * wagmi, routing, superfluid * wagmi, routing, superfluid * Fix currency * Update develop format * wagmi, routing, superfluid * Dynamic data template for payment pools * supporter and steward * Add missing param in event * viaIr, new events * Integrated Real Time Data * wagmi fix all data hooked up * wagmi fix all data hooked up * yarn lock * fix: yarn lock * fix: restore master yarn lock * feat: btn * fix: sdk build * fix: esm export * Working through SuperToken Initialization Error: There was an error initializing the SuperToken, last part needed it to get the contract fucntion to pass * Done * . * fix: hardhat lint * add: override reward * add: deployed upgraded pool with override * fix: contracts types build * fix: ethers typescript errors * fix: types * update * updated subgraph * Put back functions lost * fix: deploy preview on udpates to PR * wip: test preview yml * fix: lock file * Update donor * add: tsc lint-staged * fix: lock issue * fix: typescript jsx transform * Update donor * . * fix: unit tests * . * update * Fix: build * fix: unit tests * fix: build correctly * wip: fix PR test * Update readme to clarify that packages must be built locally * Attempt to port existing desktop wallet connection handling to mobile * fix: event quantity * refactor: package.json * Point to working subgraph * refactored header and changed wallet connect buttons layout to menu * added todo item * fixed wallet connector dropdown offset * animated wallet connector menu button arrow * Collective Home Card description is now limited to 3 lines and expands on click * reduced width of desktop home collective card containers so they more closely resemble the mobile card containers * fixed padding on ViewCollective page and did some touchups on stewards list * fixed CTA button size on DonationPage * fixed Breadcrumb on DonationPage * fixed icon alignment on ViewCollective page * added random profile pics for stewards * fixes for layout of ViewStewards page on mobile * small refactors while trying to figure out why "see all stewards" button isn't working on desktop * set gap between stewards and transactions to 32 on desktop ViewCollective page * refactored subgraph data fetching * fix: empty arrays, relations * wip: subgraph fixes * additional refactoring of models * small progress made in adding dynamic data * reworked subgraph; added entities for StewardCollective, Reward, DonorCollective, and Donation * updated pool creation in subgraph * adjusted Collective schema * made all fields non-nullable since they all have values when instantiated * removed 'contributions' summary value from Collective * added summary statistics to Collective * updated contribution calculations for donors in subgraph * added dev comments in schema for clarity * reworked subgraph queries and model transforms (build broken) * added dynamic data to ViewCollective and ViewStewards (build broken) * updated wallet profile page * removed unused pages and fixed build * added ipfs data parsing and removed unused reward/donation code * fixed ipfs collective id * Add: Design system (#54) * add: design system, svg support * add: svg default exports, apply svg icons to ViewCollective * - add withTheme hook for the AboutCard - add theme also to native provider * fix: apply styles for aboutcard better, add readme * fix: forgot to comment out web3modal * chore: bump good-design * Update README.md * front end now obtains ipfs data from subgraph instead of fetching directly from ipfs * minor refactoring * made event-claim relationship m:1 * fix: exluded deps from bundle * fix for desktop padding on view collective page * added tsconfig for assemblyscript in subgraph package * updated ViewDonorsPage and its components * added correct Collective metadata to donate page * added ipfs collective metadata update to handlePoolDetailsChanged * changed variable name 'nftAddress' to 'nftId' in subgraph pool.ts; changed derivedFrom relationships in collective * removed deriveFrom relationship from eventdata claim * reconfigured subgraph to recognize factory-template relationship between poolfactory and pool * fix: subgraph null, ipfs, mappings file * ensured required values in subgraph entities are populated * update yarn.lock * fixed assemblyscript config extension path * updated DonateComponent to determine if balance is sufficient; removed @Constants dir * added donation timestamp to DonorCollective (needed for superfluid real-time updates) * added donation timestamp to DonorCollective (needed for superfluid real-time updates) * removed missed usages of @Constants folder * fix: yarn lock * displaying realtime superfluid donations (untested) * fixed null values in handleRewardClaim NFT * updated yarn lock * updated yarn lock * using hex string for pool project id due to invalid utf-8 data * removed ipfs retries since they don't seem to help * fixed Claim totalRewards initialization * reworked ipfs usage in subgraph to use new data source feature * updated data flow to accomodate subgraph updates * add required fields to ipfs entity in subgraph * adjusted ipfs fetching in front end * renamed IpfsCollective.address to IpfsCollective.collective * removed IpfsCollective.collective * fixes to subgraph ipfs fetching in front end * removed several hard-coded SVG strings * several minor fixes * various minor fixes * reworked wallet profile UI * removed use of `window` * refactored useGetBalance * post-merge fixes * removed unused constants * removed redundant view from ViewStewardsPage.tsx * removed unused styles from ViewStewardsPage.tsx * removed unused styles from ViewDonorsPage.tsx * ui fixes ViewStewardsPage and ViewDonorsPage * removed unused import and console log * updated useContractCalls and much of DonateComponent * fixed double usage of insufficientLiquidity * simplified DonorListItem ranks * ProfileView refactor * added useApproveSwapTokenCallback and useSwapRoute * removed mock data * draft swap integration * added index to hooks/useContractCalls * prevented swap from G$ to G$ * fixed formatting and some swap bugs * removed unused function from lib * added flowing balances for total donation amounts for collectives and donors * added useTokenList hook * now using celo token list * removed unused import * made dropdown menu scrollable * added storage cache to apollo client * swap works! * adjustments to reflect uniswap default slippage tolerance * fixed jsbi via vite configuration * changed priceImpact to number * updated default apollo client fetch policy to 'cache-and-network' * removed unused `WalletConnectionProvider` context * by request, handleApproveToken is no longer memoized * fixed GD formatting in Donor List * changed acceptable price impact percent to 5% and moved it to constants.ts * add swap and fix donate (#72) * updated useContractCalls and much of DonateComponent * added useApproveSwapTokenCallback and useSwapRoute * draft swap integration * added index to hooks/useContractCalls * prevented swap from G$ to G$ * fixed formatting and some swap bugs * removed unused function from lib * now using celo token list * removed unused import * made dropdown menu scrollable * swap works! * adjustments to reflect uniswap default slippage tolerance * fixed jsbi via vite configuration * changed priceImpact to number * removed unused `WalletConnectionProvider` context * by request, handleApproveToken is no longer memoized * fixed GD formatting in Donor List * changed acceptable price impact percent to 5% and moved it to constants.ts * added steward verification check * added currentPool value fetching * added "people supported" counts * fixed for useIsStewardVerified and added FlowingDonationsRowItem to reduce re-renders * fixes for currentPool, donor list * fix for ens name support * Bug fixes (#111) * fix social links and show only if available * changed DonorListItem amount display from toFixed to toString * sort connectors with WalletConnect before MetaMask * added token symbol next to wallet balance and adjusted balance formatting * update copy for on-time donation, added chain check to useEthersSigner and useGetTokenBalance * one-time transfer now assumes token is already approved for transfer * G$ donation now assumes token is already approved for transfer * added infoButton property to ipfs meta data in subgraph * increased slippage tolerance from 0.5% to 1% * made it so only G$ shows in token list for one-time donations * made it so selecting one-time donation changes currency to G$ and amount to 0 * fixed total donation usd value * swap errors will only show if donation amount is not zero * added infoLabel to front end * updated breadcrumb to show collective name and only go back to previous page if back arrow is clicked * updated breadcrumb to fix links and text * incremented subgraph starting block because prior block was failing * donation is now disabled if swap required and token approval not yet ready; token approval should not fail on retry * breadcrumb formatting for '/' * adjusted G$ formatting in profile * modal and donation error formatting * added steward profile link to steward list item * added polling to donor in wallet; improved error message in donation functions * fix for error message in donation functions * switched from supportSingleTransferAndCall to supportSingleBatch since it includes token approval * removed warnings for missing subgraph items * set margin between collective cards on home page to 24 * fixed transaction list UI * added useRecentTransactions hook * fixed ViewCollective tablet portrait resolution * removed G$ fractional amount from connected wallet display, and added currency symbol to mobile version * made sure G$ displayed amount is rounded down to nearest int * fixed stop donation * changed default gas price to 5 in @gooddollar/goodcollective-sdk * renamed enum value from celo to CELO * currentPool is now a flowing balance * refactor: dry up donate button styles, no inline arrow functions * fix: getDonateStyles, does not stop loop after hitting first true * fix: simplify getDonateStyles * inline lambdas to const * memoized onChangeFrequency * fixed link to smart contract in ViewCollective * version bump * version bump * version bump * version bump * version bump * version bump * version bump * version bump * version bump * chore: release sdk, bump in app --------- Co-authored-by: LewisB <[email protected]> * added SupportEvent to subgraph * Added collective id to Claim in subgraph * added donor and collective to SupportEvent in subgraph * fix for subgraph * changed Claim id to tx hash in subgraph * changed Claim back to event uri in subgraph; added txHash to Claim instead * added network fee as an optional parameter in subgraph event entities * added timestamp to Claim in subgraph * changed timestamp types to Int in subgraph * updated transaction list and added hooks to fetch transactions * updated subgraph network fee properties * fixes for transaction fetching * updated tx hash formatting to match design spec * removed OK button from CompleteDonationModal and fixed image height in empty profile * adjusted poll intervals * added thank you modal and stop donation modal to desktop ViewCollective * fixed thank you modal behavior --------- Co-authored-by: Luis Castillo <[email protected]> Co-authored-by: Joshua-Jack <[email protected]> Co-authored-by: sirpy <[email protected]> Co-authored-by: LewisB <[email protected]> Co-authored-by: Ben Walker <[email protected]> Co-authored-by: sirpy <[email protected]> Co-authored-by: Lewis B <[email protected]>
GoodDollar · Jan 19, 2024 · c9c34af · c9c34af
1 parent 2536fa6
commit c9c34af
Show file tree

Hide file tree

Showing 37 changed files with 590 additions and 290 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/TransactionList/ClaimTransactionListItem.tsx b/packages/app/src/components/TransactionList/ClaimTransactionListItem.tsx
@@ -0,0 +1,36 @@
+import { ClaimTx } from '../../models/models';
+import { formatAddress } from '../../lib/formatAddress';
+import { useEnsName } from 'wagmi';
+import TransactionListItem from './TransactionListItem';
+
+interface ClaimTransactionListItemProps {
+  transaction: ClaimTx;
+}
+
+export function ClaimTransactionListItem({ transaction }: ClaimTransactionListItemProps) {
+  const { hash, networkFee, stewards, totalRewards } = transaction;
+
+  let multipleStewardsText: string | undefined;
+  let userAddress: `0x${string}` | undefined;
+
+  if (stewards.length === 1) {
+    userAddress = stewards[0] as `0x${string}`;
+  } else {
+    multipleStewardsText = `${stewards.length} Stewards`;
+  }
+
+  const { data: ensName } = useEnsName({ address: userAddress, chainId: 1 });
+  // TODO: how to get first name and last name of users?
+  const userIdentifier = multipleStewardsText ?? ensName ?? (userAddress ? formatAddress(userAddress) : 'Unknown');
+
+  return (
+    <TransactionListItem
+      userIdentifier={userIdentifier}
+      isDonation={false}
+      amount={totalRewards}
+      amountIsFormatted={false}
+      txHash={hash}
+      rawNetworkFee={networkFee}
+    />
+  );
+}
diff --git a/packages/app/src/components/TransactionList/SupportTransactionListItem.tsx b/packages/app/src/components/TransactionList/SupportTransactionListItem.tsx
@@ -0,0 +1,41 @@
+import { SupportTx } from '../../models/models';
+import { formatAddress } from '../../lib/formatAddress';
+import { useEnsName } from 'wagmi';
+import Decimal from 'decimal.js';
+import TransactionListItem from './TransactionListItem';
+import { useFlowingBalance } from '../../hooks/useFlowingBalance';
+
+interface SupportTransactionListItemProps {
+  transaction: SupportTx;
+}
+
+export function SupportTransactionListItem({ transaction }: SupportTransactionListItemProps) {
+  const { hash, networkFee, timestamp, donor } = transaction;
+
+  // TODO: how to get first name and last name of users?
+  const userFullName: string | undefined = undefined;
+  const userAddress = donor as `0x${string}`;
+  const { data: ensName } = useEnsName({ address: userAddress, chainId: 1 });
+  const userIdentifier = userFullName ?? ensName ?? formatAddress(userAddress);
+
+  const { formatted: formattedAmount } = useFlowingBalance(
+    transaction.contribution,
+    timestamp,
+    transaction.flowRate,
+    undefined
+  );
+  const amount = transaction.isFlowUpdate
+    ? formattedAmount
+    : new Decimal(transaction.contribution).minus(transaction.previousContribution).toString();
+
+  return (
+    <TransactionListItem
+      userIdentifier={userIdentifier}
+      isDonation={true}
+      amount={amount ?? '0'}
+      amountIsFormatted={transaction.isFlowUpdate}
+      txHash={hash}
+      rawNetworkFee={networkFee}
+    />
+  );
+}
diff --git a/packages/app/src/components/TransactionList/TransactionList.tsx b/packages/app/src/components/TransactionList/TransactionList.tsx
@@ -1,12 +1,14 @@
 import { Image, Text, View, StyleSheet, TouchableOpacity } from 'react-native';
 import { InterRegular, InterSemiBold } from '../../utils/webFonts';
-import TransactionListItem from './TransactionListItem';
 import { Colors } from '../../utils/colors';
 import { useMediaQuery } from 'native-base';
 import { chevronDown, TransactionIcon } from '../../assets';
-import { Transaction } from '../../models/models';
+import { ClaimTx, Transaction } from '../../models/models';
 import useCrossNavigate from '../../routes/useCrossNavigate';
 import { useRecentTransactions } from '../../hooks/useRecentTransactions';
+import { isSupportTx } from '../../models/typeUtil';
+import { ClaimTransactionListItem } from './ClaimTransactionListItem';
+import { SupportTransactionListItem } from './SupportTransactionListItem';
 
 interface TransactionListProps {
   collective: `0x${string}`;
@@ -18,7 +20,7 @@ function TransactionList({ collective }: TransactionListProps) {
   });
   const { navigate } = useCrossNavigate();
 
-  const transactions: Transaction[] = useRecentTransactions(collective, 6);
+  const transactions: Transaction[] = useRecentTransactions(collective, 6, 1000);
 
   const onClickShowMore = () => navigate('/profile/abc123/activity');
 
@@ -30,9 +32,15 @@ function TransactionList({ collective }: TransactionListProps) {
       </View>
       {isDesktopResolution && <View style={styles.horizontalDivider} />}
       <View style={styles.list}>
-        {transactions.slice(0, 5).map((transaction) => (
-          <TransactionListItem key={transaction.hash} collective={collective} transaction={transaction} />
-        ))}
+        {transactions
+          .slice(0, 5)
+          .map((transaction) =>
+            isSupportTx(transaction) ? (
+              <SupportTransactionListItem key={transaction.hash} transaction={transaction} />
+            ) : (
+              <ClaimTransactionListItem key={transaction.hash} transaction={transaction as ClaimTx} />
+            )
+          )}
       </View>
       {isDesktopResolution && transactions.length > 5 && (
         <TouchableOpacity onPress={onClickShowMore} style={styles.showMoreButton}>

diff --git a/packages/app/src/components/TransactionList/TransactionListItem.tsx b/packages/app/src/components/TransactionList/TransactionListItem.tsx
@@ -2,46 +2,38 @@ import { Image, Text, View, StyleSheet } from 'react-native';
 import { InterRegular, InterSemiBold } from '../../utils/webFonts';
 import { Colors } from '../../utils/colors';
 import { ReceiveIcon, SendIcon } from '../../assets';
-import { Transaction } from '../../models/models';
-import { formatAddress } from '../../lib/formatAddress';
-import { useEnsName } from 'wagmi';
 import Decimal from 'decimal.js';
 import { ethers } from 'ethers';
 
 interface TransactionListItemProps {
-  collective: `0x${string}`;
-  transaction: Transaction;
+  userIdentifier: string;
+  isDonation?: boolean;
+  amount: string;
+  amountIsFormatted?: boolean;
+  txHash: string;
+  rawNetworkFee: string;
 }
 
-function TransactionListItem({ collective, transaction }: TransactionListItemProps) {
-  const { hash, rawAmount, from, to, fee } = transaction;
-
-  const donation = to === collective;
-
-  const userAddress: `0x${string}` = (donation ? from : to) as `0x${string}`;
-  const { data: ensName } = useEnsName({ address: userAddress, chainId: 1 });
-  // TODO: how to get first name and last name of users?
-  const firstName = 'Wonderful';
-  const lastName = 'Person';
-  const userIdentifier = firstName
-    ? `${firstName} ${lastName}`
-    : ensName
-    ? ensName
-    : userAddress
-    ? formatAddress(userAddress)
-    : '0x';
-
-  const formattedAmount: string = new Decimal(ethers.utils.formatEther(rawAmount) ?? 0).toString();
-  const formattedFee: string = new Decimal(ethers.utils.formatEther(fee) ?? 0).toString();
+function TransactionListItem({
+  userIdentifier,
+  isDonation,
+  amount,
+  amountIsFormatted,
+  txHash,
+  rawNetworkFee,
+}: TransactionListItemProps) {
+  const formattedAmount: string = amountIsFormatted ? amount : new Decimal(ethers.utils.formatEther(amount)).toString();
+  const formattedFee: string = new Decimal(ethers.utils.formatEther(rawNetworkFee ?? 0)).toString();
+  const formattedHash = txHash.slice(0, 40) + '...';
 
   return (
     <View style={styles.row}>
-      {donation ? (
+      {isDonation ? (
         <View style={[styles.bar, { backgroundColor: Colors.green[100] }]} />
       ) : (
         <View style={[styles.bar, { backgroundColor: Colors.orange[100] }]} />
       )}
-      {donation ? (
+      {isDonation ? (
         <Image source={{ uri: ReceiveIcon }} style={styles.rowIcon} />
       ) : (
         <Image source={{ uri: SendIcon }} style={styles.rowIcon} />
@@ -55,7 +47,7 @@ function TransactionListItem({ collective, transaction }: TransactionListItemPro
           </View>
         </View>
         <View>
-          <Text style={styles.hash}>{hash}</Text>
+          <Text style={styles.hash}>{formattedHash}</Text>
         </View>
         <View>
           <View style={styles.txDetails}>

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(
@@ -229,6 +227,11 @@ function ViewCollective({ collective }: ViewCollectiveProps) {
             <TransactionList collective={collective.address as `0x${string}`} />
           </View>
         </View>
+        <ErrorModal
+          openModal={!!errorMessage}
+          setOpenModal={() => setErrorMessage(undefined)}
+          message={errorMessage ?? ''}
+        />
         <StopDonationModal openModal={stopDonationModalVisible} setOpenModal={setStopDonationModalVisible} />
       </View>
     );
@@ -361,7 +364,6 @@ function ViewCollective({ collective }: ViewCollectiveProps) {
           message={errorMessage ?? ''}
         />
         <StopDonationModal openModal={stopDonationModalVisible} setOpenModal={setStopDonationModalVisible} />
-        <ThankYouModal openModal={donationModalVisible} setOpenModal={setDonationModalVisible} />
       </View>
     </View>
   );

diff --git a/packages/app/src/components/WalletDetails/EmptyProfile.tsx b/packages/app/src/components/WalletDetails/EmptyProfile.tsx
@@ -38,7 +38,7 @@ const styles = StyleSheet.create({
     ...InterSmall,
   },
   image: {
-    height: 169,
+    height: 154,
     width: 230,
     alignSelf: 'center',
   },

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>
   );
 };