From b5770fac1fb517f117982c8a9bad6b6fc6941d46 Mon Sep 17 00:00:00 2001
From: Frenkie Nguyen <nguyentiendung.me@gmail.com>
Date: Fri, 15 Nov 2024 19:23:24 +0700
Subject: [PATCH] [Issue-164] [Mythical telegram app] refactor code

---
 .../src/Popup/Home/Events/DailyRewards/index.tsx   |  4 ++--
 .../src/components/Layout/base/Base.tsx            | 14 +++++++++-----
 .../extension-koni-ui/src/connector/booka/sdk.ts   |  2 +-
 3 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/packages/extension-koni-ui/src/Popup/Home/Events/DailyRewards/index.tsx b/packages/extension-koni-ui/src/Popup/Home/Events/DailyRewards/index.tsx
index df123d7874..050a9a1d0a 100644
--- a/packages/extension-koni-ui/src/Popup/Home/Events/DailyRewards/index.tsx
+++ b/packages/extension-koni-ui/src/Popup/Home/Events/DailyRewards/index.tsx
@@ -21,7 +21,7 @@ function Component (props: Props): React.ReactElement<Props> {
   const { activeModal, inactiveModal } = useContext(ModalContext);
   const [dailyRewards, setDailyRewards] = useState(apiSdk.getDailyRewardAchievements());
 
-  const remainingDailyRewards = useCallback(() => {
+  const claimableDailyRewards = useCallback(() => {
     return dailyRewards.filter((item) => item.status === 'claimable');
   }, [dailyRewards]);
   const openDailyRewardsModal = useCallback(() => {
@@ -66,7 +66,7 @@ function Component (props: Props): React.ReactElement<Props> {
             {t('Daily rewards')}
           </MythButton>
 
-          {remainingDailyRewards.length > 0 && <div className={'__notice-icon'}></div>}
+          {claimableDailyRewards.length > 0 && <div className={'__notice-icon'}></div>}
         </div>
       </div>
 
diff --git a/packages/extension-koni-ui/src/components/Layout/base/Base.tsx b/packages/extension-koni-ui/src/components/Layout/base/Base.tsx
index fe426860a3..cff3ca38eb 100644
--- a/packages/extension-koni-ui/src/components/Layout/base/Base.tsx
+++ b/packages/extension-koni-ui/src/components/Layout/base/Base.tsx
@@ -35,7 +35,7 @@ const Component = ({ backgroundStyle = 'style-1', children, className, headerIco
   const { pathname } = useLocation();
   const { t } = useTranslation();
   const { language } = useSelector((state) => state.settings);
-  const [claimAbleAchievements, setClaimAbleAchievements] = useState(apiSdk.getClaimAbleAchievements());
+  const [claimableAchievements, setClaimableAchievements] = useState(apiSdk.getClaimableAchievements());
 
   const tabBarItems = useMemo((): Array<Omit<SwTabBarItem, 'onClick'> & { url: string }> => ([
     {
@@ -77,7 +77,7 @@ const Component = ({ backgroundStyle = 'style-1', children, className, headerIco
                 fill='currentColor'
               />
             </svg>
-            { claimAbleAchievements.length > 0 && <div className={'__notice-icon-tabbar'}></div>}
+            { claimableAchievements.length > 0 && <div className={'__notice-icon-tabbar'}></div>}
           </>
         )
       },
@@ -153,7 +153,7 @@ const Component = ({ backgroundStyle = 'style-1', children, className, headerIco
       key: 'my-profile',
       url: '/home/my-profile'
     }
-  ]), [claimAbleAchievements.length, t]);
+  ]), [claimableAchievements.length, t]);
 
   const selectedTab = useMemo((): string => {
     const isHomePath = pathname.includes('/home');
@@ -185,7 +185,7 @@ const Component = ({ backgroundStyle = 'style-1', children, className, headerIco
 
   useEffect(() => {
     const sub1 = apiSdk.subscribeClaimableAchievements().subscribe((achievements: Achievement[]) => {
-      setClaimAbleAchievements(achievements);
+      setClaimableAchievements(achievements);
     });
 
     return () => {
@@ -266,8 +266,12 @@ const Base = styled(Component)<LayoutBaseProps>(({ theme: { extendToken, token }
     backgroundColor: 'transparent'
   },
 
+  '&.-show-tab-bar > .ant-sw-screen-layout-body > .ant-sw-screen-layout-body-inner': {
+    paddingBottom: 90
+  },
+
   '.ant-sw-tab-bar-container': {
-    position: 'relative',
+    position: 'fixed',
     bottom: 0,
     left: 0,
     right: 0,
diff --git a/packages/extension-koni-ui/src/connector/booka/sdk.ts b/packages/extension-koni-ui/src/connector/booka/sdk.ts
index 3c57079c0e..16ca1abbcb 100644
--- a/packages/extension-koni-ui/src/connector/booka/sdk.ts
+++ b/packages/extension-koni-ui/src/connector/booka/sdk.ts
@@ -445,7 +445,7 @@ export class BookaSdk {
     return this.inviteAchievementsSubject;
   }
 
-  getClaimAbleAchievements () {
+  getClaimableAchievements () {
     return this.claimAbleAchievementsSubject.value;
   }