Merge remote-tracking branch 'origin/main' into eslint-ts-recommended

dapp/src/components/Modals/Staking/Overview/StakingSteps.tsx

@@ -0,0 +1,47 @@
+import React from "react"
+import { StepNumber } from "@chakra-ui/react"
+import { TextLg, TextMd } from "../../../shared/Typography"
+import StepperBase from "../../../shared/StepperBase"
+
+function Title({ children }: { children: React.ReactNode }) {
+  return <TextLg fontWeight="bold">{children}</TextLg>
+}
+
+function Description({ children }: { children: React.ReactNode }) {
+  return <TextMd color="grey.500">{children}</TextMd>
+}
+
+const STEPS = [
+  {
+    id: "sign-message",
+    title: <Title>Sign message</Title>,
+    description: (
+      <Description>
+        You will sign a gas-free Ethereum message to indicate the address where
+        you&apos;d like to get your stBTC liquid staking token.
+      </Description>
+    ),
+  },
+  {
+    id: "deposit-btc",
+    title: <Title>Deposit BTC</Title>,
+    description: (
+      <Description>
+        You will make a Bitcoin transaction to deposit and stake your BTC.
+      </Description>
+    ),
+  },
+]
+
+export default function StakingSteps() {
+  return (
+    <StepperBase
+      index={-1}
+      height={64}
+      size="sm"
+      orientation="vertical"
+      complete={<StepNumber />}
+      steps={STEPS}
+    />
+  )
+}

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

@@ -0,0 +1,20 @@
+import React from "react"
+import { Button, ModalBody, ModalFooter, ModalHeader } from "@chakra-ui/react"
+import StakingSteps from "./StakingSteps"
+import { ModalStep } from "../../../../contexts"
+
+export default function Overview({ goNext }: ModalStep) {
+  return (
+    <>
+      <ModalHeader>Staking steps overview</ModalHeader>
+      <ModalBody textAlign="start" py={6} mx={3}>
+        <StakingSteps />
+      </ModalBody>
+      <ModalFooter>
+        <Button size="lg" width="100%" onClick={goNext}>
+          Continue
+        </Button>
+      </ModalFooter>
+    </>
+  )
+}

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

@@ -9,9 +9,9 @@ function StakingSteps() {
 
   switch (activeStep) {
     case 1:
-      return <Overview goNext={goNext} />
-    case 2:
       return <StakeForm goNext={goNext} />
+    case 2:
+      return <Overview goNext={goNext} />
     default:
       return null
   }