diff --git a/dapp/src/assets/icons/ShieldPlus.tsx b/dapp/src/assets/icons/ShieldPlus.tsx
deleted file mode 100644
index b3fbea2bc..000000000
--- a/dapp/src/assets/icons/ShieldPlus.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from "react"
-import { createIcon } from "@chakra-ui/react"
-
-export const ShieldPlusIcon = createIcon({
- displayName: "ShieldPlusIcon",
- viewBox: "0 0 20 20",
- path: (
-
- ),
-})
diff --git a/dapp/src/assets/icons/index.ts b/dapp/src/assets/icons/index.ts
index 62d802cf8..e2832df45 100644
--- a/dapp/src/assets/icons/index.ts
+++ b/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"
diff --git a/dapp/src/assets/images/rewards-boost-arrow.svg b/dapp/src/assets/images/rewards-boost-arrow.svg
new file mode 100644
index 000000000..b8cb985cf
--- /dev/null
+++ b/dapp/src/assets/images/rewards-boost-arrow.svg
@@ -0,0 +1,68 @@
+
diff --git a/dapp/src/assets/images/right-sidebar-bg.png b/dapp/src/assets/images/right-sidebar-bg.png
deleted file mode 100644
index 540134e58..000000000
Binary files a/dapp/src/assets/images/right-sidebar-bg.png and /dev/null differ
diff --git a/dapp/src/components/Sidebar.tsx b/dapp/src/components/Sidebar.tsx
new file mode 100644
index 000000000..3dfc36915
--- /dev/null
+++ b/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 (
+
+
+ Rewards you’ll unlock
+
+
+ {BENEFITS.map(({ label, iconSrc }) => (
+
+
+ {label}
+
+
+
+ ))}
+
+
+ {BUTTONS.map(({ label, variant, colorScheme }) => (
+
+ {label}
+
+ ))}
+
+
+ )
+}
diff --git a/dapp/src/components/Sidebar/index.tsx b/dapp/src/components/Sidebar/index.tsx
deleted file mode 100644
index 0b485b142..000000000
--- a/dapp/src/components/Sidebar/index.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import React from "react"
-import {
- Box,
- Icon,
- useMultiStyleConfig,
- Image,
- Card,
- CardBody,
- CardHeader,
- CardFooter,
- HStack,
- Link,
-} from "@chakra-ui/react"
-import RightSidebar from "#/assets/images/right-sidebar-bg.png"
-import { useSidebar, useDocsDrawer } from "#/hooks"
-import { ShieldPlusIcon } from "#/assets/icons"
-import { TextMd, TextSm } from "../shared/Typography"
-import ButtonLink from "../shared/ButtonLink"
-
-const readMoreEarnings = "https://#"
-
-const BUTTONS = [
- { label: "FAQ" },
- { label: "Token Contract" },
- { label: "Bridge Contract" },
-]
-
-export default function Sidebar() {
- const { isOpen } = useSidebar()
- const { onOpen: openDocsDrawer } = useDocsDrawer()
- const styles = useMultiStyleConfig("Sidebar")
-
- return (
-
-
-
- Docs
-
-
-
-
-
-
-
-
- Maximize your earnings by using tBTC to deposit and redeem BTC in
- DeFi!
-
-
-
-
-
- Read more
-
-
-
-
-
-
- How we calculate fees
-
-
-
-
-
- Fees is software empowered by the Threshold DAO.
-
-
-
-
- {BUTTONS.map(({ label }) => (
-
- {label}
-
- ))}
-
-
- )
-}
diff --git a/dapp/src/components/TransactionModal/ActionFormModal.tsx b/dapp/src/components/TransactionModal/ActionFormModal.tsx
index 0f7c824c9..cc0ac9b67 100644
--- a/dapp/src/components/TransactionModal/ActionFormModal.tsx
+++ b/dapp/src/components/TransactionModal/ActionFormModal.tsx
@@ -1,35 +1,42 @@
-import React, { useCallback, useState } from "react"
+import React, { ReactNode, useCallback, useState } from "react"
+import { Box, ModalBody, ModalCloseButton, ModalHeader } from "@chakra-ui/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 { ACTION_FLOW_TYPES, ActionFlowType, BaseFormProps } from "#/types"
import { TokenAmountFormValues } from "#/components/shared/TokenAmountForm/TokenAmountFormBase"
import { logPromiseFailure } from "#/utils"
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) => ReactNode
+ }
+> = {
+ stake: {
+ heading: "Deposit",
+ renderComponent: StakeFormModal,
+ },
+ 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 [isLoading, setIsLoading] = useState(false)
+ const { heading, renderComponent } = FORM_DATA[type]
+
const handleInitStake = useCallback(async () => {
const btcAddress = btcAccount?.address
const ethAddress = ethAccount?.address
@@ -67,34 +74,13 @@ function ActionFormModal({ defaultType }: { defaultType: ActionFlowType }) {
return (
<>
{!isLoading && }
+ {heading}
-
-
- {TABS.map((actionFlowType) => (
- setType(actionFlowType)}
- isDisabled={actionFlowType !== type && isLoading}
- >
- {actionFlowType}
-
- ))}
-
-
-
-
-
-
-
-
-
-
+
+ {renderComponent({
+ onSubmitForm: handleSubmitFormWrapper,
+ })}
+
)
diff --git a/dapp/src/components/TransactionModal/ActiveStakingStep/DepositBTCModal.tsx b/dapp/src/components/TransactionModal/ActiveStakingStep/DepositBTCModal.tsx
index 4b68afa54..1878b03c3 100644
--- a/dapp/src/components/TransactionModal/ActiveStakingStep/DepositBTCModal.tsx
+++ b/dapp/src/components/TransactionModal/ActiveStakingStep/DepositBTCModal.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from "react"
+import React, { useCallback } from "react"
import {
useDepositBTCTransaction,
useDepositTelemetry,
@@ -9,13 +9,16 @@ import {
useTransactionContext,
useWalletContext,
} from "#/hooks"
-import { TextMd } from "#/components/shared/Typography"
import { logPromiseFailure } from "#/utils"
import { PROCESS_STATUSES } from "#/types"
-import { CardAlert } from "#/components/shared/alerts"
import { TOASTS, TOAST_IDS } from "#/types/toast"
-import StakingStepsModalContent from "./StakingStepsModalContent"
+import { ModalBody, ModalHeader, Highlight, useTimeout } from "@chakra-ui/react"
+import Spinner from "#/components/shared/Spinner"
+import { TextMd } from "#/components/shared/Typography"
+import { CardAlert } from "#/components/shared/alerts"
+import { ONE_SEC_IN_MILLISECONDS } from "#/constants"
+const DELAY = ONE_SEC_IN_MILLISECONDS * 2
const TOAST_ID = TOAST_IDS.DEPOSIT_TRANSACTION_ERROR
const TOAST = TOASTS[TOAST_ID]
@@ -27,9 +30,6 @@ export default function DepositBTCModal() {
const depositTelemetry = useDepositTelemetry()
const { closeToast, openToast } = useToast()
- const [isLoading, setIsLoading] = useState(false)
- const [buttonText, setButtonText] = useState("Deposit BTC")
-
const onStakeBTCSuccess = useCallback(
() => setStatus(PROCESS_STATUSES.SUCCEEDED),
[setStatus],
@@ -57,7 +57,6 @@ export default function DepositBTCModal() {
id: TOAST_ID,
render: TOAST,
})
- setButtonText("Try again")
}, [openToast])
const onDepositBTCError = useCallback(() => showError(), [showError])
@@ -71,13 +70,11 @@ export default function DepositBTCModal() {
if (!tokenAmount?.amount || !btcAddress || !depositReceipt || !ethAccount)
return
- setIsLoading(true)
const response = await depositTelemetry(
depositReceipt,
btcAddress,
ethAccount.address,
)
- setIsLoading(false)
if (response.verificationStatus === "valid") {
logPromiseFailure(sendBitcoinTransaction(tokenAmount?.amount, btcAddress))
@@ -98,18 +95,23 @@ export default function DepositBTCModal() {
logPromiseFailure(handledDepositBTC())
}, [handledDepositBTC])
+ useTimeout(handledDepositBTCWrapper, DELAY)
+
return (
-
-
-
- Make a Bitcoin transaction to deposit and stake your BTC.
-
-
-
+ <>
+ Waiting transaction...
+
+
+ Please complete the transaction in your wallet.
+
+
+
+ You will receive your Rewards once the deposit transaction is
+ completed.
+
+
+
+
+
)
}
diff --git a/dapp/src/components/TransactionModal/ActiveStakingStep/OverviewModal/index.tsx b/dapp/src/components/TransactionModal/ActiveStakingStep/OverviewModal/index.tsx
deleted file mode 100644
index c5806b663..000000000
--- a/dapp/src/components/TransactionModal/ActiveStakingStep/OverviewModal/index.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from "react"
-import {
- Button,
- ModalBody,
- ModalFooter,
- ModalHeader,
- StepNumber,
-} from "@chakra-ui/react"
-import StepperBase from "#/components/shared/StepperBase"
-import { useModalFlowContext } from "#/hooks"
-import { STEPS } from "./steps"
-
-export default function OverviewModal() {
- const { goNext } = useModalFlowContext()
-
- return (
- <>
- Staking steps overview
-
- }
- steps={STEPS}
- />
-
-
-
-
-
- )
-}
diff --git a/dapp/src/components/TransactionModal/ActiveStakingStep/OverviewModal/steps.tsx b/dapp/src/components/TransactionModal/ActiveStakingStep/OverviewModal/steps.tsx
deleted file mode 100644
index 899fc7960..000000000
--- a/dapp/src/components/TransactionModal/ActiveStakingStep/OverviewModal/steps.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from "react"
-import { StepBase } from "#/components/shared/StepperBase"
-import { Description, Title } from "../StakingStepsModalContent"
-
-export const STEPS: StepBase[] = [
- {
- id: "sign-message",
- title: Sign message,
- description: (
-
- You will sign a gas-free Ethereum message to indicate the address where
- you'd like to get your stBTC liquid staking token.
-
- ),
- },
- {
- id: "deposit-btc",
- title: Deposit BTC,
- description: (
-
- You will make a Bitcoin transaction to deposit and stake your BTC.
-
- ),
- },
-]
diff --git a/dapp/src/components/TransactionModal/ActiveStakingStep/SignMessageModal.tsx b/dapp/src/components/TransactionModal/ActiveStakingStep/SignMessageModal.tsx
deleted file mode 100644
index 37bba6883..000000000
--- a/dapp/src/components/TransactionModal/ActiveStakingStep/SignMessageModal.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import React, { useCallback, useEffect, useState } from "react"
-import {
- useExecuteFunction,
- useModalFlowContext,
- useStakeFlowContext,
- useToast,
-} from "#/hooks"
-import { logPromiseFailure } from "#/utils"
-import { PROCESS_STATUSES, TOASTS, TOAST_IDS } from "#/types"
-import { ReceiveSTBTCAlert } from "#/components/shared/alerts"
-import StakingStepsModalContent from "./StakingStepsModalContent"
-
-const TOAST_ID = TOAST_IDS.SIGNING_ERROR
-const TOAST = TOASTS[TOAST_ID]
-
-export default function SignMessageModal() {
- const { goNext, setStatus } = useModalFlowContext()
- const { signMessage } = useStakeFlowContext()
- const [buttonText, setButtonText] = useState("Sign now")
- const { closeToast, openToast } = useToast()
-
- useEffect(() => {
- setStatus(PROCESS_STATUSES.PENDING)
- }, [setStatus])
-
- const onSignMessageSuccess = useCallback(() => {
- closeToast(TOAST_ID)
- goNext()
- }, [closeToast, goNext])
-
- const onSignMessageError = useCallback(() => {
- openToast({
- id: TOAST_ID,
- render: TOAST,
- })
- setButtonText("Try again")
- }, [openToast])
-
- const handleSignMessage = useExecuteFunction(
- signMessage,
- onSignMessageSuccess,
- onSignMessageError,
- )
-
- const handleSignMessageWrapper = useCallback(() => {
- logPromiseFailure(handleSignMessage())
- }, [handleSignMessage])
-
- return (
-
-
-
- )
-}
diff --git a/dapp/src/components/TransactionModal/ActiveStakingStep/StakeFormModal/StakeDetails.tsx b/dapp/src/components/TransactionModal/ActiveStakingStep/StakeFormModal/StakeDetails.tsx
index 6fc73f611..416d691b0 100644
--- a/dapp/src/components/TransactionModal/ActiveStakingStep/StakeFormModal/StakeDetails.tsx
+++ b/dapp/src/components/TransactionModal/ActiveStakingStep/StakeFormModal/StakeDetails.tsx
@@ -50,7 +50,6 @@ function StakeDetails({
/>
void
-}) {
+}: BaseFormProps) {
const minDepositAmount = useMinDepositAmount()
const { btcAccount } = useWalletContext()
const tokenBalance = BigInt(btcAccount?.balance.toString() ?? "0")
@@ -18,6 +17,7 @@ function StakeFormModal({
- Stake
+ Stake
)
}
diff --git a/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/RetryModal.tsx b/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/RetryModal.tsx
index b1a33e03e..c1c144eae 100644
--- a/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/RetryModal.tsx
+++ b/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/RetryModal.tsx
@@ -41,8 +41,10 @@ export default function RetryModal({ retry }: { retry: () => void }) {
return (
<>
- Oops! There was an error.
-
+
+ Oops! There was an error.
+
+
@@ -66,7 +68,7 @@ export default function RetryModal({ retry }: { retry: () => void }) {
-
+
diff --git a/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/ServerErrorModal.tsx b/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/ServerErrorModal.tsx
index ff4cc6b5e..179c0d62c 100644
--- a/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/ServerErrorModal.tsx
+++ b/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/ServerErrorModal.tsx
@@ -32,10 +32,10 @@ export default function ServerErrorModal({
return (
<>
-
+
We're currently facing system issues.
-
+
@@ -56,7 +56,6 @@ export default function ServerErrorModal({
diff --git a/dapp/src/components/TransactionModal/ActiveStakingStep/index.tsx b/dapp/src/components/TransactionModal/ActiveStakingStep/index.tsx
index 6776365f4..d03576d31 100644
--- a/dapp/src/components/TransactionModal/ActiveStakingStep/index.tsx
+++ b/dapp/src/components/TransactionModal/ActiveStakingStep/index.tsx
@@ -1,17 +1,11 @@
import React from "react"
import { ACTION_FLOW_STEPS_TYPES, ACTION_FLOW_TYPES } from "#/types"
-import SignMessageModal from "./SignMessageModal"
import DepositBTCModal from "./DepositBTCModal"
-import OverviewModal from "./OverviewModal"
const STEPS = ACTION_FLOW_STEPS_TYPES[ACTION_FLOW_TYPES.STAKE]
export function ActiveStakingStep({ activeStep }: { activeStep: number }) {
switch (activeStep) {
- case STEPS.OVERVIEW:
- return
- case STEPS.SIGN_MESSAGE:
- return
case STEPS.DEPOSIT_BTC:
return
default: {
diff --git a/dapp/src/components/TransactionModal/ActiveUnstakingStep/SignMessageModal.tsx b/dapp/src/components/TransactionModal/ActiveUnstakingStep/SignMessageModal.tsx
index d462cab94..e46359396 100644
--- a/dapp/src/components/TransactionModal/ActiveUnstakingStep/SignMessageModal.tsx
+++ b/dapp/src/components/TransactionModal/ActiveUnstakingStep/SignMessageModal.tsx
@@ -1,18 +1,13 @@
-import React, { useCallback, useEffect } from "react"
+import React, { useCallback } from "react"
import { useExecuteFunction, useModalFlowContext } from "#/hooks"
import { PROCESS_STATUSES } from "#/types"
import { Button, ModalBody, ModalFooter, ModalHeader } from "@chakra-ui/react"
import { TextMd } from "#/components/shared/Typography"
import { logPromiseFailure } from "#/utils"
-import { ReceiveSTBTCAlert } from "#/components/shared/alerts"
export default function SignMessageModal() {
const { setStatus } = useModalFlowContext()
- useEffect(() => {
- setStatus(PROCESS_STATUSES.PENDING)
- }, [setStatus])
-
const onSignMessageSuccess = useCallback(() => {
setStatus(PROCESS_STATUSES.SUCCEEDED)
}, [setStatus])
@@ -46,7 +41,6 @@ export default function SignMessageModal() {
You will sign a gas-free Ethereum message to indicate the address
where you'd like to get your stBTC liquid staking token.
-
+ {/* TODO: Simplify the logic of opening modals */}
+
diff --git a/dapp/src/theme/Modal.ts b/dapp/src/theme/Modal.ts
index 8436cc293..33a6ac658 100644
--- a/dapp/src/theme/Modal.ts
+++ b/dapp/src/theme/Modal.ts
@@ -2,7 +2,6 @@ import { modalAnatomy as parts } from "@chakra-ui/anatomy"
import { createMultiStyleConfigHelpers, defineStyle } from "@chakra-ui/react"
const baseStyleDialog = defineStyle({
- p: 4,
borderWidth: "var(--chakra-space-modal_borderWidth)",
boxShadow: "none",
borderColor: "white",
@@ -31,11 +30,13 @@ const baseStyleOverlay = defineStyle({
})
const baseStyleHeader = defineStyle({
- textAlign: "center",
+ textAlign: "left",
fontSize: "lg",
lineHeight: "lg",
fontWeight: "bold",
- py: 6,
+ pt: 10,
+ px: 10,
+ pb: 8,
})
const baseStyleBody = defineStyle({
@@ -45,11 +46,16 @@ const baseStyleBody = defineStyle({
flexDirection: "column",
alignItems: "center",
gap: 6,
+ pt: 0,
+ px: 8,
+ pb: 10,
})
const baseStyleFooter = defineStyle({
flexDirection: "column",
gap: 6,
+ px: 8,
+ pb: 10,
})
const multiStyleConfig = createMultiStyleConfigHelpers(parts.keys)
diff --git a/dapp/src/types/action-flow.ts b/dapp/src/types/action-flow.ts
index ac31a0ff0..a587b58b9 100644
--- a/dapp/src/types/action-flow.ts
+++ b/dapp/src/types/action-flow.ts
@@ -7,9 +7,7 @@ export type ActionFlowType =
(typeof ACTION_FLOW_TYPES)[keyof typeof ACTION_FLOW_TYPES]
const STAKING_STEPS = {
- OVERVIEW: 1,
- SIGN_MESSAGE: 2,
- DEPOSIT_BTC: 3,
+ DEPOSIT_BTC: 1,
} as const
const UNSTAKING_STEPS = { SIGN_MESSAGE: 1 } as const
@@ -21,8 +19,6 @@ export const ACTION_FLOW_STEPS_TYPES = {
export const PROCESS_STATUSES = {
IDLE: "IDLE",
- PAUSED: "PAUSED",
- PENDING: "PENDING",
LOADING: "LOADING",
FAILED: "FAILED",
SUCCEEDED: "SUCCEEDED",
diff --git a/dapp/src/types/form.ts b/dapp/src/types/form.ts
new file mode 100644
index 000000000..6a4526228
--- /dev/null
+++ b/dapp/src/types/form.ts
@@ -0,0 +1,3 @@
+export type BaseFormProps = {
+ onSubmitForm: (values: T) => void
+}
diff --git a/dapp/src/types/index.ts b/dapp/src/types/index.ts
index dc645ffc8..0623cda8a 100644
--- a/dapp/src/types/index.ts
+++ b/dapp/src/types/index.ts
@@ -17,3 +17,4 @@ export * from "./core"
export * from "./fee"
export * from "./navigation"
export * from "./subgraphAPI"
+export * from "./form"