refac: focus on input when mount in remove liquidity page

client/src/pages/PoolPage/RemoveLiquidity.tsx

@@ -11,13 +11,15 @@ import { Link } from "src/components/Link";
 import { Pages } from "src/types/pages";
 import coins from "src/lib/CoinsMetadata";
 import { useContract, useWallet } from "src/context/AppContext";
+import { useEffect, useRef } from "react";
 
 export default function RemoveLiquidityPage() {
-  const liquidityToken = coins.find((c) => c.assetId === CONTRACT_ID);
   const wallet = useWallet()!;
   const contract = useContract()!;
   const navigate = useNavigate();
+  const firstInputRef = useRef<HTMLInputElement | null>(null);
 
+  const liquidityToken = coins.find((c) => c.assetId === CONTRACT_ID);
   const tokenInput = useCoinInput({ coin: liquidityToken });
   const amount = tokenInput.amount;
 
@@ -59,14 +61,18 @@ export default function RemoveLiquidityPage() {
     }
   );
 
+  useEffect(() => {
+    firstInputRef.current?.focus();
+  }, []);
+
   if (!liquidityToken) {
     return null;
   }
 
   return (
     <>
       <div className="mt-4 mb-4">
-        <CoinInput {...tokenInput.getInputProps()} />
+        <CoinInput {...tokenInput.getInputProps()} ref={firstInputRef} />
         <Link
           className="inline-flex mt-2 ml-2"
           onPress={() => tokenInput.setAmount(balance?.amount!)}