node-real · devinxl · Oct 12, 2023 · Oct 11, 2023 · Oct 11, 2023 · Oct 11, 2023
@@ -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',

@@ -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 (
     <DCModal
@@ -101,8 +105,28 @@ export function WalletConnectModal() {
       gaClickCloseName="dc.walletconnect.modal.close.click"
     >
       <ModalCloseButton />
-      <ModalHeader>Connect a Wallet</ModalHeader>
-      <ModalBody mt={34}>
+      <ModalHeader flexDirection={'column'} alignItems={'center'} gap={8}>
+        <Text>Connect a Wallet</Text>
+        <Flex fontSize={14} fontWeight={400} color={'readable.tertiary'}>
+          By connecting your wallet, you agree to our&nbsp;
+          <Link
+            href={InternalRoutePaths.terms}
+            isExternal
+            color="inherit"
+            alignItems={'center'}
+            gap={8}
+            _hover={{
+              textDecoration: 'underline',
+              color: 'brand.brand6'
+            }}
+          >
+            Terms of Use
+          </Link>
+          .
+        </Flex>
+      </ModalHeader>
+
+      <ModalBody mt={32}>
         {connectors?.map((item) => {
           const options = getOptionsByWalletName(item.name);
           const isActive = isLoading && connector?.name === item.name;
@@ -125,21 +149,21 @@ export function WalletConnectModal() {
       </ModalBody>
 
       <ModalFooter
-        mt={40}
+        mt={16}
         fontSize={14}
-        fontWeight={400}
+        fontWeight={600}
         lineHeight="17px"
         color="readable.tertiary"
-        gap={4}
       >
-        Don’t have a wallet?
         <Link
           href={TRUST_WALLET_DOWNLOAD_URL}
           isExternal
           color="inherit"
-          textDecoration="underline"
+          display={'flex'}
+          alignItems={'center'}
+          gap={8}
         >
-          Get one here!
+          <IconFont type="wallet" w={24} />I don't have a wallet.
         </Link>
       </ModalFooter>
     </DCModal>

@@ -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<Partial<ConnectWalletProps>>(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 (
     <>
       <DCButton

@@ -7,6 +7,7 @@ import { DCButton } from '../common/DCButton';
 import { useWalletSwitchNetWork } from '@/context/WalletConnectContext';
 import { useLogin } from '@/hooks/useLogin';
 import { IconFont } from '@/components/IconFont';
+import { CHAIN_NAMES } from '@/utils/constant';
 
 export const WrongNetworkModal = ({ isOpen, onClose }: any) => {
   const { logout } = useLogin();
@@ -21,13 +22,13 @@ export const WrongNetworkModal = ({ isOpen, onClose }: any) => {
     <DCModal isOpen={isOpen} onClose={() => {}} gaShowName="dc.wrongnet.gf_modal.0.show">
       <ModalBody textAlign={'center'} mt={0}>
         <Flex justifyContent={'center'}>
-          <IconFont w={120} type={'error-network'} />
+          <IconFont w={120} type={'switch-network'} />
         </Flex>
         <Text fontSize={'24px'} fontWeight={600} lineHeight="150%" marginY={'16px'}>
-          Wrong Network
+          Switch Network
         </Text>
         <Text color="#76808F" fontSize={'18px'} fontWeight="400" lineHeight={'22px'}>
-          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]}.
         </Text>
       </ModalBody>
       <ModalFooter flexDirection={'column'} mt={24} gap={16}>
@@ -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]}
         </DCButton>
         <DCButton
           size={'lg'}

@@ -44,11 +44,11 @@ export const BaseHeader = () => {
       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'}
     >
       <GAClick name="dc_lp.main.header.logo.click">
         <Logo href="/" />

@@ -45,7 +45,7 @@ export function LoginContextProvider(props: PropsWithChildren<LoginContextProvid
   });
 
   const { pathname } = useRouter();
-  const { address: walletAddress, connector } = useAccount();
+  const { address: walletAddress, isConnected } = useAccount();
 
   useEffect(() => {
     if (pathname === '/' || inline) return;
@@ -58,15 +58,15 @@ export function LoginContextProvider(props: PropsWithChildren<LoginContextProvid
     // but if wallet is locked, we can't get the connector from wagmi
     // to avoid errors when using the connector, we treat this situation as logout.
     const timer = setTimeout(() => {
-      if (!connector) {
+      if (!isConnected) {
         logout();
       }
     }, 1000);
 
     return () => {
       clearTimeout(timer);
     };
-  }, [connector, inline, loginAccount, logout, pathname, walletAddress]);
+  }, [inline, isConnected, loginAccount, logout, pathname, walletAddress]);
 
   useAsyncEffect(async () => {
     // ssr pages loginAccount initial value ''

@@ -174,12 +174,12 @@ export const FAQ = () => {
       <H2 id='#faq' marginBottom={'16px'}>FAQ</H2>
       <QAccordion>
         {data.map((item, index) => (
-          <QAccordionItem key={index}>
-            <QAccordionButton h={56} fontSize={16} fontWeight={600}>
+          <QAccordionItem key={index} px={0} >
+            <QAccordionButton h={56} fontSize={16} fontWeight={600} px={0}>
               {item.question}
               <QAccordionIcon />
             </QAccordionButton>
-            <QAccordionPanel color={'readable.tertiary'} fontSize={14}>
+            <QAccordionPanel px={0} color={'readable.tertiary'} fontSize={14}>
               {item.answer}
             </QAccordionPanel>
           </QAccordionItem>

@@ -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'
               ? {}

@@ -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'

@@ -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={<Square size={300} color="white"></Square>}
         sx={{
           [smMedia]: {
             w: '100%',

@@ -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 (
     <LandingResponsiveContainer>
       <Flex
@@ -63,14 +67,29 @@ export const HelpDevelopers = () => {
           {datas &&
             datas.map((item, index) => (
               <GAClick name={item.gaClickName} key={index}>
-                <Box as="a" href={item.link} key={index} target="_blank">
-                  <Image alt={`${item.intro} icon`} src={item.img}></Image>
+                <Box
+                  as="a"
+                  href={item.link}
+                  key={index}
+                  target="_blank"
+                  overflow={'hidden'}
+                  borderRadius={4}
+                  _hover={{
+                    boxShadow: isMobile ? 'none' : '0px 4px 24px 0px rgba(0, 0, 0, 0.08)',
+                  }}
+                >
+                  <Image
+                    alt={`${item.intro} icon`}
+                    src={isMobile ? item.imgSm : item.img}
+                    fallbackStrategy="beforeLoadOrError"
+                    fallback={<Square size={191} color="white"></Square>}
+                  ></Image>
                   <Text
                     as="h3"
-                    py={24}
+                    py={18}
                     fontFamily={INTER_FONT}
                     textAlign={'center'}
-                    fontSize={24}
+                    fontSize={18}
                     fontWeight={600}
                     sx={{
                       [smMedia]: {

@@ -32,17 +32,12 @@ export const KeyFeaturesPC = memo(() => {
     <LandingResponsiveContainer>
       <Flex flexDirection={'column'} alignItems={'center'} my={80}>
         <LandingH2 marginBottom={40}>Key Features</LandingH2>
-        <Tabs
-          variant="squared"
-          alignItems={'center'}
-          justifyContent={'center'}
-          isLazy={false}
-        >
-          <TabList flexWrap={'wrap'} justifyContent={'center'}>
+        <Tabs variant="squared" alignItems={'center'} justifyContent={'center'} isLazy={false}>
+          <TabList flexWrap={'wrap'} justifyContent={'center'} marginBottom={33}>
             {keyFeatureList &&
               keyFeatureList.map((item, index) => (
                 <GAClick key={index} name={item.gaClickName}>
-                  <Tab key={index} {...styles} position={'relative'} marginBottom={33}>
+                  <Tab key={index} {...styles} position={'relative'}>
                     <Text fontFamily={INTER_FONT}>{item.label}</Text>
                     {item.tag && (
                       <Text

@@ -25,7 +25,7 @@ export default function Document() {
             __html: `window.__ASSET_PREFIX = ${JSON.stringify(assetPrefix)}`,
           }}
         ></script>
-        <script defer src={`${assetPrefix}/js/iconfont.min.js?v2`}></script>
+        <script defer src={`${assetPrefix}/js/iconfont.min.js?v2.1`}></script>
         <script defer src={`${assetPrefix}/wasm/tinygo_wasm_exec_v1.js`}></script>
         <script defer src={`${assetPrefix}/wasm/tinygo_init_v1.js`}></script>
       </Head>