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 <[email protected]> * feat: move alert --------- Co-authored-by: tomjeatt <[email protected]>
interlay · Dec 1, 2023 · 49e3d6a · 49e3d6a · vercel · Dec 1, 2023
1 parent 035ad96
commit 49e3d6a
Show file tree

Hide file tree

Showing 10 changed files with 56 additions and 96 deletions.
diff --git a/src/component-library/Alert/Alert.style.tsx b/src/component-library/Alert/Alert.style.tsx
@@ -1,13 +1,14 @@
 import styled from 'styled-components';
 
+import { InformationCircle } from '@/assets/icons';
 import { ReactComponent as WarningIcon } from '@/assets/img/icons/exclamation-triangle.svg';
 
 import { Flex } from '../Flex';
 import { theme } from '../theme';
-import { Status } from '../utils/prop-types';
+import { AlertStatus } from '../utils/prop-types';
 
 interface StyledAlertProps {
-  $status: Status;
+  $status: AlertStatus;
 }
 
 const StyledAlert = styled(Flex)<StyledAlertProps>`
@@ -25,4 +26,11 @@ const StyledWarningIcon = styled(WarningIcon)<StyledAlertProps>`
   flex-shrink: 0;
 `;
 
-export { StyledAlert, StyledWarningIcon };
+const StyledInformationCircle = styled(InformationCircle)<StyledAlertProps>`
+  color: ${({ $status }) => theme.alert.status[$status]};
+  width: ${theme.spacing.spacing5};
+  height: ${theme.spacing.spacing5};
+  flex-shrink: 0;
+`;
+
+export { StyledAlert, StyledInformationCircle, StyledWarningIcon };
diff --git a/src/component-library/Alert/Alert.tsx b/src/component-library/Alert/Alert.tsx
@@ -1,9 +1,9 @@
 import { FlexProps } from '../Flex';
-import { Status } from '../utils/prop-types';
-import { StyledAlert, StyledWarningIcon } from './Alert.style';
+import { AlertStatus } from '../utils/prop-types';
+import { StyledAlert, StyledInformationCircle, StyledWarningIcon } from './Alert.style';
 
 type Props = {
-  status?: Status;
+  status?: AlertStatus;
 };
 
 type InheritAttrs = Omit<FlexProps, keyof Props>;
@@ -12,7 +12,7 @@ type AlertProps = Props & InheritAttrs;
 
 const Alert = ({ status = 'success', children, ...props }: AlertProps): JSX.Element => (
   <StyledAlert $status={status} role='alert' gap='spacing4' alignItems='center' {...props}>
-    <StyledWarningIcon $status={status} />
+    {status === 'info' ? <StyledInformationCircle $status={status} /> : <StyledWarningIcon $status={status} />}
     <div>{children}</div>
   </StyledAlert>
 );

diff --git a/src/component-library/theme/theme.base.css b/src/component-library/theme/theme.base.css
@@ -69,6 +69,8 @@
   --colors-success-dark: #61ff00;
   --colors-success-darker: #54ac1a;
   --colors-success-20: rgba(162, 231, 94, 0.2);
+  --colors-info: #e1e7f0;
+  --colors-info-dark: #075abc;
 
   --text-xs: 0.75rem;
   --text-s: 0.875rem;

diff --git a/src/component-library/theme/theme.interlay.css b/src/component-library/theme/theme.interlay.css
@@ -101,4 +101,7 @@
   --colors-slider-thumb-hover-bg: var(--color-light-grey);
   --colors-slider-track-bg: #dee3f5;
   --colors-slider-track-fill-bg: var(--colors-light-blue);
+  /* Alert */
+  --colors-alert-info-border: var(--colors-light-blue);
+  --colors-alert-info-bg: #dee3f5;
 }
diff --git a/src/component-library/theme/theme.kintsugi.css b/src/component-library/theme/theme.kintsugi.css
@@ -105,4 +105,7 @@
   --colors-slider-thumb-hover-bg: var(--colors-dark-blue);
   --colors-slider-track-bg: var(--colors-mid-blue);
   --colors-slider-track-fill-bg: var(--colors-yellow);
+  /* Alert */
+  --colors-alert-info-border: var(--colors-yellow);
+  --colors-alert-info-bg: var(--colors-dark-blue);
 }
diff --git a/src/component-library/theme/theme.ts b/src/component-library/theme/theme.ts
@@ -234,12 +234,14 @@ const theme = {
     status: {
       error: 'var(--colors-error)',
       warning: 'var(--colors-warning)',
-      success: 'var(--colors-success-darker)'
+      success: 'var(--colors-success-darker)',
+      info: 'var(--colors-alert-info-border)'
     },
     bg: {
       error: 'var(--colors-error-20)',
       warning: 'var(--colors-warning-light-20)',
-      success: 'var(--colors-success-20)'
+      success: 'var(--colors-success-20)',
+      info: 'var(--colors-alert-info-bg)'
     }
   },
   transition: {

diff --git a/src/component-library/utils/prop-types.ts b/src/component-library/utils/prop-types.ts
@@ -61,6 +61,8 @@ export type CTASizes = 'x-small' | 'small' | 'medium' | 'large';
 
 export type Status = typeof status[number];
 
+export type AlertStatus = typeof status[number] | 'info';
+
 export type Sizes = typeof sizes[number];
 
 export type Colors = typeof colors[number];

diff --git a/src/pages/Pools/Pools.tsx b/src/pages/Pools/Pools.tsx
@@ -1,4 +1,6 @@
+import { Alert } from '@/component-library';
 import { MainContainer } from '@/components';
+import { GOVERNANCE_TOKEN } from '@/config/relay-chains';
 import { useGetAccountPools } from '@/hooks/api/amm/use-get-account-pools';
 import { useGetLiquidityPools } from '@/hooks/api/amm/use-get-liquidity-pools';
 import useAccountId from '@/hooks/use-account-id';
@@ -20,6 +22,11 @@ const Pools = (): JSX.Element => {
 
   return (
     <MainContainer>
+      <Alert status='info'>
+        Please be aware that there are currently no {GOVERNANCE_TOKEN.ticker} incentives being provided to the pools.
+        The APR displayed represents the earnings based solely on trading fees. These earnings are automatically
+        reinvested into your positions.
+      </Alert>
       <PoolsInsights pools={pools} accountPoolsData={accountPoolsData} refetch={refetchAccountPools} />
       <PoolsTables pools={pools} accountPools={accountPositions} />
     </MainContainer>

diff --git a/src/pages/Pools/components/PoolsInsights/PoolsInsights.tsx b/src/pages/Pools/components/PoolsInsights/PoolsInsights.tsx
@@ -1,22 +1,13 @@
 import { LiquidityPool } from '@interlay/interbtc-api';
 import Big from 'big.js';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { formatUSD } from '@/common/utils/utils';
-import { Card, CTA, Dl, DlGroup, Flex, Modal, ModalBody, ModalFooter, ModalHeader } from '@/component-library';
-import {
-  AuthCTA,
-  TransactionDetails,
-  TransactionDetailsDd,
-  TransactionDetailsDt,
-  TransactionDetailsGroup,
-  TransactionFeeDetails
-} from '@/components';
+import { Card, Dl, DlGroup } from '@/component-library';
 import { AccountPoolsData } from '@/hooks/api/amm/use-get-account-pools';
 import { useGetPrices } from '@/hooks/api/use-get-prices';
 import { Transaction, useTransaction } from '@/hooks/transaction';
-import { isTransactionFormDisabled } from '@/hooks/transaction/utils/form';
 import {
   ClaimRewardsPoolFormData,
   claimRewardsPoolSchema,
@@ -26,7 +17,6 @@ import {
 import { calculateAccountLiquidityUSD, calculateTotalLiquidityUSD } from '@/utils/helpers/pool';
 
 import { StyledDd, StyledDt } from './PoolsInsights.style';
-import { calculateClaimableFarmingRewardUSD } from './utils';
 
 type PoolsInsightsProps = {
   pools: LiquidityPool[];
@@ -38,7 +28,6 @@ const PoolsInsights = ({ pools, accountPoolsData, refetch }: PoolsInsightsProps)
   const { t } = useTranslation();
   const prices = useGetPrices();
   const [isOpen, setOpen] = useState(false);
-  const overlappingModalRef = useRef<HTMLDivElement>(null);
 
   const transaction = useTransaction(Transaction.AMM_CLAIM_REWARDS, {
     onSuccess: refetch,
@@ -72,8 +61,6 @@ const PoolsInsights = ({ pools, accountPoolsData, refetch }: PoolsInsightsProps)
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isOpen]);
 
-  const handleCloseModal = () => setOpen(false);
-
   const accountPositions = accountPoolsData?.positions;
 
   const supplyAmountUSD = accountPositions?.reduce((acc, curr) => {
@@ -97,75 +84,21 @@ const PoolsInsights = ({ pools, accountPoolsData, refetch }: PoolsInsightsProps)
 
   const totalLiquidityUSD = formatUSD(totalLiquidity?.toNumber() || 0, { compact: true });
 
-  const totalClaimableRewardUSD = calculateClaimableFarmingRewardUSD(accountPoolsData?.claimableRewards, prices);
-  const totalClaimableRewardUSDLabel = formatUSD(totalClaimableRewardUSD, { compact: true });
-
-  const handleClickClaimRewards = () => setOpen(true);
-
-  const hasClaimableRewards = totalClaimableRewardUSD > 0;
-
-  const isBtnDisabled = isTransactionFormDisabled(form, transaction.fee);
-
   return (
-    <>
-      <Dl wrap direction='row'>
-        <Card flex='1'>
-          <DlGroup direction='column' alignItems='flex-start' gap='spacing1'>
-            <StyledDt color='primary'>{t('supply_balance')}</StyledDt>
-            <StyledDd color='secondary'>{supplyBalanceLabel}</StyledDd>
-          </DlGroup>
-        </Card>
-        <Card flex='1'>
-          <DlGroup direction='column' alignItems='flex-start' gap='spacing1'>
-            <StyledDt color='primary'>{t('total_liquidity')}</StyledDt>
-            <StyledDd color='secondary'>{totalLiquidityUSD}</StyledDd>
-          </DlGroup>
-        </Card>
-        <Card direction='row' flex='1' gap='spacing2' alignItems='center' justifyContent='space-between'>
-          <DlGroup direction='column' alignItems='flex-start' gap='spacing1'>
-            <StyledDt color='primary'>{t('rewards')}</StyledDt>
-            <StyledDd color='secondary'>{totalClaimableRewardUSDLabel}</StyledDd>
-          </DlGroup>
-          {hasClaimableRewards && (
-            <CTA onPress={handleClickClaimRewards} loading={transaction.isLoading}>
-              Claim
-            </CTA>
-          )}
-        </Card>
-      </Dl>
-      <Modal
-        isOpen={isOpen}
-        onClose={handleCloseModal}
-        // does not close overlapped modal when overlapping modal is closed
-        shouldCloseOnInteractOutside={(el) => !overlappingModalRef.current?.contains(el)}
-      >
-        <ModalHeader>Claim Rewards</ModalHeader>
-        <ModalBody>
-          <TransactionDetails>
-            <TransactionDetailsGroup>
-              <TransactionDetailsDt>Amount</TransactionDetailsDt>
-              <TransactionDetailsDd>{totalClaimableRewardUSDLabel}</TransactionDetailsDd>
-            </TransactionDetailsGroup>
-          </TransactionDetails>
-        </ModalBody>
-        <ModalFooter>
-          <form onSubmit={form.handleSubmit}>
-            <Flex direction='column' gap='spacing4'>
-              <TransactionFeeDetails
-                fee={transaction.fee}
-                selectProps={{
-                  ...form.getSelectFieldProps(POOL_CLAIM_REWARDS_FEE_TOKEN_FIELD),
-                  modalRef: overlappingModalRef
-                }}
-              />
-              <AuthCTA type='submit' size='large' disabled={isBtnDisabled}>
-                {t('claim_rewards')}
-              </AuthCTA>
-            </Flex>
-          </form>
-        </ModalFooter>
-      </Modal>
-    </>
+    <Dl wrap direction='row'>
+      <Card flex='1'>
+        <DlGroup direction='column' alignItems='flex-start' gap='spacing1'>
+          <StyledDt color='primary'>{t('supply_balance')}</StyledDt>
+          <StyledDd color='secondary'>{supplyBalanceLabel}</StyledDd>
+        </DlGroup>
+      </Card>
+      <Card flex='1'>
+        <DlGroup direction='column' alignItems='flex-start' gap='spacing1'>
+          <StyledDt color='primary'>{t('total_liquidity')}</StyledDt>
+          <StyledDd color='secondary'>{totalLiquidityUSD}</StyledDd>
+        </DlGroup>
+      </Card>
+    </Dl>
   );
 };
 

diff --git a/src/pages/Staking/components/StakingAccountDetails/StakingAccountDetails.tsx b/src/pages/Staking/components/StakingAccountDetails/StakingAccountDetails.tsx
@@ -53,26 +53,26 @@ const StakingAccountDetails = ({
         <Dl direction='column' gap='spacing2'>
           <DlGroup direction='column' alignItems='flex-start' gap='spacing1'>
             <Dt size='xs'>{t('staking_page.staked_ticker', { ticker: GOVERNANCE_TOKEN.ticker })}</Dt>
-            <Dd size='s' color='secondary'>
+            <Dd weight='medium' color='secondary'>
               {balance?.toHuman() || 0}
             </Dd>
           </DlGroup>
           <DlGroup direction='column' alignItems='flex-start' gap='spacing1'>
             <Dt size='xs'>{t('ticker_balance', { ticker: VOTE_GOVERNANCE_TOKEN.ticker })}</Dt>
-            <Dd size='s' color='secondary'>
+            <Dd weight='medium' color='secondary'>
               {votingBalance?.toHuman() || 0}
             </Dd>
           </DlGroup>
           <DlGroup direction='column' alignItems='flex-start' gap='spacing1'>
             <Dt size='xs'>{t('staking_page.projected_ticker_rewards', { ticker: GOVERNANCE_TOKEN.ticker })}</Dt>
-            <Dd size='s' color='secondary'>
+            <Dd weight='medium' color='secondary'>
               {projected?.amount.toHuman() || 0}
             </Dd>
           </DlGroup>
           <Divider color='default' marginTop='spacing1' marginBottom='spacing1' />
           <DlGroup direction='column' alignItems='flex-start' gap='spacing1'>
             <Dt size='xs'>{t('claimable_rewards')}</Dt>
-            <Dd size='s'>
+            <Dd weight='medium'>
               {claimableRewards?.toHuman() || 0} {GOVERNANCE_TOKEN.ticker}
             </Dd>
           </DlGroup>