diff --git a/public/images/dlc-img.png b/public/images/dlc-img.png new file mode 100644 index 00000000..a7aa1e79 Binary files /dev/null and b/public/images/dlc-img.png differ diff --git a/public/images/leather.png b/public/images/leather.png new file mode 100644 index 00000000..4890172a Binary files /dev/null and b/public/images/leather.png differ diff --git a/public/images/metamask.png b/public/images/metamask.png new file mode 100644 index 00000000..4a0a5b8c Binary files /dev/null and b/public/images/metamask.png differ diff --git a/public/images/mint-btc-grad.png b/public/images/mint-btc-grad.png new file mode 100644 index 00000000..e62df58d Binary files /dev/null and b/public/images/mint-btc-grad.png differ diff --git a/public/images/mintBtc.png b/public/images/mintBtc.png new file mode 100644 index 00000000..6fe6ca7a Binary files /dev/null and b/public/images/mintBtc.png differ diff --git a/public/images/report.png b/public/images/report.png new file mode 100644 index 00000000..dd54d42d Binary files /dev/null and b/public/images/report.png differ diff --git a/public/images/unmint-btc-grad.png b/public/images/unmint-btc-grad.png new file mode 100644 index 00000000..0864559f Binary files /dev/null and b/public/images/unmint-btc-grad.png differ diff --git a/public/images/unmintBtc.png b/public/images/unmintBtc.png new file mode 100644 index 00000000..52afd9ad Binary files /dev/null and b/public/images/unmintBtc.png differ diff --git a/src/app/components/account/account.tsx b/src/app/components/account/account.tsx index 90ca5345..ea1fafb9 100644 --- a/src/app/components/account/account.tsx +++ b/src/app/components/account/account.tsx @@ -34,7 +34,7 @@ export function Account(): React.JSX.Element { } return ( - + {address !== undefined && wallet !== undefined ? ( handleTabClick('/my-vaults')} /> - {/* handleTabClick('/how-it-works')} - /> */} + /> ); } diff --git a/src/app/components/how-it-works/bottom/bottom-section.tsx b/src/app/components/how-it-works/bottom/bottom-section.tsx new file mode 100644 index 00000000..d1c54b9a --- /dev/null +++ b/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 ( + + + + + + + + + ); +} diff --git a/src/app/components/how-it-works/bottom/components/audit-reports.tsx b/src/app/components/how-it-works/bottom/components/audit-reports.tsx new file mode 100644 index 00000000..46df3ca7 --- /dev/null +++ b/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 ( + + { + <> + Audit Reports + + + + The following is a security audit report, completed by the team at CoinFabrik on + November 29, 2023.{' '} + + Read the report... + + + + + } + + ); +} diff --git a/src/app/components/how-it-works/bottom/components/flow-step.tsx b/src/app/components/how-it-works/bottom/components/flow-step.tsx new file mode 100644 index 00000000..1dc8ae5d --- /dev/null +++ b/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 ( + + {step} + {hasBadge ? ( + + {title} + {badge} + + ) : ( + {title} + )} + {content} + + ); +} diff --git a/src/app/components/how-it-works/bottom/components/how-to-mint.tsx b/src/app/components/how-it-works/bottom/components/how-to-mint.tsx new file mode 100644 index 00000000..31ca5851 --- /dev/null +++ b/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 ( + + { + <> + How to Mint dlcBTC + {'mint + + + Select an amount of Bitcoin you would like to lock and confirm it in your{' '} + + Ethereum Wallet.{' '} + + You will receive your deposit token dlcBTC to the same address. + + } + hasBadge={false} + /> + + Confirm the transaction in your{' '} + + Bitcoin Wallet + {' '} + which will lock your Bitcoin on-chain. + + } + hasBadge={false} + /> + + Wait for Bitcoin to get locked on chain + + (~1 hour).{' '} + + After confirmation dlcBTC tokens will automatically appear in your{' '} + + Ethereum Wallet.{' '} + {' '} + You can use dlcBTC in big{' '} + + supported DeFi protocols + {' '} + for lending, yield farming, staking and more. + + } + hasBadge={false} + /> + + + + + } + + ); +} diff --git a/src/app/components/how-it-works/bottom/components/how-to-unmint.tsx b/src/app/components/how-it-works/bottom/components/how-to-unmint.tsx new file mode 100644 index 00000000..ed40a0b8 --- /dev/null +++ b/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 ( + + { + <> + How to Unmint dlcBTC + {'unmint + + + Select the vault you would like to unmint. After a successful unmint you will + receive BTC in the same amount back to your wallet. + + } + hasBadge={false} + /> + + + } + + ); +} diff --git a/src/app/components/how-it-works/bottom/components/supported-wallets/components/wallet-info.tsx b/src/app/components/how-it-works/bottom/components/supported-wallets/components/wallet-info.tsx new file mode 100644 index 00000000..c12006f0 --- /dev/null +++ b/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 ( + + {''} + + + + + + + {coinName} + + {content} + + ); +} diff --git a/src/app/components/how-it-works/bottom/components/supported-wallets/supported-wallets.tsx b/src/app/components/how-it-works/bottom/components/supported-wallets/supported-wallets.tsx new file mode 100644 index 00000000..443be5f6 --- /dev/null +++ b/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 ( + + { + <> + + Supported Wallets + + }> + + We currently support MetaMask with support for other popular ethereum wallets + coming soon. + + } + > + + Leather Wallet supports DLCs, with Xverse Wallet joining next year. We're actively + working to include more Bitcoin Wallets as we grow. + + } + > + + + } + + ); +} diff --git a/src/app/components/how-it-works/components/custom-card.tsx b/src/app/components/how-it-works/components/custom-card.tsx new file mode 100644 index 00000000..d26ed4cd --- /dev/null +++ b/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 ( + + {children} + + ); +} diff --git a/src/app/components/how-it-works/components/how-it-works-layout.tsx b/src/app/components/how-it-works/components/how-it-works-layout.tsx new file mode 100644 index 00000000..b738d912 --- /dev/null +++ b/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 {children}; +} diff --git a/src/app/components/how-it-works/how-it-works.tsx b/src/app/components/how-it-works/how-it-works.tsx new file mode 100644 index 00000000..aba7ab0d --- /dev/null +++ b/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 ( + + { + + + + + + } + + ); +} diff --git a/src/app/components/how-it-works/middle/components/explanation-block.tsx b/src/app/components/how-it-works/middle/components/explanation-block.tsx new file mode 100644 index 00000000..5c734273 --- /dev/null +++ b/src/app/components/how-it-works/middle/components/explanation-block.tsx @@ -0,0 +1,25 @@ +import { Box, Stack, Text, VStack } from '@chakra-ui/react'; + +interface ExplanationBlockProps { + title: string; + content: React.ReactNode; + image: React.ReactNode; +} + +export function ExplanationBlock({ + title, + content, + image, +}: ExplanationBlockProps): React.JSX.Element { + return ( + + + {image} + + + {title} + {content} + + + ); +} diff --git a/src/app/components/how-it-works/middle/middle-section.tsx b/src/app/components/how-it-works/middle/middle-section.tsx new file mode 100644 index 00000000..6ded3ab6 --- /dev/null +++ b/src/app/components/how-it-works/middle/middle-section.tsx @@ -0,0 +1,58 @@ +import { Box, HStack, Image, Text } from '@chakra-ui/react'; + +import { ExplanationBlock } from './components/explanation-block'; + +export function MiddleSection(): React.JSX.Element { + return ( + + + } + content={ + + dlcBTC is a{' '} + + non-custodial + {' '} + representation of Bitcoin on the Ethereum blockchain. + + } + > + } + content={ + + + Discreet Log Contracts (DLCs) + {' '} + ensure only authorized parties can access locked Bitcoin, without third-party risks. + + } + > + } + content={ + + Your Bitcoin remains secure on its native chain and cannot be redirected or stolen. + + } + > + + + ); +} diff --git a/src/app/components/how-it-works/top/components/intro-video.tsx b/src/app/components/how-it-works/top/components/intro-video.tsx new file mode 100644 index 00000000..53672445 --- /dev/null +++ b/src/app/components/how-it-works/top/components/intro-video.tsx @@ -0,0 +1,38 @@ +import { useState } from 'react'; +import YouTube, { YouTubeProps } from 'react-youtube'; + +import { Box, Skeleton, VStack } from '@chakra-ui/react'; + +interface IntroVideoProps { + opts: YouTubeProps['opts']; + placeholderHeight: string; + placeholderWidth: string; +} + +export function IntroVideo({ + opts, + placeholderHeight, + placeholderWidth, +}: IntroVideoProps): React.JSX.Element { + const [isLoading, setIsLoading] = useState(true); + const onPlayerReady: YouTubeProps['onReady'] = event => { + event.target.pauseVideo(); + setIsLoading(false); + }; + + return ( + + + + + + + + ); +} diff --git a/src/app/components/how-it-works/top/top-section.tsx b/src/app/components/how-it-works/top/top-section.tsx new file mode 100644 index 00000000..86e007c3 --- /dev/null +++ b/src/app/components/how-it-works/top/top-section.tsx @@ -0,0 +1,26 @@ +import { Box, HStack, Text, VStack } from '@chakra-ui/react'; + +import { IntroVideo } from './components/intro-video'; + +export function TopSection(): React.JSX.Element { + return ( + + + + + dlcBTC + + + dlcBTC lets you use your Bitcoin on different DeFi platforms, all without giving up + control of your actual Bitcoin. + + + + + + ); +} diff --git a/src/app/components/modals/select-wallet-modal/components/select-wallet-menu.tsx b/src/app/components/modals/select-wallet-modal/components/select-wallet-menu.tsx index f65d2537..060d4374 100644 --- a/src/app/components/modals/select-wallet-modal/components/select-wallet-menu.tsx +++ b/src/app/components/modals/select-wallet-modal/components/select-wallet-menu.tsx @@ -14,9 +14,9 @@ export function SelectWalletMenu({ return ( ); diff --git a/src/app/pages/about/about.tsx b/src/app/pages/about/about.tsx index 53eb99b7..8a8ec7fc 100644 --- a/src/app/pages/about/about.tsx +++ b/src/app/pages/about/about.tsx @@ -1,9 +1,10 @@ -import { Text, VStack } from '@chakra-ui/react'; +import { HowItWorks } from '@components/how-it-works/how-it-works'; +import { PageLayout } from '@pages/components/page.layout'; export function About(): React.JSX.Element { return ( - - About - + + + ); } diff --git a/src/styles/app-theme.ts b/src/styles/app-theme.ts index 8460d95e..cbbe0e66 100644 --- a/src/styles/app-theme.ts +++ b/src/styles/app-theme.ts @@ -49,6 +49,7 @@ export const appTheme = extendTheme({ 'white.01': 'rgba(255,255,255,1)', 'white.02': 'rgba(255,255,255,0.75)', 'white.03': 'rgba(255,255,255,0.35)', + 'light.blue.01': 'rgba(154, 201, 255, 1)', }, fonts: { body: "'Poppins', poppins", diff --git a/src/styles/text-theme.ts b/src/styles/text-theme.ts index 8f973652..0bf9deb2 100644 --- a/src/styles/text-theme.ts +++ b/src/styles/text-theme.ts @@ -22,6 +22,24 @@ const navigate = defineStyle({ }, }); +const step = defineStyle({ + color: 'accent.cyan.01', + fontSize: 'lg', + fontWeight: 'regular', +}); + +const title = defineStyle({ + color: 'white', + fontSize: '2xl', + fontWeight: 'bold', +}); + +const subTitle = defineStyle({ + color: 'white', + fontSize: 'lg', + fontWeight: 'bold', +}); + export const textTheme = defineStyleConfig({ - variants: { header, welcome, navigate }, + variants: { header, welcome, navigate, step, title, subTitle }, });