Add Hacked Wallet checking to sample XMTP App

components/Address.tsx

@@ -4,6 +4,7 @@ import { classNames } from '../helpers'
 type AddressProps = {
   address: string
   className?: string
+  hacked?: boolean
   lookupAddress?: (address: string) => Promise<string | undefined>
 }
 
@@ -15,6 +16,7 @@ const shortAddress = (addr: string): string =>
 const Address = ({
   address,
   className,
+  hacked,
   lookupAddress,
 }: AddressProps): JSX.Element => {
   const [name, setName] = useState<string>()
@@ -29,6 +31,7 @@ const Address = ({
 
   return (
     <span className={classNames(className || '', 'font-mono')} title={address}>
+      {hacked ? <span style={{ color: 'red' }}>HACKED</span> : null}
       {name || shortAddress(address)}
     </span>
   )

components/AddressPill.tsx

@@ -6,11 +6,13 @@ import useWallet from '../hooks/useWallet'
 type addressPillProps = {
   address: string
   userIsSender: boolean
+  isHacked: boolean
 }
 
 const AddressPill = ({
   address,
   userIsSender,
+  isHacked,
 }: addressPillProps): JSX.Element => {
   const { lookupAddress } = useWallet()
 
@@ -24,10 +26,12 @@ const AddressPill = ({
         'px-2',
         'py-1',
         'font-bold',
+        'color-red',
         userIsSender ? 'bg-bt-100 text-b-600' : 'bg-zinc-50',
         userIsSender ? 'border-bt-300' : 'border-gray-300'
       )}
       address={address}
+      hacked={isHacked}
       lookupAddress={lookupAddress}
     ></Address>
   )

components/Conversation/MessagesList.tsx

@@ -4,6 +4,7 @@ import Emoji from 'react-emoji-render'
 import Avatar from '../Avatar'
 import { formatTime } from '../../helpers'
 import AddressPill from '../AddressPill'
+import useIsBurned from '../../hooks/useIsBurned'
 
 export type MessageListProps = {
   messages: Message[]
@@ -14,6 +15,7 @@ export type MessageListProps = {
 type MessageTileProps = {
   message: Message
   isSender: boolean
+  isHacked: boolean
 }
 
 const isOnSameDay = (d1?: Date, d2?: Date): boolean => {
@@ -23,14 +25,19 @@ const isOnSameDay = (d1?: Date, d2?: Date): boolean => {
 const formatDate = (d?: Date) =>
   d?.toLocaleString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })
 
-const MessageTile = ({ message, isSender }: MessageTileProps): JSX.Element => (
+const MessageTile = ({
+  message,
+  isSender,
+  isHacked,
+}: MessageTileProps): JSX.Element => (
   <div className="flex items-start mx-auto mb-4">
     <Avatar peerAddress={message.senderAddress as string} />
     <div className="ml-2">
       <div>
         <AddressPill
           address={message.senderAddress as string}
           userIsSender={isSender}
+          isHacked={isHacked}
         />
         <span className="text-sm font-normal place-self-end text-n-300 text-md uppercase">
           {formatTime(message.sent)}
@@ -79,6 +86,9 @@ const MessagesList = ({
   messagesEndRef,
 }: MessageListProps): JSX.Element => {
   let lastMessageDate: Date | undefined
+  const isHacked = useIsBurned(
+    messages[0] && (messages[0].senderAddress as string)
+  )
 
   return (
     <div className="flex-grow flex">
@@ -91,7 +101,12 @@ const MessagesList = ({
             {messages?.map((msg: Message) => {
               const isSender = msg.senderAddress === walletAddress
               const tile = (
-                <MessageTile message={msg} key={msg.id} isSender={isSender} />
+                <MessageTile
+                  message={msg}
+                  key={msg.id}
+                  isSender={isSender}
+                  isHacked={isHacked}
+                />
               )
               const dateHasChanged = !isOnSameDay(lastMessageDate, msg.sent)
               lastMessageDate = msg.sent

components/ConversationsList.tsx

@@ -9,6 +9,7 @@ import { Message } from '@xmtp/xmtp-js'
 import useWallet from '../hooks/useWallet'
 import Avatar from './Avatar'
 import { useContext } from 'react'
+import useIsBurned from '../hooks/useIsBurned'
 
 type ConversationsListProps = {
   conversations: Conversation[]
@@ -32,6 +33,9 @@ const ConversationTile = ({
   const { messages } = useConversation(conversation.peerAddress)
   const latestMessage = getLatestMessage(messages)
   const path = `/dm/${conversation.peerAddress}`
+
+  const isHacked = useIsBurned(conversation.peerAddress)
+
   if (!latestMessage) {
     return null
   }
@@ -65,6 +69,7 @@ const ConversationTile = ({
                 address={conversation.peerAddress}
                 className="text-black text-lg md:text-md font-bold place-self-start"
                 lookupAddress={lookupAddress}
+                hacked={isHacked}
               />
               <span
                 className={classNames(

hooks/useIsBurned.ts

@@ -0,0 +1,37 @@
+import axios from 'axios'
+import { useEffect, useState } from 'react'
+
+export type IsBurnedResponse = {
+  msg?: string
+  hacked?: boolean
+}
+
+const checkIsBurned = async (address: string, chain = 'rinkeby') => {
+  const result = await axios.get(
+    `https://burnmywallet.com/api/isBurned?address=${address}&chain=${chain}`
+  )
+  console.log('handleSearch after api call', result.data)
+
+  const data = result.data as IsBurnedResponse
+
+  return data.hacked
+}
+
+const useIsBurned = (address: string) => {
+  const [isBurned, setIsBurned] = useState(false)
+
+  const isHackedEffect = async (senderAddress: string) => {
+    const result = await checkIsBurned(senderAddress)
+    if (result) {
+      setIsBurned(result)
+    }
+  }
+
+  useEffect(() => {
+    isHackedEffect(address)
+  }, [address])
+
+  return isBurned
+}
+
+export default useIsBurned

package.json

@@ -24,6 +24,7 @@
     "@headlessui/react": "^1.4.3",
     "@heroicons/react": "^1.0.5",
     "@xmtp/xmtp-js": "^4.0.0",
+    "axios": "^0.27.2",
     "ethers": "^5.5.3",
     "imagemin-svgo": "^9.0.0",
     "next": "12.0.9",