feat(dcellar-web-ui): add pricing calculator page

apps/dcellar-web-ui/src/base/env.ts

@@ -15,7 +15,7 @@ const {
   NEXT_PUBLIC_BSC_EXPLORER_URL,
 } = publicRuntimeConfig || {};
 
-export type TRuntimeEnv = 'prod' | 'qa' | 'development';
+export type TRuntimeEnv = 'development' | 'qa' | 'testnet' | 'mainnet';
 
 export const NODE_ENV = process.env.NODE_ENV;
 export const runtimeEnv: TRuntimeEnv = NEXT_PUBLIC_ENV || 'qa';

apps/dcellar-web-ui/src/base/theme/dark.ts

@@ -56,5 +56,5 @@ export const dark = {
     shadows: {
       normal: '0px 2px 8px rgba(11, 14, 17, 1)',
     },
-  },
+  }
 };

apps/dcellar-web-ui/src/base/theme/index.ts

@@ -10,6 +10,10 @@ export const theme = {
       ...light.colors,
     },
   },
+  breakpoints: {
+    md: '768px',
+    lg: '1440px',
+  },
   config: {
     useSystemColorMode: false, // true | false
     initialColorMode: 'light', // light | dark | system

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

@@ -11,12 +11,15 @@ import { useCallback, useEffect, useState } from 'react';
 import { ConnectorNotFoundError } from 'wagmi';
 import { useAppLogin } from '@/modules/welcome/hooks/useAppLogin';
 import { useAppSelector } from '@/store';
+import { useRouter } from 'next/router';
+import { InternalRoutePaths } from '@/constants/paths';
+import { ssrLandingRoutes } from '@/pages/_app';
 
 export interface WalletConnectModalProps extends DCModalProps {}
-
 export function WalletConnectModal(props: WalletConnectModalProps) {
+  const router = useRouter();
   const { isOpen, onClose } = props;
-
+  const [hasTrigger, setHasTrigger] = useState(false);
   const { loginAccount: address } = useAppSelector((root) => root.persist);
   const [currentAddress, setCurrentAddress] = useState<string | undefined>(address);
 
@@ -26,6 +29,17 @@ export function WalletConnectModal(props: WalletConnectModalProps) {
     setCurrentAddress(address);
   }, []);
 
+  useEffect(() => {
+    if (
+      hasTrigger &&
+      !isAuthPending &&
+      !!address &&
+      ssrLandingRoutes.some((item) => item === router.pathname)
+    ) {
+      setTimeout(() => router.push(InternalRoutePaths.buckets), 100);
+    }
+  }, [address, hasTrigger, isAuthPending, isOpen, router]);
+
   const onConnectError = useCallback((err: Error, args: any) => {
     if (err instanceof ConnectorNotFoundError) {
       const { connector } = args;
@@ -52,11 +66,11 @@ export function WalletConnectModal(props: WalletConnectModalProps) {
 
   const isLoading = isWalletConnecting || isAuthPending;
 
-  useEffect(() => {
-    if (isOpen) {
-      disconnect();
-    }
-  }, [disconnect, isOpen]);
+  // useEffect(() => {
+  //   if (isOpen) {
+  //     disconnect();
+  //   }
+  // }, [disconnect, isOpen]);
 
   return (
     <DCModal
@@ -80,7 +94,10 @@ export function WalletConnectModal(props: WalletConnectModalProps) {
                 name={item.name}
                 isActive={isActive}
                 isDisabled={isLoading}
-                onClick={() => onChangeConnector(item)}
+                onClick={() => {
+                  setHasTrigger(true);
+                  !address && onChangeConnector(item);
+                }}
               />
             </GAClick>
           );

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

@@ -3,9 +3,12 @@ import { DCButton, DCButtonProps } from '@/components/common/DCButton';
 import { WalletConnectModal } from '@/components/ConnectWallet/WalletConnectModal';
 import { useDisclosure } from '@totejs/uikit';
 
-export const ConnectWallet = memo<Partial<DCButtonProps>>(function ConnectButton(props) {
+type ConnectWalletProps = DCButtonProps & {
+  text?: string;
+};
+export const ConnectWallet = memo<Partial<ConnectWalletProps>>(function ConnectButton(props) {
   const { isOpen, onClose, onOpen } = useDisclosure();
-
+  const { text, ...restProps } = props;
   return (
     <>
       <WalletConnectModal isOpen={isOpen} onClose={onClose} />
@@ -16,10 +19,10 @@ export const ConnectWallet = memo<Partial<DCButtonProps>>(function ConnectButton
         fontSize={18}
         lineHeight="22px"
         fontWeight={600}
-        {...props}
+        {...restProps}
         onClick={onOpen}
       >
-        Connect Wallet
+        {text ? text : 'Connect Wallet'}
       </DCButton>
     </>
   );

apps/dcellar-web-ui/src/components/common/DCDrawer/index.tsx

@@ -36,7 +36,7 @@ export const DCDrawer = (props: DCDrawerProps) => {
         w={568}
         padding="16px 24px"
         onClose={onBeforeClose}
-        rootProps={{ top: 64.5 }}
+        rootProps={{ top: 65 }}
         {...restProps}
       >
         {showCloseBtn && <QDrawerCloseButton top={16} right={24} color="readable.tertiary" />}