feat: improve onboarding flow

Author: beeman

api-schema.graphql

@@ -168,6 +168,8 @@ type Query {
   userFindManyIdentity(input: IdentityUserFindManyInput!): [Identity!]
   userFindManyUser(input: UserUserFindManyInput!): UserPaging!
   userFindOneUser(username: String!): User
+  userGetOnboardingAvatarUrls: [String!]
+  userGetOnboardingUsernames: [String!]
   userRequestIdentityChallenge(input: IdentityRequestChallengeInput!): IdentityChallenge
 }
 
@@ -210,6 +212,7 @@ input UserAdminUpdateInput {
   developer: Boolean
   name: String
   onboarded: Boolean
+  profile: String
   role: UserRole
   status: UserStatus
   username: String

libs/api/auth/data-access/src/lib/strategies/oauth/api-auth-strategy-google.ts

@@ -32,7 +32,7 @@ function createGoogleProfile(profile: Profile) {
   return {
     externalId: profile.id,
     username: (profile.emails as Array<{ value?: string }>)[0].value,
-    avatarUrl: profile.photos?.[0].value,
+    // avatarUrl: profile.photos?.[0].value,
     name: profile.displayName,
   }
 }

libs/api/onboarding/data-access/src/lib/api-onboarding.service.ts

@@ -1,7 +1,94 @@
 import { Injectable } from '@nestjs/common'
-import { ApiCoreService } from '@pubkey-network/api-core-data-access'
+import { IdentityProvider } from '@prisma/client'
+import { ApiCoreService, ellipsify } from '@pubkey-network/api-core-data-access'
 
 @Injectable()
 export class ApiOnboardingService {
   constructor(private readonly core: ApiCoreService) {}
+
+  async getOnboardingUsernames(userId: string) {
+    const found = await this.core.data.user.findUnique({
+      where: { id: userId },
+      include: { identities: true },
+    })
+    if (!found) {
+      throw new Error(`User ${userId} not found`)
+    }
+    const usernames = found.identities
+      .filter((i) => i?.profile)
+      .map((i) => i.profile as { username?: string })
+      // Remove any identities that don't have a username
+      .filter((i) => i.username)
+      // Take the username property
+      .map((i) => i.username as string)
+      // Take the first part of any email addresses
+      .map((i) => i?.split('@')[0])
+      // Convert any special characters to lowercase
+      .map((i) => i.replace(/[^a-z0-9]/gi, '_').toLowerCase())
+
+    // For all usernames with an underscore, also offer the username without the underscore
+    for (const username of usernames) {
+      if (username.includes('_')) {
+        usernames.push(username.replace('_', ''))
+      }
+    }
+
+    const wallets = found.identities
+      // Remove any identities that are not Solana wallets
+      .filter((i) => i?.provider === IdentityProvider.Solana)
+      // Take the providerId property
+      .map((i) => i.providerId as string)
+      // Convert any special characters to lowercase
+      .map((i) => ellipsify(i, 4, '__').toLowerCase())
+
+    usernames.push(...wallets)
+
+    // Remove any duplicates and sort the usernames
+    return Array.from(new Set(usernames)).sort()
+  }
+
+  async getOnboardingAvatarUrls(userId: string) {
+    const found = await this.core.data.user.findUnique({
+      where: { id: userId },
+      include: { identities: true },
+    })
+    if (!found) {
+      throw new Error(`User ${userId} not found`)
+    }
+
+    const usernames: string[] = []
+
+    const avatarUrls = found.identities
+      .filter((i) => i?.profile)
+      .map((i) => i.profile as { avatarUrl?: string; username?: string })
+      .map((i) => {
+        // Collect any usernames
+        if (i.username) {
+          usernames.push(i.username)
+        }
+        return i
+      })
+      // Remove any identities that don't have a avatarUrl
+      .filter((i) => i.avatarUrl)
+      // Take the avatarUrl property
+      .map((i) => i.avatarUrl as string)
+
+    const cleaned = cleanupUsernames(usernames)
+
+    for (const username of cleaned) {
+      avatarUrls.push(`https://api.dicebear.com/9.x/initials/svg?backgroundColor=b6e3f4,c0aede,d1d4f9&seed=${username}`)
+    }
+
+    // Remove any duplicates and sort the avatarUrls
+    return Array.from(new Set(avatarUrls))
+  }
+}
+
+function cleanupUsernames(usernames: string[]) {
+  return (
+    usernames // Take the first part of any email addresses
+      .map((i) => i?.split('@')[0])
+      // Convert any special characters to lowercase
+      .map((i) => i.replace(/[^a-z0-9]/gi, '_').toLowerCase())
+  )
 }

libs/api/onboarding/feature/src/lib/api-onboarding.resolver.ts

@@ -1,7 +1,20 @@
-import { Resolver } from '@nestjs/graphql'
+import { UseGuards } from '@nestjs/common'
+import { Query, Resolver } from '@nestjs/graphql'
+import { ApiAuthGraphQLAdminGuard, CtxUserId } from '@pubkey-network/api-auth-data-access'
 import { ApiOnboardingService } from '@pubkey-network/api-onboarding-data-access'
 
 @Resolver()
+@UseGuards(ApiAuthGraphQLAdminGuard)
 export class ApiOnboardingResolver {
   constructor(private readonly service: ApiOnboardingService) {}
+
+  @Query(() => [String], { nullable: true })
+  async userGetOnboardingUsernames(@CtxUserId() userId: string) {
+    return this.service.getOnboardingUsernames(userId)
+  }
+
+  @Query(() => [String], { nullable: true })
+  async userGetOnboardingAvatarUrls(@CtxUserId() userId: string) {
+    return this.service.getOnboardingAvatarUrls(userId)
+  }
 }

libs/api/user/data-access/src/lib/dto/user-admin-update.input.ts

@@ -11,6 +11,8 @@ export class UserAdminUpdateInput {
   @Field({ nullable: true })
   avatarUrl?: string
   @Field({ nullable: true })
+  profile?: string
+  @Field({ nullable: true })
   developer?: boolean
   @Field({ nullable: true })
   onboarded?: boolean

libs/sdk/src/generated/graphql-sdk.ts

@@ -261,6 +261,8 @@ export type Query = {
   userFindManyIdentity?: Maybe<Array<Identity>>
   userFindManyUser: UserPaging
   userFindOneUser?: Maybe<User>
+  userGetOnboardingAvatarUrls?: Maybe<Array<Scalars['String']['output']>>
+  userGetOnboardingUsernames?: Maybe<Array<Scalars['String']['output']>>
   userRequestIdentityChallenge?: Maybe<IdentityChallenge>
 }
 
@@ -357,6 +359,7 @@ export type UserAdminUpdateInput = {
   developer?: InputMaybe<Scalars['Boolean']['input']>
   name?: InputMaybe<Scalars['String']['input']>
   onboarded?: InputMaybe<Scalars['Boolean']['input']>
+  profile?: InputMaybe<Scalars['String']['input']>
   role?: InputMaybe<UserRole>
   status?: InputMaybe<UserStatus>
   username?: InputMaybe<Scalars['String']['input']>
@@ -744,6 +747,14 @@ export type AnonVerifyIdentityChallengeMutation = {
   } | null
 }
 
+export type UserGetOnboardingUsernamesQueryVariables = Exact<{ [key: string]: never }>
+
+export type UserGetOnboardingUsernamesQuery = { __typename?: 'Query'; usernames?: Array<string> | null }
+
+export type UserGetOnboardingAvatarUrlsQueryVariables = Exact<{ [key: string]: never }>
+
+export type UserGetOnboardingAvatarUrlsQuery = { __typename?: 'Query'; avatarUrls?: Array<string> | null }
+
 export type PubkeyProfileDetailsFragment = {
   __typename?: 'PubkeyProfile'
   publicKey: string
@@ -1304,6 +1315,16 @@ export const AnonVerifyIdentityChallengeDocument = gql`
   }
   ${IdentityChallengeDetailsFragmentDoc}
 `
+export const UserGetOnboardingUsernamesDocument = gql`
+  query userGetOnboardingUsernames {
+    usernames: userGetOnboardingUsernames
+  }
+`
+export const UserGetOnboardingAvatarUrlsDocument = gql`
+  query userGetOnboardingAvatarUrls {
+    avatarUrls: userGetOnboardingAvatarUrls
+  }
+`
 export const CreateUserProfileDocument = gql`
   mutation createUserProfile($publicKey: String!) {
     created: createUserProfile(publicKey: $publicKey)
@@ -1469,6 +1490,8 @@ const UserVerifyIdentityChallengeDocumentString = print(UserVerifyIdentityChalle
 const UserLinkIdentityDocumentString = print(UserLinkIdentityDocument)
 const AnonRequestIdentityChallengeDocumentString = print(AnonRequestIdentityChallengeDocument)
 const AnonVerifyIdentityChallengeDocumentString = print(AnonVerifyIdentityChallengeDocument)
+const UserGetOnboardingUsernamesDocumentString = print(UserGetOnboardingUsernamesDocument)
+const UserGetOnboardingAvatarUrlsDocumentString = print(UserGetOnboardingAvatarUrlsDocument)
 const CreateUserProfileDocumentString = print(CreateUserProfileDocument)
 const ProfileIdentityAddDocumentString = print(ProfileIdentityAddDocument)
 const ProfileIdentityRemoveDocumentString = print(ProfileIdentityRemoveDocument)
@@ -1792,6 +1815,48 @@ export function getSdk(client: GraphQLClient, withWrapper: SdkFunctionWrapper =
         variables,
       )
     },
+    userGetOnboardingUsernames(
+      variables?: UserGetOnboardingUsernamesQueryVariables,
+      requestHeaders?: GraphQLClientRequestHeaders,
+    ): Promise<{
+      data: UserGetOnboardingUsernamesQuery
+      errors?: GraphQLError[]
+      extensions?: any
+      headers: Headers
+      status: number
+    }> {
+      return withWrapper(
+        (wrappedRequestHeaders) =>
+          client.rawRequest<UserGetOnboardingUsernamesQuery>(UserGetOnboardingUsernamesDocumentString, variables, {
+            ...requestHeaders,
+            ...wrappedRequestHeaders,
+          }),
+        'userGetOnboardingUsernames',
+        'query',
+        variables,
+      )
+    },
+    userGetOnboardingAvatarUrls(
+      variables?: UserGetOnboardingAvatarUrlsQueryVariables,
+      requestHeaders?: GraphQLClientRequestHeaders,
+    ): Promise<{
+      data: UserGetOnboardingAvatarUrlsQuery
+      errors?: GraphQLError[]
+      extensions?: any
+      headers: Headers
+      status: number
+    }> {
+      return withWrapper(
+        (wrappedRequestHeaders) =>
+          client.rawRequest<UserGetOnboardingAvatarUrlsQuery>(UserGetOnboardingAvatarUrlsDocumentString, variables, {
+            ...requestHeaders,
+            ...wrappedRequestHeaders,
+          }),
+        'userGetOnboardingAvatarUrls',
+        'query',
+        variables,
+      )
+    },
     createUserProfile(
       variables: CreateUserProfileMutationVariables,
       requestHeaders?: GraphQLClientRequestHeaders,
@@ -2273,6 +2338,7 @@ export function UserAdminUpdateInputSchema(): z.ZodObject<Properties<UserAdminUp
     developer: z.boolean().nullish(),
     name: z.string().nullish(),
     onboarded: z.boolean().nullish(),
+    profile: z.string().nullish(),
     role: UserRoleSchema.nullish(),
     status: UserStatusSchema.nullish(),
     username: z.string().nullish(),

libs/sdk/src/graphql/feature-onboarding.graphql

@@ -0,0 +1,7 @@
+query userGetOnboardingUsernames {
+  usernames: userGetOnboardingUsernames
+}
+
+query userGetOnboardingAvatarUrls {
+  avatarUrls: userGetOnboardingAvatarUrls
+}

libs/web/core/data-access/src/lib/sdk-provider.tsx

@@ -3,9 +3,9 @@ import { createContext, ReactNode, useContext } from 'react'
 
 const Context = createContext<Sdk>({} as Sdk)
 
-export function SdkProvider({ children }: { children: ReactNode }) {
-  const sdk: Sdk = getGraphQLSdk('/graphql')
+export const sdk: Sdk = getGraphQLSdk('/graphql')
 
+export function SdkProvider({ children }: { children: ReactNode }) {
   return <Context.Provider value={sdk}>{children}</Context.Provider>
 }
 

libs/web/core/feature/src/lib/web-core-routes-user.tsx

@@ -5,7 +5,7 @@ import { SettingsFeature } from '@pubkey-network/web-settings-feature'
 import { SolanaFeature } from '@pubkey-network/web-solana-feature'
 import { UserFeature } from '@pubkey-network/web-user-feature'
 import { UiDashboardItem, UiNotFound } from '@pubkey-ui/core'
-import { IconCurrencySolana, IconSettings, IconUser, IconUsers } from '@tabler/icons-react'
+import { IconCurrencySolana, IconSettings, IconStar, IconUser, IconUsers } from '@tabler/icons-react'
 import { Navigate, RouteObject, useRoutes } from 'react-router-dom'
 
 const links: UiDashboardItem[] = [
@@ -14,6 +14,7 @@ const links: UiDashboardItem[] = [
   { label: 'Settings', icon: IconSettings, to: '/settings' },
   { label: 'Solana', icon: IconCurrencySolana, to: '/solana' },
   { label: 'Users', icon: IconUsers, to: '/u' },
+  { label: 'Onboarding', icon: IconStar, to: '/onboarding' },
 ]
 
 const routes: RouteObject[] = [

libs/web/core/ui/src/lib/ui-header-profile.tsx

@@ -26,7 +26,7 @@ export function UiHeaderProfile({ user, logout }: { user?: User | null; logout:
         <Button p={0} variant={open ? 'light' : 'default'} radius="xl">
           <UiAvatar
             url={user?.avatarUrl}
-            name={user?.username}
+            name={user?.username ?? ''}
             alt={user?.username ?? 'User Avatar'}
             radius={100}
             size={34}