1- import { FC } from 'react' ;
2-
3- import { Text , Button } from '@lidofinance/lido-ui' ;
4- import { ItemWrapper , Title } from './styles' ;
1+ import type { FC } from 'react' ;
2+ import type { Address } from 'viem' ;
53import { useRouter } from 'next/router' ;
6- import { useVaultInfo } from 'modules/vaults' ;
4+ import { Text , Button } from '@lidofinance/lido-ui' ;
5+
6+ import { useVaultInfo , useVaultPermission } from 'modules/vaults' ;
77
88import { OverviewItemValue } from './overview-item-value' ;
9+ import { ItemWrapper , Title } from './styles' ;
910
10- import type { Address } from 'viem ' ;
11+ import type { SectionPayload } from 'features/overview/contexts ' ;
1112
1213export type ItemProps = {
13- title : string ;
14- content : string | number | undefined ;
15- actionLink ?: ( vaultAddress : Address ) => string ;
16- actionText ?: string ;
1714 isLoading ?: boolean ;
15+ content : string | Address | number ;
1816 color ?: string ;
19- } ;
17+ } & Omit < SectionPayload , 'key' > ;
2018
2119export const OverviewItem : FC < ItemProps > = ( {
2220 title,
2321 content,
2422 actionLink,
23+ actionRole,
2524 actionText,
2625 isLoading,
2726 color,
2827} ) => {
2928 const { vaultAddress } = useVaultInfo ( ) ;
29+ const { hasPermission } = useVaultPermission ( actionRole ) ;
30+
31+ // show action if
32+ const showAction = ! ! (
33+ // 1. all data is provided
34+ (
35+ actionLink &&
36+ actionText &&
37+ vaultAddress &&
38+ // 2. user has permission for it (if actionRole is provided)
39+ ( ! actionRole || hasPermission )
40+ )
41+ ) ;
42+
3043 const router = useRouter ( ) ;
3144
3245 return (
@@ -41,7 +54,7 @@ export const OverviewItem: FC<ItemProps> = ({
4154 isLoading = { isLoading }
4255 color = { color }
4356 />
44- { ! ! ( actionLink && actionText && vaultAddress ) && (
57+ { showAction && (
4558 < Button
4659 size = "xs"
4760 variant = "translucent"
0 commit comments