chore: merge branch 'dev' into feat/get-fee

.env.devnet

@@ -0,0 +1,9 @@
+## Deployed Devnet Attestors / Regtest Bitcoin
+
+VITE_ETHEREUM_DEPLOYMENT_BRANCH=dev
+VITE_ETHEREUM_DEPLOYMENT_VERSION=1
+VITE_ENABLED_ETHEREUM_NETWORKS='11155111'
+VITE_ATTESTOR_API_URLS=https://devnet.dlc.link/attestor-1,https://devnet.dlc.link/attestor-2,https://devnet.dlc.link/attestor-3
+VITE_BITCOIN_NETWORK=regtest
+VITE_BITCOIN_EXPLORER_API_URL=https://devnet.dlc.link/electrs
+VITE_BITCOIN_BLOCKCHAIN_API_URL=https://devnet.dlc.link/electrs

.env.localhost

@@ -0,0 +1,9 @@
+## Locally Run Attestors / Regtest Bitcoin
+
+VITE_ETHEREUM_DEPLOYMENT_BRANCH=dev
+VITE_ETHEREUM_DEPLOYMENT_VERSION=1
+VITE_ENABLED_ETHEREUM_NETWORKS='11155111'
+VITE_ATTESTOR_API_URLS=http://localhost:8811,http://localhost:8812,http://localhost:8813,http://localhost:8814
+VITE_BITCOIN_NETWORK=regtest
+VITE_BITCOIN_EXPLORER_API_URL=https://devnet.dlc.link/electrs
+VITE_BITCOIN_BLOCKCHAIN_API_URL=https://devnet.dlc.link/electrs

.env.mainnet

@@ -0,0 +1 @@
+## Deployed Mainnet Attestors / Mainnet Bitcoin

.env.testnet

@@ -0,0 +1,9 @@
+## Deployed Testnet Attestors / Testnet Bitcoin
+
+VITE_ETHEREUM_DEPLOYMENT_BRANCH=testnet
+VITE_ETHEREUM_DEPLOYMENT_VERSION=1
+VITE_ENABLED_ETHEREUM_NETWORKS='11155111'
+VITE_ATTESTOR_API_URLS=https://testnet.dlc.link/attestor-1,https://testnet.dlc.link/attestor-2,https://testnet.dlc.link/attestor-3
+VITE_BITCOIN_NETWORK=testnet
+VITE_BITCOIN_EXPLORER_API_URL=https://mempool.space/testnet
+VITE_BITCOIN_BLOCKCHAIN_API_URL=https://testnet.dlc.link/electrs

package.json

@@ -22,6 +22,8 @@
     "@chakra-ui/react": "^2.8.1",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
+    "@fontsource-variable/onest": "^5.0.3",
+    "@fontsource/onest": "^5.0.3",
     "@fontsource/poppins": "^5.0.8",
     "@ls-lint/ls-lint": "^2.2.2",
     "@reduxjs/toolkit": "^1.9.7",

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

@@ -3,7 +3,7 @@ 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'} w={'1280px'}>
       {children}
     </HStack>
   );

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

@@ -1,5 +1,6 @@
-import { HStack, Image, Link, Text } from '@chakra-ui/react';
+import { HStack, Link, Text } from '@chakra-ui/react';
 import { CustomCard } from '@components/how-it-works/components/custom-card';
+import { AuditReportIcon } from '@styles/icon';
 
 export function AuditReports(): React.JSX.Element {
   return (
@@ -8,14 +9,14 @@ export function AuditReports(): React.JSX.Element {
         <>
           <Text variant={'title'}>Audit Reports</Text>
           <HStack align={'start'} spacing={'15px'}>
-            <Image src={'/images/report.png'} w={'34px'} h={'42px'} pt={'5px'}></Image>
+            <AuditReportIcon fill={'rgba(50, 201, 247, 1)'} />
             <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'}
+                color={'accent.lightBlue.01'}
               >
                 Read the report...
               </Link>

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

@@ -24,7 +24,7 @@ export function HowToMint(): React.JSX.Element {
             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'}>
+                <Text as={'span'} color={'accent.lightBlue.01'}>
                   Ethereum Wallet.{' '}
                 </Text>
                 You will receive your deposit token dlcBTC to the same address.
@@ -38,7 +38,7 @@ export function HowToMint(): React.JSX.Element {
             content={
               <Text color={'white'}>
                 Confirm the transaction in your{' '}
-                <Text as={'span'} color={'light.blue.01'}>
+                <Text as={'span'} color={'accent.lightBlue.01'}>
                   Bitcoin Wallet
                 </Text>{' '}
                 which will lock your Bitcoin on-chain.
@@ -52,11 +52,11 @@ export function HowToMint(): React.JSX.Element {
             content={
               <Text color={'white'}>
                 Wait for Bitcoin to get locked on chain
-                <Text as={'span'} color={'light.blue.01'}>
+                <Text as={'span'} color={'accent.lightBlue.01'}>
                   (~1 hour).{' '}
                 </Text>
                 After confirmation dlcBTC tokens will automatically appear in your{' '}
-                <Text as={'span'} color={'light.blue.01'}>
+                <Text as={'span'} color={'accent.lightBlue.01'}>
                   Ethereum Wallet.{' '}
                 </Text>{' '}
                 You can use dlcBTC in big{' '}

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

@@ -32,7 +32,7 @@ export function WalletInfo({ src, coinName, content }: WalletInfoProps): React.J
           <Button variant={'vault'}>Download</Button>
         </Link>
       </Box>
-      <Text color={'light.blue.01'} fontStyle={'bold'}>
+      <Text color={'accent.lightBlue.01'} fontStyle={'bold'}>
         {coinName}
       </Text>
       <Box h={'140px'}>{content}</Box>

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

@@ -10,8 +10,6 @@ export function MiddleSection(): React.JSX.Element {
       h={'362px'}
       pl={'130px'}
       pr={'130px'}
-      background={'rgba(255,255,255,0.06)'}
-      boxShadow={'6px 6px 12px #0000004D'}
       mixBlendMode={'screen'}
       display={'flex'}
       justifyContent={'center'}

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

@@ -11,14 +11,14 @@ export function SetupInformation(): React.JSX.Element {
         </Text>
         <SetupInformationWalletRequirement
           logo={'/images/logos/ethereum-logo.svg'}
-          color={'accent.cyan.01'}
+          color={'accent.lightBlue.01'}
           walletName={'Metamask Wallet'}
           requirement={'+ETH (for fee)'}
           url={'https://metamask.io/'}
         />
         <SetupInformationWalletRequirement
           logo={'/images/logos/bitcoin-logo.svg'}
-          color={'accent.orange.01'}
+          color={'accent.lightBlue.01'}
           walletName={'Leather Wallet'}
           requirement={'+BTC (for lock)'}
           url={'https://leather.io/'}

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

@@ -30,7 +30,7 @@ export function LockScreenProtocolFee({
       w={'100%'}
       border={'1px solid'}
       borderRadius={'md'}
-      borderColor={'border.cyan.01'}
+      borderColor={'border.lightBlue.01'}
     >
       <HStack justifyContent={'space-between'} w={'100%'}>
         <Text color={'white.02'} fontSize={'sm'}>

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

@@ -10,12 +10,12 @@ export function MintUnmintLayout({ children, animate }: MintUnmintLayoutProps):
   return (
     <VStack
       px={'15px'}
-      w={'650px'}
+      w={'930px'}
       h={'625px'}
       bg={'background.container.01'}
       border={'1px solid'}
       borderRadius={'md'}
-      borderColor={'border.cyan.01'}
+      borderColor={'border.lightBlue.01'}
       css={{
         animation: animate ? `${boxShadowAnimation} 0.5s 2 ease-in-out` : 'none',
       }}

src/app/components/mint-unmint/components/progress-timeline/components/progress-timeline-step.tsx

@@ -1,6 +1,11 @@
 import { Divider, Stack, Text } from '@chakra-ui/react';
 
-import { StepIconOne, StepIconThree, StepIconTwo } from '../../../../../../styles/icon';
+import {
+  StepIconFour,
+  StepIconOne,
+  StepIconThree,
+  StepIconTwo,
+} from '../../../../../../styles/icon';
 
 interface StepProps {
   width?: string;
@@ -13,7 +18,7 @@ interface StepProps {
 
 function getIconForStep(currentStep: number, stepIndex: number): React.JSX.Element {
   const properties = {
-    fill: currentStep >= stepIndex ? 'rgba(7,232,216,1)' : 'rgba(255,255,255,1)',
+    fill: currentStep >= stepIndex ? 'rgba(50, 201, 247, 1)' : 'rgba(255,255,255,1)',
     opacity: currentStep > stepIndex ? '50%' : '100%',
     height: '15px',
   };
@@ -26,7 +31,7 @@ function getIconForStep(currentStep: number, stepIndex: number): React.JSX.Eleme
     case 2:
       return <StepIconThree {...properties} />;
     default:
-      return <StepIconOne {...properties} />;
+      return <StepIconFour {...properties} />;
   }
 }
 
@@ -41,7 +46,7 @@ export function StepGraphics({
       {!isLastStep && (
         <Divider
           orientation="horizontal"
-          borderColor={currentStep > stepIndex ? 'accent.cyan.01' : 'white.03'}
+          borderColor={currentStep > stepIndex ? 'accent.lightBlue.01' : 'white.03'}
           variant={currentStep > stepIndex ? 'thick' : 'thickDotted'}
           opacity={currentStep > stepIndex ? '50%' : '100%'}
         />
@@ -62,7 +67,7 @@ export function StepText({
     <Stack h={'25px'} w={width}>
       <Text
         textAlign={isFirstStep ? 'left' : isLastStep ? 'right' : 'center'}
-        color={currentStep >= stepIndex ? 'accent.cyan.01' : 'white.01'}
+        color={currentStep >= stepIndex ? 'accent.lightBlue.01' : 'white.01'}
         fontSize={'xs'}
         fontWeight={currentStep === stepIndex ? 800 : 400}
         opacity={currentStep > stepIndex ? '50%' : '100%'}

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

@@ -31,7 +31,7 @@ export function TransactionFormInput({
       bgColor={'white.01'}
       border={'2.5px solid'}
       borderRadius={'md'}
-      borderColor={'border.cyan.01'}
+      borderColor={'border.lightBlue.01'}
     >
       <HStack>
         <Image src={'/images/logos/dlc-btc-logo.svg'} alt={'dlcBTC'} boxSize={'20px'} />

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

@@ -15,7 +15,7 @@ export function TransactionFormWarning({
         <Link
           isExternal
           href={'https://leather.io/'}
-          color={'accent.orange.01'}
+          color={'accent.lightBlue.01'}
           textDecoration={'underline'}
         >
           Leather Wallet

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

@@ -53,7 +53,7 @@ export function TransactionForm(): React.JSX.Element {
           <Form onSubmit={handleSubmit}>
             <FormControl isInvalid={!!errors.amount && touched.amount}>
               <VStack spacing={'15px'} w={'300px'}>
-                <Text w={'100%'} color={'accent.cyan.01'}>
+                <Text w={'100%'} color={'accent.lightBlue.01'}>
                   Amount of dlcBTC you want to mint:
                 </Text>
                 <TransactionFormInput values={values} bitcoinPrice={bitcoinPrice} />

src/app/components/mint-unmint/components/transaction-summary/components/transaction-summary-preview-card.tsx

@@ -27,7 +27,7 @@ export function TransactionSummaryPreviewCard({
       p={'7.5px'}
       h={'50px'}
       w={'100%'}
-      bgGradient={'linear(to-r, background.content.01, background.content.02)'}
+      bg={'background.content.01'}
       blendMode={'screen'}
       border={'1px solid'}
       borderColor={'border.white.01'}

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

@@ -55,8 +55,8 @@ export function TransactionSummary({
   return (
     <VStack alignItems={'start'} w={'300px'} spacing={'15px'}>
       <HStack w={'100%'}>
-        {showProcessing && <Spinner color={'accent.cyan.01'} size={'md'} />}
-        <Text color={'accent.cyan.01'}>{flowPropertyMap[flow][currentStep[0]].title}:</Text>
+        {showProcessing && <Spinner color={'accent.lightBlue.01'} size={'md'} />}
+        <Text color={'accent.lightBlue.01'}>{flowPropertyMap[flow][currentStep[0]].title}:</Text>
       </HStack>
       <VaultCard vault={currentVault} />
       {showProcessing && (

src/app/components/mint-unmint/components/unmint/components/unmint-vault-selector.tsx

@@ -43,7 +43,7 @@ export function UnmintVaultSelector(): React.JSX.Element {
 
   return (
     <VStack alignItems={'start'} py={'2.5px'} px={'15px'} w={'300px'} h={'445px'} spacing={'15px'}>
-      <Text color={'accent.cyan.01'} fontSize={'md'} fontWeight={600}>
+      <Text color={'accent.lightBlue.01'} fontSize={'md'} fontWeight={600}>
         Select vault to redeem dlcBTC:
       </Text>
       {selectedVault ? (

src/app/components/mint-unmint/components/walkthrough/components/walkthrough-header.tsx

@@ -16,7 +16,7 @@ export function WalkthroughHeader({
   return (
     <VStack alignItems={'start'}>
       <HStack>
-        <Text color={'accent.cyan.01'} fontSize={'lg'}>
+        <Text color={'accent.lightBlue.01'} fontSize={'lg'}>
           Step {currentStep !== undefined && currentStep + 1}
         </Text>
         <WalkthroughBlockchainTag blockchain={blockchain} />

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

@@ -3,7 +3,7 @@ import { HasChildren } from '@models/has-children';
 
 export function WalkthroughLayout({ children }: HasChildren): React.JSX.Element {
   return (
-    <VStack alignItems={'start'} h={'445px'} w={'250px'} spacing={'15px'}>
+    <VStack alignItems={'start'} h={'445px'} w={'350px'} spacing={'15px'}>
       {children}
     </VStack>
   );