Add CyberConnect and LIT filters

components/App.tsx

@@ -1,4 +1,5 @@
 import XmtpProvider from './XmtpProvider'
+import CyberConnectProvider from './CyberConnectProvider'
 import Layout from '../components/Layout'
 import { WalletProvider } from './WalletProvider'
 
@@ -10,7 +11,9 @@ function App({ children }: AppProps) {
   return (
     <WalletProvider>
       <XmtpProvider>
-        <Layout>{children}</Layout>
+        <CyberConnectProvider>
+          <Layout>{children}</Layout>
+        </CyberConnectProvider>
       </XmtpProvider>
     </WalletProvider>
   )

components/Conversation/MessagesList.tsx

@@ -25,18 +25,24 @@ const formatDate = (d?: Date) =>
 
 const MessageTile = ({ message, isSender }: MessageTileProps): JSX.Element => (
   <div className="flex items-start mx-auto mb-4">
-    <Avatar peerAddress={message.senderAddress as string} />
+    <a
+      href={`https://dev.web3nft.social/${message.senderAddress}`}
+      target="_blank"
+      rel="noreferrer"
+    >
+      <Avatar peerAddress={message.senderAddress as string} />
+    </a>
     <div className="ml-2">
       <div>
         <AddressPill
           address={message.senderAddress as string}
           userIsSender={isSender}
         />
-        <span className="text-sm font-normal place-self-end text-n-300 text-md uppercase">
+        <span className="text-sm font-normal uppercase place-self-end text-n-300 text-md">
           {formatTime(message.sent)}
         </span>
       </div>
-      <span className="block text-md px-2 mt-2 text-black font-normal">
+      <span className="block px-2 mt-2 font-normal text-black text-md">
         {message.error ? (
           `Error: ${message.error?.message}`
         ) : (
@@ -56,18 +62,18 @@ const DateDividerBorder: React.FC = ({ children }) => (
 )
 
 const DateDivider = ({ date }: { date?: Date }): JSX.Element => (
-  <div className="flex align-items-center items-center pb-8 pt-4">
+  <div className="flex items-center pt-4 pb-8 align-items-center">
     <DateDividerBorder>
-      <span className="mx-11 flex-none text-gray-300 text-sm font-bold">
+      <span className="flex-none text-sm font-bold text-gray-300 mx-11">
         {formatDate(date)}
       </span>
     </DateDividerBorder>
   </div>
 )
 
 const ConversationBeginningNotice = (): JSX.Element => (
-  <div className="flex align-items-center justify-center pb-4">
-    <span className="text-gray-300 text-sm font-semibold">
+  <div className="flex justify-center pb-4 align-items-center">
+    <span className="text-sm font-semibold text-gray-300">
       This is the beginning of the conversation
     </span>
   </div>
@@ -81,9 +87,9 @@ const MessagesList = ({
   let lastMessageDate: Date | undefined
 
   return (
-    <div className="flex-grow flex">
-      <div className="pb-6 md:pb-0 w-full flex flex-col self-end">
-        <div className="relative w-full bg-white px-4 pt-6 overflow-y-auto flex">
+    <div className="flex flex-grow">
+      <div className="flex flex-col self-end w-full pb-6 md:pb-0">
+        <div className="relative flex w-full px-4 pt-6 overflow-y-auto bg-white">
           <div className="w-full">
             {messages && messages.length ? (
               <ConversationBeginningNotice />
@@ -96,7 +102,7 @@ const MessagesList = ({
               const dateHasChanged = !isOnSameDay(lastMessageDate, msg.sent)
               lastMessageDate = msg.sent
               return dateHasChanged
-                ? [<DateDivider date={msg.sent} key={msg.id} />, tile]
+                ? [<DateDivider date={msg.sent} key={`date-${msg.id}`} />, tile]
                 : tile
             })}
             <div ref={messagesEndRef} />

components/ConversationFilter.tsx

@@ -0,0 +1,102 @@
+import { classNames } from '../helpers'
+import { Fragment, useEffect, useState } from 'react'
+import { Listbox, Transition } from '@headlessui/react'
+import { CheckIcon, SelectorIcon, FilterIcon } from '@heroicons/react/solid'
+import ConversationFilterSlideOver from './ConversationFilterSlideOver'
+import useCyberConnect from '../hooks/useCyberConnect'
+
+export default function ConversationFilter() {
+  const { filterBy, updateFilterBy } = useCyberConnect()
+  const items = ['friends', 'followings', 'followers', 'all']
+  const [open, setOpen] = useState(false)
+
+  useEffect(() => {
+    if (!filterBy) {
+      updateFilterBy(items[0])
+    }
+  })
+  return (
+    <div className="w-full">
+      <div className="flex justify-between w-full py-2 bg--300">
+        <div className="flex justify-between flex-1">
+          <Listbox value={filterBy} onChange={updateFilterBy}>
+            {({ open }) => (
+              <>
+                <Listbox.Label className="flex items-center w-6 mr-2 text-sm font-medium text-gray-700"></Listbox.Label>
+                <div className="relative w-40">
+                  <Listbox.Button className="relative w-full py-2 pl-3 pr-10 text-left bg-white border border-gray-300 rounded-md shadow-sm cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
+                    <span className="block truncate">{filterBy}</span>
+                    <span className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
+                      <SelectorIcon
+                        className="w-5 h-5 text-gray-400"
+                        aria-hidden="true"
+                      />
+                    </span>
+                  </Listbox.Button>
+
+                  <Transition
+                    show={open}
+                    as={Fragment}
+                    leave="transition ease-in duration-100"
+                    leaveFrom="opacity-100"
+                    leaveTo="opacity-0"
+                  >
+                    <Listbox.Options className="absolute z-10 w-full py-1 mt-1 overflow-auto text-base bg-white rounded-md shadow-lg max-h-60 ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+                      {items.map((name) => (
+                        <Listbox.Option
+                          key={name}
+                          className={({ active }) =>
+                            classNames(
+                              active ? 'text-white bg-p-600' : 'text-gray-900',
+                              'cursor-pointer select-none relative py-2 pl-3 pr-9'
+                            )
+                          }
+                          value={name}
+                        >
+                          {({ selected, active }) => (
+                            <>
+                              <span
+                                className={classNames(
+                                  selected ? 'font-semibold' : 'font-normal',
+                                  'block truncate'
+                                )}
+                              >
+                                {name}
+                              </span>
+
+                              {selected ? (
+                                <span
+                                  className={classNames(
+                                    active ? 'text-white' : 'text-indigo-600',
+                                    'absolute inset-y-0 right-0 flex items-center pr-4'
+                                  )}
+                                >
+                                  <CheckIcon
+                                    className="w-5 h-5"
+                                    aria-hidden="true"
+                                  />
+                                </span>
+                              ) : null}
+                            </>
+                          )}
+                        </Listbox.Option>
+                      ))}
+                    </Listbox.Options>
+                  </Transition>
+                </div>
+              </>
+            )}
+          </Listbox>
+        </div>
+        <button
+          type="button"
+          onClick={() => setOpen(true)}
+          className="inline-flex items-center p-1 text-xs text-indigo-500 border-0 hover:text-indigo-700"
+        >
+          <FilterIcon className="w-6 h-6 " aria-hidden="true" />
+        </button>
+      </div>
+      <ConversationFilterSlideOver onClose={() => setOpen(false)} open={open} />
+    </div>
+  )
+}