feat: modified progress bar, modified fontweights

DLC-link · Nov 18, 2023 · 14e3fab · 14e3fab
1 parent 48b242a
commit 14e3fab
Show file tree

Hide file tree

Showing 31 changed files with 195 additions and 158 deletions.
diff --git a/src/app/components/mint-unmint/components/mint/components/step-button.tsx b/src/app/components/mint-unmint/components/mint/components/step-button.tsx
@@ -8,7 +8,7 @@ export function StepButton({
 }: StepButtonProps): React.JSX.Element {
   return (
     <Button
-      variant={"action"}
+      variant={"vault"}
       h={"5px"}
       w={"15px"}
       borderColor={"white.03"}

diff --git a/src/app/components/mint-unmint/components/mint/mint.tsx b/src/app/components/mint-unmint/components/mint/mint.tsx
@@ -17,18 +17,9 @@ export function Mint(): React.JSX.Element {
   return (
     <MintLayout>
       <ProgressTimeline variant={"mint"} currentStep={currentStep} />
-      <HStack
-        w={"100%"}
-        alignContent={"start"}
-        alignItems={"start"}
-        justifyContent={"space-between"}
-      >
+      <HStack w={"100%"} alignItems={"start"} justifyContent={"space-between"}>
         <Walkthrough step={currentStep} {...mintStepsContent[currentStep]} />
-        {[0, 1].includes(currentStep) && (
-          <TransactionForm
-            blockchain={currentStep === 0 ? "ethereum" : "bitcoin"}
-          />
-        )}
+        <TransactionForm currentStep={currentStep} />
         {currentStep === 2 && <TransactionSummary />}
       </HStack>
       <StepButton handleClick={() => setCurrentStep((currentStep + 1) % 3)} />

diff --git a/src/app/components/mint-unmint/components/progress-timeline/components/step.tsx b/src/app/components/mint-unmint/components/progress-timeline/components/step.tsx
@@ -65,7 +65,7 @@ export function StepText({
     <Text
       color={currentStep >= stepIndex ? "accent.cyan.01" : "white.01"}
       fontSize={"xs"}
-      fontWeight={currentStep === stepIndex ? "extrabold" : "regular"}
+      fontWeight={currentStep === stepIndex ? 800 : 400}
       opacity={currentStep > stepIndex ? "50%" : "100%"}
     >
       {title}

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
@@ -36,7 +36,7 @@ export function SetupInformationStack(): React.JSX.Element {
           ></Image>
         </VStack>
         <VStack h={"150px"} spacing={"6.5px"}>
-          <Text color={"white"} fontSize={"lg"} fontWeight={"bold"}>
+          <Text color={"white"} fontSize={"lg"} fontWeight={600}>
             What you will need:
           </Text>
           <WalletRequirement

diff --git a/src/app/components/mint-unmint/components/transaction-form/components/transaction-fee.tsx b/src/app/components/mint-unmint/components/transaction-form/components/transaction-fee.tsx
@@ -35,7 +35,7 @@ export function TransactionFee({
         <Text color={"white.02"} fontSize={"sm"}>
           Protocol Fee
         </Text>
-        <Text color={"white.01"} fontSize={"sm"} fontWeight={"bold"}>
+        <Text color={"white.01"} fontSize={"sm"} fontWeight={800}>
           {calculateProtocolFee(amount, 0.0001)} BTC
         </Text>{" "}
       </HStack>

diff --git a/src/app/components/mint-unmint/components/transaction-form/components/transaction-input.tsx b/src/app/components/mint-unmint/components/transaction-form/components/transaction-input.tsx
@@ -0,0 +1,54 @@
+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";
+  values: TransactionFormValues;
+}
+
+export function TransactionInput({
+  blockchain,
+  values,
+}: TransactionInputProps): React.JSX.Element {
+  return (
+    <VStack
+      alignItems={"start"}
+      py={"5px"}
+      px={"15px"}
+      w={"100%"}
+      bgColor={"white.01"}
+      border={"2.5px solid"}
+      borderRadius={"md"}
+      borderColor={"border.cyan.01"}
+    >
+      <HStack>
+        <Image
+          src={blockchainFormPropertyMap[blockchain].logo}
+          alt={blockchainFormPropertyMap[blockchain].alt}
+          boxSize={"20px"}
+        />
+        <Field
+          autoFocus
+          name="amount"
+          as={Input}
+          type="number"
+          px={"1.5px"}
+          h={"25px"}
+          w={"75px"}
+          focusBorderColor="rgba(7,232,216,1)"
+          fontSize={"xl"}
+          fontWeight={800}
+          validate={blockchainFormPropertyMap[blockchain].validateFn}
+        />
+        <Text fontSize={"xl"}>dlcBTC</Text>
+      </HStack>
+      <Text pl={"30px"} color={"gray"} fontSize={"sm"}>
+        = ~{(values.amount * 36131.1).toFixed(4)}$
+      </Text>
+    </VStack>
+  );
+}
diff --git a/src/app/components/mint-unmint/components/transaction-form/components/warning.tsx b/src/app/components/mint-unmint/components/transaction-form/components/warning.tsx
@@ -1,21 +1,28 @@
 import { HStack, Link, Text } from "@chakra-ui/react";
 
-export function Warning(): React.JSX.Element {
+interface WarningProps {
+  blockchain: "ethereum" | "bitcoin";
+}
+
+export function Warning({
+  blockchain,
+}: WarningProps): React.JSX.Element | boolean {
+  if (blockchain === "bitcoin") return false;
   return (
-    <HStack bgColor={"white.03"} p={"15px"} borderRadius={"md"}>
+    <HStack p={"15px"} bgColor={"white.03"} borderRadius={"md"}>
       <Text color={"white.01"} fontSize={"sm"}>
-        <span style={{ fontWeight: "bold" }}>
+        <span style={{ fontWeight: 800 }}>
           Make sure you have 10.00 BTC + (fees){" "}
         </span>
         in your{" "}
         <Link
-          color={"accent.cyan.01"}
-          href="https://ethereum.org/"
           isExternal
+          href={"https://leather.io/"}
+          color={"accent.orange.01"}
           textDecoration={"underline"}
         >
-          Leather Wallet{" "}
-        </Link>
+          Leather Wallet
+        </Link>{" "}
         before proceeding to the next step.
       </Text>
     </HStack>

diff --git a/src/app/components/mint-unmint/components/transaction-form/transaction-form.tsx b/src/app/components/mint-unmint/components/transaction-form/transaction-form.tsx
@@ -3,28 +3,27 @@ import {
   FormControl,
   FormErrorMessage,
   HStack,
-  Image,
-  Input,
   Text,
   VStack,
 } from "@chakra-ui/react";
-import { Field, Form, Formik } from "formik";
+import { Form, Formik } from "formik";
 
 import { TransactionFee } from "./components/transaction-fee";
+import { TransactionInput } from "./components/transaction-input";
 import { Warning } from "./components/warning";
 
-interface TransactionFormValues {
-  amount: number;
+interface TransactionFormProps {
+  currentStep: number;
 }
 
-interface TransactionFormProps {
-  blockchain: "ethereum" | "bitcoin";
+export interface TransactionFormValues {
+  amount: number;
 }
 
-const blockchainFormPropertyMap = {
+export const blockchainFormPropertyMap = {
   ethereum: {
     title: "Amount of dlcBTC you want to mint",
-    validateFn: validateDlcBtcAmount,
+    validateFn: validateTokenAmount,
     buttonText: "Create Vault",
     logo: "/images/logos/dlc-btc-logo.svg",
     alt: "dlcBTC",
@@ -33,7 +32,7 @@ const blockchainFormPropertyMap = {
   },
   bitcoin: {
     title: "Amount of BTC you want to lock",
-    validateFn: validateBtcAmount,
+    validateFn: validateBitcoinAmount,
     buttonText: "Lock Bitcoin",
     logo: "/images/logos/bitcoin-logo.svg",
     alt: "Bitcoin",
@@ -42,7 +41,7 @@ const blockchainFormPropertyMap = {
   },
 };
 
-function validateDlcBtcAmount(value: number) {
+function validateTokenAmount(value: number): string | undefined {
   let error;
   if (!value) {
     error = "Please enter an amount of dlcBTC you would like to mint";
@@ -52,7 +51,7 @@ function validateDlcBtcAmount(value: number) {
   return error;
 }
 
-function validateBtcAmount(value: number) {
+function validateBitcoinAmount(value: number): string | undefined {
   let error;
   if (!value) {
     error = "Please enter an amount of BTC you would like to lock";
@@ -62,10 +61,23 @@ function validateBtcAmount(value: number) {
   return error;
 }
 
+const initialValues: TransactionFormValues = { amount: 0.001 };
+
 export function TransactionForm({
-  blockchain,
-}: TransactionFormProps): React.JSX.Element {
-  const initialValues: TransactionFormValues = { amount: 0.001 };
+  currentStep,
+}: TransactionFormProps): React.JSX.Element | boolean {
+  let blockchain: "ethereum" | "bitcoin";
+
+  switch (currentStep) {
+    case 0:
+      blockchain = "ethereum";
+      break;
+    case 1:
+      blockchain = "bitcoin";
+      break;
+    default:
+      return false;
+  }
 
   return (
     <VStack w={"300px"}>
@@ -82,50 +94,13 @@ export function TransactionForm({
                 <Text w={"100%"} color={"accent.cyan.01"}>
                   {blockchainFormPropertyMap[blockchain].title}
                 </Text>
-                <VStack
-                  alignItems={"start"}
-                  py={"5px"}
-                  px={"15px"}
-                  w={"100%"}
-                  bgColor={"white.01"}
-                  border={"2.5px solid"}
-                  borderRadius={"md"}
-                  borderColor={"border.cyan.01"}
-                >
-                  <HStack>
-                    <Image
-                      src={blockchainFormPropertyMap[blockchain].logo}
-                      alt={blockchainFormPropertyMap[blockchain].alt}
-                      boxSize={"20px"}
-                    />
-                    <Field
-                      autoFocus
-                      as={Input}
-                      id="amount"
-                      name="amount"
-                      type="number"
-                      px={"1.5px"}
-                      h={"25px"}
-                      w={"80px"}
-                      focusBorderColor="rgba(7,232,216,1)"
-                      fontSize={"xl"}
-                      fontWeight={"bold"}
-                      validate={
-                        blockchainFormPropertyMap[blockchain].validateFn
-                      }
-                    />
-                    <Text fontSize={"xl"}>dlcBTC</Text>
-                  </HStack>
-                  <Text pl={"30px"} color={"gray"} fontSize={"sm"}>
-                    = ~{(values.amount * 36131.1).toFixed(4)}$
-                  </Text>
-                </VStack>
+                <TransactionInput blockchain={blockchain} values={values} />
                 <HStack alignItems={"start"} w={"100%"}>
                   <FormErrorMessage fontSize={"xs"}>
                     {errors.amount}
                   </FormErrorMessage>
                 </HStack>
-                {blockchain === "ethereum" && <Warning />}
+                <Warning blockchain={blockchain} />
                 {blockchain === "bitcoin" && (
                   <TransactionFee amount={values.amount} />
                 )}

diff --git a/...ction-summary/components/dlc-btc-card.tsx → ...ction-summary/components/preview-card.tsx b/...ction-summary/components/dlc-btc-card.tsx → ...ction-summary/components/preview-card.tsx
@@ -1,6 +1,6 @@
 import { HStack, Image, Text, VStack } from "@chakra-ui/react";
 
-export function DlcBtcCard(): React.JSX.Element {
+export function PreviewCard(): React.JSX.Element {
   return (
     <VStack
       justifyContent={"center"}
@@ -18,9 +18,9 @@ export function DlcBtcCard(): React.JSX.Element {
         <Image
           src={"/images/logos/dlc-btc-logo.svg"}
           alt={"dlcBTC"}
-          boxSize={"20px"}
+          boxSize={"25px"}
         />
-        <Text color={"white"} fontWeight={"extrabold"}>
+        <Text color={"white"} fontWeight={800}>
           10.00 dlcBTC
         </Text>
       </HStack>

diff --git a/src/app/components/mint-unmint/components/transaction-summary/transaction-summary.tsx b/src/app/components/mint-unmint/components/transaction-summary/transaction-summary.tsx
@@ -6,7 +6,7 @@ import { VaultStatus } from "@models/vault";
 
 import { exampleVaults } from "@shared/examples/example-vaults";
 
-import { DlcBtcCard } from "./components/dlc-btc-card";
+import { PreviewCard } from "./components/preview-card";
 
 export function TransactionSummary(): React.JSX.Element {
   const navigate = useNavigate();
@@ -22,7 +22,7 @@ export function TransactionSummary(): React.JSX.Element {
       </HStack>
       {exampleVault && <VaultCard {...exampleVault} />}
       <Text color={"white.01"}>b) Minting dlcBTC:</Text>
-      <DlcBtcCard />
+      <PreviewCard />
       <Text color={"white.01"}>
         You can follow the status of the mint under{" "}
         <Link

diff --git a/src/app/components/mint-unmint/components/walkthrough/components/blockchain-tag.tsx b/src/app/components/mint-unmint/components/walkthrough/components/blockchain-tag.tsx
@@ -25,7 +25,7 @@ export function BlockchainTag({
         alt={"Ethereum"}
         boxSize={"15px"}
       />
-      <Text color={"white.01"} fontSize={"2xs"} fontWeight={"bold"}>
+      <Text color={"white.01"} fontSize={"2xs"} fontWeight={800}>
         {blockchainTagPropertyMap[blockchain].text}
       </Text>
     </HStack>

diff --git a/src/app/components/mint-unmint/components/walkthrough/walkthrough.tsx b/src/app/components/mint-unmint/components/walkthrough/walkthrough.tsx
@@ -32,7 +32,7 @@ export function Walkthrough({
         </Text>
         <BlockchainTag blockchain={blockchain} />
       </HStack>
-      <Text color={"white.01"} fontSize={"lg"} fontWeight={"bold"}>
+      <Text color={"white.01"} fontSize={"lg"} fontWeight={800}>
         {title}
       </Text>
       {primaryBody}

diff --git a/.../components/my-vaults-large/components/my-vaults-large-header/components/balance-info.tsx b/.../components/my-vaults-large/components/my-vaults-large-header/components/balance-info.tsx
@@ -18,13 +18,13 @@ export function BalanceInfo({
 }: BalanceInfoProps): React.JSX.Element {
   return (
     <VStack justifyContent={"center"} alignItems={"start"} w={"35%"} h={"100%"}>
-      <Text color={"accent.cyan.01"} fontWeight={"bold"} fontSize={"md"}>
+      <Text color={"accent.cyan.01"} fontWeight={600} fontSize={"md"}>
         {title}
       </Text>
       <CustomSkeleton isLoaded={number !== undefined}>
         <HStack>
           <Image src={imageSrc} alt={altText} boxSize={"25px"} />
-          <Text color={"white"} fontWeight={"extrabold"} fontSize={"xl"}>
+          <Text color={"white"} fontWeight={800} fontSize={"xl"}>
             {showNone ? "-" : number}
           </Text>
         </HStack>

diff --git a/...p/components/my-vaults-large/components/my-vaults-large-header/my-vaults-large-header.tsx b/...p/components/my-vaults-large/components/my-vaults-large-header/my-vaults-large-header.tsx
@@ -21,7 +21,7 @@ export function MyVaultsLargeHeader({
         justifyContent={"space-between"}
         pr={"25px"}
       >
-        <Text color={"white"} fontSize={"4xl"} fontWeight={"extrabold"}>
+        <Text color={"white"} fontSize={"4xl"} fontWeight={600}>
           My Vaults
         </Text>
         <HStack w={"450px"} h={"75%"} justifyContent={"space-between"}>

diff --git a/src/app/components/protocol-history/components/protocol-history-item.tsx b/src/app/components/protocol-history/components/protocol-history-item.tsx
@@ -35,7 +35,7 @@ export function ProtocolHistoryItem(
             alt={"dlcBTC Logo"}
             boxSize={"20px"}
           />
-          <Text color={"white"} fontWeight={"extrabold"}>
+          <Text color={"white"} fontWeight={800}>
             {protocolHistoryItem.value}
           </Text>
           <Text color={"white"} fontSize={"sm"}>