Merge pull request #63 from lum-network/improvement/lum-886

[LUM-886] Millions WebApp -> Add section to summarize total deposit drops & "See details" button to redirect to full deposit drops page
lum-network · Feb 29, 2024 · 6aae4e7 · 6aae4e7
2 parents 2e4bc01 + f26434f
commit 6aae4e7
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 8 deletions.
diff --git a/src/locales/en.ts b/src/locales/en.ts
@@ -377,6 +377,7 @@ export default {
         deposits: 'Pool Deposits',
         leavePoolCta: 'Leave Pool',
         depositDrop: 'Deposit Drop',
+        manageDropCta: 'Manage Deposit Drop',
         depositDropHint:
             "Congrats, you've got a Deposit Drop!\n" + 'It means a temporary boost in your deposit, loaned to your account. You have more chances to win in upcoming draws so good luck Cosmonaut!',
         transferWaitingCta: 'Usually ~1 minute',

diff --git a/src/pages/MySavings/components/DepositTable/DepositTable.tsx b/src/pages/MySavings/components/DepositTable/DepositTable.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import numeral from 'numeral';
 
 import { Button, Collapsible, PurpleBackgroundImage, SmallerDecimal, Tooltip } from 'components';
-import { Breakpoints, FirebaseConstants } from 'constant';
+import { Breakpoints, FirebaseConstants, NavigationConstants } from 'constant';
 import { AggregatedDepositModel, DepositModel, PoolModel } from 'models';
 import { useWindowSize } from 'hooks';
 import { DenomsUtils, Firebase, I18n, NumbersUtils } from 'utils';
@@ -28,6 +28,7 @@ const DepositTable = ({ deposits, pools, prices, onLeavePool, onDepositRetry, on
     const renderGenericRow = (deposit: AggregatedDepositModel | Partial<DepositModel>, index: number, className?: string) => {
         let statusClassName = '';
         let cta: string | JSX.Element = '';
+        const isSentDrop = deposit.depositorAddress !== deposit.winnerAddress;
 
         switch (deposit.state) {
             case DepositState.DEPOSIT_STATE_SUCCESS:
@@ -38,6 +39,10 @@ const DepositTable = ({ deposits, pools, prices, onLeavePool, onDepositRetry, on
                         <p className='me-3 mb-0'>{I18n.t('mySavings.depositDrop')}</p>
                         <img alt='Deposit drop' src={Assets.images.depositDrop} className='no-filter' />
                     </span>
+                ) : isSentDrop ? (
+                    <Button to={NavigationConstants.DROPS_MY_DEPOSITS} forcePurple textOnly>
+                        {I18n.t('mySavings.manageDropCta')}
+                    </Button>
                 ) : (
                     <Button
                         textOnly

diff --git a/src/utils/lumClient.ts b/src/utils/lumClient.ts
@@ -162,6 +162,7 @@ class LumClient {
         }
 
         const aggregatedDeposits = await PoolsUtils.reduceDepositsByPoolId(deposits);
+        const aggregatedDepositDropsSent = await PoolsUtils.reduceDepositDropsByPoolIdAndDays(deposits, { reduceBy: 'poolId' });
 
         let withdrawalsNextPageKey = new Uint8Array();
         const withdrawals: Withdrawal[] = [];
@@ -229,7 +230,7 @@ class LumClient {
 
         const aggregatedDepositsDrops = await PoolsUtils.reduceDepositsByPoolId(depositsDropsToDeposits, true);
 
-        return [...aggregatedDeposits, ...aggregatedDepositsDrops, ...aggregatedWithdrawals];
+        return PoolsUtils.sortDepositsByState([...aggregatedDeposits, ...aggregatedDepositDropsSent, ...aggregatedDepositsDrops, ...aggregatedWithdrawals]);
     };
 
     getWalletBalances = async (address: string) => {
@@ -530,20 +531,26 @@ class LumClient {
             return null;
         }
 
-        let pageDeposits: Uint8Array | undefined = undefined;
+        let nextPageKey = new Uint8Array();
         const deposits: DepositModel[] = [];
 
         while (true) {
             const resDeposits: QueryDepositsResponse = await this.lumQueryClient.lum.network.millions.accountDeposits({
                 depositorAddress,
-                pagination: pageDeposits ? ({ key: pageDeposits } as PageRequest) : undefined,
+                pagination: PageRequest.fromPartial({
+                    key: nextPageKey,
+                    limit: BigInt(0),
+                    offset: BigInt(0),
+                    reverse: false,
+                    countTotal: false,
+                }),
             });
 
             deposits.push(...resDeposits.deposits);
 
             // If we have pagination key, we just patch it, and it will process in the next loop
             if (resDeposits.pagination && resDeposits.pagination.nextKey && resDeposits.pagination.nextKey.length) {
-                pageDeposits = resDeposits.pagination.nextKey;
+                nextPageKey = resDeposits.pagination.nextKey;
             } else {
                 break;
             }

diff --git a/src/utils/pools.ts b/src/utils/pools.ts
@@ -123,14 +123,48 @@ export const getPoolByPoolId = (pools: PoolModel[], poolId: string) => {
     return pools.find((p) => p.poolId.toString() === poolId);
 };
 
+export const sortDepositsByState = async (deposits: AggregatedDepositModel[]) => {
+    const pendingDeposits: AggregatedDepositModel[] = [];
+    const successDeposits: AggregatedDepositModel[] = [];
+    const failedDeposits: AggregatedDepositModel[] = [];
+
+    for (const deposit of deposits) {
+        if (deposit.isWithdrawing) {
+            if (deposit.withdrawalState === WithdrawalState.WITHDRAWAL_STATE_FAILURE) {
+                failedDeposits.push(deposit);
+            } else {
+                pendingDeposits.push(deposit);
+            }
+        } else {
+            if (deposit.state === DepositState.DEPOSIT_STATE_SUCCESS) {
+                successDeposits.push(deposit);
+            } else if (
+                deposit.state === DepositState.DEPOSIT_STATE_FAILURE ||
+                (deposit.state === DepositState.DEPOSIT_STATE_IBC_TRANSFER && deposit.updatedAt && dayjs().diff(dayjs(deposit.updatedAt), 'hours') > 1)
+            ) {
+                failedDeposits.push(deposit);
+            } else {
+                pendingDeposits.push(deposit);
+            }
+        }
+    }
+
+    return [...failedDeposits, ...successDeposits, ...pendingDeposits];
+};
+
 // DROPS
-export const reduceDepositDropsByPoolIdAndDays = async (deposits: Partial<DepositModel>[]) => {
+export const reduceDepositDropsByPoolIdAndDays = async (deposits: Partial<DepositModel>[], options: { reduceBy: 'poolId' | 'date' } = { reduceBy: 'date' }) => {
     const aggregatedDeposits: AggregatedDepositModel[] = [];
 
     for (const deposit of deposits) {
         const poolId = deposit.poolId;
+        const reduceByDate = options.reduceBy === 'date';
+
+        if (poolId === undefined) {
+            continue;
+        }
 
-        if (poolId === undefined || deposit.createdAt === undefined) {
+        if (reduceByDate && deposit.createdAt === undefined) {
             continue;
         }
 
@@ -140,7 +174,13 @@ export const reduceDepositDropsByPoolIdAndDays = async (deposits: Partial<Deposi
             continue;
         }
 
-        const existingDeposit = aggregatedDeposits.find((d) => d.poolId?.toString() === poolId.toString() && dayjs(d.createdAt).format('YYYY-MM-DD') === createdAt);
+        const existingDeposit = aggregatedDeposits.find((d) => {
+            if (reduceByDate) {
+                return d.poolId?.toString() === poolId.toString() && dayjs(d.createdAt).format('YYYY-MM-DD') === createdAt;
+            } else {
+                return d.poolId?.toString() === poolId.toString();
+            }
+        });
 
         if (
             existingDeposit &&