Merge pull request #13 from joeymeere/feature/eng-3101-cleanup-public…

…-ui-create-flow refactor: fix create, tx table logic, & hydration errors
Squads-Protocol · Oct 23, 2024 · 212404d · 212404d
2 parents ff1eb5c + 49b25ac
commit 212404d
Show file tree

Hide file tree

Showing 9 changed files with 559 additions and 314 deletions.
diff --git a/app/(app)/create/page.tsx b/app/(app)/create/page.tsx
@@ -1,9 +1,11 @@
 import CreateSquadForm from "@/components/CreateSquadForm";
 import { Card, CardContent } from "@/components/ui/card";
-import { headers } from "next/headers";
+import { PROGRAM_ID } from "@sqds/multisig";
+import { cookies, headers } from "next/headers";
 
 export default async function CreateSquad() {
   const rpcUrl = headers().get("x-rpc-url");
+  const programId = cookies().get("x-program-id")?.value;
 
   return (
     <div className="">
@@ -15,7 +17,10 @@ export default async function CreateSquad() {
       </div>
       <Card className="pt-5">
         <CardContent>
-          <CreateSquadForm rpc={rpcUrl!} />
+          <CreateSquadForm
+            rpc={rpcUrl!}
+            programId={programId ? programId : PROGRAM_ID.toBase58()}
+          />
         </CardContent>
       </Card>
     </div>

diff --git a/app/(app)/layout.tsx b/app/(app)/layout.tsx
@@ -5,7 +5,14 @@ import { Connection, PublicKey, clusterApiUrl } from "@solana/web3.js";
 import * as multisig from "@sqds/multisig";
 import { Toaster } from "@/components/ui/sonner";
 import ConnectWallet from "@/components/ConnectWalletButton";
-import { LucideHome, ArrowDownUp, Users, Settings } from "lucide-react";
+import {
+  LucideHome,
+  ArrowDownUp,
+  Users,
+  Settings,
+  CheckSquare,
+  AlertTriangle,
+} from "lucide-react";
 import RenderMultisigRoute from "@/components/RenderMultisigRoute";
 
 const AppLayout = async ({ children }: { children: React.ReactNode }) => {
@@ -39,7 +46,7 @@ const AppLayout = async ({ children }: { children: React.ReactNode }) => {
   const multisig = await isValidPublicKey(multisigCookie!);
 
   return (
-    <body>
+    <>
       <div className="flex flex-col md:flex-row h-screen min-w-full bg-white">
         <aside
           id="sidebar"
@@ -113,8 +120,13 @@ const AppLayout = async ({ children }: { children: React.ReactNode }) => {
 
         <RenderMultisigRoute multisig={multisig} children={children} />
       </div>
-      <Toaster />
-    </body>
+      <Toaster
+        icons={{
+          error: <AlertTriangle className="w-4 h-4 text-red-600" />,
+          success: <CheckSquare className="w-4 h-4 text-green-600" />,
+        }}
+      />
+    </>
   );
 };
 

diff --git a/app/(app)/transactions/page.tsx b/app/(app)/transactions/page.tsx
@@ -3,9 +3,7 @@ import { cookies, headers } from "next/headers";
 import { Connection, PublicKey, clusterApiUrl } from "@solana/web3.js";
 import {
   Table,
-  TableBody,
   TableCaption,
-  TableCell,
   TableHead,
   TableHeader,
   TableRow,
@@ -17,13 +15,9 @@ import {
   PaginationNext,
   PaginationPrevious,
 } from "@/components/ui/pagination";
-import Link from "next/link";
-import ApproveButton from "@/components/ApproveButton";
-import ExecuteButton from "@/components/ExecuteButton";
-import RejectButton from "@/components/RejectButton";
 import { Suspense } from "react";
 import CreateTransaction from "@/components/CreateTransactionButton";
-import { redirect } from "next/navigation";
+import TransactionTable from "@/components/TransactionTable";
 
 const TRANSACTIONS_PER_PAGE = 10;
 
@@ -44,8 +38,11 @@ export default async function TransactionsPage({
 }) {
   const page = searchParams.page ? parseInt(searchParams.page) : 1;
   const rpcUrl = headers().get("x-rpc-url");
-  const connection = new Connection(rpcUrl || clusterApiUrl("mainnet-beta"));
-  const multisigCookie = headers().get("x-multisig");
+  const connection = new Connection(
+    rpcUrl || clusterApiUrl("mainnet-beta"),
+    "confirmed"
+  );
+  const multisigCookie = cookies().get("x-multisig")?.value;
   const multisigPda = new PublicKey(multisigCookie!);
   const vaultIndex = Number(headers().get("x-vault-index"));
   const programIdCookie = cookies().get("x-program-id")
@@ -59,13 +56,15 @@ export default async function TransactionsPage({
     connection,
     multisigPda
   );
+
   const totalTransactions = Number(multisigInfo.transactionIndex);
   const totalPages = Math.ceil(totalTransactions / TRANSACTIONS_PER_PAGE);
 
+  /*
   if (page > totalPages) {
-    // Redirect to the last valid page if the requested page is out of range
-    redirect(`/transactions?page=${totalPages}`);
+    redirect(`/transactions?page=0`);
   }
+  */
 
   const startIndex = totalTransactions - (page - 1) * TRANSACTIONS_PER_PAGE;
   const endIndex = Math.max(startIndex - TRANSACTIONS_PER_PAGE + 1, 1);
@@ -77,6 +76,13 @@ export default async function TransactionsPage({
     })
   );
 
+  const transactions = latestTransactions.map((transaction) => {
+    return {
+      ...transaction,
+      transactionPda: transaction.transactionPda[0].toBase58(),
+    };
+  });
+
   return (
     <div>
       <div className="mb-4 flex items-center justify-between">
@@ -93,7 +99,7 @@ export default async function TransactionsPage({
         <Table>
           <TableCaption>A list of your recent transactions.</TableCaption>
           <TableCaption>
-            Page: {page} of {totalPages}
+            Page: {totalPages > 0 ? page + 1 : 0} of {totalPages}
           </TableCaption>
 
           <TableHeader>
@@ -104,47 +110,14 @@ export default async function TransactionsPage({
               <TableHead>Actions</TableHead>
             </TableRow>
           </TableHeader>
-          {latestTransactions.length > 0 ? (
-            <TableBody>
-              {latestTransactions.map((transaction, index) => {
-                return (
-                  <TableRow key={index}>
-                    <TableCell>{Number(transaction.index)}</TableCell>
-                    <TableCell className="text-blue-500">
-                      <Link
-                        href={createSolanaExplorerUrl(
-                          transaction.transactionPda[0].toBase58(),
-                          rpcUrl!
-                        )}
-                      >
-                        {transaction.transactionPda[0].toBase58()}
-                      </Link>
-                    </TableCell>
-                    <TableCell>
-                      {transaction.proposal?.status.__kind || "Active"}
-                    </TableCell>
-                    <TableCell>
-                      <ActionButtons
-                        rpcUrl={rpcUrl!}
-                        multisigPda={multisigCookie!}
-                        transactionIndex={Number(transaction.index)}
-                        proposalStatus={
-                          transaction.proposal?.status.__kind || "Active"
-                        }
-                        programId={programId}
-                      />
-                    </TableCell>
-                  </TableRow>
-                );
-              })}
-            </TableBody>
-          ) : (
-            <TableBody>
-              <TableRow>
-                <TableCell colSpan={5}>No transactions found.</TableCell>
-              </TableRow>
-            </TableBody>
-          )}
+          <Suspense fallback={<div>Loading...</div>}>
+            <TransactionTable
+              multisigPda={multisigCookie!}
+              rpcUrl={rpcUrl!}
+              transactions={transactions}
+              programId={programIdCookie!}
+            />
+          </Suspense>
         </Table>
       </Suspense>
 
@@ -195,45 +168,3 @@ async function fetchTransactionData(
 
   return { transactionPda, proposal, index };
 }
-
-function ActionButtons({
-  rpcUrl,
-  multisigPda,
-  transactionIndex,
-  proposalStatus,
-  programId,
-}: ActionButtonsProps) {
-  return (
-    <>
-      <ApproveButton
-        rpcUrl={rpcUrl}
-        multisigPda={multisigPda}
-        transactionIndex={transactionIndex}
-        proposalStatus={proposalStatus}
-        programId={programId.toBase58()}
-      />
-      <RejectButton
-        rpcUrl={rpcUrl}
-        multisigPda={multisigPda}
-        transactionIndex={transactionIndex}
-        proposalStatus={proposalStatus}
-        programId={programId.toBase58()}
-      />
-      <ExecuteButton
-        rpcUrl={rpcUrl}
-        multisigPda={multisigPda}
-        transactionIndex={transactionIndex}
-        proposalStatus={proposalStatus}
-        programId={programId.toBase58()}
-      />
-    </>
-  );
-}
-
-function createSolanaExplorerUrl(publicKey: string, rpcUrl: string): string {
-  const baseUrl = "https://explorer.solana.com/address/";
-  const clusterQuery = "?cluster=custom&customUrl=";
-  const encodedRpcUrl = encodeURIComponent(rpcUrl);
-
-  return `${baseUrl}${publicKey}${clusterQuery}${encodedRpcUrl}`;
-}