diff --git a/src/app/components/mint-unmint/components/landing-page/components/landing-page.layout.tsx b/src/app/components/mint-unmint/components/landing-page/components/landing-page.layout.tsx new file mode 100644 index 00000000..b5307027 --- /dev/null +++ b/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 ( + + {children} + + ); +} diff --git a/src/app/components/mint-unmint/components/setup-information-stack/components/setup-information-wallet-requirement.tsx b/src/app/components/mint-unmint/components/landing-page/components/setup-information/components/setup-information-wallet-requirement.tsx similarity index 100% rename from src/app/components/mint-unmint/components/setup-information-stack/components/setup-information-wallet-requirement.tsx rename to src/app/components/mint-unmint/components/landing-page/components/setup-information/components/setup-information-wallet-requirement.tsx diff --git a/src/app/components/mint-unmint/components/landing-page/components/setup-information/setup-informatio.tsx b/src/app/components/mint-unmint/components/landing-page/components/setup-information/setup-informatio.tsx new file mode 100644 index 00000000..8d9a260d --- /dev/null +++ b/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 ( + + + + What you will need: + + + + + + ); +} diff --git a/src/app/components/mint-unmint/components/landing-page/components/welcome-stack.tsx b/src/app/components/mint-unmint/components/landing-page/components/welcome-stack.tsx new file mode 100644 index 00000000..6098e660 --- /dev/null +++ b/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 ( + + + + {setupText} + + navigate('/how-it-works')}> + How it works? + + + + + + ); +} diff --git a/src/app/components/mint-unmint/components/landing-page/landing-page.tsx b/src/app/components/mint-unmint/components/landing-page/landing-page.tsx new file mode 100644 index 00000000..395393cd --- /dev/null +++ b/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 ( + + + + + + + + + + ); +} diff --git a/src/app/components/mint-unmint/components/protocol-summary-stack/components/protocol-summary-stack.layout.tsx b/src/app/components/mint-unmint/components/protocol-summary-stack/components/protocol-summary-stack.layout.tsx index 45b99604..7f40bd8e 100644 --- a/src/app/components/mint-unmint/components/protocol-summary-stack/components/protocol-summary-stack.layout.tsx +++ b/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 ( - + {children} ); diff --git a/src/app/components/mint-unmint/components/protocol-summary-stack/protocol-summary-stack.tsx b/src/app/components/mint-unmint/components/protocol-summary-stack/protocol-summary-stack.tsx index 3cc84298..08137f2a 100644 --- a/src/app/components/mint-unmint/components/protocol-summary-stack/protocol-summary-stack.tsx +++ b/src/app/components/mint-unmint/components/protocol-summary-stack/protocol-summary-stack.tsx @@ -12,7 +12,7 @@ export function ProtocolSummaryStack(): React.JSX.Element { const bitcoinPrice = blockchainContext?.bitcoin.bitcoinPrice; return ( - + TVL @@ -29,7 +29,6 @@ export function ProtocolSummaryStack(): React.JSX.Element { - {/* */} ); } diff --git a/src/app/components/mint-unmint/components/setup-information-stack/components/setup-information-stack.layout.tsx b/src/app/components/mint-unmint/components/setup-information-stack/components/setup-information-stack.layout.tsx deleted file mode 100644 index e987e543..00000000 --- a/src/app/components/mint-unmint/components/setup-information-stack/components/setup-information-stack.layout.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { VStack } from '@chakra-ui/react'; -import { HasChildren } from '@models/has-children'; - -export function SetupInformationStackLayout({ children }: HasChildren): React.JSX.Element { - return ( - - {children} - - ); -} diff --git a/src/app/components/mint-unmint/components/setup-information-stack/setup-information-stack.tsx b/src/app/components/mint-unmint/components/setup-information-stack/setup-information-stack.tsx deleted file mode 100644 index 04dbeb6e..00000000 --- a/src/app/components/mint-unmint/components/setup-information-stack/setup-information-stack.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import React from 'react'; -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'; - -import { SetupInformationStackLayout } from './components/setup-information-stack.layout'; -import { SetupInformationWalletRequirement } from './components/setup-information-wallet-requirement'; - -export function SetupInformationStack(): React.JSX.Element { - const navigate = useNavigate(); - const dispatch = useDispatch(); - - const setupText = 'Ready to\n mint dlcBTC?'; - - function onConnectWalletClick(): void { - dispatch(modalActions.toggleSelectWalletModalVisibility()); - } - - return ( - - - - - {setupText} - - navigate('/how-it-works')}> - How it works? - - - - - - - - What you will need: - - - - - - - - ); -} diff --git a/src/app/components/mint-unmint/mint-unmint.tsx b/src/app/components/mint-unmint/mint-unmint.tsx index 4ea5c094..dfe95e35 100644 --- a/src/app/components/mint-unmint/mint-unmint.tsx +++ b/src/app/components/mint-unmint/mint-unmint.tsx @@ -1,23 +1,12 @@ import { useEffect, useState } from 'react'; import { useDispatch, useSelector } from 'react-redux'; -import { - Divider, - Spacer, - Tab, - TabIndicator, - TabList, - TabPanel, - TabPanels, - Tabs, -} from '@chakra-ui/react'; +import { Spacer, Tab, TabIndicator, TabList, TabPanel, TabPanels, Tabs } from '@chakra-ui/react'; import { RootState } from '@store/index'; import { mintUnmintActions } from '@store/slices/mintunmint/mintunmint.actions'; import { MintUnmintLayout } from './components/mint-unmint.layout'; import { Mint } from './components/mint/mint'; -import { ProtocolSummaryStack } from './components/protocol-summary-stack/protocol-summary-stack'; -import { SetupInformationStack } from './components/setup-information-stack/setup-information-stack'; import { Unmint } from './components/unmint/unmint'; interface MintUnmintContainerProps { @@ -53,15 +42,7 @@ export function MintUnmint({ address }: MintUnmintContainerProps): React.JSX.Ele - {address ? ( - - ) : ( - <> - - - - - )} + diff --git a/src/app/pages/dashboard/dashboard.tsx b/src/app/pages/dashboard/dashboard.tsx index 27ae46fb..5010c1ba 100644 --- a/src/app/pages/dashboard/dashboard.tsx +++ b/src/app/pages/dashboard/dashboard.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { useSelector } from 'react-redux'; +import { LandingPage } from '@components/mint-unmint/components/landing-page/landing-page'; import { MintUnmint } from '@components/mint-unmint/mint-unmint'; import { MyVaultsSmall } from '@components/my-vaults-small/my-vaults-small'; import { PageLayout } from '@pages/components/page.layout'; @@ -11,8 +12,14 @@ export function Dashboard(): React.JSX.Element { return ( - - + {address ? ( + <> + + + + ) : ( + + )} ); }