From 29f1bc51e45cdfcf89baff0725ca2e2614fad279 Mon Sep 17 00:00:00 2001 From: devinxl Date: Mon, 18 Sep 2023 16:25:39 +0800 Subject: [PATCH 01/14] feat(dcellar-web-ui): add price calculator --- .../dcellar-web-ui/public/images/price/bg.svg | 271 +++++++++++ .../public/images/price/bg_2.svg | 46 ++ .../public/images/price/start_bg.svg | 44 ++ .../src/components/layout/Footer/index.tsx | 36 +- .../src/components/layout/Header/index.tsx | 4 +- .../components/layout/StaticHeader/index.tsx | 48 ++ .../components/layout/StaticPage/index.tsx | 29 ++ apps/dcellar-web-ui/src/facade/common.ts | 15 + .../price-calculator/components/Banner.tsx | 16 + .../price-calculator/components/CalItem.tsx | 8 + .../components/Calculator.tsx | 439 ++++++++++++++++++ .../price-calculator/components/Common.tsx | 2 + .../components/CustomTime.tsx | 81 ++++ .../price-calculator/components/FAQ.tsx | 12 + .../price-calculator/components/FeeItem.tsx | 36 ++ .../price-calculator/components/NumInput.tsx | 43 ++ .../components/PricingCard.tsx | 144 ++++++ .../components/SPFreeQuota.tsx | 50 ++ .../price-calculator/components/SizeMenu.tsx | 55 +++ .../components/StartBuild.tsx | 31 ++ .../src/modules/price-calculator/index.tsx | 93 ++++ .../src/modules/price-calculator/utils.ts | 50 ++ .../src/pages/pricecalculator/index.tsx | 13 + .../dcellar-web-ui/src/store/slices/global.ts | 12 +- apps/dcellar-web-ui/src/utils/getUTC0Year.ts | 1 + apps/dcellar-web-ui/src/utils/time.ts | 14 +- 26 files changed, 1568 insertions(+), 25 deletions(-) create mode 100644 apps/dcellar-web-ui/public/images/price/bg.svg create mode 100644 apps/dcellar-web-ui/public/images/price/bg_2.svg create mode 100644 apps/dcellar-web-ui/public/images/price/start_bg.svg create mode 100644 apps/dcellar-web-ui/src/components/layout/StaticHeader/index.tsx create mode 100644 apps/dcellar-web-ui/src/components/layout/StaticPage/index.tsx create mode 100644 apps/dcellar-web-ui/src/modules/price-calculator/components/Banner.tsx create mode 100644 apps/dcellar-web-ui/src/modules/price-calculator/components/CalItem.tsx create mode 100644 apps/dcellar-web-ui/src/modules/price-calculator/components/Calculator.tsx create mode 100644 apps/dcellar-web-ui/src/modules/price-calculator/components/Common.tsx create mode 100644 apps/dcellar-web-ui/src/modules/price-calculator/components/CustomTime.tsx create mode 100644 apps/dcellar-web-ui/src/modules/price-calculator/components/FAQ.tsx create mode 100644 apps/dcellar-web-ui/src/modules/price-calculator/components/FeeItem.tsx create mode 100644 apps/dcellar-web-ui/src/modules/price-calculator/components/NumInput.tsx create mode 100644 apps/dcellar-web-ui/src/modules/price-calculator/components/PricingCard.tsx create mode 100644 apps/dcellar-web-ui/src/modules/price-calculator/components/SPFreeQuota.tsx create mode 100644 apps/dcellar-web-ui/src/modules/price-calculator/components/SizeMenu.tsx create mode 100644 apps/dcellar-web-ui/src/modules/price-calculator/components/StartBuild.tsx create mode 100644 apps/dcellar-web-ui/src/modules/price-calculator/index.tsx create mode 100644 apps/dcellar-web-ui/src/modules/price-calculator/utils.ts create mode 100644 apps/dcellar-web-ui/src/pages/pricecalculator/index.tsx diff --git a/apps/dcellar-web-ui/public/images/price/bg.svg b/apps/dcellar-web-ui/public/images/price/bg.svg new file mode 100644 index 00000000..66e851c1 --- /dev/null +++ b/apps/dcellar-web-ui/public/images/price/bg.svg @@ -0,0 +1,271 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/dcellar-web-ui/public/images/price/bg_2.svg b/apps/dcellar-web-ui/public/images/price/bg_2.svg new file mode 100644 index 00000000..80ba4ea0 --- /dev/null +++ b/apps/dcellar-web-ui/public/images/price/bg_2.svg @@ -0,0 +1,46 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/dcellar-web-ui/public/images/price/start_bg.svg b/apps/dcellar-web-ui/public/images/price/start_bg.svg new file mode 100644 index 00000000..4ffa8694 --- /dev/null +++ b/apps/dcellar-web-ui/public/images/price/start_bg.svg @@ -0,0 +1,44 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/dcellar-web-ui/src/components/layout/Footer/index.tsx b/apps/dcellar-web-ui/src/components/layout/Footer/index.tsx index 4df8c953..69c36b7d 100644 --- a/apps/dcellar-web-ui/src/components/layout/Footer/index.tsx +++ b/apps/dcellar-web-ui/src/components/layout/Footer/index.tsx @@ -1,17 +1,27 @@ +import { Flex, FlexProps, Link, LinkProps, Text } from '@totejs/uikit'; import React from 'react'; -import { Flex, FlexProps, Link, Text } from '@totejs/uikit'; import { getUTC0Year } from '@/utils/getUTC0Year'; import { noderealUrl } from '@/constants/links'; import { GAClick } from '@/components/common/GATracker'; import { useRouter } from 'next/router'; +export const UnderlineLink = (props: LinkProps) => ( + + {props.children} + +); + export const Footer = (props: FlexProps) => { const utcYear = getUTC0Year(); const { ...restProps } = props; - // const fixAtBottomStyle = fixAtBottom - // ? { position: 'fixed', bottom: 0, left: 0, right: 0 } - // : { position: 'absolute', bottom: 0, left: '269px', right: 0 }; - const { pathname } = useRouter(); const gaClickName = getGAOptions(pathname); @@ -19,28 +29,22 @@ export const Footer = (props: FlexProps) => { © {utcYear}  - - NodeReal - + NodeReal . All rights reserved. + Terms of Use + Privacy Policy ); }; diff --git a/apps/dcellar-web-ui/src/components/layout/Header/index.tsx b/apps/dcellar-web-ui/src/components/layout/Header/index.tsx index 1c72beab..77380cff 100644 --- a/apps/dcellar-web-ui/src/components/layout/Header/index.tsx +++ b/apps/dcellar-web-ui/src/components/layout/Header/index.tsx @@ -26,12 +26,12 @@ import { StoreFeeParams } from './StoreFeeParams'; import { ManageQuotaDrawer } from '@/components/layout/Header/ManageQuota'; import { DisconnectWalletModal } from './DisconnectWalletModal'; -const renderAvatar = (size?: 'sm' | 'md') => { +export const renderAvatar = (size?: 'sm' | 'md') => { const circleSize = size === 'sm' ? 20 : 36; const imgSize = size === 'sm' ? 28 : 32; return ( - avatar + avatar ); }; diff --git a/apps/dcellar-web-ui/src/components/layout/StaticHeader/index.tsx b/apps/dcellar-web-ui/src/components/layout/StaticHeader/index.tsx new file mode 100644 index 00000000..c8a25f37 --- /dev/null +++ b/apps/dcellar-web-ui/src/components/layout/StaticHeader/index.tsx @@ -0,0 +1,48 @@ +import { Box, Text, Flex, IconButtonProps, Link } from '@totejs/uikit'; +import { Logo } from '../Logo'; +import { GAClick } from '@/components/common/GATracker'; +import { ExternalLinkIcon, IconProps, WalletIcon } from '@totejs/icons'; +import { DCButton } from '@/components/common/DCButton'; +import WalletFilledIcon from '@/public/images/icons/wallet-filled.svg'; + +const DEFAULT_MENU_OPTIONS = [ + { + title: 'Homepage', + link: '/', + target: '', + icon: null + }, + { + title: 'Pricing', + link: '/pricecalculator', + target: '', + icon: null + }, + { + title: 'Docs', + link: '#', + target: '_blank', + icon: + }, +]; +export const StaticHeader = () => { + return ( + + + + + + {DEFAULT_MENU_OPTIONS.map((item) => ( + + {item.title} + {item.icon} + + ))} + + + + Get Started + + + ); +}; diff --git a/apps/dcellar-web-ui/src/components/layout/StaticPage/index.tsx b/apps/dcellar-web-ui/src/components/layout/StaticPage/index.tsx new file mode 100644 index 00000000..03ca31a2 --- /dev/null +++ b/apps/dcellar-web-ui/src/components/layout/StaticPage/index.tsx @@ -0,0 +1,29 @@ +import React, { ReactElement } from 'react'; +import { StaticHeader } from '../StaticHeader'; +import { Footer } from '../Footer'; +import { Box, Flex } from '@totejs/uikit'; + +export interface StaticPageProps { + page: ReactElement; +} + +export const StaticPage = (props: StaticPageProps) => { + const { page } = props; + return ( + + + + {page} +