Fix the Unmint page layout

threshold-network · Jul 13, 2023 · f35c091 · f35c091
1 parent f70948c
commit f35c091
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 20 deletions.
diff --git a/src/pages/tBTC/Bridge/Mint.tsx b/src/pages/tBTC/Bridge/Mint.tsx
@@ -1,27 +1,15 @@
 import { useEffect } from "react"
 import { Outlet } from "react-router"
 import { useWeb3React } from "@web3-react/core"
-import { H5 } from "@threshold-network/components"
 import { PageComponent } from "../../../types"
 import { DepositDetails } from "./DepositDetails"
 import { ResumeDepositPage } from "./ResumeDeposit"
 import { MintingTimeline } from "./Minting/MintingTimeline"
-import {
- useFetchRecentDeposits,
- useTBTCDepositDataFromLocalStorage,
-} from "../../../hooks/tbtc"
+import { useTBTCDepositDataFromLocalStorage } from "../../../hooks/tbtc"
 import { useTbtcState } from "../../../hooks/useTbtcState"
 import { isSameETHAddress } from "../../../web3/utils"
 import { MintingFlowRouter } from "./Minting/MintingFlowRouter"
-import { useFetchTvl } from "../../../hooks/useFetchTvl"
-import { BridgeProcessCardTitle } from "./components/BridgeProcessCardTitle"
-import SubmitTxButton from "../../../components/SubmitTxButton"
-import {
- ProtocolHistoryRecentDeposits,
- ProtocolHistoryTitle,
- ProtocolHistoryViewMoreLink,
- TVL,
-} from "../../../components/tBTC"
+
 import {
  BridgeLayout,
  BridgeLayoutAsideSection,
@@ -88,7 +76,7 @@ const MintPageLayout: PageComponent = () => {
  {active ? (
  <Outlet />
  ) : (
- <BridgeProcessEmptyState title="Ready to mint tTBC?" />
+ <BridgeProcessEmptyState title="Ready to mint tBTC?" />
  )}
  </BridgeLayoutMainSection>
  <BridgeLayoutAsideSection>

diff --git a/src/pages/tBTC/Bridge/Unmint.tsx b/src/pages/tBTC/Bridge/Unmint.tsx
@@ -288,7 +288,7 @@ UnmintFormPage.route = {
  isPageEnabled: true,
 }
 
-export const UnmintPage: PageComponent = ({}) => {
+export const UnmintPageLayout: PageComponent = ({}) => {
  const { active } = useWeb3React()
 
  return (
@@ -297,7 +297,10 @@ export const UnmintPage: PageComponent = ({}) => {
  {active ? (
  <Outlet />
  ) : (
- <BridgeProcessEmptyState title="Ready to unmit tBTC?" />
+ <BridgeProcessEmptyState
+ title="Ready to unmit tBTC?"
+ bridgeProcess="unmint"
+ />
  )}
  </BridgeLayoutMainSection>
  <BridgeLayoutAsideSection>
@@ -307,11 +310,22 @@ export const UnmintPage: PageComponent = ({}) => {
  )
 }
 
+UnmintPageLayout.route = {
+ path: "",
+ index: false,
+ isPageEnabled: true,
+ pages: [UnmintFormPage],
+}
+
+export const UnmintPage: PageComponent = () => {
+ return <Outlet />
+}
+
 UnmintPage.route = {
  path: "unmint",
  pathOverride: "unmint/*",
  index: true,
  title: "Unmint",
- pages: [UnmintFormPage, UnmintDetails],
+ pages: [UnmintPageLayout, UnmintDetails],
  isPageEnabled: true,
 }
diff --git a/src/pages/tBTC/Bridge/components/BridgeProcessEmptyState.tsx b/src/pages/tBTC/Bridge/components/BridgeProcessEmptyState.tsx
@@ -10,8 +10,12 @@ import {
 } from "../../../../components/tBTC"
 import { useFetchRecentDeposits } from "../../../../hooks/tbtc"
 import { useFetchTvl } from "../../../../hooks/useFetchTvl"
+import { BridgeProcess } from "../../../../types"
 
-export const BridgeProcessEmptyState: FC<{ title: string }> = ({ title }) => {
+export const BridgeProcessEmptyState: FC<{
+ title: string
+ bridgeProcess?: BridgeProcess
+}> = ({ title, bridgeProcess = "mint" }) => {
  const [tvlInUSD, fetchTvl, tvl] = useFetchTvl()
  const [deposits] = useFetchRecentDeposits(3)
 
@@ -21,7 +25,7 @@ export const BridgeProcessEmptyState: FC<{ title: string }> = ({ title }) => {
 
  return (
  <>
- <BridgeProcessCardTitle />
+ <BridgeProcessCardTitle bridgeProcess={bridgeProcess} />
  <H5 align={"center"}>{title}</H5>
  <SubmitTxButton mb="6" mt="4" />
  <TVL tvl={tvl.tBTC} tvlInUSD={tvlInUSD.tBTC} />