feat: add base Boost tab

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/Field/index.tsx

@@ -0,0 +1,18 @@
+export interface FieldProps {
+  children: React.ReactNode;
+  className?: string;
+  label?: string;
+  description?: string | React.ReactElement;
+}
+
+export const Field: React.FC<FieldProps> = ({ children, className, label, description }) => (
+  <div className={className}>
+    <div className="space-y-1">
+      {!!label && <p className="text-sm text-grey">{label}</p>}
+
+      <div>{children}</div>
+    </div>
+
+    {!!description && <p className="block mt-1 text-grey text-sm">{description}</p>}
+  </div>
+);

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/RiskAcknowledgementToggle/index.tsx

@@ -17,7 +17,7 @@ export const RiskAcknowledgementToggle: React.FC<RiskAcknowledgementToggleProps>
       <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>
   );

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

@@ -1,8 +1,8 @@
 import { fireEvent, getByTestId } from '@testing-library/react';
 
 import type { Token } from 'types';
-
-import { getTokenListItemTestId, getTokenSelectButtonTestId } from '../testIdGetters';
+import { getTokenListItemTestId } from '../../TokenListWrapper/testIdGetters';
+import { getTokenSelectButtonTestId } from '../testIdGetters';
 
 export const selectToken = ({
   token,