Demo

.gitignore

@@ -29,6 +29,7 @@ yarn-error.log*
 .env.development.local
 .env.test.local
 .env.production.local
+.env
 
 # vercel
 .vercel

components/Address.test.tsx

@@ -12,12 +12,15 @@ nextRouter.useRouter.mockImplementation(() => ({ route: '/' }))
 
 describe('Address', () => {
   it('renders value', () => {
-    const { container } = render(<Address address={'0xfoo'} />)
-    expect(container.textContent).toBe('0xfoo')
-    expect(container.querySelector('div > span')).toHaveAttribute(
-      'title',
-      '0xfoo'
-    )
+    let text: string | null
+    let span: Element | null
+    act(() => {
+      const { container } = render(<Address address={'0xfoo'} />)
+      text = container.textContent
+      span = container.querySelector('div > span')
+    })
+    waitFor(() => expect(text).toBe('0xfoo'))
+    waitFor(() => expect(span).toHaveAttribute('title', '0xfoo'))
   })
 
   it('renders lookup', async () => {

components/Address.tsx

@@ -1,13 +1,23 @@
+import { useEffect, useState } from 'react'
 import { classNames, shortAddress } from '../helpers'
-import useEns from '../hooks/useEns'
+import useEnsHooks from '../hooks/useEnsHooks'
 
 type AddressProps = {
   address: string
   className?: string
 }
 
 const Address = ({ address, className }: AddressProps): JSX.Element => {
-  const { name, loading } = useEns(address)
+  const [name, setName] = useState<string>()
+  const { lookupAddress, loading } = useEnsHooks()
+
+  useEffect(() => {
+    const getName = async () => {
+      const newName = await lookupAddress(address)
+      setName(newName)
+    }
+    getName()
+  }, [address, lookupAddress])
 
   return (
     <span

components/AddressInput.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useRef, useCallback } from 'react'
 import { checkIfPathIsEns, classNames } from '../helpers'
-import useWalletProvider from '../hooks/useWalletProvider'
+import useEnsHooks from '../hooks/useEnsHooks'
 import { useAppStore } from '../store/app'
 
 type AddressInputProps = {
@@ -20,7 +20,7 @@ const AddressInput = ({
   placeholder,
   onInputChange,
 }: AddressInputProps): JSX.Element => {
-  const { lookupAddress } = useWalletProvider()
+  const { lookupAddress } = useEnsHooks()
   const walletAddress = useAppStore((state) => state.address)
   const inputElement = useRef(null)
   const [value, setValue] = useState<string>(recipientWalletAddress || '')

components/Avatar.tsx

@@ -1,19 +1,31 @@
+import { useEffect, useState } from 'react'
 import Blockies from 'react-blockies'
-import useEns from '../hooks/useEns'
+import useEnsHooks from '../hooks/useEnsHooks'
 
 type AvatarProps = {
   peerAddress: string
 }
 
 const Avatar = ({ peerAddress }: AvatarProps) => {
-  const { avatarUrl, loading } = useEns(peerAddress)
+  const [avatarUrl, setAvatarUrl] = useState<string>()
+  const { getAvatarUrl, loading } = useEnsHooks()
+
+  useEffect(() => {
+    const getUrl = async () => {
+      const newAvatarUrl = await getAvatarUrl(peerAddress)
+      setAvatarUrl(newAvatarUrl)
+    }
+    getUrl()
+  }, [getAvatarUrl, peerAddress])
+
   if (loading) {
     return (
       <div className="animate-pulse flex">
         <div className="rounded-full bg-gray-200 h-10 w-10" />
       </div>
     )
   }
+
   if (avatarUrl) {
     return (
       <div>
@@ -26,7 +38,15 @@ const Avatar = ({ peerAddress }: AvatarProps) => {
       </div>
     )
   }
-  return <Blockies seed={peerAddress.toLowerCase()} scale={5} size={8} className="rounded-full" />
+
+  return (
+    <Blockies
+      seed={peerAddress.toLowerCase()}
+      scale={5}
+      size={8}
+      className="rounded-full"
+    />
+  )
 }
 
 export default Avatar

components/Conversation/Conversation.tsx

@@ -60,7 +60,7 @@ const Conversation = ({
 
   return (
     <>
-      <div className="bg-white h-[calc(100vh-8rem)]">
+      <div className="bg-white h-[calc(100vh-7rem)]">
         <div className="h-full flex justify-between flex-col">
           <MessagesList
             fetchNextMessages={fetchNextMessages}

components/Conversation/MessagesList.tsx

@@ -5,6 +5,7 @@ import Avatar from '../Avatar'
 import { formatTime } from '../../helpers'
 import AddressPill from '../AddressPill'
 import InfiniteScroll from 'react-infinite-scroll-component'
+import useWindowSize from '../../hooks/useWindowSize'
 
 export type MessageListProps = {
   messages: DecodedMessage[]
@@ -84,13 +85,14 @@ const MessagesList = ({
   hasMore,
 }: MessageListProps): JSX.Element => {
   let lastMessageDate: Date | undefined
+  const size = useWindowSize()
 
   return (
     <InfiniteScroll
       dataLength={messages.length}
       next={fetchNextMessages}
       className="flex flex-col-reverse overflow-y-auto pl-4"
-      height={'87vh'}
+      height={size[1] > 700 ? '87vh' : '83vh'}
       inverse
       endMessage={<ConversationBeginningNotice />}
       hasMore={hasMore}

components/Conversation/RecipientControl.tsx

@@ -3,8 +3,8 @@ import { useRouter } from 'next/router'
 import AddressInput from '../AddressInput'
 import { checkIfPathIsEns, getAddressFromPath } from '../../helpers'
 import { useAppStore } from '../../store/app'
-import useWalletProvider from '../../hooks/useWalletProvider'
 import BackArrow from '../BackArrow'
+import useEnsHooks from '../../hooks/useEnsHooks'
 
 const RecipientInputMode = {
   InvalidEntry: 0,
@@ -15,7 +15,7 @@ const RecipientInputMode = {
 }
 
 const RecipientControl = (): JSX.Element => {
-  const { resolveName, lookupAddress } = useWalletProvider()
+  const { lookupAddress, resolveName } = useEnsHooks()
   const client = useAppStore((state) => state.client)
   const router = useRouter()
   const recipientWalletAddress = getAddressFromPath(router)

components/Layout.tsx

@@ -11,25 +11,37 @@ import { useAppStore } from '../store/app'
 import useInitXmtpClient from '../hooks/useInitXmtpClient'
 import useListConversations from '../hooks/useListConversations'
 import useWalletProvider from '../hooks/useWalletProvider'
+import useWalletProviderDemo from '../hooks/useWalletProviderDemo'
+import { isAppEnvDemo } from '../helpers'
+import useDisconnect from '../hooks/useDisconnect'
 
 const Layout: React.FC<{ children?: React.ReactNode }> = ({ children }) => {
   const client = useAppStore((state) => state.client)
-  const { initClient } = useInitXmtpClient()
-  useListConversations()
   const walletAddress = useAppStore((state) => state.address)
   const signer = useAppStore((state) => state.signer)
+  const { initClient } = useInitXmtpClient()
+  useListConversations()
+
+  const { connect: connectWallet } = useWalletProvider()
+
+  const { disconnect: disconnectWallet } = useDisconnect()
 
-  const { connect: connectWallet, disconnect: disconnectWallet } =
-    useWalletProvider()
+  const { connect: connectDemo } = useWalletProviderDemo()
 
   const handleDisconnect = useCallback(async () => {
     await disconnectWallet()
   }, [disconnectWallet])
 
   const handleConnect = useCallback(async () => {
-    await connectWallet()
+    const isDemoEnv = isAppEnvDemo()
+    debugger
+    if (isDemoEnv) {
+      await connectDemo()
+    } else {
+      await connectWallet()
+    }
     signer && (await initClient(signer))
-  }, [connectWallet, initClient, signer])
+  }, [connectWallet, initClient, connectDemo, signer])
 
   return (
     <>

components/UserMenu.tsx

@@ -2,46 +2,17 @@ import { Menu, Transition } from '@headlessui/react'
 import { CogIcon } from '@heroicons/react/solid'
 import { Fragment } from 'react'
 import { classNames, tagStr } from '../helpers'
-import Blockies from 'react-blockies'
 import Address from './Address'
-import useEns from '../hooks/useEns'
 import { Tooltip } from './Tooltip/Tooltip'
 import packageJson from '../package.json'
 import { useAppStore } from '../store/app'
+import Avatar from './Avatar'
 
 type UserMenuProps = {
   onConnect?: () => Promise<void>
   onDisconnect?: () => Promise<void>
 }
 
-type AvatarBlockProps = {
-  walletAddress: string
-  avatarUrl?: string
-}
-
-const AvatarBlock = ({ walletAddress }: AvatarBlockProps) => {
-  const { avatarUrl, loading } = useEns(walletAddress)
-  if (loading) {
-    return (
-      <div className="animate-pulse flex">
-        <div className="rounded-full bg-n-200 h-8 w-8 mr-2" />
-      </div>
-    )
-  }
-  return avatarUrl ? (
-    <div>
-      <div className="rounded-full w-8 h-8 mr-2 border border-n-80" />
-      <img
-        className={'rounded-full h-8 w-8 -mt-8'}
-        src={avatarUrl}
-        alt={walletAddress}
-      />
-    </div>
-  ) : (
-    <Blockies seed={walletAddress.toLowerCase()} scale={4} size={8} className="rounded-full mr-2" />
-  )
-}
-
 const NotConnected = ({ onConnect }: UserMenuProps): JSX.Element => {
   return (
     <>
@@ -98,8 +69,8 @@ const UserMenu = ({ onConnect, onDisconnect }: UserMenuProps): JSX.Element => {
               >
                 {walletAddress ? (
                   <>
-                    <AvatarBlock walletAddress={walletAddress} />
-                    <div className="flex flex-col">
+                    <Avatar peerAddress={walletAddress} />
+                    <div className="flex flex-col ml-3">
                       <div className="flex items-center">
                         <div className="bg-g-100 rounded h-2 w-2 mr-1"></div>
                         <p className="text-sm font-bold text-g-100">
@@ -108,7 +79,7 @@ const UserMenu = ({ onConnect, onDisconnect }: UserMenuProps): JSX.Element => {
                       </div>
                       <Address
                         address={walletAddress}
-                        className="text-md leading-4 font-semibold text-white ml-3"
+                        className="text-md leading-4 font-semibold text-white ml-[12px]"
                       />
                     </div>
                   </>

helpers/env.ts

@@ -9,6 +9,10 @@ export const getEnv = (): 'dev' | 'production' | 'local' => {
   return 'dev'
 }
 
+export const isAppEnvDemo = (): boolean => {
+  return process.env.NEXT_PUBLIC_APP_ENVIRONMENT === 'demo'
+}
+
 export const tagStr = (): string | null => {
   return getEnv() === 'production' ? null : getEnv().toLocaleUpperCase()
 }

hooks/useDisconnect.ts

@@ -0,0 +1,25 @@
+import { useRouter } from 'next/router'
+import { useCallback } from 'react'
+import { useAppStore } from '../store/app'
+
+const useDisconnect = () => {
+  const router = useRouter()
+  const reset = useAppStore((state) => state.reset)
+
+  const disconnect = useCallback(() => {
+    Object.keys(localStorage).forEach((key) => {
+      if (key.startsWith('xmtp')) {
+        localStorage.removeItem(key)
+      }
+    })
+    reset()
+    router.push('/')
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [router])
+
+  return {
+    disconnect,
+  }
+}
+
+export default useDisconnect