feat(dcellar-web-ui): add connect-wallet page (#374)

* feat(dcellar-web-ui): add connect-wallet page

* fix(dcellar-web-ui): resolve issue with connect-wallet page not triggering login

* fix(dcellar-web-ui): resolve issue with connect-wallet page login jump error

* feat(dcellar-web-ui): add tutorial card and update logo

* fix(dcellar-web-ui): opt connect wallet width

* feat(dcellar-web-ui): change border color for tutorial card

* docs(dcellar-web-ui): update changelog

apps/dcellar-web-ui/CHANGELOG.json

@@ -1,6 +1,18 @@
 {
   "name": "dcellar-web-ui",
   "entries": [
+    {
+      "version": "0.6.0",
+      "tag": "dcellar-web-ui_v0.6.0",
+      "date": "Wed, 17 Apr 2024 03:19:45 GMT",
+      "comments": {
+        "minor": [
+          {
+            "comment": "Add connect-wallet page & tutorial card"
+          }
+        ]
+      }
+    },
     {
       "version": "0.5.0",
       "tag": "dcellar-web-ui_v0.5.0",

apps/dcellar-web-ui/CHANGELOG.md

@@ -1,6 +1,13 @@
 # Change Log - dcellar-web-ui
 
-This log was last generated on Thu, 11 Apr 2024 02:29:47 GMT and should not be manually modified.
+This log was last generated on Wed, 17 Apr 2024 03:19:45 GMT and should not be manually modified.
+
+## 0.6.0
+Wed, 17 Apr 2024 03:19:45 GMT
+
+### Minor changes
+
+- Add connect-wallet page & tutorial card
 
 ## 0.5.0
 Thu, 11 Apr 2024 02:29:47 GMT

apps/dcellar-web-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dcellar-web-ui",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "private": false,
   "scripts": {
     "dev": "node ./scripts/dev.js -p 3200",
@@ -25,7 +25,7 @@
     "@next/bundle-analyzer": "^13.1.6",
     "@node-real/icons": "~2.20.3",
     "@node-real/uikit": "~2.54.8",
-    "@node-real/walletkit": "1.0.10-alpha.1",
+    "@node-real/walletkit": "1.0.12-alpha.1",
     "axios": "^1.3.2",
     "axios-retry": "^3.4.0",
     "bignumber.js": "^9.1.1",

apps/dcellar-web-ui/src/components/ConnectWallet/index.tsx

@@ -6,7 +6,7 @@ import { ssrLandingRoutes } from '@/pages/_app';
 import { useAppDispatch } from '@/store';
 import { checkOffChainDataAvailable, setLoginAccount } from '@/store/slices/persist';
 import { Text } from '@node-real/uikit';
-import { useModal } from '@node-real/walletkit';
+import { WalletKitEmbeddedModal, useModal } from '@node-real/walletkit';
 import { useAsyncEffect } from 'ahooks';
 import { useRouter } from 'next/router';
 import { ReactElement, memo, useState } from 'react';
@@ -15,13 +15,14 @@ import { useAccount, useDisconnect } from 'wagmi';
 interface ConnectWalletProps extends DCButtonProps {
   icon?: ReactElement;
   text?: string;
+  displayType?: 'button' | 'embeddedModal';
 }
 
 // for multi connect button in one page
 let eventTriggerTime = Date.now();
 
 export const ConnectWallet = memo<Partial<ConnectWalletProps>>(function ConnectButton(props) {
-  const { icon, text, ...restProps } = props;
+  const { icon, text, displayType = 'button', ...restProps } = props;
   const router = useRouter();
   const dispatch = useAppDispatch();
   const { onOpen, onClose } = useModal();
@@ -39,7 +40,6 @@ export const ConnectWallet = memo<Partial<ConnectWalletProps>>(function ConnectB
   };
 
   // connector may be undefined when wallet throw '(index):7 Error in event handler: Error: write after end';
-
   const openModal = () => {
     eventTriggerTime = Date.now();
     setTrustEvent(eventTriggerTime);
@@ -56,7 +56,14 @@ export const ConnectWallet = memo<Partial<ConnectWalletProps>>(function ConnectB
   };
 
   useAsyncEffect(async () => {
-    if (trustEvent !== eventTriggerTime || isAuthPending || !address || !isConnected) return;
+    if (
+      (displayType === 'button' && trustEvent !== eventTriggerTime) ||
+      isAuthPending ||
+      !address ||
+      !isConnected
+    ) {
+      return;
+    }
 
     const isAvailable = await dispatch(checkOffChainDataAvailable(address));
 
@@ -83,26 +90,32 @@ export const ConnectWallet = memo<Partial<ConnectWalletProps>>(function ConnectB
   }, [address, trustEvent, isAuthPending, router]);
 
   return (
-    <DCButton
-      px={48}
-      h={54}
-      fontSize={18}
-      lineHeight="22px"
-      fontWeight={600}
-      {...restProps}
-      onClick={onGetStart}
-      borderRadius={4}
-      sx={{
-        [smMedia]: {
-          h: 33,
-          fontWeight: 500,
-          fontSize: 14,
-          paddingX: 16,
-        },
-      }}
-    >
-      {icon ? icon : ''}
-      <Text marginLeft={icon ? '4px' : ''}>{text ? text : 'Connect Wallet'}</Text>
-    </DCButton>
+    <>
+      {displayType === 'embeddedModal' ? (
+        <WalletKitEmbeddedModal />
+      ) : (
+        <DCButton
+          px={48}
+          h={54}
+          fontSize={18}
+          lineHeight="22px"
+          fontWeight={600}
+          {...restProps}
+          onClick={onGetStart}
+          borderRadius={4}
+          sx={{
+            [smMedia]: {
+              h: 33,
+              fontWeight: 500,
+              fontSize: 14,
+              paddingX: 16,
+            },
+          }}
+        >
+          {icon ? icon : ''}
+          <Text marginLeft={icon ? '4px' : ''}>{text ? text : 'Connect Wallet'}</Text>
+        </DCButton>
+      )}
+    </>
   );
 });

apps/dcellar-web-ui/src/components/layout/Header/index.tsx

@@ -19,7 +19,7 @@ export const Header = memo<HeaderProps>(function Header({ taskManagement = true
       <HeaderContainer>
         <LogoContainer>
           <Link href="/" target="_blank" data-track-id="dc.main.nav.logo.click">
-            <IconFont type="logo" w={122} h={24} />
+            <IconFont type="logo-new" w={184} h={32} />
           </Link>
           {runtimeEnv === 'testnet' && <Badge>{networkTag(runtimeEnv)}</Badge>}
         </LogoContainer>

apps/dcellar-web-ui/src/components/layout/Logo/index.tsx

@@ -14,7 +14,7 @@ interface ILogo extends BoxProps {
 export const Logo: React.FC<ILogo> = (props) => {
   const { href, target = '', title = '', ...restProps } = props;
   const { basePath } = useRouter();
-  const logo = <IconFont w={132} h={26} type={'logo'} />;
+  const logo = <IconFont w={184} h={32} type={'logo-new'} />;
 
   return (
     <Box {...restProps}>

apps/dcellar-web-ui/src/context/GlobalContext/PageProtect.tsx

@@ -9,7 +9,7 @@ import { isRightChain } from '@/modules/wallet/utils/isRightChain';
 
 // protect: GNFD chain, GNFD & BSC chain and no protect.
 const protectGNFDPaths = ['/buckets', '/buckets/[...path]', '/groups', '/accounts'];
-const noProtectPaths = ['/', '/terms', '/pricing-calculator', '/tool-box'];
+const noProtectPaths = ['/', '/terms', '/pricing-calculator', '/connect-wallet'];
 
 // TODO unify the wallet page protect
 export const PageProtect: React.FC<any> = ({ children }) => {

apps/dcellar-web-ui/src/context/LoginContext/useLoginGuard.ts

@@ -1,13 +1,14 @@
 import { InternalRoutePaths } from '@/constants/paths';
 import { ssrLandingRoutes } from '@/pages/_app';
+import { useAppSelector } from '@/store';
 import { useMount } from 'ahooks';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 import { useAccount } from 'wagmi';
 
 export function useLoginGuard(inline: boolean) {
   const { address } = useAccount();
-
+  const { loginAccount } = useAppSelector((root) => root.persist);
   const router = useRouter();
   const { pathname, asPath } = router;
 
@@ -19,7 +20,7 @@ export function useLoginGuard(inline: boolean) {
   });
 
   useEffect(() => {
-    if (!address) {
+    if (!address || !loginAccount) {
       if (inline) {
         setPass(true);
       } else if (pathname.length > 0 && pathname !== '/') {
@@ -36,13 +37,13 @@ export function useLoginGuard(inline: boolean) {
       if (router?.query?.originAsPath && router?.query.originAsPath.length > 0) {
         const originPathname = decodeURIComponent(router.query.originAsPath as string);
         router.replace(originPathname, undefined, { shallow: true });
-      } else if (pathname && pathname === '/') {
+      } else if (pathname && (pathname === '/' || pathname === '/connect-wallet')) {
         router.replace(InternalRoutePaths.dashboard, undefined, { shallow: true });
       } else {
         setPass(true);
       }
     }
-  }, [address, asPath, pathname, router, inline]);
+  }, [address, asPath, pathname, router, inline, loginAccount]);
 
   return {
     pass: (!mounted && inline) || pass,

apps/dcellar-web-ui/src/context/WalletConnectContext/components/WalletConnectProvider.tsx

@@ -3,14 +3,15 @@ import { customTheme } from '@/base/theme/wallet';
 import { DCLink } from '@/components/common/DCLink';
 import { bscChain, greenFieldChain } from '@/context/WalletConnectContext/chains';
 import { reportEvent } from '@/utils/gtag';
-import { Text } from '@node-real/uikit';
+import { Text, useMediaQuery } from '@node-real/uikit';
 import { WalletKitOptions, WalletKitProvider, getDefaultConfig } from '@node-real/walletkit';
 import '@node-real/walletkit/styles.css';
 import { metaMask, trustWallet, walletConnect } from '@node-real/walletkit/wallets';
 import * as Sentry from '@sentry/nextjs';
 import * as process from 'process';
 import { ReactNode } from 'react';
 import { WagmiConfig, createConfig } from 'wagmi';
+import { useRouter } from 'next/router';
 
 const config = createConfig(
   getDefaultConfig({
@@ -62,11 +63,14 @@ export interface WalletConnectProviderProps {
 
 export function WalletConnectProvider(props: WalletConnectProviderProps) {
   const { children } = props;
+  const router = useRouter();
+  const [isMobile] = useMediaQuery('(max-width: 767px)');
+  const isInnerModal = router.pathname === '/connect-wallet' && !isMobile;
 
   return (
     <WagmiConfig config={config}>
       <WalletKitProvider
-        options={options}
+        options={{ ...options, hideInnerModal: isInnerModal }}
         mode={'light'}
         customTheme={customTheme}
         debugMode={process.env.NODE_ENV === 'development'}

apps/dcellar-web-ui/src/modules/connect-wallet/index.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { GAClick } from '@/components/common/GATracker';
+import { Box, Flex, Text, useMediaQuery } from '@node-real/uikit';
+import { WalletKitEmbeddedModal } from '@node-real/walletkit';
+import { assetPrefix } from '@/base/env';
+import { Footer } from '@/components/layout/Footer';
+import { Logo } from '@/components/layout/Logo';
+import { ConnectWallet as ConnectWalletButton } from '@/components/ConnectWallet';
+import { IconFont } from '@/components/IconFont';
+
+const leftBg = `url(${assetPrefix}/images/connect-wallet/icon-cw-left.svg) no-repeat left 0 bottom 0`;
+const rightBg = `url(${assetPrefix}/images/connect-wallet/icon-cw-right.svg) no-repeat right 0 top 10%`;
+const bottomBg = `url(${assetPrefix}/images/connect-wallet/icon-cw-bottom.svg) no-repeat right 0% bottom 0%`;
+
+export const ConnectWallet = () => {
+  const [isMobile] = useMediaQuery('(max-width: 767px)');
+  const bg = isMobile ? `${leftBg}, ${rightBg}` : `${leftBg}, ${rightBg}, ${bottomBg}`;
+  const bodyHeight = isMobile ? 'calc(100vh - 67px)' : 'calc(100vh - 50px)';
+
+  return (
+    <>
+      <Box h="100vh" w="100vw">
+        <Flex
+          h={64}
+          alignItems="center"
+          paddingLeft={isMobile ? '20px' : '40px'}
+          position="fixed"
+          top={0}
+          left={0}
+        >
+          <GAClick name="dc.connect_wallet.nav.logo.click">
+            <Logo href="/" />
+          </GAClick>
+        </Flex>
+        <Flex height={bodyHeight}>
+          <Box
+            flexGrow={1}
+            alignItems="center"
+            justifyContent="center"
+            background={bg}
+            backgroundSize={isMobile ? '50% auto, auto' : 'auto, auto'}
+            backgroundColor="#f9f9f9"
+          >
+            <Flex h="100%" alignItems="center" justifyContent="center" paddingX={20}>
+              <Flex flexDirection="column" maxW={509} gap={24} overflow="hidden">
+                <Text as="h1" fontSize={40} fontWeight={700}>
+                  BNB Greenfield Storage Console
+                </Text>
+                <Text as="h2" fontSize={16} color="readable.secondary">
+                  Empower developers to quickly get started with BNB Greenfield decentralized
+                  storage and assist in the development process.
+                </Text>
+                {isMobile && (
+                  <ConnectWalletButton
+                    text="Connect Wallet"
+                    w="fit-content"
+                    margin="80px auto 0"
+                    h={54}
+                    padding="8px 16px"
+                    fontWeight={600}
+                    icon={<IconFont w={24} type="wallet" />}
+                  />
+                )}
+              </Flex>
+            </Flex>
+          </Box>
+          {!isMobile && (
+            <Flex width="40%" minW={552} paddingX={60} alignItems="center" justifyContent="center">
+              <ConnectWalletButton displayType="embeddedModal" />
+            </Flex>
+          )}
+        </Flex>
+        <Footer borderTop="1px solid readable.border" />
+      </Box>
+    </>
+  );
+};