Merge pull request #1408 from galacticcouncil/master

master => rococo
galacticcouncil · Jun 15, 2024 · 589ee1e · 589ee1e
2 parents 2353590 + 9256517
commit 589ee1e
Show file tree

Hide file tree

Showing 8 changed files with 46 additions and 77 deletions.
diff --git 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
@@ -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
@@ -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",
@@ -585,7 +584,8 @@
   "farms.positions.redeposit.openFarms": "Open Farms",
   "farms.details.card.tag.label": "Joined",
   "farms.details.card.distribution": "<0>{{ distributed, compact }}</0> <1>of</1> <0>{{ max, compact }} distributed</0>",
-  "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% Hydration",
   "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
@@ -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
@@ -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 (
     <SContainer
-      as={variant}
-      variant={variant}
+      isClickable={isClickable}
       onClick={() => onSelect?.()}
       isJoined={!!depositNft}
     >
@@ -89,11 +89,7 @@ export const FarmDetailsCard = ({
           gap: 12,
         }}
       >
-        {depositNft && (
-          <div>
-            <Tag>{t("farms.details.card.tag.label")}</Tag>
-          </div>
-        )}
+        {depositNft && <Tag>{t("farms.details.card.tag.label")}</Tag>}
         <div
           sx={{
             flex: ["row", "column"],
@@ -109,9 +105,8 @@ export const FarmDetailsCard = ({
           </div>
           <Text fs={19} lh={28} fw={400} css={{ whiteSpace: "nowrap" }}>
             {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 })}
           </Text>
@@ -144,12 +139,25 @@ export const FarmDetailsCard = ({
           </Text>
         </SRow>
         <SRow css={{ border: depositNft ? undefined : "none" }}>
-          <FillBar percentage={fullness.toNumber()} variant="secondary" />
-          <Text fs={14} color="basic100" tAlign="right">
-            {t("farms.details.card.capacity", {
-              capacity: fullness,
-            })}
-          </Text>
+          <FillBar
+            percentage={fullness.toNumber()}
+            variant={isFull ? "full" : "secondary"}
+          />
+          <div
+            sx={{ flex: "row", gap: 2, align: "center" }}
+            css={{ justifySelf: "end" }}
+          >
+            <Text fs={14} color="basic100">
+              {t("farms.details.card.capacity", {
+                capacity: fullness,
+              })}
+            </Text>
+            {isFull && (
+              <InfoTooltip text={t("farms.details.card.capacity.desc")}>
+                <SInfoIcon />
+              </InfoTooltip>
+            )}
+          </div>
         </SRow>
         {depositNft && (
           <>
@@ -191,7 +199,7 @@ export const FarmDetailsCard = ({
       {onSelect && (
         <SIcon
           sx={{ color: "iconGray", height: "100%", align: "center" }}
-          icon={<ChevronDown />}
+          icon={<ChevronRightIcon />}
         />
       )}
     </SContainer>

diff --git a/src/sections/pools/farms/components/globalFarm/GlobalFarmRow.tsx b/src/sections/pools/farms/components/globalFarm/GlobalFarmRow.tsx
diff --git 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 (
     <div sx={{ flex: "row", gap: 4, align: "center" }} className={className}>
       <Text fs={fontSize} color="brightBlue200">
         {maxApr.gt(0)
-          ? t(`value.multiAPR`, { minApr, maxApr })
+          ? t(`value.upToAPR`, { maxApr })
           : t(`value.percentage`, { value: maxApr })}
       </Text>
 

diff --git 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;
+  }
 `