Initial implementation of stake form

dapp/package.json

@@ -20,6 +20,7 @@
     "@emotion/styled": "^11.11.0",
     "@ledgerhq/wallet-api-client": "^1.2.1",
     "@ledgerhq/wallet-api-client-react": "^1.1.2",
+    "formik": "^2.4.5",
     "framer-motion": "^10.16.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

dapp/src/components/Modals/ActionForm/index.tsx

@@ -0,0 +1,45 @@
+import React from "react"
+import {
+  ModalBody,
+  Tabs,
+  TabList,
+  Tab,
+  TabPanels,
+  TabPanel,
+} from "@chakra-ui/react"
+import { ModalStep } from "../../../contexts"
+import StakeForm from "../Staking/StakeForm"
+
+const TABS = ["stake", "unstake"] as const
+
+type FormType = (typeof TABS)[number]
+
+type ActionFormProps = { defaultForm: FormType } & ModalStep
+
+function ActionForm({ defaultForm, goNext }: ActionFormProps) {
+  return (
+    <ModalBody>
+      <Tabs
+        w="100%"
+        variant="underline"
+        defaultIndex={TABS.indexOf(defaultForm)}
+      >
+        <TabList>
+          {TABS.map((tab) => (
+            <Tab key={tab} w="50%">
+              {tab}
+            </Tab>
+          ))}
+        </TabList>
+        <TabPanels>
+          <TabPanel>
+            <StakeForm goNext={goNext} />
+          </TabPanel>
+          <TabPanel>{/* TODO: Add form for unstake */}</TabPanel>
+        </TabPanels>
+      </Tabs>
+    </ModalBody>
+  )
+}
+
+export default ActionForm

dapp/src/components/Modals/Staking/StakeForm.tsx

@@ -1,15 +1,54 @@
-import React from "react"
-import { Button, ModalBody } from "@chakra-ui/react"
+import React, { useCallback } from "react"
+import { FormikErrors, withFormik } from "formik"
 import { ModalStep } from "../../../contexts"
-import { TextMd } from "../../shared/Typography"
+import FormBase, { FormBaseProps, FormValues } from "../../shared/FormBase"
+import { useTransactionContext, useWalletContext } from "../../../hooks"
+import { getErrorsObj, validateTokenAmount } from "../../../utils"
+
+const CUSTOM_DATA = {
+  buttonText: "Stake",
+  btcAmountText: "Amount to be staked",
+  estimatedAmountText: "Approximately staked tokens",
+}
+
+const StakeFormik = withFormik<
+  { onSubmitForm: (values: FormValues) => void } & FormBaseProps,
+  FormValues
+>({
+  mapPropsToValues: () => ({
+    amount: "",
+  }),
+  validate: async ({ amount }, { tokenBalance }) => {
+    const errors: FormikErrors<FormValues> = {}
+
+    errors.amount = validateTokenAmount(amount, tokenBalance)
+
+    return getErrorsObj(errors)
+  },
+  handleSubmit: (values, { props }) => {
+    props.onSubmitForm(values)
+  },
+})(FormBase)
+
+function StakeForm({ goNext }: ModalStep) {
+  const { btcAccount } = useWalletContext()
+  const { setAmount } = useTransactionContext()
+
+  const handleSubmitForm = useCallback(
+    (values: FormValues) => {
+      setAmount(values.amount)
+      goNext()
+    },
+    [goNext, setAmount],
+  )
 
-export default function StakeModal({ goNext }: ModalStep) {
   return (
-    <ModalBody>
-      <TextMd>Stake modal</TextMd>
-      <Button width="100%" onClick={goNext}>
-        Stake
-      </Button>
-    </ModalBody>
+    <StakeFormik
+      customData={CUSTOM_DATA}
+      tokenBalance={btcAccount?.balance.toString() ?? "0"}
+      onSubmitForm={handleSubmitForm}
+    />
   )
 }
+
+export default StakeForm

dapp/src/components/Modals/Staking/index.tsx

@@ -1,17 +1,17 @@
 import React from "react"
 import { useModalFlowContext } from "../../../hooks"
-import StakeForm from "./StakeForm"
 import Overview from "./Overview"
 import ModalBase from "../../shared/ModalBase"
+import ActionForm from "../ActionForm"
 
 function StakingSteps() {
   const { activeStep, goNext } = useModalFlowContext()
 
   switch (activeStep) {
     case 1:
-      return <Overview goNext={goNext} />
+      return <ActionForm defaultForm="stake" goNext={goNext} />
     case 2:
-      return <StakeForm goNext={goNext} />
+      return <Overview goNext={goNext} />
     default:
       return null
   }

dapp/src/components/shared/Form/Form.tsx

@@ -0,0 +1,4 @@
+import { chakra } from "@chakra-ui/react"
+import { Form as FormikForm } from "formik"
+
+export const Form = chakra(FormikForm)

dapp/src/components/shared/Form/FormTokenBalanceInput.tsx

@@ -0,0 +1,24 @@
+import React from "react"
+import { useField } from "formik"
+import TokenBalanceInput, { TokenBalanceInputProps } from "../TokenBalanceInput"
+
+export type FormTokenBalanceInputProps = {
+  name: string
+} & Omit<TokenBalanceInputProps, "setAmount">
+export function FormTokenBalanceInput({
+  name,
+  ...restProps
+}: FormTokenBalanceInputProps) {
+  const [field, meta, helpers] = useField(name)
+
+  return (
+    <TokenBalanceInput
+      {...restProps}
+      {...field}
+      amount={meta.value}
+      setAmount={helpers.setValue}
+      hasError={Boolean(meta.touched && meta.error)}
+      errorMsgText={meta.error}
+    />
+  )
+}

dapp/src/components/shared/Form/index.tsx

@@ -0,0 +1,2 @@
+export * from "./Form"
+export * from "./FormTokenBalanceInput"

dapp/src/components/shared/FormBase/TransactionDetails.tsx

@@ -0,0 +1,99 @@
+import React from "react"
+import { Box, Flex, VStack } from "@chakra-ui/react"
+import { useField } from "formik"
+import { CurrencyBalanceWithConversion } from "../CurrencyBalanceWithConversion"
+import { TextMd } from "../Typography"
+
+// TODO: Use data from the SDK
+function getTransactionDetails(value: string):
+  | {
+      btcAmount: string
+      protocolFee: string
+      stakedAmount: string
+    }
+  | undefined {
+  const btcAmount = value ?? 0n
+  const btcAmountInBI = BigInt(btcAmount)
+
+  if (btcAmountInBI <= 0n) return undefined
+
+  const protocolFee = btcAmountInBI / 10000n
+  const stakedAmount = btcAmountInBI - protocolFee
+
+  return {
+    btcAmount,
+    protocolFee: protocolFee.toString(),
+    stakedAmount: stakedAmount.toString(),
+  }
+}
+
+function TransactionDetailsItem({
+  text,
+  btcAmount,
+  usdAmount,
+}: {
+  text: string
+  btcAmount?: string | number
+  usdAmount: string
+}) {
+  return (
+    <Flex justifyContent="space-between" w="100%">
+      <TextMd fontWeight="semibold" color="grey.700">
+        {text}
+      </TextMd>
+      <Box textAlign="end">
+        <CurrencyBalanceWithConversion
+          from={{
+            currencyType: "bitcoin",
+            amount: btcAmount,
+          }}
+          to={{
+            currencyType: "usd",
+            amount: usdAmount,
+            shouldBeFormatted: false,
+            size: "sm",
+            fontWeight: "medium",
+            color: "grey.500",
+          }}
+        />
+      </Box>
+    </Flex>
+  )
+}
+
+function TransactionDetails({
+  fieldName,
+  btcAmountText,
+  estimatedAmountText,
+}: {
+  fieldName: string
+  btcAmountText: string
+  estimatedAmountText: string
+}) {
+  const [, { value }] = useField(fieldName)
+
+  const details = getTransactionDetails(value)
+
+  return (
+    <VStack gap={3} mt={10}>
+      <TransactionDetailsItem
+        text={btcAmountText}
+        btcAmount={details?.btcAmount}
+        usdAmount="45.725,91"
+      />
+      <TransactionDetailsItem
+        // TODO: Use protocol fee from the SDK
+        text="Protocol fee (0.01%)"
+        btcAmount={details?.protocolFee}
+        usdAmount="0.024,91"
+      />
+      <TransactionDetailsItem
+        text={estimatedAmountText}
+        btcAmount={details?.stakedAmount}
+        usdAmount="44.762,21"
+      />
+    </VStack>
+  )
+}
+
+export default TransactionDetails

dapp/src/components/shared/FormBase/index.tsx

@@ -0,0 +1,55 @@
+import React from "react"
+import { Button } from "@chakra-ui/react"
+import { FormikProps } from "formik"
+import { Form, FormTokenBalanceInput } from "../Form"
+import { CurrencyType } from "../../../types"
+import TransactionDetails from "./TransactionDetails"
+
+export type FormValues = {
+  amount: string
+}
+
+export type FormBaseProps = {
+  customData: {
+    buttonText: string
+    btcAmountText: string
+    estimatedAmountText: string
+  }
+  tokenBalance: string
+  tokenBalanceInputPlaceholder?: string
+  currencyType?: CurrencyType
+  fieldName?: string
+  children?: React.ReactNode
+}
+
+function FormBase({
+  customData,
+  tokenBalance,
+  tokenBalanceInputPlaceholder = "BTC",
+  currencyType = "bitcoin",
+  fieldName = "amount",
+  children,
+  ...formikProps
+}: FormBaseProps & FormikProps<FormValues>) {
+  return (
+    <Form onSubmit={formikProps.handleSubmit}>
+      <FormTokenBalanceInput
+        name={fieldName}
+        tokenBalance={tokenBalance}
+        placeholder={tokenBalanceInputPlaceholder}
+        currencyType={currencyType}
+      />
+      <TransactionDetails
+        fieldName={fieldName}
+        btcAmountText={customData.btcAmountText}
+        estimatedAmountText={customData.estimatedAmountText}
+      />
+      {children}
+      <Button type="submit" size="lg" width="100%" mt={4}>
+        {customData.buttonText}
+      </Button>
+    </Form>
+  )
+}
+
+export default FormBase

dapp/src/components/shared/ModalBase/index.tsx

@@ -5,7 +5,11 @@ import {
   ModalContent,
   ModalOverlay,
 } from "@chakra-ui/react"
-import { ModalFlowContext, ModalFlowContextValue } from "../../../contexts"
+import {
+  ModalFlowContext,
+  ModalFlowContextValue,
+  TransactionContextProvider,
+} from "../../../contexts"
 import { useSidebar } from "../../../hooks"
 import SupportWrapper from "../../Modals/Support"
 
@@ -66,14 +70,16 @@ export default function ModalBase({
   )
 
   return (
-    <ModalFlowContext.Provider value={contextValue}>
-      <Modal size="lg" isOpen={isOpen} onClose={handleClose}>
-        <ModalOverlay mt="header_height" />
-        <ModalContent mt="modal_shift">
-          <ModalCloseButton />
-          <SupportWrapper>{children}</SupportWrapper>
-        </ModalContent>
-      </Modal>
-    </ModalFlowContext.Provider>
+    <TransactionContextProvider>
+      <ModalFlowContext.Provider value={contextValue}>
+        <Modal size="lg" isOpen={isOpen} onClose={handleClose}>
+          <ModalOverlay mt="header_height" />
+          <ModalContent mt="modal_shift">
+            <ModalCloseButton />
+            <SupportWrapper>{children}</SupportWrapper>
+          </ModalContent>
+        </Modal>
+      </ModalFlowContext.Provider>
+    </TransactionContextProvider>
   )
 }