Nig 682

src/constants.ts

@@ -1,12 +1,6 @@
 export const XFANS_TWITTER_HOMEPAGE = 'https://twitter.com/BuidlerDAO';
 export const XFANS_TWITTES =
   'https://twitter.com/BuidlerDAO/status/1744712912537788860?xfans_check_retweet=1';
-export const LOCALSTORAGE_TRUE = 'true';
-export const LOCALSTORAGE_FALSE = 'false';
-export const XFANS_TWITTER_GO_FOLLOW = 'xfans-go-follow';
-export const XFANS_TWITTER_GO_FOLLOW_VERIFY = 'xfans-go-follow-verify';
-export const XFANS_TWITTER_GO_RETWEETS = 'xfans-go-retweets';
-export const XFANS_TWITTER_GO_RETWEETS_VERIFY = 'xfans-go-retweets-verify';
 export const XFANS_CHECK_RETWEET = 'xfans_check_retweet';
 export const XFANS_DONE = 'Done';
 export const XFANS_VERIFY = 'Verify';

src/content/drawer/index.tsx

@@ -5,7 +5,6 @@ import Divider from '@mui/material/Divider';
 import Drawer from '@mui/material/Drawer';
 import IconButton from '@mui/material/IconButton';
 import { styled } from '@mui/material/styles';
-
 import * as toaster from '../../components/Toaster';
 import {
   XFANS_CONTENT_WIDTH,
@@ -28,22 +27,17 @@ import LogoButton from './logoButton';
 
 import '../../tailwind.css';
 
-const drawerWidth = Math.max(
-  (window.innerWidth - XFANS_TWITTER_CONTENT_WIDTH) / 2 + XFANS_TWITTER_OFFSET,
-  XFANS_MIN_WIDTH
-);
-const backWidth = drawerWidth - XFANS_CONTENT_WIDTH;
-
 const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })<{
   open?: boolean;
-}>(({ theme, open }) => ({
+  drawerWidth?: number; // 添加 width 参数
+}>(({ theme, open, drawerWidth }) => ({
   // flexGrow: 1,
   // padding: theme.spacing(3),
   transition: theme.transitions.create('margin', {
     easing: theme.transitions.easing.sharp,
     duration: theme.transitions.duration.leavingScreen,
   }),
-  marginRight: -drawerWidth,
+  marginRight: -(drawerWidth || 0),
   ...(open && {
     transition: theme.transitions.create('margin', {
       easing: theme.transitions.easing.easeOut,
@@ -77,6 +71,37 @@ export default function PersistentDrawerRight() {
     });
   };
 
+  const caculateDrawerWidth = () => {
+    return Math.max(
+      (window.innerWidth - XFANS_TWITTER_CONTENT_WIDTH) / 2 + XFANS_TWITTER_OFFSET,
+      XFANS_MIN_WIDTH
+    );
+  };
+
+  const caculateBackWidth = () => {
+    return caculateDrawerWidth() - XFANS_CONTENT_WIDTH;
+  };
+
+  const [drawerWidth, setDrawerWidth] = React.useState(caculateDrawerWidth());
+
+  const [backWidth, setBackWidth] = React.useState(caculateBackWidth());
+
+  React.useEffect(() => {
+    function handleResize() {
+      // 当窗口大小变化时，更新 width 的值
+      setBackWidth(caculateBackWidth());
+      setDrawerWidth(caculateDrawerWidth());
+    }
+
+    // 添加窗口大小变化时的事件监听器
+    window.addEventListener('resize', handleResize);
+
+    // 在组件卸载时移除事件监听器
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
   React.useEffect(() => {
     // 再获取url中的token 作为第一优先级
     const urlParams = new URLSearchParams(window.location.search);
@@ -172,7 +197,7 @@ export default function PersistentDrawerRight() {
         {/* <MenuIcon className="rounded-full m-0 w-[24px] h-[24px] cursor-pointer" /> */}
         <LogoButton />
       </IconButton>
-      <Main open={isShowDrawer}></Main>
+      <Main open={isShowDrawer} drawerWidth={drawerWidth}></Main>
       <Drawer
         sx={{
           width: drawerWidth,
@@ -199,7 +224,17 @@ export default function PersistentDrawerRight() {
           </div>
           <Divider orientation="vertical" flexItem />
           {page === PageType.Login && (
-            <SignInWithXPage showLoading={loginLoading} handleButtonClick={() => clickLogin()} />
+            <SignInWithXPage
+              showLoading={loginLoading}
+              handleButtonClick={() => {
+                // reset follow status
+                useGlobalStore.setState({
+                  isGoFollow: false,
+                  isGoFollowVerify: false,
+                });
+                clickLogin();
+              }}
+            />
           )}
           {page === PageType.Invite && (
             <InvitePage handleButtonClick={(inviteCode) => clickRegisterInviteCode(inviteCode)} />

src/content/loginPage/congratulationPage.tsx

@@ -3,53 +3,32 @@ import React, { FC, useEffect } from 'react';
 import { NextButton, VerifyButton } from '../../components/buttons/loginButton';
 import * as toaster from '../../components/Toaster';
 import {
-  LOCALSTORAGE_FALSE,
-  LOCALSTORAGE_TRUE,
   XFANS_CHECK_RETWEET,
   XFANS_DONE,
   XFANS_GO,
-  XFANS_TWITTER_GO_FOLLOW,
-  XFANS_TWITTER_GO_FOLLOW_VERIFY,
-  XFANS_TWITTER_GO_RETWEETS,
-  XFANS_TWITTER_GO_RETWEETS_VERIFY,
   XFANS_TWITTER_HOMEPAGE,
   XFANS_TWITTES,
   XFANS_VERIFY,
 } from '../../constants';
 import http, { ResultData } from '../../service/request';
+import useGlobalStore from '../../store/useGlobalStore';
 
 import '../../tailwind.css';
 interface CongratulationPageProps {
   goProfile: () => void; // 定义一个函数类型的属性
 }
 
 const CongratulationPage: FC<CongratulationPageProps> = ({ goProfile }) => {
-  const [goFollow, setGoFollow] = React.useState(
-    localStorage.getItem(XFANS_TWITTER_GO_FOLLOW) ?? LOCALSTORAGE_FALSE
-  );
-  const [goFollowVerify, setGoFollowVerify] = React.useState(
-    localStorage.getItem(XFANS_TWITTER_GO_FOLLOW_VERIFY ?? LOCALSTORAGE_FALSE)
-  );
-
-  const [goRetwittes, setGoRetwittes] = React.useState(
-    localStorage.getItem(XFANS_TWITTER_GO_RETWEETS) ?? LOCALSTORAGE_FALSE
-  );
-  const [goRetwittesVerify, setGoRetwittesVerify] = React.useState(
-    localStorage.getItem(XFANS_TWITTER_GO_RETWEETS_VERIFY ?? LOCALSTORAGE_FALSE)
+  const { isGoFollow, isGoFollowVerify, isGoRetwittes, isGoRetwittesVerify } = useGlobalStore(
+    (state) => ({
+      ...state,
+    })
   );
 
   const followStatus =
-    goFollow === LOCALSTORAGE_TRUE
-      ? goFollowVerify === LOCALSTORAGE_TRUE
-        ? XFANS_DONE
-        : XFANS_VERIFY
-      : XFANS_GO;
+    isGoFollow === true ? (isGoFollowVerify === true ? XFANS_DONE : XFANS_VERIFY) : XFANS_GO;
   const retweetStatus =
-    goRetwittes === LOCALSTORAGE_TRUE
-      ? goRetwittesVerify === LOCALSTORAGE_TRUE
-        ? XFANS_DONE
-        : XFANS_VERIFY
-      : XFANS_GO;
+    isGoRetwittes === true ? (isGoRetwittesVerify === true ? XFANS_DONE : XFANS_VERIFY) : XFANS_GO;
   const startStatus = followStatus === XFANS_DONE && retweetStatus === XFANS_DONE;
 
   // 打开一个新的标签页并访问指定网页
@@ -58,16 +37,6 @@ const CongratulationPage: FC<CongratulationPageProps> = ({ goProfile }) => {
     newTab?.focus();
   };
 
-  const _setGoRetwittesVerify = (r: string) => {
-    setGoRetwittesVerify(r);
-    localStorage.setItem(XFANS_TWITTER_GO_RETWEETS_VERIFY, r);
-  };
-
-  const _setGoRetwittes = (r: string) => {
-    setGoRetwittes(r);
-    localStorage.setItem(XFANS_TWITTER_GO_RETWEETS, r);
-  };
-
   // 再获取url中的token 作为第一优先级
   const urlParams = new URLSearchParams(window.location.search);
   const xfansCheckRetweet = urlParams.get(XFANS_CHECK_RETWEET);
@@ -76,22 +45,36 @@ const CongratulationPage: FC<CongratulationPageProps> = ({ goProfile }) => {
     try {
       const activateData = (await http.post2(`api/user/activate/check-task`, false)) as ResultData;
       if (activateData.code === 0 && activateData.data.finished === true) {
-        _setGoRetwittesVerify(LOCALSTORAGE_TRUE);
+        useGlobalStore.setState({
+          isGoRetwittesVerify: true,
+        });
       } else {
         if (!xfansCheckRetweet) {
-          _setGoRetwittes(LOCALSTORAGE_FALSE);
+          useGlobalStore.setState({
+            isGoRetwittes: false,
+          });
         } else {
-          _setGoRetwittes(LOCALSTORAGE_TRUE);
+          useGlobalStore.setState({
+            isGoRetwittes: true,
+          });
         }
-        _setGoRetwittesVerify(LOCALSTORAGE_FALSE);
+        useGlobalStore.setState({
+          isGoRetwittesVerify: false,
+        });
       }
     } catch (error) {
       if (!xfansCheckRetweet) {
-        _setGoRetwittes(LOCALSTORAGE_FALSE);
+        useGlobalStore.setState({
+          isGoRetwittes: false,
+        });
       } else {
-        _setGoRetwittes(LOCALSTORAGE_TRUE);
+        useGlobalStore.setState({
+          isGoRetwittes: true,
+        });
       }
-      _setGoRetwittesVerify(LOCALSTORAGE_FALSE);
+      useGlobalStore.setState({
+        isGoRetwittesVerify: false,
+      });
     }
   };
 
@@ -135,14 +118,16 @@ const CongratulationPage: FC<CongratulationPageProps> = ({ goProfile }) => {
             switch (followStatus) {
               case XFANS_GO:
                 openNewTab(XFANS_TWITTER_HOMEPAGE);
-                setGoFollow(LOCALSTORAGE_TRUE);
-                localStorage.setItem(XFANS_TWITTER_GO_FOLLOW, LOCALSTORAGE_TRUE);
+                useGlobalStore.setState({
+                  isGoFollow: true,
+                });
                 break;
 
               case XFANS_VERIFY:
                 setTimeout(() => {
-                  setGoFollowVerify(LOCALSTORAGE_TRUE);
-                  localStorage.setItem(XFANS_TWITTER_GO_FOLLOW_VERIFY, LOCALSTORAGE_TRUE);
+                  useGlobalStore.setState({
+                    isGoFollowVerify: true,
+                  });
                 }, 1000);
                 break;
 
@@ -178,7 +163,9 @@ const CongratulationPage: FC<CongratulationPageProps> = ({ goProfile }) => {
           onClick={() => {
             switch (retweetStatus) {
               case XFANS_GO:
-                _setGoRetwittes(LOCALSTORAGE_TRUE);
+                useGlobalStore.setState({
+                  isGoRetwittes: true,
+                });
                 openNewTab(XFANS_TWITTES);
                 break;
 

src/store/useGlobalStore.ts

@@ -17,6 +17,10 @@ export interface GlobalStoreProps {
   token: string;
   isShowPrice: boolean;
   isShowDrawer: boolean;
+  isGoFollow: boolean;
+  isGoFollowVerify: boolean;
+  isGoRetwittes: boolean;
+  isGoRetwittesVerify: boolean;
   userInfo: UserInfo | null;
   goPage(page: PageType): void;
   logout(): void;
@@ -30,6 +34,10 @@ const useGlobalStore = create<GlobalStoreProps>()(
       isShowPrice: false,
       isShowDrawer: false,
       userInfo: null,
+      isGoFollow: false,
+      isGoFollowVerify: false,
+      isGoRetwittes: false,
+      isGoRetwittesVerify: false,
       goPage(page: PageType) {
         set({ page });
       },

src/welcome/Profile/Reward.tsx

@@ -188,9 +188,7 @@ const Reward = () => {
             ) : tweetList == null || tweetList.length === 0 ? (
               <div className="flex flex-col items-center">
                 <ListEmpty className="mt-[50px]" />
-                <p className="xfans-font-sf mt-[10px] text-[#00000080]">
-                  You haven&apos;t bought any shares yet.
-                </p>
+                <p className="xfans-font-sf mt-[10px] text-[#00000080]">No records found.</p>
               </div>
             ) : (
               <ul className="border-t border-t-[#EBEEF0] py-[22px]">
@@ -255,9 +253,7 @@ const Reward = () => {
             ) : tweetYourRank == null || tweetYourRank.length === 0 ? (
               <div className="flex flex-col items-center">
                 <ListEmpty className="mt-[50px]" />
-                <p className="xfans-font-sf mt-[10px] text-[#00000080]">
-                  No records found. Vote to join weekly rankings.
-                </p>
+                <p className="xfans-font-sf mt-[10px] text-[#00000080]">No records found.</p>
               </div>
             ) : (
               <ul className="border-t border-t-[#EBEEF0] py-[22px]">

src/welcome/Wallet/InviteFriends.tsx

@@ -8,6 +8,7 @@ import TableContainer from '@mui/material/TableContainer';
 import TableHead from '@mui/material/TableHead';
 import TableRow from '@mui/material/TableRow';
 import { useToggle } from 'ahooks';
+import dayjs from 'dayjs';
 
 import { BasicButton } from '../../components/Button';
 import TableEmptyWidget from '../../components/Empty';
@@ -136,7 +137,7 @@ const InviteFriends = () => {
                   {inviteInfo.items.map((row, i) => (
                     <TableRow key={i} sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
                       <TableCell component="th" scope="row">
-                        {row.invitedAt}
+                        {dayjs(row.invitedAt).format('YYYY/MM/DD HH:mm')}
                       </TableCell>
                       <TableCell>{row.invitedUsername}</TableCell>
                       <TableCell>{row.points}</TableCell>