Skip to content

Commit

Permalink
Add support for unlocked EIGEN and hide permissionless tokens (#217)
Browse files Browse the repository at this point in the history
  • Loading branch information
vincenthongzy authored Oct 10, 2024
1 parent 99de02d commit 88512df
Show file tree
Hide file tree
Showing 5 changed files with 47 additions and 147 deletions.
84 changes: 13 additions & 71 deletions src/avs/AVSDetailsTVLTab.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import {
EIGEN_STRATEGY,
lstStrategyAssetMapping
} from '../shared/strategies';
import { formatETH, formatNumber, formatUSD } from '../shared/formatters';
import { formatETH, formatUSD } from '../shared/formatters';
import { handleServiceError, reduceState } from '../shared/helpers';
import {
Skeleton,
Expand All @@ -13,14 +13,12 @@ import {
TableCell,
TableColumn,
TableHeader,
TableRow,
Tooltip
TableRow
} from '@nextui-org/react';
import { useEffect, useMemo, useState } from 'react';
import { useEffect, useMemo } from 'react';
import ErrorMessage from '../shared/ErrorMessage';
import { ParentSize } from '@visx/responsive';
import ThirdPartyLogo from '../shared/ThirdPartyLogo';
import { tooltip } from '../shared/slots';
import TVLTabLineChart from './charts/TVLTabLineChart';
import TVLTabTreemap from './charts/TVLTabTreemap';
import { useMutativeReducer } from 'use-mutative';
Expand Down Expand Up @@ -168,7 +166,7 @@ const tokens = {

function TokensBreakdownList({ avsError, totalTokens, isAVSLoading, ethRate }) {
const sortedTotalTokens = useMemo(() => {
const arr = Object.entries(totalTokens).filter(t => t[0] !== 'eigen');
const arr = Object.entries(totalTokens);
arr.sort((a, b) => b[1] - a[1]);
return arr;
}, [totalTokens]);
Expand Down Expand Up @@ -225,7 +223,7 @@ function TokensBreakdownList({ avsError, totalTokens, isAVSLoading, ethRate }) {
<div className="flex items-center gap-x-2 truncate">
<ThirdPartyLogo
className="size-6 min-w-6"
url={tokens[key].logo}
url={tokens[key]?.logo}
/>
<span className="truncate text-foreground-2">
{tokens[key].name}
Expand All @@ -247,34 +245,6 @@ function TokensBreakdownList({ avsError, totalTokens, isAVSLoading, ethRate }) {
</TableCell>
</TableRow>
))}
{!isAVSLoading && (
<TableRow>
<TableCell className="pl-0 text-sm">
<div className="flex items-center gap-x-2 truncate">
<ThirdPartyLogo
className="size-6 min-w-6"
url={tokens['eigen'].logo}
/>
<span className="truncate text-foreground-2">
{tokens['eigen'].name}
</span>
<span className="text-foreground-1">
{tokens['eigen'].symbol}
</span>
{<span className="text-foreground-1">N/A</span>}
</div>
</TableCell>
<TableCell className="flex justify-end text-sm">
<div className="text-end">
<EigenDisclaimer />

<div className="text-xs text-foreground-2">
{`${formatNumber(totalTokens['eigen'], compact)} EIGEN`}
</div>
</div>
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
);
Expand All @@ -290,7 +260,13 @@ function LSTBreakdownList({ avsError, lst, ethRate, isAVSLoading }) {

const arr = Object.entries(lst);
arr.sort((a, b) => Number(b[1]) - Number(a[1]));
return arr.filter(([strategy]) => !exclude.has(strategy));
// TODO(vincenthongzy): Stop-gap measure to make sure
// permissionless tokens do not distrupt UI.
// We should revert and handle it properly soon.
return arr.filter(
([strategy]) =>
!exclude.has(strategy) && strategy in lstStrategyAssetMapping
);
}, [avsError, lst, isAVSLoading]);

const compact = !useTailwindBreakpoint('md');
Expand Down Expand Up @@ -339,7 +315,7 @@ function LSTBreakdownList({ avsError, lst, ethRate, isAVSLoading }) {
<div className="flex items-center gap-x-2">
<ThirdPartyLogo
className="size-6 min-w-6"
url={lstStrategyAssetMapping[key].logo}
url={lstStrategyAssetMapping[key]?.logo}
/>
<span className="truncate text-foreground-2">
{lstStrategyAssetMapping[key]?.name}
Expand All @@ -364,37 +340,3 @@ function LSTBreakdownList({ avsError, lst, ethRate, isAVSLoading }) {
</Table>
);
}

function EigenDisclaimer() {
const [isOpen, setOpen] = useState(false);

return (
<div className="inline-flex items-center gap-x-1">
N/A
<Tooltip
classNames={tooltip}
content={
<>
EIGEN is currently not listed on any exchanges so we are unable to
get its USD value. Information will be updated when the token is
available on centralized/decentralized exchanges.
</>
}
isOpen={isOpen}
onOpenChange={open => setOpen(open)}
placement="top"
showArrow={true}
>
<span
className="material-symbols-outlined cursor-pointer text-sm"
onPointerDown={() => setOpen(!isOpen)}
style={{
fontVariationSettings: `'FILL' 0`
}}
>
info
</span>
</Tooltip>
</div>
);
}
4 changes: 2 additions & 2 deletions src/avs/charts/TVLTabTreemap.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -43,8 +43,8 @@ export default function TVLTabTreemap({ width, height, ethRate, lst }) {
return Object.entries(lst)
.filter(([strategy]) => !filters.has(strategy))
.map(([strategy, value]) => ({
name: allStrategyAssetMapping[strategy].name,
symbol: allStrategyAssetMapping[strategy].symbol,
name: allStrategyAssetMapping[strategy]?.name,
symbol: allStrategyAssetMapping[strategy]?.symbol,
value: Number(value)
}));
}, [lst, state.useAllStrategies]);
Expand Down
16 changes: 15 additions & 1 deletion src/lst/LST.jsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
import {
BEACON_STRATEGY,
EIGEN_STRATEGY,
lstStrategyAssetMapping
} from '../shared/strategies';
import { handleServiceError, reduceState } from '../shared/helpers';
import ErrorMessage from '../shared/ErrorMessage';
import LSTDistribution from './LSTDistribution';
Expand Down Expand Up @@ -39,8 +44,17 @@ export default function LST() {
return 0;
});

const exclude = new Set([EIGEN_STRATEGY, BEACON_STRATEGY]);

// TODO(vincenthongzy): Stop-gap measure to make sure
// permissionless tokens do not distrupt UI.
// We should revert and handle it properly soon.
dispatch({
rankings,
rankings: rankings.filter(
ranking =>
!exclude.has(ranking.address) &&
ranking.address in lstStrategyAssetMapping
),
ethRate: current.rate,
lst: data,
isLoadingLST: false
Expand Down
6 changes: 3 additions & 3 deletions src/lst/LSTList.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -48,14 +48,14 @@ export default function LSTList({ data, latestRate }) {
</span>
<ThirdPartyLogo
className="size-6 min-w-6"
url={lstStrategyAssetMapping[address].logo}
url={lstStrategyAssetMapping[address]?.logo}
/>
<span className="truncate text-foreground-2">
{lstStrategyAssetMapping[address].name}
{lstStrategyAssetMapping[address]?.name}
</span>

<span className="mx-1 text-foreground-1">
{lstStrategyAssetMapping[address].symbol}
{lstStrategyAssetMapping[address]?.symbol}
</span>
</div>
</TableCell>
Expand Down
84 changes: 14 additions & 70 deletions src/operators/OperatorDetails.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import {
EIGEN_STRATEGY,
lstStrategyAssetMapping
} from '../shared/strategies';
import { formatETH, formatNumber, formatUSD } from '../shared/formatters';
import { formatETH, formatUSD } from '../shared/formatters';
import { handleServiceError, reduceState } from '../shared/helpers';
import {
Link,
Expand All @@ -16,10 +16,9 @@ import {
TableColumn,
TableHeader,
TableRow,
Tabs,
Tooltip
Tabs
} from '@nextui-org/react';
import { useEffect, useMemo, useState } from 'react';
import { useEffect, useMemo } from 'react';
import { useLocation, useNavigate, useParams } from 'react-router-dom';
import CopyButton from '../shared/CopyButton';
import ErrorMessage from '../shared/ErrorMessage';
Expand All @@ -28,7 +27,6 @@ import OperatorRestakersLineChart from './charts/OperatorRestakersLineChart';
import OperatorTVLLineChart from './charts/OperatorTVLLineChart';
import { ParentSize } from '@visx/responsive';
import ThirdPartyLogo from '../shared/ThirdPartyLogo';
import { tooltip } from '../shared/slots';
import { truncateAddress } from '../shared/helpers';
import TVLTabTreemap from '../avs/charts/TVLTabTreemap';
import { useMutativeReducer } from 'use-mutative';
Expand Down Expand Up @@ -372,7 +370,7 @@ function TokensBreakdownList({
ethRate
}) {
const sortedTotalTokens = useMemo(() => {
const arr = Object.entries(totalTokens).filter(t => t[0] !== 'eigen');
const arr = Object.entries(totalTokens);
arr.sort((a, b) => b[1] - a[1]);
return arr;
}, [totalTokens]);
Expand Down Expand Up @@ -429,7 +427,7 @@ function TokensBreakdownList({
<div className="flex items-center gap-x-2 truncate">
<ThirdPartyLogo
className="size-6 min-w-6"
url={tokens[key].logo}
url={tokens[key]?.logo}
/>
<span className="truncate text-foreground-2">
{tokens[key].name}
Expand All @@ -452,33 +450,6 @@ function TokensBreakdownList({
</TableCell>
</TableRow>
))}
{!isOperatorLoading && (
<TableRow>
<TableCell className="pl-0 text-sm">
<div className="flex items-center gap-x-2 truncate">
<ThirdPartyLogo
className="size-6 min-w-6"
url={tokens['eigen'].logo}
/>
<span className="truncate text-foreground-2">
{tokens['eigen'].name}
</span>
<span className="text-foreground-1">
{tokens['eigen'].symbol}
</span>
{<span className="text-foreground-1">N/A</span>}
</div>
</TableCell>
<TableCell className="flex justify-end text-sm">
<div className="text-end">
<EigenDisclaimer />
<div className="text-xs text-foreground-2">
{`${formatNumber(totalTokens['eigen'], compact)} EIGEN`}
</div>
</div>
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
);
Expand All @@ -494,7 +465,14 @@ function LSTBreakdownList({ operatorError, lst, ethRate, isOperatorLoading }) {

const arr = Object.entries(lst);
arr.sort((a, b) => Number(b[1]) - Number(a[1]));
return arr.filter(([strategy]) => !exclude.has(strategy));

// TODO(vincenthongzy): Stop-gap measure to make sure
// permissionless tokens do not distrupt UI.
// We should revert and handle it properly soon.
return arr.filter(
([strategy]) =>
!exclude.has(strategy) && strategy in lstStrategyAssetMapping
);
}, [operatorError, lst, isOperatorLoading]);

const compact = !useTailwindBreakpoint('md');
Expand Down Expand Up @@ -553,7 +531,7 @@ function LSTBreakdownList({ operatorError, lst, ethRate, isOperatorLoading }) {
<div className="flex items-center gap-x-2">
<ThirdPartyLogo
className="size-6 min-w-6"
url={lstStrategyAssetMapping[key].logo}
url={lstStrategyAssetMapping[key]?.logo}
/>
<span className="truncate text-foreground-2">
{lstStrategyAssetMapping[key]?.name}
Expand All @@ -579,40 +557,6 @@ function LSTBreakdownList({ operatorError, lst, ethRate, isOperatorLoading }) {
);
}

function EigenDisclaimer() {
const [isOpen, setOpen] = useState(false);

return (
<div className="inline-flex items-center gap-x-1">
N/A
<Tooltip
classNames={tooltip}
content={
<>
EIGEN is currently not listed on any exchanges so we are unable to
get its USD value. Information will be updated when the token is
available on centralized/decentralized exchanges.
</>
}
isOpen={isOpen}
onOpenChange={open => setOpen(open)}
placement="top"
showArrow={true}
>
<span
className="material-symbols-outlined cursor-pointer text-sm"
onPointerDown={() => setOpen(!isOpen)}
style={{
fontVariationSettings: `'FILL' 0`
}}
>
info
</span>
</Tooltip>
</div>
);
}

function AVSList({ list, error, isLoading }) {
const navigate = useNavigate();

Expand Down

0 comments on commit 88512df

Please sign in to comment.