add listpolls

add methods for fetching and receiving messages from Status

dapp/src/App.tsx

@@ -6,10 +6,12 @@ import useStyles from './styles/app'
 import { SetAccount } from './types'
 import Header from './components/Header'
 import CreatePoll from './components/CreatePoll'
+import ListPolls from './components/ListPolls'
 
 declare global {
   interface Window {
     ethereum: any;
+    messages: object;
   }
 }
 
@@ -67,6 +69,7 @@ function App() {
           isStatus={isStatus}
           enableEthereum={() => enableEthereum(setAccount)} />
         <CreatePoll />
+        <ListPolls />
       </div>
     </ThemeProvider>
   );

dapp/src/components/CreatePoll.tsx

@@ -10,6 +10,7 @@ import StatusButton from './base/Button'
 import { prettySign, verifySignedMessage } from '../utils/signing'
 import { uploadFilesToIpfs, uploadToIpfs } from '../utils/ipfs'
 import { sendToPublicChat } from '../utils/status'
+import { POLLS_CHANNEL } from './constants'
 
 type FormikValues = {
   title: string,
@@ -19,7 +20,6 @@ type FormikValues = {
   description: string
 }
 
-const POLLS = 'polls'
 const TEN_DAYS_FUTURE = new Date(new Date().getTime()+(10*24*60*60*1000))
 
 const createJSON = (values: FormikValues): string => {
@@ -44,7 +44,7 @@ function CreatePoll() {
         const ipfsHash = await uploadToIpfs(message)
         const signedMessage = await prettySign(ipfsHash)
         const stringified = JSON.stringify(signedMessage)
-        await sendToPublicChat(POLLS, stringified)
+        await sendToPublicChat(POLLS_CHANNEL, stringified)
       }}
     >
       {({

dapp/src/components/ListPolls.tsx

@@ -0,0 +1,17 @@
+import React, { useEffect } from 'react'
+import { gotoPublicChat, getChatMessages, useChatMessages } from '../utils/status'
+
+function ListPolls() {
+  const chatMessages = useChatMessages()
+
+  useEffect(() => {
+    getChatMessages()
+  }, [])
+
+  console.log({chatMessages})
+  return (
+    <div>placeholder</div>
+  )
+}
+
+export default ListPolls

dapp/src/components/constants.ts

@@ -0,0 +1 @@
+export const POLLS_CHANNEL = 'polls'

dapp/src/utils/status.ts

@@ -1,3 +1,4 @@
+import { useState, useEffect } from 'react'
 export {}
 
 declare global {
@@ -23,3 +24,61 @@ export async function gotoPublicChat(topic: string) {
         console.error('send to public chat', {e})
     }
 }
+
+export async function getChatMessages(): Promise<any> {
+    try {
+        const res = window.ethereum.status.getChatMessages()
+        console.log({res})
+        return res
+    } catch(e) {
+        console.error('get chat messages', {e})
+    }
+}
+
+type Message = {
+    alias: string,
+    text: string,
+    timestamp: number,
+    from: string,
+    messageId: string
+}
+type Topics = {
+    [chat: string]: Message[]
+}
+
+type Data = {
+    chat: string,
+    messages: Message[]
+}
+
+interface MessagesEvent extends CustomEvent {
+    data: {
+        data: Data
+    }
+}
+
+export function useChatMessages(): Topics | undefined {
+    const [chatMessages, setChatMessages] = useState<Topics>()
+
+    function messageHandler(event: MessagesEvent) {
+        //TODO check event origin for safety
+        const { data } = event.data
+        if (!data) return
+        const { chat, messages } = data
+        setChatMessages((prevState: Topics | undefined) => ({
+            ...prevState,
+            [chat]: messages
+        }))
+    }
+
+    useEffect(() => {
+        window.addEventListener("message", messageHandler as EventListener)
+
+        return () => {
+            window.removeEventListener("message", messageHandler as EventListener)
+        }
+    })
+
+    return chatMessages
+
+}