From b0d282b131c59ae1bf94591789d0d4ac37ced8d0 Mon Sep 17 00:00:00 2001
From: Emanuel Palestino <75344407+Emanuel-Palestino@users.noreply.github.com>
Date: Mon, 5 Aug 2024 10:47:45 -0600
Subject: [PATCH] feat(frontend): ux improvements to liquidity dialog component
 (#2839)

* fixed(frontend) asset page now retains page scroll position.

* feat(frontend) added autofocus to liquidity dialog input

* feat(fronted) made eslint happy
---
 packages/frontend/app/components/LiquidityDialog.tsx | 10 +++++++++-
 packages/frontend/app/routes/assets.$assetId.tsx     |  2 ++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/frontend/app/components/LiquidityDialog.tsx b/packages/frontend/app/components/LiquidityDialog.tsx
index 00757aea2f..917370ab1c 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'
diff --git a/packages/frontend/app/routes/assets.$assetId.tsx b/packages/frontend/app/routes/assets.$assetId.tsx
index 2181fb0484..30a7eb6b67 100644
--- a/packages/frontend/app/routes/assets.$assetId.tsx
+++ b/packages/frontend/app/routes/assets.$assetId.tsx
@@ -150,6 +150,7 @@ export default function ViewAssetPage() {
               <div className='flex space-x-4'>
                 <Button
                   aria-label='deposit asset liquidity page'
+                  preventScrollReset
                   type='button'
                   to={`/assets/${asset.id}/deposit-liquidity`}
                 >
@@ -157,6 +158,7 @@ export default function ViewAssetPage() {
                 </Button>
                 <Button
                   aria-label='withdraw asset liquidity page'
+                  preventScrollReset
                   type='button'
                   to={`/assets/${asset.id}/withdraw-liquidity`}
                 >