Skip to content

Commit

Permalink
feat: Reward UI changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@satyambnsal
satyambnsal committed Oct 17, 2024
1 parent 6cf1283 commit 68418af
Show file tree
Hide file tree
Showing 9 changed files with 162 additions and 269 deletions.
15 changes: 15 additions & 0 deletions src/@services/RewardService.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,21 @@ export default class RewardService extends BaseService {
throw await this._createError(response);
}

async getOperatorAllRewards(address, all, signal) {

const response = await this._get(`eigenlayer/rewards/earner/${address}`, {
query: {
all
},
signal
});
if (response.ok) {
return await response.json();
}

throw await this._createError(response);
}

async getRewardsInfo(signal) {
const response = await this._get(`eigenlayer/rewards/info`,
signal
Expand Down
126 changes: 71 additions & 55 deletions src/avs/AVSList.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,11 @@ const columns = [
label: 'AVS',
className: 'w-64 md:w-2/5 ps-12'
},
{
key: 'distributed_rewards',
label: 'Distributed Rewards',
className: 'text-end w-36 md:w-1/5'
},
{
key: 'staker',
label: 'Restakers',
Expand Down Expand Up @@ -57,11 +62,11 @@ export default function AVSList() {
searchTriggered: false,
sortDescriptor: searchParams.get('sort')
? {
column: searchParams.get('sort').replace('-', ''),
direction: searchParams.get('sort').startsWith('-')
? 'descending'
: 'ascending'
}
column: searchParams.get('sort').replace('-', ''),
direction: searchParams.get('sort').startsWith('-')
? 'descending'
: 'ascending'
}
: { column: 'tvl', direction: 'descending' }
});

Expand Down Expand Up @@ -225,57 +230,68 @@ export default function AVSList() {
>
{state.isFetchingData
? [...Array(10)].map((_, i) => (
<TableRow className="border-t border-outline" key={i}>
<TableCell className="w-2/5 py-6 pe-8 ps-4">
<Skeleton className="h-4 rounded-md bg-default" />
</TableCell>
<TableCell className="w-1/5 py-6 pe-8 ps-4">
<Skeleton className="h-4 rounded-md bg-default" />
</TableCell>
<TableCell className="w-1/5 py-6 pe-8 ps-4">
<Skeleton className="h-4 rounded-md bg-default" />
</TableCell>
<TableCell className="w-1/5 py-6 pe-8 ps-4">
<Skeleton className="h-4 rounded-md bg-default" />
</TableCell>
</TableRow>
))
<TableRow className="border-t border-outline" key={i}>
<TableCell className="w-1/5 py-6 pe-8 ps-4">
<Skeleton className="h-4 rounded-md bg-default" />
</TableCell>
<TableCell className="w-1/5 py-6 pe-8 ps-4">
<Skeleton className="h-4 rounded-md bg-default" />
</TableCell>
<TableCell className="w-1/5 py-6 pe-8 ps-4">
<Skeleton className="h-4 rounded-md bg-default" />
</TableCell>
<TableCell className="w-1/5 py-6 pe-8 ps-4">
<Skeleton className="h-4 rounded-md bg-default" />
</TableCell>
<TableCell className="w-1/5 py-6 pe-8 ps-4">
<Skeleton className="h-4 rounded-md bg-default" />
</TableCell>
</TableRow>
))
: state.avs?.map((avs, i) => (
<TableRow
className="cursor-pointer border-t border-outline transition-colors hover:bg-default"
key={`avs-item-${i}`}
onClick={() =>
navigate(`/avs/${avs.address}`, { state: { avs } })
}
>
<TableCell className="p-4">
<div className="flex items-center gap-x-3">
<span className="min-w-5 text-foreground-2">
{(searchParams.get('page') - 1) * 10 + i + 1}
</span>
<ThirdPartyLogo
className="size-8 min-w-8"
url={avs.metadata?.logo}
/>
<span className="truncate">
{avs.metadata?.name || avs.address}
</span>
</div>
</TableCell>
<TableCell className="pe-8 text-end">
{formatNumber(avs.stakers)}
</TableCell>
<TableCell className="pe-8 text-end">
{formatNumber(avs.operators)}
</TableCell>
<TableCell className="pe-8 text-end">
<div>{formatUSD(avs.strategiesTotal * state.rate)}</div>
<div className="text-xs text-foreground-2">
{formatETH(avs.strategiesTotal)}
</div>
</TableCell>
</TableRow>
))}
<TableRow
className="cursor-pointer border-t border-outline transition-colors hover:bg-default"
key={`avs-item-${i}`}
onClick={() =>
navigate(`/avs/${avs.address}`, { state: { avs } })
}
>
<TableCell className="p-4">
<div className="flex items-center gap-x-3">
<span className="min-w-5 text-foreground-2">
{(searchParams.get('page') - 1) * 10 + i + 1}
</span>
<ThirdPartyLogo
className="size-8 min-w-8"
url={avs.metadata?.logo}
/>
<span className="truncate">
{avs.metadata?.name || avs.address}
</span>
</div>
</TableCell>

<TableCell className="pe-8 text-end">
<div>{formatUSD(avs.rewardsTotal * state.rate)}</div>
<div className="text-xs text-foreground-2">
{formatETH(avs.rewardsTotal)}
</div>
</TableCell>

<TableCell className="pe-8 text-end">
{formatNumber(avs.stakers)}
</TableCell>
<TableCell className="pe-8 text-end">
{formatNumber(avs.operators)}
</TableCell>
<TableCell className="pe-8 text-end">
<div>{formatUSD(avs.strategiesTotal * state.rate)}</div>
<div className="text-xs text-foreground-2">
{formatETH(avs.strategiesTotal)}
</div>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
{state.totalPages > 1 && (
Expand Down
12 changes: 6 additions & 6 deletions src/home/OverviewStats.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,7 @@ export default function OverviewStats({
)}
</div>
{/* //TODO: uncomment this code to see static design of total rewards supplied */}
{/* <div className="flex min-h-10 basis-1/3 flex-col items-center gap-1 border-x border-outline px-2">
<div className="flex min-h-10 basis-1/3 flex-col items-center gap-1 border-x border-outline px-2">
<span className="text-xs text-default-2 md:text-sm ">
Total Rewards Supplied
</span>
Expand All @@ -138,7 +138,7 @@ export default function OverviewStats({
</span>


</div> */}
</div>
<div className="flex min-h-10 basis-1/3 flex-col items-center gap-1 border-x border-outline px-2">
<span className="text-xs text-foreground-1 md:text-sm">
Total AVS
Expand Down Expand Up @@ -195,9 +195,9 @@ export default function OverviewStats({


{/* //TODO: uncomment this code to see static design of top rewards */}
{/* <TopRewards
isLoading={false}
/> */}
<TopRewards
isLoading={state.isFetchingOperators}
/>
</>
);
}
Expand Down Expand Up @@ -420,7 +420,7 @@ function TopOperators({ isLoading, operators, rate, error }) {
);
}

function TopRewards({ isLoading = false }) {
function TopRewards({ isLoading }) {
const columns = [
{
key: 'top_rewarded_earners',
Expand Down
Loading

0 comments on commit 68418af

Please sign in to comment.