From c3e0a252cc10c5764bb5115faf1f7312bd9f8d83 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=B3za=20Nagy?= <rozanagy88@gmail.com>
Date: Thu, 7 Nov 2024 13:25:20 +0100
Subject: [PATCH] feat: create components to simplify code

---
 ...vault-type-stack.vault-type-box.button.tsx | 22 ++++++++++++++
 ...vault-type-stack.vault-type-box.header.tsx | 16 ++++++++++
 ...select-vault-type-stack.vault-type-box.tsx | 26 +++++------------
 ...n-form.bitcoin-funds-information-stack.tsx |  2 ++
 ...er.transaction-form.protocol-fee-stack.tsx |  4 +++
 ...k-yield-container.transaction-form.tsx.tsx |  4 ---
 .../one-click-yield-background.tsx            | 29 -------------------
 .../one-click-yield/one-click-yield.page.tsx  |  2 +-
 8 files changed, 53 insertions(+), 52 deletions(-)
 create mode 100644 src/app/components/one-click-yield-container/components/one-click-yield-container.select-vault-type-stack/one-click-yield-container.select-vault-type-stack.vault-type-box/components/one-click-yield-container.select-vault-type-stack.vault-type-box.button.tsx
 create mode 100644 src/app/components/one-click-yield-container/components/one-click-yield-container.select-vault-type-stack/one-click-yield-container.select-vault-type-stack.vault-type-box/components/one-click-yield-container.select-vault-type-stack.vault-type-box.header.tsx
 delete mode 100644 src/app/components/one-click-yield-container/one-click-yield-background.tsx

diff --git a/src/app/components/one-click-yield-container/components/one-click-yield-container.select-vault-type-stack/one-click-yield-container.select-vault-type-stack.vault-type-box/components/one-click-yield-container.select-vault-type-stack.vault-type-box.button.tsx b/src/app/components/one-click-yield-container/components/one-click-yield-container.select-vault-type-stack/one-click-yield-container.select-vault-type-stack.vault-type-box/components/one-click-yield-container.select-vault-type-stack.vault-type-box.button.tsx
new file mode 100644
index 00000000..0d7396c9
--- /dev/null
+++ b/src/app/components/one-click-yield-container/components/one-click-yield-container.select-vault-type-stack/one-click-yield-container.select-vault-type-stack.vault-type-box/components/one-click-yield-container.select-vault-type-stack.vault-type-box.button.tsx
@@ -0,0 +1,22 @@
+import { Button, HStack, Image, Text } from '@chakra-ui/react';
+
+interface VaultTypeBoxButtonProps {
+  vaultType: string;
+  handleSelectVaultTypeClick: (vaultType: string) => void;
+}
+
+export function VaultTypeBoxButton({
+  vaultType,
+  handleSelectVaultTypeClick,
+}: VaultTypeBoxButtonProps): React.JSX.Element {
+  return (
+    <Button variant={'depositBTC'} onClick={() => handleSelectVaultTypeClick(vaultType)}>
+      <HStack>
+        <Image src={'/images/deposit-img.png'} alt={'Deposit image'} />
+        <Text fontSize={'lg'} fontWeight={'800'} color={'white.01'}>
+          Deposit BTC
+        </Text>
+      </HStack>
+    </Button>
+  );
+}
diff --git a/src/app/components/one-click-yield-container/components/one-click-yield-container.select-vault-type-stack/one-click-yield-container.select-vault-type-stack.vault-type-box/components/one-click-yield-container.select-vault-type-stack.vault-type-box.header.tsx b/src/app/components/one-click-yield-container/components/one-click-yield-container.select-vault-type-stack/one-click-yield-container.select-vault-type-stack.vault-type-box/components/one-click-yield-container.select-vault-type-stack.vault-type-box.header.tsx
new file mode 100644
index 00000000..4d0a13fa
--- /dev/null
+++ b/src/app/components/one-click-yield-container/components/one-click-yield-container.select-vault-type-stack/one-click-yield-container.select-vault-type-stack.vault-type-box/components/one-click-yield-container.select-vault-type-stack.vault-type-box.header.tsx
@@ -0,0 +1,16 @@
+import { InfoOutlineIcon } from '@chakra-ui/icons';
+import { HStack, Image } from '@chakra-ui/react';
+
+interface VaultTypeBoxHeaderProps {
+  imgPath: string;
+  name: string;
+}
+
+export function VaultTypeBoxHeader({ imgPath, name }: VaultTypeBoxHeaderProps): React.JSX.Element {
+  return (
+    <HStack>
+      <Image src={imgPath} alt={`${name} logo`} />
+      <InfoOutlineIcon color={'purple.01'} />
+    </HStack>
+  );
+}
diff --git a/src/app/components/one-click-yield-container/components/one-click-yield-container.select-vault-type-stack/one-click-yield-container.select-vault-type-stack.vault-type-box/one-click-yield-container.select-vault-type-stack.vault-type-box.tsx b/src/app/components/one-click-yield-container/components/one-click-yield-container.select-vault-type-stack/one-click-yield-container.select-vault-type-stack.vault-type-box/one-click-yield-container.select-vault-type-stack.vault-type-box.tsx
index c1f4ff66..4cf58f2b 100644
--- a/src/app/components/one-click-yield-container/components/one-click-yield-container.select-vault-type-stack/one-click-yield-container.select-vault-type-stack.vault-type-box/one-click-yield-container.select-vault-type-stack.vault-type-box.tsx
+++ b/src/app/components/one-click-yield-container/components/one-click-yield-container.select-vault-type-stack/one-click-yield-container.select-vault-type-stack.vault-type-box/one-click-yield-container.select-vault-type-stack.vault-type-box.tsx
@@ -1,7 +1,8 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import { InfoOutlineIcon } from '@chakra-ui/icons';
-import { Button, HStack, Image, Text, VStack } from '@chakra-ui/react';
+import { HStack, Text, VStack } from '@chakra-ui/react';
 
+import { VaultTypeBoxButton } from './components/one-click-yield-container.select-vault-type-stack.vault-type-box.button';
+import { VaultTypeBoxHeader } from './components/one-click-yield-container.select-vault-type-stack.vault-type-box.header';
 import {
   VaultTypeBoxPointChip,
   VaultTypeBoxPointChipProps,
@@ -44,22 +45,11 @@ export function VaultTypeBox({
   return (
     <VaultTypeBoxLayout>
       <HStack w={'100%'} justifyContent={'space-between'}>
-        <HStack>
-          <Image src={vaultTypeLogoUrl} alt={'Enzyme logo'} />
-          <InfoOutlineIcon color={'purple.01'} />
-        </HStack>
-        <Button
-          variant={'depositBTC'}
-          // _hover={{ bg: 'orange.01', color: 'white.01' }}
-          onClick={() => handleSelectVaultTypeClick(vaultType)}
-        >
-          <HStack>
-            <Image src={'/images/deposit-img.png'} alt={'Deposit image'} />
-            <Text fontSize={'lg'} fontWeight={'800'} color={'white.01'}>
-              Deposit BTC
-            </Text>
-          </HStack>
-        </Button>
+        <VaultTypeBoxHeader imgPath={vaultTypeLogoUrl} name={vaultType} />
+        <VaultTypeBoxButton
+          vaultType={vaultType}
+          handleSelectVaultTypeClick={handleSelectVaultTypeClick}
+        />
       </HStack>
       <HStack alignItems={'flex-start'} w={'100%'}>
         <VStack alignItems={'flex-start'} w={'30%'}>
diff --git a/src/app/components/one-click-yield-container/components/one-click-yield-transaction-form/components/one-click-yield-container.transaction-form.bitcoin-funds-information-stack.tsx b/src/app/components/one-click-yield-container/components/one-click-yield-transaction-form/components/one-click-yield-container.transaction-form.bitcoin-funds-information-stack.tsx
index 811c9561..0a8d3c94 100644
--- a/src/app/components/one-click-yield-container/components/one-click-yield-transaction-form/components/one-click-yield-container.transaction-form.bitcoin-funds-information-stack.tsx
+++ b/src/app/components/one-click-yield-container/components/one-click-yield-transaction-form/components/one-click-yield-container.transaction-form.bitcoin-funds-information-stack.tsx
@@ -3,6 +3,8 @@ import { HStack, Text } from '@chakra-ui/react';
 
 interface BitcoinFundsInformationStackProps {
   bitcoinAmount: number;
+  transactionType: 'mint' | 'burn';
+  transactionStep: 0 | 1 | 2;
 }
 
 export function BitcoinFundsInformationStack({
diff --git a/src/app/components/one-click-yield-container/components/one-click-yield-transaction-form/components/one-click-yield-container.transaction-form.protocol-fee-stack.tsx b/src/app/components/one-click-yield-container/components/one-click-yield-transaction-form/components/one-click-yield-container.transaction-form.protocol-fee-stack.tsx
index 35b37d5b..cffd9b58 100644
--- a/src/app/components/one-click-yield-container/components/one-click-yield-transaction-form/components/one-click-yield-container.transaction-form.protocol-fee-stack.tsx
+++ b/src/app/components/one-click-yield-container/components/one-click-yield-transaction-form/components/one-click-yield-container.transaction-form.protocol-fee-stack.tsx
@@ -7,6 +7,8 @@ interface ProtocolFeeStackProps {
   protocolFeeBasisPoints: number;
   bitcoinAmount: number;
   bitcoinUSDPrice: number;
+  // transactionType: 'mint' | 'burn';
+  // transactonStep: 0 | 1 | 2;
 }
 
 function calculateProtocolFeeAmountInUSD(
@@ -30,6 +32,8 @@ export function ProtocolFeeStack({
   protocolFeeBasisPoints,
   bitcoinAmount,
   bitcoinUSDPrice,
+  // transactionType,
+  // transactonStep,
 }: ProtocolFeeStackProps): React.JSX.Element | false {
   return (
     <VStack
diff --git a/src/app/components/one-click-yield-container/components/one-click-yield-transaction-form/one-click-yield-container.transaction-form.tsx.tsx b/src/app/components/one-click-yield-container/components/one-click-yield-transaction-form/one-click-yield-container.transaction-form.tsx.tsx
index 6cd4e784..feb3ddd2 100644
--- a/src/app/components/one-click-yield-container/components/one-click-yield-transaction-form/one-click-yield-container.transaction-form.tsx.tsx
+++ b/src/app/components/one-click-yield-container/components/one-click-yield-transaction-form/one-click-yield-container.transaction-form.tsx.tsx
@@ -165,18 +165,14 @@ export function OneClickYieldTransactionForm({
             />
           </VStack>
           <ProtocolFeeStack
-            transactionType={transactionType}
-            transactionStep={transactionStep}
             protocolFeeBasisPoints={12}
             bitcoinAmount={currentFieldValue}
             bitcoinUSDPrice={bitcoinUSDPrice}
-            bitcoinWalletLoadingState={bitcoinWalletLoadingState}
           />
           <BitcoinFundsInformationStack
             transactionType={transactionType}
             transactionStep={transactionStep}
             bitcoinAmount={currentFieldValue}
-            bitcoinWalletLoadingState={bitcoinWalletLoadingState}
           />
           <TransactionScreenWalletInformation isBitcoinWalletLoading={bitcoinWalletLoadingState} />
           <SubmitButtonGroup
diff --git a/src/app/components/one-click-yield-container/one-click-yield-background.tsx b/src/app/components/one-click-yield-container/one-click-yield-background.tsx
deleted file mode 100644
index 6056ead2..00000000
--- a/src/app/components/one-click-yield-container/one-click-yield-background.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { Box } from '@chakra-ui/react';
-
-const BackgroundTextComponent = () => {
-  return (
-    <Box
-      position="relative"
-      width="300px" // Adjust as needed
-      height="200px" // Adjust as needed
-      bg="gray.100" // Base background color
-      overflow="hidden"
-    >
-      <Box
-        as="span"
-        position="absolute"
-        top="50%"
-        left="50%"
-        transform="translate(-50%, -50%) rotate(45deg)"
-        fontSize="3xl" // Adjust as needed
-        color="rgba(0, 0, 0, 0.1)" // Low opacity text
-        whiteSpace="nowrap"
-        pointerEvents="none"
-      >
-        One Click Yield
-      </Box>
-    </Box>
-  );
-};
-
-export default BackgroundTextComponent;
diff --git a/src/app/pages/one-click-yield/one-click-yield.page.tsx b/src/app/pages/one-click-yield/one-click-yield.page.tsx
index 6c8b8b57..4376b0b4 100644
--- a/src/app/pages/one-click-yield/one-click-yield.page.tsx
+++ b/src/app/pages/one-click-yield/one-click-yield.page.tsx
@@ -13,7 +13,7 @@ export function OneClickYieldPage(): React.JSX.Element {
   return (
     <PageLayout>
       <HStack w={breakpoints} justifyContent={'space-between'}>
-        <OneClickYieldContainer userOneClickYieldVaults={userOneClickYieldVaults} />
+        <OneClickYieldContainer />
         <OneClickYieldVaultContainer userOneClickYieldVaults={userOneClickYieldVaults} />
       </HStack>
     </PageLayout>