adds geoblock

Author: ayv8er

app/page.tsx

@@ -5,6 +5,7 @@ import Header from "@/components/Header";
 import PolygonAssets from "@/components/PolygonAssets";
 import TradingSession from "@/components/TradingSession";
 import MarketTabs from "@/components/Trading/MarketTabs";
+import GeoBlockedBanner from "@/components/GeoBlockedBanner";
 
 export default function Home() {
   const {
@@ -15,21 +16,38 @@ export default function Home() {
     initializeTradingSession,
     endTradingSession,
     eoaAddress,
+    isGeoblocked,
+    isGeoblockLoading,
+    geoblockStatus,
   } = useTrading();
 
   return (
     <div className="p-6 min-h-screen flex flex-col gap-6 max-w-7xl mx-auto">
       <Header onEndSession={endTradingSession} />
+
+      {/* Show geoblock banner if user is in blocked region */}
+      {isGeoblocked && !isGeoblockLoading && (
+        <GeoBlockedBanner geoblockStatus={geoblockStatus} />
+      )}
+
       <PolygonAssets />
-      <TradingSession
-        session={tradingSession}
-        currentStep={currentStep}
-        error={sessionError}
-        isComplete={isTradingSessionComplete}
-        initialize={initializeTradingSession}
-        endSession={endTradingSession}
-      />
-      {isTradingSessionComplete && eoaAddress && <MarketTabs />}
+
+      {/* Hide trading session initialization when geoblocked */}
+      {!isGeoblocked && (
+        <TradingSession
+          session={tradingSession}
+          currentStep={currentStep}
+          error={sessionError}
+          isComplete={isTradingSessionComplete}
+          initialize={initializeTradingSession}
+          endSession={endTradingSession}
+        />
+      )}
+
+      {/* Markets are viewable even when geoblocked, but trading buttons should be disabled */}
+      {(isTradingSessionComplete || isGeoblocked) && eoaAddress && (
+        <MarketTabs />
+      )}
     </div>
   );
 }

components/GeoBlockedBanner.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { GeoblockStatus } from "@/hooks/useGeoblock";
+
+interface GeoBlockedBannerProps {
+  geoblockStatus: GeoblockStatus | null;
+}
+
+// This banner is displayed when the user is geoblocked from trading
+// It prevents trading initialization while still allowing users to view markets
+
+export default function GeoBlockedBanner({
+  geoblockStatus,
+}: GeoBlockedBannerProps) {
+  return (
+    <div className="bg-red-900/30 border border-red-500/50 rounded-lg p-4 mb-6">
+      <div className="flex items-start gap-3">
+        <div className="flex-1">
+          <h3 className="text-red-300 font-semibold text-lg mb-1">
+            Trading Unavailable in Your Region
+          </h3>
+          <p className="text-red-200/80 text-sm mb-2">
+            Polymarket trading is not available in your location. You can view
+            markets but cannot place trades or initialize a trading session.
+          </p>
+          {geoblockStatus && (
+            <p className="text-red-200/60 text-xs">
+              Detected region: {geoblockStatus.country}
+              {geoblockStatus.region ? `, ${geoblockStatus.region}` : ""}
+            </p>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+

components/Trading/Markets/MarketCard.tsx

@@ -1,4 +1,4 @@
-import type { PolymarketMarket } from "@/hooks/useHighVolumeMarkets";
+import type { PolymarketMarket } from "@/hooks/useMarkets";
 
 import Card from "@/components/shared/Card";
 import Badge from "@/components/shared/Badge";
@@ -9,6 +9,7 @@ import { formatVolume, formatLiquidity } from "@/utils/formatting";
 
 interface MarketCardProps {
   market: PolymarketMarket;
+  disabled?: boolean;
   onOutcomeClick: (
     marketTitle: string,
     outcome: string,
@@ -20,6 +21,7 @@ interface MarketCardProps {
 
 export default function MarketCard({
   market,
+  disabled = false,
   onOutcomeClick,
 }: MarketCardProps) {
   const volumeUSD = parseFloat(
@@ -79,6 +81,7 @@ export default function MarketCard({
             isClosed={isClosed}
             negRisk={negRisk}
             marketQuestion={market.question}
+            disabled={disabled}
             onOutcomeClick={onOutcomeClick}
           />
         </div>

components/Trading/Markets/OutcomeButtons.tsx

@@ -8,6 +8,7 @@ interface OutcomeButtonsProps {
   isClosed: boolean;
   negRisk: boolean;
   marketQuestion: string;
+  disabled?: boolean;
   onOutcomeClick: (
     marketTitle: string,
     outcome: string,
@@ -24,10 +25,13 @@ export default function OutcomeButtons({
   isClosed,
   negRisk,
   marketQuestion,
+  disabled = false,
   onOutcomeClick,
 }: OutcomeButtonsProps) {
   if (outcomes.length === 0) return null;
 
+  const isDisabled = isClosed || disabled;
+
   return (
     <div className="flex gap-2 flex-wrap">
       {outcomes.map((outcome: string, idx: number) => {
@@ -39,7 +43,7 @@ export default function OutcomeButtons({
           <button
             key={`outcome-${idx}`}
             onClick={() => {
-              if (!isClosed && tokenId) {
+              if (!isDisabled && tokenId) {
                 onOutcomeClick(
                   marketQuestion,
                   outcome,
@@ -49,10 +53,10 @@ export default function OutcomeButtons({
                 );
               }
             }}
-            disabled={isClosed || !tokenId}
+            disabled={isDisabled || !tokenId}
             className={cn(
               "flex-1 min-w-[120px] px-3 py-2 rounded border transition-all duration-200",
-              isClosed || !tokenId
+              isDisabled || !tokenId
                 ? "bg-white/5 border-white/10 cursor-not-allowed opacity-50"
                 : "bg-white/5 border-white/10 hover:bg-blue-500/20 hover:border-blue-500/40 cursor-pointer"
             )}

hooks/useGeoblock.ts

@@ -0,0 +1,77 @@
+import { useState, useEffect, useCallback } from "react";
+import { GEOBLOCK_API_URL } from "@/constants/api";
+
+export type GeoblockStatus = {
+  blocked: boolean;
+  ip: string;
+  country: string;
+  region: string;
+};
+
+type UseGeoblockReturn = {
+  isBlocked: boolean;
+  isLoading: boolean;
+  error: Error | null;
+  geoblockStatus: GeoblockStatus | null;
+  recheckGeoblock: () => Promise<void>;
+};
+
+// This hook checks if the user is geoblocked from using Polymarket
+// Integrators should use this to enforce the same geoblocking rules as Polymarket.com
+
+export default function useGeoblock(): UseGeoblockReturn {
+  const [isBlocked, setIsBlocked] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+  const [geoblockStatus, setGeoblockStatus] = useState<GeoblockStatus | null>(
+    null
+  );
+
+  const checkGeoblock = useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const response = await fetch(GEOBLOCK_API_URL, {
+        method: "GET",
+        headers: {
+          Accept: "application/json",
+        },
+      });
+
+      if (!response.ok) {
+        throw new Error(`Geoblock API error: ${response.status}`);
+      }
+
+      const data: GeoblockStatus = await response.json();
+
+      setGeoblockStatus(data);
+      setIsBlocked(data.blocked);
+    } catch (err) {
+      const error =
+        err instanceof Error ? err : new Error("Failed to check geoblock");
+      setError(error);
+      console.error("Geoblock check failed:", error);
+
+      // On error, default to not blocked to avoid false positives
+      // In production, you may want to block by default for safety
+      setIsBlocked(false);
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  // Check geoblock on mount
+  useEffect(() => {
+    checkGeoblock();
+  }, [checkGeoblock]);
+
+  return {
+    isBlocked,
+    isLoading,
+    error,
+    geoblockStatus,
+    recheckGeoblock: checkGeoblock,
+  };
+}
+

providers/TradingProvider.tsx

@@ -1,12 +1,13 @@
 "use client";
 
-import { createContext, useContext, ReactNode } from "react";
+import { createContext, useContext, ReactNode, useCallback } from "react";
 import type { ClobClient } from "@polymarket/clob-client";
 import type { RelayClient } from "@polymarket/builder-relayer-client";
 import { useWallet } from "./WalletContext";
 import useClobClient from "@/hooks/useClobClient";
 import useTradingSession from "@/hooks/useTradingSession";
 import useSafeDeployment from "@/hooks/useSafeDeployment";
+import useGeoblock, { GeoblockStatus } from "@/hooks/useGeoblock";
 import { TradingSession, SessionStep } from "@/utils/session";
 
 interface TradingContextType {
@@ -20,6 +21,9 @@ interface TradingContextType {
   relayClient: RelayClient | null;
   eoaAddress: string | undefined;
   safeAddress: string | undefined;
+  isGeoblocked: boolean;
+  isGeoblockLoading: boolean;
+  geoblockStatus: GeoblockStatus | null;
 }
 
 const TradingContext = createContext<TradingContextType | null>(null);
@@ -34,12 +38,18 @@ export default function TradingProvider({ children }: { children: ReactNode }) {
   const { eoaAddress } = useWallet();
   const { derivedSafeAddressFromEoa } = useSafeDeployment(eoaAddress);
 
+  const {
+    isBlocked: isGeoblocked,
+    isLoading: isGeoblockLoading,
+    geoblockStatus,
+  } = useGeoblock();
+
   const {
     tradingSession,
     currentStep,
     sessionError,
     isTradingSessionComplete,
-    initializeTradingSession,
+    initializeTradingSession: initSession,
     endTradingSession,
     relayClient,
   } = useTradingSession();
@@ -49,6 +59,15 @@ export default function TradingProvider({ children }: { children: ReactNode }) {
     isTradingSessionComplete
   );
 
+  const initializeTradingSession = useCallback(async () => {
+    if (isGeoblocked) {
+      throw new Error(
+        "Trading is not available in your region. Polymarket is geoblocked in your location."
+      );
+    }
+    return initSession();
+  }, [isGeoblocked, initSession]);
+
   return (
     <TradingContext.Provider
       value={{
@@ -62,6 +81,9 @@ export default function TradingProvider({ children }: { children: ReactNode }) {
         relayClient,
         eoaAddress,
         safeAddress: derivedSafeAddressFromEoa,
+        isGeoblocked,
+        isGeoblockLoading,
+        geoblockStatus,
       }}
     >
       {children}