Merge branch 'sett/hero-v1000' into develop

package.json

@@ -28,6 +28,7 @@
     "@dotlottie/react-player": "^1.6.12",
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
+    "@metamask/providers": "^14.0.2",
     "@next/bundle-analyzer": "^14.0.4",
     "@reduxjs/toolkit": "^2.0.1",
     "@unisat/wallet-utils": "^1.0.0",

src/components/ConnectModal/modal.evm.tsx

@@ -0,0 +1,108 @@
+import React, { useContext } from 'react';
+import BaseModal from '@/components/BaseModal';
+import { CDN_URL_ICONS } from '@/config';
+import { WalletType } from '@/interfaces/wallet';
+import styles from './styles.module.scss';
+import Image from 'next/image';
+import { XVerseContext } from '@/Providers/xverse-context';
+import useConnect from '@/hooks/useConnect';
+import throttle from 'lodash/throttle'
+import { getError } from '@/utils/error';
+import toast from 'react-hot-toast';
+import { useAppDispatch } from '@/stores/hooks';
+import { requestReload } from '@/stores/states/common/reducer';
+import AppLoading from '@/components/AppLoading';
+import cs from 'classnames';
+import { signMessage } from '@/utils/metamask-helper';
+
+interface IProps {
+  isShow: boolean;
+  onHide: () => void;
+}
+
+interface ModalItem {
+  image: string;
+  text: string;
+  rpc: string;
+  chainID: number;
+}
+const ITEMS: ModalItem[] = [
+  {
+    image: 'https://cryptologos.cc/logos/optimism-ethereum-op-logo.svg',
+    text: 'Optimism',
+    rpc: 'https://optimism.llamarpc.com',
+    chainID: 10
+  },
+  {
+    image: 'https://cryptologos.cc/logos/polygon-matic-logo.svg',
+    text: 'Polygon',
+    rpc: 'https://polygon.llamarpc.com',
+    chainID: 137
+  },
+];
+
+export const MESSAGE_EVM = 'Are you a Modular Blockchain OG?'
+
+const ConnectModalEVM = React.memo(({ isShow, onHide }: IProps)=> {
+  const dispatch = useAppDispatch()
+
+  const [loading, setLoading] = React.useState(false)
+
+  const onSignMessage = async (item: ModalItem) => {
+    try {
+      if (loading) return;
+      setLoading(true)
+      const { address, signature } = await signMessage(MESSAGE_EVM);
+      console.log('SANG TEST: ', {
+        address, signature
+      });
+
+      dispatch(requestReload())
+      onHide()
+    } catch (error) {
+      const { message } = getError(error);
+      toast.error(message)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const throttleSignMessage = React.useCallback(throttle(onSignMessage, 300), [loading])
+
+  const renderItem = React.useCallback(
+    (item: ModalItem) => {
+      return (
+        <div
+          className={styles.modalItem}
+          key={item.text}
+          onClick={() => throttleSignMessage(item)}
+        >
+          <Image width={48} height={48} src={item.image} alt="ic_wallet" />
+          <div className={styles.modalItem_content}>
+            <p className={styles.modalItem_title}>
+              {item.text}
+            </p>
+          </div>
+        </div>
+      );
+    },
+    [loading]
+  );
+
+  return (
+    <BaseModal isShow={isShow} onHide={onHide} title="Choose network" size="small">
+      <div className={cs(styles.modalContent, loading && styles.modalContent__loading)}>
+        {ITEMS.map(renderItem)}
+      </div>
+      {
+        loading && (
+          <AppLoading className={styles.loading}/>
+        )
+      }
+    </BaseModal>
+  );
+})
+
+ConnectModalEVM.displayName = 'ConnectModalEVM';
+
+export default ConnectModalEVM;

src/components/ToastOverlay/index.tsx

@@ -33,6 +33,7 @@ const ToastOverlay = () => {
             color: '#FF4747',
             background: '#FFFFFF',
             justifyContent: 'center',
+            minWidth: '500px'
           },
         },
         style: {

src/constants/constants.ts

@@ -1,7 +1,11 @@
 const MIN_DECIMAL = 2;
 const MAX_DECIMAL = 6;
+const NATIVE_ETH_ADDRESS = '0x0000000000000000000000000000000000000000';
+const METAMASK_DOWNLOAD_PAGE = 'https://metamask.io/download/';
 
 export {
   MIN_DECIMAL,
-  MAX_DECIMAL
+  MAX_DECIMAL,
+  NATIVE_ETH_ADDRESS,
+  METAMASK_DOWNLOAD_PAGE
 };

src/enums/wallet-error.ts

@@ -0,0 +1,18 @@
+export enum WalletError {
+  UNSUPPORTED_CHAIN = 'UNSUPPORTED_CHAIN',
+  FAILED_SWITCH_CHAIN = 'FAILED_SWITCH_CHAIN',
+  FAILED_ADD_CHAIN = 'FAILED_ADD_CHAIN',
+  FAILED_CONNECT = 'FAILED_CONNECT',
+  NO_INSTANCE = 'NO_INSTANCE',
+  FAILED_LINK_WALLET = 'FAILED_LINK_WALLET',
+  FAILED_UNLINK_WALLET = 'FAILED_UNLINK_WALLET',
+  FAILED_SIGN_MESSAGE = 'FAILED_SIGN_MESSAGE',
+  NO_METAMASK = 'NO_METAMASK',
+  FAILED_TRANSFER = 'FAILED_TRANSFER',
+  FAILED_GET_TX = 'FAILED_GET_TX',
+}
+
+export enum WalletErrorCode {
+  USER_REJECTED = 4001,
+  NO_CHAIN = 4902,
+}

src/interactive/Fade/index.tsx

@@ -13,6 +13,7 @@ export default function Fade({ children, delay, from, to }: IProps) {
   const refContent = useRef<HTMLDivElement>(null);
 
   const initAnimation = useCallback((): void => {
+    console.log('____Dsds', {...{ opacity: 0 },...from})
     refContent.current && gsap.set(refContent.current, {...{ opacity: 0 },...from});
   }, []);
 

src/interfaces/global.d.ts

@@ -9,5 +9,6 @@ interface IUniSat {
 declare global {
   interface Window {
     unisat: IUniSat;
+    ethereum: any;
   }
 }

src/interfaces/wallet.ts

@@ -12,3 +12,16 @@ export interface IConnectedInfo {
   address: string[];
   publicKey: string[];
 }
+
+export type WalletOperationReturn<T> = {
+  isSuccess: boolean;
+  isError: boolean;
+  message: string;
+  data?: T;
+};
+
+export interface ProviderRpcError extends Error {
+  message: string;
+  code: number;
+  data?: unknown;
+}

src/modules/Whitelist/index.tsx

@@ -1,16 +1,22 @@
-import { Flex } from '@chakra-ui/react';
+import { Box, Flex } from '@chakra-ui/react';
 import React from 'react';
 import LeaderBoard from './leaderBoard';
 import s from './styles.module.scss';
 import useElementHeight from '@/hooks/useElementHeight';
 import { HEADER_ID } from '@/layouts/Header';
 import Steps from '@/modules/Whitelist/steps';
 import BoxContent from '@/layouts/BoxContent';
+import { useAppSelector } from '@/stores/hooks';
+import { leaderBoardSelector } from '@/stores/states/user/selector';
+import Loading from '@/components/Loading';
+import { formatCurrency } from '@/utils/format';
+import AppLoading from '@/components/AppLoading';
 
 const CONTAINER_ID = 'WHITE_LIST_CONTAINER_ID';
 
 const Whitelist = () => {
   const { height } = useElementHeight({ elementID: HEADER_ID });
+  const { count } = useAppSelector(leaderBoardSelector);
 
   React.useEffect(() => {
     const element = document.getElementById(CONTAINER_ID)
@@ -21,7 +27,9 @@ const Whitelist = () => {
 
   return (
     <BoxContent className={s.container} id={CONTAINER_ID}>
-      <p className={s.title}>BVM PUBLIC SALE LEADERBOARD</p>
+      {!!count ? (<p className={s.title}>Join <span>{!count ? <Loading/> : formatCurrency(count)}</span> people on the public sale allowlist.</p>) : <AppLoading/>}
+      <Box mt="16px"/>
+      <p className={s.title}>Tweet & invite friends to rank up.</p>
       <div className={s.tokenSection}>
         <LeaderBoard />
         <Steps />