Merge pull request #550 from madfish-solutions/v2.1.1

v2.1.1 Labels to farmings

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:

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",

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

src/components/ui/card/card.tsx

@@ -47,7 +47,7 @@ export const Card: FC<Props> = ({
       {header && (
         <div className={cx(styles.header, header.className)}>
           {header.content}
-          {header.status ? <StatusLabel status={header.status} /> : null}
+          {header.status ? <StatusLabel status={header.status} filled /> : null}
           {header.button}
         </div>
       )}

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<string>;
+  tooltipContent?: Nullable<string>;
   className: string;
 }
 

src/components/ui/status-label/status-label.module.scss

@@ -4,28 +4,36 @@
   padding: 1px;
   width: fit-content;
   border-radius: 8px;
+  white-space: nowrap;
 }
 
 .status {
   display: block;
 
   padding: 4px 8px;
 
-  color: $text-03;
   font-size: 12px;
   font-weight: bold;
 
   border-radius: 8px;
 }
 
 .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;
   }
 }

src/components/ui/status-label/status-label.tsx

@@ -19,19 +19,21 @@ const gradients = {
 
 interface Props {
   status: ActiveStatus;
+  label?: string;
+  filled?: boolean;
 }
 
 const themeClass = {
   [ColorModes.Light]: styles.light,
   [ColorModes.Dark]: styles.dark
 };
 
-export const StatusLabel: FC<Props> = ({ status }) => {
+export const StatusLabel: FC<Props> = ({ status, label, filled }) => {
   const { colorThemeMode } = useContext(ColorThemeContext);
 
   return (
     <div className={cx(styles.container, themeClass[colorThemeMode])} style={{ background: gradients[status] }}>
-      <span className={cx(styles.status)}>{status}</span>
+      <span className={cx(styles.status, filled ? styles.filled : styles.bordered)}>{label ?? status}</span>
     </div>
   );
 };

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

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 && (
+        <DetailsCardCell cellName={t('farm|Tags')} className={CardCellClassName}>
+          <div className={styles.tags}>
+            {shouldShowLockPeriod && <StatusLabel label={`${timeLockLabel} LOCK`} status={stakeStatus} />}
+            {shouldShowWithdrawalFee && <StatusLabel label={`${withdrawalFee}% UNLOCK FEE`} status={stakeStatus} />}
+          </div>
+        </DetailsCardCell>
+      )}
+
       <DetailsCardCell
         cellName={t('farm|Value Locked')}
         className={CardCellClassName}

src/containers/farming/item/components/farming-details/use-farming-details.vm.ts

@@ -13,7 +13,7 @@ import { useFarmingItemStore } from '@hooks/stores/use-farming-item-store';
 import { ActiveStatus } from '@interfaces/active-statuts-enum';
 import s from '@styles/CommonContainer.module.sass';
 import { useBakers, useReady } from '@utils/dapp';
-import { bigNumberToString, getDollarEquivalent, getTokenSymbol } from '@utils/helpers';
+import { bigNumberToString, getDollarEquivalent, getTimeLockDescription, getTokenSymbol } from '@utils/helpers';
 
 import { canDelegate, makeBaker } from '../../helpers';
 import styles from './farming-details.module.sass';
@@ -48,6 +48,8 @@ export const useFarmingDetailsViewModel = () => {
       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,

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<FarmingItem> = ({
   depositTokenUrl,
   myBalance,
   depositBalance,
-  earnBalance
+  earnBalance,
+  timelock,
+  withdrawalFee
 }) => {
   const { colorThemeMode } = useContext(ColorThemeContext);
   const { translation } = useListItemViewModal();
@@ -74,13 +82,23 @@ export const FarmingListItem: FC<FarmingItem> = ({
 
   const isAllowUserData = Boolean(myBalance || depositBalance || earnBalance);
 
+  const timeLockLabel = getTimeLockDescription(timelock);
+  const shouldShowLockPeriod = !!Number(timelock);
+
+  const withdrawalFeeLabel = withdrawalFee.toFixed();
+  const shouldShowWithdrawalFee = !withdrawalFee.eq(0);
+
   return (
     <Card className={cx(styles.card, themeClass[colorThemeMode])}>
       <div className={styles.container}>
         <div className={styles.left}>
           <div className={styles.itemLeftHeader}>
             <TokensLogosAndSymbols width={ICON_SIZE} tokenA={tokenA} tokenB={tokenB} />
-            <StatusLabel status={stakeStatus} />
+            <StatusLabel status={stakeStatus} filled />
+            {shouldShowLockPeriod && <StatusLabel label={`${timeLockLabel} LOCK`} status={stakeStatus} />}
+            {shouldShowWithdrawalFee && (
+              <StatusLabel label={`${withdrawalFeeLabel}% UNLOCK FEE`} status={stakeStatus} />
+            )}
             <Tooltip className={styles.tooltip} content={fullCardTooltipTranslation} />
           </div>
 

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