Skip to content

Commit 2fa8f0f

Browse files
beemanbeeman
committed
refactor: clean up user communities roles/assets ui
1 parent d44f211 commit 2fa8f0f

File tree

10 files changed

+128
-121
lines changed

10 files changed

+128
-121
lines changed

‎libs/web/community/feature/src/lib/community-dashboard-member-card-roles.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Button } from '@mantine/core'
22
import { Community } from '@pubkey-link/sdk'
33
import { useAuth } from '@pubkey-link/web-auth-data-access'
44
import { useUserFindManyRole } from '@pubkey-link/web-role-data-access'
5-
import { RoleUiListWithAssets } from '@pubkey-link/web-role-ui'
5+
import { RoleUiList } from '@pubkey-link/web-role-ui'
66
import { UiCard, UiGroup, UiInfo, UiLoader, UiStack } from '@pubkey-ui/core'
77
import { Link } from 'react-router-dom'
88

@@ -18,7 +18,7 @@ export function CommunityDashboardMemberCardRoles({ community }: { community: Co
1818
{query.isLoading ? (
1919
<UiLoader />
2020
) : filtered?.length ? (
21-
<RoleUiListWithAssets mt="xs" roles={filtered ?? []} username={user?.username as string} />
21+
<RoleUiList mt="xs" roles={filtered ?? []} username={user?.username as string} />
2222
) : (
2323
<UiInfo
2424
title="No roles found."

‎libs/web/community/ui/src/lib/community-ui-list-item.tsx‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Box, Paper, Text } from '@mantine/core'
22
import { Community } from '@pubkey-link/sdk'
33
import { AppUiDebugModal } from '@pubkey-link/web-core-ui'
4-
import { RoleUiListWithAssets } from '@pubkey-link/web-role-ui'
4+
import { RoleUiList } from '@pubkey-link/web-role-ui'
55
import { UiGroup, UiInfo, UiLoader, UiStack } from '@pubkey-ui/core'
66
import { Suspense } from 'react'
77
import { CommunityUiItem } from './community-ui-item'
@@ -37,7 +37,7 @@ export function CommunityUiListItem({
3737
Roles assigned to {isAuthUser ? 'you' : username}
3838
</Text>
3939
{rolesAssigned?.length ? (
40-
<RoleUiListWithAssets mt="xs" roles={rolesAssigned} username={username} />
40+
<RoleUiList mt="xs" roles={rolesAssigned} username={username} withAssets />
4141
) : (
4242
<UiInfo
4343
mt="xs"
@@ -51,9 +51,13 @@ export function CommunityUiListItem({
5151
Available roles
5252
</Text>
5353
{rolesAvailable?.length ? (
54-
<RoleUiListWithAssets mt="xs" roles={rolesAvailable} username={username} />
54+
<RoleUiList mt="xs" roles={rolesAvailable} username={username} />
5555
) : (
56-
<UiInfo message="No inactive roles." />
56+
<UiInfo
57+
mt="xs"
58+
title="All roles are assigned"
59+
message={`${isAuthUser ? 'You have' : `${username} has`} all available roles assigned.`}
60+
/>
5761
)}
5862
</Box>
5963
</Suspense>

‎libs/web/network-asset/feature/src/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,4 @@ export const AdminNetworkAssetFeature = lazy(() => import('./lib/admin-network-a
44
export const NetworkAssetDetailFeature = lazy(() => import('./lib/network-asset-detail-feature'))
55
export const UserNetworkAssetDetailFeature = lazy(() => import('./lib/user-network-asset-detail.feature'))
66
export const UserNetworkAssetFeature = lazy(() => import('./lib/user-network-asset-list.feature'))
7+
export const UserNetworkAssetSlimFeature = lazy(() => import('./lib/user-network-asset-list-slim.feature'))

‎libs/web/network-asset/feature/src/lib/network-asset-detail-feature.tsx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,14 @@ import { NetworkTokenUiItem } from '@pubkey-link/web-network-token-ui'
33
import { NetworkAssetDetailFungible } from './network-asset-detail-fungible'
44
import { NetworkAssetDetailNonFungible } from './network-asset-detail-non-fungible'
55

6-
export default function NetworkAssetDetailFeature(props: { token: NetworkToken; username: string }) {
6+
export default function NetworkAssetDetailFeature(props: {
7+
token: NetworkToken
8+
username: string
9+
withAssets?: boolean
10+
}) {
11+
if (!props.withAssets) {
12+
return <NetworkTokenUiItem avatarProps={{ size: 'lg' }} networkToken={props.token} />
13+
}
714
switch (props.token.type) {
815
case NetworkTokenType.Fungible:
916
return <NetworkAssetDetailFungible {...props} />

‎libs/web/network-asset/feature/src/lib/network-asset-detail-fungible.tsx‎

Lines changed: 20 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
1-
import { Button, Group, Text } from '@mantine/core'
1+
import { Group, Text } from '@mantine/core'
22
import { ellipsify, NetworkToken, NetworkTokenType } from '@pubkey-link/sdk'
33
import { useNetworkAssetSummary, useUserFindManyNetworkAsset } from '@pubkey-link/web-network-asset-data-access'
44
import { NetworkAssetUiNotFound, NetworkAssetUiShowBalance } from '@pubkey-link/web-network-asset-ui'
55
import { NetworkTokenUiItem } from '@pubkey-link/web-network-token-ui'
6-
import { UiCard, UiGroup, UiInfoTable, UiLoader, UiStack } from '@pubkey-ui/core'
7-
import { useState } from 'react'
6+
import { UiGroup, UiInfoTable, UiLoader, UiStack } from '@pubkey-ui/core'
87

98
export function NetworkAssetDetailFungible({ token, username }: { token: NetworkToken; username: string }) {
10-
const [showDetails, setShowDetails] = useState(false)
119
const { query, items } = useUserFindManyNetworkAsset({
1210
cluster: token.cluster,
1311
group: token.account,
@@ -20,42 +18,35 @@ export function NetworkAssetDetailFungible({ token, username }: { token: Network
2018
const balance = summary?.total ?? '0'
2119

2220
return (
23-
<UiCard>
21+
<UiStack>
2422
<UiGroup align="start">
2523
<NetworkTokenUiItem avatarProps={{ size: 'lg' }} networkToken={token} />
2624
<UiStack gap={0} align="end">
2725
<NetworkAssetUiShowBalance balance={balance} size="lg" symbol={token.symbol ?? ''} />
28-
<Button variant="subtle" size="xs" onClick={() => setShowDetails(!showDetails)}>
29-
{showDetails ? 'Hide' : 'Show'} Details
30-
</Button>
3126
</UiStack>
3227
</UiGroup>
3328
{isLoading ? (
3429
<UiLoader />
3530
) : items.length ? (
36-
showDetails ? (
37-
<UiInfoTable
38-
mt="lg"
39-
items={items.map((item) => [
40-
<UiStack gap={0}>
41-
<Text ff="mono" fw="bold">
42-
{ellipsify(item.owner, 6)}
43-
</Text>
44-
<Text ff="mono" size="xs" c="dimmed">
45-
{item.account}
46-
</Text>
47-
</UiStack>,
48-
<Group justify="end">
49-
<NetworkAssetUiShowBalance mr={0} balance={item.balance ?? '0'} symbol={token.symbol ?? ''} />
50-
</Group>,
51-
])}
52-
/>
53-
) : (
54-
<div />
55-
)
31+
<UiInfoTable
32+
mt="lg"
33+
items={items.map((item) => [
34+
<UiStack gap={0}>
35+
<Text ff="mono" fw="bold">
36+
{ellipsify(item.owner, 6)}
37+
</Text>
38+
<Text ff="mono" size="xs" c="dimmed">
39+
{item.account}
40+
</Text>
41+
</UiStack>,
42+
<Group justify="end">
43+
<NetworkAssetUiShowBalance mr={0} balance={item.balance ?? '0'} symbol={token.symbol ?? ''} />
44+
</Group>,
45+
])}
46+
/>
5647
) : (
5748
<NetworkAssetUiNotFound token={token} username={username} />
5849
)}
59-
</UiCard>
50+
</UiStack>
6051
)
6152
}

‎libs/web/network-asset/feature/src/lib/network-asset-detail-non-fungible.tsx‎

Lines changed: 8 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
1-
import { Button } from '@mantine/core'
21
import { NetworkToken, NetworkTokenType } from '@pubkey-link/sdk'
32
import { useUserFindManyNetworkAsset } from '@pubkey-link/web-network-asset-data-access'
43
import { NetworkAssetUiNotFound, NetworkAssetUiShowBalance } from '@pubkey-link/web-network-asset-ui'
54
import { NetworkTokenUiItem } from '@pubkey-link/web-network-token-ui'
6-
import { UiCard, UiGroup, UiLoader, UiStack } from '@pubkey-ui/core'
7-
import { Suspense, useState } from 'react'
8-
import { UserNetworkAssetFeature } from '../index'
5+
import { UiGroup, UiLoader, UiStack } from '@pubkey-ui/core'
6+
import { Suspense } from 'react'
7+
import { UserNetworkAssetSlimFeature } from '../index'
98

109
export function NetworkAssetDetailNonFungible({ token, username }: { token: NetworkToken; username: string }) {
11-
const [showDetails, setShowDetails] = useState(false)
1210
const { query, items, pagination } = useUserFindManyNetworkAsset({
1311
cluster: token.cluster,
1412
group: token.account,
@@ -20,37 +18,24 @@ export function NetworkAssetDetailNonFungible({ token, username }: { token: Netw
2018
const balance = pagination?.total.toString() ?? '0'
2119

2220
return (
23-
<UiCard>
21+
<UiStack>
2422
<UiGroup align="start">
2523
<NetworkTokenUiItem avatarProps={{ size: 'lg' }} networkToken={token} />
2624
<UiStack gap={0} align="end">
2725
<NetworkAssetUiShowBalance balance={balance} size="lg" symbol={token.symbol ?? ''} />
28-
<Button variant="subtle" size="xs" onClick={() => setShowDetails(!showDetails)}>
29-
{showDetails ? 'Hide' : 'Show'} Details
30-
</Button>
3126
</UiStack>
3227
</UiGroup>
3328
<Suspense fallback={<UiLoader />}>
3429
{isLoading ? (
3530
<UiLoader />
3631
) : items.length ? (
37-
showDetails ? (
38-
<UiStack mt="lg">
39-
<UserNetworkAssetFeature
40-
hideCluster
41-
cluster={token.cluster}
42-
group={token.account}
43-
username={username}
44-
type={NetworkTokenType.NonFungible}
45-
/>
46-
</UiStack>
47-
) : (
48-
<div />
49-
)
32+
<UiStack mt="lg">
33+
<UserNetworkAssetSlimFeature token={token} username={username} />
34+
</UiStack>
5035
) : (
5136
<NetworkAssetUiNotFound token={token} username={username} />
5237
)}
5338
</Suspense>
54-
</UiCard>
39+
</UiStack>
5540
)
5641
}

‎libs/web/network-asset/feature/src/lib/user-network-asset-list-slim.feature.tsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { NetworkToken, NetworkTokenType } from '@pubkey-link/sdk'
2+
import { useUserFindManyNetworkAsset } from '@pubkey-link/web-network-asset-data-access'
3+
import { NetworkAssetUiGrid, NetworkAssetUiTable } from '@pubkey-link/web-network-asset-ui'
4+
import { UiInfo, UiLoader, UiStack } from '@pubkey-ui/core'
5+
6+
export default function UserNetworkAssetListSlimFeature({
7+
username,
8+
token,
9+
}: {
10+
username: string
11+
token: NetworkToken
12+
}) {
13+
const { items, query } = useUserFindManyNetworkAsset({
14+
cluster: token.cluster,
15+
group: token.account,
16+
limit: 999,
17+
type: token.type,
18+
username,
19+
})
20+
21+
return (
22+
<UiStack gap="lg">
23+
{query.isLoading ? (
24+
<UiLoader />
25+
) : items?.length ? (
26+
<UiStack gap="lg">
27+
<UiStack key={token.id}>
28+
{token.type === NetworkTokenType.NonFungible ? (
29+
<NetworkAssetUiGrid networkAssets={items} />
30+
) : (
31+
<NetworkAssetUiTable networkAssets={items} />
32+
)}
33+
</UiStack>
34+
</UiStack>
35+
) : (
36+
<UiInfo message={`No ${token.name} assets found.`} />
37+
)}
38+
</UiStack>
39+
)
40+
}

‎libs/web/role/ui/src/index.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@ export * from './lib/role-ui-grid'
2020
export * from './lib/role-ui-grid-item'
2121
export * from './lib/role-ui-item'
2222
export * from './lib/role-ui-list'
23-
export * from './lib/role-ui-list-with-assets'
2423
export * from './lib/user-role-ui-create-form'
2524
export * from './lib/user-role-ui-table'
2625
export * from './lib/user-role-ui-update-form'

‎libs/web/role/ui/src/lib/role-ui-list-with-assets.tsx‎

Lines changed: 0 additions & 48 deletions
This file was deleted.

‎libs/web/role/ui/src/lib/role-ui-list.tsx‎

Lines changed: 41 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,50 @@
1+
import { Accordion } from '@mantine/core'
12
import { Role } from '@pubkey-link/sdk'
2-
import { UiStack, UiStackProps } from '@pubkey-ui/core'
3+
import { NetworkAssetDetailFeature } from '@pubkey-link/web-network-asset-feature'
4+
import { UiStack, UiStackProps, UiWarning } from '@pubkey-ui/core'
35
import { RoleConditionUiSummary } from './role-condition-ui-summary'
46
import { RoleUiItem } from './role-ui-item'
57

6-
export function RoleUiList({ roles, ...props }: Omit<UiStackProps, 'children'> & { roles: Role[] }) {
8+
export function RoleUiList({
9+
roles,
10+
username,
11+
withAssets = false,
12+
...props
13+
}: Omit<UiStackProps, 'children'> & { roles: Role[]; username: string; withAssets?: boolean }) {
714
return (
815
<UiStack {...props}>
9-
{roles?.map((role) => (
10-
<RoleUiItem key={role.id} role={role} avatarProps={{ size: 'lg' }}>
11-
{role?.conditions?.length ? (
12-
<UiStack gap="xs">
13-
{role?.conditions?.map((condition) => (
14-
<RoleConditionUiSummary key={condition.id} condition={condition} />
15-
))}
16-
</UiStack>
17-
) : null}
18-
</RoleUiItem>
19-
))}
16+
<Accordion variant="separated" multiple>
17+
{roles?.map((role) => {
18+
return (
19+
<Accordion.Item key={role.id} value={role.id}>
20+
<Accordion.Control>
21+
<RoleUiItem key={role.id} role={role} avatarProps={{ size: 'sm' }}></RoleUiItem>
22+
</Accordion.Control>
23+
<Accordion.Panel>
24+
<UiStack>
25+
{role.conditions?.length ? (
26+
role.conditions?.map((condition) => (
27+
<UiStack key={condition.id}>
28+
<RoleConditionUiSummary key={condition.id} condition={condition} />
29+
{condition.token ? (
30+
<NetworkAssetDetailFeature
31+
withAssets={withAssets}
32+
username={username}
33+
key={condition.token.id as string}
34+
token={condition.token}
35+
/>
36+
) : null}
37+
</UiStack>
38+
))
39+
) : (
40+
<UiWarning message={`No conditions found for role ${role.name}`} />
41+
)}
42+
</UiStack>
43+
</Accordion.Panel>
44+
</Accordion.Item>
45+
)
46+
})}
47+
</Accordion>
2048
</UiStack>
2149
)
2250
}

0 commit comments

Comments
 (0)