Merge pull request #26 from lum-network/improvement/lum-803

[LUM-803] Remove confusing poolId
lum-network · Aug 17, 2023 · cf55775 · cf55775
2 parents 16b254a + 8e50a4c
commit cf55775
Show file tree

Hide file tree

Showing 7 changed files with 18 additions and 20 deletions.
diff --git a/src/constant/firebase.ts b/src/constant/firebase.ts
@@ -50,6 +50,7 @@ export const ANALYTICS_EVENTS = {
     TRANSFER_OUT_CLICK: 'transfer_out_click',
     TRANSFER_OUT_CONFIRMED: 'transfer_out_confirmed',
     DEPOSIT_CLICK: 'deposit_click',
+    VIEW_DETAILS_CLICK: 'view_details_click',
     QUIT_DEPOSIT_FLOW_MODAL_OPEN: 'quit_deposit_flow_modal_open',
     QUIT_DEPOSIT_FLOW_MODAL_CONFIRMED: 'quit_deposit_flow_modal_confirmed',
     QUIT_DEPOSIT_FLOW_MODAL_CANCELLED: 'quit_deposit_flow_modal_cancelled',

diff --git a/src/locales/en.ts b/src/locales/en.ts
@@ -273,8 +273,9 @@ export default {
         tvl: 'TVL:',
         apy: 'Estimated APR:',
         cta: 'Deposit in Pool',
+        viewDetails: 'Chance to win',
         drawEndAt: 'Next draw in:',
-        poolId: 'Pool #{{ poolId }}',
+        poolId: 'Pool',
     },
     poolDetails: {
         myDeposits: 'My {{ denom }} deposits',
@@ -314,7 +315,7 @@ export default {
             noDraws: 'No draws yet',
             noDrawsDescription: 'Draws will be available as soon as the first prize is won',
             noDrawsCta: 'Deposit in Pool',
-            tableHeaders: ['Pool ID', 'Draw ID', 'Date', 'Prizes', 'Prize Value'],
+            tableHeaders: ['Draw ID', 'Date', 'Prizes', 'Prize Value'],
         },
         drawDetails: {
             winnersBtn: 'Winners',

diff --git a/src/pages/MySavings/components/DepositTable/DepositTable.tsx b/src/pages/MySavings/components/DepositTable/DepositTable.tsx
@@ -127,7 +127,7 @@ const DepositTable = ({ deposits, pools, prices, onLeavePool, onDepositRetry, on
                                 )}
                             </h3>
                             <p className='mb-0'>
-                                {numeral(usdPrice).format('$0,0[.]00')} - {I18n.t('pools.poolId', { poolId: deposit.poolId?.toString() || '' })} -{' '}
+                                {numeral(usdPrice).format('$0,0[.]00')} - {DenomsUtils.getNormalDenom(deposit.amount?.denom || '').toUpperCase()} {I18n.t('pools.poolId')} -{' '}
                                 {I18n.t('deposit.depositId', { depositId: deposit.depositId?.toString() || '' })}
                             </p>
                         </div>

diff --git a/src/pages/PoolDetails/PoolDetails.tsx b/src/pages/PoolDetails/PoolDetails.tsx
@@ -69,7 +69,7 @@ const PoolDetails = () => {
             }
         };
 
-        getLeaderboard();
+        getLeaderboard().finally(() => null);
     }, [lumWallet]);
 
     useEffect(() => {
@@ -585,9 +585,6 @@ const PoolDetails = () => {
                                                     }}
                                                     className='scale-hover'
                                                 >
-                                                    <td data-label={drawHistoryHeaders[0]}>
-                                                        <div className='d-flex align-items-center justify-content-center me-0 me-md-3 ms-auto ms-md-0 index-container'>#{draw.poolId.toString()}</div>
-                                                    </td>
                                                     <td data-label={drawHistoryHeaders[1]}>
                                                         <div className='d-flex align-items-center justify-content-center me-0 me-md-3 ms-auto ms-md-0 index-container'>#{draw.drawId.toString()}</div>
                                                     </td>

diff --git a/src/pages/Pools/Pools.scss b/src/pages/Pools/Pools.scss
@@ -11,11 +11,11 @@
         display: flex;
         flex-direction: column;
         align-items: stretch;
-        height: 400px;
+        height: 440px;
         justify-content: space-between;
 
         @include media-breakpoint-up(xl) {
-            height: 440px;
+            height: 470px;
         }
 
         .name-container {

diff --git a/src/pages/Pools/components/PoolCard.tsx b/src/pages/Pools/components/PoolCard.tsx
@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
 import { useSelector } from 'react-redux';
 import numeral from 'numeral';
 
@@ -24,19 +23,12 @@ const PoolCard = ({ denom, tvl, poolId, estimatedPrize, drawEndAt, apy }: IProps
     const loadingAdditionalInfo = useSelector((state: RootState) => state.loading.effects.pools.getPoolsAdditionalInfo);
     const lumWallet = useSelector((state: RootState) => state.wallet.lumWallet);
 
-    const navigate = useNavigate();
-
     const [drawInProgress, setDrawInProgress] = useState(false);
 
     const price = prices?.[denom];
 
     return (
-        <Card
-            className='pool-card-container glow-bg'
-            onClick={() => {
-                navigate(`${NavigationConstants.POOL_DETAILS}/${denom}/${poolId}`);
-            }}
-        >
+        <Card className='pool-card-container glow-bg'>
             <div className='prize-container'>
                 <img width={68} height={68} src={DenomsUtils.getIconFromDenom(denom)} alt={denom} />
                 <div className='d-flex flex-column align-items-start ms-3'>
@@ -83,6 +75,13 @@ const PoolCard = ({ denom, tvl, poolId, estimatedPrize, drawEndAt, apy }: IProps
                 </div>
             </div>
             <div className='w-100'>
+                <Button
+                    onClick={() => Firebase.logEvent(FirebaseConstants.ANALYTICS_EVENTS.VIEW_DETAILS_CLICK, { denom, pool_id: poolId })}
+                    to={`${NavigationConstants.POOL_DETAILS}/${denom}/${poolId}`}
+                    outline
+                >
+                    {I18n.t('pools.viewDetails')}
+                </Button>
                 <Button
                     {...(!KeplrUtils.isKeplrInstalled()
                         ? {
@@ -97,7 +96,7 @@ const PoolCard = ({ denom, tvl, poolId, estimatedPrize, drawEndAt, apy }: IProps
                         : {
                               to: `${NavigationConstants.POOLS}/${denom}/${poolId}`,
                           })}
-                    className='deposit-cta w-100'
+                    className='deposit-cta w-100 mt-3'
                     onClick={() => Firebase.logEvent(FirebaseConstants.ANALYTICS_EVENTS.DEPOSIT_CLICK, { denom, pool_id: poolId })}
                 >
                     {I18n.t('pools.cta')}

diff --git a/src/pages/Winners/components/LatestWinnersTable/LatestWinnersTable.tsx b/src/pages/Winners/components/LatestWinnersTable/LatestWinnersTable.tsx
@@ -32,7 +32,7 @@ const LatestWinnersTable = ({ prizes, metadata, visibleItem, onPageChange, onIte
                     </span>
                     {StringsUtils.trunc(prize.winnerAddress)}
                     <span className='prize-infos ms-3'>
-                        ${DenomsUtils.getNormalDenom(prize.amount.denom).toUpperCase()} {I18n.t('pools.poolId', { poolId: prize.poolId }).toUpperCase()} -{' '}
+                        ${DenomsUtils.getNormalDenom(prize.amount.denom).toUpperCase()} {I18n.t('pools.poolId').toUpperCase()} -{' '}
                         {I18n.t('mySavings.claimModal.drawId', { drawId: prize.drawId }).toUpperCase()}
                     </span>
                     <span className='date ms-3'>{dayjs(prize.createdAt).format('D MMM YYYY')}</span>