diff --git a/README.md b/README.md index 95ea3ade0..a4fee6e79 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,5 @@ This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). -Release: `v2.1.0` - ## Getting Started Run development servers for mainnet or hangzhounet: diff --git a/package.json b/package.json index e07c338ff..1250950a5 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "next-production-starter", - "version": "2.1.0", + "version": "2.1.1", "private": true, "scripts": { "dev:mainnet": "cross-env NEXT_PUBLIC_NETWORK=mainnet DEFAULT_TOKENS_SLUGS=tez-KT193D4vozYnhGJQVtw7CoxxqphqUEEwK6Vb_0 NEXT_PUBLIC_MAINNET_BASE_URL=http://localhost:3000 NEXT_PUBLIC_HANGZHOUNET_BASE_URL=http://localhost:3002 next dev -p 3000", diff --git a/src/components/ui/ComplexInput/ComplexInput.module.sass b/src/components/ui/ComplexInput/ComplexInput.module.sass index afbc4a87b..0780616c7 100644 --- a/src/components/ui/ComplexInput/ComplexInput.module.sass +++ b/src/components/ui/ComplexInput/ComplexInput.module.sass @@ -68,6 +68,7 @@ order: 3 flex-basis: 100% display: flex + flex-direction: column .item3 order: 4 flex-grow: 0 diff --git a/src/components/ui/card/card.tsx b/src/components/ui/card/card.tsx index 8821d51c7..2d193b505 100644 --- a/src/components/ui/card/card.tsx +++ b/src/components/ui/card/card.tsx @@ -47,7 +47,7 @@ export const Card: FC = ({ {header && (
{header.content} - {header.status ? : null} + {header.status ? : null} {header.button}
)} diff --git a/src/components/ui/details-card-cell/details-card-cell.tsx b/src/components/ui/details-card-cell/details-card-cell.tsx index 3fbe36164..30df1367b 100644 --- a/src/components/ui/details-card-cell/details-card-cell.tsx +++ b/src/components/ui/details-card-cell/details-card-cell.tsx @@ -9,7 +9,7 @@ import { Tooltip } from '../components/tooltip'; interface DetailsCardCellProps { cellName: string; - tooltipContent: Nullable; + tooltipContent?: Nullable; className: string; } diff --git a/src/components/ui/status-label/status-label.module.scss b/src/components/ui/status-label/status-label.module.scss index 6cf1895e5..db5c5f8e7 100644 --- a/src/components/ui/status-label/status-label.module.scss +++ b/src/components/ui/status-label/status-label.module.scss @@ -4,6 +4,7 @@ padding: 1px; width: fit-content; border-radius: 8px; + white-space: nowrap; } .status { @@ -11,7 +12,6 @@ padding: 4px 8px; - color: $text-03; font-size: 12px; font-weight: bold; @@ -19,13 +19,21 @@ } .light { - .status { + .filled { + color: $text-inverse; + } + .bordered { background-color: $ui-01; + color: $text-03; } } .dark { - .status { + .filled { + color: $text-inverse; + } + .bordered { background-color: $ui-07; + color: $text-03; } } diff --git a/src/components/ui/status-label/status-label.tsx b/src/components/ui/status-label/status-label.tsx index 2acc7e751..c7a49b210 100644 --- a/src/components/ui/status-label/status-label.tsx +++ b/src/components/ui/status-label/status-label.tsx @@ -19,6 +19,8 @@ const gradients = { interface Props { status: ActiveStatus; + label?: string; + filled?: boolean; } const themeClass = { @@ -26,12 +28,12 @@ const themeClass = { [ColorModes.Dark]: styles.dark }; -export const StatusLabel: FC = ({ status }) => { +export const StatusLabel: FC = ({ status, label, filled }) => { const { colorThemeMode } = useContext(ColorThemeContext); return (
- {status} + {label ?? status}
); }; diff --git a/src/containers/farming/item/components/farming-details/farming-details.module.sass b/src/containers/farming/item/components/farming-details/farming-details.module.sass index a417d0a34..e330b0047 100644 --- a/src/containers/farming/item/components/farming-details/farming-details.module.sass +++ b/src/containers/farming/item/components/farming-details/farming-details.module.sass @@ -1,11 +1,17 @@ @import "@styles/variables" @import "@styles/breakpoints" - + .vertical display: flex row-gap: 6px margin-bottom: 12px +.tags + display: flex + align-items: flex-end + & > div + margin-left: 4px + @include media('>=tablet') .stakeDetailsButtons flex-direction: row diff --git a/src/containers/farming/item/components/farming-details/farming-details.tsx b/src/containers/farming/item/components/farming-details/farming-details.tsx index 6106239c5..43a3a5b27 100644 --- a/src/containers/farming/item/components/farming-details/farming-details.tsx +++ b/src/containers/farming/item/components/farming-details/farming-details.tsx @@ -9,6 +9,7 @@ import { Card } from '@components/ui/card/card'; import { DetailsCardCell } from '@components/ui/details-card-cell'; import { Button } from '@components/ui/elements/button'; import { StateCurrencyAmount } from '@components/ui/state-components/state-currency-amount'; +import { StatusLabel } from '@components/ui/status-label'; import { CandidateButton } from '@containers/voiting/components'; import s from '@styles/CommonContainer.module.sass'; @@ -32,6 +33,8 @@ export const FarmingDetails: FC = observer(() => { currentDelegate, nextDelegate, timelock, + timeLockLabel, + shouldShowTags, CardCellClassName, stakeUrl, stakedTokenSymbol, @@ -56,6 +59,15 @@ export const FarmingDetails: FC = observer(() => { }} contentClassName={s.content} > + {shouldShowTags && ( + +
+ {shouldShowLockPeriod && } + {shouldShowWithdrawalFee && } +
+
+ )} + { currentDelegate: null, nextDelegate: null, timelock: null, + timeLockLabel: '', + shouldShowTags: false, CardCellClassName, depositTokenDecimals: 0, stakeUrl: `${TZKT_EXPLORER_URL}/${FARMING_CONTRACT_ADDRESS}`, @@ -87,10 +89,17 @@ export const useFarmingDetailsViewModel = () => { const currentDelegate = makeBaker(farmingItem.currentDelegate, bakers); const nextDelegate = makeBaker(farmingItem.nextDelegate, bakers); + const timeLockLabel = getTimeLockDescription(timelock); + + const shouldShowLockPeriod = timelock !== NO_TIMELOCK_VALUE; + const shouldShowWithdrawalFee = !withdrawalFee?.isEqualTo(NO_WITHDRAWAL_FEE_VALUE); + + const shouldShowTags = shouldShowLockPeriod || shouldShowWithdrawalFee; + return { shouldShowDelegates: canDelegate(farmingItem), - shouldShowLockPeriod: timelock !== NO_TIMELOCK_VALUE, - shouldShowWithdrawalFee: !withdrawalFee?.isEqualTo(NO_WITHDRAWAL_FEE_VALUE), + shouldShowLockPeriod, + shouldShowWithdrawalFee, endTime: new Date(endTime).getTime(), tvlDollarEquivalent: tvlDollarEquivalent && bigNumberToString(tvlDollarEquivalent), dailyDistribution, @@ -99,7 +108,10 @@ export const useFarmingDetailsViewModel = () => { dailyApr: apr ? bigNumberToString(apr.dividedBy(DAYS_IN_YEAR)) : null, currentDelegate, nextDelegate, + // TODO: Move it to mapping timelock: Number(timelock) * MS_IN_SECOND, + timeLockLabel, + shouldShowTags, CardCellClassName, depositTokenDecimals: stakedToken.metadata.decimals, stakeUrl, diff --git a/src/containers/farming/list/structures/list-item/list-item.tsx b/src/containers/farming/list/structures/list-item/list-item.tsx index cd92f5ca9..1702c3c11 100644 --- a/src/containers/farming/list/structures/list-item/list-item.tsx +++ b/src/containers/farming/list/structures/list-item/list-item.tsx @@ -8,7 +8,13 @@ import { Button } from '@components/ui/elements/button'; import { StateCurrencyAmount } from '@components/ui/state-components/state-currency-amount'; import { StatusLabel } from '@components/ui/status-label'; import { FarmingItem } from '@interfaces/farming.interfaces'; -import { getDollarEquivalent, getTokensPairName, getTokenSymbol, isExist } from '@utils/helpers'; +import { + getDollarEquivalent, + getTimeLockDescription, + getTokensPairName, + getTokenSymbol, + isExist +} from '@utils/helpers'; import { ListItemCardCell, RewardTarget, TokensLogosAndSymbols } from '../../components'; import styles from './list-item.module.scss'; @@ -38,7 +44,9 @@ export const FarmingListItem: FC = ({ depositTokenUrl, myBalance, depositBalance, - earnBalance + earnBalance, + timelock, + withdrawalFee }) => { const { colorThemeMode } = useContext(ColorThemeContext); const { translation } = useListItemViewModal(); @@ -74,13 +82,23 @@ export const FarmingListItem: FC = ({ const isAllowUserData = Boolean(myBalance || depositBalance || earnBalance); + const timeLockLabel = getTimeLockDescription(timelock); + const shouldShowLockPeriod = !!Number(timelock); + + const withdrawalFeeLabel = withdrawalFee.toFixed(); + const shouldShowWithdrawalFee = !withdrawalFee.eq(0); + return (
- + + {shouldShowLockPeriod && } + {shouldShowWithdrawalFee && ( + + )}
diff --git a/src/utils/helpers/parse-timelock.ts b/src/utils/helpers/parse-timelock.ts index 96e17eef8..6f819fd21 100644 --- a/src/utils/helpers/parse-timelock.ts +++ b/src/utils/helpers/parse-timelock.ts @@ -19,3 +19,10 @@ export const parseTimelock = (timelock: BigNumber.Value, isTimelockInSeconds?: b minutes: minutes.toNumber() }; }; + +export const getTimeLockDescription = (timelock: BigNumber.Value): string => { + const ms = Number(timelock) * MS_IN_SECOND; + const { days } = parseTimelock(ms); + + return `${days} DAYS`; +};