diff --git a/.gitignore b/.gitignore
index ee6e921f..8cf81fa0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,4 +2,5 @@
/build
localazy.keys.json
data.json
-.DS_Store
\ No newline at end of file
+.DS_Store
+.env
\ No newline at end of file
diff --git a/package.json b/package.json
index 61f666b1..9c726260 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
"react-dom": "^17.0.2",
"react-helmet-async": "^1.2.2",
"react-i18next": "^11.15.1",
+ "react-ipgeolocation": "^1.4.0",
"react-number-format": "^4.9.0",
"react-redux": "^7.2.6",
"react-router-bootstrap": "^0.26.0",
diff --git a/src/Layout.tsx b/src/Layout.tsx
index 20af316f..64574fd5 100644
--- a/src/Layout.tsx
+++ b/src/Layout.tsx
@@ -16,6 +16,7 @@ import MockSigner from "./lib/mock/signer";
import Footer from "./components/Footer";
import ErrorAlert from "./components/ErrorAlert";
import { MeroError } from "./app/errors";
+import RegionPopup from "./components/RegionPopup";
const Background = styled.div`
background: radial-gradient(rgba(11, 3, 60, 0.2), rgba(10, 5, 38, 0.3));
@@ -90,6 +91,7 @@ const Layout = (): JSX.Element => {
+
diff --git a/src/components/Connector.tsx b/src/components/Connector.tsx
index fe0b86cf..97d1db9e 100644
--- a/src/components/Connector.tsx
+++ b/src/components/Connector.tsx
@@ -11,8 +11,7 @@ import ConnectionDetails from "./ConnectionDetails";
import ConnectorDesktop from "./ConnectorDesktop";
import ConnectorMobile from "./ConnectorMobile";
import WalletSelectPopup from "./WalletSelectPopup";
-
-const PROTOCOL_PAGES = ["pools", "pool", "actions", "mero", "claim", "stake"];
+import { PROTOCOL_PAGES } from "../lib/constants";
const Connector = (): JSX.Element => {
const { active, activate } = useWeb3React();
diff --git a/src/components/Popup.tsx b/src/components/Popup.tsx
index 32939cc6..3dc4d947 100644
--- a/src/components/Popup.tsx
+++ b/src/components/Popup.tsx
@@ -40,7 +40,7 @@ interface PopupContainerProps {
const PopupContainer = styled.div`
position: relative;
- width: ${(props: PopupContainerProps) => (props.small ? "31.1rem" : "55.4rem")};
+ width: ${(props: PopupContainerProps) => (props.small ? "31.1rem" : "56rem")};
padding: ${(props: PopupContainerProps) =>
props.small ? "2.1rem 1.6rem 2.1rem 1.6rem" : "3.7rem 1.6rem 2.3rem 1.6rem"};
border-radius: 1.4rem;
diff --git a/src/components/RegionPopup.tsx b/src/components/RegionPopup.tsx
new file mode 100644
index 00000000..f880e59e
--- /dev/null
+++ b/src/components/RegionPopup.tsx
@@ -0,0 +1,99 @@
+import styled from "styled-components";
+import useGeoLocation from "react-ipgeolocation";
+import { useSelector } from "react-redux";
+import { useLocation, useNavigate } from "react-router-dom";
+
+import { selectUsersTotalUsdEverywhere } from "../state/valueSelectors";
+import Popup from "./Popup";
+import { PROTOCOL_PAGES } from "../lib/constants";
+
+interface CountryData {
+ code: string;
+ name: string;
+}
+const BLOCKED_COUNTRIES: CountryData[] = [
+ {
+ name: "United Kingdom",
+ code: "GB",
+ },
+ {
+ name: "United States",
+ code: "US",
+ },
+ {
+ name: "Belarus",
+ code: "BY",
+ },
+ {
+ name: "Burma",
+ code: "MM",
+ },
+ {
+ name: "China",
+ code: "CN",
+ },
+ {
+ name: "Cuba",
+ code: "CU",
+ },
+ {
+ name: "Congo",
+ code: "CD",
+ },
+ {
+ name: "Iran",
+ code: "IR",
+ },
+ {
+ name: "Iraq",
+ code: "IQ",
+ },
+ {
+ name: "Liberia",
+ code: "LR",
+ },
+ {
+ name: "North Korea",
+ code: "KP",
+ },
+ {
+ name: "Sudan",
+ code: "SD",
+ },
+ {
+ name: "Syria",
+ code: "SY",
+ },
+ {
+ name: "Zimbabwe",
+ code: "ZW",
+ },
+];
+
+const RegionPopup = (): JSX.Element | null => {
+ const navigate = useNavigate();
+
+ const deposited = useSelector(selectUsersTotalUsdEverywhere);
+ const location = useLocation();
+ const ipLocation = useGeoLocation();
+
+ if (!ipLocation) return null;
+
+ const hasDeposits = !!deposited && !deposited.isZero();
+ const countryData = BLOCKED_COUNTRIES.find((country) => country.code === ipLocation.country);
+ const blocked = countryData !== undefined;
+ const countryName = countryData?.name;
+ const inProtocolPage = PROTOCOL_PAGES.includes(location.pathname.split("/")[1]);
+
+ return (
+ navigate("/")}
+ header="Unsupported Region"
+ body={`Mero access is currently not granted to residents of ${countryName}`}
+ />
+ );
+};
+
+export default RegionPopup;
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
index 59253614..25b654b9 100644
--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@@ -27,6 +27,7 @@ export const TOPUP_ACTION_ROUTE = "/actions/register/topup";
export const DEBT_REPAYMENT_ACTION_ROUTE = "/actions/register/debt-repayment";
export const SLIPPAGE_TOLERANCE = 0.98; // 2%
export const GAS_BUFFER = 11; // This is 10%, we use it as BigNumber.mul(GAS_BUFFER).div(10)
+export const PROTOCOL_PAGES = ["pools", "pool", "actions", "mero", "claim", "stake"];
export const chainIds: Record = {
"1": "Mainnet",
diff --git a/src/pages/terms-of-service/TermsOfService.tsx b/src/pages/terms-of-service/TermsOfService.tsx
index fb855dba..ee72a188 100644
--- a/src/pages/terms-of-service/TermsOfService.tsx
+++ b/src/pages/terms-of-service/TermsOfService.tsx
@@ -1,5 +1,5 @@
import styled from "styled-components";
-import { Header1, Header2, Header5, Paragraph } from "../../styles/Headers";
+import { Header1, Header5, Paragraph } from "../../styles/Headers";
import Seo from "../../components/Seo";
import { MAIN_LINK } from "../../lib/links";
@@ -278,9 +278,9 @@ const TermsOfServicePage = (): JSX.Element => {
If they are a citizen of or otherwise accessing the Website from the nations of Belarus,
Burma, China, Cuba, Democratic Republic of Congo, Iran, Iraq, Liberia, North Korea,
- Sudan, Syria, and Zimbabwe, or if the User is otherwise listed as a Specially Designated
- National by the United States Office of Foreign Asset Control (“OFAC”) (collectively,
- “Prohibited Jurisdictions”).
+ Sudan, Syria, UK, and Zimbabwe, or if the User is otherwise listed as a Specially
+ Designated National by the United States Office of Foreign Asset Control (“OFAC”)
+ (collectively, “Prohibited Jurisdictions”).
-
diff --git a/tsconfig.json b/tsconfig.json
index a0a37aa8..ea442ef6 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -23,6 +23,7 @@
},
"include": [
"src",
- "node_modules/@backdfund"
+ "node_modules/@backdfund",
+ "typings/**/*"
]
}
diff --git a/typings/react-ipgeolocation.d.ts b/typings/react-ipgeolocation.d.ts
new file mode 100644
index 00000000..16771b01
--- /dev/null
+++ b/typings/react-ipgeolocation.d.ts
@@ -0,0 +1 @@
+declare module "react-ipgeolocation";
diff --git a/yarn.lock b/yarn.lock
index b82681e4..a80b6fa0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -12813,6 +12813,11 @@ react-i18next@^11.15.1:
html-escaper "^2.0.2"
html-parse-stringify "^3.0.1"
+react-ipgeolocation@^1.4.0:
+ version "1.4.0"
+ resolved "https://registry.yarnpkg.com/react-ipgeolocation/-/react-ipgeolocation-1.4.0.tgz#5edaf9e86b7a1620cf86fdd9485ea3caeb252ed5"
+ integrity sha512-pZ+/wxDVsHW3lHoPRkyu8NDXuNhz7d+vgp4vILJxpkktM46A90c4l6AxeU5P0jxDVv6b92lWphX30ahZZJapvg==
+
react-is@^16.13.1, react-is@^16.7.0:
version "16.13.1"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"