Merge pull request #23 from lum-network/improvement/lum-788

[LUM-788] Update draws prices
lum-network · Aug 10, 2023 · 81f8053 · 81f8053
2 parents a2cd0c7 + eb73461
commit 81f8053
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 11 deletions.
diff --git a/src/api/lumApi.ts b/src/api/lumApi.ts
@@ -1,6 +1,6 @@
 import { HttpClient } from 'utils';
 import { ApiConstants } from 'constant';
-import { DepositDropModel, PrizeModel, PrizeStatsModel } from 'models';
+import { DepositDropModel, MarketDataModel, PrizeModel, PrizeStatsModel } from 'models';
 
 class LumApi extends HttpClient {
     private static instance?: LumApi;
@@ -26,6 +26,8 @@ class LumApi extends HttpClient {
     getPrizesStats = async (denom: string) => this.request<PrizeStatsModel>({ url: `/millions/prizes/stats/${denom}`, method: 'GET' }, PrizeStatsModel);
 
     fetchDepositsDrops = async (address: string, page = 0) => this.request<DepositDropModel[]>({ url: `/millions/deposits/drops/${address}?limit=10&page=${page}`, method: 'GET' }, DepositDropModel);
+
+    fetchMarketData = async (since: Date) => this.request<MarketDataModel[]>({ url: `/market/data/since?limit=1`, method: 'POST', data: { since } }, MarketDataModel);
 }
 
 export default LumApi.getInstance();
diff --git a/src/models/MarketData.ts b/src/models/MarketData.ts
@@ -0,0 +1,20 @@
+import { Expose, Type } from 'class-transformer';
+
+class MarketData {
+    @Expose()
+    price!: number;
+
+    @Expose()
+    denom!: string;
+}
+
+class MarketDataModel {
+    @Expose({ name: 'market_data' })
+    @Type(() => MarketData)
+    marketData?: MarketData[];
+
+    @Expose()
+    id!: string;
+}
+
+export default MarketDataModel;
diff --git a/src/models/index.ts b/src/models/index.ts
@@ -4,6 +4,7 @@ export { default as BalanceModel } from './Balance';
 export { default as PrizeModel } from './Prize';
 export { default as PrizeStatsModel } from './PrizeStats';
 export { default as DepositDropModel } from './DepositDrop';
+export { default as MarketDataModel } from './MarketData';
 
 export * from './wallets';
 export * from './pools';

diff --git a/src/models/pools.ts b/src/models/pools.ts
@@ -3,6 +3,10 @@ import { Prize } from '@lum-network/sdk-javascript/build/codec/lum/network/milli
 import { BalanceModel } from './index';
 import { Draw } from '@lum-network/sdk-javascript/build/codec/lum/network/millions/draw';
 
+export interface DrawModel extends Draw {
+    usdTokenValue?: number;
+}
+
 export interface PoolInternalInfosModel {
     rpc: string;
     chainName: string;
@@ -18,7 +22,7 @@ export interface PoolInternalInfosModel {
 export interface PoolModel extends Pool {
     internalInfos?: PoolInternalInfosModel;
     prizes?: Prize[];
-    draws?: Draw[];
+    draws?: DrawModel[];
     nextDrawAt?: Date;
     currentPrizeToWin: BalanceModel | null;
     estimatedPrizeToWin: BalanceModel | null;

diff --git a/src/pages/PoolDetails/PoolDetails.tsx b/src/pages/PoolDetails/PoolDetails.tsx
@@ -554,7 +554,9 @@ const PoolDetails = () => {
                                                         {draw.totalWinCount.toString()}
                                                     </td>
                                                     <td data-label={drawHistoryHeaders[4]} className='text-end'>
-                                                        <SmallerDecimal nb={numeral(NumbersUtils.convertUnitNumber(draw.totalWinAmount) * (prices[denom] || 1)).format('$0,0[.]00')} />
+                                                        <SmallerDecimal
+                                                            nb={numeral(NumbersUtils.convertUnitNumber(draw.totalWinAmount) * (draw.usdTokenValue || prices[denom] || 0)).format('$0,0[.]00')}
+                                                        />
                                                         <div className='draw-token'>
                                                             <SmallerDecimal nb={numeral(NumbersUtils.convertUnitNumber(draw.totalWinAmount)).format('0,0.000000')} />
                                                             &nbsp;

diff --git a/src/pages/PoolDetails/components/DrawDetailsModal/DrawDetailsModal.tsx b/src/pages/PoolDetails/components/DrawDetailsModal/DrawDetailsModal.tsx
@@ -2,17 +2,17 @@ import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import dayjs from 'dayjs';
 import numeral from 'numeral';
-import { Draw } from '@lum-network/sdk-javascript/build/codec/lum/network/millions/draw';
 
 import Assets from 'assets';
 import { Button, Card, Modal, SmallerDecimal, Table } from 'components';
 import { ModalHandlers } from 'components/Modal/Modal';
 import { NavigationConstants } from 'constant';
 import { DenomsUtils, I18n, NumbersUtils, StringsUtils } from 'utils';
+import { DrawModel } from 'models';
 
 import './DrawDetailsModal.scss';
 
-const DrawDetails = ({ draw, poolDenom, prices, modalRef }: { draw: Draw | null; poolDenom: string; prices: { [key: string]: number }; modalRef: React.RefObject<ModalHandlers> }) => {
+const DrawDetails = ({ draw, poolDenom, prices, modalRef }: { draw: DrawModel | null; poolDenom: string; prices: { [key: string]: number }; modalRef: React.RefObject<ModalHandlers> }) => {
     const [view, setView] = useState<'winners' | 'redelegated'>('winners');
     const [winnersPage, setWinnersPage] = useState(1);
 
@@ -86,7 +86,7 @@ const DrawDetails = ({ draw, poolDenom, prices, modalRef }: { draw: Draw | null;
                                         <td className='text-md-end'>
                                             <div className='d-flex flex-column justify-content-center tx-amount'>
                                                 <div className='amount text-nowrap'>
-                                                    <SmallerDecimal nb={numeral(NumbersUtils.convertUnitNumber(winner.amount) * (prices[poolDenom] || 0)).format('$0,0[.]00')} />
+                                                    <SmallerDecimal nb={numeral(NumbersUtils.convertUnitNumber(winner.amount) * (draw.usdTokenValue || prices[poolDenom] || 0)).format('$0,0[.]00')} />
                                                 </div>
                                                 <span className='usd-price'>
                                                     <SmallerDecimal nb={numeral(NumbersUtils.convertUnitNumber(winner.amount)).format('0,0.000000')} /> {poolDenom.toUpperCase()}
@@ -105,7 +105,8 @@ const DrawDetails = ({ draw, poolDenom, prices, modalRef }: { draw: Draw | null;
                                             <div className='display-6 prize-remaining-amount'>
                                                 <SmallerDecimal
                                                     nb={numeral(
-                                                        (NumbersUtils.convertUnitNumber(draw.prizePool?.amount || 0) - NumbersUtils.convertUnitNumber(draw.totalWinAmount)) * (prices[poolDenom] || 0),
+                                                        (NumbersUtils.convertUnitNumber(draw.prizePool?.amount || 0) - NumbersUtils.convertUnitNumber(draw.totalWinAmount)) *
+                                                            (draw.usdTokenValue || prices[poolDenom] || 0),
                                                     ).format('$0,0[.]00')}
                                                 />
                                             </div>

diff --git a/src/redux/models/pools.ts b/src/redux/models/pools.ts
@@ -1,12 +1,13 @@
 import Long from 'long';
 import { createModel } from '@rematch/core';
 import { ApiConstants, PoolsConstants } from 'constant';
-import { PoolModel } from 'models';
+import { DrawModel, PoolModel } from 'models';
 import { DenomsUtils, LumClient, NumbersUtils, WalletClient } from 'utils';
 import { RootModel } from '.';
 import dayjs from 'dayjs';
 import { LumConstants } from '@lum-network/sdk-javascript';
 import { PoolState } from '@lum-network/sdk-javascript/build/codec/lum/network/millions/pool';
+import { LumApi } from 'api';
 
 interface PoolsState {
     pools: PoolModel[];
@@ -62,7 +63,7 @@ export const pools = createModel<RootModel>()({
                             continue;
                         }
 
-                        const draws = await dispatch.pools.getPoolDraws(pool.poolId);
+                        const draws = await dispatch.pools.getPoolDraws({ poolId: pool.poolId, nativeDenom: pool.nativeDenom });
 
                         const nextDrawAt = dayjs(pool.lastDrawCreatedAt || pool.drawSchedule?.initialDrawAt)
                             .add(pool.lastDrawCreatedAt ? pool.drawSchedule?.drawDelta?.seconds.toNumber() || 0 : 0, 'seconds')
@@ -176,12 +177,21 @@ export const pools = createModel<RootModel>()({
 
             dispatch.pools.setMutexAdditionalInfos(false);
         },
-        async getPoolDraws(poolId: Long) {
+        async getPoolDraws({ poolId, nativeDenom }: { poolId: Long; nativeDenom: string }) {
             try {
                 const res = await LumClient.getPoolDraws(poolId);
+                const draws: DrawModel[] = [];
 
                 if (res) {
-                    return res;
+                    for (const draw of res) {
+                        const [marketData] = await LumApi.fetchMarketData(draw.createdAt || new Date());
+
+                        if (marketData && marketData.length) {
+                            draws.push({ ...draw, usdTokenValue: marketData[0].marketData?.find((data) => data.denom === DenomsUtils.getNormalDenom(nativeDenom))?.price || undefined });
+                        }
+                    }
+
+                    return draws;
                 }
             } catch {}
         },