Update refund to match design (#262)

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

@@ -3,7 +3,14 @@ import { Spinner } from '../../svg/spinner';
 import { Error } from '../../svg/error';
 import { Done } from '../done';
 import { Check } from '../../svg/check';
-import { WriteContractErrorType } from 'viem';
+import { WriteContractErrorType, formatEther } from 'viem';
+import {
+  useReadCtzndSaleRefundAmount,
+  useWriteCtzndSaleRefund,
+} from '@/wagmi.generated';
+import { use } from 'react';
+import { useAccount } from 'wagmi';
+import { useEffectSafe } from '@/app/_lib/hooks';
 
 type TTitleProps = {
   txHash?: `0x${string}`;
@@ -40,32 +47,43 @@ const Title = ({ txHash, error }: TTitleProps) => {
   );
 };
 
-type TRefundDialogProps = {
-  refundValue: string;
-  txHash?: `0x${string}`;
-  error: string | null;
-};
+export const RefundDialog = () => {
+  const { address } = useAccount();
+  const { data: refundValue } = useReadCtzndSaleRefundAmount({
+    args: [address!],
+  });
+  const formattedValue =
+    refundValue !== undefined ? formatEther(refundValue) : '0';
+
+  const { writeContract, data: txHash, error } = useWriteCtzndSaleRefund();
+
+  useEffectSafe(() => {
+    if (!address) return;
+    writeContract({ args: [address] });
+  }, [address]);
+
+  if (error) {
+    console.log('error', error);
+  }
 
-export const RefundDialog = ({
-  refundValue,
-  txHash,
-  error,
-}: TRefundDialogProps) => {
   return (
     <>
       <Dialog.Title
         as="h2"
         className="relative flex w-full flex-col items-center justify-center gap-4 p-8 text-mono-950"
       >
-        <Title txHash={txHash} error={error} />
+        <Title
+          txHash={txHash}
+          error={(error as unknown as any)?.shortMessage || null}
+        />
       </Dialog.Title>
       <div className="flex flex-col">
         <div className="my-6 flex flex-col gap-6 border-b border-t border-mono-200 py-6 text-sm">
           <div className="flex justify-between">
             <div className="uppercase text-mono-800">
               Refund After cap calculations
             </div>
-            <div className="text-mono-950">{refundValue} USDC</div>
+            <div className="text-mono-950">{formattedValue} USDC</div>
           </div>
         </div>
         <p className="pt-8 text-sm">

packages/web-app/app/_ui/my-projects/header.tsx

@@ -0,0 +1,76 @@
+import { useCtzndSaleCapStatus, useCtzndSaleStatus } from '@/app/_lib/hooks';
+import { useTotalInvestedUsdcCtznd } from '@/app/_lib/queries';
+import { useReadCtzndSaleInvestorCount } from '@/wagmi.generated';
+import { useCountdown } from '../hooks/useCountdown';
+import Image from 'next/image';
+import { usdValue } from '../utils/intl-formaters/usd-value';
+import { number } from '../utils/intl-formaters/number';
+import { TProjectSaleDetails } from '@/app/_types';
+import { getRelativePath } from '../utils/getRelativePath';
+
+export const Header = ({ project, logo, end }: TProjectSaleDetails) => {
+  const { data: numberOfParticipants } = useReadCtzndSaleInvestorCount({
+    query: {
+      staleTime: 0,
+    },
+  });
+  const totalCommittedUsdc = useTotalInvestedUsdcCtznd();
+  const status = useCtzndSaleStatus();
+  const formattedNumberOfParticipants = number(numberOfParticipants || 0);
+  const saleCapStatus = useCtzndSaleCapStatus();
+  const projectTitle =
+    project === 'citizend' ? 'Citizend Community Sale' : project;
+  const { days, hours, minutes, seconds } = useCountdown(end);
+
+  return (
+    <div className="flex flex-col rounded-md bg-mono-50 px-6 py-8 text-mono-950">
+      <h2 className="flex items-center gap-4 text-2xl">
+        <Image
+          src={getRelativePath(logo)}
+          alt={`${project} logo`}
+          width={40}
+          height={40}
+        />
+        <div className="relative flex w-full flex-col md:flex-row md:items-center">
+          {projectTitle}
+          {status === 'completed' ? (
+            <div className="absolute right-0 top-0 -translate-y-1/2 translate-x-full rounded-full bg-blue-500 px-2 pb-0.5 pt-1 text-xs uppercase leading-3 text-mono-50">
+              Closed
+            </div>
+          ) : null}
+          {status === 'live' ? (
+            <>
+              <div className="flex">
+                <div className="pr-4 text-base uppercase text-mono-800 md:pl-6">
+                  Live
+                </div>
+                <div className="ml-1 h-4 w-4 animate-pulse rounded-full bg-green-500" />
+              </div>
+              <div className="ml-auto w-56 text-base font-normal">
+                Sale ends in {days}d {hours}h {minutes}m {seconds}s
+              </div>
+            </>
+          ) : null}
+        </div>
+      </h2>
+      <div className="grid grid-cols-1 gap-6 pt-6 md:grid-cols-3 md:px-14 md:pt-8">
+        <div className="flex flex-col gap-2 md:border-r md:border-mono-200">
+          <h3 className="text-sm text-mono-800">Number of participants</h3>
+          <div>{formattedNumberOfParticipants}</div>
+        </div>
+        <div className="flex flex-col gap-2 md:border-r md:border-mono-200">
+          <h3 className="text-sm text-mono-800">Total amount committed</h3>
+          <div>{usdValue(totalCommittedUsdc)}</div>
+        </div>
+        <div className="flex flex-col gap-2">
+          <h3 className="text-sm text-mono-800">Rising Tide Mechanism</h3>
+          <div>
+            {saleCapStatus === 'above'
+              ? 'ON (max. target reached)'
+              : 'OFF (total contributed below max.)'}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

packages/web-app/app/_ui/my-projects/loading-field.tsx

@@ -0,0 +1,3 @@
+export const LoadingField = () => (
+  <div className="h-5 w-full animate-pulse rounded-md bg-gradient-to-br from-mono-50 to-mono-200" />
+);

packages/web-app/app/_ui/my-projects/my-contribution.tsx

@@ -0,0 +1,25 @@
+import { useAccount } from 'wagmi';
+import { number } from '../utils/intl-formaters/number';
+import { EdgeLink } from '../components/edge';
+import { useProject } from '@/app/_providers/project/context';
+import { useUserTotalInvestedUsdcCtznd } from '@/app/_lib/queries';
+import { useCtzndSaleStatus } from '@/app/_lib/hooks';
+
+export const MyContribution = () => {
+  const { address } = useAccount();
+  const { projectId } = useProject();
+  const usdcValue = useUserTotalInvestedUsdcCtznd(address!);
+  const status = useCtzndSaleStatus();
+
+  return (
+    <div className="flex flex-col gap-2 rounded-md bg-mono-50 px-6 py-8 text-mono-950">
+      <h3 className="text-sm text-mono-800">My Contribution</h3>
+      <div className="text-3.5xl">{`${number(Number(usdcValue))} USDC`}</div>
+      {status === 'live' ? (
+        <div className="self-center pt-6">
+          <EdgeLink href={`/projects/${projectId}`}>New Contribution</EdgeLink>
+        </div>
+      ) : null}
+    </div>
+  );
+};