Skip to content

Commit 49e3d6a

Browse files
danielsimaotomjeatt
danielsimao
and
tomjeatt
authored
fix: add rewards alert and remove insights (#1607)
* fix: add rewards alert and remove insights * fix: theme * Update src/pages/Pools/Pools.tsx Co-authored-by: tomjeatt <40243778+tomjeatt@users.noreply.github.com> * feat: move alert --------- Co-authored-by: tomjeatt <40243778+tomjeatt@users.noreply.github.com>
1 parent 035ad96 commit 49e3d6a

10 files changed

Lines changed: 56 additions & 96 deletions

File tree

‎src/component-library/Alert/Alert.style.tsx‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
import styled from 'styled-components';
22

3+
import { InformationCircle } from '@/assets/icons';
34
import { ReactComponent as WarningIcon } from '@/assets/img/icons/exclamation-triangle.svg';
45

56
import { Flex } from '../Flex';
67
import { theme } from '../theme';
7-
import { Status } from '../utils/prop-types';
8+
import { AlertStatus } from '../utils/prop-types';
89

910
interface StyledAlertProps {
10-
$status: Status;
11+
$status: AlertStatus;
1112
}
1213

1314
const StyledAlert = styled(Flex)<StyledAlertProps>`
@@ -25,4 +26,11 @@ const StyledWarningIcon = styled(WarningIcon)<StyledAlertProps>`
2526
flex-shrink: 0;
2627
`;
2728

28-
export { StyledAlert, StyledWarningIcon };
29+
const StyledInformationCircle = styled(InformationCircle)<StyledAlertProps>`
30+
color: ${({ $status }) => theme.alert.status[$status]};
31+
width: ${theme.spacing.spacing5};
32+
height: ${theme.spacing.spacing5};
33+
flex-shrink: 0;
34+
`;
35+
36+
export { StyledAlert, StyledInformationCircle, StyledWarningIcon };

‎src/component-library/Alert/Alert.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { FlexProps } from '../Flex';
2-
import { Status } from '../utils/prop-types';
3-
import { StyledAlert, StyledWarningIcon } from './Alert.style';
2+
import { AlertStatus } from '../utils/prop-types';
3+
import { StyledAlert, StyledInformationCircle, StyledWarningIcon } from './Alert.style';
44

55
type Props = {
6-
status?: Status;
6+
status?: AlertStatus;
77
};
88

99
type InheritAttrs = Omit<FlexProps, keyof Props>;
@@ -12,7 +12,7 @@ type AlertProps = Props & InheritAttrs;
1212

1313
const Alert = ({ status = 'success', children, ...props }: AlertProps): JSX.Element => (
1414
<StyledAlert $status={status} role='alert' gap='spacing4' alignItems='center' {...props}>
15-
<StyledWarningIcon $status={status} />
15+
{status === 'info' ? <StyledInformationCircle $status={status} /> : <StyledWarningIcon $status={status} />}
1616
<div>{children}</div>
1717
</StyledAlert>
1818
);

‎src/component-library/theme/theme.base.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,8 @@
6969
--colors-success-dark: #61ff00;
7070
--colors-success-darker: #54ac1a;
7171
--colors-success-20: rgba(162, 231, 94, 0.2);
72+
--colors-info: #e1e7f0;
73+
--colors-info-dark: #075abc;
7274

7375
--text-xs: 0.75rem;
7476
--text-s: 0.875rem;

‎src/component-library/theme/theme.interlay.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -101,4 +101,7 @@
101101
--colors-slider-thumb-hover-bg: var(--color-light-grey);
102102
--colors-slider-track-bg: #dee3f5;
103103
--colors-slider-track-fill-bg: var(--colors-light-blue);
104+
/* Alert */
105+
--colors-alert-info-border: var(--colors-light-blue);
106+
--colors-alert-info-bg: #dee3f5;
104107
}

‎src/component-library/theme/theme.kintsugi.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,4 +105,7 @@
105105
--colors-slider-thumb-hover-bg: var(--colors-dark-blue);
106106
--colors-slider-track-bg: var(--colors-mid-blue);
107107
--colors-slider-track-fill-bg: var(--colors-yellow);
108+
/* Alert */
109+
--colors-alert-info-border: var(--colors-yellow);
110+
--colors-alert-info-bg: var(--colors-dark-blue);
108111
}

‎src/component-library/theme/theme.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -234,12 +234,14 @@ const theme = {
234234
status: {
235235
error: 'var(--colors-error)',
236236
warning: 'var(--colors-warning)',
237-
success: 'var(--colors-success-darker)'
237+
success: 'var(--colors-success-darker)',
238+
info: 'var(--colors-alert-info-border)'
238239
},
239240
bg: {
240241
error: 'var(--colors-error-20)',
241242
warning: 'var(--colors-warning-light-20)',
242-
success: 'var(--colors-success-20)'
243+
success: 'var(--colors-success-20)',
244+
info: 'var(--colors-alert-info-bg)'
243245
}
244246
},
245247
transition: {

‎src/component-library/utils/prop-types.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,8 @@ export type CTASizes = 'x-small' | 'small' | 'medium' | 'large';
6161

6262
export type Status = typeof status[number];
6363

64+
export type AlertStatus = typeof status[number] | 'info';
65+
6466
export type Sizes = typeof sizes[number];
6567

6668
export type Colors = typeof colors[number];

‎src/pages/Pools/Pools.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1+
import { Alert } from '@/component-library';
12
import { MainContainer } from '@/components';
3+
import { GOVERNANCE_TOKEN } from '@/config/relay-chains';
24
import { useGetAccountPools } from '@/hooks/api/amm/use-get-account-pools';
35
import { useGetLiquidityPools } from '@/hooks/api/amm/use-get-liquidity-pools';
46
import useAccountId from '@/hooks/use-account-id';
@@ -20,6 +22,11 @@ const Pools = (): JSX.Element => {
2022

2123
return (
2224
<MainContainer>
25+
<Alert status='info'>
26+
Please be aware that there are currently no {GOVERNANCE_TOKEN.ticker} incentives being provided to the pools.
27+
The APR displayed represents the earnings based solely on trading fees. These earnings are automatically
28+
reinvested into your positions.
29+
</Alert>
2330
<PoolsInsights pools={pools} accountPoolsData={accountPoolsData} refetch={refetchAccountPools} />
2431
<PoolsTables pools={pools} accountPools={accountPositions} />
2532
</MainContainer>

‎src/pages/Pools/components/PoolsInsights/PoolsInsights.tsx‎

Lines changed: 16 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,13 @@
11
import { LiquidityPool } from '@interlay/interbtc-api';
22
import Big from 'big.js';
3-
import { useEffect, useRef, useState } from 'react';
3+
import { useEffect, useState } from 'react';
44
import { useTranslation } from 'react-i18next';
55

66
import { formatUSD } from '@/common/utils/utils';
7-
import { Card, CTA, Dl, DlGroup, Flex, Modal, ModalBody, ModalFooter, ModalHeader } from '@/component-library';
8-
import {
9-
AuthCTA,
10-
TransactionDetails,
11-
TransactionDetailsDd,
12-
TransactionDetailsDt,
13-
TransactionDetailsGroup,
14-
TransactionFeeDetails
15-
} from '@/components';
7+
import { Card, Dl, DlGroup } from '@/component-library';
168
import { AccountPoolsData } from '@/hooks/api/amm/use-get-account-pools';
179
import { useGetPrices } from '@/hooks/api/use-get-prices';
1810
import { Transaction, useTransaction } from '@/hooks/transaction';
19-
import { isTransactionFormDisabled } from '@/hooks/transaction/utils/form';
2011
import {
2112
ClaimRewardsPoolFormData,
2213
claimRewardsPoolSchema,
@@ -26,7 +17,6 @@ import {
2617
import { calculateAccountLiquidityUSD, calculateTotalLiquidityUSD } from '@/utils/helpers/pool';
2718

2819
import { StyledDd, StyledDt } from './PoolsInsights.style';
29-
import { calculateClaimableFarmingRewardUSD } from './utils';
3020

3121
type PoolsInsightsProps = {
3222
pools: LiquidityPool[];
@@ -38,7 +28,6 @@ const PoolsInsights = ({ pools, accountPoolsData, refetch }: PoolsInsightsProps)
3828
const { t } = useTranslation();
3929
const prices = useGetPrices();
4030
const [isOpen, setOpen] = useState(false);
41-
const overlappingModalRef = useRef<HTMLDivElement>(null);
4231

4332
const transaction = useTransaction(Transaction.AMM_CLAIM_REWARDS, {
4433
onSuccess: refetch,
@@ -72,8 +61,6 @@ const PoolsInsights = ({ pools, accountPoolsData, refetch }: PoolsInsightsProps)
7261
// eslint-disable-next-line react-hooks/exhaustive-deps
7362
}, [isOpen]);
7463

75-
const handleCloseModal = () => setOpen(false);
76-
7764
const accountPositions = accountPoolsData?.positions;
7865

7966
const supplyAmountUSD = accountPositions?.reduce((acc, curr) => {
@@ -97,75 +84,21 @@ const PoolsInsights = ({ pools, accountPoolsData, refetch }: PoolsInsightsProps)
9784

9885
const totalLiquidityUSD = formatUSD(totalLiquidity?.toNumber() || 0, { compact: true });
9986

100-
const totalClaimableRewardUSD = calculateClaimableFarmingRewardUSD(accountPoolsData?.claimableRewards, prices);
101-
const totalClaimableRewardUSDLabel = formatUSD(totalClaimableRewardUSD, { compact: true });
102-
103-
const handleClickClaimRewards = () => setOpen(true);
104-
105-
const hasClaimableRewards = totalClaimableRewardUSD > 0;
106-
107-
const isBtnDisabled = isTransactionFormDisabled(form, transaction.fee);
108-
10987
return (
110-
<>
111-
<Dl wrap direction='row'>
112-
<Card flex='1'>
113-
<DlGroup direction='column' alignItems='flex-start' gap='spacing1'>
114-
<StyledDt color='primary'>{t('supply_balance')}</StyledDt>
115-
<StyledDd color='secondary'>{supplyBalanceLabel}</StyledDd>
116-
</DlGroup>
117-
</Card>
118-
<Card flex='1'>
119-
<DlGroup direction='column' alignItems='flex-start' gap='spacing1'>
120-
<StyledDt color='primary'>{t('total_liquidity')}</StyledDt>
121-
<StyledDd color='secondary'>{totalLiquidityUSD}</StyledDd>
122-
</DlGroup>
123-
</Card>
124-
<Card direction='row' flex='1' gap='spacing2' alignItems='center' justifyContent='space-between'>
125-
<DlGroup direction='column' alignItems='flex-start' gap='spacing1'>
126-
<StyledDt color='primary'>{t('rewards')}</StyledDt>
127-
<StyledDd color='secondary'>{totalClaimableRewardUSDLabel}</StyledDd>
128-
</DlGroup>
129-
{hasClaimableRewards && (
130-
<CTA onPress={handleClickClaimRewards} loading={transaction.isLoading}>
131-
Claim
132-
</CTA>
133-
)}
134-
</Card>
135-
</Dl>
136-
<Modal
137-
isOpen={isOpen}
138-
onClose={handleCloseModal}
139-
// does not close overlapped modal when overlapping modal is closed
140-
shouldCloseOnInteractOutside={(el) => !overlappingModalRef.current?.contains(el)}
141-
>
142-
<ModalHeader>Claim Rewards</ModalHeader>
143-
<ModalBody>
144-
<TransactionDetails>
145-
<TransactionDetailsGroup>
146-
<TransactionDetailsDt>Amount</TransactionDetailsDt>
147-
<TransactionDetailsDd>{totalClaimableRewardUSDLabel}</TransactionDetailsDd>
148-
</TransactionDetailsGroup>
149-
</TransactionDetails>
150-
</ModalBody>
151-
<ModalFooter>
152-
<form onSubmit={form.handleSubmit}>
153-
<Flex direction='column' gap='spacing4'>
154-
<TransactionFeeDetails
155-
fee={transaction.fee}
156-
selectProps={{
157-
...form.getSelectFieldProps(POOL_CLAIM_REWARDS_FEE_TOKEN_FIELD),
158-
modalRef: overlappingModalRef
159-
}}
160-
/>
161-
<AuthCTA type='submit' size='large' disabled={isBtnDisabled}>
162-
{t('claim_rewards')}
163-
</AuthCTA>
164-
</Flex>
165-
</form>
166-
</ModalFooter>
167-
</Modal>
168-
</>
88+
<Dl wrap direction='row'>
89+
<Card flex='1'>
90+
<DlGroup direction='column' alignItems='flex-start' gap='spacing1'>
91+
<StyledDt color='primary'>{t('supply_balance')}</StyledDt>
92+
<StyledDd color='secondary'>{supplyBalanceLabel}</StyledDd>
93+
</DlGroup>
94+
</Card>
95+
<Card flex='1'>
96+
<DlGroup direction='column' alignItems='flex-start' gap='spacing1'>
97+
<StyledDt color='primary'>{t('total_liquidity')}</StyledDt>
98+
<StyledDd color='secondary'>{totalLiquidityUSD}</StyledDd>
99+
</DlGroup>
100+
</Card>
101+
</Dl>
169102
);
170103
};
171104

‎src/pages/Staking/components/StakingAccountDetails/StakingAccountDetails.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -53,26 +53,26 @@ const StakingAccountDetails = ({
5353
<Dl direction='column' gap='spacing2'>
5454
<DlGroup direction='column' alignItems='flex-start' gap='spacing1'>
5555
<Dt size='xs'>{t('staking_page.staked_ticker', { ticker: GOVERNANCE_TOKEN.ticker })}</Dt>
56-
<Dd size='s' color='secondary'>
56+
<Dd weight='medium' color='secondary'>
5757
{balance?.toHuman() || 0}
5858
</Dd>
5959
</DlGroup>
6060
<DlGroup direction='column' alignItems='flex-start' gap='spacing1'>
6161
<Dt size='xs'>{t('ticker_balance', { ticker: VOTE_GOVERNANCE_TOKEN.ticker })}</Dt>
62-
<Dd size='s' color='secondary'>
62+
<Dd weight='medium' color='secondary'>
6363
{votingBalance?.toHuman() || 0}
6464
</Dd>
6565
</DlGroup>
6666
<DlGroup direction='column' alignItems='flex-start' gap='spacing1'>
6767
<Dt size='xs'>{t('staking_page.projected_ticker_rewards', { ticker: GOVERNANCE_TOKEN.ticker })}</Dt>
68-
<Dd size='s' color='secondary'>
68+
<Dd weight='medium' color='secondary'>
6969
{projected?.amount.toHuman() || 0}
7070
</Dd>
7171
</DlGroup>
7272
<Divider color='default' marginTop='spacing1' marginBottom='spacing1' />
7373
<DlGroup direction='column' alignItems='flex-start' gap='spacing1'>
7474
<Dt size='xs'>{t('claimable_rewards')}</Dt>
75-
<Dd size='s'>
75+
<Dd weight='medium'>
7676
{claimableRewards?.toHuman() || 0} {GOVERNANCE_TOKEN.ticker}
7777
</Dd>
7878
</DlGroup>

0 commit comments

Comments
 (0)