Floating button/research on page

package.json

@@ -1,7 +1,7 @@
 {
   "name": "intuition-chrome-extension",
   "displayName": "Intuition Chrome Extension",
-  "version": "0.1.44",
+  "version": "0.1.45",
   "description": "",
   "author": "THP-Lab.org",
   "scripts": {
@@ -61,7 +61,7 @@
     "autoprefixer": "10.4.16",
     "concurrently": "^8.2.2",
     "cross-env": "^7.0.3",
-    "plasmo": "0.90.3",
+    "plasmo": "0.90.5",
     "postcss": "8.4.31",
     "prettier": "3.2.4",
     "svgo": "^3.0.2",

src/components/FloatingStatusBadge.tsx

@@ -0,0 +1,70 @@
+import { useEffect, useState } from "react"
+import type { Status } from "~src/hooks/useClaimDetection"
+
+const FloatingStatusBadge = ({ status }: { status: Status }) => {
+  const [visible, setVisible] = useState(true)
+
+  useEffect(() => {
+    if (status === "loading") {
+      setVisible(true)
+      return
+    }
+
+    setVisible(true)
+    const timeout = setTimeout(() => setVisible(false), 6000)
+    return () => clearTimeout(timeout)
+  }, [status])
+
+  if (!visible) return null
+
+  const isLoading = status === "loading"
+  const color =
+    status === "found"
+      ? "#22c55e"
+      : status === "not_found"
+      ? "#ef4444"
+      : "#3b82f6"
+
+  return (
+    <span
+      style={{
+        position: "absolute",
+        top: "50%",
+        left: "50%",
+        transform: "translate(-50%, -50%)",
+        width: "16px",
+        height: "16px",
+        borderRadius: "50%",
+        backgroundColor: isLoading ? "transparent" : color,
+        border: isLoading ? "2px solid #3b82f6" : "2px solid white",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        pointerEvents: "none"
+      }}
+    >
+      {isLoading && (
+        <span
+          style={{
+            width: "8px",
+            height: "8px",
+            border: "2px solid #3b82f6",
+            borderTopColor: "transparent",
+            borderRadius: "9999px",
+            animation: "spin 1s linear infinite"
+          }}
+        />
+      )}
+      <style>
+        {`
+          @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+          }
+        `}
+      </style>
+    </span>
+  )
+}
+
+export default FloatingStatusBadge

src/components/WalletConnectionButton.tsx

@@ -7,10 +7,12 @@ import { PowerOff } from 'lucide-react';
 const WalletConnectionButton = () => {
   const [account, setAccount] = useStorage<string>("metamask-account")
 
+
   const handleConnect = async () => {
     try {
       const accountAddress = await connectWallet()
       setAccount(accountAddress)
+      chrome.storage.local.set({ "metamask-account": accountAddress })
     } catch (error) {
       console.error("Failed to connect to wallet: ", error)
     }

src/contents/plasmo-inline.tsx

@@ -1,6 +1,16 @@
 import type { PlasmoCSConfig, PlasmoGetInlineAnchor } from "plasmo"
 import { useEffect, useRef, useState } from "react"
+import {
+  ApolloProvider,
+  gql,
+  useSubscription
+} from "@apollo/client"
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
+import { apolloSubscriptionClient } from "~src/graphql/src/apollo-subscription-client"
+import { useGetFollowingsFromAddressQuery } from "~src/graphql/src"
+import { useClaimDetection } from "~src/hooks/useClaimDetection"
 import IntuitionSearchIcon from "~src/components/icons/IntuitionSearchBar"
+import FloatingStatusBadge from "~src/components/FloatingStatusBadge"
 
 export const config: PlasmoCSConfig = {
   matches: ["https://*/*"]
@@ -9,23 +19,65 @@ export const config: PlasmoCSConfig = {
 export const getInlineAnchor: PlasmoGetInlineAnchor = () =>
   document.querySelector("body")
 
-export const getShadowHostId = () => "plasmo-inline-example-unique-id"
+export const getShadowHostId = () => "plasmo-floating-button"
 
-function PlasmoInline() {
-  const [positionY, setPositionY] = useState<number>(50)
+const EVENTS_SUBSCRIPTION = gql`
+  subscription Events($limit: Int!) {
+    events(
+      where: { deposit: { is_atom_wallet: { _eq: false } } }
+      order_by: [{ block_number: desc }]
+      limit: $limit
+    ) {
+      type
+      deposit {
+        sender {
+          id
+        }
+      }
+    }
+  }
+`
+
+const FloatingButton = ({ address }: { address: string }) => {
+  const [positionY, setPositionY] = useState(50)
+  const [hasNotification, setHasNotification] = useState(false)
   const draggingRef = useRef(false)
 
+  const { data: followData } = useGetFollowingsFromAddressQuery({
+    address: address?.toLowerCase() || ""
+  })
+
+  const { data: eventData } = useSubscription(EVENTS_SUBSCRIPTION, {
+    variables: { limit: 1 }
+  })
+
+  const { status } = useClaimDetection(window.location.href, address)
+
+  const followingIds =
+    followData?.following?.map((f) => f.id).filter(Boolean) ?? []
+
+  useEffect(() => {
+    const latestEvent = eventData?.events?.[0]
+    const actorId = latestEvent?.deposit?.sender?.id
+    const eventType = latestEvent?.type
+
+    if (
+      actorId &&
+      followingIds.includes(actorId) &&
+      ["ClaimCreated", "AtomCreated", "TripleCreated"].includes(eventType)
+    ) {
+      setHasNotification(true)
+    }
+  }, [eventData, followingIds])
+
   const handleMouseDown = (e: React.MouseEvent) => {
     const startY = e.clientY
     const startPositionY = positionY
     draggingRef.current = false
 
     const handleMouseMove = (moveEvent: MouseEvent) => {
       const deltaY = moveEvent.clientY - startY
-      if (Math.abs(deltaY) > 5) {
-        draggingRef.current = true
-      }
-
+      if (Math.abs(deltaY) > 5) draggingRef.current = true
       if (draggingRef.current) {
         const newY = startPositionY + (deltaY / window.innerHeight) * 100
         setPositionY(Math.min(90, Math.max(0, newY)))
@@ -35,54 +87,108 @@ function PlasmoInline() {
     const handleMouseUp = () => {
       window.removeEventListener("mousemove", handleMouseMove)
       window.removeEventListener("mouseup", handleMouseUp)
-
       if (!draggingRef.current) {
-        handleSidePanel()
+        setHasNotification(false)
+        chrome.runtime.sendMessage({ type: "open_sidepanel" })
       }
     }
 
     window.addEventListener("mousemove", handleMouseMove)
     window.addEventListener("mouseup", handleMouseUp)
   }
 
-  const handleSidePanel = () => {
-    chrome.runtime.sendMessage({ type: "open_sidepanel" })
-  }
-
   return (
-    <div>
-      <div
-        onMouseDown={handleMouseDown}
-        style={{
-          position: "fixed",
-          top: `${positionY}%`,
-          right: "12px",
-          borderRadius: 10,
-          padding: 10,
-          background: "black",
-          color: "white",
-          border: "1px solid #fff",
-          cursor: "grab",
-          zIndex: 9999,
-          opacity: 0.2,
-          transition: "opacity 0.3s ease"
-        }}
-        onMouseEnter={(e) => {
-          e.currentTarget.style.opacity = "1"
-        }}
-        onMouseLeave={(e) => {
-          e.currentTarget.style.opacity = "0.2"
-        }}
-      >
+    <div
+      onMouseDown={handleMouseDown}
+      style={{
+        position: "fixed",
+        top: `${positionY}%`,
+        right: "12px",
+        borderRadius: 10,
+        padding: 10,
+        background: "black",
+        color: "white",
+        border: "1px solid #fff",
+        cursor: "grab",
+        zIndex: 9999,
+        opacity: 0.4,
+        transition: "opacity 0.3s ease"
+      }}
+      onMouseEnter={(e) => (e.currentTarget.style.opacity = "1")}
+      onMouseLeave={(e) => (e.currentTarget.style.opacity = "0.4")}
+    >
+      <div style={{ position: "relative" }}>
         <IntuitionSearchIcon
           onSearch={() => {}}
           size={35}
           position={{ x: 0, y: 0 }}
           className="hover:opacity-80 transition-opacity"
         />
+        <FloatingStatusBadge status={status} />
+        {hasNotification && (
+          <span
+            style={{
+              position: "absolute",
+              top: 0,
+              right: 0,
+              width: "12px",
+              height: "12px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center"
+            }}
+          >
+            <span
+              style={{
+                position: "absolute",
+                width: "100%",
+                height: "100%",
+                borderRadius: "9999px",
+                backgroundColor: "#38bdf8",
+                animation: "ping 1s cubic-bezier(0, 0, 0.2, 1) infinite",
+                opacity: 0.75
+              }}
+            />
+            <span
+              style={{
+                position: "relative",
+                width: "100%",
+                height: "100%",
+                borderRadius: "9999px",
+                backgroundColor: "#0ea5e9"
+              }}
+            />
+          </span>
+        )}
       </div>
     </div>
   )
 }
 
-export default PlasmoInline
+const queryClient = new QueryClient()
+
+const Wrapper = () => {
+  const [address, setAddress] = useState("")
+
+  useEffect(() => {
+    chrome.storage.local.get("metamask-account", (res) => {
+      const addr = res["metamask-account"]
+      if (addr) {
+        console.log("✅ Metamask account loaded:", addr)
+        setAddress(addr)
+      }
+    })
+  }, [])
+
+  console.log("🧪 Rendering Wrapper with address:", address)
+
+  return (
+    <ApolloProvider client={apolloSubscriptionClient}>
+      <QueryClientProvider client={queryClient}>
+        <FloatingButton address={address} />
+      </QueryClientProvider>
+    </ApolloProvider>
+  )
+}
+
+export default Wrapper

src/graphql/src/apollo-subscription-client.ts

@@ -0,0 +1,62 @@
+import { ApolloClient, InMemoryCache, split } from "@apollo/client"
+import { GraphQLWsLink } from "@apollo/client/link/subscriptions"
+import { createClient } from "graphql-ws"
+import { getMainDefinition } from "@apollo/client/utilities"
+import { HttpLink } from "@apollo/client"
+
+
+const ENV = "dev" // "local" | "dev" | "prod"
+
+const ENDPOINTS = {
+  local: {
+    http: "http://localhost:8080/v1/graphql",
+    ws: "ws://localhost:8080/v1/graphql"
+  },
+  dev: {
+    http: "https://prod.base-sepolia.intuition-api.com/v1/graphql",
+    ws: "wss://prod.base-sepolia.intuition-api.com/v1/graphql"
+  },
+  prod: {
+    http: "https://prod.base.intuition-api.com/v1/graphql",
+    ws: "wss://prod.base.intuition-api.com/v1/graphql"
+  }
+}
+
+const { http, ws } = ENDPOINTS[ENV]
+
+const httpLink = new HttpLink({
+  uri: http,
+  headers: {
+    "Content-Type": "application/json"
+
+  }
+})
+
+const wsLink = new GraphQLWsLink(
+  createClient({
+    url: ws,
+    connectionParams: {
+      headers: {
+
+      }
+    }
+  })
+)
+
+
+const splitLink = split(
+  ({ query }) => {
+    const definition = getMainDefinition(query)
+    return (
+      definition.kind === "OperationDefinition" &&
+      definition.operation === "subscription"
+    )
+  },
+  wsLink,
+  httpLink
+)
+
+export const apolloSubscriptionClient = new ApolloClient({
+  link: splitLink,
+  cache: new InMemoryCache()
+})