add geo check to trade forms

components/swap/SwapForm.tsx

@@ -45,6 +45,7 @@ import TokenVaultWarnings from '@components/shared/TokenVaultWarnings'
 import MaxSwapAmount from './MaxSwapAmount'
 import PercentageSelectButtons from './PercentageSelectButtons'
 import Tooltip from '@components/shared/Tooltip'
+import useIpAddress from 'hooks/useIpAddress'
 
 const MAX_DIGITS = 11
 export const withValueLimit = (values: NumberFormatValues): boolean => {
@@ -64,6 +65,7 @@ const SwapForm = () => {
   const [showConfirm, setShowConfirm] = useState(false)
   const { group } = useMangoGroup()
   const [swapFormSizeUi] = useLocalStorageState(SIZE_INPUT_UI_KEY, 'Slider')
+  const { ipAllowed, ipCountry } = useIpAddress()
 
   const {
     margin: useMargin,
@@ -418,14 +420,30 @@ const SwapForm = () => {
             useMargin={useMargin}
           />
         )}
-        <SwapFormSubmitButton
-          loadingSwapDetails={loadingSwapDetails}
-          useMargin={useMargin}
-          setShowConfirm={setShowConfirm}
-          amountIn={amountInAsDecimal}
-          inputSymbol={inputBank?.name}
-          amountOut={selectedRoute ? amountOutAsDecimal.toNumber() : undefined}
-        />
+        {ipAllowed ? (
+          <SwapFormSubmitButton
+            loadingSwapDetails={loadingSwapDetails}
+            useMargin={useMargin}
+            setShowConfirm={setShowConfirm}
+            amountIn={amountInAsDecimal}
+            inputSymbol={inputBank?.name}
+            amountOut={
+              selectedRoute ? amountOutAsDecimal.toNumber() : undefined
+            }
+          />
+        ) : (
+          <div className="mt-6 flex-grow">
+            <div className="flex">
+              <Button disabled className="flex-grow">
+                <span>
+                  {t('country-not-allowed', {
+                    country: ipCountry ? `(${ipCountry})` : '(Unknown)',
+                  })}
+                </span>
+              </Button>
+            </div>
+          </div>
+        )}
         {group && inputBank ? (
           <div className="mt-4">
             <TokenVaultWarnings bank={inputBank} />

components/trade/AdvancedTradeForm.tsx

@@ -39,6 +39,7 @@ import useSelectedMarket from 'hooks/useSelectedMarket'
 import Slippage from './Slippage'
 import { formatFixedDecimals, getDecimalCount } from 'utils/numbers'
 import LogoWithFallback from '@components/shared/LogoWithFallback'
+import useIpAddress from 'hooks/useIpAddress'
 
 const TABS: [string, number][] = [
   ['Limit', 0],
@@ -55,6 +56,7 @@ const AdvancedTradeForm = () => {
   const [useMargin, setUseMargin] = useState(true)
   const [placingOrder, setPlacingOrder] = useState(false)
   const [tradeFormSizeUi] = useLocalStorageState(SIZE_INPUT_UI_KEY, 'Slider')
+  const { ipAllowed, ipCountry } = useIpAddress()
 
   const baseSymbol = useMemo(() => {
     return selectedMarket?.name.split(/-|\//)[0]
@@ -557,27 +559,41 @@ const AdvancedTradeForm = () => {
         ) : null}
       </div>
       <div className="mt-6 flex px-3 md:px-4">
-        <Button
-          onClick={handlePlaceOrder}
-          className={`flex w-full items-center justify-center text-white ${
-            tradeForm.side === 'buy'
-              ? 'bg-th-up-dark md:hover:bg-th-up'
-              : 'bg-th-down-dark md:hover:bg-th-down'
-          }`}
-          disabled={false}
-          size="large"
-        >
-          {!placingOrder ? (
-            <span className="capitalize">
-              {t('trade:place-order', { side: tradeForm.side })}
-            </span>
-          ) : (
-            <div className="flex items-center space-x-2">
-              <Loading />
-              <span>{t('trade:placing-order')}</span>
+        {ipAllowed ? (
+          <Button
+            onClick={handlePlaceOrder}
+            className={`flex w-full items-center justify-center text-white ${
+              tradeForm.side === 'buy'
+                ? 'bg-th-up-dark md:hover:bg-th-up'
+                : 'bg-th-down-dark md:hover:bg-th-down'
+            }`}
+            disabled={false}
+            size="large"
+          >
+            {!placingOrder ? (
+              <span className="capitalize">
+                {t('trade:place-order', { side: tradeForm.side })}
+              </span>
+            ) : (
+              <div className="flex items-center space-x-2">
+                <Loading />
+                <span>{t('trade:placing-order')}</span>
+              </div>
+            )}
+          </Button>
+        ) : (
+          <div className="flex-grow">
+            <div className="flex">
+              <Button disabled className="flex-grow">
+                <span>
+                  {t('country-not-allowed', {
+                    country: ipCountry ? `(${ipCountry})` : '(Unknown)',
+                  })}
+                </span>
+              </Button>
             </div>
-          )}
-        </Button>
+          </div>
+        )}
       </div>
       <div className="mt-4 space-y-2 px-3 md:px-4 lg:mt-6">
         {tradeForm.price && tradeForm.baseSize ? (

hooks/useIpAddress.ts

@@ -1,5 +1,5 @@
 import { CLUSTER } from '@store/mangoStore'
-import { useEffect, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 
 const SANCTIONED_COUNTRIES = [
   ['AG', 'Antigua and Barbuda'],
@@ -13,7 +13,6 @@ const SANCTIONED_COUNTRIES = [
   ['CU', 'Cuba'],
   ['CD', 'Democratic Republic of Congo'],
   ['EC', 'Ecuador'],
-  ['GB', 'United Kingdom'],
   ['IR', 'Iran'],
   ['IQ', 'Iraq'],
   ['LR', 'Liberia'],
@@ -42,25 +41,25 @@ export default function useIpAddress() {
   const [spotAllowed, setSpotAllowed] = useState(false)
   const [ipCountry, setIpCountry] = useState('')
 
-  useEffect(() => {
-    const checkIpLocation = async () => {
-      const response = await fetch(
-        `https://country-code.mangomarkets.workers.dev`
-      )
-      const parsedResponse = await response.json()
-      const ipCountryCode = parsedResponse ? parsedResponse?.country : ''
+  const checkIpLocation = useCallback(async () => {
+    const response = await fetch(
+      `https://country-code.mangomarkets.workers.dev`
+    )
+    const parsedResponse = await response.json()
+    const ipCountryCode = parsedResponse ? parsedResponse?.country : ''
 
-      setIpCountry(ipCountryCode)
+    setIpCountry(ipCountryCode)
 
-      if (ipCountryCode) {
-        setIpAllowed(!SANCTIONED_COUNTRY_CODES.includes(ipCountryCode))
-        setSpotAllowed(SPOT_ALLOWED.includes(ipCountryCode))
-      }
+    if (ipCountryCode) {
+      setIpAllowed(!SANCTIONED_COUNTRY_CODES.includes(ipCountryCode))
+      setSpotAllowed(SPOT_ALLOWED.includes(ipCountryCode))
     }
-
-    checkIpLocation()
   }, [])
 
+  useEffect(() => {
+    checkIpLocation()
+  }, [checkIpLocation])
+
   if (CLUSTER === 'mainnet-beta') {
     return { ipAllowed, spotAllowed, ipCountry }
   } else {

public/locales/en/common.json

@@ -37,6 +37,8 @@
   "connect-helper": "Connect to get started",
   "copy-address": "Copy Address",
   "copy-address-success": "Copied address: {{pk}}",
+  "country-not-allowed": "Country {{country}} Not Allowed",
+  "country-not-allowed-tooltip": "You are using an open-source frontend facilitated by the Mango DAO. As such, it restricts access to certain regions out of an abundance of caution, due to regulatory uncertainty.",
   "create-account": "Create Account",
   "creating-account": "Creating Account...",
   "cumulative-interest-value": "Cumulative Interest Earned",

public/locales/es/common.json

@@ -37,6 +37,8 @@
   "connect-helper": "Connect to get started",
   "copy-address": "Copy Address",
   "copy-address-success": "Copied address: {{pk}}",
+  "country-not-allowed": "Country {{country}} Not Allowed",
+  "country-not-allowed-tooltip": "You are using an open-source frontend facilitated by the Mango DAO. As such, it restricts access to certain regions out of an abundance of caution, due to regulatory uncertainty.",
   "create-account": "Create Account",
   "creating-account": "Creating Account...",
   "cumulative-interest-value": "Cumulative Interest Earned",

public/locales/ru/common.json

@@ -37,6 +37,8 @@
   "connect-helper": "Connect to get started",
   "copy-address": "Copy Address",
   "copy-address-success": "Copied address: {{pk}}",
+  "country-not-allowed": "Country {{country}} Not Allowed",
+  "country-not-allowed-tooltip": "You are using an open-source frontend facilitated by the Mango DAO. As such, it restricts access to certain regions out of an abundance of caution, due to regulatory uncertainty.",
   "create-account": "Create Account",
   "creating-account": "Creating Account...",
   "cumulative-interest-value": "Cumulative Interest Earned",

public/locales/zh/common.json

@@ -37,6 +37,8 @@
   "connect-helper": "Connect to get started",
   "copy-address": "Copy Address",
   "copy-address-success": "Copied address: {{pk}}",
+  "country-not-allowed": "Country {{country}} Not Allowed",
+  "country-not-allowed-tooltip": "You are using an open-source frontend facilitated by the Mango DAO. As such, it restricts access to certain regions out of an abundance of caution, due to regulatory uncertainty.",
   "create-account": "Create Account",
   "creating-account": "Creating Account...",
   "cumulative-interest-value": "Cumulative Interest Earned",

public/locales/zh_tw/common.json

@@ -37,6 +37,8 @@
   "connect-helper": "Connect to get started",
   "copy-address": "Copy Address",
   "copy-address-success": "Copied address: {{pk}}",
+  "country-not-allowed": "Country {{country}} Not Allowed",
+  "country-not-allowed-tooltip": "You are using an open-source frontend facilitated by the Mango DAO. As such, it restricts access to certain regions out of an abundance of caution, due to regulatory uncertainty.",
   "create-account": "Create Account",
   "creating-account": "Creating Account...",
   "cumulative-interest-value": "Cumulative Interest Earned",