Skip to content

Commit

Permalink
Merge pull request #572 from threshold-network/add-empty-state-for-un…
Browse files Browse the repository at this point in the history 
…mint-page

Render empty state on the Unmint page

Render an empty state on the Unmint page. Here we also extract empty state
component to a separate file since we want to render the same empty state for
unmint and mint page.
  • Loading branch information
@michalsmiarowski
michalsmiarowski authored Jul 13, 2023
2 parents 69b9b6f + f35c091 commit 5031b6f
Show file tree
Hide file tree
Showing 3 changed files with 145 additions and 101 deletions.
46 changes: 4 additions & 42 deletions src/pages/tBTC/Bridge/Mint.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,32 +1,21 @@
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,
BridgeLayoutMainSection,
} from "./BridgeLayout"
import { BridgeProcessEmptyState } from "./components/BridgeProcessEmptyState"

export const MintPage: PageComponent = ({}) => {
return <Outlet />
Expand Down Expand Up @@ -80,41 +69,14 @@ MintingFormPage.route = {

const MintPageLayout: PageComponent = () => {
const { active } = useWeb3React()
const [tvlInUSD, fetchTvl, tvl] = useFetchTvl()
const [deposits] = useFetchRecentDeposits(3)

useEffect(() => {
fetchTvl()
}, [fetchTvl])

return (
<BridgeLayout>
<BridgeLayoutMainSection>
{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 tBTC?" />
)}
</BridgeLayoutMainSection>
<BridgeLayoutAsideSection>
Expand Down
150 changes: 91 additions & 59 deletions src/pages/tBTC/Bridge/Unmint.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -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>
)
}

Expand Down Expand Up @@ -285,7 +288,36 @@ UnmintFormPage.route = {
isPageEnabled: true,
}

export const UnmintPage: PageComponent = ({}) => {
export const UnmintPageLayout: PageComponent = ({}) => {
const { active } = useWeb3React()

return (
<BridgeLayout>
<BridgeLayoutMainSection>
{active ? (
<Outlet />
) : (
<BridgeProcessEmptyState
title="Ready to unmit tBTC?"
bridgeProcess="unmint"
/>
)}
</BridgeLayoutMainSection>
<BridgeLayoutAsideSection>
<UnmintAsideLayout />
</BridgeLayoutAsideSection>
</BridgeLayout>
)
}

UnmintPageLayout.route = {
path: "",
index: false,
isPageEnabled: true,
pages: [UnmintFormPage],
}

export const UnmintPage: PageComponent = () => {
return <Outlet />
}

Expand All @@ -294,6 +326,6 @@ UnmintPage.route = {
pathOverride: "unmint/*",
index: true,
title: "Unmint",
pages: [UnmintFormPage, UnmintDetails],
pages: [UnmintPageLayout, UnmintDetails],
isPageEnabled: true,
}
50 changes: 50 additions & 0 deletions src/pages/tBTC/Bridge/components/BridgeProcessEmptyState.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
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"
import { BridgeProcess } from "../../../../types"

export const BridgeProcessEmptyState: FC<{
title: string
bridgeProcess?: BridgeProcess
}> = ({ title, bridgeProcess = "mint" }) => {
const [tvlInUSD, fetchTvl, tvl] = useFetchTvl()
const [deposits] = useFetchRecentDeposits(3)

useEffect(() => {
fetchTvl()
}, [fetchTvl])

return (
<>
<BridgeProcessCardTitle bridgeProcess={bridgeProcess} />
<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" />
</>
)
}

0 comments on commit 5031b6f

Please sign in to comment.