Add step by step contribute flow

packages/web-app/app/_lib/actions.tsx

@@ -10,13 +10,10 @@ import { subscribeToNewsletter } from '../_server/active-campaign';
 import {
   ctzndSaleAddress,
   useReadCtzndSalePaymentToken,
-  useReadCtzndSalePaymentTokenToToken,
-  useReadErc20Allowance,
   useWriteCtzndSaleBuy,
   useWriteErc20Approve,
 } from '@/wagmi.generated';
 import { sepolia } from 'viem/chains';
-import { formatEther, parseEther } from 'viem';
 
 export const useAcquireAccessGrantMutation = () => {
   const { sdk } = useIdOS();
@@ -203,76 +200,66 @@ export const useSignDelegatedAccessGrant = (
   };
 };
 
-export const useContributeToCtznd = (address: `0x${string}`) => {
-  const [amount, setAmount] = useState(0);
-  const amountInWei = useMemo(() => parseEther(amount.toString()), [amount]);
-  const { data: merkleProof } = useFetchMerkleProof();
-
+export const useBuyCtzndTokens = () => {
   const {
-    writeContract: writeBuy,
+    writeContract,
     data: contributionTxHash,
-    isPending: isWritePending,
-    error: buyError,
+    isPending,
+    error,
   } = useWriteCtzndSaleBuy();
+  const { data: merkleProof } = useFetchMerkleProof();
+
+  const buyCtzndTokens = useCallback(
+    (tokensToBuyInWei: bigint) => {
+      if (tokensToBuyInWei === undefined || merkleProof === undefined) {
+        return;
+      }
+
+      writeContract({ args: [tokensToBuyInWei, merkleProof] });
+    },
+    [merkleProof, writeContract],
+  );
+
+  return {
+    contributionTxHash,
+    buyCtzndTokens,
+    isPending,
+    error,
+  };
+};
+
+export const useSetPaymentTokenAllowance = () => {
+  const saleAddress = ctzndSaleAddress[sepolia.id];
+  const { data: paymentToken } = useReadCtzndSalePaymentToken();
   const {
-    writeContract: approveContract,
+    writeContract,
     data: allowanceTxHash,
-    error: allowanceError,
-    isPending: isApprovePending,
+    error,
+    isPending,
   } = useWriteErc20Approve();
-  const { data: paymentToken } = useReadCtzndSalePaymentToken();
-  const saleAddress = ctzndSaleAddress[sepolia.id];
-  const { data: allowance } = useReadErc20Allowance({
-    address: paymentToken,
-    args: [address, saleAddress],
-    query: {
-      refetchInterval: 1000,
-    },
-  });
-  const { data: tokensToBuy, error: tokenError } =
-    useReadCtzndSalePaymentTokenToToken({
-      args: [amountInWei],
-    });
 
-  const diffToAllowance = useMemo(
-    () => (allowance || BigInt(0)) - amountInWei,
-    [allowance, amountInWei],
-  );
-
-  const submit = () => {
-    if (
-      amount <= 0 ||
-      allowance === undefined ||
-      paymentToken === undefined ||
-      tokensToBuy === undefined ||
-      merkleProof === undefined
-    ) {
-      return;
-    }
+  const setAllowance = useCallback(
+    (amountInWei: bigint) => {
+      if (
+        paymentToken === undefined ||
+        saleAddress === undefined ||
+        amountInWei <= 0
+      ) {
+        return;
+      }
 
-    if (diffToAllowance < 0) {
-      return approveContract({
+      writeContract({
         address: paymentToken,
         args: [saleAddress, amountInWei],
       });
-    }
-
-    writeBuy({ args: [tokensToBuy, merkleProof] });
-  };
+    },
+    [paymentToken, saleAddress, writeContract],
+  );
 
   return {
-    contributionTxHash,
+    setAllowance,
     allowanceTxHash,
-    diffToAllowance,
-    amount,
-    amountInWei,
-    setAmount,
-    tokensToBuy,
-    isPending: isApprovePending || isWritePending,
-    error: buyError || allowanceError || tokenError,
-    buyError,
-    allowanceError,
-    tokenError,
-    submit,
+    isPending,
+    error,
   };
 };

packages/web-app/app/_lib/hooks.tsx

@@ -1,13 +1,23 @@
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import {
   useFetchCredentials,
   useFetchProjectsSaleDetails,
+  usePaymentTokenBalance,
   useProjectPublicInfo,
   usePublicInfo,
 } from './queries';
 import { useKyc } from '../_providers/kyc/context';
 import { compareAddresses, isValidGrant } from './utils';
 import { TProjectInfoArgs } from '../_server/info';
+import {
+  ctzndSaleAddress,
+  useReadCtzndSalePaymentToken,
+  useReadCtzndSalePaymentTokenToToken,
+  useReadErc20Allowance,
+  useWriteErc20Approve,
+} from '@/wagmi.generated';
+import { formatEther, parseEther } from 'viem';
+import { sepolia } from 'viem/chains';
 
 export const useKycCredential = () => {
   const {
@@ -177,3 +187,46 @@ export const useHasProjectGrant = (projectId: string) => {
     };
   }, [hasGrant, isLoading, error, isSuccess]);
 };
+
+export const useCtzndPaymentTokenAllowance = (userAddress: `0x${string}`) => {
+  const saleAddress = ctzndSaleAddress[sepolia.id];
+  const { data: paymentToken } = useReadCtzndSalePaymentToken();
+  const {
+    data: allowance,
+    isLoading,
+    error,
+  } = useReadErc20Allowance({
+    address: paymentToken,
+    args: [userAddress, saleAddress],
+    query: {
+      staleTime: 0,
+      refetchInterval: 5000,
+    },
+  });
+
+  return {
+    allowance,
+    isLoading,
+    error,
+  };
+};
+
+export const useContributeToCtznd = () => {
+  const [amount, setAmount] = useState(0);
+  const amountInWei = useMemo(() => parseEther(amount.toString()), [amount]);
+  const { formattedValue: maxAmount } = usePaymentTokenBalance();
+  const { data: tokensToBuyInWei, error: tokenError } =
+    useReadCtzndSalePaymentTokenToToken({
+      args: [amountInWei],
+    });
+
+  return {
+    amount,
+    setAmount,
+    amountInWei,
+    maxAmount: Number(maxAmount || 0),
+    tokensToBuyInWei: tokensToBuyInWei || 0n,
+    tokensToBuy: tokensToBuyInWei ? Number(formatEther(tokensToBuyInWei)) : 0,
+    error: tokenError,
+  };
+};

packages/web-app/app/_lib/queries.tsx

@@ -13,7 +13,11 @@ import {
 } from '../_server/info';
 import { fetchAndGenerateProof } from '../_server/projects/generate-merkle-root';
 import { useAccount, useBalance } from 'wagmi';
-import { useReadCtzndSalePaymentToken } from '@/wagmi.generated';
+import {
+  useReadCtzndSalePaymentToken,
+  useReadCtzndSaleRate,
+  useReadCtzndSaleUncappedAllocation,
+} from '@/wagmi.generated';
 import { formatEther } from 'viem';
 
 export const usePublicInfo = () => {
@@ -251,3 +255,16 @@ export const usePaymentTokenBalance = () => {
     error: errorToken || errorBalance,
   };
 };
+
+export const useUserTotalInvestedUsdcCtznd = (address: `0x${string}`) => {
+  const { data: tokens } = useReadCtzndSaleUncappedAllocation({
+    args: [address],
+  });
+  const { data: rate } = useReadCtzndSaleRate();
+  const usdcValue =
+    tokens && rate
+      ? parseFloat(formatEther(tokens)) * parseFloat(formatEther(rate))
+      : 0;
+
+  return usdcValue;
+};

packages/web-app/app/_providers/dialog/context.tsx

@@ -2,7 +2,7 @@
 import { createContext, useContext } from 'react';
 
 export type TProps = {
-  [key: string]: string;
+  [key: string]: string | number | bigint;
 };
 
 type TDialogContextValue = {

packages/web-app/app/_providers/dialog/index.tsx

@@ -2,13 +2,18 @@ import { useMemo, useState, PropsWithChildren } from 'react';
 import { DialogContext, TProps } from './context';
 import { DialogWrapper } from '@/app/_ui/components/dialogs/dialog-wrapper';
 import { ApplyDialog, SettingsDialog } from '@/app/_ui/components/dialogs';
+import { ContributeDialog } from '@/app/_ui/components/dialogs/contribute-dialog';
 
 type TDialogComponent = {
   displayName: string;
-  (props: TProps): JSX.Element;
+  (props: any): JSX.Element;
 };
 
-const dialogComponents: TDialogComponent[] = [SettingsDialog, ApplyDialog];
+const dialogComponents: TDialogComponent[] = [
+  SettingsDialog,
+  ApplyDialog,
+  ContributeDialog,
+];
 
 const emptyProps = {};
 

packages/web-app/app/_providers/wagmi-config.ts

@@ -18,5 +18,4 @@ export const wagmiConfig = getDefaultConfig({
       : []),
   ],
   ssr: true,
-  pollingInterval: 500,
 });

packages/web-app/app/_ui/components/dialogs/apply-dialog/acquire-access-grant-button.tsx

@@ -20,6 +20,10 @@ const Done = ({ hash }: { hash: `0x${string}` }) => {
     chainId: process.env.NEXT_PUBLIC_ENABLE_TESTNETS
       ? arbitrumSepolia.id
       : arbitrum.id,
+    query: {
+      staleTime: 0,
+      refetchIntervalInBackground: true,
+    },
   });
   const { refetchGrants, refetchKyc } = useKyc();
 
@@ -29,7 +33,7 @@ const Done = ({ hash }: { hash: `0x${string}` }) => {
       await refetchKyc();
 
       await refetch();
-    }, 10000);
+    }, 1000);
 
     return () => clearInterval(interval);
   }, [refetchGrants, refetch, refetchKyc]);

packages/web-app/app/_ui/components/dialogs/apply-dialog/index.tsx

@@ -175,7 +175,8 @@ export const ApplyDialog = ({ projectId }: TProps) => {
   const { address, hasProfile } = useIdOS();
 
   // shouldn't be possible, just warding typescript
-  if (!projectId) return <p>No project selected</p>;
+  if (!projectId || typeof projectId !== 'string')
+    return <p>No project selected</p>;
 
   // shouldn't be possible, just warding typescript
   if (!address)