From bc86202ef1aa0761bfaa8dbaf8ca7c84359a4855 Mon Sep 17 00:00:00 2001 From: vkulinich Date: Fri, 14 Jun 2024 15:57:26 +0200 Subject: [PATCH 1/4] rename APR --- src/i18n/locales/en/translations.json | 3 +- .../detailsCard/FarmDetailsCard.tsx | 5 +-- .../components/globalFarm/GlobalFarmRow.tsx | 42 ------------------- .../globalFarm/GlobalFarmRowMulti.tsx | 4 +- 4 files changed, 5 insertions(+), 49 deletions(-) delete mode 100644 src/sections/pools/farms/components/globalFarm/GlobalFarmRow.tsx diff --git a/src/i18n/locales/en/translations.json b/src/i18n/locales/en/translations.json index 702d5ae62..34e0e9013 100644 --- a/src/i18n/locales/en/translations.json +++ b/src/i18n/locales/en/translations.json @@ -131,8 +131,7 @@ "value.percentage": "{{ value, bignumber(numberSuffix: '%'; type: 'percentage') }}", "value.percentage.range": "{{ from, bignumber(type: 'percentage') }}-{{ to, bignumber(type: 'percentage') }}%", "value.APR": "{{ apr, bignumber(numberSuffix: '% APR'; type: 'percentage'; decimalPlaces: 1) }}", - "value.APR.range": "{{ from, bignumber(type: 'percentage'; decimalPlaces: 1) }}-{{ to, bignumber(type: 'percentage'; decimalPlaces: 1) }}% APR", - "value.multiAPR": "{{minApr, bignumber(type: 'percentage'; decimalPlaces: 1) }}-{{maxApr, bignumber(type: 'percentage'; decimalPlaces: 1) }}% APR", + "value.upToAPR": "Up to {{maxApr, bignumber(type: 'percentage'; decimalPlaces: 1) }}% APR", "value.token": "{{ value, bignumber(type: 'token') }}", "value.tokenWithSymbol": "{{ value, bignumber(type: 'token') }} {{symbol}}", "liquidity.navigation.myLiquidity": "My Liquidity", diff --git a/src/sections/pools/farms/components/detailsCard/FarmDetailsCard.tsx b/src/sections/pools/farms/components/detailsCard/FarmDetailsCard.tsx index 065e75522..c16516340 100644 --- a/src/sections/pools/farms/components/detailsCard/FarmDetailsCard.tsx +++ b/src/sections/pools/farms/components/detailsCard/FarmDetailsCard.tsx @@ -109,9 +109,8 @@ export const FarmDetailsCard = ({ {apr.data.minApr && apr.data?.apr.gt(0) - ? t("value.APR.range", { - from: apr.data.minApr, - to: apr.data?.apr, + ? t("value.upToAPR", { + maxApr: apr.data?.apr, }) : t("value.APR", { apr: apr.data?.apr })} diff --git a/src/sections/pools/farms/components/globalFarm/GlobalFarmRow.tsx b/src/sections/pools/farms/components/globalFarm/GlobalFarmRow.tsx deleted file mode 100644 index da287ebf6..000000000 --- a/src/sections/pools/farms/components/globalFarm/GlobalFarmRow.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import { Farm, useFarmApr } from "api/farms" -import { AssetLogo } from "components/AssetIcon/AssetIcon" -import { Icon } from "components/Icon/Icon" -import { Separator } from "components/Separator/Separator" -import { Text } from "components/Typography/Text/Text" -import { useTranslation } from "react-i18next" -import { useRpcProvider } from "providers/rpcProvider" - -export const GlobalFarmRow = ({ - farm, - isLastElement, -}: { - farm: Farm - isLastElement?: boolean -}) => { - const { t } = useTranslation() - const { assets } = useRpcProvider() - const { data: apr } = useFarmApr(farm) - const asset = apr?.assetId - ? assets.getAsset(apr.assetId.toString()) - : undefined - - if (!apr || !asset) return null - - return ( - <> -
-
- } size={24} /> - {asset.symbol} -
- - - {apr.minApr - ? t("value.APR.range", { from: apr.minApr, to: apr.apr }) - : t("value.APR", { apr: apr.apr })} - -
- {!isLastElement && } - - ) -} diff --git a/src/sections/pools/farms/components/globalFarm/GlobalFarmRowMulti.tsx b/src/sections/pools/farms/components/globalFarm/GlobalFarmRowMulti.tsx index 545f7e0e2..1ea5410da 100644 --- a/src/sections/pools/farms/components/globalFarm/GlobalFarmRowMulti.tsx +++ b/src/sections/pools/farms/components/globalFarm/GlobalFarmRowMulti.tsx @@ -29,13 +29,13 @@ export const GlobalFarmRowMulti = ({ if (!farmAprs.data) return null - const { minApr, maxApr } = getMinAndMaxAPR(farmAprs) + const { maxApr } = getMinAndMaxAPR(farmAprs) return (
{maxApr.gt(0) - ? t(`value.multiAPR`, { minApr, maxApr }) + ? t(`value.upToAPR`, { maxApr }) : t(`value.percentage`, { value: maxApr })} From 13e18637f215a5d6d6d5e86798d4e52335a990dc Mon Sep 17 00:00:00 2001 From: vkulinich Date: Fri, 14 Jun 2024 16:37:25 +0200 Subject: [PATCH 2/4] update fullness --- src/components/FillBar/FillBar.styled.ts | 2 + src/components/FillBar/FillBar.tsx | 2 +- src/i18n/locales/en/translations.json | 3 +- .../detailsCard/FarmDetailsCard.styled.ts | 11 ++---- .../detailsCard/FarmDetailsCard.tsx | 39 ++++++++++++------- .../modals/details/FarmDetailsModal.styled.ts | 6 ++- 6 files changed, 40 insertions(+), 23 deletions(-) diff --git a/src/components/FillBar/FillBar.styled.ts b/src/components/FillBar/FillBar.styled.ts index 3145fe463..8ef00abf5 100644 --- a/src/components/FillBar/FillBar.styled.ts +++ b/src/components/FillBar/FillBar.styled.ts @@ -24,6 +24,8 @@ export const SFill = styled.div<{ background: ${({ variant }) => variant === "primary" ? theme.colors.brightBlue500 + : variant === "full" + ? "linear-gradient(90deg, #532051 0%, #AE2569 55.72%, #F6297C 100%)" : theme.gradients.lightGreenOrange}; animation: stretch 0.75s ease-in-out; diff --git a/src/components/FillBar/FillBar.tsx b/src/components/FillBar/FillBar.tsx index 5e9a19b92..3cd916528 100644 --- a/src/components/FillBar/FillBar.tsx +++ b/src/components/FillBar/FillBar.tsx @@ -1,7 +1,7 @@ import { FC } from "react" import { SBar, SFill } from "components/FillBar/FillBar.styled" -export type FillBarVariant = "primary" | "secondary" +export type FillBarVariant = "primary" | "secondary" | "full" type Props = { percentage: number; variant?: FillBarVariant } diff --git a/src/i18n/locales/en/translations.json b/src/i18n/locales/en/translations.json index 34e0e9013..9b75db640 100644 --- a/src/i18n/locales/en/translations.json +++ b/src/i18n/locales/en/translations.json @@ -584,7 +584,8 @@ "farms.positions.redeposit.openFarms": "Open Farms", "farms.details.card.tag.label": "Joined", "farms.details.card.distribution": "<0>{{ distributed, compact }} <1>of <0>{{ max, compact }} distributed", - "farms.details.card.capacity": "{{ capacity, bignumber(type: 'percentage') }}% full", + "farms.details.card.capacity": "{{ capacity, bignumber(type: 'percentage') }}% Hydrated", + "farms.details.card.capacity.desc": "Farming rewards are proportionally decreased after 100% Hydrated", "farms.details.card.lockedShares.label": "Asset shares", "farms.details.card.currentApr.label": "Current APR (est.)", "farms.details.card.lockedShares.value": "{{ value, compact }} shares", diff --git a/src/sections/pools/farms/components/detailsCard/FarmDetailsCard.styled.ts b/src/sections/pools/farms/components/detailsCard/FarmDetailsCard.styled.ts index 49253c91b..72deff9a4 100644 --- a/src/sections/pools/farms/components/detailsCard/FarmDetailsCard.styled.ts +++ b/src/sections/pools/farms/components/detailsCard/FarmDetailsCard.styled.ts @@ -1,11 +1,10 @@ import styled from "@emotion/styled" import { Icon } from "components/Icon/Icon" import { theme } from "theme" -import { CardVariant } from "./FarmDetailsCard" import { css } from "@emotion/react" -export const SContainer = styled.button<{ - variant: CardVariant +export const SContainer = styled.div<{ + isClickable: boolean isJoined?: boolean }>` display: flex; @@ -27,8 +26,8 @@ export const SContainer = styled.button<{ outline: none; border: 1px solid transparent; - ${({ variant }) => { - if (variant === "div") { + ${({ isClickable }) => { + if (!isClickable) { return css` @media ${theme.viewport.gte.sm} { flex-direction: row; @@ -66,8 +65,6 @@ export const SRow = styled.div` ` export const SIcon = styled(Icon)` - transform: rotate(-90deg); - position: absolute; top: 0; bottom: 0; diff --git a/src/sections/pools/farms/components/detailsCard/FarmDetailsCard.tsx b/src/sections/pools/farms/components/detailsCard/FarmDetailsCard.tsx index c16516340..a77aa2ba0 100644 --- a/src/sections/pools/farms/components/detailsCard/FarmDetailsCard.tsx +++ b/src/sections/pools/farms/components/detailsCard/FarmDetailsCard.tsx @@ -6,7 +6,7 @@ import { FillBar } from "components/FillBar/FillBar" import { scaleHuman } from "utils/balance" import { GradientText } from "components/Typography/GradientText/GradientText" import { addSeconds } from "date-fns" -import ChevronDown from "assets/icons/ChevronDown.svg?react" +import ChevronRightIcon from "assets/icons/ChevronRight.svg?react" import { Icon } from "components/Icon/Icon" import { Farm, useFarmApr } from "api/farms" import { useBestNumber } from "api/chain" @@ -16,6 +16,8 @@ import { getCurrentLoyaltyFactor } from "utils/farms/apr" import { AssetLogo } from "components/AssetIcon/AssetIcon" import { useRpcProvider } from "providers/rpcProvider" import { TMiningNftPosition } from "sections/pools/PoolsPage.utils" +import { InfoTooltip } from "components/InfoTooltip/InfoTooltip" +import { SInfoIcon } from "components/InfoTooltip/InfoTooltip.styled" type FarmDetailsCardProps = { poolId: string @@ -24,8 +26,6 @@ type FarmDetailsCardProps = { onSelect?: () => void } -export type CardVariant = "button" | "div" - export const FarmDetailsCard = ({ poolId, depositNft, @@ -39,7 +39,7 @@ export const FarmDetailsCard = ({ const apr = useFarmApr(farm) const assetMeta = assets.getAsset(poolId.toString()) - const variant = onSelect ? "button" : "div" + const isClickable = !!onSelect const bestNumber = useBestNumber() const secondsDurationToEnd = @@ -74,11 +74,11 @@ export const FarmDetailsCard = ({ if (apr.data == null) return null const fullness = apr.data.fullness + const isFull = fullness.gte(100) return ( onSelect?.()} isJoined={!!depositNft} > @@ -143,12 +143,25 @@ export const FarmDetailsCard = ({ - - - {t("farms.details.card.capacity", { - capacity: fullness, - })} - + +
+ + {t("farms.details.card.capacity", { + capacity: fullness, + })} + + {isFull && ( + + + + )} +
{depositNft && ( <> @@ -190,7 +203,7 @@ export const FarmDetailsCard = ({ {onSelect && ( } + icon={} /> )} diff --git a/src/sections/pools/farms/modals/details/FarmDetailsModal.styled.ts b/src/sections/pools/farms/modals/details/FarmDetailsModal.styled.ts index bc695ac1e..97861fb06 100644 --- a/src/sections/pools/farms/modals/details/FarmDetailsModal.styled.ts +++ b/src/sections/pools/farms/modals/details/FarmDetailsModal.styled.ts @@ -2,8 +2,12 @@ import styled from "@emotion/styled" import { theme } from "theme" export const SLoyaltyRewardsContainer = styled.div` - padding: 20px 40px; + padding: 20px 10px; margin: 20px calc(-1 * var(--modal-content-padding) + 1px) 0; background: rgba(${theme.rgbColors.darkBlue900}, 0.4); + + @media ${theme.viewport.gte.sm} { + padding: 20px 40px; + } ` From d59381951c77f2abf07962396e41b215954980a8 Mon Sep 17 00:00:00 2001 From: vkulinich Date: Fri, 14 Jun 2024 16:48:36 +0200 Subject: [PATCH 3/4] remove div --- .../pools/farms/components/detailsCard/FarmDetailsCard.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/sections/pools/farms/components/detailsCard/FarmDetailsCard.tsx b/src/sections/pools/farms/components/detailsCard/FarmDetailsCard.tsx index a77aa2ba0..1ea1f0e20 100644 --- a/src/sections/pools/farms/components/detailsCard/FarmDetailsCard.tsx +++ b/src/sections/pools/farms/components/detailsCard/FarmDetailsCard.tsx @@ -89,11 +89,7 @@ export const FarmDetailsCard = ({ gap: 12, }} > - {depositNft && ( -
- {t("farms.details.card.tag.label")} -
- )} + {depositNft && {t("farms.details.card.tag.label")}}
Date: Fri, 14 Jun 2024 21:45:19 +0200 Subject: [PATCH 4/4] change textation --- src/i18n/locales/en/translations.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/i18n/locales/en/translations.json b/src/i18n/locales/en/translations.json index 9b75db640..c384ca676 100644 --- a/src/i18n/locales/en/translations.json +++ b/src/i18n/locales/en/translations.json @@ -585,7 +585,7 @@ "farms.details.card.tag.label": "Joined", "farms.details.card.distribution": "<0>{{ distributed, compact }} <1>of <0>{{ max, compact }} distributed", "farms.details.card.capacity": "{{ capacity, bignumber(type: 'percentage') }}% Hydrated", - "farms.details.card.capacity.desc": "Farming rewards are proportionally decreased after 100% Hydrated", + "farms.details.card.capacity.desc": "Farming rewards are proportionally decreased after 100% Hydration", "farms.details.card.lockedShares.label": "Asset shares", "farms.details.card.currentApr.label": "Current APR (est.)", "farms.details.card.lockedShares.value": "{{ value, compact }} shares",