mint automatically after commit, fix back button styling

kinode/src/register-ui/src/pages/CommitDotOsName.tsx

@@ -95,7 +95,7 @@ function CommitDotOsName({
 
     return (
         <div className="container fade-in">
-            <button onClick={() => history.back()} className="button secondary">🔙</button>
+            <button onClick={() => history.back()} className="button secondary back">🔙</button>
             <div className="section">
                 {
                     <form className="form" onSubmit={handleCommit}>

kinode/src/register-ui/src/pages/ImportKeyfile.tsx

@@ -83,7 +83,7 @@ function ImportKeyfile({
 
   return (
     <div className="container fade-in">
-      <button onClick={() => history.back()} className="button secondary">🔙</button>
+      <button onClick={() => history.back()} className="button secondary back">🔙</button>
       <div className="section">
         {loading ? (
           <Loader msg="Setting up node..." />

kinode/src/register-ui/src/pages/MintCustom.tsx

@@ -118,7 +118,7 @@ function MintCustom({
 
     return (
         <div className="container fade-in">
-            <button onClick={() => history.back()} className="button secondary">🔙</button>
+            <button onClick={() => history.back()} className="button secondary back">🔙</button>
             <div className="section">
                 {
                     <form className="form" onSubmit={handleMint}>

kinode/src/register-ui/src/pages/MintDotOsName.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, FormEvent, useCallback } from "react";
+import { useState, useEffect, useCallback } from "react";
 import { useNavigate } from "react-router-dom";
 import Loader from "../components/Loader";
 import { PageProps } from "../lib/types";
@@ -36,28 +36,28 @@ function MintDotOsName({
     });
   const addRecentTransaction = useAddRecentTransaction();
 
-  const [triggerNameCheck, setTriggerNameCheck] = useState<boolean>(false)
+  const [hasMinted, setHasMinted] = useState(false);
 
   useEffect(() => {
     document.title = "Mint"
   }, [])
 
-  useEffect(() => setTriggerNameCheck(!triggerNameCheck), [address])
-
   useEffect(() => {
     if (!address) {
       openConnectModal?.();
     }
   }, [address, openConnectModal]);
 
-  let handleMint = useCallback(async (e: FormEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-
+  const handleMint = useCallback(async () => {
     if (!address) {
       openConnectModal?.()
       return
     }
+    if (hasMinted) {
+      return
+    }
+
+    setHasMinted(true);
 
     const initCall = await generateNetworkingKeys({
       direct,
@@ -71,8 +71,6 @@ function MintDotOsName({
       reset: false,
     });
 
-    console.log("minting name: ", knsName)
-
     // strip .os suffix
     const name = knsName.replace(/\.os$/, '');
     const commitSecret = keccak256(stringToHex(name))
@@ -101,8 +99,15 @@ function MintDotOsName({
       })
     } catch (error) {
       console.error('Failed to send transaction:', error)
+      setHasMinted(false);
     }
-  }, [direct, address, sendTransaction, setNetworkingKey, setIpAddress, setWsPort, setTcpPort, setRouters, openConnectModal])
+  }, [direct, address, sendTransaction, setNetworkingKey, setIpAddress, setWsPort, setTcpPort, setRouters, openConnectModal, knsName, hasMinted])
+
+  useEffect(() => {
+    if (address && !isPending && !isConfirming) {
+      handleMint();
+    }
+  }, [address, handleMint, isPending, isConfirming]);
 
   useEffect(() => {
     if (isConfirmed) {
@@ -113,26 +118,18 @@ function MintDotOsName({
   return (
     <div className="container fade-in">
       <div className="section">
-        {
-          <form className="form" onSubmit={handleMint}>
+        <div className="form">
           {isPending || isConfirming ? (
             <Loader msg={isConfirming ? 'Minting name...' : 'Please confirm the transaction in your wallet'} />
           ) : (
-              <>
-                <div className="button-group">
-                  <button type="submit" className="button">
-                    Mint {knsName}
-                  </button>
-                </div>
-              </>
+            <Loader msg="Preparing to mint..." />
           )}
           {isError && (
             <p className="error-message">
               Error: {error?.message || 'There was an error minting your name, please try again.'}
             </p>
           )}
-          </form>
-        }
+        </div>
       </div>
     </div>
   );