feat: added my vaults page, added conditional loading

DLC-link · Nov 14, 2023 · a17e0d5 · a17e0d5
1 parent ddeb87d
commit a17e0d5
Show file tree

Hide file tree

Showing 46 changed files with 712 additions and 1,939 deletions.
diff --git a/dashboard.patch b/dashboard.patch
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -33,7 +33,6 @@
     "eslint-plugin-import": "^2.29.0",
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-react": "^7.33.2",
-    "framer-motion": "^10.16.4",
     "prettier": "^3.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

diff --git a/src/app/app.tsx b/src/app/app.tsx
@@ -5,14 +5,14 @@ import { ModalContainer } from "@components/modals/components/modal-container";
 
 import { About } from "./pages/about/about";
 import { Dashboard } from "./pages/dashboard/dashboard";
-import { MyDLCBTC } from "@pages/my-dlc-btc/my-dlc-btc";
+import { MyVaults } from "@pages/my-vaults/my-vaults";
 
 export function App(): React.JSX.Element {
   return (
     <>
       <AppLayout>
         <Route path="/" element={<Dashboard />} />
-        <Route path="/my-dlc-btc" element={<MyDLCBTC />} />
+        <Route path="/my-vaults" element={<MyVaults />} />
         <Route path="/how-it-works" element={<About />} />
       </AppLayout>
       <ModalContainer />

diff --git a/src/app/components/custom-skeleton/custom-skeleton.tsx b/src/app/components/custom-skeleton/custom-skeleton.tsx
@@ -13,8 +13,8 @@ export function CustomSkeleton({
 }: CustomSkeletonProps): React.JSX.Element {
   return (
     <Skeleton
-      startColor="accent.01"
-      endColor="accent.02"
+      startColor={"white.02"}
+      endColor={"white.03"}
       isLoaded={isLoaded}
       w={"100%"}
     >

diff --git a/src/app/components/dlc-btc-item/components/vault-box-expand-button.tsx b/src/app/components/dlc-btc-item/components/vault-box-expand-button.tsx
@@ -11,7 +11,7 @@ export function VaultBoxExpandButton({
   handleClick,
 }: VaultBoxExpandButtonProps): React.JSX.Element {
   return (
-    <Button variant={"action"} onClick={() => handleClick()} w={"85px"}>
+    <Button variant={"action"} w={"85px"} onClick={() => handleClick()}>
       <Text color={"white"} fontSize={"sm"}>
         {isExpanded ? "Less" : "More"}
       </Text>

diff --git a/.../components/vault-box-expanded-information-stack/components/vault-box-transaction-row.tsx b/.../components/vault-box-expanded-information-stack/components/vault-box-transaction-row.tsx
@@ -17,7 +17,7 @@ export function TransactionRow({
       <Text
         textAlign={"right"}
         w={"75%"}
-        color={"accent.01"}
+        color={"accent.cyan.01"}
         fontSize={"xs"}
         textDecoration={"underline"}
         onClick={() => window.open(value, "_blank")}

diff --git a/src/app/components/dlc-btc-item/components/vault-box-information-stack.tsx b/src/app/components/dlc-btc-item/components/vault-box-information-stack.tsx
@@ -1,14 +1,12 @@
-import { HStack, Image, Text, VStack } from "@chakra-ui/react";
-import { VaultStatus } from "@models/vault";
+import { Button, HStack, Image, Text, VStack } from '@chakra-ui/react';
+import { VaultStatus } from '@models/vault';
 
-import { VaultBoxExpandButton } from "./vault-box-expand-button";
+import { VaultBoxExpandButton } from './vault-box-expand-button';
 
 const useIcon = (state: VaultStatus) => {
-  return [VaultStatus.FUNDED, VaultStatus.CLOSING, VaultStatus.CLOSED].includes(
-    state,
-  )
-    ? "/images/logos/dlc-btc-logo.svg"
-    : "/images/logos/bitcoin-logo.svg";
+  return [VaultStatus.FUNDED, VaultStatus.CLOSING, VaultStatus.CLOSED].includes(state)
+    ? '/images/logos/dlc-btc-logo.svg'
+    : '/images/logos/bitcoin-logo.svg';
 };
 
 interface VaultBoxInformationStackProps {
@@ -25,22 +23,23 @@ export function VaultBoxInformationStack({
   handleClick,
 }: VaultBoxInformationStackProps): React.JSX.Element {
   return (
-    <HStack justifyContent={"space-between"} w={"100%"}>
-      <VStack alignItems={"start"} spacing={"1.5"} h={"45px"}>
-        <HStack spacing={"15px"} h={"21.25px"}>
-          <Image src={useIcon(state)} alt={"Icon"} boxSize={"20px"} />
-          <Text color={"white"} fontWeight={"extrabold"}>
+    <HStack justifyContent={'space-between'} w={'100%'}>
+      <VStack alignItems={'start'} spacing={'1.5'} h={'45px'}>
+        <HStack spacing={'15px'} h={'21.25px'}>
+          <Image src={useIcon(state)} alt={'Icon'} boxSize={'20px'} />
+          <Text color={'white'} fontWeight={'extrabold'}>
             {collateral} BTC
           </Text>
         </HStack>
-        <Text px={"35px"} py={"0px"} color={"white.02"} fontSize={"sm"}>
+        <Text px={'35px'} py={'0px'} color={'white.02'} fontSize={'sm'}>
           10/10/2023
         </Text>
       </VStack>
-      <VaultBoxExpandButton
-        isExpanded={isExpanded}
-        handleClick={() => handleClick()}
-      />
+      {state === VaultStatus.READY ? (
+        <Button variant={'action'} w={"85px"}>Lock BTC</Button>
+      ) : (
+        <VaultBoxExpandButton isExpanded={isExpanded} handleClick={() => handleClick()} />
+      )}
     </HStack>
   );
 }
diff --git a/src/app/components/dlc-btc-item/components/vault-box.layout.tsx b/src/app/components/dlc-btc-item/components/vault-box.layout.tsx
@@ -20,10 +20,10 @@ export function VaultBoxLayout({
         h={"auto"}
         w={"100%"}
         spacing={"15px"}
-        bgGradient={"linear(to-r, background.04, background.05)"}
+        bgGradient={"linear(to-r, background.content.01, background.content.02)"}
         blendMode={"screen"}
         border={"1px solid"}
-        borderColor={"white.04"}
+        borderColor={"border.white.01"}
         borderRadius={"md"}
       >
         {children}

diff --git a/src/app/components/dlc-btc-item/vault-box.tsx b/src/app/components/dlc-btc-item/vault-box.tsx
@@ -1,26 +1,36 @@
-import React, { useState } from "react";
+import React, { useState } from 'react';
 
-import { useLoadingDelay } from "@hooks/use-loading-delay";
-import { Vault } from "@models/vault";
+import { useLoadingDelay } from '@hooks/use-loading-delay';
+import { Vault, VaultStatus } from '@models/vault';
 
-import { VaultBoxExpandedInformationStack } from "./components/vault-box-expanded-information-stack/vault-box-expanded-information-stack";
-import { VaultBoxInformationStack } from "./components/vault-box-information-stack";
-import { VaultBoxProgressBar } from "./components/vault-box-progress-bar";
-import { VaultBoxLayout } from "./components/vault-box.layout";
+import { VaultBoxExpandedInformationStack } from './components/vault-box-expanded-information-stack/vault-box-expanded-information-stack';
+import { VaultBoxInformationStack } from './components/vault-box-information-stack';
+import { VaultBoxProgressBar } from './components/vault-box-progress-bar';
+import { VaultBoxLayout } from './components/vault-box.layout';
+
+interface VaultBoxProps {
+  uuid: string;
+  collateral: number;
+  state: VaultStatus;
+  fundingTX: string;
+  closingTX: string;
+  preventLoad?: boolean;
+}
 
 export function VaultBox({
   uuid,
   collateral,
   state,
   fundingTX,
   closingTX,
-}: Vault): React.JSX.Element {
+  preventLoad,
+}: VaultBoxProps): React.JSX.Element {
   const isLoaded = useLoadingDelay(3000);
   const confirmedBlocks = 3;
   const [isExpanded, setIsExpanded] = useState(false);
 
   return (
-    <VaultBoxLayout isLoaded={isLoaded}>
+    <VaultBoxLayout isLoaded={preventLoad ? false : isLoaded}>
       <VaultBoxInformationStack
         collateral={collateral}
         state={state}

diff --git a/src/app/components/fade-layer/fade-layer.tsx b/src/app/components/fade-layer/fade-layer.tsx
@@ -18,7 +18,7 @@ export function FadeLayer({
     left: 0,
     right: 0,
     height: fadeHeight,
-    backgroundImage: "linear-gradient(to top, background.03, transparent)",
+    backgroundImage: "linear-gradient(to top, background.container.01, transparent)",
   };
 
   return (

diff --git a/src/app/components/header/components/tabs.tsx b/src/app/components/header/components/tabs.tsx
@@ -0,0 +1,29 @@
+import { HStack } from "@chakra-ui/react";
+import { TabButton } from "@components/tab-button/tab-button";
+
+interface NavigationTabsProps {
+    activeTab: string;
+    handleTabClick: (route: string) => void;
+}
+
+export function NavigationTabs({ activeTab, handleTabClick }: NavigationTabsProps): React.JSX.Element {
+    return (
+        <HStack spacing={'25px'} marginRight={'150px'}>
+        <TabButton
+          title={'Mint/Unmint dlcBTC'}
+          isActive={activeTab === '/'}
+          handleClick={() => handleTabClick('/')}
+        />
+        <TabButton
+          title={'My Vaults'}
+          isActive={activeTab === '/my-vaults'}
+          handleClick={() => handleTabClick('/my-vaults')}
+        />
+        <TabButton
+          title={'How It Works'}
+          isActive={activeTab === '/how-it-works'}
+          handleClick={() => handleTabClick('/how-it-works')}
+        />
+      </HStack>
+    )
+}
diff --git a/src/app/components/header/header.tsx b/src/app/components/header/header.tsx
@@ -1,41 +1,24 @@
-import React, { useState } from "react";
-import { useNavigate } from "react-router-dom";
+import React from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
 
-import { HStack } from "@chakra-ui/react";
-import { Account } from "@components/account/account";
-import { CompanyWebsiteButton } from "@components/company-website-button/company-website-button";
-import { HeaderLayout } from "@components/header/components/header.layout";
-import { TabButton } from "@components/tab-button/tab-button";
+import { Account } from '@components/account/account';
+import { CompanyWebsiteButton } from '@components/company-website-button/company-website-button';
+import { HeaderLayout } from '@components/header/components/header.layout';
+
+import { NavigationTabs } from './components/tabs';
 
 export function Header(): React.JSX.Element {
   const navigate = useNavigate();
-  const [activeTab, setActiveTab] = useState("/");
+  const location = useLocation();
 
   const handleTabClick = (route: string) => {
-    setActiveTab(route);
     navigate(route);
   };
 
   return (
     <HeaderLayout>
       <CompanyWebsiteButton />
-      <HStack spacing={"25px"} marginRight={"150px"}>
-        <TabButton
-          title={"Mint/Unmint dlcBTC"}
-          isActive={activeTab === "/"}
-          handleClick={() => handleTabClick("/")}
-        />
-        <TabButton
-          title={"My dlcBTC"}
-          isActive={activeTab === "/my-dlc-btc"}
-          handleClick={() => handleTabClick("/my-dlc-btc")}
-        />
-        <TabButton
-          title={"How It Works"}
-          isActive={activeTab === "/how-it-works"}
-          handleClick={() => handleTabClick("/how-it-works")}
-        />
-      </HStack>
+      <NavigationTabs activeTab={location.pathname} handleTabClick={handleTabClick} />
       <Account />
     </HeaderLayout>
   );

diff --git a/src/app/components/mint-unmint-box/components/mint-unmint-box.layout.tsx b/src/app/components/mint-unmint-box/components/mint-unmint-box.layout.tsx
@@ -9,10 +9,10 @@ export function MintUnmintBoxLayout({
       px={"15px"}
       w={"650px"}
       h={"625px"}
-      bg={"background.03"}
+      bg={"background.container.01"}
       border={"1px solid"}
       borderRadius={"md"}
-      borderColor={"accent.03"}
+      borderColor={"border.cyan.01"}
     >
       {children}
     </VStack>

diff --git a/...components/mint-unmint-box/components/setup-information-stack/setup-information-stack.tsx b/...components/mint-unmint-box/components/setup-information-stack/setup-information-stack.tsx
@@ -16,6 +16,7 @@ export function SetupInformationStack(): React.JSX.Element {
   function onConnectWalletClick(): void {
     dispatch(modalActions.toggleSelectWalletModalVisibility());
   }
+
   return (
     <SetupInformationStackLayout>
       <HStack width={"100%"} spacing={"25px"}>
@@ -41,7 +42,7 @@ export function SetupInformationStack(): React.JSX.Element {
             <HStack alignContent={"start"} w={"100%"}>
               <Image src={"/images/logos/ethereum-logo.svg"} h={"15px"}></Image>
               <Text
-                color={"accent.01"}
+                color={"accent.cyan.01"}
                 fontWeight={"regular"}
                 textDecoration={"underline"}
               >
@@ -56,7 +57,7 @@ export function SetupInformationStack(): React.JSX.Element {
             <HStack alignContent={"start"} w={"100%"}>
               <Image src={"/images/logos/bitcoin-logo.svg"} h={"15px"}></Image>
               <Text
-                color={"accent.04"}
+                color={"accent.orange.01"}
                 fontWeight={"regular"}
                 textDecoration={"underline"}
               >

diff --git a/src/app/components/mint-unmint-box/mint-unmint-box.tsx b/src/app/components/mint-unmint-box/mint-unmint-box.tsx
@@ -19,7 +19,7 @@ export function MintUnmintBox(): React.JSX.Element {
           <Tab>Mint</Tab>
           <Tab>Unmint</Tab>
         </TabList>
-        <TabIndicator mt="5px" h="3.5px" bg="accent.01" />
+        <TabIndicator mt="5px" h="3.5px" bg="accent.cyan.01" />
         <TabPanels>
           <TabPanel>
             <SetupInformationStack />

diff --git a/src/app/components/modals/components/modal.layout.tsx b/src/app/components/modals/components/modal.layout.tsx
@@ -25,7 +25,7 @@ export function ModalLayout({
   return (
     <Modal isOpen={isOpen} onClose={onClose}>
       <ModalOverlay />
-      <ModalContent>
+      <ModalContent alignItems={'start'}>
         <ModalHeader>{title}</ModalHeader>
         <ModalCloseButton />
         <ModalBody>{children}</ModalBody>

diff --git a/src/app/components/modals/select-wallet-modal/components/wallet-button.tsx b/src/app/components/modals/select-wallet-modal/components/wallet-button.tsx
@@ -18,7 +18,7 @@ export function WalletMenu({
       onClick={() => handleClick("123456789123456789", wallet.id)}
     >
       <HStack justifyContent={"space-evenly"} width={"250px"}>
-        <Image src={logo} alt={name} boxSize={"35px"} />
+        <Image src={logo} alt={name} boxSize={"25px"} />
         <Text width={"150px"}>{name}</Text>
       </HStack>
     </Button>