feat: flow vault fetching by UUID

.eslintrc.cjs

@@ -31,6 +31,14 @@ module.exports = {
     '@typescript-eslint/ban-types': ['error'],
     '@typescript-eslint/consistent-type-definitions': ['error', 'interface'],
     '@typescript-eslint/array-type': ['error'],
+    '@typescript-eslint/quotes': [
+      'error',
+      'single',
+      {
+        avoidEscape: true,
+        allowTemplateLiterals: true,
+      },
+    ],
 
     'deprecation/deprecation': ['warn'],
 

src/app/app.tsx

@@ -1,13 +1,13 @@
-import { Route } from "react-router-dom";
+import { Route } from 'react-router-dom';
 
-import { AppLayout } from "@components/app.layout";
-import { MyVaults } from "@pages/my-vaults/my-vaults";
+import { AppLayout } from '@components/app.layout';
+import { MyVaults } from '@pages/my-vaults/my-vaults';
 
-import { About } from "./pages/about/about";
-import { Dashboard } from "./pages/dashboard/dashboard";
-import { BalanceContextProvider } from "./providers/balance-context-provider";
-import { BlockchainContextProvider } from "./providers/blockchain-context-provider";
-import { VaultContextProvider } from "./providers/vault-context-provider";
+import { About } from './pages/about/about';
+import { Dashboard } from './pages/dashboard/dashboard';
+import { BalanceContextProvider } from './providers/balance-context-provider';
+import { BlockchainContextProvider } from './providers/blockchain-context-provider';
+import { VaultContextProvider } from './providers/vault-context-provider';
 
 export function App(): React.JSX.Element {
   return (

src/app/common/utilities.tsx

@@ -1,4 +1,4 @@
-import Decimal from "decimal.js";
+import Decimal from 'decimal.js';
 
 export function easyTruncateAddress(address: string): string {
   const truncationLength = 4;
@@ -7,11 +7,7 @@ export function easyTruncateAddress(address: string): string {
   return `${prefix}...${suffix}`;
 }
 
-export function customShiftValue(
-  value: number,
-  shift: number,
-  unshift: boolean,
-): number {
+export function customShiftValue(value: number, shift: number, unshift: boolean): number {
   const decimalPoweredShift = new Decimal(10 ** shift);
   const decimalValue = new Decimal(Number(value));
   const decimalShiftedValue = unshift

src/app/components/account/account.tsx

@@ -1,29 +1,26 @@
-import { useEffect, useState } from "react";
-import { useDispatch, useSelector } from "react-redux";
+import { useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 
-import { Button, HStack } from "@chakra-ui/react";
-import { AccountMenu } from "@components/account/components/account-menu";
-import { Wallet, WalletType, ethereumWallets } from "@models/wallet";
-import { RootState } from "@store/index";
-import { accountActions } from "@store/slices/account/account.actions";
-import { modalActions } from "@store/slices/modal/modal.actions";
-import { mintUnmintActions } from "@store/slices/mintunmint/mintunmint.actions";
+import { Button, HStack } from '@chakra-ui/react';
+import { AccountMenu } from '@components/account/components/account-menu';
+import { Wallet, WalletType, ethereumWallets } from '@models/wallet';
+import { RootState } from '@store/index';
+import { accountActions } from '@store/slices/account/account.actions';
+import { mintUnmintActions } from '@store/slices/mintunmint/mintunmint.actions';
+import { modalActions } from '@store/slices/modal/modal.actions';
 
 function findWalletById(walletType: WalletType): Wallet | undefined {
-  const wallet = ethereumWallets.find((wallet) => wallet.id === walletType);
+  const wallet = ethereumWallets.find(wallet => wallet.id === walletType);
   return wallet;
 }
 
 export function Account(): React.JSX.Element {
   const dispatch = useDispatch();
   const [wallet, setWallet] = useState<Wallet | undefined>(undefined);
-  const { address, walletType } = useSelector(
-    (state: RootState) => state.account,
-  );
+  const { address, walletType } = useSelector((state: RootState) => state.account);
 
   useEffect(() => {
-    const currentWallet =
-      walletType !== undefined && findWalletById(walletType);
+    const currentWallet = walletType !== undefined && findWalletById(walletType);
     if (currentWallet) setWallet(currentWallet);
   }, [walletType]);
 
@@ -37,15 +34,15 @@ export function Account(): React.JSX.Element {
   }
 
   return (
-    <HStack width={"275px"}>
+    <HStack width={'275px'}>
       {address !== undefined && wallet !== undefined ? (
         <AccountMenu
           address={address}
           wallet={wallet}
           handleClick={() => onDisconnectWalletClick()}
         />
       ) : (
-        <Button variant={"account"} onClick={() => onConnectWalletClick()}>
+        <Button variant={'account'} onClick={() => onConnectWalletClick()}>
           Connect Wallet
         </Button>
       )}

src/app/components/account/components/account-menu.tsx

@@ -1,39 +1,22 @@
-import { ChevronDownIcon } from "@chakra-ui/icons";
-import {
-  HStack,
-  Image,
-  Menu,
-  MenuButton,
-  MenuItem,
-  MenuList,
-  Text,
-} from "@chakra-ui/react";
-import { easyTruncateAddress } from "@common/utilities";
-import { Wallet } from "@models/wallet";
+import { ChevronDownIcon } from '@chakra-ui/icons';
+import { HStack, Image, Menu, MenuButton, MenuItem, MenuList, Text } from '@chakra-ui/react';
+import { easyTruncateAddress } from '@common/utilities';
+import { Wallet } from '@models/wallet';
 
 interface AccountMenuProps {
   address: string;
   wallet: Wallet;
   handleClick: () => void;
 }
 
-export function AccountMenu({
-  address,
-  wallet,
-  handleClick,
-}: AccountMenuProps): React.JSX.Element {
+export function AccountMenu({ address, wallet, handleClick }: AccountMenuProps): React.JSX.Element {
   return (
-    <Menu variant={"account"}>
+    <Menu variant={'account'}>
       <MenuButton>
-        <HStack justifyContent={"space-evenly"}>
-          <Image
-            p={"2.5px"}
-            src={wallet?.logo}
-            alt={wallet?.name}
-            boxSize={"35px"}
-          />
+        <HStack justifyContent={'space-evenly'}>
+          <Image p={'2.5px'} src={wallet?.logo} alt={wallet?.name} boxSize={'35px'} />
           <Text>{easyTruncateAddress(address)}</Text>
-          <ChevronDownIcon boxSize={"35px"} color={"white"} />
+          <ChevronDownIcon boxSize={'35px'} color={'white'} />
         </HStack>
       </MenuButton>
       <MenuList>

src/app/components/app.layout.tsx

@@ -1,14 +1,15 @@
-import { BrowserRouter as Router, Routes } from "react-router-dom";
+import { BrowserRouter as Router, Routes } from 'react-router-dom';
 
-import { VStack } from "@chakra-ui/react";
-import { Header } from "@components/header/header";
-import { HasChildren } from "@models/has-children";
-import { ModalContainer } from "./modals/components/modal-container";
+import { VStack } from '@chakra-ui/react';
+import { Header } from '@components/header/header';
+import { HasChildren } from '@models/has-children';
+
+import { ModalContainer } from './modals/components/modal-container';
 
 export function AppLayout({ children }: HasChildren): React.JSX.Element {
   return (
     <Router>
-      <VStack py={"25px"}>
+      <VStack py={'25px'}>
         <Header />
         <Routes>{children}</Routes>
         <ModalContainer />

src/app/components/company-website-button/company-website-button.tsx

@@ -1,18 +1,13 @@
-import { Button, Image } from "@chakra-ui/react";
+import { Button, Image } from '@chakra-ui/react';
 
 export function CompanyWebsiteButton(): React.JSX.Element {
-  const companyWebsiteURL = "https://www.dlc.link/";
-  const logoPath = "./images/logos/dlc-link-logo.svg";
-  const altText = "DLC.Link Logo";
+  const companyWebsiteURL = 'https://www.dlc.link/';
+  const logoPath = './images/logos/dlc-link-logo.svg';
+  const altText = 'DLC.Link Logo';
 
   return (
-    <Button
-      as={"a"}
-      href={companyWebsiteURL}
-      variant={"company"}
-      boxSize={"65px"}
-    >
-      <Image src={logoPath} alt={altText} boxSize={"65px"} />
+    <Button as={'a'} href={companyWebsiteURL} variant={'company'} boxSize={'65px'}>
+      <Image src={logoPath} alt={altText} boxSize={'65px'} />
     </Button>
   );
 }

src/app/components/custom-skeleton/custom-skeleton.tsx

@@ -1,18 +1,9 @@
-import { Skeleton } from "@chakra-ui/react";
+import { Skeleton } from '@chakra-ui/react';
 
 interface CustomSkeletonProps {
   height: string;
 }
 
-export function CustomSkeleton({
-  height,
-}: CustomSkeletonProps): React.JSX.Element {
-  return (
-    <Skeleton
-      startColor={"white.02"}
-      endColor={"white.03"}
-      w={"100%"}
-      h={height}
-    />
-  );
+export function CustomSkeleton({ height }: CustomSkeletonProps): React.JSX.Element {
+  return <Skeleton startColor={'white.02'} endColor={'white.03'} w={'100%'} h={height} />;
 }

src/app/components/fade-layer/fade-layer.tsx

@@ -1,35 +1,24 @@
-import { VStack } from "@chakra-ui/react";
+import { VStack } from '@chakra-ui/react';
 
 interface FadeLayerProps {
   children: React.ReactNode;
   height: string;
   fadeHeight: string;
 }
 
-export function FadeLayer({
-  children,
-  height,
-  fadeHeight,
-}: FadeLayerProps): React.JSX.Element {
+export function FadeLayer({ children, height, fadeHeight }: FadeLayerProps): React.JSX.Element {
   const afterStyles = {
     content: '""',
-    position: "absolute",
+    position: 'absolute',
     bottom: 0,
     left: 0,
     right: 0,
     height: fadeHeight,
-    backgroundImage:
-      "linear-gradient(to top, background.container.01, transparent)",
+    backgroundImage: 'linear-gradient(to top, background.container.01, transparent)',
   };
 
   return (
-    <VStack
-      alignItems={"start"}
-      position="relative"
-      w={"100%"}
-      h={height}
-      _after={afterStyles}
-    >
+    <VStack alignItems={'start'} position="relative" w={'100%'} h={height} _after={afterStyles}>
       {children}
     </VStack>
   );

src/app/components/header/components/header.layout.tsx

@@ -1,9 +1,9 @@
-import { HStack } from "@chakra-ui/react";
-import { HasChildren } from "@models/has-children";
+import { HStack } from '@chakra-ui/react';
+import { HasChildren } from '@models/has-children';
 
 export function HeaderLayout({ children }: HasChildren): React.JSX.Element {
   return (
-    <HStack justifyContent={"space-between"} px={"130px"} w={"1280px"}>
+    <HStack justifyContent={'space-between'} px={'130px'} w={'1280px'}>
       {children}
     </HStack>
   );

src/app/components/header/components/tabs.tsx

@@ -1,5 +1,5 @@
-import { HStack } from "@chakra-ui/react";
-import { TabButton } from "@components/tab-button/tab-button";
+import { HStack } from '@chakra-ui/react';
+import { TabButton } from '@components/tab-button/tab-button';
 
 interface NavigationTabsProps {
   activeTab: string;
@@ -11,21 +11,21 @@ export function NavigationTabs({
   handleTabClick,
 }: NavigationTabsProps): React.JSX.Element {
   return (
-    <HStack spacing={"25px"} marginRight={"150px"}>
+    <HStack spacing={'25px'} marginRight={'150px'}>
       <TabButton
-        title={"Mint/Unmint dlcBTC"}
-        isActive={activeTab === "/"}
-        handleClick={() => handleTabClick("/")}
+        title={'Mint/Unmint dlcBTC'}
+        isActive={activeTab === '/'}
+        handleClick={() => handleTabClick('/')}
       />
       <TabButton
-        title={"My Vaults"}
-        isActive={activeTab === "/my-vaults"}
-        handleClick={() => handleTabClick("/my-vaults")}
+        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")}
+        title={'How It Works'}
+        isActive={activeTab === '/how-it-works'}
+        handleClick={() => handleTabClick('/how-it-works')}
       />
     </HStack>
   );

src/app/components/header/header.tsx

@@ -1,11 +1,11 @@
-import React from "react";
-import { useLocation, useNavigate } from "react-router-dom";
+import React from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
 
-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 { 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";
+import { NavigationTabs } from './components/tabs';
 
 export function Header(): React.JSX.Element {
   const navigate = useNavigate();
@@ -18,10 +18,7 @@ export function Header(): React.JSX.Element {
   return (
     <HeaderLayout>
       <CompanyWebsiteButton />
-      <NavigationTabs
-        activeTab={location.pathname}
-        handleTabClick={handleTabClick}
-      />
+      <NavigationTabs activeTab={location.pathname} handleTabClick={handleTabClick} />
       <Account />
     </HeaderLayout>
   );