feat: update landing page

.changeset/fluffy-books-stare.md

@@ -0,0 +1,5 @@
+---
+"@venusprotocol/landing": minor
+---
+
+update landing page

apps/evm/src/components/AccountHealthBar/index.tsx

@@ -1,19 +1,14 @@
 /** @jsxImportSource @emotion/react */
+import { formatCentsToReadableValue, theme } from '@venusprotocol/ui';
 import { useMemo } from 'react';
 
-import PLACEHOLDER_KEY from 'constants/placeholderKey';
-import { useTranslation } from 'libs/translations';
-import {
-  calculatePercentage,
-  formatCentsToReadableValue,
-  formatPercentageToReadableValue,
-} from 'utilities';
-
-import { theme } from '@venusprotocol/ui';
 import {
   HEALTH_FACTOR_MODERATE_THRESHOLD,
   HEALTH_FACTOR_SAFE_THRESHOLD,
 } from 'constants/healthFactor';
+import PLACEHOLDER_KEY from 'constants/placeholderKey';
+import { useTranslation } from 'libs/translations';
+import { calculatePercentage, formatPercentageToReadableValue } from 'utilities';
 import { LabeledProgressBar } from '../LabeledProgressBar';
 
 const safeBorrowLimitPercentage = 100 / HEALTH_FACTOR_SAFE_THRESHOLD;

apps/evm/src/components/Apy/PrimeBadge/SimulationText/index.tsx

@@ -1,7 +1,7 @@
+import { formatTokensToReadableValue } from '@venusprotocol/ui';
 import { useGetToken } from 'libs/tokens';
 import { useTranslation } from 'libs/translations';
 import type { PrimeSimulationDistribution, Token } from 'types';
-import { formatTokensToReadableValue } from 'utilities';
 
 export interface SimulationTextProps {
   token: Token;

apps/evm/src/containers/AccountData/index.tsx

@@ -1,12 +1,11 @@
+import { cn, formatCentsToReadableValue } from '@venusprotocol/ui';
 import type BigNumber from 'bignumber.js';
 
-import { cn } from '@venusprotocol/ui';
 import { AccountHealthBar, HealthFactorPill, LabeledInlineContent, ValueUpdate } from 'components';
 import PLACEHOLDER_KEY from 'constants/placeholderKey';
 import { useTranslation } from 'libs/translations';
 import { memo } from 'react';
 import type { Asset, Pool, Swap, TokenAction } from 'types';
-import { formatCentsToReadableValue } from 'utilities';
 import useGetValues from './useGetValues';
 
 const MemoizedAccountHealthBar = memo(AccountHealthBar);

apps/evm/src/containers/ImportablePositions/Notice/index.tsx

@@ -1,12 +1,12 @@
-import { cn } from '@venusprotocol/ui';
+import { cn, formatCentsToReadableValue } from '@venusprotocol/ui';
 import { BigNumber } from 'bignumber.js';
+
 import { NoticeInfo } from 'components';
 import {
   MAX_POSITION_SUPPLY_BALANCE_CENTS,
   MIN_POSITION_SUPPLY_BALANCE_CENTS,
 } from 'constants/importPositions';
 import { useTranslation } from 'libs/translations';
-import { formatCentsToReadableValue } from 'utilities';
 
 export interface NoticeProps {
   className?: string;

apps/evm/src/containers/ImportablePositions/ProtocolPositions/Position/index.tsx

@@ -1,4 +1,5 @@
-import { cn } from '@venusprotocol/ui';
+import { cn, formatCentsToReadableValue, formatTokensToReadableValue } from '@venusprotocol/ui';
+
 import { useImportSupplyPosition } from 'clients/api';
 import { Apy, Button, Delimiter, Icon, TokenIcon } from 'components';
 import { routes } from 'constants/routing';
@@ -13,9 +14,7 @@ import { handleError, isUserRejectedTxError } from 'libs/errors';
 import { useTranslation } from 'libs/translations';
 import {
   calculateYearlyInterests,
-  formatCentsToReadableValue,
   formatPercentageToReadableValue,
-  formatTokensToReadableValue,
   getCombinedDistributionApys,
 } from 'utilities';
 import { ApyCell } from './ApyCell';

apps/evm/src/containers/Layout/ClaimRewardButton/RewardGroupContent/index.tsx

@@ -1,6 +1,8 @@
-import { LayeredValues, TokenIconWithSymbol } from 'components';
+import { formatCentsToReadableValue } from '@venusprotocol/ui';
 import { useMemo } from 'react';
-import { convertMantissaToTokens, formatCentsToReadableValue } from 'utilities';
+
+import { LayeredValues, TokenIconWithSymbol } from 'components';
+import { convertMantissaToTokens } from 'utilities';
 import type { ExternalRewardsGroup, InternalRewardsGroup, PendingReward } from '../types';
 
 export interface RewardGroupContentProps {

apps/evm/src/containers/Layout/ClaimRewardButton/index.tsx

@@ -1,14 +1,13 @@
+import { cn, formatCentsToReadableValue } from '@venusprotocol/ui';
 import BigNumber from 'bignumber.js';
 import { useMemo, useState } from 'react';
 
-import { cn } from '@venusprotocol/ui';
 import { type Claim, useClaimRewards } from 'clients/api';
 import { type ButtonProps, Icon, Modal, PrimaryButton } from 'components';
 import { useGetChainMetadata } from 'hooks/useGetChainMetadata';
 import { VError } from 'libs/errors';
 import { useTranslation } from 'libs/translations';
 import { useAccountAddress } from 'libs/wallet';
-import { formatCentsToReadableValue } from 'utilities';
 
 import { useBreakpointUp } from 'hooks/responsive';
 import TEST_IDS from '../testIds';

apps/evm/src/containers/Layout/Header/MarketInfo/index.tsx

@@ -1,14 +1,16 @@
+import { formatCentsToReadableValue } from '@venusprotocol/ui';
 import BigNumber from 'bignumber.js';
+import { useMemo } from 'react';
+import { useParams } from 'react-router';
+import type { Address } from 'viem';
+
 import { useGetAsset, useGetPool } from 'clients/api';
 import { CellGroup, type CellProps, Icon, Spinner, TokenIcon } from 'components';
 import { NULL_ADDRESS } from 'constants/address';
 import PLACEHOLDER_KEY from 'constants/placeholderKey';
 import { useTranslation } from 'libs/translations';
 import { useAccountAddress } from 'libs/wallet';
-import { useMemo } from 'react';
-import { useParams } from 'react-router';
-import { formatCentsToReadableValue, formatPercentageToReadableValue } from 'utilities';
-import type { Address } from 'viem';
+import { formatPercentageToReadableValue } from 'utilities';
 import { AddTokenToWalletDropdown } from './AddTokenToWalletDropdown';
 import { GoToTokenContractDropdown } from './GoToTokenContractDropdown';
 import { UtilizationRate } from './UtilizationRate';

apps/evm/src/containers/MarketTable/useGenerateColumns.tsx

@@ -1,7 +1,7 @@
 /** @jsxImportSource @emotion/react */
+import { cn, formatCentsToReadableValue, formatTokensToReadableValue } from '@venusprotocol/ui';
 import { useMemo } from 'react';
 
-import { cn } from '@venusprotocol/ui';
 import {
   InfoIcon,
   LayeredValues,
@@ -19,9 +19,7 @@ import {
   compareBigNumbers,
   compareBooleans,
   compareStrings,
-  formatCentsToReadableValue,
   formatPercentageToReadableValue,
-  formatTokensToReadableValue,
   getCombinedDistributionApys,
   isAssetPaused,
   isCollateralActionDisabled,

apps/evm/src/containers/PoolStats/index.tsx

@@ -1,3 +1,4 @@
+import { formatCentsToReadableValue, formatTokensToReadableValue } from '@venusprotocol/ui';
 import BigNumber from 'bignumber.js';
 import {
   useGetTokenBalances,
@@ -11,12 +12,7 @@ import { useGetVTreasuryContractAddress } from 'hooks/useGetVTreasuryContractAdd
 import { useGetToken, useGetTokens } from 'libs/tokens';
 import { useTranslation } from 'libs/translations';
 import type { Pool } from 'types';
-import {
-  areTokensEqual,
-  convertMantissaToTokens,
-  formatCentsToReadableValue,
-  formatTokensToReadableValue,
-} from 'utilities';
+import { areTokensEqual, convertMantissaToTokens } from 'utilities';
 import type { Address } from 'viem';
 import { getTreasuryBalanceCents } from './getTreasuryBalanceCents';
 

apps/evm/src/containers/PrimeStatusBanner/index.tsx

@@ -1,7 +1,7 @@
 import type BigNumber from 'bignumber.js';
 import { useMemo } from 'react';
 
-import { cn } from '@venusprotocol/ui';
+import { cn, formatTokensToReadableValue } from '@venusprotocol/ui';
 import PrimeLogo from 'assets/img/primeLogo.svg?react';
 import { useClaimPrimeToken } from 'clients/api';
 import { Card, PrimaryButton, ProgressBar } from 'components';
@@ -18,7 +18,7 @@ import type { Token } from 'types';
 
 import { useGetUserPrimeInfo } from 'hooks/useGetUserPrimeInfo';
 import { useAccountAddress } from 'libs/wallet';
-import { formatPercentageToReadableValue, formatTokensToReadableValue } from 'utilities';
+import { formatPercentageToReadableValue } from 'utilities';
 import NoPrimeTokensLeftWarning from './NoPrimeTokensLeftWarning';
 import PrimeTokensLeft from './PrimeTokensLeft';
 import { formatWaitingPeriod } from './formatWaitingPeriod';

apps/evm/src/hooks/useDebounceValue.ts

@@ -1,7 +1,7 @@
+import { debounce } from '@venusprotocol/ui';
 import { useEffect, useMemo, useState } from 'react';
-import { DEFAULT_DEBOUNCE_DELAY, debounce } from 'utilities';
 
-export default function useDebounceValue<T>(value: T, delay = DEFAULT_DEBOUNCE_DELAY) {
+export default function useDebounceValue<T>(value: T, delay?: number) {
   const [debouncedValue, setDebouncedValue] = useState<T>(value);
 
   const debouncedSetter = useMemo(

apps/evm/src/hooks/useFormatTokensToReadableValue.ts

@@ -1,7 +1,10 @@
+import {
+  type FormatTokensToReadableValueInput,
+  formatTokensToReadableValue,
+} from '@venusprotocol/ui';
 import { useMemo } from 'react';
 
 import PLACEHOLDER_KEY from 'constants/placeholderKey';
-import { type FormatTokensToReadableValueInput, formatTokensToReadableValue } from 'utilities';
 
 export type UseFormatTokensToReadableValueInput = FormatTokensToReadableValueInput;
 

apps/evm/src/libs/analytics/useAnalytics/index.ts

@@ -1,3 +1,4 @@
+import { debounce } from '@venusprotocol/ui';
 import { usePostHog } from 'posthog-js/react';
 import { useCallback, useMemo } from 'react';
 import { useLocation } from 'react-router';
@@ -6,7 +7,6 @@ import { useAccount } from 'wagmi';
 import config from 'config';
 import { logError } from 'libs/errors';
 import { useChainId } from 'libs/wallet';
-import { debounce } from 'utilities';
 import { useAuthAnalyticVariantContext } from '../context';
 import type { AnalyticEventName, AnalyticEventProps } from './types';
 

apps/evm/src/pages/Account/NewPage/PerformanceChart/DollarValueChange/index.tsx

@@ -1,5 +1,4 @@
-import { cn } from '@venusprotocol/ui';
-import { formatCentsToReadableValue } from 'utilities';
+import { cn, formatCentsToReadableValue } from '@venusprotocol/ui';
 
 export interface DollarValueChangeProps {
   value?: number;

apps/evm/src/pages/Account/NewPage/PerformanceChart/index.tsx

@@ -1,4 +1,4 @@
-import { Spinner, cn, theme } from '@venusprotocol/ui';
+import { Spinner, cn, formatCentsToReadableValue, theme } from '@venusprotocol/ui';
 import {
   type AccountPerformanceHistoryDataPoint,
   type AccountPerformanceHistoryPeriod,
@@ -12,7 +12,7 @@ import { useIsFeatureEnabled } from 'hooks/useIsFeatureEnabled';
 import { useTranslation } from 'libs/translations';
 import { useAccountAddress } from 'libs/wallet';
 import { useState } from 'react';
-import { formatCentsToReadableValue, formatPercentageToReadableValue } from 'utilities';
+import { formatPercentageToReadableValue } from 'utilities';
 import { DollarValueChange } from './DollarValueChange';
 import { formatToReadableAxisDate } from './formatToReadableAxisDate';
 import { formatToReadableTitleDate } from './formatToReadableTitleDate';

apps/evm/src/pages/Account/NewPage/Summary/index.tsx

@@ -1,10 +1,10 @@
-import { cn } from '@venusprotocol/ui';
+import { cn, formatCentsToReadableValue } from '@venusprotocol/ui';
 
 import { Card, Cell, type CellProps } from 'components';
 import { useGetToken } from 'libs/tokens';
 import { useTranslation } from 'libs/translations';
 import type { Pool, Vault } from 'types';
-import { formatCentsToReadableValue, formatPercentageToReadableValue } from 'utilities';
+import { formatPercentageToReadableValue } from 'utilities';
 import { useExtractData } from '../../useExtractData';
 import circularGradientSrc from './circularGradient.svg';
 

apps/evm/src/pages/Account/PoolSummary/index.tsx

@@ -1,14 +1,11 @@
+import { formatCentsToReadableValue } from '@venusprotocol/ui';
 import type BigNumber from 'bignumber.js';
 import { AccountHealthBar, Card, Cell, CellGroup, type CellProps, cn } from 'components';
 import type { Pool, Vault } from 'types';
 
 import { useHealthFactor } from 'hooks/useHealthFactor';
 import { useTranslation } from 'libs/translations';
-import {
-  formatCentsToReadableValue,
-  formatHealthFactorToReadableValue,
-  formatPercentageToReadableValue,
-} from 'utilities';
+import { formatHealthFactorToReadableValue, formatPercentageToReadableValue } from 'utilities';
 import Section from '../Section';
 import { useExtractData } from '../useExtractData';
 

apps/evm/src/pages/Bridge/index.tsx

@@ -3,7 +3,7 @@ import { useCallback, useMemo, useRef } from 'react';
 import { Controller } from 'react-hook-form';
 import type { Chain } from 'viem';
 
-import { cn } from '@venusprotocol/ui';
+import { cn, formatTokensToReadableValue } from '@venusprotocol/ui';
 import { useBridgeXvs, useGetBalanceOf, useGetXvsBridgeFeeEstimation } from 'clients/api';
 import {
   ApproveTokenSteps,
@@ -31,7 +31,7 @@ import { useGetToken } from 'libs/tokens';
 import { useTranslation } from 'libs/translations';
 import { useAccountAddress, useChainId, useSwitchChain } from 'libs/wallet';
 import { ChainId } from 'types';
-import { convertMantissaToTokens, formatTokensToReadableValue } from 'utilities';
+import { convertMantissaToTokens } from 'utilities';
 import { ChainSelect, getOptionsFromChainsList } from './ChainSelect';
 import { bridgeChains } from './constants';
 import LayerZeroLogo from './layerZeroLogo.svg?react';

apps/evm/src/pages/Bridge/useBridgeForm.ts

@@ -1,4 +1,5 @@
 import { zodResolver } from '@hookform/resolvers/zod';
+import { formatCentsToReadableValue, formatTokensToReadableValue } from '@venusprotocol/ui';
 import BigNumber from 'bignumber.js';
 import { fromUnixTime, isBefore } from 'date-fns';
 import { type MutableRefObject, useCallback, useEffect, useMemo } from 'react';
@@ -17,13 +18,7 @@ import { useGetChainMetadata } from 'hooks/useGetChainMetadata';
 import { useTranslation } from 'libs/translations';
 import { useAccountAddress, useChainId } from 'libs/wallet';
 import { ChainId, type Token } from 'types';
-import {
-  convertDollarsToCents,
-  convertMantissaToTokens,
-  convertTokensToMantissa,
-  formatCentsToReadableValue,
-  formatTokensToReadableValue,
-} from 'utilities';
+import { convertDollarsToCents, convertMantissaToTokens, convertTokensToMantissa } from 'utilities';
 import { parseUnits } from 'viem';
 import { bridgeChains } from './constants';
 

apps/evm/src/pages/Market/MarketHistory/Card/ApyChart/index.tsx

@@ -1,8 +1,8 @@
-import { theme } from '@venusprotocol/ui';
+import { formatCentsToReadableValue, theme } from '@venusprotocol/ui';
 import type BigNumber from 'bignumber.js';
 
 import { useTranslation } from 'libs/translations';
-import { formatCentsToReadableValue, formatPercentageToReadableValue } from 'utilities';
+import { formatPercentageToReadableValue } from 'utilities';
 
 import type { MarketHistoryPeriodType } from 'clients/api';
 import { AreaChart } from 'components';

apps/evm/src/pages/Market/MarketHistory/Card/CapThreshold/index.tsx

@@ -1,15 +1,11 @@
-import { theme } from '@venusprotocol/ui';
+import { formatCentsToReadableValue, formatTokensToReadableValue, theme } from '@venusprotocol/ui';
 import BigNumber from 'bignumber.js';
 import { ProgressCircle, Tooltip } from 'components';
 import { useTranslation } from 'libs/translations';
 import { useMemo } from 'react';
 import type { Token } from 'types';
 
-import {
-  formatCentsToReadableValue,
-  formatPercentageToReadableValue,
-  formatTokensToReadableValue,
-} from 'utilities';
+import { formatPercentageToReadableValue } from 'utilities';
 
 const THRESHOLD_GRADIENT_ID = 'cap-threshold-gradient';
 

apps/evm/src/pages/Market/MarketInfo/index.tsx

@@ -1,3 +1,4 @@
+import { formatCentsToReadableValue, formatTokensToReadableValue } from '@venusprotocol/ui';
 import BigNumber from 'bignumber.js';
 import { LabeledInlineContent } from 'components';
 import PLACEHOLDER_KEY from 'constants/placeholderKey';
@@ -6,11 +7,7 @@ import { useIsFeatureEnabled } from 'hooks/useIsFeatureEnabled';
 import { useTranslation } from 'libs/translations';
 import { useMemo } from 'react';
 import type { Asset, Token } from 'types';
-import {
-  formatCentsToReadableValue,
-  formatPercentageToReadableValue,
-  formatTokensToReadableValue,
-} from 'utilities';
+import { formatPercentageToReadableValue } from 'utilities';
 import { MarketCard } from '../MarketCard';
 import TEST_IDS from '../testIds';
 import type { Stat } from '../types';

apps/evm/src/pages/Market/OperationForm/BorrowForm/useForm/useFormValidation.ts

@@ -1,10 +1,10 @@
+import { formatTokensToReadableValue } from '@venusprotocol/ui';
 import BigNumber from 'bignumber.js';
 import { useMemo } from 'react';
 
 import type { Asset, Pool } from 'types';
 
 import { useTranslation } from 'libs/translations';
-import { formatTokensToReadableValue } from 'utilities';
 import type { FormError } from '../../types';
 import type { FormErrorCode, FormValues } from './types';
 

apps/evm/src/pages/Market/OperationForm/SupplyForm/useForm/useFormValidation.ts

@@ -1,10 +1,10 @@
+import { formatTokensToReadableValue } from '@venusprotocol/ui';
 import BigNumber from 'bignumber.js';
 import { useMemo } from 'react';
 
 import { MAXIMUM_PRICE_IMPACT_THRESHOLD_PERCENTAGE } from 'constants/swap';
 import { useTranslation } from 'libs/translations';
 import type { Asset, Swap, SwapError } from 'types';
-import { formatTokensToReadableValue } from 'utilities';
 import { getSwapToTokenAmountReceivedTokens } from 'utilities/getSwapToTokenAmountReceived';
 import type { FormError } from '../../types';
 import type { FormErrorCode, FormValues } from './types';

apps/evm/src/pages/Pools/PoolTable/index.tsx

@@ -1,4 +1,5 @@
 /** @jsxImportSource @emotion/react */
+import { formatCentsToReadableValue } from '@venusprotocol/ui';
 import BigNumber from 'bignumber.js';
 import { useMemo } from 'react';
 
@@ -8,7 +9,6 @@ import { routes } from 'constants/routing';
 import { useTranslation } from 'libs/translations';
 import { useAccountAddress } from 'libs/wallet';
 import type { Pool } from 'types';
-import { formatCentsToReadableValue } from 'utilities';
 
 import { useBreakpointUp } from 'hooks/responsive';
 import { useStyles } from './styles';