feat: PubKey Protocol UI

libs/web/dev/feature/src/lib/dev-pubkey-protocol-loader.tsx

@@ -0,0 +1,40 @@
+import { AnchorProvider } from '@coral-xyz/anchor'
+import { useAppConfig } from '@pubkey-link/web-core-data-access'
+import { AnchorKeypairWallet, PubkeyProtocolSdk } from '@pubkey-protocol/sdk'
+import { UiLoader } from '@pubkey-ui/core'
+import { Connection, Keypair } from '@solana/web3.js'
+import React, { ReactNode } from 'react'
+import { DevPubkeyProtocolRenderProps } from './dev-pubkey-protocol-provider'
+
+export function DevPubkeyProtocolLoader({
+  loader = <UiLoader />,
+  noConfig = <div>No PubKey config in AppConfig</div>,
+  render,
+}: {
+  loader?: ReactNode
+  noConfig?: ReactNode
+  render: ({ sdk }: DevPubkeyProtocolRenderProps) => ReactNode
+}) {
+  const { appConfig } = useAppConfig()
+
+  if (!appConfig) {
+    return loader
+  }
+
+  const community = appConfig.pubkeyProtocolCommunity
+  const endpoint = appConfig.pubkeyProtocolEndpoint
+  const signer = appConfig.pubkeyProtocolSigner
+
+  if (!community || !endpoint || !signer) {
+    return noConfig
+  }
+
+  const connection = new Connection(endpoint, 'confirmed')
+  const provider = new AnchorProvider(connection, new AnchorKeypairWallet(Keypair.generate()), {
+    commitment: connection.commitment,
+    skipPreflight: true,
+  })
+  const sdk = new PubkeyProtocolSdk({ connection, provider })
+
+  return render({ sdk, community, signer })
+}

libs/web/dev/feature/src/lib/dev-pubkey-protocol-provider.tsx

@@ -0,0 +1,46 @@
+import { PubKeyCommunity, PubkeyProtocolSdk } from '@pubkey-protocol/sdk'
+import { useQuery } from '@tanstack/react-query'
+import React, { ReactNode } from 'react'
+
+export interface DevPubkeyProtocolProviderContext {
+  community?: PubKeyCommunity | null
+  isLoading: boolean
+  sdk: PubkeyProtocolSdk
+  signer: string
+}
+
+const DevPubkeyProtocolContext = React.createContext<DevPubkeyProtocolProviderContext>(
+  {} as DevPubkeyProtocolProviderContext,
+)
+export interface DevPubkeyProtocolProviderProps {
+  children: ReactNode
+  community: string
+  sdk: PubkeyProtocolSdk
+  signer: string
+}
+
+export function DevPubkeyProtocolProvider(props: DevPubkeyProtocolProviderProps) {
+  const communityQuery = useQuery({
+    queryKey: ['pubkey-protocol', 'community', { community: props.community }],
+    queryFn: () => props.sdk.communityGet({ community: props.community }),
+  })
+
+  const value = {
+    community: communityQuery.data,
+    isLoading: communityQuery.isLoading,
+    sdk: props.sdk,
+    signer: props.signer,
+  }
+
+  return <DevPubkeyProtocolContext.Provider value={value}>{props.children}</DevPubkeyProtocolContext.Provider>
+}
+
+export function useDevPubkeyProtocol() {
+  return React.useContext(DevPubkeyProtocolContext)
+}
+
+export interface DevPubkeyProtocolRenderProps {
+  sdk: PubkeyProtocolSdk
+  community: string
+  signer: string
+}

libs/web/dev/feature/src/lib/dev-pubkey-protocol.tsx

@@ -0,0 +1,60 @@
+import { Button, Group } from '@mantine/core'
+import { UiIcon } from '@pubkey-link/web-core-ui'
+import { toastSuccess, UiCard, UiDebug, UiGridRoute, UiGridRoutes, UiInfo, UiLoader, UiStack } from '@pubkey-ui/core'
+import { IconUsersGroup } from '@tabler/icons-react'
+import { ReactNode } from 'react'
+import { DevPubkeyProtocolLoader } from './dev-pubkey-protocol-loader'
+import { DevPubkeyProtocolProvider, useDevPubkeyProtocol } from './dev-pubkey-protocol-provider'
+
+export function DevPubkeyProtocol() {
+  const routes: UiGridRoute[] = [
+    {
+      path: 'dashboard',
+      label: 'Dashboard',
+      element: <Dashboard />,
+      leftSection: <UiIcon type="dashboard" size={20} />,
+    },
+    {
+      path: 'communities',
+      label: 'Communities',
+      element: (
+        <Page title="Communities">
+          <div>FOO</div>
+        </Page>
+      ),
+      leftSection: <IconUsersGroup size={20} />,
+    },
+  ]
+  return (
+    <DevPubkeyProtocolLoader
+      noConfig={<UiInfo title="No PubKey Protocol config" message="No PubKey Protocol config found in AppConfig." />}
+      render={({ sdk, community, signer }) => (
+        <DevPubkeyProtocolProvider community={community} sdk={sdk} signer={signer}>
+          <UiGridRoutes basePath={`/admin/development/pubkey-protocol`} routes={routes} />
+        </DevPubkeyProtocolProvider>
+      )}
+    />
+  )
+}
+
+function Page({ children, title }: { children: ReactNode; title: ReactNode }) {
+  return <UiCard title={title}>{children}</UiCard>
+}
+
+function Dashboard() {
+  const { community, isLoading, sdk, signer } = useDevPubkeyProtocol()
+
+  return isLoading ? (
+    <UiLoader />
+  ) : (
+    <Page title="PubKey Protocol">
+      <UiIcon type="dashboard" size={20} />
+      <UiDebug data={{ community, isLoading, signer }} open />
+      <UiStack>
+        <Group justify="center">
+          <Button onClick={() => toastSuccess('gm!')}>Click me!</Button>
+        </Group>
+      </UiStack>
+    </Page>
+  )
+}

libs/web/dev/feature/src/lib/dev.routes.tsx

@@ -4,6 +4,7 @@ import { DevBackup } from './dev-backup'
 import { DevConditionWizard } from './dev-condition-wizard'
 import { DevIdentityWizard } from './dev-identity-wizard'
 import { DevNew } from './dev-new'
+import { DevPubkeyProtocol } from './dev-pubkey-protocol'
 import { DevTokenMetadata } from './dev-token-metadata'
 import { DevUserAutocomplete } from './dev-user-autocomplete'
 
@@ -13,6 +14,7 @@ export default function DevRoutes() {
       <UiTabRoutes
         tabs={[
           { path: 'new', label: 'New', element: <DevNew /> },
+          { path: 'pubkey-protocol', label: 'PubKey Protocol', element: <DevPubkeyProtocol /> },
           { path: 'address-input', label: 'Address Input', element: <DevAddressInput /> },
           { path: 'backup', label: 'Backup', element: <DevBackup /> },
           { path: 'condition-wizard', label: 'Condition Wizard', element: <DevConditionWizard /> },