From fa7a613d8722c61bc5b589f5a7bdc3e7e154e90c Mon Sep 17 00:00:00 2001
From: Emanuel Palestino <emanuel.palestino.h@gmail.com>
Date: Sat, 3 Aug 2024 11:19:54 -0600
Subject: [PATCH] feat(frontend) added autofocus to liquidity dialog input

---
 packages/frontend/app/components/LiquidityDialog.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/frontend/app/components/LiquidityDialog.tsx b/packages/frontend/app/components/LiquidityDialog.tsx
index 00757aea2f..c1b00a3ce1 100644
--- a/packages/frontend/app/components/LiquidityDialog.tsx
+++ b/packages/frontend/app/components/LiquidityDialog.tsx
@@ -1,7 +1,7 @@
 import { Dialog } from '@headlessui/react'
 import { Form } from '@remix-run/react'
 import type { ChangeEvent } from 'react'
-import { useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { XIcon } from '~/components/icons'
 import { Button, Input } from '~/components/ui'
 
@@ -42,6 +42,13 @@ export const LiquidityDialog = ({
     setActualAmount(integerScaledInput)
   }
 
+  const inputRef = useRef<HTMLInputElement>(null)
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus()
+    }
+  }, [])
+
   return (
     <Dialog as='div' className='relative z-10' onClose={onClose} open={true}>
       <div className='fixed inset-0 bg-tealish/30 bg-opacity-75 transition-opacity' />
@@ -67,6 +74,7 @@ export const LiquidityDialog = ({
               </Dialog.Title>
               <div className='mt-2'>
                 <Input
+                  ref={inputRef}
                   required
                   type='number'
                   name='displayAmount'
@@ -75,6 +83,7 @@ export const LiquidityDialog = ({
                   addOn={asset.code}
                   step='any'
                   error={errorMessage}
+                  autoFocus
                 />
                 <Form method='post' replace preventScrollReset>
                   <Input