Some minor UX fix (#157)

* Some minor UX fix * Fix loading state * Adds payment address disabled button when analysis is happening * Fixes lint issues --------- Co-authored-by: Gabriel Ferraz <[email protected]>
armitage-labs · May 16, 2024 · 5686090 · 5686090
1 parent 563d99d
commit 5686090
Show file tree

Hide file tree

Showing 6 changed files with 100 additions and 69 deletions.
diff --git a/src/app/(dashboard)/projects/[projectId]/page.tsx b/src/app/(dashboard)/projects/[projectId]/page.tsx
@@ -178,19 +178,19 @@ export default function TeamDetailsPage({ params }: PageProps) {
             !hasContributionRequest ? (
               <>
                 <GenerateAttestationModal teamId={teamId} />
+                <Button
+                  className="mr-2"
+                  variant={"destructive"}
+                  onClick={() => {
+                    router.push(`/projects/${teamId}/payments`);
+                  }}
+                >
+                  Payment Address
+                </Button>
               </>
             ) : (
               <div></div>
             )}
-            <Button
-              className="mr-2"
-              variant={"destructive"}
-              onClick={() => {
-                router.push(`/projects/${teamId}/payments`);
-              }}
-            >
-              Payment Address
-            </Button>
             <Button
               className="mr-2"
               onClick={() => {

diff --git a/src/app/(dashboard)/projects/[projectId]/payments/page.tsx b/src/app/(dashboard)/projects/[projectId]/payments/page.tsx
@@ -5,13 +5,15 @@ import axios from "axios";
 import { useEffect, useState } from "react";
 import PaymentsView from "@/components/payments/paymentView";
 import { PaymentAddressDto } from "@/app/api/payments/route";
+import { LoadingCircle } from "@/components/navigation/loading";
 
 interface PageProps {
   params: { projectId: string };
 }
 
 export default function ProjectPaymentsPage({ params }: PageProps) {
   const projectId = params.projectId;
+  const [isLoading, setIsLoading] = useState(true);
   const [projectPaymentAddress, setProjectPaymentAddress] = useState<
     PaymentAddressDto | undefined
   >();
@@ -21,6 +23,7 @@ export default function ProjectPaymentsPage({ params }: PageProps) {
     if (data.success && data.paymentAddress) {
       setProjectPaymentAddress(data.paymentAddress);
     }
+    setIsLoading(false);
   };
 
   useEffect(() => {
@@ -29,16 +32,26 @@ export default function ProjectPaymentsPage({ params }: PageProps) {
 
   return (
     <>
-      {projectPaymentAddress != null ? (
-        <PaymentsView
-          projectId={projectId}
-          paymentAddress={projectPaymentAddress}
-        ></PaymentsView>
+      {isLoading ? (
+        <>
+          <div className="pt-36 flex justify-center">
+            <LoadingCircle></LoadingCircle>
+          </div>
+        </>
       ) : (
-        <PaymentsOnboarding
-          projectId={projectId}
-          onCreate={setProjectPaymentAddress}
-        ></PaymentsOnboarding>
+        <>
+          {projectPaymentAddress != null ? (
+            <PaymentsView
+              projectId={projectId}
+              paymentAddress={projectPaymentAddress}
+            ></PaymentsView>
+          ) : (
+            <PaymentsOnboarding
+              projectId={projectId}
+              onCreate={setProjectPaymentAddress}
+            ></PaymentsOnboarding>
+          )}
+        </>
       )}
     </>
   );

diff --git a/src/app/(dashboard)/projects/new/page.tsx b/src/app/(dashboard)/projects/new/page.tsx
@@ -7,10 +7,12 @@ import ProjectRepoSelect from "@/components/projects/projectRepoSelect";
 import { TeamCalculationCreated } from "@/components/teams/teamCalculationCreated";
 import { Button } from "@/components/ui/button";
 import { Heading } from "@/components/ui/heading";
+import { Team } from "@prisma/client";
 import { Separator } from "@radix-ui/react-separator";
-import axios from "axios";
 import { useEffect, useState } from "react";
+import { redirect } from "next/navigation";
 import { toast } from "sonner";
+import axios from "axios";
 
 const breadcrumbItems = [
   { title: "Projects", link: "/projects" },
@@ -22,6 +24,8 @@ export default function CreateNewProjectPage() {
   const [selectedGithubRepos, setSelectedGithubRepos] = useState<
     GithubRepoDto[]
   >([]);
+  const [project, setProject] = useState<Team>();
+  const [reportGenerated, setReportGenerated] = useState<boolean>();
   const [currentStep, setCurrentStep] = useState(0);
 
   const handleOnRepoSelect = async (
@@ -51,6 +55,7 @@ export default function CreateNewProjectPage() {
     nextStep();
     const { data } = await axios.post("/api/teams", { name: createTeamName });
     if (data.success) {
+      setProject(data.createdTeam);
       await handleRegisterRepos(data.createdTeam.id);
       handleGenerateReport(data.createdTeam.id);
     } else {
@@ -78,7 +83,8 @@ export default function CreateNewProjectPage() {
       });
       previousStep();
     } else {
-      const { data } = await axios.get(`/api/credmanager?team_id=${projectId}`);
+      await axios.get(`/api/credmanager?team_id=${projectId}`);
+      setReportGenerated(true);
     }
   };
 
@@ -94,6 +100,12 @@ export default function CreateNewProjectPage() {
     console.log(selectedGithubRepos);
   }, [selectedGithubRepos]);
 
+  useEffect(() => {
+    if (reportGenerated) {
+      redirect(`/projects/${project?.id}`);
+    }
+  }, [reportGenerated]);
+
   return (
     <div className="flex-1 space-y-4  p-4 md:p-8 pt-6">
       <BreadCrumb items={breadcrumbItems} />

diff --git a/src/app/(dashboard)/projects/page.tsx b/src/app/(dashboard)/projects/page.tsx
@@ -44,8 +44,7 @@ export default function TeamsPage() {
           />
           <Button
             className="text-xs md:text-sm"
-            // TODO:
-            // onClick={() => router.push(`/repositories/new`)}
+            onClick={() => router.push(`/projects/new`)}
           >
             <Plus className="mr-2 h-4 w-4" /> Add New
           </Button>

diff --git a/src/components/payments/splits/splitsBalance.tsx b/src/components/payments/splits/splitsBalance.tsx
@@ -7,6 +7,7 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
 import {
   useDistributeToken,
   useSplitEarnings,
@@ -25,7 +26,8 @@ export function SplitsBalance({
   paymentAddress,
 }: SplitsBalanceProps) {
   const account = useAccount();
-  const { splitEarnings, isLoading, status, error } = useSplitEarnings(
+  const [isLoading, setIsLoading] = useState(true);
+  const { splitEarnings, status, error } = useSplitEarnings(
     parseInt(paymentAddress.chain_id),
     paymentAddress.wallet_address,
     true,
@@ -42,14 +44,14 @@ export function SplitsBalance({
   useEffect(() => {
     console.log(`BalanceUpdate: status[${status}] error[${error}]`);
     if (splitEarnings != null) {
-      console.log(splitEarnings);
       const formattedAmount =
         splitEarnings.activeBalances?.[
           "0x0000000000000000000000000000000000000000"
         ]?.formattedAmount;
       if (formattedAmount) {
         setBalance(formattedAmount);
       }
+      setIsLoading(false);
     }
   }, [splitEarnings, status, error, isLoading]);
 
@@ -60,46 +62,52 @@ export function SplitsBalance({
   }, [txHash, distributeStatus, distributeError]);
 
   return (
-    <Card>
-      <CardHeader>
-        <div className="flex items-center">
-          <Wallet2 className="inline-block" />
-          <CardTitle className="inline-block ml-2">Balance</CardTitle>
-        </div>
-      </CardHeader>
-      <CardContent>
-        <div className="flex justify-center">
-          <div className="text-6xl font-bold">ETH {balance}</div>
-        </div>
-      </CardContent>
-      <CardFooter>
-        <Button
-          className="w-full text-md flex justify-between items-center"
-          disabled={
-            !(
-              account.isConnected &&
-              (distributeStatus == null ||
-                distributeStatus == "error" ||
-                distributeStatus == "complete")
-            )
-          }
-          onClick={() =>
-            distributeToken({
-              splitAddress: paymentAddress.wallet_address,
-              token: "0x0000000000000000000000000000000000000000",
-            })
-          }
-        >
-          {distributeStatus == "pendingApproval" ? (
-            <>Waiting for approval</>
-          ) : distributeStatus == "txInProgress" ? (
-            <>In progress</>
-          ) : (
-            <>Distribute Balances</>
-          )}
-          <Split className="mr-2 h-5 w-5 transform rotate-90" />
-        </Button>
-      </CardFooter>
-    </Card>
+    <>
+      {isLoading ? (
+        <Skeleton className="h-64 w-100" />
+      ) : (
+        <Card>
+          <CardHeader>
+            <div className="flex items-center">
+              <Wallet2 className="inline-block" />
+              <CardTitle className="inline-block ml-2">Balance</CardTitle>
+            </div>
+          </CardHeader>
+          <CardContent>
+            <div className="flex justify-center">
+              <div className="text-6xl font-bold">ETH {balance}</div>
+            </div>
+          </CardContent>
+          <CardFooter>
+            <Button
+              className="w-full text-md flex justify-between items-center"
+              disabled={
+                !(
+                  account.isConnected &&
+                  (distributeStatus == null ||
+                    distributeStatus == "error" ||
+                    distributeStatus == "complete")
+                )
+              }
+              onClick={() =>
+                distributeToken({
+                  splitAddress: paymentAddress.wallet_address,
+                  token: "0x0000000000000000000000000000000000000000",
+                })
+              }
+            >
+              {distributeStatus == "pendingApproval" ? (
+                <>Waiting for approval</>
+              ) : distributeStatus == "txInProgress" ? (
+                <>In progress</>
+              ) : (
+                <>Distribute Balances</>
+              )}
+              <Split className="mr-2 h-5 w-5 transform rotate-90" />
+            </Button>
+          </CardFooter>
+        </Card>
+      )}
+    </>
   );
 }
diff --git a/src/components/payments/splits/splitsRecipients.tsx b/src/components/payments/splits/splitsRecipients.tsx
@@ -23,15 +23,14 @@ export default function SplitsRecipients({
   chainId,
 }: SplitsRecipientsProps) {
   const [recipient, setRecipient] = useState<SplitRecipient[]>([]);
-  const { splitMetadata, isLoading, status } = useSplitMetadata(
-    chainId,
-    paymentAddress,
-  );
+  const [isLoading, setIsLoading] = useState(true);
+  const { splitMetadata, status } = useSplitMetadata(chainId, paymentAddress);
 
   const handleSplitMetadata = async (splitRecipient: SplitRecipient[]) => {
     const { data } = await axios.post(`/api/wallet/search`, splitRecipient);
     if (data.success) {
       setRecipient(data.data);
+      setIsLoading(false);
     }
   };