Create a common Card component for bridge process

The main card of the bridge process details looks the same so here we
extrarct a component to a separate file which sets the same styles when
the bridge process is completed.

src/pages/tBTC/Bridge/DepositDetails.tsx

@@ -13,9 +13,7 @@ import {
  BodyLg,
  BodyMd,
  Box,
- Card,
  Flex,
- HStack,
  LabelSm,
  List,
  ListItem,
@@ -24,10 +22,8 @@ import {
  StackDivider,
  Icon,
  Divider,
- H5,
  SkeletonText,
  SkeletonCircle,
- Image,
  BodySm,
  BodyXs,
 } from "@threshold-network/components"
@@ -56,6 +52,7 @@ import {
  BridgeProcessResource,
  BridgeProcessResourceProps,
 } from "./components/BridgeProcessResource"
+import { BridgeProcessDetailsCard } from "./components/BridgeProcessDetailsCard"
 import { useAppDispatch } from "../../../hooks/store"
 import { useTbtcState } from "../../../hooks/useTbtcState"
 import {
@@ -67,7 +64,6 @@ import {
 import { tbtcSlice } from "../../../store/tbtc"
 import { ExplorerDataType } from "../../../utils/createEtherscanLink"
 import { PageComponent } from "../../../types"
-import mainCardBackground from "../../../static/images/minting-completed-card-bg.png"
 import { CurveFactoryPoolId, ExternalHref } from "../../../enums"
 import { ExternalPool } from "../../../components/tBTC/ExternalPool"
 import { useFetchExternalPoolData } from "../../../hooks/useFetchExternalPoolData"
@@ -170,15 +166,6 @@ export const DepositDetails: PageComponent = () => {
  },
  ]
 
- const mainCardProps =
- mintingProgressStep === "completed"
- ? {
- backgroundImage: mainCardBackground,
- backgroundPosition: "bottom -10px right",
- backgroundRepeat: "no-repeat",
- }
- : {}
-
  return (
  <DepositDetailsPageContext.Provider
  value={{
@@ -196,7 +183,9 @@ export const DepositDetails: PageComponent = () => {
  mintingFee,
  }}
  >
- <Card {...mainCardProps}>
+ <BridgeProcessDetailsCard
+ isProcessCompleted={mintingProgressStep === "completed"}
+ >
  {(isFetching || !data) && !error && <DepositDetailsPageSkeleton />}
  {error && <>{error}</>}
  {!isFetching && !!data && !error && (
@@ -300,7 +289,7 @@ export const DepositDetails: PageComponent = () => {
  )}
  </>
  )}
- </Card>
+ </BridgeProcessDetailsCard>
  {mintingProgressStep === "completed" && (
  <ExternalPool
  title={"tBTC Curve Pool"}

src/pages/tBTC/Bridge/UnmintDetails.tsx

@@ -37,15 +37,14 @@ import { BridgeProcessStep } from "./components/BridgeProcessStep"
 import { BridgeProcessCardTitle } from "./components/BridgeProcessCardTitle"
 import { BridgeProcessCardSubTitle } from "./components/BridgeProcessCardSubTitle"
 import { BridgeProcessResource } from "./components/BridgeProcessResource"
+import { BridgeProcessDetailsCard } from "./components/BridgeProcessDetailsCard"
 import {
  BridgeLayout,
  BridgeLayoutAsideSection,
  BridgeLayoutMainSection,
 } from "./BridgeLayout"
-import shortenAddress from "../../../utils/shortenAddress"
 import { ExplorerDataType } from "../../../utils/createEtherscanLink"
 import { PageComponent } from "../../../types"
-import mainCardBackground from "../../../static/images/minting-completed-card-bg.png"
 import { ONE_SEC_IN_MILISECONDS } from "../../../utils/date"
 import { CopyAddressToClipboard } from "../../../components/CopyToClipboard"
 import { ProcessCompletedBrandGradientIcon } from "./components/BridgeProcessDetailsIcons"
@@ -76,16 +75,6 @@ export const UnmintDetails: PageComponent = () => {
  const btcAddress = "bc1qm34lsc65zpw79lxes69zkqmk6ee3ewf0j77s3h"
  const fee = "20000000000000000"
 
- // TODO: Probably create a shared component because we do the same on the
- // deposit details page
- const mainCardProps = shouldDisplaySuccessStep
- ? {
- backgroundImage: mainCardBackground,
- backgroundPosition: "bottom -10px right",
- backgroundRepeat: "no-repeat",
- }
- : {}
-
  const transactions: {
  label: string
  txHash?: string
@@ -96,7 +85,12 @@ export const UnmintDetails: PageComponent = () => {
  ]
 
  return (
- <BridgeLayout {...mainCardProps} spacing="4">
+ <BridgeLayout
+ as={BridgeProcessDetailsCard}
+ spacing="4"
+ // @ts-ignore
+ isProcessCompleted={shouldDisplaySuccessStep}
+ >
  <BridgeLayoutMainSection>
  <BridgeProcessCardTitle bridgeProcess="unmint" />
  <BridgeProcessCardSubTitle

src/pages/tBTC/Bridge/components/BridgeProcessDetailsCard.tsx

@@ -0,0 +1,25 @@
+import { FC, ComponentProps } from "react"
+import { Card } from "@threshold-network/components"
+import backroundImage from "../../../../static/images/minting-completed-card-bg.png"
+
+type BridgeProcessDetailsCardProps = ComponentProps<typeof Card> & {
+ isProcessCompleted: boolean
+}
+
+const processCompletedStyles = {
+ backgroundImage: backroundImage,
+ backgroundPosition: "bottom -10px right",
+ backgroundRepeat: "no-repeat",
+}
+
+export const BridgeProcessDetailsCard: FC<BridgeProcessDetailsCardProps> = ({
+ isProcessCompleted,
+ children,
+ ...restPros
+}) => {
+ return (
+ <Card {...(isProcessCompleted ? processCompletedStyles : {})} {...restPros}>
+ {children}
+ </Card>
+ )
+}