KhanhPV - update airdrop raffle

packages/extension-koni-ui/src/Popup/Home/Airdrop/AirdropDetail/index.tsx

@@ -19,7 +19,7 @@ import React, { Context, useCallback, useContext, useEffect, useMemo, useState }
 import { useNavigate, useParams } from 'react-router-dom';
 import styled, { ThemeContext } from 'styled-components';
 import useNotification from '@subwallet/extension-koni-ui/hooks/common/useNotification';
-
+import DefaultLogosMap  from '@subwallet/extension-koni-ui/assets/logo';
 type WrapperProps = ThemeProps;
 type Props = ThemeProps & {
   currentAirdrop: AirdropCampaign;
@@ -49,6 +49,23 @@ const enum AirdropCampaignProcess {
 
 const rewardModalId = AIRDROP_REWARD_MODAL_ID;
 
+const LoadingGIF = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999;
+  img {
+    max-width: 100%;
+    max-height: 100%;
+  }
+`;
+
 const Component: React.FC<Props> = ({ className, currentAirdrop }: Props) => {
   const navigate = useNavigate();
   const notify = useNotification();
@@ -61,6 +78,7 @@ const Component: React.FC<Props> = ({ className, currentAirdrop }: Props) => {
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [claim, setClaim] = useState<boolean>(false);
   const [airdropHistory, setAirdropHistory] = useState<AirdropRewardHistoryLog | null>(null);
+  const [loadingRaffle, showLoadingRaffle] = useState<boolean>(false);
 
   const tabGroupItems = useMemo<TabGroupItemType[]>(() => {
     return [
@@ -157,7 +175,12 @@ const Component: React.FC<Props> = ({ className, currentAirdrop }: Props) => {
     try {
       const result = await apiSDK.subscribeAirdropRaffle(currentAirdrop.airdrop_campaign_id) as unknown as AirdropRaffle;
       setRaffle(result);
-      activeModal(rewardModalId);
+      showLoadingRaffle(true);
+      setTimeout(() => {
+        showLoadingRaffle(false);
+        activeModal(rewardModalId);
+      },3000);
+
     } catch (error) {
       setRaffle(null);
       console.log('error', error);
@@ -349,6 +372,12 @@ const Component: React.FC<Props> = ({ className, currentAirdrop }: Props) => {
         raffle={raffle}
         isLoading={isLoading}
       />
+      {loadingRaffle && (
+        <LoadingGIF>
+          <img src={DefaultLogosMap.boxGift} alt="Loading..." />
+        </LoadingGIF>)
+      }
+
     </Layout.WithSubHeaderOnly>
   );
 };

packages/extension-koni-ui/src/assets/logo/index.ts

@@ -17,7 +17,8 @@ export const DefaultLogosMap: Record<string, string> = {
   stellaswap: '/images/projects/stellaswap.png',
   xtwitter: '/images/projects/xtwitter.png',
   game_background_image: '/images/subwallet/game-background-image.png',
-  token_icon: '/images/games/token-icon.png'
+  token_icon: '/images/games/token-icon.png',
+  boxGift: '/images/box.gif',
 };
 
 export const IconMap = {