[Issue-261] Auto open T&C popup for the first time when the user visi…

…ts leaderboard screen
Koniverse · Jan 9, 2025 · bfa130b · bfa130b
1 parent e6a82ce
commit bfa130b
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 71 deletions.
diff --git a/packages/extension-koni-ui/src/Popup/Home/LeaderboardTemp/TermAndConditionModal.tsx b/packages/extension-koni-ui/src/Popup/Home/LeaderboardTemp/TermAndConditionModal.tsx
@@ -96,24 +96,14 @@ export const TermAndConditionModal = styled(Component)<Props>(({ theme: { extend
       right: 0
     },
 
-    '&.ant-sw-modal.ant-sw-modal': {
-      justifyContent: 'flex-start',
-      alignItems: 'center',
-
-      '&:before, &:after': {
-        content: '""',
-        display: 'block',
-        flex: 1
-      }
-    },
-
     '.ant-sw-modal-content.ant-sw-modal-content': {
       borderRadius: 0,
       maxWidth: 370,
       maxHeight: 484,
       paddingTop: 24,
       width: '100%',
-      height: 'auto',
+      marginTop: 'auto',
+      marginBottom: 'auto',
       backgroundImage: 'url(/images/mythical/leaderboard-terms-conditions-bg.png)',
       backgroundSize: '100% 100%',
       backgroundRepeat: 'no-repeat',
@@ -173,6 +163,7 @@ export const TermAndConditionModal = styled(Component)<Props>(({ theme: { extend
       lineHeight: '18px',
       letterSpacing: '0.32px',
       marginBottom: 20,
+      flex: 1,
       overflow: 'auto'
     },
 

diff --git a/packages/extension-koni-ui/src/Popup/Home/LeaderboardTemp/index.tsx b/packages/extension-koni-ui/src/Popup/Home/LeaderboardTemp/index.tsx
@@ -4,7 +4,7 @@
 import { CallToAction, InfoIcon, MainScreenHeader, TimeRemaining } from '@subwallet/extension-koni-ui/components/Mythical';
 import { BookaSdk } from '@subwallet/extension-koni-ui/connector/booka/sdk';
 import { LeaderboardGroups, LeaderboardInfo, LeaderboardPerson } from '@subwallet/extension-koni-ui/connector/booka/types';
-import { LINK_NFL_APP_DOWNLOAD } from '@subwallet/extension-koni-ui/constants';
+import { LINK_NFL_APP_DOWNLOAD, TAC_READ_FLAG } from '@subwallet/extension-koni-ui/constants';
 import { HomeContext } from '@subwallet/extension-koni-ui/contexts/screen/HomeContext';
 import { useServerTime, useSetCurrentPage } from '@subwallet/extension-koni-ui/hooks';
 import { GameAccountListArea } from '@subwallet/extension-koni-ui/Popup/Home/LeaderboardTemp/GameAccountListArea';
@@ -17,6 +17,7 @@ import CN from 'classnames';
 import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
+import { useLocalStorage } from 'usehooks-ts';
 
 type Props = ThemeProps;
 
@@ -33,6 +34,62 @@ const Component = ({ className }: Props): React.ReactElement => {
   const [leaderboardInfo, setLeaderboardInfo] = useState<LeaderboardInfo | undefined>(undefined);
   const { activeModal, inactiveModal } = useContext(ModalContext);
   const { serverTime } = useServerTime();
+  const [isTacRead, setIsTacRead] = useLocalStorage(TAC_READ_FLAG, false);
+
+  const openTermAndConditionModal = useCallback(() => {
+    activeModal(TERM_AND_CONDITION_MODAL_ID);
+  }, [activeModal]);
+
+  const closeTermAndConditionModal = useCallback(() => {
+    inactiveModal(TERM_AND_CONDITION_MODAL_ID);
+    setIsTacRead(true);
+  }, [inactiveModal, setIsTacRead]);
+
+  const openAppStoreLink = useCallback(() => {
+    openInNewTab(LINK_NFL_APP_DOWNLOAD)();
+  }, []);
+
+  const shouldShowInfoButton = useMemo(() => {
+    const leaderboard = leaderboardInfo?.metadata as LeaderboardMetadata | undefined;
+
+    return !!(leaderboard && 'title' in leaderboard && 'content' in leaderboard);
+  }, [leaderboardInfo]);
+
+  const timeRemainingDateTime = useMemo(() => {
+    if (!leaderboardInfo?.endTimeTs || !serverTime) {
+      return undefined;
+    }
+
+    const delayStartTime = leaderboardInfo?.endTimeTs;
+    const delayEndTime = delayStartTime + Number(leaderboardInfo.specialTimeDelayDuration) * 86400000;
+
+    const targetTime = serverTime > delayStartTime && serverTime < delayEndTime
+      ? delayEndTime
+      : delayStartTime;
+
+    return getTimeRemaining(serverTime, new Date(targetTime).toString());
+  }, [leaderboardInfo?.endTimeTs, leaderboardInfo?.specialTimeDelayDuration, serverTime]);
+
+  const shouldShowToken = useMemo(() => {
+    if (!leaderboardInfo?.endTimeTs || !serverTime) {
+      return false;
+    }
+
+    const delayStartTime = leaderboardInfo?.endTimeTs;
+    const delayEndTime = delayStartTime + Number(leaderboardInfo.specialTimeDelayDuration) * 86400000;
+
+    return serverTime > delayStartTime && serverTime < delayEndTime;
+  }, [leaderboardInfo?.endTimeTs, leaderboardInfo?.specialTimeDelayDuration, serverTime]);
+
+  const timeRemainingTitle = useMemo(() => {
+    if (!leaderboardInfo?.endTimeTs || !serverTime) {
+      return undefined;
+    }
+
+    return serverTime > leaderboardInfo.endTimeTs
+      ? t('New leaderboard in')
+      : t('Time remaining');
+  }, [leaderboardInfo?.endTimeTs, serverTime, t]);
 
   useEffect(() => {
     const subscriptionLeaderboard = apiSDK.subscribeLeaderboardConfig().subscribe((data) => {
@@ -101,59 +158,19 @@ const Component = ({ className }: Props): React.ReactElement => {
     };
   }, [setContainerClass]);
 
-  const openTermAndConditionModal = useCallback(() => {
-    activeModal(TERM_AND_CONDITION_MODAL_ID);
-  }, [activeModal]);
-
-  const closeTermAndConditionModal = useCallback(() => {
-    inactiveModal(TERM_AND_CONDITION_MODAL_ID);
-  }, [inactiveModal]);
-
-  const openAppStoreLink = useCallback(() => {
-    openInNewTab(LINK_NFL_APP_DOWNLOAD)();
-  }, []);
-
-  const shouldShowInfoButton = useMemo(() => {
-    const leaderboard = leaderboardInfo?.metadata as LeaderboardMetadata | undefined;
-
-    return !!(leaderboard && 'title' in leaderboard && 'content' in leaderboard);
-  }, [leaderboardInfo]);
-
-  const timeRemainingDateTime = useMemo(() => {
-    if (!leaderboardInfo?.endTimeTs || !serverTime) {
-      return undefined;
-    }
-
-    const delayStartTime = leaderboardInfo?.endTimeTs;
-    const delayEndTime = delayStartTime + Number(leaderboardInfo.specialTimeDelayDuration) * 86400000;
-
-    const targetTime = serverTime > delayStartTime && serverTime < delayEndTime
-      ? delayEndTime
-      : delayStartTime;
-
-    return getTimeRemaining(serverTime, new Date(targetTime).toString());
-  }, [leaderboardInfo?.endTimeTs, leaderboardInfo?.specialTimeDelayDuration, serverTime]);
-
-  const shouldShowToken = useMemo(() => {
-    if (!leaderboardInfo?.endTimeTs || !serverTime) {
-      return false;
-    }
+  const isTacContentReady = !!leaderboardInfo?.metadata;
 
-    const delayStartTime = leaderboardInfo?.endTimeTs;
-    const delayEndTime = delayStartTime + Number(leaderboardInfo.specialTimeDelayDuration) * 86400000;
-
-    return serverTime > delayStartTime && serverTime < delayEndTime;
-  }, [leaderboardInfo?.endTimeTs, leaderboardInfo?.specialTimeDelayDuration, serverTime]);
-
-  const timeRemainingTitle = useMemo(() => {
-    if (!leaderboardInfo?.endTimeTs || !serverTime) {
-      return undefined;
-    }
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      if (!isTacRead && isTacContentReady) {
+        activeModal(TERM_AND_CONDITION_MODAL_ID);
+      }
+    }, 500);
 
-    return serverTime > leaderboardInfo.endTimeTs
-      ? t('New leaderboard in')
-      : t('Time remaining');
-  }, [leaderboardInfo?.endTimeTs, serverTime, t]);
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [activeModal, isTacContentReady, isTacRead]);
 
   return (
     <div className={className}>
@@ -172,13 +189,12 @@ const Component = ({ className }: Props): React.ReactElement => {
         title={currentLeaderboardInfo?.name || t('Leaderboard')}
       />
 
-      {
-        <div className='time-remaining-wrapper'>
-          <TimeRemaining
-            specialTimeRemaining={timeRemainingDateTime}
-            specialTimeTitle={timeRemainingTitle}
-          />
-        </div>}
+      <div className='time-remaining-wrapper'>
+        <TimeRemaining
+          specialTimeRemaining={timeRemainingDateTime}
+          specialTimeTitle={timeRemainingTitle}
+        />
+      </div>
 
       <div className='scroll-container'>
         <TopThreeArea

diff --git a/packages/extension-koni-ui/src/constants/localStorage.ts b/packages/extension-koni-ui/src/constants/localStorage.ts
@@ -36,3 +36,4 @@ export const LATEST_SESSION = 'general.latest-session';
 export const UPGRADE_FIREFOX_VERSION = 'general.updated-version-firefox';
 export const VISIT_INVITATION_SCREEN_FLAG = 'general.visit-invitation-screen-flag';
 export const VISIT_LOGIN_CTA_FLAG = 'general.visit-login-cta-flag';
+export const TAC_READ_FLAG = 'general.tac-read-flag';