feat: Improve protection logic

src/app/api/protections/route.ts

@@ -0,0 +1,36 @@
+import { NextRequest, NextResponse } from 'next/server'
+
+export async function GET(req: NextRequest) {
+  try {
+    const address = req.nextUrl.searchParams.get('address')
+    const path = address
+      ? `/api/v2/protections?${new URLSearchParams({ address }).toString()}`
+      : '/api/v2/protections'
+    // FIXME: Update hostname
+    const res = await fetch(`https://api-pr-29-80wy.onrender.com${path}`, {
+      headers: {
+        ...req.headers,
+        'ic-ip-address':
+          req.headers.get('cf-connecting-ip') ??
+          req.headers.get('x-forwarded-for') ??
+          undefined,
+        'ic-ip-country':
+          req.headers.get('cf-ipcountry') ??
+          req.headers.get('x-vercel-ip-country') ??
+          undefined,
+      },
+    })
+    const { isRestrictedCountry, isUsingVpn } = await res.json()
+
+    return NextResponse.json({
+      isRestrictedCountry,
+      isUsingVpn,
+    })
+  } catch (e) {
+    console.error('Caught protections error', e)
+    return NextResponse.json({
+      isRestrictedCountry: false,
+      isUsingVpn: false,
+    })
+  }
+}

src/components/smart-trade-button/index.tsx

@@ -11,7 +11,7 @@ import { TradeButton } from '@/components/trade-button'
 import { Token } from '@/constants/tokens'
 import { useApproval } from '@/lib/hooks/use-approval'
 import { useNetwork } from '@/lib/hooks/use-network'
-import { useProtection } from '@/lib/providers/protection'
+import { useProtectionContext } from '@/lib/providers/protection'
 import { useSignTerms } from '@/lib/providers/sign-terms-provider'
 import { useSlippage } from '@/lib/providers/slippage'
 import { getNativeToken, isTokenPairTradable } from '@/lib/utils/tokens'
@@ -52,7 +52,7 @@ export function SmartTradeButton(props: SmartTradeButtonProps) {
 
   const { chainId } = useNetwork()
   const { open } = useWeb3Modal()
-  const requiresProtection = useProtection()
+  const { isRestrictedCountry, isUsingVpn } = useProtectionContext()
   const { signTermsOfService } = useSignTerms()
   const { slippage } = useSlippage()
 
@@ -65,12 +65,18 @@ export function SmartTradeButton(props: SmartTradeButtonProps) {
   const isTradablePair = useMemo(
     () =>
       isTokenPairTradable(
-        requiresProtection,
+        isRestrictedCountry || isUsingVpn,
         inputToken.symbol,
         outputToken.symbol,
         chainId ?? 1,
       ),
-    [chainId, requiresProtection, inputToken, outputToken],
+    [
+      isRestrictedCountry,
+      isUsingVpn,
+      inputToken.symbol,
+      outputToken.symbol,
+      chainId,
+    ],
   )
 
   const shouldApprove = useMemo(() => {
@@ -97,10 +103,22 @@ export function SmartTradeButton(props: SmartTradeButtonProps) {
   const [warnings, setWarnings] = useState<WarningType[]>([])
 
   useEffect(() => {
-    if (!isTradablePair && !hiddenWarnings?.includes(WarningType.restricted)) {
+    if (
+      !isTradablePair &&
+      isRestrictedCountry &&
+      !hiddenWarnings?.includes(WarningType.restricted)
+    ) {
       setWarnings([WarningType.restricted])
       return
     }
+    if (
+      !isTradablePair &&
+      isUsingVpn &&
+      !hiddenWarnings?.includes(WarningType.vpn)
+    ) {
+      setWarnings([WarningType.vpn])
+      return
+    }
     if (
       buttonState === TradeButtonState.signTerms &&
       !hiddenWarnings?.includes(WarningType.signTerms)
@@ -117,7 +135,14 @@ export function SmartTradeButton(props: SmartTradeButtonProps) {
       return
     }
     setWarnings([])
-  }, [buttonState, hiddenWarnings, isTradablePair, slippage])
+  }, [
+    buttonState,
+    hiddenWarnings,
+    isRestrictedCountry,
+    isTradablePair,
+    isUsingVpn,
+    slippage,
+  ])
 
   const onClick = useCallback(async () => {
     if (buttonState === TradeButtonState.connectWallet) {

src/components/swap/components/warning.tsx

@@ -10,6 +10,7 @@ export enum WarningType {
   priceImpact,
   restricted,
   signTerms,
+  vpn,
 }
 
 export interface Warning {
@@ -18,7 +19,10 @@ export interface Warning {
 }
 
 const warningsData: Record<
-  WarningType.priceImpact | WarningType.restricted | WarningType.signTerms,
+  | WarningType.priceImpact
+  | WarningType.restricted
+  | WarningType.signTerms
+  | WarningType.vpn,
   Warning
 > = {
   [WarningType.priceImpact]: {
@@ -48,6 +52,30 @@ const warningsData: Record<
       </>
     ),
   },
+  [WarningType.vpn]: {
+    title: 'Not Available to VPN Users',
+    node: (
+      <>
+        It appears you may be using a VPN and, because some of our tokens are
+        not available to Restricted Persons - including US persons - as defined
+        in our{' '}
+        <Link
+          href='https://indexcoop.com/terms-of-service'
+          style={{ textDecoration: 'underline' }}
+        >
+          Terms of Service
+        </Link>
+        , we are required to restrict access to VPN users. Please also see our{' '}
+        <Link
+          href='https://indexcoop.com/tokens-restricted-for-restricted-persons'
+          style={{ textDecoration: 'underline' }}
+        >
+          Tokens Restricted for Restricted Persons
+        </Link>{' '}
+        page.
+      </>
+    ),
+  },
   [WarningType.signTerms]: {
     title: 'Please sign the Terms and Conditions',
     node: (

src/components/swap/index.tsx

@@ -13,7 +13,7 @@ import { useBestQuote } from '@/lib/hooks/use-best-quote'
 import { QuoteType } from '@/lib/hooks/use-best-quote/types'
 import { useNetwork, useSupportedNetworks } from '@/lib/hooks/use-network'
 import { useWallet } from '@/lib/hooks/use-wallet'
-import { useProtection } from '@/lib/providers/protection'
+import { useProtectionContext } from '@/lib/providers/protection'
 import { useSelectedToken } from '@/lib/providers/selected-token-provider'
 import { useSlippage } from '@/lib/providers/slippage'
 import { colors } from '@/lib/styles/colors'
@@ -44,20 +44,26 @@ export const Swap = (props: SwapProps) => {
     BASE.chainId,
   ])
   const { logEvent } = useAnalytics()
-  const requiresProtection = useProtection()
+  const { isRestrictedCountry, isUsingVpn } = useProtectionContext()
   const { chainId } = useNetwork()
   const { slippage } = useSlippage()
   const { address } = useWallet()
 
   const isTradablePair = useMemo(
     () =>
       isTokenPairTradable(
-        requiresProtection,
+        isRestrictedCountry || isUsingVpn,
         inputToken.symbol,
         outputToken.symbol,
         chainId ?? 1,
       ),
-    [chainId, requiresProtection, inputToken, outputToken],
+    [
+      isRestrictedCountry,
+      isUsingVpn,
+      inputToken.symbol,
+      outputToken.symbol,
+      chainId,
+    ],
   )
 
   const {

src/lib/providers/protection/index.tsx

@@ -1,34 +1,46 @@
-import { createContext, useContext, useEffect, useState } from 'react'
+'use client'
 
-export const ProtectionContext = createContext<boolean>(false)
+import { useQuery } from '@tanstack/react-query'
+import { createContext, useContext } from 'react'
+import { useAccount } from 'wagmi'
 
-export const useProtection = () => useContext(ProtectionContext)
+interface Context {
+  isRestrictedCountry: boolean
+  isUsingVpn: boolean
+}
 
-export const ProtectionProvider = (props: { children: any }) => {
-  const [isProtectable, setIsProtectable] = useState<boolean>(false)
+export const ProtectionContext = createContext<Context>({
+  isRestrictedCountry: false,
+  isUsingVpn: false,
+})
 
-  const checkIfProtectable = async () => {
-    const API_KEY =
-      process.env.NEXT_PUBLIC_IP_LOOKUP_KEY ?? 'vN8S4cMfz4KPoq5eLx3X'
-    fetch('https://extreme-ip-lookup.com/json/?key=' + API_KEY)
-      .then((res) => res.json())
-      .then((response) => {
-        if (response.country === 'United States') setIsProtectable(true)
-      })
-      .catch((error) => {
-        console.error(
-          'Cant determine whether or not we should protect the user because of this error: ',
-          error,
-        )
-      })
-  }
+export const useProtectionContext = () => useContext(ProtectionContext)
+
+export const ProtectionProvider = (props: { children: any }) => {
+  const { address } = useAccount()
+  const {
+    data: { isRestrictedCountry, isUsingVpn },
+  } = useQuery({
+    gcTime: 2 * 60 * 1000,
+    refetchOnWindowFocus: false,
+    initialData: { isRestrictedCountry: false, isUsingVpn: false },
+    queryKey: ['protections', address],
+    queryFn: async () => {
+      const url = address
+        ? `/api/protections?${new URLSearchParams({ address }).toString()}`
+        : '/api/protections'
+      const res = await fetch(url)
+      const { isRestrictedCountry, isUsingVpn } = await res.json()
 
-  useEffect(() => {
-    checkIfProtectable()
-  }, [])
+      return {
+        isRestrictedCountry,
+        isUsingVpn,
+      }
+    },
+  })
 
   return (
-    <ProtectionContext.Provider value={isProtectable}>
+    <ProtectionContext.Provider value={{ isRestrictedCountry, isUsingVpn }}>
       {props.children}
     </ProtectionContext.Provider>
   )