XMTP example-chat-react Chrome extension

.gitignore

@@ -39,3 +39,7 @@ yarn-error.log*
 scratch
 
 .npmrc
+
+# Chrome extension ignores
+public/esbuild
+public/firebase-messaging-sw.*

EXTENSION-README.md

@@ -0,0 +1,33 @@
+# Chrome extension README
+
+The chrome extension is a replica of the existing next app. Where possible the same components are used, but in many cases where the next router is relied upon, we need to branch the logic, because the next router doesn't work inside a chrome extension popup window.
+
+## Codebase structure
+
+The "root" for the extension is `src/popup/index.tsx`.
+
+## Building
+
+We use `esbuild` to build the extension.
+
+To build the extension for production, run `npm run ext:build`. To build it for dev, run `npm run ext:build:dev`.
+
+The build script outputs it's files to `public`.
+
+- The extension manifest lives at `public/manifest.json`.
+- The service worker/background script src is at `src/background/index.ts`. This gets output to `public/firebase-messaging-sw.js`. This is what firebase requires and expects by default in order to register a service worker listener for push notifications.
+- The rest of the app files end up in `public/esbuild`.
+
+## Development
+
+In development, you'll want to automatically output the build script when anything changes. You can do this via `npm run ext:watch`.
+
+You'll need to load the extension into chrome manually. To do this, go to chrome://extensions, enable developer mode, and click "Load unpacked". Select the public/ directory.
+
+### tsconfig react gotcha
+
+For compiling jsx, some of esbuild's configuration uses the project's tsconfig file.
+
+## Why not plasmo?
+
+I tried using plasmo initially, but was running into odd issues with it's polyfill library. Hence the custom esbuild

buf.gen.yaml

@@ -0,0 +1,12 @@
+version: v1
+plugins:
+  - name: es
+    out: gen
+    # With target=ts, we generate TypeScript files.
+    # Use target=js+dts to generate JavaScript and TypeScript declaration files
+    # like remote generation does.
+    opt: target=ts
+  - name: connect-web
+    out: gen
+    # With target=ts, we generate TypeScript files.
+    opt: target=ts

components/App.tsx

@@ -1,11 +1,17 @@
+import { WagmiConfig } from 'wagmi'
 import Layout from '../components/Layout'
+import { wagmiClient } from '../helpers/ethereumClient'
 
 type AppProps = {
   children?: React.ReactNode
 }
 
 function App({ children }: AppProps) {
-  return <Layout>{children}</Layout>
+  return (
+    <WagmiConfig client={wagmiClient}>
+      <Layout>{children}</Layout>
+    </WagmiConfig>
+  )
 }
 
 export default App

components/Conversation/Conversation.tsx

@@ -59,8 +59,8 @@ const Conversation = ({
   }
 
   return (
-    <>
-      <div className="bg-white h-[calc(100vh-7rem)]">
+    <div className="flex flex-col">
+      <div className="bg-white grow h-[calc(100vh-7rem)]">
         <div className="h-full flex justify-between flex-col">
           <MessagesList
             fetchNextMessages={fetchNextMessages}
@@ -69,8 +69,11 @@ const Conversation = ({
           />
         </div>
       </div>
-      <MessageComposer onSend={sendMessage} />
-    </>
+      <MessageComposer
+        onSend={sendMessage}
+        recipientWalletAddr={recipientWalletAddr}
+      />
+    </div>
   )
 }
 

components/Conversation/MessageComposer.tsx

@@ -1,77 +1,79 @@
-import React, { useEffect, useState } from 'react'
-import { classNames } from '../../helpers'
-import messageComposerStyles from '../../styles/MessageComposer.module.css'
-import upArrowGreen from '../../public/up-arrow-green.svg'
-import upArrowGrey from '../../public/up-arrow-grey.svg'
-import { useRouter } from 'next/router'
-import Image from 'next/image'
-
-type MessageComposerProps = {
-  onSend: (msg: string) => Promise<void>
-}
-
-const MessageComposer = ({ onSend }: MessageComposerProps): JSX.Element => {
-  const [message, setMessage] = useState('')
-  const router = useRouter()
-
-  useEffect(() => setMessage(''), [router.query.recipientWalletAddr])
-
-  const onMessageChange = (e: React.FormEvent<HTMLInputElement>) =>
-    setMessage(e.currentTarget.value)
-
-  const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault()
-    if (!message) {
-      return
-    }
-    setMessage('')
-    await onSend(message)
-  }
-
-  return (
-    <div className={classNames('bg-white', 'flex', 'items-center')}>
-      <form
-        className={classNames(
-          'flex',
-          'm-2',
-          'w-full',
-          'border',
-          'py-2',
-          'pl-4',
-          'mr-3',
-          'drop-shadow-xl',
-          'mt-0',
-          messageComposerStyles.bubble
-        )}
-        autoComplete="off"
-        onSubmit={onSubmit}
-      >
-        <input
-          type="text"
-          placeholder="Type something..."
-          className={classNames(
-            'block',
-            'w-full',
-            'text-md',
-            'md:text-sm',
-
-            messageComposerStyles.input
-          )}
-          name="message"
-          value={message}
-          onChange={onMessageChange}
-          required
-        />
-        <button type="submit" className={messageComposerStyles.arrow}>
-          {!message ? (
-            <Image src={upArrowGrey} alt="send" height={32} width={32} />
-          ) : (
-            <Image src={upArrowGreen} alt="send" height={32} width={32} />
-          )}
-        </button>
-      </form>
-    </div>
-  )
-}
-
-export default MessageComposer
+import React, { useEffect, useState } from 'react'
+import { classNames } from '../../helpers'
+import messageComposerStyles from '../../styles/MessageComposer.module.css'
+import upArrowGreen from '../../public/up-arrow-green.svg'
+import upArrowGrey from '../../public/up-arrow-grey.svg'
+import Image from 'next/image'
+
+type MessageComposerProps = {
+  onSend: (msg: string) => Promise<void>
+  recipientWalletAddr: string
+}
+
+const MessageComposer = ({
+  onSend,
+  recipientWalletAddr,
+}: MessageComposerProps): JSX.Element => {
+  const [message, setMessage] = useState('')
+
+  useEffect(() => setMessage(''), [recipientWalletAddr])
+
+  const onMessageChange = (e: React.FormEvent<HTMLInputElement>) =>
+    setMessage(e.currentTarget.value)
+
+  const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    if (!message) {
+      return
+    }
+    setMessage('')
+    await onSend(message)
+  }
+
+  return (
+    <div className={classNames('bg-white', 'flex', 'items-center')}>
+      <form
+        className={classNames(
+          'flex',
+          'm-2',
+          'w-full',
+          'border',
+          'py-2',
+          'pl-4',
+          'mr-3',
+          'drop-shadow-xl',
+          'mt-0',
+          messageComposerStyles.bubble
+        )}
+        autoComplete="off"
+        onSubmit={onSubmit}
+      >
+        <input
+          type="text"
+          placeholder="Type something..."
+          className={classNames(
+            'block',
+            'w-full',
+            'text-md',
+            'md:text-sm',
+
+            messageComposerStyles.input
+          )}
+          name="message"
+          value={message}
+          onChange={onMessageChange}
+          required
+        />
+        <button type="submit" className={messageComposerStyles.arrow}>
+          {!message ? (
+            <Image src={upArrowGrey} alt="send" height={32} width={32} />
+          ) : (
+            <Image src={upArrowGreen} alt="send" height={32} width={32} />
+          )}
+        </button>
+      </form>
+    </div>
+  )
+}
+
+export default MessageComposer

components/Conversation/RecipientControl.tsx

@@ -1,10 +1,16 @@
 import { useState, useEffect, useCallback } from 'react'
-import { useRouter } from 'next/router'
 import AddressInput from '../AddressInput'
-import { isEns, getAddressFromPath, is0xAddress } from '../../helpers'
+import { isEns, is0xAddress } from '../../helpers'
 import { useAppStore } from '../../store/app'
-import useWalletProvider from '../../hooks/useWalletProvider'
 import BackArrow from '../BackArrow'
+import { getEnsAddress, getEnsName } from '../../helpers/ethereumClient'
+
+type RecipientInputProps = {
+  recipientWalletAddress: string | undefined
+  onSubmit?: (address: string) => Promise<void> | void
+  onInputChange?: () => void
+  onBackArrowClick?: () => void
+}
 
 const RecipientInputMode = {
   InvalidEntry: 0,
@@ -14,11 +20,13 @@ const RecipientInputMode = {
   NotOnNetwork: 4,
 }
 
-const RecipientControl = (): JSX.Element => {
-  const { resolveName, lookupAddress } = useWalletProvider()
+const RecipientControl = ({
+  recipientWalletAddress,
+  onSubmit,
+  onInputChange,
+  onBackArrowClick,
+}: RecipientInputProps): JSX.Element => {
   const client = useAppStore((state) => state.client)
-  const router = useRouter()
-  const recipientWalletAddress = getAddressFromPath(router)
   const [recipientInputMode, setRecipientInputMode] = useState(
     RecipientInputMode.InvalidEntry
   )
@@ -31,27 +39,22 @@ const RecipientControl = (): JSX.Element => {
     [client]
   )
 
-  const onSubmit = async (address: string) => {
-    router.push(address ? `/dm/${address}` : '/dm/')
-  }
-
-  const handleBackArrowClick = useCallback(() => {
-    router.push('/')
-  }, [router])
-
-  const completeSubmit = async (address: string, input: HTMLInputElement) => {
-    if (await checkIfOnNetwork(address)) {
-      onSubmit(address)
-      input.blur()
-      setRecipientInputMode(RecipientInputMode.Submitted)
-    } else {
-      setRecipientInputMode(RecipientInputMode.NotOnNetwork)
-    }
-  }
+  const completeSubmit = useCallback(
+    async (address: string, input: HTMLInputElement) => {
+      if (await checkIfOnNetwork(address)) {
+        onSubmit(address)
+        input.blur()
+        setRecipientInputMode(RecipientInputMode.Submitted)
+      } else {
+        setRecipientInputMode(RecipientInputMode.NotOnNetwork)
+      }
+    },
+    [onSubmit, setRecipientInputMode, checkIfOnNetwork]
+  )
 
   useEffect(() => {
     const handleAddressLookup = async (address: string) => {
-      const name = await lookupAddress(address)
+      const name = await getEnsName(address)
       setHasName(!!name)
     }
     if (recipientWalletAddress && !isEns(recipientWalletAddress)) {
@@ -60,7 +63,7 @@ const RecipientControl = (): JSX.Element => {
     } else {
       setRecipientInputMode(RecipientInputMode.InvalidEntry)
     }
-  }, [lookupAddress, recipientWalletAddress])
+  }, [recipientWalletAddress])
 
   const handleSubmit = useCallback(
     async (e: React.SyntheticEvent, value?: string) => {
@@ -72,7 +75,8 @@ const RecipientControl = (): JSX.Element => {
       const recipientValue = value || data.recipient.value
       if (isEns(recipientValue)) {
         setRecipientInputMode(RecipientInputMode.FindingEntry)
-        const address = await resolveName(recipientValue)
+        const address = await getEnsAddress(recipientValue)
+
         if (address) {
           await completeSubmit(address, input)
         } else {
@@ -82,30 +86,33 @@ const RecipientControl = (): JSX.Element => {
         await completeSubmit(recipientValue, input)
       }
     },
-    [resolveName]
+    [completeSubmit]
   )
 
+  // If user enters an ens address or if we detect a valid eth wallet address, submit
+  // Otherwise, mark the input as "invalid"
   const handleInputChange = useCallback(
     async (e: React.SyntheticEvent) => {
       const data = e.target as typeof e.target & {
         value: string
       }
-      if (router.pathname !== '/dm') {
-        router.push('/dm')
-      }
+
+      // This is how the normal app changes the route, and the extension changes the app context
+      onInputChange?.()
+
       if (isEns(data.value) || is0xAddress(data.value)) {
         handleSubmit(e, data.value)
       } else {
         setRecipientInputMode(RecipientInputMode.InvalidEntry)
       }
     },
-    [handleSubmit, router]
+    [handleSubmit, onInputChange]
   )
 
   return (
     <>
       <div className="md:hidden flex items-center ml-3">
-        <BackArrow onClick={handleBackArrowClick} />
+        <BackArrow onClick={onBackArrowClick} />
       </div>
       <div className="flex-1 flex-col shrink justify-center flex bg-zinc-50 md:border-b md:border-gray-200 md:px-4 md:pb-[2px]">
         <form