Merge branch 'main' into set-sepolia-maintainer

dapp/src/assets/icons/index.ts

@@ -5,7 +5,6 @@ export * from "./ArrowRight"
 export * from "./AcreLogo"
 export * from "./stBTC"
 export * from "./BTC"
-export * from "./ShieldPlus"
 export * from "./Pending"
 export * from "./Syncing"
 export * from "./Complete"

dapp/src/components/Layout.tsx

@@ -1,10 +1,10 @@
-import React from "react"
+import React, { useState } from "react"
 import { AnimatePresence, motion, Variants } from "framer-motion"
-import { useState } from "react"
 import { useLocation, useOutlet } from "react-router-dom"
 import DocsDrawer from "./DocsDrawer"
 import Header from "./Header"
 import Sidebar from "./Sidebar"
+import ModalRoot from "./ModalRoot"
 
 const wrapperVariants: Variants = {
   in: { opacity: 0, y: 48 },
@@ -39,6 +39,7 @@ function Layout() {
       </AnimatePresence>
       <Sidebar />
       <DocsDrawer />
+      <ModalRoot />
     </>
   )
 }

dapp/src/components/ModalRoot/index.tsx

@@ -0,0 +1,19 @@
+import React, { ElementType } from "react"
+import { useModal } from "#/hooks"
+import { ModalType } from "#/types"
+import TransactionModal from "../TransactionModal"
+
+const MODALS: Record<ModalType, ElementType> = {
+  STAKE: TransactionModal,
+  UNSTAKE: TransactionModal,
+} as const
+
+export default function ModalRoot() {
+  const { modalType, modalProps, closeModal } = useModal()
+
+  if (!modalType) {
+    return null
+  }
+  const SpecificModal = MODALS[modalType]
+  return <SpecificModal closeModal={closeModal} {...modalProps} />
+}

dapp/src/components/ModalRoot/withBaseModal.tsx

@@ -0,0 +1,29 @@
+import React, { ComponentType } from "react"
+import { Modal, ModalContent, ModalOverlay } from "@chakra-ui/react"
+import { BaseModalProps } from "#/types"
+
+export const MODAL_BASE_SIZE = "lg"
+
+function withBaseModal<T extends BaseModalProps>(
+  WrappedModalContent: ComponentType<T>,
+) {
+  return function ModalBase(props: T) {
+    const { closeModal } = props
+    return (
+      <Modal
+        isOpen
+        onClose={closeModal}
+        scrollBehavior="inside"
+        closeOnOverlayClick={false}
+        size={MODAL_BASE_SIZE}
+      >
+        <ModalOverlay mt="header_height" />
+        <ModalContent mt="modal_shift">
+          <WrappedModalContent {...props} />
+        </ModalContent>
+      </Modal>
+    )
+  }
+}
+
+export default withBaseModal

dapp/src/components/Sidebar.tsx

@@ -0,0 +1,81 @@
+import React from "react"
+import {
+  Box,
+  Card,
+  CardBody,
+  Flex,
+  useMultiStyleConfig,
+  Image,
+} from "@chakra-ui/react"
+import { useSidebar, useDocsDrawer } from "#/hooks"
+import rewardsBoostArrow from "#/assets/images/rewards-boost-arrow.svg"
+import mysteryBoxIcon from "#/assets/images/mystery-box.svg"
+import seasonKeyIcon from "#/assets/images/season-key.svg"
+import ButtonLink from "./shared/ButtonLink"
+import { TextSm } from "./shared/Typography"
+
+const BUTTONS = [
+  { label: "Docs", variant: "solid" },
+  { label: "FAQ", colorScheme: "gold" },
+  { label: "Token Contract", colorScheme: "gold" },
+  { label: "Bridge Contract", colorScheme: "gold" },
+]
+
+const BENEFITS = [
+  { label: "1x Rewards Boost", iconSrc: rewardsBoostArrow },
+  { label: "1x Mystery Box", iconSrc: mysteryBoxIcon },
+  { label: "1x Season Key", iconSrc: seasonKeyIcon },
+]
+
+export default function Sidebar() {
+  const { isOpen } = useSidebar()
+  const { onOpen: openDocsDrawer } = useDocsDrawer()
+  const styles = useMultiStyleConfig("Sidebar")
+
+  return (
+    <Box
+      as="aside"
+      mt="header_height"
+      w={isOpen ? "sidebar_width" : "0"}
+      __css={styles.sidebarContainer}
+    >
+      <Box __css={styles.sidebar}>
+        <TextSm fontWeight="bold">Rewards you’ll unlock</TextSm>
+
+        <Flex mt={2} mb={7} flexDir="column" gap={2}>
+          {BENEFITS.map(({ label, iconSrc }) => (
+            <Card
+              key={label}
+              bg="gold.300"
+              borderWidth="1px"
+              borderColor="white"
+            >
+              <CardBody
+                display="flex"
+                flexDirection="row"
+                justifyContent="space-between"
+                alignItems="center"
+                py={0}
+                px={4}
+              >
+                <TextSm fontWeight="semibold">{label}</TextSm>
+                <Image src={iconSrc} boxSize="3.75rem" />
+              </CardBody>
+            </Card>
+          ))}
+        </Flex>
+
+        {BUTTONS.map(({ label, variant, colorScheme }) => (
+          <ButtonLink
+            key={label}
+            onClick={openDocsDrawer}
+            variant={variant}
+            colorScheme={colorScheme}
+          >
+            {label}
+          </ButtonLink>
+        ))}
+      </Box>
+    </Box>
+  )
+}

dapp/src/components/TransactionModal/ActionFormModal.tsx

@@ -1,35 +1,39 @@
-import React, { useCallback, useState } from "react"
-import {
-  ModalBody,
-  Tabs,
-  TabList,
-  Tab,
-  TabPanels,
-  TabPanel,
-  ModalCloseButton,
-} from "@chakra-ui/react"
-import {
-  useModalFlowContext,
-  useStakeFlowContext,
-  useTransactionContext,
-  useWalletContext,
-} from "#/hooks"
-import { ACTION_FLOW_TYPES, ActionFlowType } from "#/types"
+import React, { ReactNode, useCallback, useState } from "react"
+import { Box, ModalBody, ModalCloseButton, ModalHeader } from "@chakra-ui/react"
+import { useAppDispatch, useStakeFlowContext, useWalletContext } from "#/hooks"
+import { ACTION_FLOW_TYPES, ActionFlowType, BaseFormProps } from "#/types"
 import { TokenAmountFormValues } from "#/components/shared/TokenAmountForm/TokenAmountFormBase"
 import { logPromiseFailure } from "#/utils"
+import { setTokenAmount } from "#/store/action-flow"
 import StakeFormModal from "./ActiveStakingStep/StakeFormModal"
 import UnstakeFormModal from "./ActiveUnstakingStep/UnstakeFormModal"
 
-const TABS = Object.values(ACTION_FLOW_TYPES)
+const FORM_DATA: Record<
+  ActionFlowType,
+  {
+    heading: string
+    renderComponent: (props: BaseFormProps<TokenAmountFormValues>) => ReactNode
+  }
+> = {
+  [ACTION_FLOW_TYPES.STAKE]: {
+    heading: "Deposit",
+    renderComponent: StakeFormModal,
+  },
+  [ACTION_FLOW_TYPES.UNSTAKE]: {
+    heading: "Withdraw",
+    renderComponent: UnstakeFormModal,
+  },
+}
 
-function ActionFormModal({ defaultType }: { defaultType: ActionFlowType }) {
+function ActionFormModal({ type }: { type: ActionFlowType }) {
   const { btcAccount, ethAccount } = useWalletContext()
-  const { type, setType } = useModalFlowContext()
-  const { setTokenAmount } = useTransactionContext()
   const { initStake } = useStakeFlowContext()
+  const dispatch = useAppDispatch()
 
   const [isLoading, setIsLoading] = useState(false)
 
+  const { heading, renderComponent } = FORM_DATA[type]
+
   const handleInitStake = useCallback(async () => {
     const btcAddress = btcAccount?.address
     const ethAddress = ethAccount?.address
@@ -48,14 +52,14 @@ function ActionFormModal({ defaultType }: { defaultType: ActionFlowType }) {
         // TODO: Init unstake flow
         if (type === ACTION_FLOW_TYPES.STAKE) await handleInitStake()
 
-        setTokenAmount({ amount: values.amount, currency: "bitcoin" })
+        dispatch(setTokenAmount({ amount: values.amount, currency: "bitcoin" }))
       } catch (error) {
         console.error(error)
       } finally {
         setIsLoading(false)
       }
     },
-    [handleInitStake, setTokenAmount, type],
+    [dispatch, handleInitStake, type],
   )
 
   const handleSubmitFormWrapper = useCallback(
@@ -67,34 +71,13 @@ function ActionFormModal({ defaultType }: { defaultType: ActionFlowType }) {
   return (
     <>
       {!isLoading && <ModalCloseButton />}
+      <ModalHeader>{heading}</ModalHeader>
       <ModalBody>
-        <Tabs
-          w="100%"
-          variant="underline"
-          defaultIndex={TABS.indexOf(defaultType)}
-        >
-          <TabList pb={6}>
-            {TABS.map((actionFlowType) => (
-              <Tab
-                key={actionFlowType}
-                w="50%"
-                pb={4}
-                onClick={() => setType(actionFlowType)}
-                isDisabled={actionFlowType !== type && isLoading}
-              >
-                {actionFlowType}
-              </Tab>
-            ))}
-          </TabList>
-          <TabPanels>
-            <TabPanel>
-              <StakeFormModal onSubmitForm={handleSubmitFormWrapper} />
-            </TabPanel>
-            <TabPanel>
-              <UnstakeFormModal onSubmitForm={handleSubmitFormWrapper} />
-            </TabPanel>
-          </TabPanels>
-        </Tabs>
+        <Box w="100%">
+          {renderComponent({
+            onSubmitForm: handleSubmitFormWrapper,
+          })}
+        </Box>
       </ModalBody>
     </>
   )