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

apps/dcellar-web-ui/package.json

@@ -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/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/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="fit-content" paddingX={60} alignItems="center" justifyContent="center">
+              <WalletKitEmbeddedModal />
+            </Flex>
+          )}
+        </Flex>
+        <Footer borderTop="1px solid readable.border" />
+      </Box>
+    </>
+  );
+};

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

@@ -0,0 +1,18 @@
+import { LandingPage } from '@/components/layout/LandingPage';
+import { ConnectWallet } from '@/modules/connect-wallet';
+import { wrapper } from '@/store';
+import { ReactElement } from 'react';
+
+export default function ConnectWalletPage() {
+  return <ConnectWallet />;
+}
+
+ConnectWalletPage.getInitialProps = wrapper.getInitialAppProps(() => async () => {
+  return {
+    pageProps: {},
+  };
+});
+
+ConnectWalletPage.getLayout = (page: ReactElement) => {
+  return <>{page}</>;
+};