Merge branch 'upstream-main' into upstream-main-merge-2

Author: ajsharp

README.md

@@ -26,8 +26,6 @@ NEXT_PUBLIC_INFURA_ID={YOUR_INFURA_ID}
 
 If you do not have an Infura ID, you can follow [these instructions](https://blog.infura.io/getting-started-with-infura-28e41844cc89/) to get one.
 
-_This example comes preconfigured with an Infura ID provided for demonstration purposes. If you plan to fork or host it, you must use your own Infura ID as detailed above._
-
 ### Install the package
 
 ```bash
@@ -62,6 +60,6 @@ The application uses the `xmtp-js` [Conversations](https://github.com/xmtp/xmtp-
 Here are some important considerations when working with the example chat application:
 
 - The application sends and receives messages using the XMTP `dev` network environment. To connect to the `production` network instead, set the following environment variable `NEXT_PUBLIC_XMTP_ENVIRONMENT=production`.
-     - XMTP may occasionally delete messages and keys from the `dev` network, and will provide advance notice in the XMTP Discord community ([request access](https://xmtp.typeform.com/to/yojTJarb?utm_source=docs_home)). The `production` network is configured to store messages indefinitely. 
+  - XMTP may occasionally delete messages and keys from the `dev` network, and will provide advance notice in the XMTP Discord community ([request access](https://xmtp.typeform.com/to/yojTJarb?utm_source=docs_home)). The `production` network is configured to store messages indefinitely.
 - You can't yet send a message to a wallet address that hasn't used XMTP. The client displays an error when it looks up an address that doesn't have an identity broadcast on the XMTP network.
-   - This limitation will soon be resolved by improvements to the `xmtp-js` library that will allow messages to be created and stored for future delivery, even if the recipient hasn't used XMTP yet.
+  - This limitation will soon be resolved by improvements to the `xmtp-js` library that will allow messages to be created and stored for future delivery, even if the recipient hasn't used XMTP yet.

hooks/useWalletProvider.tsx

@@ -21,9 +21,6 @@ let provider: ethers.providers.Web3Provider
 const useWalletProvider = () => {
   const { open: openWeb3Modal, isOpen } = useWeb3Modal()
   const { data: signer } = useSigner()
-  // useWalletProvider()
-  // const [web3Modal, setWeb3Modal] = useState<Web3Modal>()
-  // const setAddress = useAppStore((state) => state.setAddress)
   const setSigner = useAppStore((state) => state.setSigner)
   const reset = useAppStore((state) => state.reset)
 
@@ -104,68 +101,6 @@ const useWalletProvider = () => {
     }
   }, [openWeb3Modal, isOpen])
 
-  // const connect = useCallback(async () => {
-  //   // if (!web3Modal) {
-  //   //   throw new Error('web3Modal not initialized')
-  //   // }
-  //   if (isOpen) {
-  //     return null
-  //   }
-
-  //   try {
-  //     openWeb3Modal()
-  //     // const instance = await web3Modal.connect()
-  //     // if (!instance) {
-  //     //   return
-  //     // }
-  //     // instance.on('accountsChanged', handleAccountsChanged)
-
-  //     // provider = new ethers.providers.Web3Provider(instance, 'any')
-  //     // const newSigner = provider.getSigner()
-  //     // setSigner(newSigner)
-  //     // setAddress(await newSigner.getAddress())
-  //     // return newSigner
-  //   } catch (e) {
-  //     // TODO: better error handling/surfacing here.
-  //     // Note that web3Modal.connect throws an error when the user closes the
-  //     // modal, as "User closed modal"
-  //     console.log('error', e)
-  //   }
-  // }, [isOpen, openWeb3Modal])
-
-  // useEffect(() => {
-  //   console.log('useWalletProvider: initializing web3Modal')
-
-  // TODO: Remove this, don't need all the useEffect stuff with the new web3modal stuff
-  // useEffect(() => {
-  //   if (!web3Modal) {
-  //     return
-  //   }
-  //   const initCached = async () => {
-  //     try {
-  //       const cachedProviderJson = localStorage.getItem(
-  //         'WEB3_CONNECT_CACHED_PROVIDER'
-  //       )
-  //       if (!cachedProviderJson) {
-  //         return
-  //       }
-  //       const cachedProviderName = JSON.parse(cachedProviderJson)
-  //       const instance = await web3Modal.connectTo(cachedProviderName)
-  //       if (!instance) {
-  //         return
-  //       }
-  //       instance.on('accountsChanged', handleAccountsChanged)
-  //       provider = new ethers.providers.Web3Provider(instance, 'any')
-  //       const newSigner = provider.getSigner()
-  //       setSigner(newSigner)
-  //       setAddress(await newSigner.getAddress())
-  //     } catch (e) {
-  //       console.error(e)
-  //     }
-  //   }
-  //   initCached()
-  // }, [web3Modal])
-
   return {
     resolveName,
     lookupAddress,

store/app.tsx

@@ -2,13 +2,16 @@ import { Client, Conversation, DecodedMessage } from '@xmtp/xmtp-js'
 import { Signer } from 'ethers'
 import create from 'zustand'
 import getUniqueMessages from '../helpers/getUniqueMessages'
+import Web3Modal from 'web3modal'
 
 // Used to keep track of the current view state of the extension app
 // The extension doesn't have access to next/router, so captures
 // the state otherwise handled by the router.
 type ExtensionAppViewState = 'dm' | 'home' | 'conversation'
 
 interface AppState {
+  web3Modal: Web3Modal | undefined
+  setWeb3Modal: (signer: Web3Modal | undefined) => void
   signer: Signer | undefined
   activeRecipient: string | undefined
   setSigner: (signer: Signer | undefined) => void
@@ -34,6 +37,9 @@ interface AppState {
 }
 
 export const useAppStore = create<AppState>((set) => ({
+  web3Modal: undefined,
+  setWeb3Modal: (web3Modal: Web3Modal | undefined) =>
+    set(() => ({ web3Modal })),
   signer: undefined,
   setSigner: (signer: Signer | undefined) => set(() => ({ signer })),
   address: undefined,