From c319185119556fe8b6799bb2290fca19f7457d2f Mon Sep 17 00:00:00 2001
From: Dmitry <61683409+0xDmitry@users.noreply.github.com>
Date: Sat, 11 Nov 2023 02:01:02 +0300
Subject: [PATCH] feat(website): queue transactions improve ux (#606)

---
 packages/website/src/app/deploy/layout.tsx    |   8 +-
 .../components/EditableAutocompleteInput.tsx  |  30 ++---
 .../features/Deploy/QueueTransactionsPage.tsx | 117 ++++++++++++------
 .../src/features/Deploy/SafeAddressInput.tsx  |   1 +
 packages/website/src/hooks/cannon.ts          |   6 +-
 5 files changed, 98 insertions(+), 64 deletions(-)

diff --git a/packages/website/src/app/deploy/layout.tsx b/packages/website/src/app/deploy/layout.tsx
index 277644303..2c75e9045 100644
--- a/packages/website/src/app/deploy/layout.tsx
+++ b/packages/website/src/app/deploy/layout.tsx
@@ -1,11 +1,15 @@
 'use client';
 
+import dynamic from 'next/dynamic';
 import { ReactNode } from 'react';
 import { Box, Flex, useBreakpointValue } from '@chakra-ui/react';
 import { usePathname } from 'next/navigation';
 import { links } from '@/constants/links';
 import { NavLink } from '@/components/NavLink';
-import WithSafe from '@/features/Deploy/WithSafe';
+
+const NoSSRWithSafe = dynamic(() => import('@/features/Deploy/WithSafe'), {
+  ssr: false,
+});
 
 export default function DeployLayout({ children }: { children: ReactNode }) {
   const pathname = usePathname();
@@ -47,7 +51,7 @@ export default function DeployLayout({ children }: { children: ReactNode }) {
           </NavLink>
         </Flex>
       </Box>
-      <WithSafe>{children}</WithSafe>
+      <NoSSRWithSafe>{children}</NoSSRWithSafe>
     </Flex>
   );
 }
diff --git a/packages/website/src/components/EditableAutocompleteInput.tsx b/packages/website/src/components/EditableAutocompleteInput.tsx
index 0e3ac01fa..632c3c344 100644
--- a/packages/website/src/components/EditableAutocompleteInput.tsx
+++ b/packages/website/src/components/EditableAutocompleteInput.tsx
@@ -109,7 +109,6 @@ export function EditableAutocompleteInput(props: {
   const editableInputRef = useRef();
 
   function tabToNext() {
-    console.log('tabdata trigger tabtonext');
     const tabElements = Array.from(
       document
         // Get all elements that can be focusable
@@ -144,10 +143,6 @@ export function EditableAutocompleteInput(props: {
       (e: any) => e === editableInputRef.current
     );
 
-    //console.log('tabdata current index', currentIndex);
-    //console.log('tabdata', editableInputRef)
-    //console.log('tabdata', tabElements);
-
     const nextIndex = (currentIndex + 1) % tabElements.length;
     tabElements[nextIndex].focus();
   }
@@ -201,7 +196,6 @@ export function EditableAutocompleteInput(props: {
             onEdit={() => setIsEditing(true)}
             onBlur={() => {
               finishEdit();
-              tabToNext();
             }}
             onKeyDown={handleKey}
             onChange={(value) => {
@@ -243,15 +237,14 @@ export function EditableAutocompleteInput(props: {
                   key={index}
                   item={item}
                   filterInput={filterInput}
-                  selected={item.label === pendingItem}
-                  isVisible={isEditing && filteredItems.length > 0}
                   onMouseOver={() => setPendingItem(item.label)}
+                  onMouseDown={(evt: any) => {
+                    evt.preventDefault();
+                  }}
                   onClick={() => {
-                    console.log('tabdata click');
                     setPendingItem(item.label);
                     setFilterInput(item.label);
                     tabToNext();
-                    console.log('tabdata end');
                   }}
                   internalRef={
                     (item.label === pendingItem
@@ -271,10 +264,9 @@ export function EditableAutocompleteInput(props: {
 function AutocompleteOption(props: {
   item: { label: string; secondary: string };
   filterInput: string;
-  selected?: boolean;
   onMouseOver: () => void;
+  onMouseDown: (evt: any) => void;
   onClick: () => void;
-  isVisible: boolean;
   // eslint-disable-next-line no-undef
   internalRef: React.MutableRefObject<HTMLDivElement> | undefined;
 }) {
@@ -287,21 +279,13 @@ function AutocompleteOption(props: {
     <Box
       ref={props.internalRef}
       onMouseOver={props.onMouseOver}
-      onClick={(evt) => {
-        evt.preventDefault();
-        props.onClick();
-      }}
+      onMouseDown={(evt: any) => props.onMouseDown(evt)}
+      onClick={props.onClick}
       background="black"
       px="2"
       pb="1"
     >
-      <HStack
-        onClick={(evt) => {
-          evt.preventDefault();
-          props.onClick();
-        }}
-        gap={0}
-      >
+      <HStack gap={0}>
         {matched.map((p, i) => [
           <Text key={i}>{p}</Text>,
           i < matched.length - 1 ? <Text as="b">{props.filterInput}</Text> : [],
diff --git a/packages/website/src/features/Deploy/QueueTransactionsPage.tsx b/packages/website/src/features/Deploy/QueueTransactionsPage.tsx
index fb13277b3..c93ed0699 100644
--- a/packages/website/src/features/Deploy/QueueTransactionsPage.tsx
+++ b/packages/website/src/features/Deploy/QueueTransactionsPage.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { AddIcon, MinusIcon } from '@chakra-ui/icons';
+import { AddIcon } from '@chakra-ui/icons';
 import {
   Alert,
   AlertDescription,
@@ -18,9 +18,11 @@ import {
   Tooltip,
   useToast,
   Text,
+  IconButton,
+  Flex,
 } from '@chakra-ui/react';
-import _ from 'lodash';
-import { useState } from 'react';
+import { CloseIcon } from '@chakra-ui/icons';
+import { useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
 import {
   Abi,
@@ -42,6 +44,11 @@ import { makeMultisend } from '@/helpers/multisend';
 import { DisplayedTransaction } from './DisplayedTransaction';
 import NoncePicker from './NoncePicker';
 
+type IdentifiableTxn = {
+  txn: Omit<TransactionRequestBase, 'from'>;
+  id: string;
+};
+
 export default function QueueTransactionsPage() {
   return <QueueTransactions />;
 }
@@ -51,9 +58,11 @@ function QueueTransactions() {
   const router = useRouter();
 
   const [target, setTarget] = useState('');
-  const [queuedTxns, setQueuedTxns] = useState<
-    Omit<TransactionRequestBase, 'from'>[]
-  >([null as any]);
+
+  const [lastQueuedTxnsId, setLastQueuedTxnsId] = useState(0);
+  const [queuedIdentifiableTxns, setQueuedIdentifiableTxns] = useState<
+    IdentifiableTxn[]
+  >([{ txn: null as any, id: String(lastQueuedTxnsId) }]);
 
   const [pickedNonce, setPickedNonce] = useState<number | null>(null);
 
@@ -63,6 +72,8 @@ function QueueTransactions() {
     `${currentSafe?.chainId}-${settings.preset}`
   );
 
+  const queuedTxns = queuedIdentifiableTxns.map((item) => item.txn);
+
   const multisendTxn =
     queuedTxns.indexOf(null as any) === -1
       ? makeMultisend(
@@ -127,10 +138,29 @@ function QueueTransactions() {
     i: number,
     txn: Omit<TransactionRequestBase, 'from'>
   ) {
-    queuedTxns[i] = txn;
-    setQueuedTxns(_.clone(queuedTxns));
+    setQueuedIdentifiableTxns((prev) => {
+      const result = [...prev];
+      result[i].txn = txn;
+      return result;
+    });
   }
 
+  const removeQueuedTxn = (i: number) => {
+    setQueuedIdentifiableTxns((prev) => {
+      const result = [...prev];
+      result.splice(i, 1);
+      return result;
+    });
+  };
+
+  const addQueuedTxn = () => {
+    setQueuedIdentifiableTxns((prev) => [
+      ...prev,
+      { txn: {}, id: String(lastQueuedTxnsId + 1) },
+    ]);
+    setLastQueuedTxnsId((prev) => prev + 1);
+  };
+
   const txnHasError = !!txnInfo.txnResults.filter((r) => r?.error).length;
 
   console.log('TXN HAS ERROR', txnHasError);
@@ -158,6 +188,17 @@ function QueueTransactions() {
   const disableExecute =
     !multisendTxn || txnHasError || !!stager.execConditionFailed;
 
+  console.log('xxx cannonInfo: ', cannonInfo);
+
+  useEffect(() => {
+    if (!cannonInfo.contracts) {
+      setQueuedIdentifiableTxns([
+        { txn: null as any, id: String(lastQueuedTxnsId + 1) },
+      ]);
+      setLastQueuedTxnsId((prev) => prev + 1);
+    }
+  }, [cannonInfo.contracts]);
+
   return (
     <Container maxWidth="container.md" py={8}>
       <Box mb={6}>
@@ -182,7 +223,7 @@ function QueueTransactions() {
           connected wallet.
         </FormHelperText>
       </FormControl>
-      {cannonInfo.pkgUrl && !cannonInfo.contracts && (
+      {!isAddress(target) && cannonInfo.pkgUrl && !cannonInfo.contracts && (
         <Alert bg="gray.800" status="info">
           <AlertIcon />
           <Box>
@@ -193,18 +234,32 @@ function QueueTransactions() {
           </Box>
         </Alert>
       )}
-      {cannonInfo.contracts && (
+      {!isAddress(target) && cannonInfo.contracts && (
         <FormControl mb="8">
           <FormLabel>Transactions</FormLabel>
-          {queuedTxns.map((_, i) => (
-            <Box key={i} mb={3}>
-              <DisplayedTransaction
-                editable
-                contracts={cannonInfo.contracts as any}
-                onTxn={(txn) => updateQueuedTxn(i, txn as any)}
-              />
+          {queuedIdentifiableTxns.map((queuedIdentifiableTxn, i) => (
+            <Flex key={queuedIdentifiableTxn.id} mb={3} direction="column">
+              <Flex>
+                <DisplayedTransaction
+                  editable
+                  contracts={cannonInfo.contracts as any}
+                  txn={queuedIdentifiableTxn.txn}
+                  onTxn={(txn) => updateQueuedTxn(i, txn as any)}
+                />
+                {queuedIdentifiableTxns.length > 1 && (
+                  <Box ml="3">
+                    <IconButton
+                      colorScheme="blackAlpha"
+                      background="transparent"
+                      icon={<CloseIcon opacity="0.5" />}
+                      aria-label={'Remove provider'}
+                      onClick={() => removeQueuedTxn(i)}
+                    />
+                  </Box>
+                )}
+              </Flex>
               {txnInfo.txnResults &&
-                txnInfo.txnResults.length === queuedTxns.length &&
+                txnInfo.txnResults.length === queuedIdentifiableTxns.length &&
                 txnInfo.txnResults[i] &&
                 txnInfo.txnResults[i]?.error && (
                   <Alert bg="gray.800" status="error" mt="6">
@@ -215,7 +270,7 @@ function QueueTransactions() {
                       : txnInfo.txnResults[i]?.error}
                   </Alert>
                 )}
-            </Box>
+            </Flex>
           ))}
           <HStack my="3">
             <Button
@@ -226,28 +281,10 @@ function QueueTransactions() {
               borderColor="green.400"
               _hover={{ bg: 'green.900' }}
               leftIcon={<AddIcon />}
-              onClick={() => setQueuedTxns(_.clone(queuedTxns.concat([{}])))}
+              onClick={() => addQueuedTxn()}
             >
               Add Transaction
             </Button>
-            {queuedTxns.length > 1 && (
-              <Button
-                variant="outline"
-                size="xs"
-                colorScheme="red"
-                color="red.400"
-                borderColor="red.400"
-                _hover={{ bg: 'red.900' }}
-                leftIcon={<MinusIcon />}
-                onClick={() =>
-                  setQueuedTxns(
-                    _.clone(queuedTxns.slice(0, queuedTxns.length - 1))
-                  )
-                }
-              >
-                Remove Transaction
-              </Button>
-            )}
           </HStack>
         </FormControl>
       )}
@@ -256,6 +293,8 @@ function QueueTransactions() {
           <FormLabel>Value</FormLabel>
           <Input
             type="text"
+            borderColor="whiteAlpha.400"
+            background="black"
             onChange={(event: any) =>
               updateQueuedTxn(0, {
                 ...queuedTxns[0],
@@ -273,6 +312,8 @@ function QueueTransactions() {
           <FormLabel>Transaction Data</FormLabel>
           <Input
             type="text"
+            borderColor="whiteAlpha.400"
+            background="black"
             placeholder="0x"
             onChange={(event: any) =>
               updateQueuedTxn(0, {
diff --git a/packages/website/src/features/Deploy/SafeAddressInput.tsx b/packages/website/src/features/Deploy/SafeAddressInput.tsx
index ae3229d43..2c2366a91 100644
--- a/packages/website/src/features/Deploy/SafeAddressInput.tsx
+++ b/packages/website/src/features/Deploy/SafeAddressInput.tsx
@@ -165,6 +165,7 @@ export function SafeAddressInput() {
     <>
       <FormControl>
         <CreatableSelect
+          instanceId={'safe-address-select'}
           chakraStyles={chakraStyles}
           isClearable
           value={currentSafe ? _safeToOption(currentSafe) : null}
diff --git a/packages/website/src/hooks/cannon.ts b/packages/website/src/hooks/cannon.ts
index 7a29b3c15..a0d69acbb 100644
--- a/packages/website/src/hooks/cannon.ts
+++ b/packages/website/src/hooks/cannon.ts
@@ -415,12 +415,16 @@ export function useCannonPackageContracts(packageRef: string, variant = '') {
 
         if (outputs) {
           setContracts(getContractsRecursive(outputs, null as any));
+        } else {
+          setContracts(null);
         }
+      } else {
+        setContracts(null);
       }
     };
 
     void getContracts();
-  }, [pkg.pkg]);
+  }, [pkg.pkg, packageRef]);
 
   return { contracts, ...pkg };
 }