Merge branch 'dev' of https://github.com/DLC-link/dlc-btc-website int…

…o feat/about-page

src/app/app.tsx

@@ -2,10 +2,10 @@ import { Route } from 'react-router-dom';
 
 import { AppLayout } from '@components/app.layout';
 import { MyVaults } from '@pages/my-vaults/my-vaults';
+import { BalanceContextProvider } from '@providers/balance-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';
 

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

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

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

@@ -13,7 +13,7 @@ export function NavigationTabs({
   return (
     <HStack spacing={'25px'} marginRight={'150px'}>
       <TabButton
-        title={'Mint/Unmint dlcBTC'}
+        title={'Mint/Redeem dlcBTC'}
         isActive={activeTab === '/'}
         handleClick={() => handleTabClick('/')}
       />
@@ -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/mint-unmint/components/landing-page/components/landing-page.layout.tsx

@@ -0,0 +1,10 @@
+import { VStack } from '@chakra-ui/react';
+import { HasChildren } from '@models/has-children';
+
+export function LandingPageLayout({ children }: HasChildren): React.JSX.Element {
+  return (
+    <VStack w={'65%'} spacing={'0px'}>
+      {children}
+    </VStack>
+  );
+}

src/app/components/mint-unmint/components/landing-page/components/setup-information/setup-informatio.tsx

@@ -0,0 +1,29 @@
+import { Stack, Text, VStack } from '@chakra-ui/react';
+
+import { SetupInformationWalletRequirement } from './components/setup-information-wallet-requirement';
+
+export function SetupInformation(): React.JSX.Element {
+  return (
+    <Stack w={'50%'} align={'center'}>
+      <VStack align={'start'} spacing={'25px'}>
+        <Text color={'white'} fontSize={'lg'} fontWeight={600}>
+          What you will need:
+        </Text>
+        <SetupInformationWalletRequirement
+          logo={'/images/logos/ethereum-logo.svg'}
+          color={'accent.cyan.01'}
+          walletName={'Metamask Wallet'}
+          requirement={'+ETH (for fee)'}
+          url={'https://metamask.io/'}
+        />
+        <SetupInformationWalletRequirement
+          logo={'/images/logos/bitcoin-logo.svg'}
+          color={'accent.orange.01'}
+          walletName={'Leather Wallet'}
+          requirement={'+BTC (for lock)'}
+          url={'https://leather.io/'}
+        />
+      </VStack>
+    </Stack>
+  );
+}

src/app/components/mint-unmint/components/landing-page/components/welcome-stack.tsx

@@ -0,0 +1,33 @@
+import { useDispatch } from 'react-redux';
+import { useNavigate } from 'react-router-dom';
+
+import { Button, HStack, Image, Text, VStack } from '@chakra-ui/react';
+import { modalActions } from '@store/slices/modal/modal.actions';
+
+export function WelcomeStack(): React.JSX.Element {
+  const navigate = useNavigate();
+  const dispatch = useDispatch();
+
+  const setupText = 'Ready to\n mint dlcBTC?';
+
+  function onConnectWalletClick(): void {
+    dispatch(modalActions.toggleSelectWalletModalVisibility());
+  }
+
+  return (
+    <HStack spacing={'100px'} align={'start'}>
+      <VStack alignItems={'start'} spacing={'25px'}>
+        <Text variant={'welcome'} alignContent={'start'}>
+          {setupText}
+        </Text>
+        <Text variant={'navigate'} onClick={() => navigate('/how-it-works')}>
+          How it works?
+        </Text>
+        <Button variant={'account'} onClick={onConnectWalletClick}>
+          Connect Wallet
+        </Button>
+      </VStack>
+      <Image src={'/images/dlc-btc-mint-visualization.png'} h={'295px'} />
+    </HStack>
+  );
+}

src/app/components/mint-unmint/components/landing-page/landing-page.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { Divider, HStack } from '@chakra-ui/react';
+
+import { ProtocolSummaryStack } from '../protocol-summary-stack/protocol-summary-stack';
+import { LandingPageLayout } from './components/landing-page.layout';
+import { SetupInformation } from './components/setup-information/setup-informatio';
+import { WelcomeStack } from './components/welcome-stack';
+
+export function LandingPage(): React.JSX.Element {
+  return (
+    <LandingPageLayout>
+      <WelcomeStack />
+      <Divider orientation={'horizontal'} h={'35px'} variant={'thick'} />
+      <HStack w={'100%'} align={'start'} pt={'50px'}>
+        <SetupInformation />
+        <Divider orientation={'vertical'} w={'35px'} h={'205px'} variant={'thick'} />
+        <ProtocolSummaryStack />
+      </HStack>
+    </LandingPageLayout>
+  );
+}

src/app/components/mint-unmint/components/lock-screen/components/protocol-fee.tsx

@@ -3,6 +3,7 @@ import { HStack, Text, VStack } from '@chakra-ui/react';
 interface LockScreenProtocolFeeProps {
   assetAmount?: number;
   bitcoinPrice?: number;
+  protocolFeePercentage?: number;
 }
 
 function calculateProtocolFee(amount: number, protocolFeePercentage: number): string {
@@ -20,6 +21,7 @@ function calculateProtocolFeeInUSD(
 export function LockScreenProtocolFee({
   assetAmount,
   bitcoinPrice,
+  protocolFeePercentage,
 }: LockScreenProtocolFeeProps): React.JSX.Element {
   return (
     <VStack
@@ -35,14 +37,18 @@ export function LockScreenProtocolFee({
           Protocol Fee
         </Text>
         <Text color={'white.01'} fontSize={'sm'} fontWeight={800}>
-          {assetAmount && calculateProtocolFee(assetAmount, 0.0001)} BTC
+          {assetAmount &&
+            protocolFeePercentage &&
+            calculateProtocolFee(assetAmount, protocolFeePercentage)}{' '}
+          BTC
         </Text>{' '}
       </HStack>
       <Text color={'white.01'} fontSize={'sm'}>
         ={' '}
         {assetAmount &&
           bitcoinPrice &&
-          calculateProtocolFeeInUSD(assetAmount, bitcoinPrice, 0.0001)}{' '}
+          protocolFeePercentage &&
+          calculateProtocolFeeInUSD(assetAmount, bitcoinPrice, protocolFeePercentage)}{' '}
         $
       </Text>
     </VStack>

src/app/components/mint-unmint/components/lock-screen/lock-screen.tsx

@@ -1,13 +1,13 @@
-import { useContext, useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { Button, VStack } from '@chakra-ui/react';
 import { VaultCard } from '@components/vault/vault-card';
 import { useVaults } from '@hooks/use-vaults';
 import { Vault } from '@models/vault';
+import { BlockchainContext } from '@providers/blockchain-context-provider';
 import { mintUnmintActions } from '@store/slices/mintunmint/mintunmint.actions';
 
-import { BlockchainContext } from '../../../../providers/blockchain-context-provider';
 import { LockScreenProtocolFee } from './components/protocol-fee';
 
 interface LockScreenProps {
@@ -19,10 +19,21 @@ export function LockScreen({ currentStep }: LockScreenProps): React.JSX.Element
   const { readyVaults } = useVaults();
   const blockchainContext = useContext(BlockchainContext);
   const bitcoin = blockchainContext?.bitcoin;
+  const ethereum = blockchainContext?.ethereum;
+
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const [protocolFeePercentage, setProtocolFeePercentage] = useState<number | undefined>(undefined);
 
   const currentVault = readyVaults.find(vault => vault.uuid === currentStep[1]);
 
+  useEffect(() => {
+    const fetchProtocolFeePercentage = async () => {
+      const currentProtocolFeePercentage = await ethereum?.getProtocolFee();
+      setProtocolFeePercentage(currentProtocolFeePercentage);
+    };
+    fetchProtocolFeePercentage();
+  }, [ethereum]);
+
   async function handleClick(currentVault?: Vault) {
     if (!currentVault) return;
 
@@ -41,6 +52,7 @@ export function LockScreen({ currentStep }: LockScreenProps): React.JSX.Element
       <LockScreenProtocolFee
         assetAmount={currentVault?.collateral}
         bitcoinPrice={bitcoin?.bitcoinPrice}
+        protocolFeePercentage={protocolFeePercentage}
       />
       <Button
         isLoading={isSubmitting}

src/app/components/mint-unmint/components/mint-unmint.layout.tsx

@@ -1,7 +1,12 @@
 import { VStack } from '@chakra-ui/react';
-import { HasChildren } from '@models/has-children';
+import { boxShadowAnimation } from '@styles/css-styles';
 
-export function MintUnmintLayout({ children }: HasChildren): React.JSX.Element {
+interface MintUnmintLayoutProps {
+  children: React.ReactNode;
+  animate?: boolean;
+}
+
+export function MintUnmintLayout({ children, animate }: MintUnmintLayoutProps): React.JSX.Element {
   return (
     <VStack
       px={'15px'}
@@ -11,6 +16,9 @@ export function MintUnmintLayout({ children }: HasChildren): React.JSX.Element {
       border={'1px solid'}
       borderRadius={'md'}
       borderColor={'border.cyan.01'}
+      css={{
+        animation: animate ? `${boxShadowAnimation} 0.5s 2 ease-in-out` : 'none',
+      }}
     >
       {children}
     </VStack>

src/app/components/mint-unmint/components/protocol-summary-stack/components/protocol-summary-stack.layout.tsx

@@ -3,7 +3,7 @@ import { HasChildren } from '@models/has-children';
 
 export function ProtocolSummaryStackLayout({ children }: HasChildren): React.JSX.Element {
   return (
-    <HStack py={'25px'} alignContent={'start'} h={'auto'} w={'100%'} spacing={'25px'}>
+    <HStack w={'50%'} spacing={'25px'}>
       {children}
     </HStack>
   );

src/app/components/mint-unmint/components/protocol-summary-stack/protocol-summary-stack.tsx

@@ -2,8 +2,8 @@
 import { useContext } from 'react';
 
 import { Skeleton, Text, VStack } from '@chakra-ui/react';
+import { BlockchainContext } from '@providers/blockchain-context-provider';
 
-import { BlockchainContext } from '../../../../providers/blockchain-context-provider';
 import { ProtocolSummaryStackLayout } from './components/protocol-summary-stack.layout';
 
 export function ProtocolSummaryStack(): React.JSX.Element {
@@ -12,7 +12,7 @@ export function ProtocolSummaryStack(): React.JSX.Element {
   const bitcoinPrice = blockchainContext?.bitcoin.bitcoinPrice;
   return (
     <ProtocolSummaryStackLayout>
-      <VStack alignItems={'start'} h={'250px'} w={'50%'} spacing={'15px'}>
+      <VStack alignItems={'start'}>
         <Text alignContent={'start'} color={'white'} fontSize={'lg'}>
           TVL
         </Text>
@@ -29,7 +29,6 @@ export function ProtocolSummaryStack(): React.JSX.Element {
           </Skeleton>
         </VStack>
       </VStack>
-      {/* <ProtocolHistory /> */}
     </ProtocolSummaryStackLayout>
   );
 }

src/app/components/mint-unmint/components/transaction-form/transaction-form.tsx

@@ -3,9 +3,9 @@ import { useContext, useState } from 'react';
 import { Button, FormControl, FormErrorMessage, Text, VStack, useToast } from '@chakra-ui/react';
 import { customShiftValue } from '@common/utilities';
 import { EthereumError } from '@models/error-types';
+import { BlockchainContext } from '@providers/blockchain-context-provider';
 import { Form, Formik } from 'formik';
 
-import { BlockchainContext } from '../../../../providers/blockchain-context-provider';
 import { TransactionFormInput } from './components/transaction-form-input';
 import { TransactionFormWarning } from './components/transaction-form-warning';