feat: add Boost tab UI

Author: therealemjy

.changeset/twenty-sites-smile.md

@@ -0,0 +1,5 @@
+---
+"@venusprotocol/evm": minor
+---
+
+add base Boost tab

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

@@ -26,7 +26,7 @@ export const Accordion: React.FC<AccordionProps> = ({
       >
         {!!title && <span className="text-grey">{title}</span>}
 
-        <div className="ml-auto justify-self-end flex items-center gap-x-1">
+        <div className="ml-auto justify-self-end flex items-center gap-x-1 text-sm">
           {!!rightLabel && <span>{rightLabel}</span>}
 
           <Icon name="arrowUp" className={cn('text-grey w-5 h-5', !isOpen && 'rotate-180')} />

apps/evm/src/components/Icon/icons/arrowRightFull.tsx

@@ -0,0 +1,29 @@
+import type { SVGProps } from 'react';
+
+const SvgArrowRightFull = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M5 12.3334L18.3332 12.3334"
+      stroke="#AAB3CA"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M14.3333 8.99996L18.3333 12.3138L14.3333 15.6666"
+      stroke="#AAB3CA"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+);
+
+export default SvgArrowRightFull;

apps/evm/src/components/Icon/icons/index.ts

@@ -73,3 +73,4 @@ export { default as transactionCollateral } from './transactionCollateral';
 export { default as transactionLink } from './transactionLink';
 export { default as eMode } from './eMode';
 export { default as gear } from './gear';
+export { default as arrowRightFull } from './arrowRightFull';

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

@@ -28,7 +28,7 @@ export const LabeledInlineContent = ({
     className={cn('flex w-full items-center justify-between space-x-4', className)}
     {...otherContainerProps}
   >
-    <div className="flex items-center text-sm md:text-base">
+    <div className="flex items-center text-sm">
       {typeof iconSrc === 'string' && (
         <Icon name={iconSrc} className={cn('-mt-[2px] mr-2 h-5 w-5', iconClassName)} />
       )}
@@ -37,18 +37,13 @@ export const LabeledInlineContent = ({
         <TokenIcon token={iconSrc} className="-mt-[2px] mr-2 h-5 w-5" />
       )}
 
-      <p className={cn('text-sm md:text-base', invertTextColors ? 'text-offWhite' : 'text-grey')}>
-        {label}
-      </p>
+      <p className={cn('text-sm', invertTextColors ? 'text-offWhite' : 'text-grey')}>{label}</p>
 
       {!!tooltip && <InfoIcon className="ml-2 inline-flex items-center" tooltip={tooltip} />}
     </div>
 
     <div
-      className={cn(
-        'flex items-center text-sm md:text-base',
-        invertTextColors ? 'text-grey' : 'text-offWhite',
-      )}
+      className={cn('flex items-center text-sm', invertTextColors ? 'text-grey' : 'text-offWhite')}
     >
       {children}
     </div>

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

@@ -21,6 +21,7 @@ export const Notice = ({
   description,
   variant = 'info',
   onClose,
+  size = 'md',
   ...otherProps
 }: NoticeProps) => (
   <div
@@ -36,7 +37,8 @@ export const Notice = ({
   >
     <div
       className={cn(
-        'flex transition-colors ease-linear px-3 py-2 md:px-4 md:py-3',
+        'flex transition-colors ease-linear px-3 py-2',
+        size === 'md' && 'md:px-4 md:py-3',
         variant === 'info' && 'bg-blue/5',
         variant === 'error' && 'bg-red/5',
         variant === 'success' && 'bg-green/5',
@@ -50,7 +52,8 @@ export const Notice = ({
           ) : (
             <Icon
               className={cn(
-                'h-4 w-4 md:h-5 md:w-5',
+                'h-4 w-4',
+                size === 'md' && 'md:h-5 md:w-5',
                 variant === 'info' && 'text-blue',
                 variant === 'error' && 'text-red',
                 variant === 'success' && 'text-green',
@@ -64,7 +67,9 @@ export const Notice = ({
         <div className="grow overflow-hidden break-words space-y-2">
           {title && <p className="text-sm font-semibold">{title}</p>}
 
-          {!!description && <p className="text-xs md:text-sm">{description}</p>}
+          {!!description && (
+            <p className={cn('text-xs', size === 'md' && 'md:text-sm')}>{description}</p>
+          )}
         </div>
       </div>
 

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

@@ -6,5 +6,6 @@ export interface NoticeProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
   description?: string | ReactElement;
   title?: string | ReactElement;
   variant?: NoticeVariant;
+  size?: 'sm' | 'md';
   onClose?: () => void;
 }

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

@@ -12,12 +12,12 @@ export const RiskAcknowledgementToggle: React.FC<RiskAcknowledgementToggleProps>
 
   return (
     <div className={cn('space-y-3', className)}>
-      <NoticeError description={t('operationForm.riskyOperation.warning')} />
+      <NoticeError description={t('operationForm.riskyOperation.warning')} size="sm" />
 
       <div className="flex gap-x-3">
         <Toggle {...toggleProps} />
 
-        <p>{t('operationForm.riskyOperation.toggleLabel')}</p>
+        <p className="text-sm">{t('operationForm.riskyOperation.toggleLabel')}</p>
       </div>
     </div>
   );