From 0738f4392fa3f021bc8df2741ba5117dc9eba607 Mon Sep 17 00:00:00 2001
From: QuanPT <77958905+quanpt239@users.noreply.github.com>
Date: Fri, 18 Oct 2024 15:36:53 +0700
Subject: [PATCH] feat(scan): add total reward (#24)

---
 src/components/LuckyDraw/index.module.scss |  2 +-
 src/components/LuckyDraw/index.tsx         | 32 +++++++++++++++++-----
 src/components/LuckyDraw/useLuckyDraw.ts   | 12 +++++++-
 3 files changed, 37 insertions(+), 9 deletions(-)

diff --git a/src/components/LuckyDraw/index.module.scss b/src/components/LuckyDraw/index.module.scss
index 9f5dbc86..bc6109f7 100644
--- a/src/components/LuckyDraw/index.module.scss
+++ b/src/components/LuckyDraw/index.module.scss
@@ -40,7 +40,7 @@
     z-index: 10;
     width: 100%;
     display: flex;
-    flex-direction: column-reverse;
+    flex-direction: column;
 
     align-items: center;
     flex-wrap: wrap;
diff --git a/src/components/LuckyDraw/index.tsx b/src/components/LuckyDraw/index.tsx
index 5485a2c4..82e1f8a3 100644
--- a/src/components/LuckyDraw/index.tsx
+++ b/src/components/LuckyDraw/index.tsx
@@ -29,7 +29,13 @@ import {
   SPIN_ID_KEY,
   REWARD_ENUM
 } from './constants';
-import { getDataLogByKey, sendMultiple, useGetListSpinResult, useLuckyDrawConfig } from './useLuckyDraw';
+import {
+  getDataLogByKey,
+  sendMultiple,
+  useGetListSpinResult,
+  useGetTotalWonReward,
+  useLuckyDrawConfig
+} from './useLuckyDraw';
 import styles from './index.module.scss';
 
 const cx = cn.bind(styles);
@@ -92,6 +98,12 @@ const LuckyDraw: FC<{}> = () => {
 
   // const { spinResult } = useGetSpinResult({ id: spinId });
   const { spinResult, isDone } = useGetListSpinResult({ spinIdList });
+  const { totalRewarded, isLoading, refetchTotalRewarded } = useGetTotalWonReward();
+
+  useEffect(() => {
+    const intervalGetReward = setInterval(refetchTotalRewarded, 5e3);
+    return () => clearInterval(intervalGetReward);
+  }, []);
 
   useEffect(() => {
     if (spinIdList.length && isDone && myLuckyRef?.current) {
@@ -188,6 +200,18 @@ const LuckyDraw: FC<{}> = () => {
       >
         <div className={cx('wheel')}>
           <div className={cx('info')}>
+            <span>
+              Total rewarded:&nbsp;
+              <span className={cx('balance')}>
+                {isLoading ? 'loading' : `${toDisplay(totalRewarded)} ${feeToken?.name || 'ORAI'}`}
+              </span>
+            </span>
+            <span>
+              Balance:&nbsp;
+              <span className={cx('balance')}>
+                {toDisplay(balance)} {feeToken?.name || 'ORAI'}
+              </span>
+            </span>
             <div className={cx('detail')}>
               <div className={cx('rangeWrapper')}>
                 <span className={cx('title')}>Select Spin: </span>
@@ -209,12 +233,6 @@ const LuckyDraw: FC<{}> = () => {
                 />
               </div>
             </div>
-            <span>
-              Balance:&nbsp;
-              <span className={cx('balance')}>
-                {toDisplay(balance)} {feeToken?.name || 'ORAI'}
-              </span>
-            </span>
           </div>
 
           {loaded && (
diff --git a/src/components/LuckyDraw/useLuckyDraw.ts b/src/components/LuckyDraw/useLuckyDraw.ts
index 8152c9e1..3455fdcf 100644
--- a/src/components/LuckyDraw/useLuckyDraw.ts
+++ b/src/components/LuckyDraw/useLuckyDraw.ts
@@ -1,4 +1,3 @@
-import { ORAIX_CONTRACT } from '@oraichain/oraidex-common';
 import { useQuery } from '@tanstack/react-query';
 import { MulticallQueryClient } from '@oraichain/common-contracts-sdk';
 import { network } from 'config/networks';
@@ -124,6 +123,17 @@ export const useGetSpinResult = ({ id }: { id: number }) => {
   };
 };
 
+export const useGetTotalWonReward = () => {
+  const getState = async () => {
+    const contractClient = new LuckyWheelContractQueryClient(window.client, LUCKY_DRAW_CONTRACT);
+    const res = await contractClient.state();
+    return res.total_prize_won;
+  };
+
+  const { data, isLoading, refetch } = useQuery(['getState'], () => getState(), {});
+  return { totalRewarded: data, isLoading, refetchTotalRewarded: refetch };
+};
+
 export const useGetListSpinResult = ({ spinIdList }: { spinIdList: number[] }) => {
   const getListSpinResults = async () => {
     const multicall = new MulticallQueryClient(window.client, network.multicall);