Merge pull request #27 from lnflash/fix/min_amount

Show toast error message if input amount is less than minimum required amount

components/ParsePOSPayment/index.tsx

@@ -18,6 +18,8 @@ import { useDisplayCurrency } from "../../lib/use-display-currency"
 import { Currency } from "../../lib/graphql/generated"
 import { ParsedUrlQuery } from "querystring"
 import CurrencyInput, { formatValue } from "react-currency-input-field"
+import useSatPrice from "../../lib/use-sat-price"
+import toast, { Toaster } from "react-hot-toast"
 
 function isRunningStandalone() {
   return window.matchMedia("(display-mode: standalone)").matches
@@ -56,6 +58,7 @@ function ParsePayment({ defaultWalletCurrency, walletId, dispatch, state }: Prop
   const { display } = parseDisplayCurrency(router.query)
   const { currencyToSats, satsToCurrency, hasLoaded } = useRealtimePrice(display)
   const { currencyList } = useDisplayCurrency()
+  const { satsToUsd, usdToSats } = useSatPrice()
   const [valueInFiat, setValueInFiat] = React.useState(0)
   const [valueInSats, setValueInSats] = React.useState(0)
   const [currentAmount, setCurrentAmount] = React.useState(state.currentAmount)
@@ -397,7 +400,20 @@ function ParsePayment({ defaultWalletCurrency, walletId, dispatch, state }: Prop
             if (state.createdInvoice) {
               dispatch({ type: ACTIONS.CREATE_NEW_INVOICE })
             } else {
-              dispatch({ type: ACTIONS.CREATE_INVOICE, payload: amount?.toString() })
+              if (satsToUsd(valueInSats) < 0.01) {
+                const { formattedCurrency } = satsToCurrency(
+                  Math.ceil(usdToSats(0.01)),
+                  display,
+                  currencyMetadata.fractionDigits,
+                )
+                toast.error(
+                  `Amount must be at least ${Math.ceil(
+                    usdToSats(0.01),
+                  )} sats (${formattedCurrency})`,
+                )
+              } else {
+                dispatch({ type: ACTIONS.CREATE_INVOICE, payload: amount?.toString() })
+              }
             }
           }}
         >
@@ -426,6 +442,7 @@ function ParsePayment({ defaultWalletCurrency, walletId, dispatch, state }: Prop
           </button>
         )}
       </div>
+      <Toaster />
     </Container>
   )
 }

package.json

@@ -52,6 +52,7 @@
     "react-bootstrap": "^1.6.4",
     "react-currency-input-field": "^3.6.10",
     "react-dom": "^17.0.2",
+    "react-hot-toast": "^2.4.1",
     "react-lottie": "^1.2.3",
     "react-qrcode-logo": "^2.9.0",
     "react-refresh": "^0.14.0",

yarn.lock

@@ -5080,6 +5080,11 @@ globby@^11.0.3, globby@^11.0.4, globby@^11.1.0:
     merge2 "^1.4.1"
     slash "^3.0.0"
 
+goober@^2.1.10:
+  version "2.1.14"
+  resolved "https://registry.yarnpkg.com/goober/-/goober-2.1.14.tgz#4a5c94fc34dc086a8e6035360ae1800005135acd"
+  integrity sha512-4UpC0NdGyAFqLNPnhCT2iHpza2q+RAY3GV85a/mRPdzyPQMsj0KmMMuetdIkzWRbJ+Hgau1EZztq8ImmiMGhsg==
+
 gopd@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/gopd/-/gopd-1.0.1.tgz#29ff76de69dac7489b7c0918a5788e56477c332c"
@@ -6840,6 +6845,13 @@ react-error-overlay@^6.0.11:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz#92835de5841c5cf08ba00ddd2d677b6d17ff9adb"
   integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==
 
+react-hot-toast@^2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/react-hot-toast/-/react-hot-toast-2.4.1.tgz#df04295eda8a7b12c4f968e54a61c8d36f4c0994"
+  integrity sha512-j8z+cQbWIM5LY37pR6uZR6D4LfseplqnuAO4co4u8917hBUvXlEqyP1ZzqVLcqoyUesZZv/ImreoCeHVDpE5pQ==
+  dependencies:
+    goober "^2.1.10"
+
 react-is@^16.13.1, react-is@^16.3.2, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"