From 798e9cfd29d981a6719b16b9ca2bc1957b5f2c54 Mon Sep 17 00:00:00 2001
From: Marshall Polaris <marshall@pol.rs>
Date: Sat, 24 Sep 2022 16:35:24 -0700
Subject: [PATCH] Use `useIsMobile` hook in `AmountInput`

---
 web/components/amount-input.tsx | 5 ++---
 web/hooks/use-is-mobile.ts      | 8 ++++----
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/web/components/amount-input.tsx b/web/components/amount-input.tsx
index 2ad745a8..76581d9e 100644
--- a/web/components/amount-input.tsx
+++ b/web/components/amount-input.tsx
@@ -5,7 +5,7 @@ import { formatMoney } from 'common/util/format'
 import { Col } from './layout/col'
 import { SiteLink } from './site-link'
 import { ENV_CONFIG } from 'common/envs/constants'
-import { useWindowSize } from 'web/hooks/use-window-size'
+import { useIsMobile } from 'web/hooks/use-is-mobile'
 
 export function AmountInput(props: {
   amount: number | undefined
@@ -34,8 +34,7 @@ export function AmountInput(props: {
     const isInvalid = !str || isNaN(amount)
     onChange(isInvalid ? undefined : amount)
   }
-  const { width } = useWindowSize()
-  const isMobile = (width ?? 0) < 768
+  const isMobile = useIsMobile(768)
   return (
     <Col className={className}>
       <label className="input-group mb-4">
diff --git a/web/hooks/use-is-mobile.ts b/web/hooks/use-is-mobile.ts
index 41b0c302..7e99a97d 100644
--- a/web/hooks/use-is-mobile.ts
+++ b/web/hooks/use-is-mobile.ts
@@ -1,13 +1,13 @@
 import { useEffect, useState } from 'react'
 
-export function useIsMobile() {
+export function useIsMobile(threshold?: number) {
   const [isMobile, setIsMobile] = useState<boolean>()
   useEffect(() => {
-    // matches tailwind sm breakpoint
-    const onResize = () => setIsMobile(window.innerWidth < 640)
+    // 640 matches tailwind sm breakpoint
+    const onResize = () => setIsMobile(window.innerWidth < (threshold ?? 640))
     onResize()
     window.addEventListener('resize', onResize)
     return () => window.removeEventListener('resize', onResize)
-  }, [])
+  }, [threshold])
   return isMobile
 }