sync main branch with dev

.nvmrc

@@ -1 +1 @@
-20.10.0 
+20.10.0

package.json

@@ -14,6 +14,7 @@
   "dependencies": {
     "@farcaster/frame-sdk": "^0.0.16",
     "@farcaster/frame-wagmi-connector": "^0.0.14",
+    "@hookform/resolvers": "^3.10.0",
     "@opennextjs/cloudflare": "^0.2.1",
     "@radix-ui/react-avatar": "^1.1.1",
     "@radix-ui/react-checkbox": "^1.1.3",
@@ -22,7 +23,7 @@
     "@radix-ui/react-popover": "^1.1.4",
     "@radix-ui/react-radio-group": "^1.2.2",
     "@radix-ui/react-select": "^2.1.4",
-    "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-slot": "^1.1.1",
     "@radix-ui/react-tooltip": "^1.1.6",
     "@tanstack/react-query": "^5.62.7",
     "class-variance-authority": "^0.7.1",
@@ -41,10 +42,12 @@
     "tailwindcss-animate": "^1.0.7",
     "vaul": "^1.1.1",
     "viem": "^2.22.7",
-    "wagmi": "^2.14.7"
+    "wagmi": "^2.14.7",
+    "zod": "^3.24.1"
   },
   "devDependencies": {
     "@cloudflare/next-on-pages": "^1.13.7",
+    "@shadcn/ui": "^0.0.4",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
@@ -59,6 +62,7 @@
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "postcss": "^8",
     "prettier": "3.4.2",
+    "shadcn-ui": "^0.9.4",
     "tailwindcss": "^3.4.1",
     "typescript": "^5"
   }

src/app/dao/[chainid]/[daoid]/[proposaltype]/proposal.tsx

@@ -16,18 +16,14 @@ import { Button } from "@/components/ui/button";
 import { prepareTX } from "@/lib/tx-prepper/tx-prepper";
 import { getExplorerUrl, getWagmiChainObj } from "@/lib/constants";
 import { useParams } from "next/navigation";
-import {
-  FORM_CONFIGS,
-  FormConfig,
-  FormValues,
-  validFormId,
-} from "@/lib/form-configs";
-import { ValidNetwork } from "@/lib/tx-prepper/prepper-types";
+import { FORM_CONFIGS, FormConfig, validFormId } from "@/lib/form-configs";
+import { ArbitraryState, ValidNetwork } from "@/lib/tx-prepper/prepper-types";
 import { useFrameSDK } from "@/providers/FramesSDKProvider";
 import { useDaoRecord } from "@/providers/DaoRecordProvider";
 import { WaitForReceipt } from "@/lib/types";
 import { proposalCastUrl } from "@/lib/formatters";
 import { FormSwitcher } from "@/components/app/FormSwitcher";
+import { Card } from "@/components/ui/card";
 // import { FormSwitcher } from "@/forms/FormSwitcher";
 
 const getPropidFromReceipt = (receipt: WaitForReceipt): number | null => {
@@ -48,8 +44,6 @@ export default function Proposal() {
 
   const [propid, setPropid] = useState<number | null>(null);
   const [formConfig, setFormConfig] = useState<FormConfig | null>(null);
-  const [formValues, setFormValues] = useState<FormValues>({});
-  const [validValues, setValidValues] = useState<boolean>(false);
 
   const {
     writeContract,
@@ -87,16 +81,14 @@ export default function Proposal() {
     sdk.actions.openUrl(`${getExplorerUrl(daochain)}/tx/${hash}`);
   }, [hash, daochain]);
 
-  const handleSend = async () => {
-    console.log("formValues", formValues);
-
+  const handleSend = async (values: ArbitraryState) => {
     if (!formConfig) return;
 
     const wholeState = {
       formValues: {
-        ...formValues,
-        recipient: address,
+        ...values,
       },
+      senderAddress: address,
       chainId: daochain,
       safeId: daosafe,
       daoId: daoid,
@@ -130,55 +122,55 @@ export default function Proposal() {
   if (!formConfig) return null;
 
   const validChain = chainId === daochainid;
-  const disableSubmit =
-    !isConnected ||
-    isSendTxPending ||
-    !validChain ||
-    isConfirming ||
-    !!hash ||
-    !validValues;
-  const txLoading = isSendTxPending || isConfirming;
 
   return (
     <>
-      <FormSwitcher
-        formid={formConfig.id}
-        isConfirmed={isConfirmed}
-        formValues={formValues}
-        validValues={validValues}
-        setFormValues={setFormValues}
-        setValidValues={setValidValues}
-      />
-
-      <div className="flex flex-col gap-2">
-        <Button onClick={handleSend} disabled={disableSubmit}>
-          {txLoading
-            ? "Loading"
-            : formConfig.submitButtonText || "Create Proposal"}
-        </Button>
-        {isSendTxError && renderError(sendTxError)}
-
-        {!isConnected && (
-          <>
-            <Button onClick={() => connect({ connector: connector })}>
-              Connect
-            </Button>
-          </>
-        )}
-
-        {isConnected && !validChain && (
-          <Button
-            onClick={() =>
-              switchChain({ chainId: getWagmiChainObj(daochain).id })
-            }
-          >
-            Switch to {getWagmiChainObj(daochain).name}
-          </Button>
-        )}
-
-        {propid && <Button onClick={openProposalCastUrl}>Cast Proposal</Button>}
-
-        {hash && <Button onClick={openUrl}>View Tx on Block Explorer</Button>}
+      <div className="w-full h-full space-y-4 pb-4 px-4">
+        <Card className="flex flex-col items-center px-4 pt-4 pb-8 rounded-none">
+          <div className="text-muted font-display text-2xl uppercase mb-4">
+            {formConfig.title}
+          </div>
+
+          <div className="w-full space-y-4">
+            <FormSwitcher
+              formConfig={formConfig}
+              confirmed={isConfirmed}
+              loading={isSendTxPending || isConfirming}
+              invalidConnection={!isConnected || !validChain}
+              handleSubmit={handleSend}
+            />
+          </div>
+
+          <div className="flex flex-col gap-2 w-full space-y-4 pb-4 px-4 mt-3">
+            {isSendTxError && renderError(sendTxError)}
+
+            {!isConnected && (
+              <>
+                <Button onClick={() => connect({ connector: connector })}>
+                  Connect
+                </Button>
+              </>
+            )}
+
+            {isConnected && !validChain && (
+              <Button
+                onClick={() =>
+                  switchChain({ chainId: getWagmiChainObj(daochain).id })
+                }
+              >
+                Switch to {getWagmiChainObj(daochain).name}
+              </Button>
+            )}
+
+            {propid && (
+              <Button onClick={openProposalCastUrl}>Cast Proposal</Button>
+            )}
+
+            {hash && (
+              <Button onClick={openUrl}>View Tx on Block Explorer</Button>
+            )}
+          </div>
+        </Card>
       </div>
     </>
   );

src/app/dao/[chainid]/[daoid]/dao-home.tsx

@@ -4,39 +4,50 @@ import Link from "next/link";
 import { useParams } from "next/navigation";
 import { Button } from "@/components/ui/button";
 import { useFrameSDK } from "@/providers/FramesSDKProvider";
+import { useDao } from "@/hooks/useDao";
 
 export default function DaoHome() {
   const { isLoaded } = useFrameSDK();
 
   const params = useParams<{ chainid: string; daoid: string }>();
+  const { dao } = useDao({ chainid: params.chainid, daoid: params.daoid });
 
   if (!isLoaded) {
     return <div>Loading...</div>;
   }
 
   return (
     <div className="w-[300px] mx-auto py-4 px-2">
+      {dao && (
+        <p className="my-3 text-primary font-semibold text-lg">
+          Create a proposal in {dao?.name}
+        </p>
+      )}
       <div className="mb-4">
         <Link href={`/dao/${params.chainid}/${params.daoid}/POST_SIGNAL`}>
           <Button>Propose Signal</Button>
         </Link>
       </div>
 
       <div className="mb-4">
-        {/* <Link
+        <Link
           href={`/dao/${params.chainid}/${params.daoid}/REQUEST_MEMBERSHIP`}
-        > */}
-        <Button disabled={true}>Request Fundings</Button>
-        {/* </Link> */}
+        >
+          <Button>Request Membership</Button>
+        </Link>
       </div>
 
       <div className="mb-4">
-        <Button disabled={true}>Request Membership</Button>
+        {/* <Link
+          href={`/dao/${params.chainid}/${params.daoid}/REQUEST_MEMBERSHIP`}
+          > */}
+        <Button disabled={true}>Request Fundings</Button>
+        {/* </Link> */}
       </div>
 
       <div className="mb-4">
         <Link href={`/dao/${params.chainid}/${params.daoid}/SAMPLE`}>
-          <Button>FIELD SAMPLE</Button>
+          <Button>SAMPLER</Button>
         </Link>
       </div>
     </div>

src/app/globals.css

@@ -7,7 +7,7 @@
     --background: 300 33% 15%;
     --foreground: 197 100% 95%;
     --card: 250 15% 10%;
-    --popover: 240 10% 3.9%;
+    --popover: 250 15% 10%;
     --popover-foreground: 0 0% 98%;
     --primary: 189 100% 40%;
     --primary-foreground: 0 0% 100%;

src/app/sample/page.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import React from 'react';
+
+import { SampleForm } from '@/components/forms/SampleForm';
+import { BaalContractBase } from '@/lib/tx-prepper/tx-prepper';
+
+export default function SamplePage() {
+  return (
+    <div className="w-full h-full space-y-4 pt-1 grow">
+      <SampleForm
+        formConfig={{
+          id: 'sample',
+          tx: {
+            id: 'sample',
+            method: 'submitProposal',
+            contract: {
+              ...BaalContractBase,
+              type: 'static',
+              targetAddress: '0x...',
+            },
+            args: [],
+          },
+        }}
+        confirmed={false}
+        loading={false}
+        invalidConnection={false}
+        handleSubmit={async () => {}}
+      />
+    </div>
+  );
+}

src/components/app/FormActionButtons.tsx

@@ -0,0 +1,34 @@
+import { Button } from "../ui/button";
+import { Spinner } from "../ui/spinner";
+
+export const FormActionButtons = ({
+  submitButtonText,
+  loading,
+  confirmed,
+  disabled,
+}: {
+  submitButtonText?: string;
+  loading: boolean;
+  confirmed: boolean;
+  disabled: boolean;
+}) => {
+  return (
+    <>
+      {loading && (
+        <Button type="submit" disabled={loading} className="w-full">
+          <Spinner />
+        </Button>
+      )}
+      {!loading && !confirmed && (
+        <Button type="submit" className="w-full" disabled={disabled}>
+          {submitButtonText || "Create Proposal"}
+        </Button>
+      )}
+      {confirmed && (
+        <Button type="submit" disabled={true} className="w-full">
+          Success
+        </Button>
+      )}
+    </>
+  );
+};