fix(website): small visual fixes on deployments page (#1632)

usecannon · Jan 16, 2025 · 017f02e · 017f02e
1 parent b78a084
commit 017f02e
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 41 deletions.
diff --git a/packages/website/src/features/Deploy/BuildStateAlerts.tsx b/packages/website/src/features/Deploy/BuildStateAlerts.tsx
@@ -1,6 +1,5 @@
 import { Alert, AlertDescription } from '@/components/ui/alert';
 import { Button } from '@/components/ui/button';
-import { CustomSpinner } from '@/components/CustomSpinner';
 import { cn } from '@/lib/utils';
 
 interface BuildStateAlertsProps {
@@ -20,7 +19,6 @@ export function BuildStateAlerts({
     <>
       {buildStateMessage && (
         <Alert variant="info" className="mt-6">
-          <CustomSpinner className="mr-3 h-4 w-4" />
           <AlertDescription className="font-bold">
             {buildStateMessage}
           </AlertDescription>

diff --git a/packages/website/src/features/Deploy/NoncePicker.tsx b/packages/website/src/features/Deploy/NoncePicker.tsx
@@ -39,7 +39,7 @@ export default function NoncePicker({ safe, handleChange }: Params) {
   if (safeTxs.staged.length === 0) return null;
 
   return (
-    <div className="flex justify-between items-center flex-wrap gap-4">
+    <div className="flex justify-between items-center flex-wrap gap-4 mb-4">
       <TooltipProvider>
         <Tooltip>
           <TooltipTrigger asChild>

diff --git a/packages/website/src/features/Deploy/QueueFromGitOpsPage.tsx b/packages/website/src/features/Deploy/QueueFromGitOpsPage.tsx
@@ -554,6 +554,7 @@ export default function QueueFromGitOps() {
     }
 
     if (
+      cannonDefInfo.isFetching ||
       prevCannonDeployInfo.isFetching ||
       onChainPrevPkgQuery.isFetching ||
       partialDeployInfo?.isFetching

diff --git a/packages/website/src/features/Deploy/SignTransactionsPage.tsx b/packages/website/src/features/Deploy/SignTransactionsPage.tsx
@@ -19,12 +19,6 @@ export default function SignTransactionsPage() {
   const executedTransactions = useExecutedTransactions(currentSafe);
   const [isChecked, setIsChecked] = useState(true);
 
-  const {
-    paginatedData: paginatedStagedTxs,
-    hasMore: hasMoreStagedTxs,
-    fetchMoreData: fetchMoreStagedTxs,
-  } = useInMemoryPagination(stagedTransactions.staged, 20);
-
   const {
     paginatedData: paginatedExecutedTxs,
     hasMore: hasMoreExecutedTxs,
@@ -70,28 +64,13 @@ export default function SignTransactionsPage() {
               </p>
             </div>
           ) : (
-            <div
-              className="max-h-[40dvh] overflow-y-auto"
-              id="staged-transactions-container"
-            >
-              <InfiniteScroll
-                dataLength={paginatedStagedTxs.length}
-                next={fetchMoreStagedTxs}
-                hasMore={hasMoreStagedTxs}
-                loader={
-                  <div className="p-2 text-xs text-muted-foreground">
-                    Loading more transactions...
-                  </div>
-                }
-                scrollableTarget="staged-transactions-container"
-              >
-                <TransactionTable
-                  transactions={paginatedStagedTxs.map((tx) => tx.txn)}
-                  safe={currentSafe}
-                  hideExternal={false}
-                  isStaged
-                />
-              </InfiniteScroll>
+            <div className="max-h-[40dvh] overflow-y-auto">
+              <TransactionTable
+                transactions={stagedTransactions.staged.map((tx) => tx.txn)}
+                safe={currentSafe}
+                hideExternal={false}
+                isStaged
+              />
             </div>
           )}
         </div>

diff --git a/packages/website/src/features/Deploy/TransactionPreviewAndExecution.tsx b/packages/website/src/features/Deploy/TransactionPreviewAndExecution.tsx
@@ -1,6 +1,5 @@
 import { Alert, AlertDescription } from '@/components/ui/alert';
 import { Button } from '@/components/ui/button';
-import { CustomSpinner } from '@/components/CustomSpinner';
 import {
   Tooltip,
   TooltipContent,
@@ -100,7 +99,6 @@ export function TransactionPreviewAndExecution({
         )}
       {writeToIpfsMutationRes?.isLoading && (
         <Alert className="mt-6" variant="info">
-          <CustomSpinner className="mr-3 h-4 w-4" />
           <strong>Uploading build result to IPFS...</strong>
         </Alert>
       )}
@@ -127,14 +125,7 @@ export function TransactionPreviewAndExecution({
                       await stager.sign();
                     }}
                   >
-                    {stager.signing ? (
-                      <>
-                        Currently Signing
-                        <CustomSpinner className="h-4 w-4 ml-2" />
-                      </>
-                    ) : (
-                      'Queue & Sign'
-                    )}
+                    {stager.signing ? <>Currently Signing</> : 'Queue & Sign'}
                   </Button>
                 </TooltipTrigger>
                 <TooltipContent>{stager.signConditionFailed}</TooltipContent>