Add profile section in explorer

explorer/.env.sample

@@ -5,6 +5,8 @@ NEXTAUTH_SECRET='secret-key-1234'
 NEXTAUTH_URL='http://localhost:3000/'
 
 FAUNA_DB_SECRET="<fauna-db-secret>"
+HASURA_ADMIN_SECRET="<hasura-admin-secret>"
+USERS_INDEXER_NETWORK="mainnet"
 
 # Google Analytics ID
 GA_MEASUREMENT_ID=G-

explorer/package.json

@@ -77,6 +77,7 @@
     "siwe": "^2.1.4",
     "tailwind-datepicker-react": "^1.4.3",
     "typescript": "^5.3.3",
+    "uuid": "^11.0.3",
     "web-vitals": "^3.5.2",
     "xlsx": "^0.18.5",
     "yup": "^0.32.11",

explorer/src/app/[chain]/profile/api-keys/page.tsx

@@ -0,0 +1,20 @@
+import { NotFound } from 'components/layout/NotFound'
+import { ApiKeysPage } from 'components/Profile/ApiKeys'
+import { Routes, RoutesProfile } from 'constants/routes'
+import { Metadata } from 'next'
+import { FC } from 'react'
+import type { ChainPageProps } from 'types/app'
+import { getMetadata } from 'utils/metadata/basic'
+import { isRouteSupportingNetwork } from 'utils/route'
+
+export const generateMetadata = ({ params: { chain } }: ChainPageProps): Metadata =>
+  getMetadata(chain, 'Profile API Keys', undefined, '/images/share.png', false)
+
+const Page: FC<ChainPageProps> = ({ params: { chain } }) =>
+  isRouteSupportingNetwork(chain, Routes.profile, RoutesProfile.apiKeys) ? (
+    <ApiKeysPage />
+  ) : (
+    <NotFound />
+  )
+
+export default Page

explorer/src/app/[chain]/profile/layout.tsx

@@ -0,0 +1,7 @@
+import { MainLayout } from 'components/layout/Layout'
+import { ProfileHeader } from 'components/layout/ProfileHeader'
+import type { ChildrenPageProps } from 'types/app'
+
+export default async function Layout({ children }: ChildrenPageProps) {
+  return <MainLayout subHeader={<ProfileHeader />}>{children}</MainLayout>
+}

explorer/src/app/[chain]/profile/page.tsx

@@ -0,0 +1,20 @@
+import { isRouteSupportingNetwork } from '@/utils/route'
+import { NotFound } from 'components/layout/NotFound'
+import { ProfilePage } from 'components/Profile/Profile'
+import { Routes, RoutesProfile } from 'constants/routes'
+import { Metadata } from 'next'
+import { FC } from 'react'
+import type { ChainPageProps } from 'types/app'
+import { getMetadata } from 'utils/metadata/basic'
+
+export const generateMetadata = ({ params: { chain } }: ChainPageProps): Metadata =>
+  getMetadata(chain, 'Profile', undefined, '/images/share.png', false)
+
+const Page: FC<ChainPageProps> = ({ params: { chain } }) =>
+  isRouteSupportingNetwork(chain, Routes.profile, RoutesProfile.profile) ? (
+    <ProfilePage />
+  ) : (
+    <NotFound />
+  )
+
+export default Page

explorer/src/app/[chain]/profile/wallets/page.tsx

@@ -0,0 +1,20 @@
+import { NotFound } from 'components/layout/NotFound'
+import { WalletsPage } from 'components/Profile/Wallets'
+import { Routes, RoutesProfile } from 'constants/routes'
+import { Metadata } from 'next'
+import { FC } from 'react'
+import type { ChainPageProps } from 'types/app'
+import { getMetadata } from 'utils/metadata/basic'
+import { isRouteSupportingNetwork } from 'utils/route'
+
+export const generateMetadata = ({ params: { chain } }: ChainPageProps): Metadata =>
+  getMetadata(chain, 'Profile Wallets', undefined, '/images/share.png', false)
+
+const Page: FC<ChainPageProps> = ({ params: { chain } }) =>
+  isRouteSupportingNetwork(chain, Routes.profile, RoutesProfile.apiKeys) ? (
+    <WalletsPage />
+  ) : (
+    <NotFound />
+  )
+
+export default Page

explorer/src/app/api/profile/delete-api-key/route.ts

@@ -0,0 +1,48 @@
+import { cryptoWaitReady, NetworkId, signatureVerify } from '@autonomys/auto-utils'
+import { NextRequest, NextResponse } from 'next/server'
+import { queryGraphqlServer } from 'utils/queryGraphqlServer'
+
+export const POST = async (req: NextRequest) => {
+  try {
+    const NETWORK = process.env.USERS_INDEXER_NETWORK || NetworkId.LOCALHOST
+    const body = await req.json()
+    const { values, message, signature } = body
+    const { subspaceAccount, apiKeyId } = values
+    await cryptoWaitReady()
+
+    // Verify the signature to ensure it is valid
+    const { isValid } = signatureVerify(message, signature, subspaceAccount)
+    if (!isValid) return NextResponse.json({ error: 'Invalid signature' }, { status: 400 })
+
+    await queryGraphqlServer(
+      `
+      mutation EditApiKey($apiKeyId: uuid!) {
+        update_users_api_keys_by_pk(
+          pk_columns: {
+            id: $apiKeyId
+          },
+          _set: {
+            deleted_at: "now()"
+          }
+        ) {
+          id
+          deleted_at
+        }
+      }`,
+      {
+        apiKeyId,
+      },
+      NETWORK,
+      {
+        'x-hasura-admin-secret': process.env.HASURA_ADMIN_SECRET,
+      },
+    )
+
+    return NextResponse.json({
+      message: 'API key deleted successfully',
+    })
+  } catch (error) {
+    console.error('Error deleting API key:', error)
+    return NextResponse.json({ error: 'Failed to delete API key' }, { status: 500 })
+  }
+}

explorer/src/app/api/profile/read/route.ts

@@ -0,0 +1,96 @@
+import { cryptoWaitReady, NetworkId, shortString, signatureVerify } from '@autonomys/auto-utils'
+import { NextRequest, NextResponse } from 'next/server'
+import { queryGraphqlServer } from 'utils/queryGraphqlServer'
+
+export const POST = async (req: NextRequest) => {
+  try {
+    const NETWORK = process.env.USERS_INDEXER_NETWORK || NetworkId.LOCALHOST
+    const body = await req.json()
+    const { account, message, signature } = body
+    await cryptoWaitReady()
+    // Verify the signature to ensure it is valid
+    const { isValid } = signatureVerify(message, signature, account)
+    if (!isValid) return NextResponse.json({ error: 'Invalid signature' }, { status: 400 })
+
+    const data = await queryGraphqlServer(
+      `
+      query GetProfileByWalletAddress($account: String!) {
+        users_wallets(where: { address: { _eq: $account}}) {
+          address
+          profile {
+            id
+            name
+            description
+            avatar: avatar_url
+            banner: banner_url
+            website
+            email
+            discord
+            github
+            twitter
+            apiTotalRequests: api_total_requests
+            apiDailyRequestsLimit: api_daily_requests_limit
+            apiMonthlyRequestsLimit: api_monthly_requests_limit
+            proofMessage: proof_message
+            proofSignature: proof_signature
+
+            wallets {
+              id
+              address
+              type
+              createdAt: created_at
+              updatedAt: updated_at
+              deletedAt: deleted_at
+            }
+
+            apiKeys: api_keys {
+              id
+              key
+              description
+              totalRequests: total_requests
+              createdAt: created_at
+              updatedAt: updated_at
+              deletedAt: deleted_at
+            }
+          }
+        }
+      }`,
+      {
+        account,
+      },
+      NETWORK,
+      {
+        'x-hasura-admin-secret': process.env.HASURA_ADMIN_SECRET,
+      },
+    )
+
+    if (data.users_wallets.length === 0)
+      return NextResponse.json({
+        message: 'Profile not found',
+      })
+    const userProfile = data.users_wallets[0].profile
+
+    const userApiKeys = userProfile.apiKeys
+      .map((apiKey: { key: string }) => ({
+        ...apiKey,
+        key: shortString(apiKey.key, 4),
+      }))
+      .filter((apiKey: { deletedAt: null | string }) => apiKey.deletedAt === null)
+    delete userProfile.apiKeys
+
+    const userWallets = userProfile.wallets.filter(
+      (wallet: { deletedAt: null | string }) => wallet.deletedAt === null,
+    )
+    delete userProfile.wallets
+
+    return NextResponse.json({
+      message: 'Profile loaded successfully',
+      profile: userProfile,
+      apiKeys: userApiKeys,
+      wallets: userWallets,
+    })
+  } catch (error) {
+    console.error('Error reading profile:', error)
+    return NextResponse.json({ error: 'Failed to read profile' }, { status: 500 })
+  }
+}

explorer/src/app/api/profile/save-api-key/route.ts

@@ -0,0 +1,60 @@
+import { cryptoWaitReady, NetworkId, signatureVerify } from '@autonomys/auto-utils'
+import { NextRequest, NextResponse } from 'next/server'
+import { queryGraphqlServer } from 'utils/queryGraphqlServer'
+
+export const POST = async (req: NextRequest) => {
+  try {
+    const NETWORK = process.env.USERS_INDEXER_NETWORK || NetworkId.LOCALHOST
+    const body = await req.json()
+    const { values, message, signature } = body
+    const { subspaceAccount, description, profileId } = values
+    await cryptoWaitReady()
+
+    // Verify the signature to ensure it is valid
+    const { isValid } = signatureVerify(message, signature, subspaceAccount)
+    if (!isValid) return NextResponse.json({ error: 'Invalid signature' }, { status: 400 })
+
+    const data = await queryGraphqlServer(
+      `
+      mutation SaveApiKey($profileId: uuid!, $description: String!) {
+        insert_users_api_keys_one(
+          object: {
+            profile_id: $profileId
+            description: $description
+            total_requests: 0
+          }
+          on_conflict: {
+            constraint: api_keys_pkey,
+            update_columns: [
+              description
+            ]
+          }
+        ) {
+          id
+          profile_id
+          key
+          description
+          total_requests
+        }
+      }`,
+      {
+        profileId,
+        description,
+      },
+      NETWORK,
+      {
+        'x-hasura-admin-secret': process.env.HASURA_ADMIN_SECRET,
+      },
+    )
+    const key = data.insert_users_api_keys_one.key
+
+    return NextResponse.json({
+      message: 'API key created successfully',
+      key,
+      description,
+    })
+  } catch (error) {
+    console.error('Error creating API key:', error)
+    return NextResponse.json({ error: 'Failed to create API key' }, { status: 500 })
+  }
+}