feat: separated lockScreen from transactionForm

src/app/components/mint-unmint/components/transaction-form/components/transaction-form-fee.tsx → src/app/components/mint-unmint/components/lock-screen/components/protocol-fee.tsx

@@ -1,7 +1,7 @@
 import { HStack, Text, VStack } from "@chakra-ui/react";
 
-interface TransactionFormFeeProps {
-  assetAmount: number;
+interface LockScreenProtocolFeeProps {
+  assetAmount?: number;
 }
 
 function calculateProtocolFee(
@@ -19,9 +19,9 @@ function calculateProtocolFeeInUSD(
   return (assetAmount * protocolFeePercentage * usdPrice).toFixed(8);
 }
 
-export function TransactionFormFee({
+export function LockScreenProtocolFee({
   assetAmount,
-}: TransactionFormFeeProps): React.JSX.Element {
+}: LockScreenProtocolFeeProps): React.JSX.Element {
   return (
     <VStack
       alignItems={"end"}
@@ -36,11 +36,13 @@ export function TransactionFormFee({
           Protocol Fee
         </Text>
         <Text color={"white.01"} fontSize={"sm"} fontWeight={800}>
-          {calculateProtocolFee(assetAmount, 0.0001)} BTC
+          {assetAmount && calculateProtocolFee(assetAmount, 0.0001)} BTC
         </Text>{" "}
       </HStack>
       <Text color={"white.01"} fontSize={"sm"}>
-        = {calculateProtocolFeeInUSD(assetAmount, 36.142, 0.0001)} $
+        ={" "}
+        {assetAmount && calculateProtocolFeeInUSD(assetAmount, 36.142, 0.0001)}{" "}
+        $
       </Text>
     </VStack>
   );

src/app/components/mint-unmint/components/lock-screen/lock-screen.tsx

@@ -0,0 +1,30 @@
+import { Button, VStack } from "@chakra-ui/react";
+import { VaultCard } from "@components/vault/vault-card";
+import { VaultStatus } from "@models/vault";
+
+import { exampleVaults } from "@shared/examples/example-vaults";
+
+import { LockScreenProtocolFee } from "./components/protocol-fee";
+
+export function LockScreen(): React.JSX.Element {
+  const exampleVault = exampleVaults.find(
+    (vault) => vault.state === VaultStatus.READY,
+  );
+
+  return (
+    <VStack w={"300px"} spacing={"15px"}>
+      <VaultCard vault={exampleVault} isSelected />
+      <LockScreenProtocolFee assetAmount={exampleVault?.collateral} />
+      <Button
+        variant={"account"}
+        onClick={() =>
+          alert(
+            "In production your Bitcoin Wallet would now open to confirm the transaction",
+          )
+        }
+      >
+        Lock BTC
+      </Button>
+    </VStack>
+  );
+}

src/app/components/mint-unmint/components/mint/mint.tsx

@@ -1,16 +1,17 @@
 import { useState } from "react";
 
 import { HStack } from "@chakra-ui/react";
+import { StepButton } from "@components/step-button/step-button";
 import { VaultStatus } from "@models/vault";
 
 import { exampleVaults } from "@shared/examples/example-vaults";
 
+import { LockScreen } from "../lock-screen/lock-screen";
 import { ProgressTimeline } from "../progress-timeline/progress-timeline";
 import { TransactionForm } from "../transaction-form/transaction-form";
 import { TransactionSummary } from "../transaction-summary/transaction-summary";
 import { Walkthrough } from "../walkthrough/walkthrough";
 import { MintLayout } from "./components/mint.layout";
-import { StepButton } from "@components/step-button/step-button";
 
 export function Mint(): React.JSX.Element {
   const [currentStep, setCurrentStep] = useState(0);
@@ -23,9 +24,8 @@ export function Mint(): React.JSX.Element {
       <ProgressTimeline variant={"mint"} currentStep={currentStep} />
       <HStack w={"100%"} alignItems={"start"} justifyContent={"space-between"}>
         <Walkthrough flow={"mint"} currentStep={currentStep} />
-        {[0, 1].includes(currentStep) && (
-          <TransactionForm currentStep={currentStep} />
-        )}
+        {[0].includes(currentStep) && <TransactionForm />}
+        {[1].includes(currentStep) && <LockScreen />}
         {[2].includes(currentStep) && (
           <TransactionSummary
             flow={"mint"}

src/app/components/mint-unmint/components/transaction-form/transaction-form.tsx

@@ -5,101 +5,46 @@ import {
   Text,
   VStack,
 } from "@chakra-ui/react";
-import { VaultCard } from "@components/vault/vault-card";
-import { useVaults } from "@hooks/use-vaults";
 import { Form, Formik } from "formik";
 
-import { TransactionFormFee } from "./components/transaction-form-fee";
 import { TransactionFormInput } from "./components/transaction-form-input";
 import { TransactionFormWarning } from "./components/transaction-form-warning";
 
-interface TransactionFormProps {
-  currentStep: number;
-}
-
 export interface TransactionFormValues {
   amount: number;
 }
 
-const blockchainFormPropertyMap = {
-  ethereum: {
-    title: "Amount of dlcBTC you want to mint",
-    buttonText: "Create Vault",
-    logo: "/images/logos/dlc-btc-logo.svg",
-    alt: "dlcBTC",
-    submitFnText:
-      "In production your Ethereum Wallet would now open to confirm the transaction",
-  },
-  bitcoin: {
-    title: "Amount of BTC you will lock",
-    buttonText: "Lock Bitcoin",
-    logo: "/images/logos/bitcoin-logo.svg",
-    alt: "Bitcoin",
-    submitFnText:
-      "In production your Bitcoin Wallet would now open to confirm the transaction",
-  },
-};
-
 const initialValues: TransactionFormValues = { amount: 0.001 };
 
-export function TransactionForm({
-  currentStep,
-}: TransactionFormProps): React.JSX.Element {
-  const { readyVaults } = useVaults();
-  const exampleVault = readyVaults[0];
-
-  let blockchain: "ethereum" | "bitcoin";
-
-  switch (currentStep) {
-    case 0:
-      blockchain = "ethereum";
-      break;
-    case 1:
-      blockchain = "bitcoin";
-      break;
-    default:
-      return <></>;
-  }
-
-  //TODO: Separate the bitcoin and ethereum cases into two separate functions
-
+export function TransactionForm(): React.JSX.Element {
   return (
     <VStack w={"300px"}>
       <Formik
         initialValues={initialValues}
         onSubmit={() => {
-          alert(blockchainFormPropertyMap[blockchain].submitFnText);
+          alert(
+            "In production your Ethereum Wallet would now open to confirm the transaction",
+          );
         }}
       >
         {({ handleSubmit, errors, touched, values }) => (
           <Form onSubmit={handleSubmit}>
             <FormControl isInvalid={!!errors.amount && touched.amount}>
               <VStack spacing={"15px"} w={"300px"}>
                 <Text w={"100%"} color={"accent.cyan.01"}>
-                  {blockchainFormPropertyMap[blockchain].title}
+                  Amount of dlcBTC you want to mint:
                 </Text>
-                {blockchain === "ethereum" ? (
-                  <TransactionFormInput values={values} />
-                ) : (
-                  <VaultCard vault={exampleVault} isSelectable isSelected />
-                )}
-                {["ethereum"].includes(blockchain) && (
-                  <FormErrorMessage fontSize={"xs"}>
-                    {errors.amount}
-                  </FormErrorMessage>
-                )}
-                {["ethereum"].includes(blockchain) && (
-                  <TransactionFormWarning assetAmount={values.amount} />
-                )}
-                {["bitcoin"].includes(blockchain) && (
-                  <TransactionFormFee assetAmount={values.amount} />
-                )}
+                <TransactionFormInput values={values} />
+                <FormErrorMessage fontSize={"xs"}>
+                  {errors.amount}
+                </FormErrorMessage>
+                <TransactionFormWarning assetAmount={values.amount} />
                 <Button
                   variant={"account"}
                   type={"submit"}
                   isDisabled={Boolean(errors.amount)}
                 >
-                  {blockchainFormPropertyMap[blockchain].buttonText}
+                  Create Vault
                 </Button>
               </VStack>
             </FormControl>

src/app/components/mint-unmint/components/unmint/components/unmint-vault-selector.tsx

@@ -58,7 +58,15 @@ export function UnmintVaultSelector(): React.JSX.Element {
           />
         </VaultsList>
       )}
-      <Button variant={"account"} isDisabled={!selectedVault}>
+      <Button
+        variant={"account"}
+        isDisabled={!selectedVault}
+        onClick={() =>
+          alert(
+            "In production your Ethereum Wallet would now open to confirm the transaction",
+          )
+        }
+      >
         Unmint dlcBTC
       </Button>
     </VStack>

src/app/components/tutorial-video/tutorial-video.tsx

@@ -11,8 +11,8 @@ export function TutorialVideo(): React.JSX.Element {
   };
 
   const opts: YouTubeProps["opts"] = {
-    height: "150",
-    width: "245",
+    height: "100",
+    width: "200",
     playerVars: {
       autoplay: 0,
       controls: 1,
@@ -21,19 +21,19 @@ export function TutorialVideo(): React.JSX.Element {
 
   return (
     <VStack alignItems={"start"}>
-      <Text color={"accent.cyan.01"} fontSize={"lg"}>
+      <Text color={"accent.cyan.01"} fontSize={"md"}>
         Watch explainer video:
       </Text>
       <Skeleton
         isLoaded={!isLoading}
         startColor={"white.02"}
         endColor={"white.03"}
-        w={"250px"}
-        h={"150px"}
+        h={"100px"}
+        w={"205px"}
       >
         <VStack
           justifyContent={"center"}
-          w={"250px"}
+          w={"205px"}
           border={"2.5px solid"}
           borderColor={"border.white.01"}
           borderRadius={"lg"}