From 40d4a30417d028d99be927894493b4418a1f626e Mon Sep 17 00:00:00 2001
From: Rafal Czajkowski <rafal.czajkowski@keep.network>
Date: Fri, 2 Jun 2023 22:51:06 +0200
Subject: [PATCH] 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      | 21 ++++------------
 src/pages/tBTC/Bridge/UnmintDetails.tsx       | 20 ++++++---------
 .../components/BridgeProcessDetailsCard.tsx   | 25 +++++++++++++++++++
 3 files changed, 37 insertions(+), 29 deletions(-)
 create mode 100644 src/pages/tBTC/Bridge/components/BridgeProcessDetailsCard.tsx

diff --git a/src/pages/tBTC/Bridge/DepositDetails.tsx b/src/pages/tBTC/Bridge/DepositDetails.tsx
index af7c7ad64..acaa657b9 100644
--- a/src/pages/tBTC/Bridge/DepositDetails.tsx
+++ b/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"}
diff --git a/src/pages/tBTC/Bridge/UnmintDetails.tsx b/src/pages/tBTC/Bridge/UnmintDetails.tsx
index 663b24e92..ccb24ed75 100644
--- a/src/pages/tBTC/Bridge/UnmintDetails.tsx
+++ b/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
diff --git a/src/pages/tBTC/Bridge/components/BridgeProcessDetailsCard.tsx b/src/pages/tBTC/Bridge/components/BridgeProcessDetailsCard.tsx
new file mode 100644
index 000000000..1dfd7fa33
--- /dev/null
+++ b/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>
+  )
+}