Fixes issue #101

components/Accounts.tsx

@@ -36,11 +36,13 @@ export const AccountDialog = ({
 }) => {
   const snap = useSnapshot(state);
   const [showSecret, setShowSecret] = useState(false);
-  const activeAccount = snap.accounts.find(account => account.address === activeAccountAddress);
+  const activeAccount = snap.accounts.find(
+    (account) => account.address === activeAccountAddress
+  );
   return (
     <Dialog
       open={Boolean(activeAccountAddress)}
-      onOpenChange={open => {
+      onOpenChange={(open) => {
         setShowSecret(false);
         !open && setActiveAccountAddress(null);
       }}
@@ -135,7 +137,7 @@ export const AccountDialog = ({
                     }}
                     ghost
                     size="xs"
-                    onClick={() => setShowSecret(curr => !curr)}
+                    onClick={() => setShowSecret((curr) => !curr)}
                   >
                     {showSecret ? "Hide" : "Show"}
                   </Button>
@@ -221,13 +223,15 @@ interface AccountProps {
   showHookStats?: boolean;
 }
 
-const Accounts: FC<AccountProps> = props => {
+const Accounts: FC<AccountProps> = (props) => {
   const snap = useSnapshot(state);
-  const [activeAccountAddress, setActiveAccountAddress] = useState<string | null>(null);
+  const [activeAccountAddress, setActiveAccountAddress] = useState<
+    string | null
+  >(null);
   useEffect(() => {
     const fetchAccInfo = async () => {
       if (snap.clientStatus === "online") {
-        const requests = snap.accounts.map(acc =>
+        const requests = snap.accounts.map((acc) =>
           snap.client?.send({
             id: acc.address,
             command: "account_info",
@@ -239,13 +243,15 @@ const Accounts: FC<AccountProps> = props => {
           const address = res?.account_data?.Account as string;
           const balance = res?.account_data?.Balance as string;
           const sequence = res?.account_data?.Sequence as number;
-          const accountToUpdate = state.accounts.find(acc => acc.address === address);
+          const accountToUpdate = state.accounts.find(
+            (acc) => acc.address === address
+          );
           if (accountToUpdate) {
             accountToUpdate.xrp = balance;
             accountToUpdate.sequence = sequence;
           }
         });
-        const objectRequests = snap.accounts.map(acc => {
+        const objectRequests = snap.accounts.map((acc) => {
           return snap.client?.send({
             id: `${acc.address}-hooks`,
             command: "account_objects",
@@ -255,7 +261,9 @@ const Accounts: FC<AccountProps> = props => {
         const objectResponses = await Promise.all(objectRequests);
         objectResponses.forEach((res: any) => {
           const address = res?.account as string;
-          const accountToUpdate = state.accounts.find(acc => acc.address === address);
+          const accountToUpdate = state.accounts.find(
+            (acc) => acc.address === address
+          );
           if (accountToUpdate) {
             accountToUpdate.hooks = res.account_objects
               .filter((ac: any) => ac?.LedgerEntryType === "Hook")
@@ -337,7 +345,7 @@ const Accounts: FC<AccountProps> = props => {
             overflowY: "auto",
           }}
         >
-          {snap.accounts.map(account => (
+          {snap.accounts.map((account) => (
             <Flex
               column
               key={account.address + account.name}
@@ -383,28 +391,37 @@ const Accounts: FC<AccountProps> = props => {
                   </Text>
                 </Box>
                 {!props.hideDeployBtn && (
-                  <Button
-                    css={{ ml: "auto" }}
-                    size="xs"
-                    uppercase
-                    isLoading={account.isLoading}
-                    disabled={
-                      account.isLoading ||
-                      !snap.files.filter(file => file.compiledWatContent).length
-                    }
-                    variant="secondary"
-                    onClick={e => {
+                  <div
+                    onClick={(e) => {
+                      e.preventDefault();
                       e.stopPropagation();
-                      deployHook(account);
                     }}
                   >
-                    Deploy
-                  </Button>
+                    <Button
+                      css={{ ml: "auto" }}
+                      size="xs"
+                      uppercase
+                      isLoading={account.isLoading}
+                      disabled={
+                        account.isLoading ||
+                        !snap.files.filter((file) => file.compiledWatContent)
+                          .length
+                      }
+                      variant="secondary"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        deployHook(account);
+                      }}
+                    >
+                      Deploy
+                    </Button>
+                  </div>
                 )}
               </Flex>
               {props.showHookStats && (
                 <Text muted small css={{ mt: "$2" }}>
-                  {account.hooks.length} hook{account.hooks.length === 1 ? "" : "s"} installed
+                  {account.hooks.length} hook
+                  {account.hooks.length === 1 ? "" : "s"} installed
                 </Text>
               )}
             </Flex>
@@ -436,7 +453,7 @@ const ImportAccountDialog = () => {
             name="secret"
             type="password"
             value={value}
-            onChange={e => setValue(e.target.value)}
+            onChange={(e) => setValue(e.target.value)}
           />
         </DialogDescription>