112 | {recipientWalletAddress && value && (
113 | {value}
114 | )}
115 |
133 |
134 | )
135 | }
136 |
137 | export default AddressInput
138 |
--------------------------------------------------------------------------------
/components/AddressPill.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { classNames } from '../helpers'
3 | import { useAppStore } from '../store/app'
4 | import Address from './Address'
5 |
6 | type addressPillProps = {
7 | address: string
8 | }
9 |
10 | const AddressPill = ({ address }: addressPillProps): JSX.Element => {
11 | const walletAddress = useAppStore((state) => state.address)
12 | const userIsSender = address === walletAddress
13 | return (
14 |
28 | )
29 | }
30 |
31 | export default AddressPill
32 |
--------------------------------------------------------------------------------
/components/App.tsx:
--------------------------------------------------------------------------------
1 | import Layout from '../components/Layout'
2 |
3 | type AppProps = {
4 | children?: React.ReactNode
5 | }
6 |
7 | function App({ children }: AppProps) {
8 | return
13 |
14 |
15 | )
16 | }
17 | if (avatarUrl) {
18 | return (
19 |
20 |
21 | 
26 |
27 | )
28 | }
29 | return
64 |
72 |
65 |
71 |
33 |
73 |
74 | )
75 | }
76 |
77 | export default MessageComposer
78 |
--------------------------------------------------------------------------------
/components/Conversation/MessagesList.tsx:
--------------------------------------------------------------------------------
1 | import { DecodedMessage } from '@xmtp/xmtp-js'
2 | import React, { FC } from 'react'
3 | import Emoji from 'react-emoji-render'
4 | import Avatar from '../Avatar'
5 | import { formatTime } from '../../helpers'
6 | import AddressPill from '../AddressPill'
7 | import InfiniteScroll from 'react-infinite-scroll-component'
8 | import useWindowSize from '../../hooks/useWindowSize'
9 |
10 | export type MessageListProps = {
11 | messages: DecodedMessage[]
12 | fetchNextMessages: () => void
13 | hasMore: boolean
14 | }
15 |
16 | type MessageTileProps = {
17 | message: DecodedMessage
18 | }
19 |
20 | const isOnSameDay = (d1?: Date, d2?: Date): boolean => {
21 | return d1?.toDateString() === d2?.toDateString()
22 | }
23 |
24 | const formatDate = (d?: Date) =>
25 | d?.toLocaleString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })
26 |
27 | const MessageTile = ({ message }: MessageTileProps): JSX.Element => (
28 |
29 |
46 | )
47 |
48 | const DateDividerBorder: React.FC<{ children?: React.ReactNode }> = ({
49 | children,
50 | }) => (
51 | <>
52 |
53 | {children}
54 |
55 |
56 | )
57 |
58 | const DateDivider = ({ date }: { date?: Date }): JSX.Element => (
59 |
31 |
45 |
32 |
37 |
38 | {message.error ? (
39 | `Error: ${message.error?.message}`
40 | ) : (
41 |
60 |
61 |
62 | {formatDate(date)}
63 |
64 |
65 |
66 | )
67 |
68 | const ConversationBeginningNotice = (): JSX.Element => (
69 |
70 |
71 | This is the beginning of the conversation
72 |
73 |
74 | )
75 |
76 | const LoadingMore: FC = () => (
77 |
78 | Loading Messages...
79 |
80 | )
81 |
82 | const MessagesList = ({
83 | messages,
84 | fetchNextMessages,
85 | hasMore,
86 | }: MessageListProps): JSX.Element => {
87 | let lastMessageDate: Date | undefined
88 | const size = useWindowSize()
89 |
90 | return (
91 |
107 |
110 | )
111 | lastMessageDate = msg.sent
112 | return messageDiv
113 | })}
114 |
108 |
110 |
111 |
134 |
135 | {recipientInputMode === RecipientInputMode.Submitted ? (
136 |
151 |
152 | )
153 | }
154 |
155 | export default RecipientControl
156 |
--------------------------------------------------------------------------------
/components/Conversation/index.ts:
--------------------------------------------------------------------------------
1 | export { default as RecipientControl } from './RecipientControl'
2 | export { default as MessagesList } from './MessagesList'
3 | export { default as MessageComposer } from './MessageComposer'
4 | export { default as Conversation } from './Conversation'
5 |
--------------------------------------------------------------------------------
/components/ConversationsList.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from 'react'
2 | import { ChatIcon } from '@heroicons/react/outline'
3 | import Address from './Address'
4 | import { useRouter } from 'next/router'
5 | import { Conversation } from '@xmtp/xmtp-js'
6 | import { classNames, formatDate, getConversationKey } from '../helpers'
7 | import Avatar from './Avatar'
8 | import { useAppStore } from '../store/app'
9 |
10 | type ConversationTileProps = {
11 | conversation: Conversation
12 | }
13 |
14 | const ConversationTile = ({
15 | conversation,
16 | }: ConversationTileProps): JSX.Element | null => {
17 | const router = useRouter()
18 | const address = useAppStore((state) => state.address)
19 | const previewMessages = useAppStore((state) => state.previewMessages)
20 | const loadingConversations = useAppStore(
21 | (state) => state.loadingConversations
22 | )
23 | const [recipentAddress, setRecipentAddress] = useState
137 | {hasName ? recipientWalletAddress :
} 138 |
139 | ) : (
140 | } 138 |
141 | {recipientInputMode === RecipientInputMode.NotOnNetwork &&
142 | 'Recipient is not on the XMTP network'}
143 | {recipientInputMode === RecipientInputMode.FindingEntry &&
144 | 'Finding ENS domain...'}
145 | {recipientInputMode === RecipientInputMode.InvalidEntry &&
146 | 'Please enter a valid wallet address'}
147 | {recipientInputMode === RecipientInputMode.ValidEntry &&
} 148 |
149 | )}
150 | } 148 |
onClick(`/dm/${getConversationKey(conversation)}`)}
62 | className={classNames(
63 | 'h-20',
64 | 'py-2',
65 | 'px-4',
66 | 'md:max-w-sm',
67 | 'mx-auto',
68 | 'bg-white',
69 | 'space-y-2',
70 | 'py-2',
71 | 'flex',
72 | 'items-center',
73 | 'space-y-0',
74 | 'space-x-4',
75 | 'border-b-2',
76 | 'border-gray-100',
77 | 'hover:bg-bt-100',
78 | 'cursor-pointer',
79 | loadingConversations ? 'opacity-80' : 'opacity-100',
80 | isSelected ? 'bg-bt-200' : null
81 | )}
82 | >
83 |
111 | )
112 | }
113 |
114 | const ConversationsList = (): JSX.Element => {
115 | const conversations = useAppStore((state) => state.conversations)
116 | const previewMessages = useAppStore((state) => state.previewMessages)
117 |
118 | const orderByLatestMessage = (
119 | convoA: Conversation,
120 | convoB: Conversation
121 | ): number => {
122 | const convoALastMessageDate =
123 | previewMessages.get(getConversationKey(convoA))?.sent || new Date()
124 | const convoBLastMessageDate =
125 | previewMessages.get(getConversationKey(convoB))?.sent || new Date()
126 | return convoALastMessageDate < convoBLastMessageDate ? 1 : -1
127 | }
128 |
129 | if (!conversations || conversations.size == 0) {
130 | return
85 | {conversationDomain && (
86 |
110 |
87 | {conversationDomain.toLocaleUpperCase()}
88 |
89 | )}
90 |
91 |
95 |
102 | {formatDate(latestMessage?.sent)}
103 |
104 |
105 |
106 | {address === latestMessage?.senderAddress && 'You: '}{' '}
107 | {latestMessage?.content}
108 |
109 |
154 |
167 | )
168 | }
169 |
170 | export default React.memo(ConversationsList)
171 |
--------------------------------------------------------------------------------
/components/Layout.tsx:
--------------------------------------------------------------------------------
1 | import Head from 'next/head'
2 | import Link from 'next/link'
3 | import { NavigationView, ConversationView } from './Views'
4 | import { RecipientControl } from './Conversation'
5 | import NewMessageButton from './NewMessageButton'
6 | import NavigationPanel from './NavigationPanel'
7 | import XmtpInfoPanel from './XmtpInfoPanel'
8 | import UserMenu from './UserMenu'
9 | import React, { useCallback } from 'react'
10 | import { useAppStore } from '../store/app'
11 | import useInitXmtpClient from '../hooks/useInitXmtpClient'
12 | import useListConversations from '../hooks/useListConversations'
13 | import useWalletProvider from '../hooks/useWalletProvider'
14 |
15 | const Layout: React.FC<{ children?: React.ReactNode }> = ({ children }) => {
16 | const client = useAppStore((state) => state.client)
17 | const { initClient } = useInitXmtpClient()
18 | useListConversations()
19 | const walletAddress = useAppStore((state) => state.address)
20 | const signer = useAppStore((state) => state.signer)
21 |
22 | const { connect: connectWallet, disconnect: disconnectWallet } =
23 | useWalletProvider()
24 |
25 | const handleDisconnect = useCallback(async () => {
26 | await disconnectWallet()
27 | }, [disconnectWallet])
28 |
29 | const handleConnect = useCallback(async () => {
30 | await connectWallet()
31 | signer && (await initClient(signer))
32 | }, [connectWallet, initClient, signer])
33 |
34 | return (
35 | <>
36 |
37 |
155 |
159 |
166 | 160 | Your message list is empty 161 |
162 |163 | There are no messages for this address 164 |
165 |
44 |
45 |
60 |
61 |
62 | {walletAddress && client ? (
63 | <>
64 |
73 |
74 |
75 | )
76 | }
77 |
78 | export default Layout
79 |
--------------------------------------------------------------------------------
/components/Loader.tsx:
--------------------------------------------------------------------------------
1 | import loaderStyles from '../styles/Loader.module.css'
2 |
3 | type LoaderProps = {
4 | isLoading: boolean
5 | }
6 |
7 | type StyledLoaderProps = {
8 | headingText?: string
9 | subHeadingText: string
10 | isLoading: boolean
11 | }
12 |
13 | export const Spinner = ({ isLoading }: LoaderProps): JSX.Element | null => {
14 | if (!isLoading) {
15 | return null
16 | }
17 |
18 | // This feels janky af, but I'm gonna run with it rather than import some bloated library just to make a spinner.
19 | return (
20 |
65 |
67 | {children}
68 |
69 | ) : (
70 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 | )
31 | }
32 |
33 | export const Loader = ({
34 | headingText,
35 | subHeadingText,
36 | isLoading,
37 | }: StyledLoaderProps): JSX.Element => (
38 |
39 |
51 | )
52 |
53 | export default Loader
54 |
--------------------------------------------------------------------------------
/components/NavigationPanel.tsx:
--------------------------------------------------------------------------------
1 | import { LinkIcon } from '@heroicons/react/outline'
2 | import { ArrowSmRightIcon } from '@heroicons/react/solid'
3 | import { useAppStore } from '../store/app'
4 | import ConversationsList from './ConversationsList'
5 | import Loader from './Loader'
6 |
7 | type NavigationPanelProps = {
8 | onConnect: () => Promise
40 |
50 |
43 | {headingText}
44 |
45 | )}
46 |
47 | {subHeadingText}
48 |
49 |
21 | {walletAddress && client !== null ? (
22 |
25 |
27 | )}
28 |
29 | )
30 | }
31 |
32 | const NoWalletConnectedMessage: React.FC<{ children?: React.ReactNode }> = ({
33 | children,
34 | }) => {
35 | return (
36 |
37 |
51 | )
52 | }
53 |
54 | const ConnectButton = ({ onConnect }: ConnectButtonProps): JSX.Element => {
55 | return (
56 |
65 | )
66 | }
67 |
68 | const ConversationsPanel = (): JSX.Element => {
69 | const client = useAppStore((state) => state.client)
70 | const loadingConversations = useAppStore(
71 | (state) => state.loadingConversations
72 | )
73 |
74 | if (client === undefined) {
75 | return (
76 |
38 |
42 |
49 | {children}
50 | 43 | No wallet connected 44 |
45 |46 | Please connect a wallet to begin 47 |
48 |
12 | {children}
13 |
20 | )
21 | }
22 |
--------------------------------------------------------------------------------
/components/UserMenu.tsx:
--------------------------------------------------------------------------------
1 | import { Menu, Transition } from '@headlessui/react'
2 | import { CogIcon } from '@heroicons/react/solid'
3 | import { Fragment } from 'react'
4 | import { classNames, tagStr } from '../helpers'
5 | import Blockies from 'react-blockies'
6 | import Address from './Address'
7 | import useEns from '../hooks/useEns'
8 | import { Tooltip } from './Tooltip/Tooltip'
9 | import packageJson from '../package.json'
10 | import { useAppStore } from '../store/app'
11 |
12 | type UserMenuProps = {
13 | onConnect?: () => Promise
14 |
15 | {message}
16 |
17 |
18 |
19 |
27 |
28 |
29 | )
30 | }
31 | return avatarUrl ? (
32 |
33 |
34 |
39 |
40 | ) : (
41 |
49 |
60 |
70 |
71 | )
72 | }
73 |
74 | const UserMenu = ({ onConnect, onDisconnect }: UserMenuProps): JSX.Element => {
75 | const walletAddress = useAppStore((state) => state.address)
76 |
77 | const onClickCopy = () => {
78 | if (walletAddress) {
79 | navigator.clipboard.writeText(walletAddress)
80 | }
81 | }
82 |
83 | return (
84 |
50 |
51 |
53 |
54 |
55 | You are not connected.
52 |56 | Sign in with your wallet 57 |
58 | 59 |
89 | {walletAddress ? (
90 |
205 | ) : (
206 |
209 | )
210 | }
211 |
212 | export default UserMenu
213 |
--------------------------------------------------------------------------------
/components/Views/ConversationView.tsx:
--------------------------------------------------------------------------------
1 | import { Transition } from '@headlessui/react'
2 | import { Fragment } from 'react'
3 | import { useRouter } from 'next/router'
4 |
5 | type ConversationViewProps = {
6 | children?: React.ReactNode
7 | }
8 |
9 | const ConversationView = ({ children }: ConversationViewProps): JSX.Element => {
10 | const router = useRouter()
11 | const show = router.pathname !== '/'
12 |
13 | return (
14 | <>
15 |
17 |
26 |
30 |
31 |
27 | {children}
28 |
29 |
35 | {children}
36 |
37 |
38 | )
39 | }
40 |
41 | export default ConversationView
42 |
--------------------------------------------------------------------------------
/components/Views/NavigationView.tsx:
--------------------------------------------------------------------------------
1 | import { Transition } from '@headlessui/react'
2 | import { Fragment } from 'react'
3 | import { useRouter } from 'next/router'
4 |
5 | type NavigationViewProps = {
6 | children?: React.ReactNode
7 | }
8 |
9 | const NavigationView = ({ children }: NavigationViewProps): JSX.Element => {
10 | const router = useRouter()
11 | const show = router.pathname === '/'
12 |
13 | return (
14 | <>
15 |
17 |
26 |
30 |
31 |
27 | {children}
28 |
29 | {children}
35 |
36 | )
37 | }
38 |
39 | export default NavigationView
40 |
--------------------------------------------------------------------------------
/components/Views/index.ts:
--------------------------------------------------------------------------------
1 | export { default as NavigationView } from './NavigationView'
2 | export { default as ConversationView } from './ConversationView'
3 |
--------------------------------------------------------------------------------
/components/XmtpInfoPanel.tsx:
--------------------------------------------------------------------------------
1 | import packageJson from '../package.json'
2 | import { classNames } from '../helpers'
3 | import {
4 | LinkIcon,
5 | BookOpenIcon,
6 | UserGroupIcon,
7 | ChevronRightIcon,
8 | ArrowSmRightIcon,
9 | } from '@heroicons/react/solid'
10 | import { useAppStore } from '../store/app'
11 |
12 | type XmtpInfoRowProps = {
13 | icon: JSX.Element
14 | headingText: string
15 | subHeadingText: string
16 | onClick?: (() => void) | (() => Promise
41 |
50 |
51 | )
52 |
53 | const XmtpInfoPanel = ({ onConnect }: XmtpInfoPanelProps): JSX.Element => {
54 | const walletAddress = useAppStore((state) => state.address)
55 | const InfoRows = [
56 | {
57 | icon: {icon}
42 |
43 |
46 | {headingText}
44 | {subHeadingText}
45 |
47 |
49 |
82 |
118 | )
119 | }
120 |
121 | export default XmtpInfoPanel
122 |
--------------------------------------------------------------------------------
/helpers/appVersion.ts:
--------------------------------------------------------------------------------
1 | import packageJson from '../package.json'
2 |
3 | export const getAppVersion = () => {
4 | const { name, version } = packageJson
5 | return name + '/' + version
6 | }
7 |
--------------------------------------------------------------------------------
/helpers/classNames.ts:
--------------------------------------------------------------------------------
1 | export default function classNames(...classes: (string | null)[]) {
2 | return classes.filter(Boolean).join(' ')
3 | }
4 |
--------------------------------------------------------------------------------
/helpers/constants.ts:
--------------------------------------------------------------------------------
1 | export const MESSAGE_LIMIT = 20
2 |
--------------------------------------------------------------------------------
/helpers/env.ts:
--------------------------------------------------------------------------------
1 | export const getEnv = (): 'dev' | 'production' | 'local' => {
2 | const envVar = process.env.NEXT_PUBLIC_XMTP_ENVIRONMENT
3 | if (envVar === 'production') {
4 | return envVar
5 | }
6 | if (envVar === 'local') {
7 | return envVar
8 | }
9 | return 'dev'
10 | }
11 |
12 | export const tagStr = (): string | null => {
13 | return getEnv() === 'production' ? null : getEnv().toLocaleUpperCase()
14 | }
15 |
--------------------------------------------------------------------------------
/helpers/getUniqueMessages.ts:
--------------------------------------------------------------------------------
1 | import type { DecodedMessage } from '@xmtp/xmtp-js'
2 |
3 | const getUniqueMessages = (msgObj: DecodedMessage[]): DecodedMessage[] => {
4 | const uniqueMessages = [
5 | ...Array.from(new Map(msgObj.map((item) => [item['id'], item])).values()),
6 | ]
7 | uniqueMessages.sort((a, b) => {
8 | return (b.sent?.getTime() ?? 0) - (a.sent?.getTime() ?? 0)
9 | })
10 |
11 | return uniqueMessages ?? []
12 | }
13 |
14 | export default getUniqueMessages
15 |
--------------------------------------------------------------------------------
/helpers/index.ts:
--------------------------------------------------------------------------------
1 | export { default as classNames } from './classNames'
2 | export * from './string'
3 | export * from './env'
4 | export * from './appVersion'
5 | export * from './keys'
6 | export * from './constants'
7 |
--------------------------------------------------------------------------------
/helpers/keys.ts:
--------------------------------------------------------------------------------
1 | import { getEnv } from './env'
2 |
3 | const ENCODING = 'binary'
4 |
5 | export const buildLocalStorageKey = (walletAddress: string) =>
6 | `xmtp:${getEnv()}:keys:${walletAddress}`
7 |
8 | export const loadKeys = (walletAddress: string): Uint8Array | null => {
9 | const val = localStorage.getItem(buildLocalStorageKey(walletAddress))
10 | return val ? Buffer.from(val, ENCODING) : null
11 | }
12 |
13 | export const storeKeys = (walletAddress: string, keys: Uint8Array) => {
14 | localStorage.setItem(
15 | buildLocalStorageKey(walletAddress),
16 | Buffer.from(keys).toString(ENCODING)
17 | )
18 | }
19 |
20 | export const wipeKeys = (walletAddress: string) => {
21 | localStorage.removeItem(buildLocalStorageKey(walletAddress))
22 | }
23 |
--------------------------------------------------------------------------------
/helpers/string.ts:
--------------------------------------------------------------------------------
1 | import { Conversation } from '@xmtp/xmtp-js'
2 | import { NextRouter } from 'next/router'
3 |
4 | export const truncate = (
5 | str: string | undefined,
6 | length: number
7 | ): string | undefined => {
8 | if (!str) {
9 | return str
10 | }
11 | if (str.length > length) {
12 | return `${str.substring(0, length - 3)}...`
13 | }
14 | return str
15 | }
16 |
17 | export const formatDate = (d: Date | undefined): string =>
18 | d ? d.toLocaleDateString('en-US') : ''
19 |
20 | export const formatTime = (d: Date | undefined): string =>
21 | d
22 | ? d.toLocaleTimeString(undefined, {
23 | hour12: true,
24 | hour: 'numeric',
25 | minute: '2-digit',
26 | })
27 | : ''
28 |
29 | export const checkPath = () => {
30 | return window.location.pathname !== '/' && window.location.pathname !== '/dm'
31 | }
32 |
33 | export const isEns = (address: string): boolean => {
34 | return address.endsWith('eth') || address.endsWith('.cb.id')
35 | }
36 |
37 | export const is0xAddress = (address: string): boolean =>
38 | address.startsWith('0x') && address.length === 42
39 |
40 | export const shortAddress = (addr: string): string =>
41 | addr.length > 10 && addr.startsWith('0x')
42 | ? `${addr.substring(0, 6)}...${addr.substring(addr.length - 4)}`
43 | : addr
44 |
45 | export const getConversationKey = (conversation?: Conversation): string => {
46 | return conversation?.context?.conversationId
47 | ? `${conversation?.peerAddress}/${conversation?.context?.conversationId}`
48 | : conversation?.peerAddress ?? ''
49 | }
50 |
51 | export const getAddressFromPath = (router: NextRouter): string => {
52 | return Array.isArray(router.query.recipientWalletAddr)
53 | ? router.query.recipientWalletAddr[0]
54 | : (router.query.recipientWalletAddr as string)
55 | }
56 |
--------------------------------------------------------------------------------
/hooks/useEns.ts:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from 'react'
2 | import { is0xAddress, isEns } from '../helpers/string'
3 | import useWalletProvider from './useWalletProvider'
4 |
5 | const useEns = (addressOrName: string | undefined) => {
6 | const { resolveName, lookupAddress, getAvatarUrl } = useWalletProvider()
7 | const [address, setAddress] = useState
83 |
90 |
84 | Welcome to the web3 communication protocol
85 |
86 |
87 | Get started by reading the docs or joining the community
88 |
89 |
91 | {InfoRows.map((info, index) => {
92 | return (
93 |
104 |
105 |
117 |
106 | xmtp-js v{packageJson.dependencies['@xmtp/xmtp-js'].substring(1)}
107 |
108 |
114 | I need help