Extract send bitcoins form to separate file

Extracts `SendBitcoinsToDepositAddressForm` to a separate file to make the `MakeDeposit` file cleaner.
threshold-network · Dec 13, 2023 · a993ab7 · a993ab7
1 parent c0a6e36
commit a993ab7
Show file tree

Hide file tree

Showing 3 changed files with 107 additions and 99 deletions.
diff --git a/src/components/tBTC/SendBitcoinsToDepositAddressForm.tsx b/src/components/tBTC/SendBitcoinsToDepositAddressForm.tsx
@@ -0,0 +1,100 @@
+import { FC } from "react"
+import { BodySm, Box, Button } from "@threshold-network/components"
+import { Form, FormikTokenBalanceInput } from "../../components/Forms"
+import { InlineTokenBalance } from "../../components/TokenBalance"
+import { tBTCFillBlack } from "../../static/icons/tBTCFillBlack"
+import { FormikErrors, useFormikContext, withFormik } from "formik"
+import { getErrorsObj, validateAmountInRange } from "../../utils/forms"
+import { MINT_BITCOIN_MIN_AMOUNT } from "../../utils/tBTC"
+
+/**
+ * Formik for Ledger Live App where we can send bitcoins without leaving our
+ * T dashboard. It should only be visible with `isEmbed` flag.
+ */
+
+type SendBitcoinsToDepositAddressFormBaseProps = {
+  maxTokenAmount: string
+}
+
+const SendBitcoinsToDepositAddressFormBase: FC<
+  SendBitcoinsToDepositAddressFormBaseProps
+> = ({ maxTokenAmount }) => {
+  const { isSubmitting } =
+    useFormikContext<SendBitcoinsToDepositAddressFormValues>()
+
+  return (
+    <Form mt={10}>
+      <FormikTokenBalanceInput
+        name="amount"
+        label={
+          // TODO: Extract to a shared component - the same layout is used in
+          // `UnmintFormBase` component.
+          <>
+            <Box as="span">Amount </Box>
+            <BodySm as="span" float="right" color="gray.500">
+              Balance:{" "}
+              <InlineTokenBalance
+                tokenAmount={maxTokenAmount}
+                withSymbol
+                tokenSymbol="BTC"
+                tokenDecimals={8}
+                precision={6}
+                higherPrecision={8}
+                withHigherPrecision
+              />
+            </BodySm>
+          </>
+        }
+        placeholder="Amount of bitcoins you want to send to deposit address."
+        max={maxTokenAmount}
+        icon={tBTCFillBlack}
+        tokenDecimals={8}
+      />
+      <Button
+        size="lg"
+        w="100%"
+        mt={"10"}
+        type="submit"
+        isLoading={isSubmitting}
+      >
+        Send Bitcoins
+      </Button>
+    </Form>
+  )
+}
+
+export type SendBitcoinsToDepositAddressFormValues = {
+  amount: string
+}
+
+type SendBitcoinsToDepositAddressFormProps = {
+  onSubmitForm: (values: SendBitcoinsToDepositAddressFormValues) => void
+} & SendBitcoinsToDepositAddressFormBaseProps
+
+export const SendBitcoinsToDepositAddressForm = withFormik<
+  SendBitcoinsToDepositAddressFormProps,
+  SendBitcoinsToDepositAddressFormValues
+>({
+  mapPropsToValues: () => ({
+    amount: "",
+  }),
+  validate: async (values, props) => {
+    const errors: FormikErrors<SendBitcoinsToDepositAddressFormValues> = {}
+
+    errors.amount = validateAmountInRange(
+      values.amount,
+      props.maxTokenAmount,
+      MINT_BITCOIN_MIN_AMOUNT,
+      undefined,
+      8,
+      8
+    )
+
+    return getErrorsObj(errors)
+  },
+  handleSubmit: (values, { props }) => {
+    props.onSubmitForm(values)
+  },
+  displayName: "SendBitcoinsToDepositAddressForm",
+  enableReinitialize: true,
+})(SendBitcoinsToDepositAddressFormBase)
diff --git a/src/components/tBTC/index.ts b/src/components/tBTC/index.ts
@@ -4,3 +4,4 @@ export * from "./Stats"
 export * from "./tBTCText"
 export * from "./BridgeActivity"
 export * from "./BridgeProcessIndicator"
+export * from "./SendBitcoinsToDepositAddressForm"
diff --git a/src/pages/tBTC/Bridge/Minting/MakeDeposit.tsx b/src/pages/tBTC/Bridge/Minting/MakeDeposit.tsx
@@ -1,7 +1,6 @@
 import {
   Badge,
   BodyMd,
-  BodySm,
   Box,
   BoxLabel,
   Button,
@@ -31,12 +30,10 @@ import {
   useRequestBitcoinAccount,
   useSendBitcoinTransaction,
 } from "../../../../hooks/ledger-live-app"
-import { Form, FormikTokenBalanceInput } from "../../../../components/Forms"
-import { InlineTokenBalance } from "../../../../components/TokenBalance"
-import { tBTCFillBlack } from "../../../../static/icons/tBTCFillBlack"
-import { FormikErrors, useFormikContext, withFormik } from "formik"
-import { getErrorsObj, validateAmountInRange } from "../../../../utils/forms"
-import { MINT_BITCOIN_MIN_AMOUNT } from "../../../../utils/tBTC"
+import {
+  SendBitcoinsToDepositAddressForm,
+  SendBitcoinsToDepositAddressFormValues,
+} from "../../../../components/tBTC"
 
 const AddressRow: FC<
   { address: string; text: string } & Pick<ViewInBlockExplorerProps, "chain">
@@ -138,6 +135,7 @@ const MakeDepositComponent: FC<{
   const { btcDepositAddress, ethAddress, btcRecoveryAddress, updateState } =
     useTbtcState()
 
+  // ↓ Ledger Live App ↓
   const { isEmbed } = useIsEmbed()
   const { requestAccount, account: ledgerBitcoinAccount } =
     useRequestBitcoinAccount()
@@ -158,6 +156,7 @@ const MakeDepositComponent: FC<{
     },
     [btcDepositAddress, sendBitcoinTransaction]
   )
+  // ↑ Ledger Live App ↑
 
   return (
     <>
@@ -246,96 +245,4 @@ const MakeDepositComponent: FC<{
   )
 }
 
-/**
- * Formik for Ledger Live App where we can send bitcoins without leaving our
- * T dashboard. It should only be visible with `isEmbed` flag.
- */
-
-type SendBitcoinsToDepositAddressFormBaseProps = {
-  maxTokenAmount: string
-}
-
-const SendBitcoinsToDepositAddressFormBase: FC<
-  SendBitcoinsToDepositAddressFormBaseProps
-> = ({ maxTokenAmount }) => {
-  const { isSubmitting } =
-    useFormikContext<SendBitcoinsToDepositAddressFormValues>()
-
-  return (
-    <Form mt={10}>
-      <FormikTokenBalanceInput
-        name="amount"
-        label={
-          // TODO: Extract to a shared component - the same layout is used in
-          // `UnmintFormBase` component.
-          <>
-            <Box as="span">Amount </Box>
-            <BodySm as="span" float="right" color="gray.500">
-              Balance:{" "}
-              <InlineTokenBalance
-                tokenAmount={maxTokenAmount}
-                withSymbol
-                tokenSymbol="BTC"
-                tokenDecimals={8}
-                precision={6}
-                higherPrecision={8}
-                withHigherPrecision
-              />
-            </BodySm>
-          </>
-        }
-        placeholder="Amount of bitcoins you want to send to deposit address."
-        max={maxTokenAmount}
-        icon={tBTCFillBlack}
-        tokenDecimals={8}
-      />
-      <Button
-        size="lg"
-        w="100%"
-        mt={"10"}
-        type="submit"
-        isLoading={isSubmitting}
-      >
-        Send Bitcoins
-      </Button>
-    </Form>
-  )
-}
-
-type SendBitcoinsToDepositAddressFormValues = {
-  amount: string
-}
-
-type SendBitcoinsToDepositAddressFormProps = {
-  onSubmitForm: (values: SendBitcoinsToDepositAddressFormValues) => void
-} & SendBitcoinsToDepositAddressFormBaseProps
-
-const SendBitcoinsToDepositAddressForm = withFormik<
-  SendBitcoinsToDepositAddressFormProps,
-  SendBitcoinsToDepositAddressFormValues
->({
-  mapPropsToValues: () => ({
-    amount: "",
-  }),
-  validate: async (values, props) => {
-    const errors: FormikErrors<SendBitcoinsToDepositAddressFormValues> = {}
-
-    errors.amount = validateAmountInRange(
-      values.amount,
-      props.maxTokenAmount,
-      MINT_BITCOIN_MIN_AMOUNT,
-      undefined,
-      8,
-      8
-    )
-
-    return getErrorsObj(errors)
-  },
-  handleSubmit: (values, { props }) => {
-    props.onSubmitForm(values)
-  },
-  displayName: "SendBitcoinsToDepositAddressForm",
-  enableReinitialize: true,
-})(SendBitcoinsToDepositAddressFormBase)
-
 export const MakeDeposit = withOnlyConnectedWallet(MakeDepositComponent)