Merge pull request #6 from DLC-link/feat/unmint

feat: added unmint flow
DLC-link · Nov 20, 2023 · c3c38a0 · c3c38a0
2 parents 14e3fab + a1c7e18
commit c3c38a0
Show file tree

Hide file tree

Showing 48 changed files with 809 additions and 557 deletions.
diff --git a/index.html b/index.html
@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg" href="/images/logos/dlc-link-logo.svg">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>DLC.Link dlcBTC Website</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/app/components/custom-skeleton/custom-skeleton.tsx b/src/app/components/custom-skeleton/custom-skeleton.tsx
@@ -1,24 +1,18 @@
-import { ReactNode } from "react";
-
 import { Skeleton } from "@chakra-ui/react";
 
 interface CustomSkeletonProps {
-  children: ReactNode;
-  isLoaded: boolean;
+  height: string;
 }
 
 export function CustomSkeleton({
-  children,
-  isLoaded,
+  height,
 }: CustomSkeletonProps): React.JSX.Element {
   return (
     <Skeleton
       startColor={"white.02"}
       endColor={"white.03"}
-      isLoaded={isLoaded}
       w={"100%"}
-    >
-      {children}
-    </Skeleton>
+      h={height}
+    />
   );
 }
diff --git a/...ction-form/components/transaction-fee.tsx → ...s/lock-screen/components/protocol-fee.tsx b/...ction-form/components/transaction-fee.tsx → ...s/lock-screen/components/protocol-fee.tsx
@@ -1,7 +1,7 @@
 import { HStack, Text, VStack } from "@chakra-ui/react";
 
-interface TransactionFeeProps {
-  amount: number;
+interface LockScreenProtocolFeeProps {
+  assetAmount?: number;
 }
 
 function calculateProtocolFee(
@@ -12,35 +12,37 @@ function calculateProtocolFee(
 }
 
 function calculateProtocolFeeInUSD(
-  amount: number,
+  assetAmount: number,
   usdPrice: number,
   protocolFeePercentage: number,
 ): string {
-  return (amount * protocolFeePercentage * usdPrice).toFixed(8);
+  return (assetAmount * protocolFeePercentage * usdPrice).toFixed(8);
 }
 
-export function TransactionFee({
-  amount,
-}: TransactionFeeProps): React.JSX.Element {
+export function LockScreenProtocolFee({
+  assetAmount,
+}: LockScreenProtocolFeeProps): React.JSX.Element {
   return (
     <VStack
       alignItems={"end"}
       p={"15px"}
-      borderRadius={"md"}
       w={"100%"}
       border={"1px solid"}
+      borderRadius={"md"}
       borderColor={"border.cyan.01"}
     >
       <HStack justifyContent={"space-between"} w={"100%"}>
         <Text color={"white.02"} fontSize={"sm"}>
           Protocol Fee
         </Text>
         <Text color={"white.01"} fontSize={"sm"} fontWeight={800}>
-          {calculateProtocolFee(amount, 0.0001)} BTC
+          {assetAmount && calculateProtocolFee(assetAmount, 0.0001)} BTC
         </Text>{" "}
       </HStack>
       <Text color={"white.01"} fontSize={"sm"}>
-        = {calculateProtocolFeeInUSD(amount, 36.142, 0.0001)} $
+        ={" "}
+        {assetAmount && calculateProtocolFeeInUSD(assetAmount, 36.142, 0.0001)}{" "}
+        $
       </Text>
     </VStack>
   );

diff --git a/src/app/components/mint-unmint/components/lock-screen/lock-screen.tsx b/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>
+  );
+}
diff --git a/src/app/components/mint-unmint/components/mint/components/video.tsx b/src/app/components/mint-unmint/components/mint/components/video.tsx
diff --git a/src/app/components/mint-unmint/components/mint/mint.tsx b/src/app/components/mint-unmint/components/mint/mint.tsx
@@ -1,26 +1,38 @@
 import { useState } from "react";
 
 import { HStack } from "@chakra-ui/react";
+import { StepButton } from "@components/step-button/step-button";
+import { VaultStatus } from "@models/vault";
 
-import { mintStepsContent } from "@shared/constants/walkthrough-steps";
+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";
 
 export function Mint(): React.JSX.Element {
   const [currentStep, setCurrentStep] = useState(0);
+  const exampleVault = exampleVaults.find(
+    (vault) => vault.state === VaultStatus.FUNDING,
+  );
 
   return (
     <MintLayout>
       <ProgressTimeline variant={"mint"} currentStep={currentStep} />
       <HStack w={"100%"} alignItems={"start"} justifyContent={"space-between"}>
-        <Walkthrough step={currentStep} {...mintStepsContent[currentStep]} />
-        <TransactionForm currentStep={currentStep} />
-        {currentStep === 2 && <TransactionSummary />}
+        <Walkthrough flow={"mint"} currentStep={currentStep} />
+        {[0].includes(currentStep) && <TransactionForm />}
+        {[1].includes(currentStep) && <LockScreen />}
+        {[2].includes(currentStep) && (
+          <TransactionSummary
+            flow={"mint"}
+            blockchain={"ethereum"}
+            vault={exampleVault}
+          />
+        )}
       </HStack>
       <StepButton handleClick={() => setCurrentStep((currentStep + 1) % 3)} />
     </MintLayout>

diff --git a/...nts/progress-timeline/components/step.tsx → ...ine/components/progress-timeline-step.tsx b/...nts/progress-timeline/components/step.tsx → ...ine/components/progress-timeline-step.tsx
diff --git a/src/app/components/mint-unmint/components/progress-timeline/progress-timeline.tsx b/src/app/components/mint-unmint/components/progress-timeline/progress-timeline.tsx
@@ -1,6 +1,6 @@
 import { HStack, VStack } from "@chakra-ui/react";
 
-import { StepGraphics, StepText } from "./components/step";
+import { StepGraphics, StepText } from "./components/progress-timeline-step";
 
 interface ProgressTimelineProps {
   variant: "mint" | "unmint";

diff --git a/...n-stack/components/wallet-requirement.tsx → .../setup-information-wallet-requirement.tsx b/...n-stack/components/wallet-requirement.tsx → .../setup-information-wallet-requirement.tsx
@@ -1,20 +1,20 @@
 import { HStack, Image, Text, VStack } from "@chakra-ui/react";
 
-interface WalletRequirementProps {
+interface SetupInformationWalletRequirementProps {
   logo: string;
   color: string;
   walletName: string;
   requirement: string;
   url: string;
 }
 
-export function WalletRequirement({
+export function SetupInformationWalletRequirement({
   logo,
   color,
   walletName,
   requirement,
   url,
-}: WalletRequirementProps): React.JSX.Element {
+}: SetupInformationWalletRequirementProps): React.JSX.Element {
   return (
     <VStack w={"100%"} spacing={"0.5px"}>
       <HStack alignContent={"start"} w={"100%"}>

diff --git a/...app/components/mint-unmint/components/setup-information-stack/setup-information-stack.tsx b/...app/components/mint-unmint/components/setup-information-stack/setup-information-stack.tsx
@@ -6,7 +6,7 @@ import { Button, HStack, Image, Text, VStack } from "@chakra-ui/react";
 import { modalActions } from "@store/slices/modal/modal.actions";
 
 import { SetupInformationStackLayout } from "./components/setup-information-stack.layout";
-import { WalletRequirement } from "./components/wallet-requirement";
+import { SetupInformationWalletRequirement } from "./components/setup-information-wallet-requirement";
 
 export function SetupInformationStack(): React.JSX.Element {
   const navigate = useNavigate();
@@ -39,14 +39,14 @@ export function SetupInformationStack(): React.JSX.Element {
           <Text color={"white"} fontSize={"lg"} fontWeight={600}>
             What you will need:
           </Text>
-          <WalletRequirement
+          <SetupInformationWalletRequirement
             logo={"/images/logos/ethereum-logo.svg"}
             color={"accent.cyan.01"}
             walletName={"Metamask Wallet"}
             requirement={"+ETH (for fee)"}
             url={"https://metamask.io/"}
           />
-          <WalletRequirement
+          <SetupInformationWalletRequirement
             logo={"/images/logos/bitcoin-logo.svg"}
             color={"accent.orange.01"}
             walletName={"Leather Wallet"}

diff --git a/...ion-form/components/transaction-input.tsx → ...orm/components/transaction-form-input.tsx b/...ion-form/components/transaction-input.tsx → ...orm/components/transaction-form-input.tsx
@@ -1,19 +1,25 @@
 import { HStack, Image, Input, Text, VStack } from "@chakra-ui/react";
 import { Field } from "formik";
-import {
-  TransactionFormValues,
-  blockchainFormPropertyMap,
-} from "../transaction-form";
 
-interface TransactionInputProps {
-  blockchain: "ethereum" | "bitcoin";
+import { TransactionFormValues } from "../transaction-form";
+
+function validateTokenAmount(value: number): string | undefined {
+  let error;
+  if (!value) {
+    error = "Please enter an amount of dlcBTC you would like to mint";
+  } else if (value < 0.0001) {
+    error = "You can't mint less than 0.0001 dlcBTC";
+  }
+  return error;
+}
+
+interface TransactionFormInputProps {
   values: TransactionFormValues;
 }
 
-export function TransactionInput({
-  blockchain,
+export function TransactionFormInput({
   values,
-}: TransactionInputProps): React.JSX.Element {
+}: TransactionFormInputProps): React.JSX.Element {
   return (
     <VStack
       alignItems={"start"}
@@ -27,8 +33,8 @@ export function TransactionInput({
     >
       <HStack>
         <Image
-          src={blockchainFormPropertyMap[blockchain].logo}
-          alt={blockchainFormPropertyMap[blockchain].alt}
+          src={"/images/logos/dlc-btc-logo.svg"}
+          alt={"dlcBTC"}
           boxSize={"20px"}
         />
         <Field
@@ -39,10 +45,11 @@ export function TransactionInput({
           px={"1.5px"}
           h={"25px"}
           w={"75px"}
-          focusBorderColor="rgba(7,232,216,1)"
+          borderColor={"white.01"}
+          focusBorderColor={"white.01"}
           fontSize={"xl"}
           fontWeight={800}
-          validate={blockchainFormPropertyMap[blockchain].validateFn}
+          validate={validateTokenAmount}
         />
         <Text fontSize={"xl"}>dlcBTC</Text>
       </HStack>

diff --git a/...s/transaction-form/components/warning.tsx → ...m/components/transaction-form-warning.tsx b/...s/transaction-form/components/warning.tsx → ...m/components/transaction-form-warning.tsx
@@ -1,18 +1,17 @@
 import { HStack, Link, Text } from "@chakra-ui/react";
 
-interface WarningProps {
-  blockchain: "ethereum" | "bitcoin";
+interface TransactionFormWarningProps {
+  assetAmount: number;
 }
 
-export function Warning({
-  blockchain,
-}: WarningProps): React.JSX.Element | boolean {
-  if (blockchain === "bitcoin") return false;
+export function TransactionFormWarning({
+  assetAmount,
+}: TransactionFormWarningProps): React.JSX.Element {
   return (
     <HStack p={"15px"} bgColor={"white.03"} borderRadius={"md"}>
       <Text color={"white.01"} fontSize={"sm"}>
         <span style={{ fontWeight: 800 }}>
-          Make sure you have 10.00 BTC + (fees){" "}
+          Make sure you have {assetAmount} BTC + (fees){" "}
         </span>
         in your{" "}
         <Link