refactor: update GaslessStatus props + move gas icons to Icon compone…

…nt directory
VenusProtocol · Oct 15, 2024 · b4d60b7 · b4d60b7
1 parent 1b51d8c
commit b4d60b7
Show file tree

Hide file tree

Showing 13 changed files with 168 additions and 103 deletions.
diff --git a/apps/evm/src/clients/api/queries/getSponsorshipVaultData/index.ts b/apps/evm/src/clients/api/queries/getSponsorshipVaultData/index.ts
@@ -15,15 +15,18 @@ const getSponsorshipVaultData = async ({
   publicClient,
 }: GetSponsorshipVaultDataInput): Promise<GetSponsorshipVaultDataOutput> => {
   const { vaultAddress, walletAddress } = config.zyFi;
+
   const res = await publicClient.readContract({
     address: vaultAddress,
+    // TODO: add ABI to contracts package config
     abi: parseAbi(['function balances(address addr) view returns (uint256)']),
     functionName: 'balances',
     args: [walletAddress],
   });
 
   const amountLeft = new BigNumber(res.toString());
   const hasEnoughFunds = amountLeft.gt(new BigNumber(10).pow(14));
+
   return {
     amountLeft,
     hasEnoughFunds,

diff --git a/apps/evm/src/components/Button/index.tsx b/apps/evm/src/components/Button/index.tsx
@@ -42,7 +42,7 @@ const getVariantClasses = ({ variant, active }: { variant: Variant; active: bool
       );
     case 'text':
       return cn(
-        'active:mediumBlue text-blue hover:text-mediumBlue bg-transparent p-0 font-normal',
+        'active:mediumBlue text-blue hover:text-mediumBlue bg-transparent p-0',
         active && 'text-mediumBlue',
       );
     // primary

diff --git a/...vm/src/libs/wallet/img/icons/gasGreen.svg → apps/evm/src/components/Icon/icons/gas.tsx b/...vm/src/libs/wallet/img/icons/gasGreen.svg → apps/evm/src/components/Icon/icons/gas.tsx
@@ -1,3 +1,19 @@
-<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M13.0133 5.32L13.02 5.31333L10.54 2.83333L9.83333 3.54L11.24 4.94667C10.6133 5.18667 10.1667 5.78667 10.1667 6.5C10.1667 7.42 10.9133 8.16667 11.8333 8.16667C12.0733 8.16667 12.2933 8.11333 12.5 8.02667V12.8333C12.5 13.2 12.2 13.5 11.8333 13.5C11.4667 13.5 11.1667 13.2 11.1667 12.8333V9.83333C11.1667 9.1 10.5667 8.5 9.83333 8.5H9.16667V3.83333C9.16667 3.1 8.56667 2.5 7.83333 2.5H3.83333C3.1 2.5 2.5 3.1 2.5 3.83333V14.5H9.16667V9.5H10.1667V12.8333C10.1667 13.7533 10.9133 14.5 11.8333 14.5C12.7533 14.5 13.5 13.7533 13.5 12.8333V6.5C13.5 6.04 13.3133 5.62 13.0133 5.32ZM7.83333 7.16667H3.83333V3.83333H7.83333V7.16667ZM11.8333 7.16667C11.4667 7.16667 11.1667 6.86667 11.1667 6.5C11.1667 6.13333 11.4667 5.83333 11.8333 5.83333C12.2 5.83333 12.5 6.13333 12.5 6.5C12.5 6.86667 12.2 7.16667 11.8333 7.16667Z" fill="#00C38E"/>
-</svg>
+import type { SVGProps } from 'react';
+
+const SvgGas = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    width="16"
+    height="17"
+    viewBox="0 0 16 17"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M13.0133 5.32L13.02 5.31333L10.54 2.83333L9.83333 3.54L11.24 4.94667C10.6133 5.18667 10.1667 5.78667 10.1667 6.5C10.1667 7.42 10.9133 8.16667 11.8333 8.16667C12.0733 8.16667 12.2933 8.11333 12.5 8.02667V12.8333C12.5 13.2 12.2 13.5 11.8333 13.5C11.4667 13.5 11.1667 13.2 11.1667 12.8333V9.83333C11.1667 9.1 10.5667 8.5 9.83333 8.5H9.16667V3.83333C9.16667 3.1 8.56667 2.5 7.83333 2.5H3.83333C3.1 2.5 2.5 3.1 2.5 3.83333V14.5H9.16667V9.5H10.1667V12.8333C10.1667 13.7533 10.9133 14.5 11.8333 14.5C12.7533 14.5 13.5 13.7533 13.5 12.8333V6.5C13.5 6.04 13.3133 5.62 13.0133 5.32ZM7.83333 7.16667H3.83333V3.83333H7.83333V7.16667ZM11.8333 7.16667C11.4667 7.16667 11.1667 6.86667 11.1667 6.5C11.1667 6.13333 11.4667 5.83333 11.8333 5.83333C12.2 5.83333 12.5 6.13333 12.5 6.5C12.5 6.86667 12.2 7.16667 11.8333 7.16667Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export default SvgGas;
diff --git a/...m/src/libs/wallet/img/icons/gasOrange.svg → .../evm/src/components/Icon/icons/gasSad.tsx b/...m/src/libs/wallet/img/icons/gasOrange.svg → .../evm/src/components/Icon/icons/gasSad.tsx
@@ -1,7 +1,27 @@
-<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M54.7879 17.5455L54.8182 17.5152L44.2526 6.94955C43.862 6.55903 43.2289 6.55903 42.8383 6.94955L41.0404 8.74746C40.6499 9.13798 40.6499 9.77115 41.0404 10.1617L46.7273 15.8485C43.8788 16.9394 41.8485 19.6667 41.8485 22.9091C41.8485 27.0909 45.2424 30.4849 49.4242 30.4849C50.5152 30.4849 51.5152 30.2424 52.4545 29.8485V51.697C52.4545 53.3637 51.0909 54.7273 49.4242 54.7273C47.7576 54.7273 46.3939 53.3637 46.3939 51.697V38.0606C46.3939 34.7273 43.6667 32 40.3333 32H37.303V10.7879C37.303 7.45457 34.5758 4.72729 31.2424 4.72729H13.0606C9.72727 4.72729 7 7.45457 7 10.7879V59.2728H37.303V36.5455H41.8485V51.697C41.8485 55.8788 45.2424 59.2728 49.4242 59.2728C53.6061 59.2728 57 55.8788 57 51.697V22.9091C57 20.8182 56.1515 18.9091 54.7879 17.5455ZM49.4242 25.9394C47.7576 25.9394 46.3939 24.5758 46.3939 22.9091C46.3939 21.2424 47.7576 19.8788 49.4242 19.8788C51.0909 19.8788 52.4545 21.2424 52.4545 22.9091C52.4545 24.5758 51.0909 25.9394 49.4242 25.9394Z" fill="#F57842"/>
-<rect x="9" y="7" width="26" height="19" rx="4" fill="white"/>
-<circle cx="16.2727" cy="14.2727" r="1.77273" fill="#F57842" stroke="#F57842"/>
-<circle cx="27.6365" cy="14.2727" r="1.77273" fill="#F57842" stroke="#F57842"/>
-<path d="M25 21V21C25 19.8954 24.1046 19 23 19L21 19C19.8954 19 19 19.8954 19 21V21" stroke="#F57842" stroke-width="2"/>
-</svg>
+import type { SVGProps } from 'react';
+
+const SvgGasSad = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    width="64"
+    height="64"
+    viewBox="0 0 64 64"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M54.7879 17.5455L54.8182 17.5152L44.2526 6.94955C43.862 6.55903 43.2289 6.55903 42.8383 6.94955L41.0404 8.74746C40.6499 9.13798 40.6499 9.77115 41.0404 10.1617L46.7273 15.8485C43.8788 16.9394 41.8485 19.6667 41.8485 22.9091C41.8485 27.0909 45.2424 30.4849 49.4242 30.4849C50.5152 30.4849 51.5152 30.2424 52.4545 29.8485V51.697C52.4545 53.3637 51.0909 54.7273 49.4242 54.7273C47.7576 54.7273 46.3939 53.3637 46.3939 51.697V38.0606C46.3939 34.7273 43.6667 32 40.3333 32H37.303V10.7879C37.303 7.45457 34.5758 4.72729 31.2424 4.72729H13.0606C9.72727 4.72729 7 7.45457 7 10.7879V59.2728H37.303V36.5455H41.8485V51.697C41.8485 55.8788 45.2424 59.2728 49.4242 59.2728C53.6061 59.2728 57 55.8788 57 51.697V22.9091C57 20.8182 56.1515 18.9091 54.7879 17.5455ZM49.4242 25.9394C47.7576 25.9394 46.3939 24.5758 46.3939 22.9091C46.3939 21.2424 47.7576 19.8788 49.4242 19.8788C51.0909 19.8788 52.4545 21.2424 52.4545 22.9091C52.4545 24.5758 51.0909 25.9394 49.4242 25.9394Z"
+      fill="currentColor"
+    />
+    <rect x="9" y="7" width="26" height="19" rx="4" fill="white" />
+    <circle cx="16.2727" cy="14.2727" r="1.77273" fill="currentColor" stroke="currentColor" />
+    <circle cx="27.6365" cy="14.2727" r="1.77273" fill="currentColor" stroke="currentColor" />
+    <path
+      d="M25 21V21C25 19.8954 24.1046 19 23 19L21 19C19.8954 19 19 19.8954 19 21V21"
+      stroke="currentColor"
+      stroke-width="2"
+    />
+  </svg>
+);
+
+export default SvgGasSad;
diff --git a/apps/evm/src/components/Icon/icons/gasSlashed.tsx b/apps/evm/src/components/Icon/icons/gasSlashed.tsx
@@ -0,0 +1,36 @@
+import type { SVGProps } from 'react';
+
+const SvgGasSlashed = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <g clip-path="url(#clip0_208_1879)">
+      <rect
+        x="0.894043"
+        y="0.686768"
+        width="20.2831"
+        height="1"
+        transform="rotate(45 0.894043 0.686768)"
+        fill="currentColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M2.74802 2.56116C2.59202 2.77942 2.5 3.04615 2.5 3.33333V14H9.16667V9H9.18686L6.85353 6.66667H3.83333V3.64647L2.74802 2.56116ZM7.83333 6.23226V3.33333H4.93441L3.61849 2.01742C3.68847 2.00596 3.76024 2 3.83333 2H7.83333C8.56667 2 9.16667 2.6 9.16667 3.33333V7.56559L7.83333 6.23226ZM9.60107 8L11.1667 9.56559V9.33333C11.1667 8.6 10.5667 8 9.83333 8H9.60107ZM11.1667 10.9798V12.3333C11.1667 12.7 11.4667 13 11.8333 13C12.2 13 12.5 12.7 12.5 12.3333V12.3131L13.3042 13.1174C13.0236 13.6425 12.47 14 11.8333 14C10.9133 14 10.1667 13.2533 10.1667 12.3333V9.97981L11.1667 10.9798ZM13.5 11.8989L12.5 10.8989V7.52667C12.2933 7.61333 12.0733 7.66667 11.8333 7.66667C10.9133 7.66667 10.1667 6.92 10.1667 6C10.1667 5.28667 10.6133 4.68667 11.24 4.44667L9.83333 3.04L10.54 2.33333L13.02 4.81333L13.0133 4.82C13.3133 5.12 13.5 5.54 13.5 6V11.8989ZM11.1667 6C11.1667 6.36667 11.4667 6.66667 11.8333 6.66667C12.2 6.66667 12.5 6.36667 12.5 6C12.5 5.63333 12.2 5.33333 11.8333 5.33333C11.4667 5.33333 11.1667 5.63333 11.1667 6Z"
+        fill="currentColor"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_208_1879">
+        <rect width="16" height="16" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+export default SvgGasSlashed;
diff --git a/apps/evm/src/components/Icon/icons/index.ts b/apps/evm/src/components/Icon/icons/index.ts
@@ -54,3 +54,6 @@ export { default as bridge } from './bridge';
 export { default as lido } from './lido';
 export { default as eth } from './eth';
 export { default as document } from './document';
+export { default as gas } from './gas';
+export { default as gasSlashed } from './gasSlashed';
+export { default as gasSad } from './gasSad';
diff --git a/apps/evm/src/containers/Layout/Header/TopBar/ChainSelect/index.tsx b/apps/evm/src/containers/Layout/Header/TopBar/ChainSelect/index.tsx
@@ -4,33 +4,33 @@ import { useTranslation } from 'libs/translations';
 import { chains, useChainId, useSwitchChain } from 'libs/wallet';
 import type { ChainId } from 'types';
 import { cn } from 'utilities';
-import GaslessStatus from '../GaslessStatus';
+import { GaslessStatus } from '../GaslessStatus';
 
 export interface ChainSelectProps extends Omit<SelectProps, 'value' | 'onChange' | 'options'> {
   buttonClassName?: string;
 }
 
-const options: SelectOption<ChainId>[] = chains.map(chain => {
-  return {
-    label: ({ isRenderedInButton }) => {
-      const metadata = CHAIN_METADATA[chain.id as ChainId];
-      return (
-        <div className="flex items-center">
-          <img src={metadata.logoSrc} alt={metadata.name} className="w-5 max-w-none flex-none" />
-          {isRenderedInButton && <GaslessStatus chainId={chain.id} variant="mobile" />}
+const options: SelectOption<ChainId>[] = chains.map(chain => ({
+  label: ({ isRenderedInButton }) => {
+    const metadata = CHAIN_METADATA[chain.id as ChainId];
+    return (
+      <div className="flex items-center">
+        <img src={metadata.logoSrc} alt={metadata.name} className="w-5 max-w-none flex-none" />
 
-          {!isRenderedInButton && (
-            <span className={cn('flex flex-row ml-2 grow text-ellipsis')}>
-              {metadata.name}
-              <GaslessStatus chainId={chain.id} variant="chainSelector" />
-            </span>
-          )}
-        </div>
-      );
-    },
-    value: chain.id,
-  };
-});
+        {isRenderedInButton ? (
+          <GaslessStatus chainId={chain.id} className="md:hidden ml-1" />
+        ) : (
+          <span className={cn('flex ml-2 grow items-center gap-x-1')}>
+            <span>{metadata.name}</span>
+
+            <GaslessStatus chainId={chain.id} displayLabel />
+          </span>
+        )}
+      </div>
+    );
+  },
+  value: chain.id,
+}));
 
 export const ChainSelect: React.FC<ChainSelectProps> = props => {
   const { t } = useTranslation();

diff --git a/apps/evm/src/containers/Layout/Header/TopBar/GaslessStatus/index.tsx b/apps/evm/src/containers/Layout/Header/TopBar/GaslessStatus/index.tsx
@@ -1,61 +1,65 @@
 import { useGetSponsorshipVaultData } from 'clients/api';
-import { Tooltip } from 'components';
+import { Icon, Tooltip } from 'components';
 import { Link } from 'containers/Link';
 import { useTranslation } from 'libs/translations';
-import { gasGreen, gasSlashedGreen, useChainId } from 'libs/wallet';
+import { useChainId } from 'libs/wallet';
 import type { ChainId } from 'types';
+import { cn } from 'utilities';
 
-const GaslessStatus = ({
+export interface GaslessStatusProps extends React.HTMLAttributes<HTMLDivElement> {
+  chainId?: ChainId;
+  wrapWithTooltip?: boolean;
+  displayLabel?: boolean;
+}
+
+export const GaslessStatus: React.FC<GaslessStatusProps> = ({
   chainId,
-  variant,
-}: { chainId?: ChainId; variant: 'header' | 'chainSelector' | 'mobile' }) => {
+  wrapWithTooltip = false,
+  displayLabel = false,
+  className,
+  ...otherProps
+}) => {
   const { t, Trans } = useTranslation();
   const { chainId: chainIdFromHook } = useChainId();
   const { data: sponsorshipVaultData } = useGetSponsorshipVaultData({
     chainId: chainId ?? chainIdFromHook,
   });
 
-  if (sponsorshipVaultData?.hasEnoughFunds !== true) return null;
+  if (sponsorshipVaultData?.hasEnoughFunds !== true) {
+    return undefined;
+  }
 
-  const containerClassName =
-    variant === 'header'
-      ? 'hidden md:flex flex-row text-green [font-variant:all-small-caps] mr-'
-      : 'flex flex-row text-green [font-variant:all-small-caps] ml-1 mr-2';
+  const contentDom = (
+    <div
+      className={cn(
+        'text-green [font-variant:all-small-caps] flex items-center gap-x-[2px]',
+        className,
+      )}
+      {...otherProps}
+    >
+      <Icon name={displayLabel ? 'gas' : 'gasSlashed'} className="text-green" />
 
-  if (variant === 'mobile') {
-    return (
-      <div className="block md:hidden">
-        <img src={gasSlashedGreen} alt={t('gaslessTransactions.gas')} className="ml-1" />
-      </div>
-    );
-  }
-  if (variant === 'chainSelector') {
+      {displayLabel && <span className="font-semibold">{t('gaslessTransactions.chainLabel')}</span>}
+    </div>
+  );
+
+  if (wrapWithTooltip) {
+    // @TODO: add link to docs
     return (
-      <div className={containerClassName}>
-        <img src={gasGreen} alt={t('gaslessTransactions.gas')} className="mr-1" />
-        <span>{t('gaslessTransactions.chainLabel')}</span>
-      </div>
+      <Tooltip
+        title={
+          <Trans
+            i18nKey="gaslessTransactions.tooltip"
+            components={{
+              Link: <Link href={''} />,
+            }}
+          />
+        }
+      >
+        {contentDom}
+      </Tooltip>
     );
   }
 
-  // @TODO: add link to docs
-  return (
-    <Tooltip
-      title={
-        <Trans
-          i18nKey="gaslessTransactions.tooltip"
-          components={{
-            Link: <Link href={''} />,
-          }}
-        />
-      }
-    >
-      <div className={containerClassName}>
-        <img src={gasGreen} alt={t('gaslessTransactions.gas')} className="mr-1" />
-        <span>{t('gaslessTransactions.chainLabel')}</span>
-      </div>
-    </Tooltip>
-  );
+  return contentDom;
 };
-
-export default GaslessStatus;
diff --git a/apps/evm/src/containers/Layout/Header/TopBar/MdUpControls/index.tsx b/apps/evm/src/containers/Layout/Header/TopBar/MdUpControls/index.tsx
@@ -3,7 +3,7 @@ import { ConnectButton } from 'containers/Layout/ConnectButton';
 import { cn } from 'utilities';
 import { useIsOnMarketPage } from '../../useIsOnMarketPage';
 import { ChainSelect } from '../ChainSelect';
-import GaslessStatus from '../GaslessStatus';
+import { GaslessStatus } from '../GaslessStatus';
 
 export const MdUpControls: React.FC = () => {
   const isOnMarketPage = useIsOnMarketPage();
@@ -15,7 +15,7 @@ export const MdUpControls: React.FC = () => {
         className="flex-none md:whitespace-nowrap"
       />
 
-      <GaslessStatus variant="header" />
+      <GaslessStatus wrapWithTooltip displayLabel className="cursor-help" />
 
       <ChainSelect
         variant={isOnMarketPage ? 'tertiary' : 'primary'}

diff --git a/apps/evm/src/containers/ResendPayingGasModal/index.tsx b/apps/evm/src/containers/ResendPayingGasModal/index.tsx
@@ -1,7 +1,6 @@
-import { Button, Modal, type ModalProps } from 'components';
+import { Button, Icon, Modal, type ModalProps } from 'components';
 import { useSendTransaction } from 'hooks/useSendTransaction';
 import { useTranslation } from 'libs/translations';
-import { gasOrange } from 'libs/wallet/img/icons';
 import { create } from 'zustand';
 
 interface ResendPayingGasModalStore {
@@ -42,28 +41,29 @@ const ResendPayingGasModal: React.FC = () => {
   return (
     <Modal isOpen={isOpen} handleClose={closeModal} hideCloseButton>
       <div className="flex flex-col">
-        <div className="flex flex-col items-center justify-center">
-          <img
-            src={gasOrange}
-            alt={t('gaslessTransactions.errorModal.title')}
-            className="h-16 w-16"
-          />
-          <h4 className="text-center font-semibold text-xl mt-6">
+        <div className="flex flex-col items-center justify-center mb-3">
+          <Icon name="gasSad" className="h-16 w-16 text-orange mb-6" />
+
+          <h4 className="text-center font-semibold text-xl">
             {t('gaslessTransactions.errorModal.title')}
           </h4>
         </div>
+
         <p className="text-center text-grey mb-8">
           {t('gaslessTransactions.errorModal.description')}
         </p>
+
         <Button
           onClick={() => {
             resendTokenAsync(mutationInput);
             closeModal();
           }}
+          className="mb-2"
         >
           {t('gaslessTransactions.errorModal.resendButtonLabel')}
         </Button>
-        <Button onClick={closeModal} variant="text" className="mt-3">
+
+        <Button onClick={closeModal} variant="text">
           {t('gaslessTransactions.errorModal.cancel')}
         </Button>
       </div>

diff --git a/apps/evm/src/libs/wallet/img/icons/gasSlashedGreen.svg b/apps/evm/src/libs/wallet/img/icons/gasSlashedGreen.svg
diff --git a/apps/evm/src/libs/wallet/img/icons/index.ts b/apps/evm/src/libs/wallet/img/icons/index.ts
diff --git a/apps/evm/src/libs/wallet/index.ts b/apps/evm/src/libs/wallet/index.ts
@@ -11,4 +11,3 @@ export * from './hooks/useSwitchChain';
 export * from './hooks/useChainId';
 export * from './hooks/useAuthModal';
 export * from './hooks/useAddTokenToWallet';
-export * from './img/icons';