diff --git a/src/component-library/Alert/Alert.style.tsx b/src/component-library/Alert/Alert.style.tsx index 2940f4b8b6..f5e891ce8d 100644 --- 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)` @@ -25,4 +26,11 @@ const StyledWarningIcon = styled(WarningIcon)` flex-shrink: 0; `; -export { StyledAlert, StyledWarningIcon }; +const StyledInformationCircle = styled(InformationCircle)` + 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 index aac2b7c679..d0dd33accc 100644 --- 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; @@ -12,7 +12,7 @@ type AlertProps = Props & InheritAttrs; const Alert = ({ status = 'success', children, ...props }: AlertProps): JSX.Element => ( - + {status === 'info' ? : }
{children}
); diff --git a/src/component-library/theme/theme.base.css b/src/component-library/theme/theme.base.css index 801f09e550..837a0c76c3 100644 --- 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 index 2077751856..7688460c7b 100644 --- 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 index 03966e7c52..79d81ad74a 100644 --- 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 index c52e6df778..691a394087 100644 --- 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 index 3744b9fec4..49af7ed18b 100644 --- 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 index 0aa43a4157..c0b1eac11e 100644 --- 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 ( + + 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. + diff --git a/src/pages/Pools/components/PoolsInsights/PoolsInsights.tsx b/src/pages/Pools/components/PoolsInsights/PoolsInsights.tsx index 5d81563a66..201af81f17 100644 --- 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(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 ( - <> -
- - - {t('supply_balance')} - {supplyBalanceLabel} - - - - - {t('total_liquidity')} - {totalLiquidityUSD} - - - - - {t('rewards')} - {totalClaimableRewardUSDLabel} - - {hasClaimableRewards && ( - - Claim - - )} - -
- !overlappingModalRef.current?.contains(el)} - > - Claim Rewards - - - - Amount - {totalClaimableRewardUSDLabel} - - - - -
- - - - {t('claim_rewards')} - - -
-
-
- +
+ + + {t('supply_balance')} + {supplyBalanceLabel} + + + + + {t('total_liquidity')} + {totalLiquidityUSD} + + +
); }; diff --git a/src/pages/Staking/components/StakingAccountDetails/StakingAccountDetails.tsx b/src/pages/Staking/components/StakingAccountDetails/StakingAccountDetails.tsx index f89f9047ea..1a31eb8e7b 100644 --- a/src/pages/Staking/components/StakingAccountDetails/StakingAccountDetails.tsx +++ b/src/pages/Staking/components/StakingAccountDetails/StakingAccountDetails.tsx @@ -53,26 +53,26 @@ const StakingAccountDetails = ({
{t('staking_page.staked_ticker', { ticker: GOVERNANCE_TOKEN.ticker })}
-
+
{balance?.toHuman() || 0}
{t('ticker_balance', { ticker: VOTE_GOVERNANCE_TOKEN.ticker })}
-
+
{votingBalance?.toHuman() || 0}
{t('staking_page.projected_ticker_rewards', { ticker: GOVERNANCE_TOKEN.ticker })}
-
+
{projected?.amount.toHuman() || 0}
{t('claimable_rewards')}
-
+
{claimableRewards?.toHuman() || 0} {GOVERNANCE_TOKEN.ticker}