feat: autosubmit

packages/ui/src/App.tsx

@@ -5,13 +5,13 @@ import { QRCodeSVG } from 'qrcode.react';
 
 export const App = () => {
   const [word, setWord] = useState('');
-  const [qrCode, setQrCode] = useState('');
 
   const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    setQrCode(constructAddWordUiCommand({ word, contractId: import.meta.env.VITE_CONTRACT_ADDRESS ?? '' }));
   };
 
+  const qrCode = constructAddWordUiCommand({ word, contractId: import.meta.env.VITE_CONTRACT_ADDRESS ?? '' });
+
   return (
     <div>
       <form onSubmit={onSubmit}>
@@ -28,28 +28,24 @@ export const App = () => {
             value={word}
             onChange={(e) => setWord(e.target.value)}
           />
-          <button
-            type="submit"
-            className="w-full self-end rounded-lg bg-blue-700 px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 sm:w-auto dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
-          >
-            Submit
-          </button>
         </div>
       </form>
       <div className="flex w-full justify-center py-4">
-        <QRCodeSVG
-          onClick={() => {
-            navigator.clipboard.writeText(qrCode).catch((err) => {
-              console.error(err);
-            });
-          }}
-          value={qrCode}
-          size={320}
-          level="L"
-          className="hover:cursor-pointer"
-          bgColor="transparent"
-          fgColor="black"
-        />
+        {word && (
+          <QRCodeSVG
+            onClick={() => {
+              navigator.clipboard.writeText(qrCode).catch((err) => {
+                console.error(err);
+              });
+            }}
+            value={qrCode}
+            size={320}
+            level="L"
+            className="hover:cursor-pointer"
+            bgColor="transparent"
+            fgColor="black"
+          />
+        )}
       </div>
     </div>
   );