[website] resolve ENS public key (#415)

* remove og api route

* sort deps

* add compress opt to resolve fn

* add ens api route

* use ens

* fix loading state

* type response

* use await

* add zod dep

* add schema module

* add declaration file

* update yarn.lock

* mv next.config.js to next.config.mjs

* require some env

* update env loading

---------

Co-authored-by: Pavel Prichodko <14926950+prichodko@users.noreply.github.com>

apps/website/.env

@@ -1,3 +1,4 @@
 IGNORE_TS_CONFIG_PATHS=true
 TAMAGUI_TARGET=web
 TAMAGUI_DISABLE_WARN_DYNAMIC_LOAD=1
+

apps/website/env.d.ts

@@ -0,0 +1,11 @@
+import type { env } from './src/config/env.mjs'
+
+type Env = typeof env
+
+declare global {
+  namespace NodeJS {
+    /* eslint-disable @typescript-eslint/no-empty-interface */
+    interface ProcessEnv extends Env {}
+    /* eslint-enable @typescript-eslint/no-empty-interface */
+  }
+}

apps/website/next.config.mjs

@@ -1,9 +1,12 @@
 /* eslint-disable eslint-comments/disable-enable-pair */
-/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable import/default */
 
-/** @type {import('next').NextConfig} */
+import './src/config/env.mjs'
-const { withTamagui } = require('@tamagui/next-plugin')
+
-const { join } = require('path')
+import tamagui_next_plugin from '@tamagui/next-plugin'
+import { join } from 'node:path'
+
+const { withTamagui } = tamagui_next_plugin
 
 /** @type {import('next').NextConfig} */
 let config = {
@@ -59,7 +62,7 @@ const plugins = [
   }),
 ]
 
-module.exports = () => {
+export default () => {
   for (const plugin of plugins) {
     config = {
       ...config,

apps/website/package.json

@@ -21,9 +21,10 @@
     "@status-im/icons": "*",
     "@status-im/js": "*",
     "@tamagui/next-theme": "1.11.1",
+    "@tanstack/react-query": "^4.29.7",
     "@vercel/og": "^0.5.4",
-    "class-variance-authority": "^0.6.0",
     "@visx/visx": "^2.18.0",
+    "class-variance-authority": "^0.6.0",
     "d3-array": "^3.2.3",
     "d3-time-format": "^4.1.0",
     "next": "13.2.4",
@@ -31,8 +32,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-native-web": "^0.18.12",
-    "@tanstack/react-query": "^4.29.7",
+    "ts-pattern": "^4.3.0",
-    "ts-pattern": "^4.3.0"
+    "zod": "^3.21.4"
   },
   "devDependencies": {
     "@achingbrain/ssdp": "^4.0.1",

apps/website/src/components/preview-page.tsx

@@ -109,8 +109,10 @@ export function PreviewPage(props: PreviewPageProps) {
     channelUuid: urlChannelUuid,
     data: urlData,
     errorCode: urlErrorCode,
+    isLoading: urlIsLoading,
   } = useURLData(type, decodedData, encodedData)
 
+  const wakuQueryIsEnabled = Boolean(publicKey)
   const {
     data: wakuData,
     isLoading,
@@ -119,7 +121,7 @@ export function PreviewPage(props: PreviewPageProps) {
   } = useQuery({
     refetchOnWindowFocus: false,
     queryKey: [type],
-    enabled: !!publicKey,
+    enabled: wakuQueryIsEnabled,
     queryFn: async function ({ queryKey }): Promise<Data | null> {
       const client = await getRequestClient()
 
@@ -179,7 +181,20 @@ export function PreviewPage(props: PreviewPageProps) {
     },
   })
 
-  const loading = status === 'loading' || isLoading
+  const loading = getLoading()
+
+  function getLoading(): boolean {
+    if (urlIsLoading) {
+      return true
+    }
+
+    if (wakuQueryIsEnabled) {
+      return status === 'loading' || isLoading
+    }
+
+    return false
+  }
+
   const data: Data | undefined = wakuData ?? urlData
 
   const { avatarURL, bannerURL } = useMemo(() => {

apps/website/src/config/env.mjs

@@ -0,0 +1,8 @@
+import { z } from 'zod'
+
+export const envSchema = z.object({
+  INFURA_API_KEY: z.string(),
+  TAMAGUI_TARGET: z.literal('web'),
+})
+
+export const env = envSchema.parse(process.env)

apps/website/src/consts/error-codes.ts

@@ -2,4 +2,5 @@ export const ERROR_CODES = {
   NOT_FOUND: 404,
   INTERNAL_SERVER_ERROR: 500,
   INVALID_PUBLIC_KEY: 601,
+  INVALID_ENS_NAME: 602,
 }

apps/website/src/hooks/use-url-data.ts

@@ -13,6 +13,7 @@ import {
 import { ERROR_CODES } from '@/consts/error-codes'
 
 import type { Data } from '@/components/preview-page'
+import type { EnsResponse } from '@/pages/api/ens'
 import type { ChannelInfo, CommunityInfo, UserInfo } from '@status-im/js'
 import type {
   decodeChannelURLData,
@@ -34,6 +35,7 @@ export const useURLData = (
   const [channelUuid, setChannelUuid] = useState<string>()
   const [data, setData] = useState<Data>()
   const [error, setError] = useState<keyof typeof ERROR_CODES>()
+  const [isLoading, setIsLoading] = useState(false)
 
   const compressPublicKey = type !== 'profile'
 
@@ -47,7 +49,7 @@ export const useURLData = (
 
       const hash = window.location.hash.replace('#', '')
 
-      // use provided public key
+      // use provided public key or recover it from ENS name
       if (!decodedData || !encodedData) {
         if (!hash) {
           setError('NOT_FOUND')
@@ -55,6 +57,32 @@ export const useURLData = (
           return
         }
 
+        // recover public key from ENS name
+        const ensName = hash.match(/^.+\.eth$/)?.[0]
+        if (ensName) {
+          const fetchEnsPubkey = async () => {
+            try {
+              const response = await fetch('/api/ens', {
+                method: 'POST',
+                body: JSON.stringify({ ensName, compress: compressPublicKey }),
+              })
+              const { publicKey } = (await response.json()) as EnsResponse
+
+              setPublicKey(publicKey)
+            } catch {
+              setError('INVALID_ENS_NAME')
+            }
+
+            setIsLoading(false)
+          }
+
+          setIsLoading(true)
+          fetchEnsPubkey()
+
+          return
+        }
+
+        // use provided public key
         try {
           const publicKey = deserializePublicKey(hash, {
             compress: compressPublicKey,
@@ -71,7 +99,7 @@ export const useURLData = (
         }
       }
 
-      // recover public key
+      // recover public key from encoded data
       let deserializedPublicKey
       try {
         const recoveredPublicKey = recoverPublicKeyFromEncodedURLData(
@@ -154,5 +182,6 @@ export const useURLData = (
     channelUuid,
     data,
     errorCode: error ? ERROR_CODES[error] : undefined,
+    isLoading,
   }
 }

apps/website/src/lib/ethereum-client.ts

@@ -0,0 +1,17 @@
+import { EthereumClient } from '@status-im/js'
+
+import { env } from '@/config/env.mjs'
+
+let client: EthereumClient | undefined
+
+export function getEthereumClient(): EthereumClient | undefined {
+  if (!client) {
+    client = new EthereumClient(
+      `https://mainnet.infura.io/v3/${env.INFURA_API_KEY}`
+    )
+
+    return client
+  }
+
+  return client
+}

apps/website/src/pages/api/ens.ts

@@ -0,0 +1,32 @@
+import { getEthereumClient } from '@/lib/ethereum-client'
+
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+export type EnsResponse = {
+  publicKey: string
+}
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<EnsResponse>
+) {
+  const { ensName, compress } = JSON.parse(req.body)
+
+  const client = getEthereumClient()
+
+  if (!client) {
+    return
+  }
+
+  const publicKey = await client.resolvePublicKey(ensName, {
+    compress,
+  })
+
+  if (!publicKey) {
+    res.status(404).end()
+
+    return
+  }
+
+  res.status(200).json({ publicKey })
+}

apps/website/src/server/og.ts

@@ -1,33 +0,0 @@
-// see https://vercel.com/docs/concepts/functions/edge-functions/og-image-generation
-
-import { ImageResponse } from '@vercel/og'
-
-import type { NextRequest } from 'next/server'
-
-export const config = {
-  runtime: 'edge',
-}
-
-// todo?: set cache header too
-export function createHandler(
-  createComponent: (url: URL) => React.ReactElement
-) {
-  const handler = async (req: NextRequest) => {
-    try {
-      const component = createComponent(new URL(req.url))
-
-      return new ImageResponse(component, {
-        width: 1200,
-        height: 630,
-      })
-    } catch (error) {
-      console.error(error)
-
-      return new Response(`Failed to generate the image`, {
-        status: 500,
-      })
-    }
-  }
-
-  return handler
-}

apps/website/tsconfig.json

@@ -19,6 +19,6 @@
       ]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "env.d.ts"],
-  "exclude": ["node_modules", "next.config.js", "tailwind.config.js"]
+  "exclude": ["node_modules", "next.config.mjs", "tailwind.config.js"]
 }

packages/status-js/src/ethereum-client/ethereum-client.ts

@@ -8,7 +8,10 @@ export class EthereumClient {
     this.provider = new ethers.JsonRpcProvider(url)
   }
 
-  async resolveChatKey(ensName: string): Promise<string | undefined> {
+  async resolvePublicKey(
+    ensName: string,
+    options: { compress: boolean }
+  ): Promise<string | undefined> {
     try {
       const resolver = await this.provider.getResolver(ensName)
 
@@ -32,7 +35,7 @@ export class EthereumClient {
       const point = new Point(px, py)
       point.assertValidity()
 
-      const hex = point.toHex(true)
+      const hex = point.toHex(options.compress)
 
       return `0x${hex}`
     } catch {

yarn.lock

@@ -20123,6 +20123,11 @@ yoga-wasm-web@0.3.3, yoga-wasm-web@^0.3.3:
   resolved "https://registry.yarnpkg.com/yoga-wasm-web/-/yoga-wasm-web-0.3.3.tgz#eb8e9fcb18e5e651994732f19a220cb885d932ba"
   integrity sha512-N+d4UJSJbt/R3wqY7Coqs5pcV0aUj2j9IaQ3rNj9bVCLld8tTGKRa2USARjnvZJWVx1NDmQev8EknoczaOQDOA==
 
+zod@^3.21.4:
+  version "3.21.4"
+  resolved "https://registry.yarnpkg.com/zod/-/zod-3.21.4.tgz#10882231d992519f0a10b5dd58a38c9dabbb64db"
+  integrity sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw==
+
 zustand@^4.3.3:
   version "4.3.6"
   resolved "https://registry.yarnpkg.com/zustand/-/zustand-4.3.6.tgz#ce7804eb75361af0461a2d0536b65461ec5de86f"