feat: create @venusprotocol/ui package

.changeset/brown-needles-tap.md

@@ -0,0 +1,7 @@
+---
+"@venusprotocol/landing": minor
+"@venusprotocol/ui": minor
+"@venusprotocol/evm": minor
+---
+
+add UI package

apps/evm/package.json

@@ -51,6 +51,7 @@
     "@sentry/vite-plugin": "^2.20.0",
     "@tanstack/react-query": "^5.48.0",
     "@venusprotocol/chains": "*",
+    "@venusprotocol/ui": "*",
     "@wagmi/core": "^2.16.4",
     "@yornaath/batshit": "^0.10.1",
     "bignumber.js": "^9.1.1",
@@ -167,15 +168,7 @@
     "whatwg-fetch": "^3.6.18"
   },
   "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+    "production": [">0.2%", "not dead", "not op_mini all"],
+    "development": ["last 1 chrome version", "last 1 firefox version", "last 1 safari version"]
   }
 }

apps/evm/src/App/index.tsx

@@ -4,10 +4,10 @@ import { Helmet } from 'react-helmet';
 import { HashRouter } from 'react-router-dom';
 
 import { queryClient } from 'clients/api';
+import { MuiThemeProvider } from 'containers/MuiThemeProvider';
 import { ErrorBoundary } from 'libs/errors';
 import { SentryErrorInfo } from 'libs/errors/SentryErrorInfo';
 import { Web3Wrapper } from 'libs/wallet';
-import { MuiThemeProvider } from 'theme/MuiThemeProvider';
 
 import { MAIN_PRODUCTION_HOST } from 'constants/production';
 import { ThemeHandler } from 'containers/ThemeHandler';

apps/evm/src/assets/styles/index.css

@@ -1,3 +1,6 @@
+@import '@venusprotocol/ui/fonts/proximaNova';
+@import '@venusprotocol/ui/theme';
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -13,105 +16,8 @@
   }
 }
 
-@layer base {
-  :root {
-    /* The next colors are taken from the UI kit in Figma */
-    --color-background: 24 29 39;
-    --color-cards: 30 36 49;
-    --color-grey: 170 179 202;
-    --color-lightGrey: 45 53 73;
-    --color-green: 0 195 142;
-    --color-red: 233 61 102;
-    --color-offWhite: 255 255 255;
-    --color-orange: 245 120 66;
-    --color-yellow: 245 178 66;
-    --color-blue: 58 120 255;
-    /* The next colors are not in the UI kit, but are used throughout the designs */
-    --color-mediumBlue: 38 90 204;
-    --color-darkBlue: 27 67 152;
-  }
-
-  .unichain-theme {
-    /* The next colors are taken from the UI kit in Figma */
-    --color-background: 19 19 19;
-    --color-cards: 27 27 27;
-    --color-grey: 179 185 202;
-    --color-lightGrey: 46 46 46;
-    --color-blue: 245 13 180;
-    /* The next colors are not in the UI kit, but are used throughout the designs */
-    --color-mediumBlue: 198 7 145;
-    --color-darkBlue: 170 6 124;
-  }
-}
-
-@font-face {
-  font-family: 'ProximaNova';
-  src:
-    url('../fonts/proximaNova/proximaNovaRegularIt.woff2') format('woff2'),
-    url('../fonts/proximaNova/proximaNovaRegularIt.woff') format('woff'),
-    url('../fonts/proximaNova/proximaNovaRegularIt.ttf') format('truetype');
-  font-weight: normal;
-  font-style: italic;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'ProximaNova';
-  src:
-    url('../fonts/proximaNova/proximaNovaRegular.woff2') format('woff2'),
-    url('../fonts/proximaNova/proximaNovaRegular.woff') format('woff'),
-    url('../fonts/proximaNova/proximaNovaRegular.ttf') format('truetype');
-  font-weight: normal;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'ProximaNova';
-  src:
-    url('../fonts/proximaNova/proximaNovaSemiboldIt.woff2') format('woff2'),
-    url('../fonts/proximaNova/proximaNovaSemiboldIt.woff') format('woff'),
-    url('../fonts/proximaNova/proximaNovaSemiboldIt.ttf') format('truetype');
-  font-weight: 600;
-  font-style: italic;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'ProximaNova';
-  src:
-    url('../fonts/proximaNova/proximaNovaSemibold.woff2') format('woff2'),
-    url('../fonts/proximaNova/proximaNovaSemibold.woff') format('woff'),
-    url('../fonts/proximaNova/proximaNovaSemibold.ttf') format('truetype');
-  font-weight: 600;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'ProximaNova';
-  src:
-    url('../fonts/proximaNova/proximaNovaBold.woff2') format('woff2'),
-    url('../fonts/proximaNova/proximaNovaBold.woff') format('woff'),
-    url('../fonts/proximaNova/proximaNovaBold.ttf') format('truetype');
-  font-weight: bold;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'ProximaNova';
-  src:
-    url('../fonts/proximaNova/proximaNovaBoldIt.woff2') format('woff2'),
-    url('../fonts/proximaNova/proximaNovaBoldIt.woff') format('woff'),
-    url('../fonts/proximaNova/proximaNovaBoldIt.ttf') format('truetype');
-  font-weight: bold;
-  font-style: italic;
-  font-display: swap;
-}
-
 body {
-  font-family: 'ProximaNova', sans-serif;
+  font-family: var(--font-proxima-nova), sans-serif;
   background-color: theme('colors.background');
   color: theme('colors.offWhite');
 }

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

@@ -1,5 +1,5 @@
+import { cn } from '@venusprotocol/ui';
 import { useState } from 'react';
-import { cn } from 'utilities';
 import { AccordionAnimatedContent } from '../AccordionAnimatedContent';
 import { Icon } from '../Icon';
 

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

@@ -1,5 +1,5 @@
+import { cn } from '@venusprotocol/ui';
 import { AnimatePresence, type HTMLMotionProps, motion } from 'motion/react';
-import { cn } from 'utilities';
 
 export interface AccordionAnimatedContentProps extends HTMLMotionProps<'div'> {
   isOpen: boolean;

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

@@ -2,8 +2,8 @@
 import { BigNumber } from 'bignumber.js';
 import { useMemo } from 'react';
 
+import { theme } from '@venusprotocol/ui';
 import { useTranslation } from 'libs/translations';
-import { theme } from 'theme';
 import type { Token } from 'types';
 import { convertMantissaToTokens } from 'utilities';
 

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

@@ -3,8 +3,8 @@ import { Typography } from '@mui/material';
 
 import { handleError } from 'libs/errors';
 
+import { PrimaryButton } from '@venusprotocol/ui';
 import { InfoIcon } from 'components/InfoIcon';
-import { PrimaryButton } from '../Button';
 import { useStyles } from './styles';
 
 export interface ApprovalStepsProps {

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/Apy/PrimeBadge/PrimeApy/index.tsx

@@ -3,7 +3,7 @@ import type BigNumber from 'bignumber.js';
 import { type ButtonProps, SenaryButton } from 'components';
 import useFormatPercentageToReadableValue from 'hooks/useFormatPercentageToReadableValue';
 
-import { cn } from 'utilities';
+import { cn } from '@venusprotocol/ui';
 import { PrimeIcon } from '../PrimeIcon';
 
 export interface PrimeApyProps extends Omit<ButtonProps, 'onClick'> {

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

@@ -1,5 +1,5 @@
+import { cn } from '@venusprotocol/ui';
 import { useTranslation } from 'libs/translations';
-import { cn } from 'utilities';
 import primeLogoSrc from './primeLogo.svg';
 
 export type PrimeIconProps = Omit<React.HTMLAttributes<HTMLImageElement>, 'alt' | 'src'>;

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

@@ -1,13 +1,13 @@
 import type BigNumber from 'bignumber.js';
 
+import { cn } from '@venusprotocol/ui';
 import { Tooltip, type TooltipProps } from 'components';
 import { PRIME_DOC_URL } from 'constants/prime';
 import { Link } from 'containers/Link';
 import { useIsFeatureEnabled } from 'hooks/useIsFeatureEnabled';
 import { usePrimeCalculatorPagePath } from 'hooks/usePrimeCalculatorPagePath';
 import { useTranslation } from 'libs/translations';
 import type { PrimeSimulationDistribution, Token } from 'types';
-import { cn } from 'utilities';
 import { PrimeApy } from './PrimeApy';
 import { PrimeIcon } from './PrimeIcon';
 import { SimulationText } from './SimulationText';

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

@@ -1,5 +1,5 @@
 /** @jsxImportSource @emotion/react */
-import { TertiaryButton } from '../Button';
+import { TertiaryButton } from '@venusprotocol/ui';
 import { useStyles } from './styles';
 
 export interface ButtonGroupProps {

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

@@ -1,5 +1,5 @@
 import { Slot } from '@radix-ui/react-slot';
-import { cn } from 'utilities';
+import { cn } from '@venusprotocol/ui';
 
 export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
   asChild?: boolean;

apps/evm/src/components/Carousel/CarouselItem/index.tsx

@@ -1,5 +1,5 @@
+import { cn } from '@venusprotocol/ui';
 import { forwardRef } from 'react';
-import { cn } from 'utilities';
 
 export const CarouselItem = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (

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

@@ -1,7 +1,7 @@
+import { cn } from '@venusprotocol/ui';
 import Autoplay from 'embla-carousel-autoplay';
 import useEmblaCarousel, { type UseEmblaCarouselType } from 'embla-carousel-react';
 import { forwardRef, useEffect, useState } from 'react';
-import { cn } from 'utilities';
 
 export type CarouselApi = UseEmblaCarouselType[1];
 export type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;

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

@@ -1,4 +1,4 @@
-import { cn } from 'utilities';
+import { cn } from '@venusprotocol/ui';
 import { InfoIcon } from '../InfoIcon';
 
 export interface Cell {

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

@@ -1,5 +1,5 @@
 /** @jsxImportSource @emotion/react */
-import { cn } from 'utilities';
+import { cn } from '@venusprotocol/ui';
 
 interface DelimiterProps {
   className?: string;

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

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 
+import { cn } from '@venusprotocol/ui';
 import { useBreakpointUp } from 'hooks/responsive';
-import { cn } from 'utilities';
 
 import { useTranslation } from 'libs/translations';
 import { Modal } from '../Modal';

apps/evm/src/components/EllipseAddress/types.ts

@@ -1,3 +1,3 @@
-import type { BREAKPOINTS } from 'theme/MuiThemeProvider/muiTheme';
+import type { BREAKPOINTS } from 'containers/MuiThemeProvider/muiTheme';
 
 export type Breakpoint = keyof typeof BREAKPOINTS.values;

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

@@ -1,6 +1,6 @@
+import { cn } from '@venusprotocol/ui';
 import { Button, NoticeError } from 'components';
 import { useTranslation } from 'libs/translations';
-import { cn } from 'utilities';
 
 export interface ErrorStateProps {
   message?: string;

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

@@ -1,5 +1,5 @@
 /** @jsxImportSource @emotion/react */
-import { cn } from 'utilities';
+import { cn } from '@venusprotocol/ui';
 
 import { Icon, type IconName } from '../Icon';
 import { Tooltip } from '../Tooltip';

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

@@ -1,5 +1,5 @@
+import { cn } from '@venusprotocol/ui';
 import type { Token } from 'types';
-import { cn } from 'utilities';
 
 import { InfoIcon } from 'components/InfoIcon';
 import { Icon, type IconName } from '../Icon';

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

@@ -1,4 +1,4 @@
-import { cn } from 'utilities';
+import { cn } from '@venusprotocol/ui';
 import { ProgressCircle } from '../ProgressCircle';
 
 export interface LabeledProgressCircleProps extends React.HTMLAttributes<HTMLDivElement> {

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

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 
+import { cn } from '@venusprotocol/ui';
 import { useTranslation } from 'libs/translations';
-import { cn } from 'utilities';
 
 import { MarkdownViewer } from '../MarkdownViewer';
 import { Tabs } from '../Tabs';

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

@@ -1,7 +1,7 @@
 import Markdown from 'react-markdown';
 
+import { cn } from '@venusprotocol/ui';
 import { Link } from 'containers/Link';
-import { cn } from 'utilities';
 
 export interface MarkdownViewerProps {
   content: string;

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

@@ -6,7 +6,7 @@ import type { ReactElement } from 'react';
 
 import config from 'config';
 
-import { cn } from 'utilities';
+import { cn } from '@venusprotocol/ui';
 import { Icon } from '../Icon';
 import { useModalStyles } from './styles';
 

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

@@ -1,8 +1,7 @@
-import { cn } from 'utilities';
+import { cn } from '@venusprotocol/ui';
 
-import { TextButton } from '../Button';
+import { Spinner, TextButton } from '@venusprotocol/ui';
 import { Icon, type IconName } from '../Icon';
-import { Spinner } from '../Spinner';
 import type { NoticeProps, NoticeVariant } from './types';
 
 export * from './types';

apps/evm/src/components/Pagination/index.stories.tsx

@@ -2,7 +2,7 @@
 import type { Meta, StoryFn } from '@storybook/react';
 import noop from 'noop-ts';
 
-import { PALETTE } from 'theme/MuiThemeProvider/muiTheme';
+import { PALETTE } from 'containers/MuiThemeProvider/muiTheme';
 
 import { Pagination } from '.';
 

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

@@ -2,7 +2,7 @@
 import Typography from '@mui/material/Typography';
 import type { ReactElement } from 'react';
 
-import { Button } from '../Button';
+import { Button } from '@venusprotocol/ui';
 import { Icon, type IconProps } from '../Icon';
 import { useStyles } from './styles';
 import { usePagination } from './usePagination';

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

@@ -1,4 +1,4 @@
-import { cn } from 'utilities';
+import { cn } from '@venusprotocol/ui';
 
 export type PillProps = React.HTMLAttributes<HTMLDivElement>;
 

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

@@ -4,7 +4,7 @@ import MaterialSlider from '@mui/material/Slider';
 import type { SliderTypeMap } from '@mui/material/Slider/Slider';
 import { useCallback } from 'react';
 
-import { PALETTE } from 'theme/MuiThemeProvider/muiTheme';
+import { PALETTE } from 'containers/MuiThemeProvider/muiTheme';
 
 import { Tooltip, type TooltipProps } from '../Tooltip';
 import { useStyles } from './styles';