This repository was archived by the owner on Jan 31, 2023. It is now read-only.

XMTP example-chat-react Chrome extension#175

Draft
ajsharp wants to merge 11 commits into
base:main
Choose a base branch
from
Draft

XMTP example-chat-react Chrome extension #175

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
0544095
chrome extension mega commit 🙈
ajsharp Jan 23, 2023
f136ced
add notification server bufgen deps + generated api client files
ajsharp Jan 23, 2023
e3111d0
extension readme
ajsharp Jan 23, 2023
174700e
add popup html file
ajsharp Jan 23, 2023
5197237
ignore extension build files
ajsharp Jan 23, 2023
77714c6
fixes infura issue
bhavya2611 Jan 18, 2023
493ba06
updated readme
bhavya2611 Jan 20, 2023
4f5e996
Merge remote-tracking branch 'upstream/main' into chrome-extension
ajsharp Jan 23, 2023
50da9c9
clean up extension layout; move ext push push registration to convers…
ajsharp Jan 24, 2023
1d5a39c
better disconnect cleanup
ajsharp Jan 24, 2023
6bf4692
remove old script
ajsharp Jan 24, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -39,3 +39,7 @@ yarn-error.log*
scratch

.npmrc

# Chrome extension ignores
public/esbuild
public/firebase-messaging-sw.*
33 changes: 33 additions & 0 deletions EXTENSION-README.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -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
12 changes: 12 additions & 0 deletions buf.gen.yaml
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -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
8 changes: 7 additions & 1 deletion components/App.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -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
11 changes: 7 additions & 4 deletions components/Conversation/Conversation.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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}
Expand All@@ -69,8 +69,11 @@ const Conversation = ({
/>
</div>
</div>
<MessageComposer onSend={sendMessage} />
</>
<MessageComposer
onSend={sendMessage}
recipientWalletAddr={recipientWalletAddr}
/>
</div>
)
}

Expand Down
156 changes: 79 additions & 77 deletions components/Conversation/MessageComposer.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -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
73 changes: 40 additions & 33 deletions components/Conversation/RecipientControl.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -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,
Expand All@@ -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
)
Expand All@@ -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)) {
Expand All@@ -60,7 +63,7 @@ const RecipientControl = (): JSX.Element => {
} else {
setRecipientInputMode(RecipientInputMode.InvalidEntry)
}
}, [lookupAddress, recipientWalletAddress])
}, [recipientWalletAddress])

const handleSubmit = useCallback(
async (e: React.SyntheticEvent, value?: string) => {
Expand All@@ -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 {
Expand All@@ -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
Expand Down
Loading
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content

This repository was archived by the owner on Jan 31, 2023. It is now read-only.

XMTP example-chat-react Chrome extension#175
 Draft

ajsharp
wants to merge
11
commits into

base:main
Choose a base branch

from

 Draft


XMTP example-chat-react Chrome extension
#175
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


11 commits


Select commit
Hold shift + click to select a range
0544095

chrome extension mega commit 🙈


ajsharp Jan 23, 2023
f136ced

add notification server bufgen deps + generated api client files


ajsharp Jan 23, 2023
e3111d0

extension readme


ajsharp Jan 23, 2023
174700e

add popup html file


ajsharp Jan 23, 2023
5197237

ignore extension build files


ajsharp Jan 23, 2023
77714c6

fixes infura issue


bhavya2611 Jan 18, 2023
493ba06

updated readme


bhavya2611 Jan 20, 2023
4f5e996

Merge remote-tracking branch 'upstream/main' into chrome-extension


ajsharp Jan 23, 2023
50da9c9

clean up extension layout; move ext push push registration to convers…


ajsharp Jan 24, 2023
1d5a39c

better disconnect cleanup


ajsharp Jan 24, 2023
6bf4692

remove old script


ajsharp Jan 24, 2023

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


4 changes: 4 additions & 0 deletions
.gitignore

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -39,3 +39,7 @@ yarn-error.log*
scratch

.npmrc

# Chrome extension ignores
public/esbuild
public/firebase-messaging-sw.*

33 changes: 33 additions & 0 deletions
EXTENSION-README.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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

12 changes: 12 additions & 0 deletions
buf.gen.yaml

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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

8 changes: 7 additions & 1 deletion
components/App.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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

11 changes: 7 additions & 4 deletions
components/Conversation/Conversation.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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}
Expand All@@ -69,8 +69,11 @@ const Conversation = ({
 />
 </div>
 </div>
 <MessageComposer onSend={sendMessage} />
 </>
 <MessageComposer
 onSend={sendMessage}
 recipientWalletAddr={recipientWalletAddr}
 />
 </div>
 )
}

Expand Down

156 changes: 79 additions & 77 deletions
components/Conversation/MessageComposer.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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

73 changes: 40 additions & 33 deletions
components/Conversation/RecipientControl.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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,
Expand All@@ -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
 )
Expand All@@ -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)) {
Expand All@@ -60,7 +63,7 @@ const RecipientControl = (): JSX.Element => {
 } else {
 setRecipientInputMode(RecipientInputMode.InvalidEntry)
 }
 }, [lookupAddress, recipientWalletAddress])
 }, [recipientWalletAddress])

 const handleSubmit = useCallback(
 async (e: React.SyntheticEvent, value?: string) => {
Expand All@@ -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 {
Expand All@@ -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
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content

This repository was archived by the owner on Jan 31, 2023. It is now read-only.

XMTP example-chat-react Chrome extension#175
 Draft

ajsharp
wants to merge
11
commits into

base:main
Choose a base branch

from

 Draft


XMTP example-chat-react Chrome extension
#175
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


11 commits


Select commit
Hold shift + click to select a range
0544095

chrome extension mega commit 🙈


ajsharp Jan 23, 2023
f136ced

add notification server bufgen deps + generated api client files


ajsharp Jan 23, 2023
e3111d0

extension readme


ajsharp Jan 23, 2023
174700e

add popup html file


ajsharp Jan 23, 2023
5197237

ignore extension build files


ajsharp Jan 23, 2023
77714c6

fixes infura issue


bhavya2611 Jan 18, 2023
493ba06

updated readme


bhavya2611 Jan 20, 2023
4f5e996

Merge remote-tracking branch 'upstream/main' into chrome-extension


ajsharp Jan 23, 2023
50da9c9

clean up extension layout; move ext push push registration to convers…


ajsharp Jan 24, 2023
1d5a39c

better disconnect cleanup


ajsharp Jan 24, 2023
6bf4692

remove old script


ajsharp Jan 24, 2023

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


4 changes: 4 additions & 0 deletions
.gitignore

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -39,3 +39,7 @@ yarn-error.log*
scratch

.npmrc

# Chrome extension ignores
public/esbuild
public/firebase-messaging-sw.*

33 changes: 33 additions & 0 deletions
EXTENSION-README.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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

12 changes: 12 additions & 0 deletions
buf.gen.yaml

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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

8 changes: 7 additions & 1 deletion
components/App.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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

11 changes: 7 additions & 4 deletions
components/Conversation/Conversation.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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}
Expand All@@ -69,8 +69,11 @@ const Conversation = ({
 />
 </div>
 </div>
 <MessageComposer onSend={sendMessage} />
 </>
 <MessageComposer
 onSend={sendMessage}
 recipientWalletAddr={recipientWalletAddr}
 />
 </div>
 )
}

Expand Down

156 changes: 79 additions & 77 deletions
components/Conversation/MessageComposer.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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

73 changes: 40 additions & 33 deletions
components/Conversation/RecipientControl.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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,
Expand All@@ -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
 )
Expand All@@ -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)) {
Expand All@@ -60,7 +63,7 @@ const RecipientControl = (): JSX.Element => {
 } else {
 setRecipientInputMode(RecipientInputMode.InvalidEntry)
 }
 }, [lookupAddress, recipientWalletAddress])
 }, [recipientWalletAddress])

 const handleSubmit = useCallback(
 async (e: React.SyntheticEvent, value?: string) => {
Expand All@@ -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 {
Expand All@@ -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
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content

This repository was archived by the owner on Jan 31, 2023. It is now read-only.

XMTP example-chat-react Chrome extension#175
 Draft

ajsharp
wants to merge
11
commits into

base:main
Choose a base branch

from

 Draft


XMTP example-chat-react Chrome extension
#175
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


11 commits


Select commit
Hold shift + click to select a range
0544095

chrome extension mega commit 🙈


ajsharp Jan 23, 2023
f136ced

add notification server bufgen deps + generated api client files


ajsharp Jan 23, 2023
e3111d0

extension readme


ajsharp Jan 23, 2023
174700e

add popup html file


ajsharp Jan 23, 2023
5197237

ignore extension build files


ajsharp Jan 23, 2023
77714c6

fixes infura issue


bhavya2611 Jan 18, 2023
493ba06

updated readme


bhavya2611 Jan 20, 2023
4f5e996

Merge remote-tracking branch 'upstream/main' into chrome-extension


ajsharp Jan 23, 2023
50da9c9

clean up extension layout; move ext push push registration to convers…


ajsharp Jan 24, 2023
1d5a39c

better disconnect cleanup


ajsharp Jan 24, 2023
6bf4692

remove old script


ajsharp Jan 24, 2023

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


4 changes: 4 additions & 0 deletions
.gitignore

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -39,3 +39,7 @@ yarn-error.log*
scratch

.npmrc

# Chrome extension ignores
public/esbuild
public/firebase-messaging-sw.*

33 changes: 33 additions & 0 deletions
EXTENSION-README.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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

12 changes: 12 additions & 0 deletions
buf.gen.yaml

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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

8 changes: 7 additions & 1 deletion
components/App.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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

11 changes: 7 additions & 4 deletions
components/Conversation/Conversation.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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}
Expand All@@ -69,8 +69,11 @@ const Conversation = ({
 />
 </div>
 </div>
 <MessageComposer onSend={sendMessage} />
 </>
 <MessageComposer
 onSend={sendMessage}
 recipientWalletAddr={recipientWalletAddr}
 />
 </div>
 )
}

Expand Down

156 changes: 79 additions & 77 deletions
components/Conversation/MessageComposer.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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

73 changes: 40 additions & 33 deletions
components/Conversation/RecipientControl.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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,
Expand All@@ -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
 )
Expand All@@ -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)) {
Expand All@@ -60,7 +63,7 @@ const RecipientControl = (): JSX.Element => {
 } else {
 setRecipientInputMode(RecipientInputMode.InvalidEntry)
 }
 }, [lookupAddress, recipientWalletAddress])
 }, [recipientWalletAddress])

 const handleSubmit = useCallback(
 async (e: React.SyntheticEvent, value?: string) => {
Expand All@@ -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 {
Expand All@@ -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
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content

This repository was archived by the owner on Jan 31, 2023. It is now read-only.

XMTP example-chat-react Chrome extension#175
 Draft

ajsharp
wants to merge
11
commits into

base:main
Choose a base branch

from

 Draft


XMTP example-chat-react Chrome extension
#175
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


11 commits


Select commit
Hold shift + click to select a range
0544095

chrome extension mega commit 🙈


ajsharp Jan 23, 2023
f136ced

add notification server bufgen deps + generated api client files


ajsharp Jan 23, 2023
e3111d0

extension readme


ajsharp Jan 23, 2023
174700e

add popup html file


ajsharp Jan 23, 2023
5197237

ignore extension build files


ajsharp Jan 23, 2023
77714c6

fixes infura issue


bhavya2611 Jan 18, 2023
493ba06

updated readme


bhavya2611 Jan 20, 2023
4f5e996

Merge remote-tracking branch 'upstream/main' into chrome-extension


ajsharp Jan 23, 2023
50da9c9

clean up extension layout; move ext push push registration to convers…


ajsharp Jan 24, 2023
1d5a39c

better disconnect cleanup


ajsharp Jan 24, 2023
6bf4692

remove old script


ajsharp Jan 24, 2023

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


4 changes: 4 additions & 0 deletions
.gitignore

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -39,3 +39,7 @@ yarn-error.log*
scratch

.npmrc

# Chrome extension ignores
public/esbuild
public/firebase-messaging-sw.*

33 changes: 33 additions & 0 deletions
EXTENSION-README.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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

12 changes: 12 additions & 0 deletions
buf.gen.yaml

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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

8 changes: 7 additions & 1 deletion
components/App.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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

11 changes: 7 additions & 4 deletions
components/Conversation/Conversation.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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}
Expand All@@ -69,8 +69,11 @@ const Conversation = ({
 />
 </div>
 </div>
 <MessageComposer onSend={sendMessage} />
 </>
 <MessageComposer
 onSend={sendMessage}
 recipientWalletAddr={recipientWalletAddr}
 />
 </div>
 )
}

Expand Down

156 changes: 79 additions & 77 deletions
components/Conversation/MessageComposer.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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

73 changes: 40 additions & 33 deletions
components/Conversation/RecipientControl.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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,
Expand All@@ -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
 )
Expand All@@ -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)) {
Expand All@@ -60,7 +63,7 @@ const RecipientControl = (): JSX.Element => {
 } else {
 setRecipientInputMode(RecipientInputMode.InvalidEntry)
 }
 }, [lookupAddress, recipientWalletAddress])
 }, [recipientWalletAddress])

 const handleSubmit = useCallback(
 async (e: React.SyntheticEvent, value?: string) => {
Expand All@@ -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 {
Expand All@@ -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
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content

This repository was archived by the owner on Jan 31, 2023. It is now read-only.

XMTP example-chat-react Chrome extension#175
 Draft

ajsharp
wants to merge
11
commits into

base:main
Choose a base branch

from

 Draft


XMTP example-chat-react Chrome extension
#175
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


11 commits


Select commit
Hold shift + click to select a range
0544095

chrome extension mega commit 🙈


ajsharp Jan 23, 2023
f136ced

add notification server bufgen deps + generated api client files


ajsharp Jan 23, 2023
e3111d0

extension readme


ajsharp Jan 23, 2023
174700e

add popup html file


ajsharp Jan 23, 2023
5197237

ignore extension build files


ajsharp Jan 23, 2023
77714c6

fixes infura issue


bhavya2611 Jan 18, 2023
493ba06

updated readme


bhavya2611 Jan 20, 2023
4f5e996

Merge remote-tracking branch 'upstream/main' into chrome-extension


ajsharp Jan 23, 2023
50da9c9

clean up extension layout; move ext push push registration to convers…


ajsharp Jan 24, 2023
1d5a39c

better disconnect cleanup


ajsharp Jan 24, 2023
6bf4692

remove old script


ajsharp Jan 24, 2023

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


4 changes: 4 additions & 0 deletions
.gitignore

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -39,3 +39,7 @@ yarn-error.log*
scratch

.npmrc

# Chrome extension ignores
public/esbuild
public/firebase-messaging-sw.*

33 changes: 33 additions & 0 deletions
EXTENSION-README.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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

12 changes: 12 additions & 0 deletions
buf.gen.yaml

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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

8 changes: 7 additions & 1 deletion
components/App.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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

11 changes: 7 additions & 4 deletions
components/Conversation/Conversation.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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}
Expand All@@ -69,8 +69,11 @@ const Conversation = ({
 />
 </div>
 </div>
 <MessageComposer onSend={sendMessage} />
 </>
 <MessageComposer
 onSend={sendMessage}
 recipientWalletAddr={recipientWalletAddr}
 />
 </div>
 )
}

Expand Down

156 changes: 79 additions & 77 deletions
components/Conversation/MessageComposer.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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

73 changes: 40 additions & 33 deletions
components/Conversation/RecipientControl.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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,
Expand All@@ -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
 )
Expand All@@ -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)) {
Expand All@@ -60,7 +63,7 @@ const RecipientControl = (): JSX.Element => {
 } else {
 setRecipientInputMode(RecipientInputMode.InvalidEntry)
 }
 }, [lookupAddress, recipientWalletAddress])
 }, [recipientWalletAddress])

 const handleSubmit = useCallback(
 async (e: React.SyntheticEvent, value?: string) => {
Expand All@@ -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 {
Expand All@@ -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
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content

This repository was archived by the owner on Jan 31, 2023. It is now read-only.

XMTP example-chat-react Chrome extension#175
 Draft

ajsharp
wants to merge
11
commits into

base:main
Choose a base branch

from

 Draft


XMTP example-chat-react Chrome extension
#175
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


11 commits


Select commit
Hold shift + click to select a range
0544095

chrome extension mega commit 🙈


ajsharp Jan 23, 2023
f136ced

add notification server bufgen deps + generated api client files


ajsharp Jan 23, 2023
e3111d0

extension readme


ajsharp Jan 23, 2023
174700e

add popup html file


ajsharp Jan 23, 2023
5197237

ignore extension build files


ajsharp Jan 23, 2023
77714c6

fixes infura issue


bhavya2611 Jan 18, 2023
493ba06

updated readme


bhavya2611 Jan 20, 2023
4f5e996

Merge remote-tracking branch 'upstream/main' into chrome-extension


ajsharp Jan 23, 2023
50da9c9

clean up extension layout; move ext push push registration to convers…


ajsharp Jan 24, 2023
1d5a39c

better disconnect cleanup


ajsharp Jan 24, 2023
6bf4692

remove old script


ajsharp Jan 24, 2023

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


4 changes: 4 additions & 0 deletions
.gitignore

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -39,3 +39,7 @@ yarn-error.log*
scratch

.npmrc

# Chrome extension ignores
public/esbuild
public/firebase-messaging-sw.*

33 changes: 33 additions & 0 deletions
EXTENSION-README.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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

12 changes: 12 additions & 0 deletions
buf.gen.yaml

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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

8 changes: 7 additions & 1 deletion
components/App.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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

11 changes: 7 additions & 4 deletions
components/Conversation/Conversation.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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}
Expand All@@ -69,8 +69,11 @@ const Conversation = ({
 />
 </div>
 </div>
 <MessageComposer onSend={sendMessage} />
 </>
 <MessageComposer
 onSend={sendMessage}
 recipientWalletAddr={recipientWalletAddr}
 />
 </div>
 )
}

Expand Down

156 changes: 79 additions & 77 deletions
components/Conversation/MessageComposer.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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

73 changes: 40 additions & 33 deletions
components/Conversation/RecipientControl.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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,
Expand All@@ -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
 )
Expand All@@ -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)) {
Expand All@@ -60,7 +63,7 @@ const RecipientControl = (): JSX.Element => {
 } else {
 setRecipientInputMode(RecipientInputMode.InvalidEntry)
 }
 }, [lookupAddress, recipientWalletAddress])
 }, [recipientWalletAddress])

 const handleSubmit = useCallback(
 async (e: React.SyntheticEvent, value?: string) => {
Expand All@@ -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 {
Expand All@@ -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
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content

This repository was archived by the owner on Jan 31, 2023. It is now read-only.

XMTP example-chat-react Chrome extension#175
 Draft

ajsharp
wants to merge
11
commits into

base:main
Choose a base branch

from

 Draft


XMTP example-chat-react Chrome extension
#175
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


11 commits


Select commit
Hold shift + click to select a range
0544095

chrome extension mega commit 🙈


ajsharp Jan 23, 2023
f136ced

add notification server bufgen deps + generated api client files


ajsharp Jan 23, 2023
e3111d0

extension readme


ajsharp Jan 23, 2023
174700e

add popup html file


ajsharp Jan 23, 2023
5197237

ignore extension build files


ajsharp Jan 23, 2023
77714c6

fixes infura issue


bhavya2611 Jan 18, 2023
493ba06

updated readme


bhavya2611 Jan 20, 2023
4f5e996

Merge remote-tracking branch 'upstream/main' into chrome-extension


ajsharp Jan 23, 2023
50da9c9

clean up extension layout; move ext push push registration to convers…


ajsharp Jan 24, 2023
1d5a39c

better disconnect cleanup


ajsharp Jan 24, 2023
6bf4692

remove old script


ajsharp Jan 24, 2023

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


4 changes: 4 additions & 0 deletions
.gitignore

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -39,3 +39,7 @@ yarn-error.log*
scratch

.npmrc

# Chrome extension ignores
public/esbuild
public/firebase-messaging-sw.*

33 changes: 33 additions & 0 deletions
EXTENSION-README.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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

12 changes: 12 additions & 0 deletions
buf.gen.yaml

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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

8 changes: 7 additions & 1 deletion
components/App.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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

11 changes: 7 additions & 4 deletions
components/Conversation/Conversation.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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}
Expand All@@ -69,8 +69,11 @@ const Conversation = ({
 />
 </div>
 </div>
 <MessageComposer onSend={sendMessage} />
 </>
 <MessageComposer
 onSend={sendMessage}
 recipientWalletAddr={recipientWalletAddr}
 />
 </div>
 )
}

Expand Down

156 changes: 79 additions & 77 deletions
components/Conversation/MessageComposer.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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

73 changes: 40 additions & 33 deletions
components/Conversation/RecipientControl.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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,
Expand All@@ -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
 )
Expand All@@ -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)) {
Expand All@@ -60,7 +63,7 @@ const RecipientControl = (): JSX.Element => {
 } else {
 setRecipientInputMode(RecipientInputMode.InvalidEntry)
 }
 }, [lookupAddress, recipientWalletAddress])
 }, [recipientWalletAddress])

 const handleSubmit = useCallback(
 async (e: React.SyntheticEvent, value?: string) => {
Expand All@@ -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 {
Expand All@@ -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
Expand Down
Loading