Feat/about page (#38)

feat: how it works page sitebuild and action buttons navigation

src/app/components/account/account.tsx

@@ -34,7 +34,7 @@ export function Account(): React.JSX.Element {
   }
 
   return (
-    <HStack width={'275px'}>
+    <HStack w={'275px'}>
       {address !== undefined && wallet !== undefined ? (
         <AccountMenu
           address={address}

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

@@ -22,11 +22,11 @@ export function NavigationTabs({
         isActive={activeTab === '/my-vaults'}
         handleClick={() => handleTabClick('/my-vaults')}
       />
-      {/* <TabButton
+      <TabButton
         title={'How It Works'}
         isActive={activeTab === '/how-it-works'}
         handleClick={() => handleTabClick('/how-it-works')}
-      /> */}
+      />
     </HStack>
   );
 }

src/app/components/how-it-works/bottom/bottom-section.tsx

@@ -0,0 +1,19 @@
+import { HStack, VStack } from '@chakra-ui/react';
+
+import { AuditReports } from './components/audit-reports';
+import { HowToMint } from './components/how-to-mint';
+import { HowToUnmint } from './components/how-to-unmint';
+import { SupportedWallets } from './components/supported-wallets/supported-wallets';
+
+export function BottomSection(): React.JSX.Element {
+  return (
+    <HStack spacing={'25px'} alignItems={'start'}>
+      <HowToMint />
+      <VStack spacing={'25px'}>
+        <HowToUnmint />
+        <SupportedWallets />
+        <AuditReports />
+      </VStack>
+    </HStack>
+  );
+}

src/app/components/how-it-works/bottom/components/audit-reports.tsx

@@ -0,0 +1,28 @@
+import { HStack, Image, Link, Text } from '@chakra-ui/react';
+import { CustomCard } from '@components/how-it-works/components/custom-card';
+
+export function AuditReports(): React.JSX.Element {
+  return (
+    <CustomCard width={'488px'} height={'170px'} padding={'25px'}>
+      {
+        <>
+          <Text variant={'title'}>Audit Reports</Text>
+          <HStack align={'start'} spacing={'15px'}>
+            <Image src={'/images/report.png'} w={'34px'} h={'42px'} pt={'5px'}></Image>
+            <Text color={'white'}>
+              The following is a security audit report, completed by the team at CoinFabrik on
+              November 29, 2023.{' '}
+              <Link
+                href={'https://docs.dlc.link/resources#security-audit-reports'}
+                isExternal
+                color={'accent.cyan.01'}
+              >
+                Read the report...
+              </Link>
+            </Text>
+          </HStack>
+        </>
+      }
+    </CustomCard>
+  );
+}

src/app/components/how-it-works/bottom/components/flow-step.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import { HStack, Text, VStack } from '@chakra-ui/react';
+
+interface FlowStepProps {
+  step: string;
+  title: string;
+  content: React.ReactNode;
+  hasBadge: boolean;
+  badge?: string;
+}
+
+export function FlowStep({
+  step,
+  title,
+  content,
+  hasBadge,
+  badge,
+}: FlowStepProps): React.JSX.Element {
+  return (
+    <VStack align={'left'} spacing={'0px'} pb={'20px'}>
+      <Text variant={'step'}>{step}</Text>
+      {hasBadge ? (
+        <HStack>
+          <Text variant={'subTitle'}>{title}</Text>
+          <Text>{badge}</Text>
+        </HStack>
+      ) : (
+        <Text variant={'subTitle'}>{title}</Text>
+      )}
+      {content}
+    </VStack>
+  );
+}

src/app/components/how-it-works/bottom/components/how-to-mint.tsx

@@ -0,0 +1,91 @@
+import { useDispatch } from 'react-redux';
+import { useNavigate } from 'react-router-dom';
+
+import { Box, Button, Image, Text } from '@chakra-ui/react';
+import { IntroVideo } from '@components/how-it-works/top/components/intro-video';
+import { mintUnmintActions } from '@store/slices/mintunmint/mintunmint.actions';
+
+import { CustomCard } from '../../components/custom-card';
+import { FlowStep } from './flow-step';
+
+export function HowToMint(): React.JSX.Element {
+  const navigate = useNavigate();
+  const dispatch = useDispatch();
+  return (
+    <CustomCard width={'488px'} height={'970px'} padding={'25px'}>
+      {
+        <>
+          <Text variant={'title'}>How to Mint dlcBTC</Text>
+          <Image src={'/images/mintBtc.png'} alt={'mint image'} h={'39px'} w={'185px'} />
+          <Box h={'25px'} />
+          <FlowStep
+            step={'Step 1'}
+            title={'Deposit Adress'}
+            content={
+              <Text color={'white'}>
+                Select an amount of Bitcoin you would like to lock and confirm it in your{' '}
+                <Text as={'span'} color={'light.blue.01'}>
+                  Ethereum Wallet.{' '}
+                </Text>
+                You will receive your deposit token dlcBTC to the same address.
+              </Text>
+            }
+            hasBadge={false}
+          />
+          <FlowStep
+            step={'Step 2'}
+            title={'Lock Bitcoin'}
+            content={
+              <Text color={'white'}>
+                Confirm the transaction in your{' '}
+                <Text as={'span'} color={'light.blue.01'}>
+                  Bitcoin Wallet
+                </Text>{' '}
+                which will lock your Bitcoin on-chain.
+              </Text>
+            }
+            hasBadge={false}
+          />
+          <FlowStep
+            step={'Step 3'}
+            title={'Mint dlcBTC'}
+            content={
+              <Text color={'white'}>
+                Wait for Bitcoin to get locked on chain
+                <Text as={'span'} color={'light.blue.01'}>
+                  (~1 hour).{' '}
+                </Text>
+                After confirmation dlcBTC tokens will automatically appear in your{' '}
+                <Text as={'span'} color={'light.blue.01'}>
+                  Ethereum Wallet.{' '}
+                </Text>{' '}
+                You can use dlcBTC in big{' '}
+                <Text as={'span'} variant={'navigate'}>
+                  supported DeFi protocols
+                </Text>{' '}
+                for lending, yield farming, staking and more.
+              </Text>
+            }
+            hasBadge={false}
+          />
+          <IntroVideo
+            opts={{ height: '262px', width: '435px', playerVars: { autoplay: 0, controls: 1 } }}
+            placeholderHeight={'262px'}
+            placeholderWidth={'435px'}
+          />
+          <Box h={'10px'} />
+          <Button
+            onClick={() => {
+              navigate('/');
+              dispatch(mintUnmintActions.setMintStep([0, '']));
+              close();
+            }}
+            variant={'account'}
+          >
+            Mint dlcBTC
+          </Button>
+        </>
+      }
+    </CustomCard>
+  );
+}

src/app/components/how-it-works/bottom/components/how-to-unmint.tsx

@@ -0,0 +1,45 @@
+import { useDispatch } from 'react-redux';
+import { useNavigate } from 'react-router-dom';
+
+import { Box, Button, Image, Text } from '@chakra-ui/react';
+import { mintUnmintActions } from '@store/slices/mintunmint/mintunmint.actions';
+
+import { CustomCard } from '../../components/custom-card';
+import { FlowStep } from './flow-step';
+
+export function HowToUnmint(): React.JSX.Element {
+  const navigate = useNavigate();
+  const dispatch = useDispatch();
+  return (
+    <CustomCard width={'488px'} height={'343px'} padding={'25px'}>
+      {
+        <>
+          <Text variant={'title'}>How to Unmint dlcBTC</Text>
+          <Image src={'/images/unmintBtc.png'} alt={'unmint image'} h={'39px'} w={'185px'} />
+          <Box h={'25px'} />
+          <FlowStep
+            step={'Step 1'}
+            title={'Unmint dlcBTC'}
+            content={
+              <Text color={'white'}>
+                Select the vault you would like to unmint. After a successful unmint you will
+                receive BTC in the same amount back to your wallet.
+              </Text>
+            }
+            hasBadge={false}
+          />
+          <Button
+            onClick={() => {
+              navigate('/');
+              dispatch(mintUnmintActions.setUnmintStep([0, '']));
+              close();
+            }}
+            variant={'account'}
+          >
+            Unmint dlcBTC
+          </Button>
+        </>
+      }
+    </CustomCard>
+  );
+}

src/app/components/how-it-works/bottom/components/supported-wallets/components/wallet-info.tsx

@@ -0,0 +1,41 @@
+import { Box, Button, Image, Link, Text, VStack } from '@chakra-ui/react';
+
+interface WalletInfoProps {
+  src: string;
+  coinName: string;
+  content: React.ReactNode;
+}
+
+export function WalletInfo({ src, coinName, content }: WalletInfoProps): React.JSX.Element {
+  return (
+    <VStack
+      align={'left'}
+      spacing={'12px'}
+      w={'200px'}
+      ml={src === '/images/metamask.png' ? '0px' : '15px'}
+    >
+      <Image
+        src={src}
+        alt={''}
+        w={src === '/images/metamask.png' ? '92px' : '66px'}
+        h={src === '/images/metamask.png' ? '12px' : '14px'}
+      />
+      <Box w={'92px'}>
+        <Link
+          href={
+            src === '/images/metamask.png'
+              ? 'https://chromewebstore.google.com/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn?pli=1'
+              : 'https://chromewebstore.google.com/detail/leather/ldinpeekobnhjjdofggfgjlcehhmanlj'
+          }
+          isExternal
+        >
+          <Button variant={'vault'}>Download</Button>
+        </Link>
+      </Box>
+      <Text color={'light.blue.01'} fontStyle={'bold'}>
+        {coinName}
+      </Text>
+      <Box h={'140px'}>{content}</Box>
+    </VStack>
+  );
+}

src/app/components/how-it-works/bottom/components/supported-wallets/supported-wallets.tsx

@@ -0,0 +1,40 @@
+import { HStack, StackDivider, Text } from '@chakra-ui/react';
+import { CustomCard } from '@components/how-it-works/components/custom-card';
+
+import { WalletInfo } from './components/wallet-info';
+
+export function SupportedWallets(): React.JSX.Element {
+  return (
+    <CustomCard width={'488px'} height={'377px'} padding={'25px 0px 25px 25px'}>
+      {
+        <>
+          <Text variant={'title'} pb={'30px'}>
+            Supported Wallets
+          </Text>
+          <HStack divider={<StackDivider borderColor={'white.03'} />}>
+            <WalletInfo
+              src={'/images/metamask.png'}
+              coinName={'Ethereum Wallet:'}
+              content={
+                <Text color={'white'}>
+                  We currently support MetaMask with support for other popular ethereum wallets
+                  coming soon.
+                </Text>
+              }
+            ></WalletInfo>
+            <WalletInfo
+              src={'/images/leather.png'}
+              coinName={'Bitcoin Wallet:'}
+              content={
+                <Text color={'white'}>
+                  Leather Wallet supports DLCs, with Xverse Wallet joining next year. We're actively
+                  working to include more Bitcoin Wallets as we grow.
+                </Text>
+              }
+            ></WalletInfo>
+          </HStack>
+        </>
+      }
+    </CustomCard>
+  );
+}

src/app/components/how-it-works/components/custom-card.tsx

@@ -0,0 +1,33 @@
+import { ReactNode } from 'react';
+
+import { VStack } from '@chakra-ui/react';
+
+interface CustomCardProps {
+  width: string;
+  height: string;
+  padding: string;
+  children: ReactNode;
+}
+
+export function CustomCard({
+  children,
+  width,
+  height,
+  padding,
+}: CustomCardProps): React.JSX.Element {
+  return (
+    <VStack
+      alignContent={'start'}
+      alignItems={'start'}
+      p={padding}
+      w={width}
+      h={height}
+      bg={'background.container.01'}
+      border={'1px solid'}
+      borderRadius={'15px'}
+      borderColor={'border.white.01'}
+    >
+      {children}
+    </VStack>
+  );
+}

src/app/components/how-it-works/components/how-it-works-layout.tsx

@@ -0,0 +1,6 @@
+import { VStack } from '@chakra-ui/react';
+import { HasChildren } from '@models/has-children';
+
+export function HowItWorksLayout({ children }: HasChildren): React.JSX.Element {
+  return <VStack>{children}</VStack>;
+}

src/app/components/how-it-works/how-it-works.tsx

@@ -0,0 +1,20 @@
+import { VStack } from '@chakra-ui/react';
+
+import { BottomSection } from './bottom/bottom-section';
+import { HowItWorksLayout } from './components/how-it-works-layout';
+import { MiddleSection } from './middle/middle-section';
+import { TopSection } from './top/top-section';
+
+export function HowItWorks(): React.JSX.Element {
+  return (
+    <HowItWorksLayout>
+      {
+        <VStack spacing={'100px'}>
+          <TopSection />
+          <MiddleSection />
+          <BottomSection />
+        </VStack>
+      }
+    </HowItWorksLayout>
+  );
+}