feat: wip

apps/evm/src/components/Apy/BoostTooltip/index.tsx

@@ -1,9 +1,10 @@
+import { cn } from '@venusprotocol/ui';
 import type BigNumber from 'bignumber.js';
 import { Tooltip, type TooltipProps } from 'components';
 import { Link } from 'containers/Link';
 import { useTranslation } from 'libs/translations';
 import type { PointDistribution, Token, TokenDistribution } from 'types';
-import { cn, formatPercentageToReadableValue } from 'utilities';
+import { formatPercentageToReadableValue } from 'utilities';
 import { Distribution, type DistributionProps } from './Distribution';
 import starsIconSrc from './stars.svg';
 

apps/evm/src/components/SelectTokenTextField/TokenList/index.tsx

@@ -2,10 +2,11 @@
 import { Typography } from '@mui/material';
 import { type InputHTMLAttributes, useMemo, useState } from 'react';
 
+import { cn } from '@venusprotocol/ui';
 import { TokenIconWithSymbol } from 'components/TokenIconWithSymbol';
 import { useTranslation } from 'libs/translations';
 import type { Token, TokenBalance } from 'types';
-import { cn, convertMantissaToTokens } from 'utilities';
+import { convertMantissaToTokens } from 'utilities';
 
 import { SenaryButton } from '@venusprotocol/ui';
 import { TextField } from '../../TextField';

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

@@ -1,10 +1,11 @@
 import type BigNumber from 'bignumber.js';
 
+import { cn } from '@venusprotocol/ui';
 import { BorrowBalanceAccountHealth, LabeledInlineContent, ValueUpdate } from 'components';
 import { SAFE_BORROW_LIMIT_PERCENTAGE } from 'constants/safeBorrowLimitPercentage';
 import { useTranslation } from 'libs/translations';
 import type { Asset, Pool, Swap, TokenAction } from 'types';
-import { cn, formatPercentageToReadableValue, formatTokensToReadableValue } from 'utilities';
+import { formatPercentageToReadableValue, formatTokensToReadableValue } from 'utilities';
 import useGetValues from './useGetValues';
 
 export interface AccountDataProps {

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

@@ -1,11 +1,13 @@
 import { useMemo } from 'react';
 
+import { cn } from '@venusprotocol/ui';
 import { type Breakpoint, EllipseAddress } from 'components/EllipseAddress';
 import { Icon } from 'components/Icon';
 import { Link } from 'containers/Link';
 import { useTranslation } from 'libs/translations';
 import type { ChainId } from 'types';
-import { type UrlType, cn, generateExplorerUrl } from 'utilities';
+import { generateExplorerUrl } from 'utilities';
+import type { UrlType } from 'utilities';
 import type { Address } from 'viem';
 
 export interface ChainExplorerLinkProps {

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

@@ -1,13 +1,14 @@
 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, Checkbox, Modal, PrimaryButton } from 'components';
 import { useGetChainMetadata } from 'hooks/useGetChainMetadata';
 import { VError, handleError } from 'libs/errors';
 import { useTranslation } from 'libs/translations';
 import { useAccountAddress } from 'libs/wallet';
-import { cn, formatCentsToReadableValue } from 'utilities';
+import { formatCentsToReadableValue } from 'utilities';
 
 import { ConnectWallet } from 'containers/ConnectWallet';
 import { SwitchChain } from 'containers/SwitchChain';

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

@@ -1,5 +1,6 @@
+import { cn } from '@venusprotocol/ui';
 import type { ChainId, Token, VToken } from 'types';
-import { cn, generateExplorerUrl } from 'utilities';
+import { generateExplorerUrl } from 'utilities';
 
 type ConditionalTokenDropdownOptionProps =
   | {

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

@@ -1,6 +1,7 @@
 /** @jsxImportSource @emotion/react */
 import { useMemo } from 'react';
 
+import { cn } from '@venusprotocol/ui';
 import {
   InfoIcon,
   LayeredValues,
@@ -17,7 +18,6 @@ import { useTranslation } from 'libs/translations';
 import { useAccountChainId, useChainId } from 'libs/wallet';
 import {
   areAddressesEqual,
-  cn,
   compareBigNumbers,
   compareBooleans,
   compareStrings,

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

@@ -1,6 +1,7 @@
 import BigNumber from 'bignumber.js';
 import { useMemo } from 'react';
 
+import { cn } from '@venusprotocol/ui';
 import { ReactComponent as PrimeLogo } from 'assets/img/primeLogo.svg';
 import {
   useClaimPrimeToken,
@@ -23,7 +24,7 @@ import { useGetToken } from 'libs/tokens';
 import { useTranslation } from 'libs/translations';
 import { useAccountAddress } from 'libs/wallet';
 import type { Token } from 'types';
-import { cn, convertMantissaToTokens, generatePseudoRandomRefetchInterval } from 'utilities';
+import { convertMantissaToTokens, generatePseudoRandomRefetchInterval } from 'utilities';
 
 import NoPrimeTokensLeftWarning from './NoPrimeTokensLeftWarning';
 import PrimeTokensLeft from './PrimeTokensLeft';

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

@@ -1,7 +1,8 @@
+import { cn } from '@venusprotocol/ui';
 import { useGetVTokens } from 'clients/api';
 import { useGetTokens } from 'libs/tokens';
 import type { ChainId, ProposalAction } from 'types';
-import { cn, generateExplorerUrl } from 'utilities';
+import { generateExplorerUrl } from 'utilities';
 
 import formatSignature from './formatSignature';
 import getContractName from './getContractName';

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

@@ -3,6 +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 { useBridgeXvs, useGetBalanceOf, useGetXvsBridgeFeeEstimation } from 'clients/api';
 import {
   ApproveTokenSteps,
@@ -32,7 +33,7 @@ import { useGetToken } from 'libs/tokens';
 import { useTranslation } from 'libs/translations';
 import { useAccountAddress, useChainId, useSwitchChain } from 'libs/wallet';
 import { ChainId } from 'types';
-import { cn, convertMantissaToTokens, formatTokensToReadableValue } from 'utilities';
+import { convertMantissaToTokens, formatTokensToReadableValue } from 'utilities';
 import { ChainSelect, getOptionsFromChainsList } from './ChainSelect';
 import { bridgeChains } from './constants';
 import { ReactComponent as LayerZeroLogo } from './layerZeroLogo.svg';

apps/evm/src/pages/Governance/ProposalList/GovernanceProposal/Status/index.tsx

@@ -1,9 +1,10 @@
+import { cn } from '@venusprotocol/ui';
 import { Icon, LabeledProgressCircle } from 'components';
 import { useNow } from 'hooks/useNow';
 import { useTranslation } from 'libs/translations';
 import { useMemo } from 'react';
 import { ProposalState, type RemoteProposal, RemoteProposalState } from 'types';
-import { cn, getProposalStateLabel } from 'utilities';
+import { getProposalStateLabel } from 'utilities';
 import { isProposalExecutable } from 'utilities/isProposalExecutable';
 import { Indicator } from './Indicator';
 

apps/evm/src/pages/Governance/VotingWallet/index.tsx

@@ -1,6 +1,7 @@
 import BigNumber from 'bignumber.js';
 import { useMemo, useState } from 'react';
 
+import { cn } from '@venusprotocol/ui';
 import {
   useGetCurrentVotes,
   useGetVestingVaults,
@@ -25,7 +26,7 @@ import { useIsFeatureEnabled } from 'hooks/useIsFeatureEnabled';
 import { useGetToken } from 'libs/tokens';
 import { useTranslation } from 'libs/translations';
 import { governanceChain, useAccountAddress, useAuthModal, useSwitchChain } from 'libs/wallet';
-import { areTokensEqual, cn, convertMantissaToTokens } from 'utilities';
+import { areTokensEqual, convertMantissaToTokens } from 'utilities';
 
 import { NULL_ADDRESS } from 'constants/address';
 import DelegateModal from './DelegateModal';

apps/evm/src/pages/Market/Page/OperationForm/BorrowForm/index.tsx

@@ -1,6 +1,7 @@
 import BigNumber from 'bignumber.js';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 
+import { cn } from '@venusprotocol/ui';
 import { useBorrow } from 'clients/api';
 import { Delimiter, LabeledInlineContent, Toggle, TokenTextField } from 'components';
 import { SAFE_BORROW_LIMIT_PERCENTAGE } from 'constants/safeBorrowLimitPercentage';
@@ -12,7 +13,7 @@ import { useIsFeatureEnabled } from 'hooks/useIsFeatureEnabled';
 import { useGetNativeTokenGatewayContractAddress } from 'libs/contracts';
 import { useTranslation } from 'libs/translations';
 import type { Asset, Pool } from 'types';
-import { cn, convertTokensToMantissa } from 'utilities';
+import { convertTokensToMantissa } from 'utilities';
 
 import { NULL_ADDRESS } from 'constants/address';
 import { ConnectWallet } from 'containers/ConnectWallet';

apps/evm/src/pages/Market/Page/OperationForm/RepayForm/index.tsx

@@ -1,6 +1,7 @@
 import BigNumber from 'bignumber.js';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 
+import { cn } from '@venusprotocol/ui';
 import { useRepay, useSwapTokensAndRepay } from 'clients/api';
 import {
   Delimiter,
@@ -26,7 +27,6 @@ import { useAccountAddress } from 'libs/wallet';
 import type { Asset, Pool, Swap, SwapError, TokenBalance } from 'types';
 import {
   areTokensEqual,
-  cn,
   convertMantissaToTokens,
   convertTokensToMantissa,
   formatPercentageToReadableValue,

apps/evm/src/pages/Market/Page/OperationForm/SupplyForm/index.tsx

@@ -1,6 +1,7 @@
 import BigNumber from 'bignumber.js';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 
+import { cn } from '@venusprotocol/ui';
 import { useSupply, useSwapTokensAndSupply } from 'clients/api';
 import {
   Delimiter,
@@ -29,7 +30,6 @@ import { useAccountAddress, useAccountChainId, useChainId } from 'libs/wallet';
 import type { Asset, Pool, Swap, SwapError, TokenBalance } from 'types';
 import {
   areTokensEqual,
-  cn,
   convertMantissaToTokens,
   convertTokensToMantissa,
   getUniqueTokenBalances,

apps/evm/src/pages/Market/Page/OperationForm/SwapDetails/index.tsx

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
 
+import { cn } from '@venusprotocol/ui';
 import { Accordion, LabeledInlineContent } from 'components';
 import {
   HIGH_PRICE_IMPACT_THRESHOLD_PERCENTAGE,
@@ -9,7 +10,7 @@ import useConvertMantissaToReadableTokenString from 'hooks/useConvertMantissaToR
 import useFormatTokensToReadableValue from 'hooks/useFormatTokensToReadableValue';
 import { useTranslation } from 'libs/translations';
 import type { Swap } from 'types';
-import { cn, formatPercentageToReadableValue } from 'utilities';
+import { formatPercentageToReadableValue } from 'utilities';
 
 const readableSlippageTolerancePercentage = formatPercentageToReadableValue(
   SLIPPAGE_TOLERANCE_PERCENTAGE,

apps/evm/src/pages/Market/Page/OperationForm/WithdrawForm/index.tsx

@@ -1,6 +1,7 @@
 import BigNumber from 'bignumber.js';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 
+import { cn } from '@venusprotocol/ui';
 import { useGetVTokenBalanceOf, useWithdraw } from 'clients/api';
 import { Delimiter, LabeledInlineContent, Toggle, TokenTextField } from 'components';
 import { AccountData } from 'containers/AccountData';
@@ -13,7 +14,7 @@ import { VError } from 'libs/errors';
 import { useTranslation } from 'libs/translations';
 import { useAccountAddress } from 'libs/wallet';
 import type { Asset, Pool } from 'types';
-import { cn, convertTokensToMantissa } from 'utilities';
+import { convertTokensToMantissa } from 'utilities';
 
 import { NULL_ADDRESS } from 'constants/address';
 import { ConnectWallet } from 'containers/ConnectWallet';

apps/landing/src/assets/styles/variables.css

@@ -1,14 +1,5 @@
 :root {
-    --color-bg-secondary: #1E2431;
-    --color-bg-secondary-transparent: #FFFFFF1A;
+    --color-background-secondary: #1E2431;
     --color-icon-background: #2D3549;
-    --color-banner-bg: #F50DB4;
-
-    --font-fallback: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-    --font-default: var(--font-proxima-nova), var(--font-fallback);
-    --font-intro: 'Inconsolata', var(--font-fallback);
-
     --global-max-width: 1280px;
 }

apps/landing/src/components/Banner/Banner.module.css

@@ -9,7 +9,7 @@
 .banner {
   position: relative;
   width: 100%;
-  background-color: var(--color-banner-bg);
+  background-color: #F50DB4;
   border-radius: 8px;
   padding: 8px 16px;
   display: flex;

apps/landing/src/components/Benefits/Benefits.module.css

@@ -17,7 +17,7 @@
 }
 
 .benefitItem {
-    background-color: var(--color-bg-secondary);
+    background-color: var(--color-background-secondary);
     border-radius: 8px;
     padding: 24px;
     border: 1px solid rgb(var(--color-lightGrey));

apps/landing/src/components/Footer/Footer.module.css

@@ -1,7 +1,7 @@
 .root {
     margin-top: auto;
     width: 100%;
-    background-color: var(--color-bg-secondary);
+    background-color: var(--color-background-secondary);
 }
 
 .container {
@@ -176,7 +176,7 @@
 
     @media (min-width: 640px) {
         display: flex;
-        border-top: 1px solid var(--color-bg-secondary);
+        border-top: 1px solid var(--color-background-secondary);
     }
 
     @media (min-width: 840px) {

apps/landing/src/components/Governance/Governance.module.css

@@ -17,7 +17,7 @@
 
     border: 1px solid rgb(var(--color-lightGrey));
     border-radius: 24px;
-    background-color: var(--color-bg-secondary);
+    background-color: var(--color-background-secondary);
 
     height: 542px;
 

apps/landing/src/components/Header/MenuMobile.module.css

@@ -9,7 +9,7 @@
     display: block;
 
     &+& {
-        border-top: 1px solid var(--color-bg-secondary);
+        border-top: 1px solid var(--color-background-secondary);
     }
 
     &:after {

apps/landing/src/components/MainContent/Intro.module.css

@@ -107,7 +107,7 @@
     & + & {
         margin-left: 24px;
         padding-left: 24px;
-        border-left: 1px solid var(--color-bg-secondary-transparent);
+        border-left: 1px solid #FFFFFF1A;
     }
 }
 

apps/landing/src/components/Market/Market.module.css

@@ -232,20 +232,3 @@
         color: rgb(var(--color-blue))
     }
 }
-
-.ruler {
-    background-color: var(--color-bg-secondary-transparent);
-    border: 0;
-    height: 1px;
-    margin: 16px 0 16px 0;
-}
-
-.ourLiquidities {
-    text-align: center;
-    font-size: 12px;
-    line-height: 150%;
-}
-
-.numberGreen {
-    color: #00C38E;
-}

apps/landing/src/components/Safety/Safety.module.css

@@ -82,7 +82,7 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    background-color: var(--color-bg-secondary);
+    background-color: var(--color-background-secondary);
     text-decoration: none;
     overflow: hidden;
 }

apps/landing/src/components/VenusPrime/VenusPrime.module.css

@@ -21,7 +21,7 @@
     background-position: left;
     background-repeat: no-repeat;
     background-size: contain;
-    background-color: var(--color-bg-secondary);
+    background-color: var(--color-background-secondary);
 
     padding: 24px;