Add rising tied cap value

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

@@ -2,9 +2,11 @@ import { useEffect, useMemo, useState } from 'react';
 import {
   useFetchCredentials,
   useFetchProjectsSaleDetails,
+  useFetchRisingTideCap,
   usePaymentTokenBalance,
   useProjectPublicInfo,
   usePublicInfo,
+  useTotalInvestedUsdcCtznd,
 } from './queries';
 import { useKyc } from '../_providers/kyc/context';
 import { compareAddresses, isValidGrant } from './utils';
@@ -14,6 +16,8 @@ import {
   useReadCtzndSalePaymentToken,
   useReadCtzndSalePaymentTokenToToken,
   useReadCtzndErc20Allowance,
+  useReadCtzndSaleMaxTarget,
+  useReadCtzndSaleMinTarget,
 } from '@/wagmi.generated';
 import { formatEther, parseEther } from 'viem';
 import { sepolia } from 'viem/chains';
@@ -246,3 +250,44 @@ export const useEffectSafe = (callback: () => void, deps: any[]) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, deps);
 };
+
+export const useCtzndSaleCapStatus = () => {
+  const totalInvested = useTotalInvestedUsdcCtznd();
+  const { data: maxTarget } = useReadCtzndSaleMaxTarget();
+  const { data: minTarget } = useReadCtzndSaleMinTarget();
+
+  const investedValue = Number(totalInvested);
+  const maxValue = maxTarget ? Number(formatEther(maxTarget)) : undefined;
+  const minValue = minTarget ? Number(formatEther(minTarget)) : undefined;
+
+  if (maxValue === undefined || minValue === undefined) {
+    return 'loading';
+  }
+
+  if (investedValue > maxValue) {
+    return 'above';
+  }
+
+  if (investedValue < minValue) {
+    return 'below';
+  }
+
+  return 'within';
+};
+
+export const useCtzndRisingTideCap = () => {
+  const status = useCtzndSaleCapStatus();
+  const aboveCap = status === 'above';
+  const { data, isLoading, error } = useFetchRisingTideCap(aboveCap);
+  const cap = aboveCap && data ? formatEther(data) : 'N/A';
+
+  const result = useMemo(() => {
+    return {
+      data: cap,
+      isLoading,
+      error,
+    };
+  }, [cap, isLoading, error]);
+
+  return result;
+};

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

@@ -21,6 +21,7 @@ import {
   useReadCtzndSaleUncappedAllocation,
 } from '@/wagmi.generated';
 import { formatEther } from 'viem';
+import { computeRisingTideCap } from '../_server/risingTide/risingtide';
 
 export const usePublicInfo = () => {
   return useQuery({
@@ -303,3 +304,16 @@ export const useCtzndMinContributionUsdc = () => {
 
   return usdcValue;
 };
+
+export const useFetchRisingTideCap = (enabled?: boolean) => {
+  return useQuery({
+    queryKey: ['rising-tide-cap'],
+    queryFn: async () => {
+      const cap = await computeRisingTideCap();
+
+      return cap;
+    },
+    refetchInterval: 1000 * 1, // 1 minute
+    enabled,
+  });
+};

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

@@ -45,7 +45,7 @@ export const IdOsProvider = ({ children }: PropsWithChildren) => {
 
       // Authenticate by signing a message
       if (profile) {
-        // @ts-expect-error
+        // @ts-ignore
         await sdk.setSigner('EVM', ethSigner);
         setHasSigner(true);
         return;

packages/web-app/app/_server/risingTide/risingtide.ts

@@ -12,7 +12,7 @@ const client = createPublicClient({
   transport: http(),
 }).extend(publicActions);
 
-export const computeRisingTideCap = async () => {
+export const computeRisingTideCap = async (): Promise<bigint> => {
   const purchases = await client.getContractEvents({
     address: saleContractAddress,
     abi: ctzndSaleAbi,

packages/web-app/app/_ui/project/apply-button.tsx

@@ -39,7 +39,7 @@ export const ApplyButton = ({ isLoading, error }: TApplyButtonProps) => {
 
   return (
     <Button onClick={() => open(ApplyDialog.displayName, { projectId })}>
-      Apply to participate
+      Register to participate
     </Button>
   );
 };

packages/web-app/app/_ui/project/project-content.tsx

@@ -86,15 +86,16 @@ export const ProjectContent = () => {
                   applied={!!hasGrant}
                 />
               ) : null}
-              <TokenMetrics />
-              {hasGrant && process.env.NEXT_PUBLIC_APPLY_OPEN === 'true' ? (
-                <AppliedSuccess />
-              ) : null}
-              {process.env.NEXT_PUBLIC_APPLY_OPEN === 'true' && !hasGrant ? (
-                <ApplyButton
-                  isLoading={isLoadingGrant}
-                  error={errorLoadingGrant}
-                />
+              <TokenMetrics hasGrant={hasGrant} />
+              {process.env.NEXT_PUBLIC_APPLY_OPEN === 'true' ? (
+                hasGrant ? (
+                  <AppliedSuccess />
+                ) : (
+                  <ApplyButton
+                    isLoading={isLoadingGrant}
+                    error={errorLoadingGrant}
+                  />
+                )
               ) : null}
             </Tab.Panel>
           </Tab.Panels>
@@ -118,12 +119,23 @@ export const ProjectContent = () => {
               applied={!!hasGrant}
             />
           ) : null}
-          <TokenMetrics />
-          {hasGrant && process.env.NEXT_PUBLIC_APPLY_OPEN === 'true' ? (
-            <AppliedSuccess />
+          <TokenMetrics hasGrant={hasGrant} />
+          {process.env.NEXT_PUBLIC_APPLY_OPEN === 'true' ? (
+            hasGrant ? (
+              <AppliedSuccess />
+            ) : (
+              <ApplyButton
+                isLoading={isLoadingGrant}
+                error={errorLoadingGrant}
+              />
+            )
           ) : null}
-          {process.env.NEXT_PUBLIC_APPLY_OPEN === 'true' && !hasGrant ? (
-            <ApplyButton isLoading={isLoading} error={errorLoadingGrant} />
+          {process.env.NEXT_PUBLIC_CONTRIBUTE_OPEN === 'true' && !hasGrant ? (
+            <div>
+              This token sale is exclusively open to individuals who have
+              previously applied for participation. Stay tuned for future
+              opportunities.
+            </div>
           ) : null}
         </div>
       </div>

packages/web-app/app/_ui/project/token-metrics.tsx

@@ -7,6 +7,8 @@ import { formatEther } from 'viem';
 import clsx from 'clsx';
 import { number } from '../utils/intl-formaters/number';
 import { useTotalInvestedUsdcCtznd } from '@/app/_lib/queries';
+import { useCtzndRisingTideCap, useCtzndSaleCapStatus } from '@/app/_lib/hooks';
+import Link from 'next/link';
 
 const ProgressBar = ({
   title,
@@ -17,8 +19,8 @@ const ProgressBar = ({
   max: number;
   value: number;
 }) => {
-  const valueInMillions = value / 1000_000;
-  const maxInMillions = max / 1000_000;
+  const valueInMillions = value / 1_000_000;
+  const maxInMillions = max / 1_000_000;
   const halfInMillions = maxInMillions / 2;
   const currentRelativeValue = valueInMillions / maxInMillions;
   const percentage = currentRelativeValue * 100;
@@ -85,7 +87,47 @@ const LoadingField = () => (
   <div className="h-5 w-full animate-pulse rounded-md bg-gradient-to-br from-mono-50 to-mono-200" />
 );
 
-export const TokenMetrics = () => {
+const Info = () => {
+  const status = useCtzndSaleCapStatus();
+
+  if (status === 'below') {
+    return (
+      <div className="flex items-center border-t border-mono-200 p-8 text-mono-800">
+        *If the total contributions fall below $500K, the token will not be
+        launched, and refunds will be issued.
+      </div>
+    );
+  }
+
+  if (status === 'within') {
+    return (
+      <div className="flex items-center border-t border-mono-200 p-8 text-mono-800">
+        *At this contribution level you will receive your full desired
+        contribution.
+      </div>
+    );
+  }
+
+  if (status === 'above') {
+    return (
+      <div className="flex flex-col border-t border-mono-200 p-8 text-mono-800">
+        *The contributions exceed $1M, activating our Rising Tide Mechanism.
+        Your final token allocation will be determined by the number of
+        participants and their total contribution amount.
+        <Link
+          className="text-blue-500"
+          href={
+            'https://docs.citizend.xyz/citizend/how-citizend-works/discovery-batches-and-securing-a-contribution-slot/rising-tide-mechanism'
+          }
+        >
+          Learn more about the Rising Tide Mechanism.
+        </Link>
+      </div>
+    );
+  }
+};
+
+export const TokenMetrics = ({ hasGrant }: { hasGrant: boolean }) => {
   const { data: maxTarget } = useReadCtzndSaleMaxTarget();
   const totalCommitted = useTotalInvestedUsdcCtznd();
   const maxValue = maxTarget ? Number(formatEther(maxTarget)) : 0;
@@ -94,11 +136,21 @@ export const TokenMetrics = () => {
       refetchInterval: 1000 * 10, // 10 seconds
     },
   });
+  const { data: cap, isLoading: isLoadingCap } = useCtzndRisingTideCap();
 
   return (
     <div className="flex w-full flex-col rounded-lg bg-mono-50 text-mono-950">
-      <h4 className="border-b border-mono-200 px-8 py-6 font-medium uppercase">
+      <h4 className="flex justify-between border-b border-mono-200 px-8 py-6 font-medium uppercase">
         Community Sale Status
+        {process.env.NEXT_PUBLIC_CONTRIBUTE_OPEN === 'true' ? (
+          <div className="flex items-center gap-3 text-mono-800">
+            Live
+            <span className="relative flex h-4 w-4">
+              <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-500 opacity-75"></span>
+              <span className="relative inline-flex h-4 w-4 rounded-full bg-green-500"></span>
+            </span>
+          </div>
+        ) : null}
       </h4>
       {process.env.NEXT_PUBLIC_CONTRIBUTE_OPEN === 'true' ? (
         <div className="m-8">
@@ -141,9 +193,12 @@ export const TokenMetrics = () => {
           <span className="text-mono-800">
             Current max. allocation/participant:
           </span>
-          <span className="md:text-end">{'N/A'}</span>
+          <span className="md:text-end">
+            {isLoadingCap ? <LoadingField /> : cap}
+          </span>
         </div>
       </div>
+      {hasGrant ? <Info /> : null}
     </div>
   );
 };