Verification Badge + filter

apps/scan/package.json

@@ -108,6 +108,7 @@
     "redis": "^5.8.3",
     "resumable-stream": "^2.2.8",
     "server-only": "catalog:",
+    "shake.js": "^1.2.2",
     "shiki": "^3.13.0",
     "siwe": "^3.0.0",
     "sonner": "^2.0.7",

apps/scan/src/app/(home)/(overview)/_components/sellers/all-sellers/table.tsx

@@ -8,12 +8,14 @@ import { columns } from './columns';
 import { useSellersSorting } from '../../../../../_contexts/sorting/sellers/hook';
 import { useTimeRangeContext } from '@/app/_contexts/time-range/hook';
 import { useChain } from '@/app/_contexts/chain/hook';
+import { useVerifiedFilter } from '@/app/_contexts/verified-filter/hook';
 import { useState } from 'react';
 
 export const AllSellersTable = () => {
   const { sorting } = useSellersSorting();
   const { timeframe } = useTimeRangeContext();
   const { chain } = useChain();
+  const { verifiedOnly } = useVerifiedFilter();
 
   const [page, setPage] = useState(0);
   const pageSize = 10;
@@ -25,6 +27,7 @@ export const AllSellersTable = () => {
       page,
     },
     timeframe,
+    verifiedOnly,
   });
 
   return (

apps/scan/src/app/(home)/(overview)/_components/sellers/known-sellers/columns.tsx

@@ -37,13 +37,12 @@ export const columns: ExtendedColumnDef<ColumnType>[] = [
     ),
     cell: ({ row }) => {
       return (
-        <div className="flex items-center gap-2">
-          <Origins
-            origins={row.original.origins}
-            addresses={row.original.recipients}
-            disableCopy
-          />
-        </div>
+        <Origins
+          origins={row.original.origins}
+          addresses={row.original.recipients}
+          disableCopy
+          hasVerifiedAccept={row.original.hasVerifiedAccept}
+        />
       );
     },
     size: 225,

apps/scan/src/app/(home)/(overview)/_components/sellers/known-sellers/container.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import { Section } from '@/app/_components/layout/page-utils';
+import { RangeSelector } from '@/app/_contexts/time-range/component';
+
+export const TopServersContainer = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  return (
+    <Section
+      title="Top Servers"
+      description="Top addresses that have received x402 transfers and are listed in the Bazaar"
+      actions={
+        <div className="flex items-center gap-2">
+          <RangeSelector />
+        </div>
+      }
+    >
+      {children}
+    </Section>
+  );
+};

apps/scan/src/app/(home)/(overview)/_components/sellers/known-sellers/index.tsx

@@ -2,17 +2,15 @@ import { Suspense } from 'react';
 
 import { ErrorBoundary } from 'react-error-boundary';
 
-import { Section } from '@/app/_components/layout/page-utils';
-
 import { KnownSellersTable, LoadingKnownSellersTable } from './table';
+import { TopServersContainer } from './container';
 
 import { api, HydrateClient } from '@/trpc/server';
 
 import { defaultSellersSorting } from '@/app/_contexts/sorting/sellers/default';
 import { SellersSortingProvider } from '@/app/_contexts/sorting/sellers/provider';
 
 import { TimeRangeProvider } from '@/app/_contexts/time-range/provider';
-import { RangeSelector } from '@/app/_contexts/time-range/component';
 
 import { ActivityTimeframe } from '@/types/timeframes';
 
@@ -60,19 +58,3 @@ export const LoadingTopServers = () => {
     </TopServersContainer>
   );
 };
-
-const TopServersContainer = ({ children }: { children: React.ReactNode }) => {
-  return (
-    <Section
-      title="Top Servers"
-      description="Top addresses that have received x402 transfers and are listed in the Bazaar"
-      actions={
-        <div className="flex items-center gap-2">
-          <RangeSelector />
-        </div>
-      }
-    >
-      {children}
-    </Section>
-  );
-};

apps/scan/src/app/(home)/(overview)/_components/sellers/known-sellers/table.tsx

@@ -5,6 +5,7 @@ import { DataTable } from '@/components/ui/data-table';
 import { useSellersSorting } from '@/app/_contexts/sorting/sellers/hook';
 import { useTimeRangeContext } from '@/app/_contexts/time-range/hook';
 import { useChain } from '@/app/_contexts/chain/hook';
+import { useVerifiedFilter } from '@/app/_contexts/verified-filter/hook';
 
 import { columns } from './columns';
 import { api } from '@/trpc/client';
@@ -13,6 +14,7 @@ export const KnownSellersTable = () => {
   const { sorting } = useSellersSorting();
   const { timeframe } = useTimeRangeContext();
   const { chain } = useChain();
+  const { verifiedOnly } = useVerifiedFilter();
 
   const [topSellers] = api.public.sellers.bazaar.list.useSuspenseQuery({
     chain,
@@ -21,6 +23,7 @@ export const KnownSellersTable = () => {
     },
     timeframe,
     sorting,
+    verifiedOnly,
   });
 
   return <DataTable columns={columns} data={topSellers.items} pageSize={10} />;

apps/scan/src/app/(home)/(overview)/_components/stats/charts.tsx

@@ -3,6 +3,7 @@
 import { api } from '@/trpc/client';
 
 import { useTimeRangeContext } from '@/app/_contexts/time-range/hook';
+import { useVerifiedFilter } from '@/app/_contexts/verified-filter/hook';
 
 import { LoadingOverallStatsCard, OverallStatsCard } from './card';
 
@@ -14,16 +15,19 @@ import { useChain } from '@/app/_contexts/chain/hook';
 export const OverallCharts = () => {
   const { timeframe } = useTimeRangeContext();
   const { chain } = useChain();
+  const { verifiedOnly } = useVerifiedFilter();
 
   const [overallStats] = api.public.stats.overall.useSuspenseQuery({
     chain,
     timeframe,
+    verifiedOnly,
   });
 
   const [bucketedStats] = api.public.stats.bucketed.useSuspenseQuery({
     numBuckets: 48,
     timeframe,
     chain,
+    verifiedOnly,
   });
 
   const chartData: ChartData<{

apps/scan/src/app/(home)/(overview)/_components/verified-filter-wrapper.tsx

@@ -0,0 +1,217 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { VerifiedFilterProvider } from '@/app/_contexts/verified-filter/provider';
+import { useVerifiedFilter } from '@/app/_contexts/verified-filter/hook';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Label } from '@/components/ui/label';
+import { Button } from '@/components/ui/button';
+import { CheckCircle, Smartphone } from 'lucide-react';
+
+const MOTION_PERMISSION_KEY = 'motion-permission-requested';
+
+export const VerifiedFilterWrapper = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  return (
+    <VerifiedFilterProvider>
+      <MotionPermissionPrompt />
+      <VerifiedFilterDialog />
+      {children}
+    </VerifiedFilterProvider>
+  );
+};
+
+// Prompt for motion permission on iOS
+const MotionPermissionPrompt = () => {
+  const [showPrompt, setShowPrompt] = useState(false);
+
+  useEffect(() => {
+    // Check if permission was already requested
+    const requested = localStorage.getItem(MOTION_PERMISSION_KEY);
+    if (requested) return;
+
+    // Check if device supports motion events and requires permission
+    if (
+      typeof DeviceMotionEvent !== 'undefined' &&
+      typeof (DeviceMotionEvent as any).requestPermission === 'function'
+    ) {
+      // Show prompt after a short delay
+      setTimeout(() => setShowPrompt(true), 2000);
+    } else {
+      // No permission needed, mark as completed
+      localStorage.setItem(MOTION_PERMISSION_KEY, 'true');
+    }
+  }, []);
+
+  const handleRequestPermission = async () => {
+    try {
+      const permission = await (DeviceMotionEvent as any).requestPermission();
+      localStorage.setItem(MOTION_PERMISSION_KEY, 'true');
+      setShowPrompt(false);
+    } catch (error) {
+      console.error('Error requesting motion permission:', error);
+      localStorage.setItem(MOTION_PERMISSION_KEY, 'true'); // Don't show again
+      setShowPrompt(false);
+    }
+  };
+
+  const handleDismiss = () => {
+    localStorage.setItem(MOTION_PERMISSION_KEY, 'true');
+    setShowPrompt(false);
+  };
+
+  if (!showPrompt) return null;
+
+  return (
+    <Dialog open={showPrompt} onOpenChange={handleDismiss}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Smartphone className="size-4" />
+            Enable Shake Gesture
+          </DialogTitle>
+          <DialogDescription>
+            Allow motion access to use shake gesture for opening the verified
+            filter. This is an optional feature for mobile devices.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="flex gap-2 justify-end">
+          <Button variant="outline" onClick={handleDismiss}>
+            Skip
+          </Button>
+          <Button onClick={handleRequestPermission}>Enable</Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+// Reusable toggle switch component
+const VerifiedToggleSwitch = () => {
+  const { verifiedOnly, setVerifiedOnly } = useVerifiedFilter();
+
+  const handleToggle = () => {
+    setVerifiedOnly(!verifiedOnly);
+  };
+
+  return (
+    <div className="flex items-center justify-between py-4">
+      <Label htmlFor="verified-toggle" className="text-sm font-medium">
+        Show only verified servers
+      </Label>
+      <button
+        id="verified-toggle"
+        type="button"
+        role="switch"
+        aria-checked={verifiedOnly}
+        onClick={handleToggle}
+        className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 ${
+          verifiedOnly ? 'bg-green-500' : 'bg-gray-200'
+        }`}
+      >
+        <span
+          className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
+            verifiedOnly ? 'translate-x-6' : 'translate-x-1'
+          }`}
+        />
+      </button>
+    </div>
+  );
+};
+
+// Dialog with keyboard shortcut (desktop) and shake detection (mobile)
+const VerifiedFilterDialog = () => {
+  const [showModal, setShowModal] = useState(false);
+
+  // Keyboard shortcut for desktop (triple tap 'v')
+  useEffect(() => {
+    let tapCount = 0;
+    let tapTimeout: NodeJS.Timeout;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'v' || e.key === 'V') {
+        tapCount++;
+
+        // Clear existing timeout
+        if (tapTimeout) {
+          clearTimeout(tapTimeout);
+        }
+
+        // Open modal on third tap
+        if (tapCount === 3) {
+          e.preventDefault();
+          setShowModal(true);
+          tapCount = 0;
+        } else {
+          // Reset counter after 500ms of no taps
+          tapTimeout = setTimeout(() => {
+            tapCount = 0;
+          }, 500);
+        }
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+      if (tapTimeout) {
+        clearTimeout(tapTimeout);
+      }
+    };
+  }, []);
+
+  // Shake detection for mobile
+  useEffect(() => {
+    // Only set up if permission was granted
+    const permissionGranted = localStorage.getItem(MOTION_PERMISSION_KEY);
+    if (!permissionGranted) return;
+
+    // Use shake.js library
+    const Shake = require('shake.js');
+    const myShakeEvent = new Shake({
+      threshold: 15, // Sensitivity of shake detection
+      timeout: 1000, // Time between shakes
+    });
+
+    myShakeEvent.start();
+
+    const handleShake = () => {
+      setShowModal(true);
+    };
+
+    window.addEventListener('shake', handleShake, false);
+
+    return () => {
+      window.removeEventListener('shake', handleShake, false);
+      myShakeEvent.stop();
+    };
+  }, []);
+
+  return (
+    <Dialog open={showModal} onOpenChange={setShowModal}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <CheckCircle className="size-4 text-green-500" />
+            Verified Servers Filter
+          </DialogTitle>
+          <DialogDescription>
+            Filter servers to only show those with verified accepts. Volume and
+            metrics are recalculated to only include transactions to verified
+            addresses.
+          </DialogDescription>
+        </DialogHeader>
+        <VerifiedToggleSwitch />
+      </DialogContent>
+    </Dialog>
+  );
+};