From f70948c92fb231e688f5f597321971d767f66c12 Mon Sep 17 00:00:00 2001
From: Rafal Czajkowski <rafal.czajkowski@keep.network>
Date: Thu, 13 Jul 2023 13:42:33 +0200
Subject: [PATCH 1/2] Render empty state for the Unmint page

---
 src/pages/tBTC/Bridge/Mint.tsx                |  30 +---
 src/pages/tBTC/Bridge/Unmint.tsx              | 134 ++++++++++--------
 .../components/BridgeProcessEmptyState.tsx    |  46 ++++++
 3 files changed, 124 insertions(+), 86 deletions(-)
 create mode 100644 src/pages/tBTC/Bridge/components/BridgeProcessEmptyState.tsx

diff --git a/src/pages/tBTC/Bridge/Mint.tsx b/src/pages/tBTC/Bridge/Mint.tsx
index 99705d043..7cb7e6abe 100644
--- a/src/pages/tBTC/Bridge/Mint.tsx
+++ b/src/pages/tBTC/Bridge/Mint.tsx
@@ -27,6 +27,7 @@ import {
   BridgeLayoutAsideSection,
   BridgeLayoutMainSection,
 } from "./BridgeLayout"
+import { BridgeProcessEmptyState } from "./components/BridgeProcessEmptyState"
 
 export const MintPage: PageComponent = ({}) => {
   return <Outlet />
@@ -80,12 +81,6 @@ MintingFormPage.route = {
 
 const MintPageLayout: PageComponent = () => {
   const { active } = useWeb3React()
-  const [tvlInUSD, fetchTvl, tvl] = useFetchTvl()
-  const [deposits] = useFetchRecentDeposits(3)
-
-  useEffect(() => {
-    fetchTvl()
-  }, [fetchTvl])
 
   return (
     <BridgeLayout>
@@ -93,28 +88,7 @@ const MintPageLayout: PageComponent = () => {
         {active ? (
           <Outlet />
         ) : (
-          <>
-            <BridgeProcessCardTitle />
-            <H5 align={"center"}>Ready to mint tBTC?</H5>
-            <SubmitTxButton mb="6" mt="4" />
-            <TVL tvl={tvl.tBTC} tvlInUSD={tvlInUSD.tBTC} />
-            <ProtocolHistoryTitle mt="8" />
-            <ProtocolHistoryRecentDeposits
-              deposits={deposits}
-              _after={{
-                content: `" "`,
-                position: "absolute",
-                bottom: 0,
-                left: 0,
-                width: "100%",
-                height: "100px",
-                opacity: "0.9",
-                background:
-                  "linear-gradient(360deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 117.78%)",
-              }}
-            />
-            <ProtocolHistoryViewMoreLink mt="7" />
-          </>
+          <BridgeProcessEmptyState title="Ready to mint tTBC?" />
         )}
       </BridgeLayoutMainSection>
       <BridgeLayoutAsideSection>
diff --git a/src/pages/tBTC/Bridge/Unmint.tsx b/src/pages/tBTC/Bridge/Unmint.tsx
index ded719241..54969db3c 100644
--- a/src/pages/tBTC/Bridge/Unmint.tsx
+++ b/src/pages/tBTC/Bridge/Unmint.tsx
@@ -1,4 +1,5 @@
 import { FC } from "react"
+import { useWeb3React } from "@web3-react/core"
 import { Outlet } from "react-router-dom"
 import { FormikErrors, useFormikContext, withFormik } from "formik"
 import {
@@ -60,6 +61,7 @@ import { UnmintingCard } from "./UnmintingCard"
 import { featureFlags } from "../../../constants"
 import { RedemptionWalletData } from "../../../threshold-ts/tbtc"
 import { UnspentTransactionOutputPlainObject } from "../../../types/tbtc"
+import { BridgeProcessEmptyState } from "./components/BridgeProcessEmptyState"
 
 const UnmintFormPage: PageComponent = ({}) => {
   const { balance } = useToken(Token.TBTCV2)
@@ -92,64 +94,65 @@ const UnmintFormPage: PageComponent = ({}) => {
   return !featureFlags.TBTC_V2_REDEMPTION ? (
     <UnmintingCard />
   ) : (
-    <BridgeLayout>
-      <BridgeLayoutMainSection>
-        <BridgeProcessCardTitle bridgeProcess="unmint" />
-        <BridgeProcessCardSubTitle
-          stepText="Step 1"
-          subTitle="Unmint your tBTC tokens"
-        />
-        <BodyMd color="gray.500">
-          Unminting requires one Ethereum transaction and it takes around 5
-          hours.
-        </BodyMd>
-        <UnmintForm
-          maxTokenAmount={balance.toString()}
-          onSubmitForm={onSubmitForm}
-          bitcoinNetwork={threshold.tbtc.bitcoinNetwork}
-          findRedemptionWallet={threshold.tbtc.findWalletForRedemption}
-        />
-        <Box as="p" textAlign="center" mt="4">
-          <BridgeContractLink />
-        </Box>
-      </BridgeLayoutMainSection>
-      <BridgeLayoutAsideSection>
-        <LabelSm>Duration</LabelSm>
-        <HStack mt="4" spacing="4">
-          <BoxLabel variant="solid" status="primary">
-            ~ 5 Hours
-          </BoxLabel>
-          <Box>
-            <BodyXs as="span" color="gray.500">
-              min.
-            </BodyXs>{" "}
-            <BodyLg as="span" color="gray.500">
-              0.01
-            </BodyLg>{" "}
-            <BodyXs as="span" color="gray.500">
-              BTC
-            </BodyXs>
-          </Box>
-        </HStack>
-        <LabelSm mt="8">Timeline</LabelSm>
-        <Steps mt="6">
-          <Step isActive={true} isComplete={false}>
-            <StepIndicator>Step 1</StepIndicator>
-            <StepBadge>action on Ethereum</StepBadge>
-            <StepBadge>action on Bitcoin</StepBadge>
-            <StepTitle>
-              Unmint <TBTCText />
-            </StepTitle>
-            <StepDescription>
-              Your unwrapped and withdrawn BTC will be sent to the BTC address
-              of your choice, in the next sweep.
-            </StepDescription>
-          </Step>
-        </Steps>
+    <>
+      <BridgeProcessCardTitle bridgeProcess="unmint" />
+      <BridgeProcessCardSubTitle
+        stepText="Step 1"
+        subTitle="Unmint your tBTC tokens"
+      />
+      <BodyMd color="gray.500">
+        Unminting requires one Ethereum transaction and it takes around 5 hours.
+      </BodyMd>
+      <UnmintForm
+        maxTokenAmount={balance.toString()}
+        onSubmitForm={onSubmitForm}
+        bitcoinNetwork={threshold.tbtc.bitcoinNetwork}
+        findRedemptionWallet={threshold.tbtc.findWalletForRedemption}
+      />
+      <Box as="p" textAlign="center" mt="4">
+        <BridgeContractLink />
+      </Box>
+    </>
+  )
+}
 
-        <BridgeProcessIndicator bridgeProcess="unmint" mt="8" />
-      </BridgeLayoutAsideSection>
-    </BridgeLayout>
+const UnmintAsideLayout = () => {
+  return (
+    <BridgeLayoutAsideSection>
+      <LabelSm>Duration</LabelSm>
+      <HStack mt="4" spacing="4">
+        <BoxLabel variant="solid" status="primary">
+          ~ 5 Hours
+        </BoxLabel>
+        <Box>
+          <BodyXs as="span" color="gray.500">
+            min.
+          </BodyXs>{" "}
+          <BodyLg as="span" color="gray.500">
+            0.01
+          </BodyLg>{" "}
+          <BodyXs as="span" color="gray.500">
+            BTC
+          </BodyXs>
+        </Box>
+      </HStack>
+      <LabelSm mt="8">Timeline</LabelSm>
+      <Steps mt="6">
+        <Step isActive={true} isComplete={false}>
+          <StepIndicator>Step 1</StepIndicator>
+          <StepBadge>action on Ethereum</StepBadge>
+          <StepBadge>action on Bitcoin</StepBadge>
+          <StepTitle>
+            Unmint <TBTCText />
+          </StepTitle>
+          <StepDescription>
+            Your unwrapped and withdrawn BTC will be sent to the BTC address of
+            your choice, in the next sweep.
+          </StepDescription>
+        </Step>
+      </Steps>
+      <BridgeProcessIndicator bridgeProcess="unmint" mt="8" />
+    </BridgeLayoutAsideSection>
   )
 }
 
@@ -286,7 +289,22 @@ UnmintFormPage.route = {
 }
 
 export const UnmintPage: PageComponent = ({}) => {
-  return <Outlet />
+  const { active } = useWeb3React()
+
+  return (
+    <BridgeLayout>
+      <BridgeLayoutMainSection>
+        {active ? (
+          <Outlet />
+        ) : (
+          <BridgeProcessEmptyState title="Ready to unmit tBTC?" />
+        )}
+      </BridgeLayoutMainSection>
+      <BridgeLayoutAsideSection>
+        <UnmintAsideLayout />
+      </BridgeLayoutAsideSection>
+    </BridgeLayout>
+  )
 }
 
 UnmintPage.route = {
diff --git a/src/pages/tBTC/Bridge/components/BridgeProcessEmptyState.tsx b/src/pages/tBTC/Bridge/components/BridgeProcessEmptyState.tsx
new file mode 100644
index 000000000..59c6dd7df
--- /dev/null
+++ b/src/pages/tBTC/Bridge/components/BridgeProcessEmptyState.tsx
@@ -0,0 +1,46 @@
+import { FC, useEffect } from "react"
+import { H5 } from "@threshold-network/components"
+import { BridgeProcessCardTitle } from "./BridgeProcessCardTitle"
+import SubmitTxButton from "../../../../components/SubmitTxButton"
+import {
+  ProtocolHistoryRecentDeposits,
+  ProtocolHistoryTitle,
+  ProtocolHistoryViewMoreLink,
+  TVL,
+} from "../../../../components/tBTC"
+import { useFetchRecentDeposits } from "../../../../hooks/tbtc"
+import { useFetchTvl } from "../../../../hooks/useFetchTvl"
+
+export const BridgeProcessEmptyState: FC<{ title: string }> = ({ title }) => {
+  const [tvlInUSD, fetchTvl, tvl] = useFetchTvl()
+  const [deposits] = useFetchRecentDeposits(3)
+
+  useEffect(() => {
+    fetchTvl()
+  }, [fetchTvl])
+
+  return (
+    <>
+      <BridgeProcessCardTitle />
+      <H5 align={"center"}>{title}</H5>
+      <SubmitTxButton mb="6" mt="4" />
+      <TVL tvl={tvl.tBTC} tvlInUSD={tvlInUSD.tBTC} />
+      <ProtocolHistoryTitle mt="8" />
+      <ProtocolHistoryRecentDeposits
+        deposits={deposits}
+        _after={{
+          content: `" "`,
+          position: "absolute",
+          bottom: 0,
+          left: 0,
+          width: "100%",
+          height: "100px",
+          opacity: "0.9",
+          background:
+            "linear-gradient(360deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 117.78%)",
+        }}
+      />
+      <ProtocolHistoryViewMoreLink mt="7" />
+    </>
+  )
+}

From f35c09168ed514ad412ac8428fb437cf5462d32e Mon Sep 17 00:00:00 2001
From: Rafal Czajkowski <rafal.czajkowski@keep.network>
Date: Thu, 13 Jul 2023 14:59:58 +0200
Subject: [PATCH 2/2] Fix the Unmint page layout

---
 src/pages/tBTC/Bridge/Mint.tsx                | 18 +++--------------
 src/pages/tBTC/Bridge/Unmint.tsx              | 20 ++++++++++++++++---
 .../components/BridgeProcessEmptyState.tsx    |  8 ++++++--
 3 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/src/pages/tBTC/Bridge/Mint.tsx b/src/pages/tBTC/Bridge/Mint.tsx
index 7cb7e6abe..8d43736f4 100644
--- 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
index 54969db3c..6e7dc1005 100644
--- 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
index 59c6dd7df..2aea93420 100644
--- 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} />