Merge pull request #33 from lum-network/feature/lum-802

[LUM-802] New prizes history
lum-network · Sep 20, 2023 · 214bbbd · 214bbbd
2 parents 18e01c5 + dd230a8
commit 214bbbd
Show file tree

Hide file tree

Showing 39 changed files with 884 additions and 236 deletions.
diff --git a/src/api/lumApi.ts b/src/api/lumApi.ts
@@ -23,6 +23,8 @@ class LumApi extends HttpClient {
 
     fetchPrizes = async (page = 0) => this.request<PrizeModel[]>({ url: `/millions/prizes?limit=5&page=${page}`, method: 'GET' }, PrizeModel);
 
+    fetchPrizesByAddress = async (address: string, page = 0) => this.request<PrizeModel[]>({ url: `/millions/prizes/address/${address}?limit=5000&page=${page}`, method: 'GET' }, PrizeModel);
+
     fetchBiggestPrizesByPoolId = async (page = 0, poolId: string) => this.request<PrizeModel[]>({ url: `/millions/prizes/biggest/${poolId}?limit=5&page=${page}`, method: 'GET' }, PrizeModel);
 
     getPrizesStats = async (poolId: string) => this.request<PrizeStatsModel>({ url: `/millions/prizes/stats/${poolId}`, method: 'GET' }, PrizeStatsModel);

diff --git a/src/assets/images/info_white.svg b/src/assets/images/info_white.svg
diff --git a/src/assets/index.ts b/src/assets/index.ts
@@ -18,6 +18,7 @@ import discordPlain from './images/discord_plain.svg';
 import dollarIcon from './images/dollar_icon.svg';
 import downArrow from './images/down_arrow.svg';
 import info from './images/info.svg';
+import infoWhite from './images/info_white.svg';
 import keplr from './images/keplr.svg';
 import landingArrow from './images/landing_arrow.svg';
 import landingDoubleArrows from './images/landing_double_arrows.svg';
@@ -81,6 +82,7 @@ const Assets = {
         dollarIcon,
         downArrow,
         info,
+        infoWhite,
         keplr,
         landingArrow,
         landingDoubleArrows,

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -13,7 +13,7 @@ import { ModalHandlers } from 'components/Modal/Modal';
 import { useWindowSize } from 'hooks';
 import { Firebase, I18n } from 'utils';
 import { RootState } from 'redux/store';
-import { Breakpoints, FirebaseConstants, NavigationConstants } from 'constant';
+import { Breakpoints, FirebaseConstants, NavigationConstants, PrizesConstants } from 'constant';
 
 import ConnectButton from '../ConnectButton/ConnectButton';
 
@@ -145,6 +145,8 @@ const Header = ({ logoutModalRef }: { logoutModalRef: RefObject<ModalHandlers> }
             );
         }
 
+        const prizesPendingLength = (prizes && prizes.filter((prize) => prize.state === PrizesConstants.PrizeState.PENDING).length) || 0;
+
         return (
             <ul className='d-flex flex-column flex-lg-row align-items-lg-center ms-auto'>
                 <li className='nav-item' {...dismissMenuProps}>
@@ -169,16 +171,16 @@ const Header = ({ logoutModalRef }: { logoutModalRef: RefObject<ModalHandlers> }
                     <li className='nav-item ms-0 ms-lg-4 ms-xl-5 mt-4 mt-lg-0' {...dismissMenuProps}>
                         <NavLink
                             to={NavigationConstants.MY_SAVINGS}
-                            className={({ isActive }) => `navlink position-relative ${prizes && prizes.length > 0 && 'me-4 me-xl-3'} ${isActive ? 'active' : ''}`}
+                            className={({ isActive }) => `navlink position-relative ${prizesPendingLength && 'me-4 me-xl-3'} ${isActive ? 'active' : ''}`}
                             onClick={() => Firebase.logEvent(FirebaseConstants.ANALYTICS_EVENTS.MY_SAVINGS_CLICK)}
                         >
                             {I18n.t('mySavings.title')}
-                            {prizes && prizes.length > 0 && (
+                            {!!prizesPendingLength && (
                                 <div
                                     className='prize-dot position-absolute top-0 start-100 rounded-circle d-flex align-items-center justify-content-center'
                                     style={{ transform: 'translate(20%, -50%)' }}
                                 >
-                                    {prizes.length}
+                                    {prizesPendingLength}
                                 </div>
                             )}
                         </NavLink>
@@ -199,7 +201,7 @@ const Header = ({ logoutModalRef }: { logoutModalRef: RefObject<ModalHandlers> }
                             }
                         }}
                     >
-                        <img src={Assets.images.logout} />
+                        <img src={Assets.images.logout} alt='logout' />
                     </Button>
                 ) : null}
             </ul>
@@ -273,7 +275,7 @@ const Header = ({ logoutModalRef }: { logoutModalRef: RefObject<ModalHandlers> }
                                         }
                                     }}
                                 >
-                                    <img src={Assets.images.logout} />
+                                    <img src={Assets.images.logout} alt='logout' />
                                 </Button>
                             ) : null}
                             <button className='close-btn d-flex align-items-center justify-content-center' type='button' aria-label='Close burger menu' {...dismissMenuProps}>

diff --git a/src/components/Table/Table.scss b/src/components/Table/Table.scss
@@ -46,3 +46,17 @@
     font-size: 22px;
     vertical-align: middle;
 }
+
+.table.small-padding {
+    tbody tr td {
+        padding: 1rem 2px;
+    }
+
+    tbody tr td:first-child {
+        padding-left: 1.5rem;
+    }
+
+    tbody tr td:last-child {
+        padding-right: 1.5rem;
+    }
+}
diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
@@ -17,14 +17,15 @@ interface Props {
     };
     customPagination?: string;
     onPageChange?: (page: number) => void;
+    smallPadding?: boolean;
 }
-const Table = ({ children, customPagination, className, pagination, onPageChange, headers, responsive = true }: Props) => {
+const Table = ({ children, customPagination, className, pagination, onPageChange, headers, smallPadding, responsive = true }: Props) => {
     const limitLeft = headers ? headers.length / 2 : 0;
 
     return (
         <>
             <div className={`${responsive ? 'table-responsive' : ''} ${className}`}>
-                <table className='table table-borderless mb-0'>
+                <table className={`table table-borderless mb-0 ${smallPadding ? 'small-padding' : null}`}>
                     {headers && (
                         <thead>
                             <tr>

diff --git a/src/components/Tag/Tag.scss b/src/components/Tag/Tag.scss
@@ -0,0 +1,24 @@
+@import 'src/styles/main';
+
+.tag {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: $color-white;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    padding: 7px 12px;
+
+    &.success {
+        background-color: $color-success;
+    }
+    &.outline {
+        background-color: transparent;
+        border: 2px solid $color-primary;
+        color: $color-primary;
+    }
+    &.info {
+        background-color: $color-grey;
+    }
+}
diff --git a/src/components/Tag/Tag.tsx b/src/components/Tag/Tag.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+
+import { TagsConstants } from 'constant';
+import { I18n } from 'utils';
+import Assets from 'assets';
+import { Tooltip } from '../index';
+
+import './Tag.scss';
+
+interface IProps {
+    type: TagsConstants.Types;
+}
+
+const Tag = ({ type }: IProps) => {
+    let classNameType = '';
+    let wordType = '';
+
+    switch (type) {
+        case TagsConstants.Types.CLAIMED:
+            classNameType = 'success';
+            wordType = I18n.t('tags.claimed');
+            break;
+        case TagsConstants.Types.EXPIRED:
+            classNameType = 'info';
+            wordType = I18n.t('tags.expired');
+            break;
+        case TagsConstants.Types.UNCLAIMED:
+            classNameType = 'outline';
+            wordType = I18n.t('tags.unclaimed');
+            break;
+    }
+
+    return (
+        <div className={`tag rounded-pill ${classNameType}`}>
+            {wordType}
+            {type === TagsConstants.Types.EXPIRED && (
+                <span data-tooltip-id='expired-tag' data-tooltip-html={I18n.t('tags.expiredTooltip')} className='ms-2 mb-1'>
+                    <img src={Assets.images.infoWhite} alt='info' width={15} height={15} />
+                    <Tooltip id='expired-tag' />
+                </span>
+            )}
+        </div>
+    );
+};
+
+export default Tag;
diff --git a/src/components/Tooltip/Tooltip.scss b/src/components/Tooltip/Tooltip.scss
@@ -13,8 +13,8 @@
 .app-tooltip {
     font-size: 14px;
     color: $color-black;
-    
-    a {        
+
+    a {
         color: $color-black;
     }
 }
diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
-import { Tooltip as ReactTooltip } from 'react-tooltip';
+import { PlacesType, Tooltip as ReactTooltip } from 'react-tooltip';
 
 import './Tooltip.scss';
 
-const Tooltip = ({ id, delay }: { id: string; delay?: number }) => {
-    return <ReactTooltip id={id} clickable className='tooltip-light app-tooltip width-400' variant='light' delayHide={delay} />;
+const Tooltip = ({ id, delay, place }: { id: string; delay?: number; place?: PlacesType }) => {
+    return <ReactTooltip id={id} clickable className='tooltip-light app-tooltip width-400' place={place} variant='light' delayHide={delay} />;
 };
 
 export default Tooltip;
diff --git a/src/components/TransactionBatchProgress/TransactionBatchProgress.scss b/src/components/TransactionBatchProgress/TransactionBatchProgress.scss
@@ -0,0 +1,27 @@
+@import 'src/styles/main';
+
+.progress-card {
+    color: $color-white;
+    border: 2px solid $color-primary;
+    background-color: #5634de4d !important;
+    padding: 11px 16.5px;
+    position: relative;
+    overflow: hidden;
+    box-sizing: border-box;
+
+    .batch-card-info-icon {
+        filter: brightness(0) invert(1);
+    }
+
+    & > .card-progress {
+        position: absolute;
+        top: -2px;
+        left: -2px;
+        bottom: -2px;
+        border: 2px solid $color-primary;
+        border-radius: 12px;
+        background-color: $color-primary;
+
+        transition: width 0.3s ease-out;
+    }
+}
diff --git a/src/components/TransactionBatchProgress/TransactionBatchProgress.tsx b/src/components/TransactionBatchProgress/TransactionBatchProgress.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+
+import Assets from 'assets';
+import { I18n } from 'utils';
+
+import Card from '../Card/Card';
+import Tooltip from '../Tooltip/Tooltip';
+
+import './TransactionBatchProgress.scss';
+
+interface Props {
+    batch: number;
+    batchTotal: number;
+    className?: string;
+}
+
+const TransactionBatchProgress = ({ batch, batchTotal, className }: Props) => {
+    return (
+        <Card flat withoutPadding className={`d-flex flex-row justify-content-center progress-card ${className}`}>
+            <div className='card-progress' style={{ width: `calc(${(batch / batchTotal) * 100}% + 4px)` }} />
+            <span data-tooltip-id='batch-tooltip' data-tooltip-html={I18n.t('common.batchTooltip')} className='me-2'>
+                <img className='batch-card-info-icon' src={Assets.images.info} alt='info' />
+                <Tooltip id='batch-tooltip' delay={2000} />
+            </span>
+            <div style={{ zIndex: 2 }}>{I18n.t('common.batchProgress', { count: batch, total: batchTotal })}</div>
+        </Card>
+    );
+};
+
+export default TransactionBatchProgress;
diff --git a/src/components/index.ts b/src/components/index.ts
@@ -19,6 +19,8 @@ export { default as PoolSelect } from './PoolSelect/PoolSelect';
 export { default as Tooltip } from './Tooltip/Tooltip';
 export { default as BigWinnerCard } from './BigWinnerCard/BigWinnerCard';
 export { default as Pagination } from './Pagination/Pagination';
-export { default as Leaderboard } from './Leaderboard/Leaderboard';
+export { default as TransactionBatchProgress } from './TransactionBatchProgress/TransactionBatchProgress';
+export { default as Tag } from './Tag/Tag';
 
+export { default as Leaderboard } from './Leaderboard/Leaderboard';
 export * from './ToastContent/ToastContent';
diff --git a/src/constant/index.ts b/src/constant/index.ts
@@ -4,6 +4,8 @@ import * as NavigationConstants from './navigation';
 import * as DenomsConstants from './denoms';
 import * as LandingConstants from './landing';
 import * as PoolsConstants from './pools';
+import * as PrizesConstants from './prizes';
+import * as TagsConstants from './tags';
 
 export const LUM_COINGECKO_ID = 'lum-network';
 export const LUM_WALLET_LINK = 'https://wallet.lum.network';
@@ -12,4 +14,4 @@ export const TERMS_VERSION = 1;
 export * from './wallet';
 export * from './breakpoints';
 
-export { ApiConstants, FirebaseConstants, DenomsConstants, NavigationConstants, LandingConstants, PoolsConstants };
+export { ApiConstants, FirebaseConstants, DenomsConstants, NavigationConstants, LandingConstants, PoolsConstants, PrizesConstants, TagsConstants };
diff --git a/src/constant/prizes.ts b/src/constant/prizes.ts
@@ -0,0 +1,5 @@
+export enum PrizeState {
+    CLAIMED = 'claimed',
+    EXPIRED = 'expired',
+    PENDING = 'pending',
+}
diff --git a/src/constant/tags.ts b/src/constant/tags.ts
@@ -0,0 +1,9 @@
+export enum Types {
+    CLAIMED = 'claimed',
+    UNCLAIMED = 'unclaimed',
+    EXPIRED = 'expired',
+    SUCCESS = 'success',
+    UNBONDING = 'unbonding',
+    DEPOSIT = 'deposit',
+    ERROR = 'error',
+}
diff --git a/src/layout/MainLayout/MainLayout.scss b/src/layout/MainLayout/MainLayout.scss
@@ -14,21 +14,16 @@
 
 .main-layout {
     display: flex;
+    min-height: 100vh;
     padding-top: 130px;
     padding-bottom: 60px;
-    min-height: 100vh;
     background-color: $color-background;
     background-image: url('../../assets/images/star.svg'), url('../../assets/images/star.svg'), url('../../assets/images/star.svg'), url('../../assets/images/star.svg'), url('../../assets/images/star.svg'), url('../../assets/images/star.svg'), url('../../assets/images/star.svg'), url('../../assets/images/star.svg'), url('../../assets/images/star.svg'), url('../../assets/images/star.svg'), url('../../assets/images/star.svg'), url('../../assets/images/star.svg'), url('../../assets/images/star.svg'), url('../../assets/images/star.svg'), url('../../assets/images/star.svg'), url('../../assets/images/star.svg'), url('../../assets/images/star.svg'), url('../../assets/images/star.svg'), url('../../assets/images/star.svg'), url('../../assets/images/star.svg');
     background-position: percentage(calc(random(100) / 100)) percentage(calc(random(100) / 100)), percentage(calc(random(100) / 100)) percentage(calc(random(100) / 100)), percentage(calc(random(100) / 100)) percentage(calc(random(100) / 100)), percentage(calc(random(100) / 100)) percentage(calc(random(100) / 100)), percentage(calc(random(100) / 100)) percentage(calc(random(100) / 100)), percentage(calc(random(100) / 100)) percentage(calc(random(100) / 100)), percentage(calc(random(100) / 100)) percentage(calc(random(100) / 100)), percentage(calc(random(100) / 100)) percentage(calc(random(100) / 100)), percentage(calc(random(100) / 100)) percentage(calc(random(100) / 100)), percentage(calc(random(100) / 100)) percentage(calc(random(100) / 100)), percentage(calc(random(100) / 100)) percentage(calc(random(100) / 100)), percentage(calc(random(100) / 100)) percentage(calc(random(100) / 100)), percentage(calc(random(100) / 100)) percentage(calc(random(100) / 100)), percentage(calc(random(100) / 100)) percentage(calc(random(100) / 100)), percentage(calc(random(100) / 100)) percentage(calc(random(100) / 100)), percentage(calc(random(100) / 100)) percentage(calc(random(100) / 100)), percentage(calc(random(100) / 100)) percentage(calc(random(100) / 100)), percentage(calc(random(100) / 100)) percentage(calc(random(100) / 100)), percentage(calc(random(100) / 100)) percentage(calc(random(100) / 100)), percentage(calc(random(100) / 100)) percentage(calc(random(100) / 100));
     background-repeat: no-repeat no-repeat;
-    overflow: hidden;
     white-space: pre-line;
 }
 
-.fill {
-    flex: 1 1 auto;
-}
-
 #get-keplr-modal,
 #choose-wallet-modal {
     .keplr-icon {

diff --git a/src/layout/MainLayout/MainLayout.tsx b/src/layout/MainLayout/MainLayout.tsx
@@ -121,25 +121,21 @@ const MainLayout = () => {
     };
 
     return (
-        <>
+        <div className='main-layout'>
             <Header logoutModalRef={logoutModalRef} />
-            <div className='main-layout'>
-                <div className='custom-container container fill'>
-                    <main className='h-100'>
-                        {appLoading ? (
-                            <div className='d-flex justify-content-center align-items-center h-75'>
-                                <div className='spinner-border' style={{ width: '3rem', height: '3rem', color: '#5634DE' }} role='status'>
-                                    <span className='visually-hidden'>{I18n.t('common.loading')}</span>
-                                </div>
-                            </div>
-                        ) : (
-                            <Outlet />
-                        )}
-                        <RouteListener location={location} />
-                        <ScrollRestoration />
-                    </main>
-                </div>
-            </div>
+            <main className='custom-container container'>
+                {appLoading ? (
+                    <div className='d-flex justify-content-center align-items-center h-75'>
+                        <div className='spinner-border' style={{ width: '3rem', height: '3rem', color: '#5634DE' }} role='status'>
+                            <span className='visually-hidden'>{I18n.t('common.loading')}</span>
+                        </div>
+                    </div>
+                ) : (
+                    <Outlet />
+                )}
+                <RouteListener location={location} />
+                <ScrollRestoration />
+            </main>
             <Modal id='get-keplr-modal' contentClassName='bg-white' withCloseButton={false}>
                 <img src={Assets.images.info} alt='info' width={42} height={42} />
                 <h3 className='my-4'>{I18n.t('keplrDownloadModal.title')}</h3>
@@ -509,7 +505,7 @@ const MainLayout = () => {
                     </Button>
                 </div>
             </Modal>
-        </>
+        </div>
     );
 };