Initial implementation of stake form

dapp/package.json

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

dapp/src/components/Header/ConnectWallet.tsx

@@ -46,7 +46,7 @@ export default function ConnectWallet() {
       <HStack display={{ base: "none", md: "flex" }}>
         <TextMd color="grey.500">Balance</TextMd>
         <CurrencyBalance
-          currencyType="bitcoin"
+          currency="bitcoin"
           amount={btcAccount?.balance.toString()}
         />
       </HStack>

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

@@ -0,0 +1,41 @@
+import React from "react"
+import {
+  ModalBody,
+  Tabs,
+  TabList,
+  Tab,
+  TabPanels,
+  TabPanel,
+} from "@chakra-ui/react"
+import StakeForm from "../Staking/StakeForm"
+import { useModalFlowContext } from "../../../hooks"
+
+const TABS = ["stake", "unstake"] as const
+
+type Action = (typeof TABS)[number]
+
+function ActionForm({ action }: { action: Action }) {
+  const { goNext } = useModalFlowContext()
+
+  return (
+    <ModalBody>
+      <Tabs w="100%" variant="underline" defaultIndex={TABS.indexOf(action)}>
+        <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/Details.tsx

@@ -0,0 +1,55 @@
+import React from "react"
+import { List } from "@chakra-ui/react"
+import { useField } from "formik"
+import { useTransactionDetails } from "../../../../hooks"
+import TransactionDetailsAmountItem from "../../../shared/TransactionDetails/AmountItem"
+import { Currency } from "../../../../types"
+
+function Details({
+  fieldName,
+  currency,
+}: {
+  fieldName: string
+  currency: Currency
+}) {
+  const [, { value }] = useField<bigint | undefined>(fieldName)
+
+  const details = useTransactionDetails(value ?? 0n)
+
+  return (
+    <List spacing={3} mt={10}>
+      <TransactionDetailsAmountItem
+        label="Amount to be staked"
+        from={{
+          currency,
+          amount: details?.btcAmount,
+        }}
+        to={{
+          currency: "usd",
+        }}
+      />
+      <TransactionDetailsAmountItem
+        label="Protocol fee (0.01%)"
+        from={{
+          currency,
+          amount: details?.protocolFee,
+        }}
+        to={{
+          currency: "usd",
+        }}
+      />
+      <TransactionDetailsAmountItem
+        label="Approximately staked tokens"
+        from={{
+          currency,
+          amount: details?.estimatedAmount,
+        }}
+        to={{
+          currency: "usd",
+        }}
+      />
+    </List>
+  )
+}
+
+export default Details

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

@@ -0,0 +1,47 @@
+import React, { useCallback } from "react"
+import { Button } from "@chakra-ui/react"
+import { BITCOIN, BITCOIN_MIN_AMOUNT } from "../../../../constants"
+import { ModalStep } from "../../../../contexts"
+import { useWalletContext, useTransactionContext } from "../../../../hooks"
+import TokenAmountForm from "../../../shared/TokenAmountForm"
+import { TokenAmountFormValues } from "../../../shared/TokenAmountForm/TokenAmountFormBase"
+import Details from "./Details"
+
+const FORM_FIELD_NAME = "amount"
+const FORM_ID = "staking-form"
+
+function StakeForm({ goNext }: ModalStep) {
+  const { btcAccount } = useWalletContext()
+  const { seTokenAmount } = useTransactionContext()
+
+  const handleSubmitForm = useCallback(
+    (values: TokenAmountFormValues) => {
+      if (!values.amount) return
+
+      seTokenAmount({ amount: values.amount, currency: BITCOIN })
+      goNext()
+    },
+    [goNext, seTokenAmount],
+  )
+
+  return (
+    <>
+      <TokenAmountForm
+        formId={FORM_ID}
+        fieldName={FORM_FIELD_NAME}
+        tokenBalanceInputPlaceholder="BTC"
+        currency={BITCOIN}
+        tokenBalance={btcAccount?.balance.toString() ?? "0"}
+        minTokenAmount={BITCOIN_MIN_AMOUNT}
+        onSubmitForm={handleSubmitForm}
+      >
+        <Details currency={BITCOIN} fieldName={FORM_FIELD_NAME} />
+      </TokenAmountForm>
+      <Button type="submit" form={FORM_ID} size="lg" width="100%" mt={4}>
+        Stake
+      </Button>
+    </>
+  )
+}
+
+export default StakeForm

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

@@ -1,8 +1,8 @@
 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"
 import SignMessage from "./SignMessage"
 import DepositBTC from "./DepositBTC"
 
@@ -11,7 +11,7 @@ function ActiveStakingStep() {
 
   switch (activeStep) {
     case 1:
-      return <StakeForm />
+      return <ActionForm action="stake" />
     case 2:
       return <Overview />
     case 3:

dapp/src/components/Modals/Support/MissingAccount.tsx

@@ -10,7 +10,7 @@ import {
 import { CurrencyType, RequestAccountParams } from "../../../types"
 import { TextMd } from "../../shared/Typography"
 import Alert from "../../shared/Alert"
-import { CURRENCIES_BY_TYPE } from "../../../constants"
+import { getCurrencyByType } from "../../../utils"
 
 type MissingAccountProps = {
   currencyType: CurrencyType
@@ -23,7 +23,7 @@ export default function MissingAccount({
   icon,
   requestAccount,
 }: MissingAccountProps) {
-  const currency = CURRENCIES_BY_TYPE[currencyType]
+  const currency = getCurrencyByType(currencyType)
 
   return (
     <>

dapp/src/components/Overview/PositionDetails.tsx

@@ -30,14 +30,12 @@ export default function PositionDetails(props: CardProps) {
         </HStack>
         <CurrencyBalanceWithConversion
           from={{
-            currencyType: "bitcoin",
+            currency: "bitcoin",
             amount: "2398567898",
             variant: "greater-balance",
           }}
           to={{
-            currencyType: "usd",
-            amount: 419288.98,
-            shouldBeFormatted: false,
+            currency: "usd",
             size: "lg",
           }}
         />

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

@@ -1,11 +1,15 @@
 import React, { useMemo } from "react"
 import { Box, useMultiStyleConfig, TextProps } from "@chakra-ui/react"
-import { formatTokenAmount, numberToLocaleString } from "../../../utils"
-import { CurrencyType } from "../../../types"
-import { CURRENCIES_BY_TYPE } from "../../../constants"
+import {
+  formatTokenAmount,
+  getCurrencyByType,
+  isCurrencyType,
+  numberToLocaleString,
+} from "../../../utils"
+import { Currency, CurrencyType } from "../../../types"
 
 export type CurrencyBalanceProps = {
-  currencyType: CurrencyType
+  currency: Currency | CurrencyType
   amount?: string | number
   shouldBeFormatted?: boolean
   desiredDecimals?: number
@@ -14,7 +18,7 @@ export type CurrencyBalanceProps = {
 } & TextProps
 
 export function CurrencyBalance({
-  currencyType,
+  currency,
   amount,
   shouldBeFormatted = true,
   desiredDecimals = 2,
@@ -24,23 +28,25 @@ export function CurrencyBalance({
 }: CurrencyBalanceProps) {
   const styles = useMultiStyleConfig("CurrencyBalance", { size, variant })
 
-  const currency = CURRENCIES_BY_TYPE[currencyType]
+  const { symbol, decimals } = isCurrencyType(currency)
+    ? getCurrencyByType(currency)
+    : currency
 
   const balance = useMemo(() => {
     const value = amount ?? 0
     if (shouldBeFormatted)
-      return formatTokenAmount(value, currency.decimals, desiredDecimals)
+      return formatTokenAmount(value, decimals, desiredDecimals)
 
     return numberToLocaleString(value, desiredDecimals)
-  }, [amount, currency, desiredDecimals, shouldBeFormatted])
+  }, [amount, decimals, desiredDecimals, shouldBeFormatted])
 
   return (
     <Box>
       <Box as="span" __css={styles.balance} {...textProps}>
         {balance}
       </Box>
       <Box as="span" __css={styles.symbol} {...textProps}>
-        {currency.symbol}
+        {symbol}
       </Box>
     </Box>
   )

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

@@ -1,17 +1,30 @@
-import React from "react"
+import React, { useMemo } from "react"
 import { CurrencyBalance, CurrencyBalanceProps } from "../CurrencyBalance"
 
+const MOCK_CONVERSION_AMOUNT = 100
+
 export function CurrencyBalanceWithConversion({
   from,
   to,
 }: {
   from: CurrencyBalanceProps
   to: CurrencyBalanceProps
 }) {
+  // TODO: Make the correct conversion
+  const conversionAmount = useMemo(() => {
+    if (!from.amount || BigInt(from.amount) < 0n) return undefined
+
+    return MOCK_CONVERSION_AMOUNT
+  }, [from.amount])
+
   return (
     <>
       <CurrencyBalance {...from} />
-      <CurrencyBalance {...to} />
+      <CurrencyBalance
+        amount={conversionAmount}
+        shouldBeFormatted={false}
+        {...to}
+      />
     </>
   )
 }

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/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>
   )
 }