Merge branch 'refs/heads/mythical-dev' into mythical-preview

Koniverse · Jan 9, 2025 · b1bcf16 · b1bcf16
2 parents b365795 + 77a98ca
commit b1bcf16
Show file tree

Hide file tree

Showing 15 changed files with 168 additions and 115 deletions.
diff --git a/packages/extension-koni-ui/src/Popup/Home/Cards/index.tsx b/packages/extension-koni-ui/src/Popup/Home/Cards/index.tsx
@@ -7,6 +7,7 @@ import { NFLRivalCard } from '@subwallet/extension-koni-ui/connector/booka/types
 import { HomeContext } from '@subwallet/extension-koni-ui/contexts/screen/HomeContext';
 import { ThemeProps } from '@subwallet/extension-koni-ui/types';
 import { openInNewTab } from '@subwallet/extension-koni-ui/utils';
+import { sendEventGA } from '@subwallet/extension-koni-ui/utils/googleAnalytics';
 import { ModalContext } from '@subwallet/react-ui';
 import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -92,6 +93,7 @@ const Component = ({ className }: Props): React.ReactElement => {
   }, [setContainerClass]);
 
   const handleOpenMarket = useCallback(() => {
+    sendEventGA('mythical-marketplace-link-click');
     openInNewTab(NFL_RIVALS_MARKET_LINK)();
   }, []);
 

diff --git a/packages/extension-koni-ui/src/Popup/Home/InviteNew/index.tsx b/packages/extension-koni-ui/src/Popup/Home/InviteNew/index.tsx
@@ -11,6 +11,7 @@ import { LINK_NFL_APP_DOWNLOAD } from '@subwallet/extension-koni-ui/constants';
 import { useDefaultNavigate, useNotification, useSetCurrentPage, useTranslation } from '@subwallet/extension-koni-ui/hooks';
 import { ThemeProps } from '@subwallet/extension-koni-ui/types';
 import { copyToClipboard, openInNewTab } from '@subwallet/extension-koni-ui/utils';
+import { sendEventGA } from '@subwallet/extension-koni-ui/utils/googleAnalytics';
 import CN from 'classnames';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import styled from 'styled-components';
@@ -57,6 +58,7 @@ const Component = ({ className }: Props): React.ReactElement => {
   }, [inviteURL]);
 
   const openAppStoreLink = useCallback(() => {
+    sendEventGA('nfl-rivals-download-link-click');
     openInNewTab(LINK_NFL_APP_DOWNLOAD)();
   }, []);
 

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/TopThreeArea.tsx b/packages/extension-koni-ui/src/Popup/Home/LeaderboardTemp/TopThreeArea.tsx
@@ -11,6 +11,7 @@ import styled from 'styled-components';
 type Props = ThemeProps & {
   leaderboardPersonItems: LeaderboardPerson[];
   isLoading: boolean;
+  shouldShowToken?: boolean;
 };
 
 function getTopAccountItem (gameAccountItem: LeaderboardPerson | undefined, rank: number): TopAccountItemType {
@@ -32,7 +33,7 @@ function getTopAccountItem (gameAccountItem: LeaderboardPerson | undefined, rank
   };
 }
 
-const Component = ({ className, isLoading, leaderboardPersonItems }: Props): React.ReactElement => {
+const Component = ({ className, isLoading, leaderboardPersonItems, shouldShowToken }: Props): React.ReactElement => {
   return (
     <div
       className={className}
@@ -42,6 +43,7 @@ const Component = ({ className, isLoading, leaderboardPersonItems }: Props): Rea
           <TopAccountItem
             {...getTopAccountItem(leaderboardPersonItems[1], 2)}
             isLoading={isLoading}
+            shouldShowToken={shouldShowToken}
           />
         }
       </div>
@@ -50,6 +52,7 @@ const Component = ({ className, isLoading, leaderboardPersonItems }: Props): Rea
           <TopAccountItem
             {...getTopAccountItem(leaderboardPersonItems[0], 1)}
             isLoading={isLoading}
+            shouldShowToken={shouldShowToken}
           />
         }
       </div>
@@ -58,6 +61,7 @@ const Component = ({ className, isLoading, leaderboardPersonItems }: Props): Rea
           <TopAccountItem
             {...getTopAccountItem(leaderboardPersonItems[2], 3)}
             isLoading={isLoading}
+            shouldShowToken={shouldShowToken}
           />
         }
       </div>

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,19 +4,21 @@
 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 { useSetCurrentPage } from '@subwallet/extension-koni-ui/hooks';
+import { useServerTime, useSetCurrentPage } from '@subwallet/extension-koni-ui/hooks';
 import { GameAccountListArea } from '@subwallet/extension-koni-ui/Popup/Home/LeaderboardTemp/GameAccountListArea';
 import { LeaderboardMetadata, TERM_AND_CONDITION_MODAL_ID, TermAndConditionModal } from '@subwallet/extension-koni-ui/Popup/Home/LeaderboardTemp/TermAndConditionModal';
 import { TopThreeArea } from '@subwallet/extension-koni-ui/Popup/Home/LeaderboardTemp/TopThreeArea';
 import { ThemeProps } from '@subwallet/extension-koni-ui/types';
 import { getTimeRemaining, openInNewTab } from '@subwallet/extension-koni-ui/utils';
+import { sendEventGA } from '@subwallet/extension-koni-ui/utils/googleAnalytics';
 import { ModalContext, Skeleton } from '@subwallet/react-ui';
 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;
 
@@ -32,6 +34,64 @@ const Component = ({ className }: Props): React.ReactElement => {
   const [isLoading, setIsLoading] = useState(true);
   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(() => {
+    sendEventGA('nfl-rivals-download-link-click');
+    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) => {
@@ -100,50 +160,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 isTacContentReady = shouldShowInfoButton;
 
-  const shouldShowInfoButton = useMemo(() => {
-    const leaderboard = leaderboardInfo?.metadata as LeaderboardMetadata | undefined;
-
-    return !!(leaderboard && 'title' in leaderboard && 'content' in leaderboard);
-  }, [leaderboardInfo]);
-
-  const timeRemainingDateTimeHandler = useCallback((currentTime?: number) => {
-    if (!leaderboardInfo?.endTimeTs || !currentTime) {
-      return undefined;
-    }
-
-    const delayStartTime = leaderboardInfo?.endTimeTs;
-    const delayEndTime = delayStartTime + Number(leaderboardInfo.specialTimeDelayDuration) * 86400000;
-
-    if (currentTime > delayStartTime) {
-      return getTimeRemaining(delayStartTime, new Date(delayEndTime).toString());
-    }
-
-    return undefined;
-  }, [leaderboardInfo?.endTimeTs, leaderboardInfo?.specialTimeDelayDuration]);
-
-  const timeRemainingTitleHandler = useCallback((currentTime?: number) => {
-    if (!leaderboardInfo?.endTimeTs || !currentTime) {
-      return undefined;
-    }
-
-    if (currentTime > leaderboardInfo?.endTimeTs) {
-      return t('New leaderboard in');
-    }
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      if (!isTacRead && isTacContentReady) {
+        activeModal(TERM_AND_CONDITION_MODAL_ID);
+      }
+    }, 500);
 
-    return undefined;
-  }, [leaderboardInfo?.endTimeTs, t]);
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [activeModal, isTacContentReady, isTacRead]);
 
   return (
     <div className={className}>
@@ -162,19 +191,19 @@ const Component = ({ className }: Props): React.ReactElement => {
         title={currentLeaderboardInfo?.name || t('Leaderboard')}
       />
 
-      {
-        <div className='time-remaining-wrapper'>
-          <TimeRemaining
-            customDateTimeHandler={timeRemainingDateTimeHandler}
-            customTitleHandler={timeRemainingTitleHandler}
-          />
-        </div>}
+      <div className='time-remaining-wrapper'>
+        <TimeRemaining
+          specialTimeRemaining={timeRemainingDateTime}
+          specialTimeTitle={timeRemainingTitle}
+        />
+      </div>
 
       <div className='scroll-container'>
         <TopThreeArea
           className={'top-three-area'}
           isLoading={isLoading}
           leaderboardPersonItems={leaderboardPersonItems}
+          shouldShowToken={shouldShowToken}
         />
         {isLoading
           ? (

diff --git a/packages/extension-koni-ui/src/Popup/Home/MissionTemp/index.tsx b/packages/extension-koni-ui/src/Popup/Home/MissionTemp/index.tsx
@@ -7,9 +7,10 @@ import { BookaSdk } from '@subwallet/extension-koni-ui/connector/booka/sdk';
 import { Achievement, Task, TaskCategory, TaskCategoryType } from '@subwallet/extension-koni-ui/connector/booka/types';
 import { LINK_NFL_APP_DOWNLOAD } from '@subwallet/extension-koni-ui/constants';
 import { HomeContext } from '@subwallet/extension-koni-ui/contexts/screen/HomeContext';
-import { useSetCurrentPage } from '@subwallet/extension-koni-ui/hooks';
+import { useServerTime, useSetCurrentPage } from '@subwallet/extension-koni-ui/hooks';
 import { ThemeProps } from '@subwallet/extension-koni-ui/types';
 import { openInNewTab } from '@subwallet/extension-koni-ui/utils';
+import { sendEventGA } from '@subwallet/extension-koni-ui/utils/googleAnalytics';
 import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
@@ -32,8 +33,7 @@ const Component = ({ className }: Props): React.ReactElement => {
   const [achievements, setAchievements] = useState<Achievement[]>(apiSDK.achievementList);
   const [selectedFilterTab, setSelectedFilterTab] = useState<string>(TaskCategoryType.DAILY);
   const [metadata, setMetadata] = useState(apiSDK.getMetadata());
-  const [serverTime, setServerTime] = useState<number>(apiSDK.serverTime);
-
+  const { serverTime } = useServerTime();
   const filterTabItems = useMemo<FilterTabItemType[]>(() => {
     return [
       {
@@ -56,6 +56,7 @@ const Component = ({ className }: Props): React.ReactElement => {
   }, []);
 
   const openAppStoreLink = useCallback(() => {
+    sendEventGA('nfl-rivals-download-link-click');
     openInNewTab(LINK_NFL_APP_DOWNLOAD)();
   }, []);
 
@@ -73,16 +74,6 @@ const Component = ({ className }: Props): React.ReactElement => {
     navigate('/invite');
   }, [navigate]);
 
-  useEffect(() => {
-    const timeSub = apiSDK.subscribeServerTime().subscribe((time) => {
-      setServerTime(time);
-    });
-
-    return () => {
-      timeSub.unsubscribe();
-    };
-  }, []);
-
   useEffect(() => {
     setBackgroundStyle('style-2');
 
@@ -151,7 +142,10 @@ const Component = ({ className }: Props): React.ReactElement => {
       />
 
       {endTime && <div className='time-remaining-wrapper'>
-        <TimeRemaining endTime={endTime} />
+        <TimeRemaining
+          endTime={endTime}
+          serverTime={serverTime}
+        />
       </div>}
 
       <MissionSectionListContainer

diff --git a/packages/extension-koni-ui/src/Popup/Home/MyProfile/index.tsx b/packages/extension-koni-ui/src/Popup/Home/MyProfile/index.tsx
@@ -9,6 +9,7 @@ import { AuthenticationMythContext } from '@subwallet/extension-koni-ui/contexts
 import { useSetCurrentPage } from '@subwallet/extension-koni-ui/hooks';
 import { ThemeProps } from '@subwallet/extension-koni-ui/types';
 import { openInNewTab } from '@subwallet/extension-koni-ui/utils';
+import { sendEventGA } from '@subwallet/extension-koni-ui/utils/googleAnalytics';
 import React, { useCallback, useContext, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
@@ -35,6 +36,7 @@ const Component = ({ className }: Props): React.ReactElement => {
   }, [linkMythAccount]);
 
   const openAppStoreLink = useCallback(() => {
+    sendEventGA('nfl-rivals-download-link-click');
     openInNewTab(LINK_NFL_APP_DOWNLOAD)();
   }, []);