diff --git a/apps/evm/src/clients/api/queries/getSponsorshipVaultData/index.ts b/apps/evm/src/clients/api/queries/getSponsorshipVaultData/index.ts index e48914e642..ddec7e21cb 100644 --- a/apps/evm/src/clients/api/queries/getSponsorshipVaultData/index.ts +++ b/apps/evm/src/clients/api/queries/getSponsorshipVaultData/index.ts @@ -15,8 +15,10 @@ const getSponsorshipVaultData = async ({ publicClient, }: GetSponsorshipVaultDataInput): Promise => { 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], @@ -24,6 +26,7 @@ const getSponsorshipVaultData = async ({ 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 index 1c44398356..b486615a9c 100644 --- 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/apps/evm/src/libs/wallet/img/icons/gasGreen.svg b/apps/evm/src/components/Icon/icons/gas.tsx similarity index 62% rename from apps/evm/src/libs/wallet/img/icons/gasGreen.svg rename to apps/evm/src/components/Icon/icons/gas.tsx index 53628410c0..869061b4e3 100644 --- a/apps/evm/src/libs/wallet/img/icons/gasGreen.svg +++ b/apps/evm/src/components/Icon/icons/gas.tsx @@ -1,3 +1,19 @@ - - - +import type { SVGProps } from 'react'; + +const SvgGas = (props: SVGProps) => ( + + + +); + +export default SvgGas; diff --git a/apps/evm/src/libs/wallet/img/icons/gasOrange.svg b/apps/evm/src/components/Icon/icons/gasSad.tsx similarity index 52% rename from apps/evm/src/libs/wallet/img/icons/gasOrange.svg rename to apps/evm/src/components/Icon/icons/gasSad.tsx index c90ee97769..dcf7ef79ba 100644 --- a/apps/evm/src/libs/wallet/img/icons/gasOrange.svg +++ b/apps/evm/src/components/Icon/icons/gasSad.tsx @@ -1,7 +1,27 @@ - - - - - - - +import type { SVGProps } from 'react'; + +const SvgGasSad = (props: SVGProps) => ( + + + + + + + +); + +export default SvgGasSad; diff --git a/apps/evm/src/components/Icon/icons/gasSlashed.tsx b/apps/evm/src/components/Icon/icons/gasSlashed.tsx new file mode 100644 index 0000000000..e8300001b9 --- /dev/null +++ b/apps/evm/src/components/Icon/icons/gasSlashed.tsx @@ -0,0 +1,36 @@ +import type { SVGProps } from 'react'; + +const SvgGasSlashed = (props: SVGProps) => ( + + + + + + + + + + + +); + +export default SvgGasSlashed; diff --git a/apps/evm/src/components/Icon/icons/index.ts b/apps/evm/src/components/Icon/icons/index.ts index bf38ed6afc..9cafb205bc 100644 --- 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 index 871df7fce9..15943201ba 100644 --- 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 { buttonClassName?: string; } -const options: SelectOption[] = chains.map(chain => { - return { - label: ({ isRenderedInButton }) => { - const metadata = CHAIN_METADATA[chain.id as ChainId]; - return ( -
- {metadata.name} - {isRenderedInButton && } +const options: SelectOption[] = chains.map(chain => ({ + label: ({ isRenderedInButton }) => { + const metadata = CHAIN_METADATA[chain.id as ChainId]; + return ( +
+ {metadata.name} - {!isRenderedInButton && ( - - {metadata.name} - - - )} -
- ); - }, - value: chain.id, - }; -}); + {isRenderedInButton ? ( + + ) : ( + + {metadata.name} + + + + )} +
+ ); + }, + value: chain.id, +})); export const ChainSelect: React.FC = 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 index 0f433e9699..86d63d4d65 100644 --- 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 { + chainId?: ChainId; + wrapWithTooltip?: boolean; + displayLabel?: boolean; +} + +export const GaslessStatus: React.FC = ({ 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 = ( +
+ - if (variant === 'mobile') { - return ( -
- {t('gaslessTransactions.gas')} -
- ); - } - if (variant === 'chainSelector') { + {displayLabel && {t('gaslessTransactions.chainLabel')}} +
+ ); + + if (wrapWithTooltip) { + // @TODO: add link to docs return ( -
- {t('gaslessTransactions.gas')} - {t('gaslessTransactions.chainLabel')} -
+ , + }} + /> + } + > + {contentDom} + ); } - // @TODO: add link to docs - return ( - , - }} - /> - } - > -
- {t('gaslessTransactions.gas')} - {t('gaslessTransactions.chainLabel')} -
- - ); + 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 index 468e74e027..3749841fa5 100644 --- 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" /> - + { return (
-
- {t('gaslessTransactions.errorModal.title')} -

+
+ + +

{t('gaslessTransactions.errorModal.title')}

+

{t('gaslessTransactions.errorModal.description')}

+ -

diff --git a/apps/evm/src/libs/wallet/img/icons/gasSlashedGreen.svg b/apps/evm/src/libs/wallet/img/icons/gasSlashedGreen.svg deleted file mode 100644 index 7c92273f7f..0000000000 --- a/apps/evm/src/libs/wallet/img/icons/gasSlashedGreen.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - diff --git a/apps/evm/src/libs/wallet/img/icons/index.ts b/apps/evm/src/libs/wallet/img/icons/index.ts deleted file mode 100644 index 82e0783017..0000000000 --- a/apps/evm/src/libs/wallet/img/icons/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -import gasGreen from './gasGreen.svg'; -import gasOrange from './gasOrange.svg'; -import gasSlashedGreen from './gasSlashedGreen.svg'; - -export { gasGreen, gasOrange, gasSlashedGreen }; diff --git a/apps/evm/src/libs/wallet/index.ts b/apps/evm/src/libs/wallet/index.ts index 71c1d8a22d..6e60cc0814 100644 --- 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';