diff --git a/apps/dcellar-web-ui/public/images/welcome/auth.png b/apps/dcellar-web-ui/public/images/welcome/auth.png new file mode 100644 index 00000000..1f115880 Binary files /dev/null and b/apps/dcellar-web-ui/public/images/welcome/auth.png differ diff --git a/apps/dcellar-web-ui/public/images/welcome/auth_sm.png b/apps/dcellar-web-ui/public/images/welcome/auth_sm.png new file mode 100644 index 00000000..54102f4e Binary files /dev/null and b/apps/dcellar-web-ui/public/images/welcome/auth_sm.png differ diff --git a/apps/dcellar-web-ui/public/images/welcome/banner-1.png b/apps/dcellar-web-ui/public/images/welcome/banner-1.png deleted file mode 100644 index 9f94685b..00000000 Binary files a/apps/dcellar-web-ui/public/images/welcome/banner-1.png and /dev/null differ diff --git a/apps/dcellar-web-ui/public/images/welcome/host.png b/apps/dcellar-web-ui/public/images/welcome/host.png deleted file mode 100644 index d237186c..00000000 Binary files a/apps/dcellar-web-ui/public/images/welcome/host.png and /dev/null differ diff --git a/apps/dcellar-web-ui/public/images/welcome/nft.png b/apps/dcellar-web-ui/public/images/welcome/nft.png deleted file mode 100644 index 256a0d14..00000000 Binary files a/apps/dcellar-web-ui/public/images/welcome/nft.png and /dev/null differ diff --git a/apps/dcellar-web-ui/public/images/welcome/nft_1.png b/apps/dcellar-web-ui/public/images/welcome/nft_1.png new file mode 100644 index 00000000..d5abb81e Binary files /dev/null and b/apps/dcellar-web-ui/public/images/welcome/nft_1.png differ diff --git a/apps/dcellar-web-ui/public/images/welcome/nft_sm.png b/apps/dcellar-web-ui/public/images/welcome/nft_sm.png new file mode 100644 index 00000000..c7a164cb Binary files /dev/null and b/apps/dcellar-web-ui/public/images/welcome/nft_sm.png differ diff --git a/apps/dcellar-web-ui/public/images/welcome/security.png b/apps/dcellar-web-ui/public/images/welcome/security.png deleted file mode 100644 index dbeaa462..00000000 Binary files a/apps/dcellar-web-ui/public/images/welcome/security.png and /dev/null differ diff --git a/apps/dcellar-web-ui/public/images/welcome/server.png b/apps/dcellar-web-ui/public/images/welcome/server.png new file mode 100644 index 00000000..d03e74bd Binary files /dev/null and b/apps/dcellar-web-ui/public/images/welcome/server.png differ diff --git a/apps/dcellar-web-ui/public/images/welcome/server_sm.png b/apps/dcellar-web-ui/public/images/welcome/server_sm.png new file mode 100644 index 00000000..34ab253f Binary files /dev/null and b/apps/dcellar-web-ui/public/images/welcome/server_sm.png differ diff --git a/apps/dcellar-web-ui/public/js/iconfont.min.js b/apps/dcellar-web-ui/public/js/iconfont.min.js index 7c46f4a2..43eb3766 100644 --- a/apps/dcellar-web-ui/public/js/iconfont.min.js +++ b/apps/dcellar-web-ui/public/js/iconfont.min.js @@ -1 +1 @@ -!function(e){var t,n,d,o,i,a,r='';function c(){i||(i=!0,d())}t=function(){var e,t,n;(n=document.createElement("div")).innerHTML=r,r=null,(t=n.getElementsByTagName("svg")[0])&&(t.setAttribute("aria-hidden","true"),t.style.position="absolute",t.style.width=0,t.style.height=0,t.style.overflow="hidden",e=t,(n=document.body).firstChild?(t=n.firstChild).parentNode.insertBefore(e,t):n.appendChild(e))},document.addEventListener?["complete","loaded","interactive"].indexOf(document.readyState)>-1?setTimeout(t,0):(n=function(){document.removeEventListener("DOMContentLoaded",n,!1),t()},document.addEventListener("DOMContentLoaded",n,!1)):document.attachEvent&&(d=t,o=e.document,i=!1,(a=function(){try{o.documentElement.doScroll("left")}catch(e){return void setTimeout(a,50)}c()})(),o.onreadystatechange=function(){"complete"==o.readyState&&(o.onreadystatechange=null,c())})}(window); +!function(e){var t,n,d,o,i,a,r='';function c(){i||(i=!0,d())}t=function(){var e,t,n;(n=document.createElement("div")).innerHTML=r,r=null,(t=n.getElementsByTagName("svg")[0])&&(t.setAttribute("aria-hidden","true"),t.style.position="absolute",t.style.width=0,t.style.height=0,t.style.overflow="hidden",e=t,(n=document.body).firstChild?(t=n.firstChild).parentNode.insertBefore(e,t):n.appendChild(e))},document.addEventListener?["complete","loaded","interactive"].indexOf(document.readyState)>-1?setTimeout(t,0):(n=function(){document.removeEventListener("DOMContentLoaded",n,!1),t()},document.addEventListener("DOMContentLoaded",n,!1)):document.attachEvent&&(d=t,o=e.document,i=!1,(a=function(){try{o.documentElement.doScroll("left")}catch(e){return void setTimeout(a,50)}c()})(),o.onreadystatechange=function(){"complete"==o.readyState&&(o.onreadystatechange=null,c())})}(window); diff --git a/apps/dcellar-web-ui/src/base/theme/light.ts b/apps/dcellar-web-ui/src/base/theme/light.ts index 5699f3cf..541b9d55 100644 --- a/apps/dcellar-web-ui/src/base/theme/light.ts +++ b/apps/dcellar-web-ui/src/base/theme/light.ts @@ -12,6 +12,7 @@ export const light = { opacity8: 'rgba(17, 132, 238, 0.15)', opacity9: 'rgba(0, 0, 0, 0.15)', opacity10: 'rgba(255, 255, 255, 0.10)', + opacity11: 'rgba(255, 255, 255, 0.80)', brand: { 'normal-hight': '#009e2c', normal: '#00ba34', diff --git a/apps/dcellar-web-ui/src/components/ConnectWallet/WalletConnectModal.tsx b/apps/dcellar-web-ui/src/components/ConnectWallet/WalletConnectModal.tsx index 60304a1c..4db6eb32 100644 --- a/apps/dcellar-web-ui/src/components/ConnectWallet/WalletConnectModal.tsx +++ b/apps/dcellar-web-ui/src/components/ConnectWallet/WalletConnectModal.tsx @@ -1,6 +1,14 @@ import { DCModal } from '@/components/common/DCModal'; import { WalletItem } from '@/components/ConnectWallet/WalletItem'; -import { Link, ModalBody, ModalCloseButton, ModalFooter, ModalHeader } from '@totejs/uikit'; +import { + Flex, + Link, + ModalBody, + ModalCloseButton, + ModalFooter, + ModalHeader, + Text, +} from '@totejs/uikit'; import { GAClick } from '@/components/common/GATracker'; import { useWallet } from '@/context/WalletConnectContext/hooks/useWallet'; import { GREENFIELD_CHAIN_ID } from '@/base/env'; @@ -40,11 +48,7 @@ export function WalletConnectModal() { }, []); useEffect(() => { - if ( - hasTrigger && - !isAuthPending && - !!address - ) { + if (hasTrigger && !isAuthPending && !!address) { onClose(); // Only user trigger login at landing page that app needs redirect to the main page. if (!ssrLandingRoutes.some((item) => item === router.pathname)) { @@ -86,11 +90,11 @@ export function WalletConnectModal() { const isLoading = isWalletConnecting || isAuthPending; - // useEffect(() => { - // if (isOpen) { - // disconnect(); - // } - // }, [disconnect, isOpen]); + useEffect(() => { + if (isOpen) { + disconnect(); + } + }, [disconnect, isOpen]); return ( - Connect a Wallet - + + Connect a Wallet + + By connecting your wallet, you agree to our  + + Terms of Use + + . + + + + {connectors?.map((item) => { const options = getOptionsByWalletName(item.name); const isActive = isLoading && connector?.name === item.name; @@ -125,21 +149,21 @@ export function WalletConnectModal() { - Don’t have a wallet? - Get one here! + I don't have a wallet. diff --git a/apps/dcellar-web-ui/src/components/ConnectWallet/index.tsx b/apps/dcellar-web-ui/src/components/ConnectWallet/index.tsx index 22ac267e..6867d6ee 100644 --- a/apps/dcellar-web-ui/src/components/ConnectWallet/index.tsx +++ b/apps/dcellar-web-ui/src/components/ConnectWallet/index.tsx @@ -7,6 +7,7 @@ import { setConnectWallet } from '@/store/slices/global'; import { useAppSelector } from '@/store'; import { useRouter } from 'next/router'; import { InternalRoutePaths } from '@/utils/constant'; +import { useAccount } from 'wagmi'; interface ConnectWalletProps extends DCButtonProps { icon?: ReactElement; @@ -17,23 +18,23 @@ export const ConnectWallet = memo>(function ConnectB const dispatch = useDispatch(); const router = useRouter(); const { loginAccount } = useAppSelector((root) => root.persist); + const { isConnecting, isConnected, connector } = useAccount(); const { icon, text, ...restProps } = props; const onOpen = () => { - if (loginAccount) { - const originPathname = decodeURIComponent(router.query.originAsPath as string); - setTimeout( - () => - router.push( - !!originPathname && originPathname !== 'undefined' - ? originPathname - : InternalRoutePaths.buckets, - ), - 100, - ); - return; - }; - dispatch(setConnectWallet(true)); + // The window.trustwallet.request method is undefined when the app is loaded. So add a delay to avoid. + setTimeout(() => { + if (loginAccount && isConnected && !isConnecting) { + const originPathname = decodeURIComponent(router.query.originAsPath as string); + return router.push( + !!originPathname && originPathname !== 'undefined' + ? originPathname + : InternalRoutePaths.buckets, + ); + }; + dispatch(setConnectWallet(true)); + }, 200) } + return ( <> { const { logout } = useLogin(); @@ -21,13 +22,13 @@ export const WrongNetworkModal = ({ isOpen, onClose }: any) => { {}} gaShowName="dc.wrongnet.gf_modal.0.show"> - + - Wrong Network + Switch Network - You are on the wrong network. Switch your wallet to BNB Greenfield first. + To complete the action, you need to switch to {CHAIN_NAMES[GREENFIELD_CHAIN_ID]}. @@ -39,7 +40,7 @@ export const WrongNetworkModal = ({ isOpen, onClose }: any) => { switchNetwork?.(GREENFIELD_CHAIN_ID); }} > - Switch to BNB Greenfield + Switch to {CHAIN_NAMES[GREENFIELD_CHAIN_ID]} { paddingX="40px" alignItems="center" justifyContent={'space-between'} - bg={'transparent'} position={'fixed'} zIndex={1100} backdropFilter={'blur(10px)'} boxShadow={isScroll ? '0px 4px 24px 0px rgba(0, 0, 0, 0.08)' : 'none'} + background={isScroll ? 'opacity11' : 'transparent'} > diff --git a/apps/dcellar-web-ui/src/context/LoginContext/provider.tsx b/apps/dcellar-web-ui/src/context/LoginContext/provider.tsx index 55645d27..26ae807d 100644 --- a/apps/dcellar-web-ui/src/context/LoginContext/provider.tsx +++ b/apps/dcellar-web-ui/src/context/LoginContext/provider.tsx @@ -45,7 +45,7 @@ export function LoginContextProvider(props: PropsWithChildren { if (pathname === '/' || inline) return; @@ -58,7 +58,7 @@ export function LoginContextProvider(props: PropsWithChildren { - if (!connector) { + if (!isConnected) { logout(); } }, 1000); @@ -66,7 +66,7 @@ export function LoginContextProvider(props: PropsWithChildren { clearTimeout(timer); }; - }, [connector, inline, loginAccount, logout, pathname, walletAddress]); + }, [inline, isConnected, loginAccount, logout, pathname, walletAddress]); useAsyncEffect(async () => { // ssr pages loginAccount initial value '' diff --git a/apps/dcellar-web-ui/src/modules/pricing-calculator/components/FAQ.tsx b/apps/dcellar-web-ui/src/modules/pricing-calculator/components/FAQ.tsx index b1712e51..d5674fe7 100644 --- a/apps/dcellar-web-ui/src/modules/pricing-calculator/components/FAQ.tsx +++ b/apps/dcellar-web-ui/src/modules/pricing-calculator/components/FAQ.tsx @@ -174,12 +174,12 @@ export const FAQ = () => {

FAQ

{data.map((item, index) => ( - - + + {item.question} - + {item.answer} diff --git a/apps/dcellar-web-ui/src/modules/pricing-calculator/components/NetworkSwitch.tsx b/apps/dcellar-web-ui/src/modules/pricing-calculator/components/NetworkSwitch.tsx index 4fffbc10..431854cc 100644 --- a/apps/dcellar-web-ui/src/modules/pricing-calculator/components/NetworkSwitch.tsx +++ b/apps/dcellar-web-ui/src/modules/pricing-calculator/components/NetworkSwitch.tsx @@ -16,6 +16,7 @@ const LINKS = { export const NetworkSwitch = () => { const network = ['testnet', 'mainnet'].includes(runtimeEnv) ? runtimeEnv : 'testnet'; const onSwitchClick = (net: 'mainnet' | 'testnet') => { + console.log('on switch click', net, network, LINKS) if (net === network) return; window.location.href = LINKS[net].fullUrl; }; @@ -50,7 +51,10 @@ export const NetworkSwitch = () => { border="none" h={35} borderRadius={3} - onClick={() => onSwitchClick('testnet')} + onClick={(e) => { + e.preventDefault(); + onSwitchClick('testnet'); + }} sx={ network === 'testnet' ? {} diff --git a/apps/dcellar-web-ui/src/modules/pricing-calculator/components/SizeMenu.tsx b/apps/dcellar-web-ui/src/modules/pricing-calculator/components/SizeMenu.tsx index 3781ce65..f8017c94 100644 --- a/apps/dcellar-web-ui/src/modules/pricing-calculator/components/SizeMenu.tsx +++ b/apps/dcellar-web-ui/src/modules/pricing-calculator/components/SizeMenu.tsx @@ -31,6 +31,7 @@ export const SizeMenu = ({ bgColor={'bg.bottom'} _hover={{ bg: 'bg.secondary', + border: '1px solid brand.brand5', }} _expanded={{ border: '1px solid brand.brand5' diff --git a/apps/dcellar-web-ui/src/modules/welcome/components/FeatureItem.tsx b/apps/dcellar-web-ui/src/modules/welcome/components/FeatureItem.tsx index 93c0133e..933302f0 100644 --- a/apps/dcellar-web-ui/src/modules/welcome/components/FeatureItem.tsx +++ b/apps/dcellar-web-ui/src/modules/welcome/components/FeatureItem.tsx @@ -1,4 +1,4 @@ -import { Flex, Text, Image, useMediaQuery } from '@totejs/uikit'; +import { Flex, Text, Image, useMediaQuery, Square } from '@totejs/uikit'; import { TFeatureItem } from './KeyFeatures'; import { smMedia } from '@/modules/responsive'; import { INTER_FONT } from '@/modules/wallet/constants'; @@ -69,6 +69,8 @@ export const FeatureItem = ({ title, desc, tag, introImg, introImgSm }: TFeature alt={`${title} image`} w={'50%'} src={isMobile ? introImgSm : introImg} + fallbackStrategy="beforeLoadOrError" + fallback={} sx={{ [smMedia]: { w: '100%', diff --git a/apps/dcellar-web-ui/src/modules/welcome/components/HelpDevelopers.tsx b/apps/dcellar-web-ui/src/modules/welcome/components/HelpDevelopers.tsx index 9049fe9d..c2761cb6 100644 --- a/apps/dcellar-web-ui/src/modules/welcome/components/HelpDevelopers.tsx +++ b/apps/dcellar-web-ui/src/modules/welcome/components/HelpDevelopers.tsx @@ -1,6 +1,6 @@ import { assetPrefix } from '@/base/env'; import { LandingH2, LandingResponsiveContainer } from '..'; -import { Box, Flex, Text, Image, useMediaQuery } from '@totejs/uikit'; +import { Box, Flex, Text, Image, useMediaQuery, Square } from '@totejs/uikit'; import { smMedia } from '@/modules/responsive'; import { GAClick } from '@/components/common/GATracker'; import { INTER_FONT } from '@/modules/wallet/constants'; @@ -9,23 +9,27 @@ const datas = [ { intro: 'NFT Storage and Minting', link: 'https://docs.nodereal.io/docs/dcellar-as-developer-tool#nft-metadata-and-medium-storage', - img: `${assetPrefix}/images/welcome/nft.png`, + img: `${assetPrefix}/images/welcome/nft_1.png`, + imgSm: `${assetPrefix}/images/welcome/nft_sm.png`, gaClickName: 'dc_lp.homepage.use_case.nft.click', }, { intro: 'SP Functional Verification', link: 'https://docs.nodereal.io/docs/dcellar-as-developer-tool#verify-your-storage-provider-sp-with-dcellar', - img: `${assetPrefix}/images/welcome/security.png`, + img: `${assetPrefix}/images/welcome/auth.png`, + imgSm: `${assetPrefix}/images/welcome/auth_sm.png`, gaClickName: 'dc_lp.homepage.use_case.sp.click', }, { intro: 'Web Hosting', link: 'https://docs.nodereal.io/docs/dcellar-as-developer-tool#web-hosting', - img: `${assetPrefix}/images/welcome/host.png`, + img: `${assetPrefix}/images/welcome/server.png`, + imgSm: `${assetPrefix}/images/welcome/server_sm.png`, gaClickName: 'dc_lp.homepage.use_case.hosting.click', }, ]; export const HelpDevelopers = () => { + const [isMobile] = useMediaQuery('(max-width: 767px)'); return ( { {datas && datas.map((item, index) => ( - - {`${item.intro} + + {`${item.intro}} + > { Key Features - - + + {keyFeatureList && keyFeatureList.map((item, index) => ( - + {item.label} {item.tag && ( - + diff --git a/apps/dcellar-web-ui/src/utils/constant.ts b/apps/dcellar-web-ui/src/utils/constant.ts index 9a0b639e..d83ec2a4 100644 --- a/apps/dcellar-web-ui/src/utils/constant.ts +++ b/apps/dcellar-web-ui/src/utils/constant.ts @@ -11,9 +11,9 @@ export const reverseVisibilityType = convertVisibility(); export const CHAIN_NAMES: { [key: number | string]: string } = { 56: 'BNB Smart Chain Mainnet', 97: 'BNB Smart Chain Testnet', - 9000: 'Greenfield Devnet', - 5600: 'Greenfield Testnet', - 1017: 'Greenfield Mainnet', + 9000: 'BNB Greenfield Devnet', + 5600: 'BNB Greenfield Testnet', + 1017: 'BNB Greenfield Mainnet', }; export const GNFD_TESTNET = 5600; diff --git a/apps/dcellar-web-ui/src/utils/time.ts b/apps/dcellar-web-ui/src/utils/time.ts index 45d0fcd0..6697de57 100644 --- a/apps/dcellar-web-ui/src/utils/time.ts +++ b/apps/dcellar-web-ui/src/utils/time.ts @@ -51,7 +51,7 @@ export const formatFullTime = ( utcZeroTimestamp = 0, format?: 'MMM D, YYYY HH:mm A' | 'YYYY-MM-DD HH:mm:ss', ) => { - if (String(utcZeroTimestamp).length !== 13) { + if (!utcZeroTimestamp) { return '--'; } const formatStyle = format || 'MMM D, YYYY HH:mm A'; diff --git a/apps/dcellar-web-ui/typings.d.ts b/apps/dcellar-web-ui/typings.d.ts index ed7eea31..551c6360 100644 --- a/apps/dcellar-web-ui/typings.d.ts +++ b/apps/dcellar-web-ui/typings.d.ts @@ -43,7 +43,8 @@ declare module '@totejs/uikit' { | 'opacity7' | 'opacity8' | 'opacity9' - | 'opacity10'; + | 'opacity10' + | 'opacity11'; shadows: BaseThemeTypings['shadows']; } }