Skip to content

Commit 1e26d89

Browse files
beemanbeeman
committed
refactor: update community-authority-guard to render disabled/enabled forms
1 parent d45b57c commit 1e26d89

11 files changed

+197
-99
lines changed

‎web/src/app/features/pubkey-community/feature/pubkey-community-feature-authority.tsx‎

Lines changed: 24 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { Box, Button, Text } from '@mantine/core'
22
import { PubKeyCommunity } from '@pubkey-protocol/sdk'
33
import { toastError, UiCard, UiInfo, UiStack } from '@pubkey-ui/core'
44
import { useWallet } from '@solana/wallet-adapter-react'
5+
import { UiAbout } from '../../../ui'
56
import { ExplorerLink } from '../../cluster/cluster-ui'
67
import {
78
useMutationCommunityUpdateAuthorityApprove,
@@ -22,6 +23,12 @@ export function PubkeyCommunityFeatureAuthority({ community }: { community: PubK
2223

2324
return (
2425
<UiCard>
26+
<UiAbout
27+
title="About Authority"
28+
content={
29+
'The authority is the wallet that is managing the community. It manages signers, providers and can update the community details.'
30+
}
31+
/>
2532
{community.pendingAuthority?.toString()?.length ? (
2633
<div>
2734
<UiStack>
@@ -91,19 +98,23 @@ export function PubkeyCommunityFeatureAuthority({ community }: { community: PubK
9198
</UiStack>
9299
</div>
93100
) : (
94-
<PubkeyProtocolUiCommunityAuthorityGuard community={community}>
95-
<PubkeyProtocolUiCommunityAuthorityForm
96-
community={community}
97-
submit={(input) =>
98-
mutationRequest
99-
.mutateAsync(input)
100-
.then(async () => {
101-
await query.refetch()
102-
})
103-
.catch((err) => toastError(`Error: ${err}`))
104-
}
105-
/>
106-
</PubkeyProtocolUiCommunityAuthorityGuard>
101+
<PubkeyProtocolUiCommunityAuthorityGuard
102+
community={community}
103+
render={({ disabled }) => (
104+
<PubkeyProtocolUiCommunityAuthorityForm
105+
disabled={disabled}
106+
community={community}
107+
submit={(input) =>
108+
mutationRequest
109+
.mutateAsync(input)
110+
.then(async () => {
111+
await query.refetch()
112+
})
113+
.catch((err) => toastError(`Error: ${err}`))
114+
}
115+
/>
116+
)}
117+
/>
107118
)}
108119
</UiCard>
109120
)

‎web/src/app/features/pubkey-community/feature/pubkey-community-feature-provider-toggle.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,11 @@ import {
99

1010
export function PubkeyCommunityFeatureProviderToggle({
1111
community,
12+
disabled,
1213
provider,
1314
}: {
1415
community: PubKeyCommunity
16+
disabled?: boolean
1517
provider: IdentityProvider
1618
}) {
1719
const query = useQueryCommunityGetBySlug({ slug: community.slug })
@@ -44,7 +46,7 @@ export function PubkeyCommunityFeatureProviderToggle({
4446

4547
return (
4648
<Switch
47-
disabled={isLoading || provider === IdentityProvider.Solana}
49+
disabled={disabled || isLoading || provider === IdentityProvider.Solana}
4850
label={hasProvider ? 'Disable' : 'Enable'}
4951
labelPosition="left"
5052
checked={hasProvider}

‎web/src/app/features/pubkey-community/feature/pubkey-community-feature-providers.tsx‎

Lines changed: 24 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { Group, Text } from '@mantine/core'
22
import { IdentityProvider, PubKeyCommunity } from '@pubkey-protocol/sdk'
33
import { UiCard, UiStack } from '@pubkey-ui/core'
4+
import { UiAbout } from '../../../ui'
45
import { PubkeyProtocolUiIdentityProviderIcon } from '../../pubkey-profile/ui'
56

67
import { PubkeyProtocolUiCommunityAuthorityGuard } from '../ui/pubkey-protocol-ui-community-authority-guard'
@@ -11,21 +12,30 @@ export function PubkeyCommunityFeatureProviders({ community }: { community: PubK
1112

1213
return (
1314
<UiCard>
14-
<PubkeyProtocolUiCommunityAuthorityGuard community={community}>
15-
<UiStack>
16-
{allProviders.map((provider) => {
17-
return (
18-
<Group key={provider} justify="space-between">
19-
<Group align="center" gap={4}>
20-
<PubkeyProtocolUiIdentityProviderIcon provider={provider} />
21-
<Text size="lg">{provider}</Text>
15+
<UiAbout
16+
title="About Providers"
17+
content={[
18+
'These are the identity providers that this community verifies. They are managed by the community authority.',
19+
]}
20+
/>
21+
<PubkeyProtocolUiCommunityAuthorityGuard
22+
community={community}
23+
render={({ disabled }) => (
24+
<UiStack>
25+
{allProviders.map((provider) => {
26+
return (
27+
<Group key={provider} justify="space-between">
28+
<Group align="center" gap={4}>
29+
<PubkeyProtocolUiIdentityProviderIcon provider={provider} />
30+
<Text size="lg">{provider}</Text>
31+
</Group>
32+
<PubkeyCommunityFeatureProviderToggle disabled={disabled} community={community} provider={provider} />
2233
</Group>
23-
<PubkeyCommunityFeatureProviderToggle community={community} provider={provider} />
24-
</Group>
25-
)
26-
})}
27-
</UiStack>
28-
</PubkeyProtocolUiCommunityAuthorityGuard>
34+
)
35+
})}
36+
</UiStack>
37+
)}
38+
/>
2939
</UiCard>
3040
)
3141
}

‎web/src/app/features/pubkey-community/feature/pubkey-community-feature-settings.tsx‎

Lines changed: 23 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { PubKeyCommunity } from '@pubkey-protocol/sdk'
22
import { toastError, UiCard } from '@pubkey-ui/core'
3+
import { UiAbout } from '../../../ui'
34
import { useMutationCommunityUpdate, useQueryCommunityGetBySlug } from '../data-access'
45
import { PubkeyProtocolUiCommunityUpdateForm } from '../ui'
56
import { PubkeyProtocolUiCommunityAuthorityGuard } from '../ui/pubkey-protocol-ui-community-authority-guard'
@@ -10,19 +11,28 @@ export function PubkeyCommunityFeatureSettings({ community }: { community: PubKe
1011

1112
return (
1213
<UiCard>
13-
<PubkeyProtocolUiCommunityAuthorityGuard community={community}>
14-
<PubkeyProtocolUiCommunityUpdateForm
15-
community={community}
16-
submit={(input) =>
17-
mutation
18-
.mutateAsync(input)
19-
.then(async () => {
20-
await query.refetch()
21-
})
22-
.catch((err) => toastError(`Error: ${err}`))
23-
}
24-
/>
25-
</PubkeyProtocolUiCommunityAuthorityGuard>
14+
<UiAbout
15+
title="About Settings"
16+
content={'These community settings are stored onchain and can be updated by the community authority.'}
17+
/>
18+
19+
<PubkeyProtocolUiCommunityAuthorityGuard
20+
community={community}
21+
render={({ disabled }) => (
22+
<PubkeyProtocolUiCommunityUpdateForm
23+
community={community}
24+
disabled={disabled}
25+
submit={(input) =>
26+
mutation
27+
.mutateAsync(input)
28+
.then(async () => {
29+
await query.refetch()
30+
})
31+
.catch((err) => toastError(`Error: ${err}`))
32+
}
33+
/>
34+
)}
35+
></PubkeyProtocolUiCommunityAuthorityGuard>
2636
</UiCard>
2737
)
2838
}

‎web/src/app/features/pubkey-community/feature/pubkey-community-feature-signers.tsx‎

Lines changed: 50 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
import { ActionIcon, Group } from '@mantine/core'
1+
import { ActionIcon, Group, Text } from '@mantine/core'
22
import { PubKeyCommunity } from '@pubkey-protocol/sdk'
33
import { toastError, UiCard, UiStack } from '@pubkey-ui/core'
44
import { IconTrash } from '@tabler/icons-react'
5+
import { UiAbout } from '../../../ui'
56
import { ExplorerLink } from '../../cluster/cluster-ui'
67
import {
78
useMutationCommunitySignerAdd,
@@ -18,43 +19,56 @@ export function PubkeyCommunityFeatureSigners({ community }: { community: PubKey
1819

1920
return (
2021
<UiCard>
21-
<PubkeyProtocolUiCommunityAuthorityGuard community={community}>
22-
<UiStack>
23-
{community.signers.map((signer) => (
24-
<Group key={signer.toString()} justify="space-between">
25-
<Group align="center" gap={4}>
26-
<ExplorerLink size="xs" ff="mono" path={`account/${signer}`} label={signer.toString()} />
22+
<UiAbout
23+
title="About Signers"
24+
content={[
25+
'The signers can sign transactions for this community. They are managed by the community authority.',
26+
'They are intended to be used by a backend service to sign transactions on behalf of the community.',
27+
]}
28+
/>
29+
<PubkeyProtocolUiCommunityAuthorityGuard
30+
community={community}
31+
render={({ disabled }) => (
32+
<UiStack>
33+
<Text size="sm">Signers</Text>
34+
{community.signers.map((signer) => (
35+
<Group key={signer.toString()} justify="space-between">
36+
<Group align="center" gap={4}>
37+
<ExplorerLink size="xs" ff="mono" path={`account/${signer}`} label={signer.toString()} />
38+
</Group>
39+
<ActionIcon
40+
disabled={disabled}
41+
size="xs"
42+
variant="light"
43+
color="red"
44+
onClick={() => {
45+
return mutationRemove
46+
.mutateAsync({ signer: signer.toString() })
47+
.then(() => query.refetch())
48+
.catch((err) => toastError(err))
49+
}}
50+
>
51+
<IconTrash size={12} />
52+
</ActionIcon>
2753
</Group>
28-
<ActionIcon
29-
size="xs"
30-
variant="light"
31-
color="red"
32-
onClick={() => {
33-
return mutationRemove
34-
.mutateAsync({ signer: signer.toString() })
35-
.then(() => query.refetch())
36-
.catch((err) => toastError(err))
37-
}}
38-
>
39-
<IconTrash size={12} />
40-
</ActionIcon>
41-
</Group>
42-
))}
54+
))}
4355

44-
<PubkeyProtocolUiCommunitySignerForm
45-
community={community}
46-
submit={(input) =>
47-
mutationAdd
48-
.mutateAsync(input)
49-
.then(async (res) => {
50-
console.log('res', res)
51-
await query.refetch()
52-
})
53-
.catch((err) => toastError(`Error: ${err}`))
54-
}
55-
/>
56-
</UiStack>
57-
</PubkeyProtocolUiCommunityAuthorityGuard>
56+
<PubkeyProtocolUiCommunitySignerForm
57+
community={community}
58+
disabled={disabled}
59+
submit={(input) =>
60+
mutationAdd
61+
.mutateAsync(input)
62+
.then(async (res) => {
63+
console.log('res', res)
64+
await query.refetch()
65+
})
66+
.catch((err) => toastError(`Error: ${err}`))
67+
}
68+
/>
69+
</UiStack>
70+
)}
71+
/>
5872
</UiCard>
5973
)
6074
}

‎web/src/app/features/pubkey-community/ui/pubkey-protocol-ui-community-authority-form.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,11 @@ import { UiStack } from '@pubkey-ui/core'
55

66
export function PubkeyProtocolUiCommunityAuthorityForm({
77
community,
8+
disabled,
89
submit,
910
}: {
1011
community: PubKeyCommunity
12+
disabled?: boolean
1113
submit: (input: { authority: string; newAuthority: string }) => Promise<void>
1214
}) {
1315
const form = useForm<{ authority: string; newAuthority: string }>({
@@ -39,12 +41,13 @@ export function PubkeyProtocolUiCommunityAuthorityForm({
3941
<TextInput
4042
description="The new authority that will be managing the community."
4143
required
44+
disabled={disabled}
4245
label="New Authority"
4346
name="newAuthority"
4447
{...form.getInputProps('newAuthority')}
4548
/>
4649
<Group justify="right">
47-
<Button disabled={!form.isValid()} type="submit">
50+
<Button disabled={disabled || !form.isValid()} type="submit">
4851
Save
4952
</Button>
5053
</Group>

‎web/src/app/features/pubkey-community/ui/pubkey-protocol-ui-community-authority-guard.tsx‎

Lines changed: 22 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,45 @@
1-
import { Text } from '@mantine/core'
2-
import { PubKeyCommunity } from '@pubkey-protocol/sdk'
3-
import { UiGroup, UiStack, UiWarning } from '@pubkey-ui/core'
1+
import { Group, Text } from '@mantine/core'
2+
import { ellipsify, PubKeyCommunity } from '@pubkey-protocol/sdk'
3+
import { UiInfo, UiStack } from '@pubkey-ui/core'
44
import { WalletMultiButton } from '@pubkeyapp/wallet-adapter-mantine-ui'
55
import { ReactNode } from 'react'
66
import { ExplorerLink } from '../../cluster/cluster-ui'
77
import { useCommunityIsAuthorityConnected } from '../data-access'
88

99
export function PubkeyProtocolUiCommunityAuthorityGuard({
10-
children,
1110
community,
11+
render,
1212
}: {
13-
children: ReactNode
1413
community: PubKeyCommunity
14+
render: ({ disabled }: { disabled: boolean }) => ReactNode
1515
}) {
1616
const hasAuthority = useCommunityIsAuthorityConnected({ community })
1717

1818
return hasAuthority ? (
19-
children
19+
render({ disabled: false })
2020
) : (
2121
<UiStack>
22-
<UiWarning
23-
title="Community Authority required"
22+
{render({ disabled: true })}
23+
<UiInfo
24+
title="Community Authority required!"
2425
message={
2526
<UiStack>
26-
<Text>Connect the community authority wallet to continue.</Text>
27-
<ExplorerLink
28-
size="xs"
29-
ff="mono"
30-
path={`account/${community.authority}`}
31-
label={community.authority?.toString()}
32-
/>
27+
<Group align="baseline" gap={4} wrap="nowrap">
28+
<Text span>Connect the community authority wallet</Text>
29+
<ExplorerLink
30+
size="sm"
31+
ff="mono"
32+
path={`account/${community.authority}`}
33+
label={ellipsify(community.authority?.toString(), 8)}
34+
/>
35+
<Text span>to enable this feature.</Text>
36+
</Group>
37+
<Group justify="end">
38+
<WalletMultiButton size="xs" />
39+
</Group>
3340
</UiStack>
3441
}
3542
/>
36-
<UiGroup justify="end">
37-
<WalletMultiButton />
38-
</UiGroup>
3943
</UiStack>
4044
)
4145
}

0 commit comments

Comments
 (0)