copyToClipboard('contracts')}
- className={'cursor-copy rounded-md bg-neutral-200 py-1 px-2 text-sm'}>
+ className={'cursor-copy rounded-md bg-neutral-200 px-2 py-1 text-sm'}>
{'contracts'}
{' object in the '}
copyToClipboard('b2c.json')}
- className={'cursor-copy rounded-md bg-neutral-200 py-1 px-2 text-sm'}>
+ className={'cursor-copy rounded-md bg-neutral-200 px-2 py-1 text-sm'}>
{'b2c.json'}
{'file.'}
copyToClipboard('_vault_v0.4.3.json')}
- className={'cursor-copy rounded-md bg-neutral-200 py-1 px-2 text-sm'}>
+ className={'cursor-copy rounded-md bg-neutral-200 px-2 py-1 text-sm'}>
{'_vault_v0.4.3.json'}
{' to '}
copyToClipboard(`${vault.address}.json`)}
- className={'cursor-copy rounded-md bg-neutral-200 py-1 px-2 text-sm'}>
+ className={'cursor-copy rounded-md bg-neutral-200 px-2 py-1 text-sm'}>
{`${vault.address}.json`}
copyToClipboard(currentStrategy.name)}
- className={'cursor-copy rounded-md bg-neutral-200 py-1 px-2 text-sm'}>
+ className={'cursor-copy rounded-md bg-neutral-200 px-2 py-1 text-sm'}>
{currentStrategy.name}
{' should belong to.'}
@@ -165,7 +169,7 @@ function VaultEntity({
{'3a. If the file exists, append the address of the strategy to the file, under "addresses": '}
copyToClipboard(currentStrategy.address)}
- className={'cursor-copy rounded-md bg-neutral-200 py-1 px-2 text-sm'}>
+ className={'cursor-copy rounded-md bg-neutral-200 px-2 py-1 text-sm'}>
{currentStrategy.address}
,
@@ -173,7 +177,7 @@ function VaultEntity({
{'3b. If the file does not exists, create a new one and append the address of the strategy to the file, under "addresses": '}
copyToClipboard(currentStrategy.address)}
- className={'cursor-copy rounded-md bg-neutral-200 py-1 px-2 text-sm'}>
+ className={'cursor-copy rounded-md bg-neutral-200 px-2 py-1 text-sm'}>
{currentStrategy.address}
@@ -200,7 +204,7 @@ function VaultEntity({
{'2. Add missing vault file with the filename '}
copyToClipboard(`${vault.address}.json`)}
- className={'cursor-copy rounded-md bg-neutral-200 py-1 px-2 text-sm'}>
+ className={'cursor-copy rounded-md bg-neutral-200 px-2 py-1 text-sm'}>
{`${vault.address}.json`}
@@ -217,7 +221,7 @@ function VaultEntity({
const hasStrategiesAnomaly = noStrategies;
const hasRiskAnomaly = vaultData?.strategies.some((strategy): boolean => (strategy?.risk?.riskGroup || 'Others') === 'Others');
- const riskScores = (vaultData?.strategies ?? []).map((strategy): { strategy: { address: string; name: string; }; sum: number; isValid: boolean } => {
+ const riskScores = (vaultData?.strategies ?? []).map((strategy): { strategy: { address: TAddress; name: string; }; sum: number; isValid: boolean } => {
const sum = (
(strategy?.risk?.riskDetails?.TVLImpact || 0)
+ (strategy?.risk?.riskDetails?.auditScore || 0)
@@ -367,14 +371,14 @@ function VaultEntity({
suffix: (
{'for vault '}
-
+
{vault.symbol || 'not_set'}
-
)
@@ -384,14 +388,14 @@ function VaultEntity({
suffix: (
{'for underlying token '}
-
+
{vault.token.symbol || 'not_set'}
-
)
@@ -421,7 +425,7 @@ function VaultEntity({
suffix: (
{'for vault '}
-
+
{vaultData?.name}
@@ -454,7 +458,7 @@ function VaultEntity({
suffix={(
{'for strategy '}
-
+
{strategy.name}
@@ -478,7 +482,7 @@ function VaultEntity({
suffix={(
{'for strategy '}
-
+
{riskScore.strategy.name}
{` (${riskScore.sum})`}
@@ -504,7 +508,7 @@ function VaultEntity({
suffix={(
{'for strategy '}
-
+
{description.strategy.name}
@@ -521,13 +525,13 @@ function VaultEntity({
isValid: !vaultData?.hasErrorAPY,
prefix: 'APY is set to ',
errorMessage: `[ ERROR: ${vault?.apy?.error || 'unknown'} ]`,
- suffix: `for vault - (Net APY: ${format.amount((vault?.apy?.net_apy || 0) * 100, 2, 4)}% | Gross APR: ${format.amount((vault?.apy?.gross_apr || 0) * 100, 2, 4)}%)`
+ suffix: `for vault - (Net APY: ${formatAmount((vault?.apy?.net_apy || 0) * 100, 2, 4)}% | Gross APR: ${formatAmount((vault?.apy?.gross_apr || 0) * 100, 2, 4)}%)`
}, {
isValid: !vaultData?.hasNewAPY,
isWarning: true,
prefix: 'APY is set to ',
errorMessage: '[ NEW ]',
- suffix: `for vault - (Net APY: ${format.amount((vault?.apy?.net_apy || 0) * 100, 2, 4)}% | Gross APR: ${format.amount((vault?.apy?.gross_apr || 0) * 100, 2, 4)}%)`
+ suffix: `for vault - (Net APY: ${formatAmount((vault?.apy?.net_apy || 0) * 100, 2, 4)}% | Gross APR: ${formatAmount((vault?.apy?.gross_apr || 0) * 100, 2, 4)}%)`
}]} /> : null}
{((vaultSettings.shouldShowMissingTranslations && !vaultSettings.shouldShowOnlyAnomalies) || (vaultSettings.shouldShowOnlyAnomalies && shouldRenderDueToMissingTranslations)) ? (
@@ -546,7 +550,7 @@ function VaultEntity({
suffix={(
{'for '}
-
+
{shortAddress}
@@ -565,14 +569,14 @@ function VaultEntity({
suffix: (
{'for want token '}
-
+
{vaultData?.token?.symbol || 'not_set'}
-
)
diff --git a/components/common/AddressWithActions.tsx b/components/common/AddressWithActions.tsx
new file mode 100644
index 0000000..c186b99
--- /dev/null
+++ b/components/common/AddressWithActions.tsx
@@ -0,0 +1,64 @@
+import {useWeb3} from '@yearn-finance/web-lib/contexts/useWeb3';
+import {IconCopy} from '@yearn-finance/web-lib/icons/IconCopy';
+import {IconLinkOut} from '@yearn-finance/web-lib/icons/IconLinkOut';
+import {TAddress} from '@yearn-finance/web-lib/types';
+import {toENS} from '@yearn-finance/web-lib/utils/address';
+import {copyToClipboard} from '@yearn-finance/web-lib/utils/helpers';
+import {getNetwork} from '@yearn-finance/web-lib/utils/wagmi/utils';
+import React, {ReactElement, useEffect, useState} from 'react';
+
+type TAddressWithActions = {
+ address: TAddress;
+ explorer?: string;
+ truncate?: number;
+ wrapperClassName?: string;
+ className?: string;
+};
+
+export function AddressWithActions({
+ address,
+ explorer = '',
+ truncate = 5,
+ wrapperClassName,
+ className = ''
+}: TAddressWithActions): ReactElement {
+ const {chainID} = useWeb3();
+ const [explorerURI, set_explorerURI] = useState('');
+
+ useEffect((): void => {
+ if (explorer !== '') {
+ set_explorerURI(explorer);
+ return;
+ }
+
+ const network = getNetwork(chainID).defaultBlockExplorer;
+ if (network) {
+ set_explorerURI(network);
+ }
+ }, [chainID, explorer]);
+
+ return (
+
+ {toENS(address, truncate > 0, truncate)}
+ + + + ); +} diff --git a/components/common/Card.tsx b/components/common/Card.tsx new file mode 100644 index 0000000..4293b58 --- /dev/null +++ b/components/common/Card.tsx @@ -0,0 +1,145 @@ +import React, {Fragment, ReactElement} from 'react'; +import {Disclosure, Tab} from '@headlessui/react'; +import {AnimatePresence, motion} from 'framer-motion'; +import {IconChevron} from '@yearn-finance/web-lib/icons/IconChevron'; + +export type TCard = { + className?: string; + variant?: 'surface' | 'background'; + padding?: 'none' | 'narrow' | 'regular'; + onClick?: React.MouseEventHandler; + children?: React.ReactNode; +} & React.ComponentPropsWithoutRef<'section'>; + +export type TCardDetailSummary = { + startChildren?: React.ReactNode; + endChildren?: React.ReactNode; + open?: boolean; +} & React.ComponentPropsWithoutRef<'div'>; + +export type TCardWithTabsOption = { + label: string; + children: ReactElement; +} + +export type TCardWithTabs = { + tabs: TCardWithTabsOption[]; +} + +export type TCardDetail = { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + summary?: TCardDetailSummary | ReactElement | ((p: unknown) => ReactElement | TCardDetailSummary) | any; + variant?: 'surface' | 'background'; + isSticky?: boolean; + children?: React.ReactNode; +} & React.ComponentPropsWithoutRef<'div'>; + +function CardDetailsSummary({startChildren, endChildren, ...props}: TCardDetailSummary): ReactElement{ + return ( +{option.label}
+