Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add AVS list to Operator details #188

Merged
merged 6 commits into from
Aug 16, 2024
Merged

Add AVS list to Operator details #188

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
1e25e83
Update copy
vincenthongzy Aug 16, 2024
56da50d
Add AVS list in Operator details page
vincenthongzy Aug 16, 2024
d1fdc42
Add empty state to AVS list
vincenthongzy Aug 16, 2024
4123d5e
Make AVS list have min height when displaying error message
vincenthongzy Aug 16, 2024
6666913
Shorten property names
rubo Aug 16, 2024
9d0eec0
Set tab skeleton min width
rubo Aug 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ const router = createBrowserRouter(
<Route element={<AVSDetails />} path="/avs/:address/:tab?" />
<Route element={<LRT />} path="/lrt" />
<Route element={<OperatorList />} path="/operators" />
<Route element={<OperatorDetails />} path="/operators/:address" />
<Route element={<OperatorDetails />} path="/operators/:address/:tab?" />
<Route element={<LST />} path="/lst" />
<Route element={<NotFound />} path="*" />
</Route>
Expand Down
2 changes: 1 addition & 1 deletion src/avs/AVSDetails.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ export default function AVSDetails() {
cursor: 'rounded border border-outline shadow-none',
panel: 'p-0',
tab: 'h-fit p-2',
tabList: 'rd-box w-full p-2'
tabList: 'rd-box w-full !overflow-x-scroll p-2'
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@rubo the rd-boxs overflow hidden caused the tab list horizontal scroll to stop working on smaller screens

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It works now on a mobile. What's the problem?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It fails when there are errors. The error messages causes each tab to be longer than usual, causing tabs to be cut off.

Copy link
Contributor

@rubo rubo Aug 16, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Got it. I'll check but for this particular container disabling it is ok.

}}
disabledKeys={['restakers']}
radius="sm"
Expand Down
247 changes: 202 additions & 45 deletions src/operators/OperatorDetails.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,21 @@ import {
EIGEN_STRATEGY
} from '../shared/strategies';
import { handleServiceError, reduceState } from '../shared/helpers';
import { Link, Progress, Skeleton, Spinner } from '@nextui-org/react';
import {
Link,
Progress,
Skeleton,
Spinner,
Tab,
Table,
TableBody,
TableCell,
TableColumn,
TableHeader,
TableRow,
Tabs
} from '@nextui-org/react';
import { useLocation, useNavigate, useParams } from 'react-router-dom';
import CopyButton from '../shared/CopyButton';
import ErrorMessage from '../shared/ErrorMessage';
import { formatETH } from '../shared/formatters';
Expand All @@ -16,12 +30,13 @@ import ThirdPartyLogo from '../shared/ThirdPartyLogo';
import { truncateAddress } from '../shared/helpers';
import { useEffect } from 'react';
import { useMutativeReducer } from 'use-mutative';
import { useParams } from 'react-router-dom';
import { useServices } from '../@services/ServiceContext';
import { useTailwindBreakpoint } from '../shared/hooks/useTailwindBreakpoint';

export default function OperatorDetails() {
const { address } = useParams();
const { address, tab } = useParams();
const { pathname } = useLocation();

const [state, dispatch] = useMutativeReducer(reduceState, {
error: undefined,
ethRate: undefined,
Expand Down Expand Up @@ -64,7 +79,7 @@ export default function OperatorDetails() {
return (
<>
{state.isOperatorLoading && (
<div className="rd-box mb-4 min-h-[180px] w-full p-4">
<div className="rd-box min-h-[180px] w-full p-4">
<div className="flex max-w-[300px] items-center">
<Skeleton className="size-12 shrink-0 rounded-full border border-outline" />
<Skeleton className="ml-2 h-8 w-full rounded-md" />
Expand All @@ -76,14 +91,14 @@ export default function OperatorDetails() {
)}

{state.error && (
<div className="rd-box mb-4 flex min-h-[180px] w-full items-center justify-center p-4">
<div className="rd-box flex min-h-[180px] w-full items-center justify-center p-4">
<ErrorMessage error={state.error} />
</div>
)}

{!state.isOperatorLoading && !state.error && (
<>
<div className="rd-box mb-4 flex w-full flex-row flex-wrap items-center gap-x-5 gap-y-2 break-words p-4">
<div className="rd-box flex w-full flex-row flex-wrap items-center gap-x-5 gap-y-2 break-words p-4">
<div className="flex basis-full items-center gap-4">
<ThirdPartyLogo
className="size-12 min-w-12"
Expand Down Expand Up @@ -148,51 +163,117 @@ export default function OperatorDetails() {
</Link>
)}
</div>
<div className="rd-box mb-4 flex flex-row items-center justify-between p-2">
<div className="flex basis-1/3 flex-col items-center gap-1">
<span className="text-sm text-foreground-2">TVL</span>
<span className="text-center">
{state.tvl && (
<span className="text-foreground-1">
</>
)}

<Tabs
className="my-4 w-full"
classNames={{
cursor: 'rounded border border-outline shadow-none',
panel: 'p-0',
tab: 'h-fit p-2',
tabList: 'rd-box w-full !overflow-x-scroll p-2'
}}
radius="sm"
selectedKey={tab ? pathname : pathname + '/tvl'}
size="lg"
>
<Tab
href={`/operators/${address}/tvl`}
key={`/operators/${address}/tvl`}
title={
<div className="flex flex-col items-center">
<div className="text-sm text-foreground-2 group-aria-selected:text-foreground-1">
TVL
</div>
<div className="flex w-full justify-center">
{state.isOperatorLoading && (
<Skeleton className="mt-2 h-4 w-full rounded-md" />
)}

{state.error && <ErrorMessage error={state.error} />}

{!state.isOperatorLoading && !state.error && (
<span className="text-foreground-1 group-aria-selected:text-foreground">
{formatETH(state.tvl, compact)}
</span>
)}
</span>
</div>
</div>
<div className="flex h-full min-h-10 basis-1/3 flex-col items-center gap-2 border-x border-outline px-2">
<span className="text-center text-sm text-foreground-2">
AVS subscribed
</span>
<span className="text-foreground-1">
{state.operator?.avs?.length}
</span>
}
>
<OperatorTVLLineChart
currentTVL={state.tvl}
ethRate={state.ethRate}
isOperatorLoading={state.isOperatorLoading}
operatorError={state.error}
/>
<LSTDistribution
ethRate={state.ethRate}
isOperatorLoading={state.isOperatorLoading}
strategies={state.operator?.strategies}
tvl={state.tvl}
/>
</Tab>

<Tab
href={`/operators/${address}/avs`}
key={`/operators/${address}/avs`}
title={
<div className="flex flex-col items-center">
<div className="text-sm text-foreground-2 group-aria-selected:text-foreground-1">
AVS secured
</div>
<div className="flex w-full justify-center">
{state.isOperatorLoading && (
<Skeleton className="mt-2 h-4 w-full rounded-md" />
)}

{state.error && <ErrorMessage error={state.error} />}

{!state.isOperatorLoading && !state.error && (
<span className="text-foreground-1 group-aria-selected:text-foreground">
{state.operator?.avs?.length}
</span>
)}
</div>
</div>
<div className="flex basis-1/3 flex-col items-center gap-1">
<span className="text-sm text-foreground-2">Restakers</span>
<span className="text-foreground-1">
{state.operator?.stakerCount}
</span>
}
>
<SecuredAVSList
avsError={state.error}
avsList={state.operator?.avs}
isOperatorLoading={state.isOperatorLoading}
/>
</Tab>

<Tab
href={`/operators/${address}/restakers`}
key={`/operators/${address}/restakers`}
title={
<div className="flex flex-col items-center">
<div className="text-sm">Restakers</div>
<div className="flex w-full justify-center">
{state.isOperatorLoading && (
<Skeleton className="mt-2 h-4 w-full rounded-md" />
)}

{state.error && <ErrorMessage error={state.error} />}

{!state.isOperatorLoading && !state.error && (
<span>{state.operator?.stakerCount}</span>
)}
</div>
</div>
</div>
</>
)}
<OperatorTVLLineChart
currentTVL={state.tvl}
ethRate={state.ethRate}
isOperatorLoading={state.isOperatorLoading}
operatorError={state.error}
/>
<OperatorRestakersLineChart
isOperatorLoading={state.isOperatorLoading}
operatorError={state.error}
restakers={state.operator?.stakerCount}
/>
<LSTDistribution
ethRate={state.ethRate}
isOperatorLoading={state.isOperatorLoading}
strategies={state.operator?.strategies}
tvl={state.tvl}
/>
}
>
<OperatorRestakersLineChart
isOperatorLoading={state.isOperatorLoading}
operatorError={state.error}
restakers={state.operator?.stakerCount}
/>
</Tab>
</Tabs>
</>
);
}
Expand Down Expand Up @@ -349,3 +430,79 @@ function LSTShare({ label, logo, symbol, value }) {
/>
);
}

function SecuredAVSList({ avsList, avsError, isOperatorLoading }) {
const navigate = useNavigate();

if (avsError) {
return (
<div className="rd-box flex h-[390px] w-full flex-1 flex-col items-center justify-center">
<ErrorMessage error={avsError} />
</div>
);
}

return (
<div className="rd-box text-sm">
<div className="flex flex-col justify-between gap-y-4 p-4 lg:flex-row lg:items-center">
<div className="text-medium text-foreground-1">All AVS</div>
</div>

<Table
aria-label="List of AVS secured by operator"
classNames={{
base: 'h-full overflow-x-auto',
table: 'h-full'
}}
hideHeader
layout="fixed"
removeWrapper
>
<TableHeader>
<TableColumn className="text-foreground-active bg-transparent py-4 text-sm font-normal leading-5 data-[hover=true]:text-foreground-2 md:w-1/3">
AVS
</TableColumn>
</TableHeader>
<TableBody
emptyContent={
<div className="flex flex-col items-center justify-center">
<span className="text-lg text-foreground-2">
No AVS is currently being secured
</span>
</div>
}
>
{isOperatorLoading &&
[...new Array(10)].map((_, i) => (
<TableRow className="border-t border-outline" key={i}>
<TableCell className="w-full p-4">
<Skeleton className="h-4 rounded-md" />
</TableCell>
</TableRow>
))}

{!isOperatorLoading &&
avsList.map(avs => (
<TableRow
className="cursor-pointer border-t border-outline transition-colors hover:bg-default"
key={avs.address}
onClick={() => navigate(`/avs/${avs.address}`)}
>
<TableCell className="p-4">
<div className="flex items-center gap-x-3">
<ThirdPartyLogo
className="size-8 min-w-8"
url={avs.metadata?.logo}
/>
<span className="truncate">
{avs.metadata?.name || avs.address}
</span>
</div>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
);
}