Merge pull request #376 from merofinance/region-block

Add Region Block Popup

.gitignore

@@ -2,4 +2,5 @@
 /build
 localazy.keys.json
 data.json
-.DS_Store
+.DS_Store
+.env

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",

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 => {
               </Content>
               <Footer />
               <ErrorAlert />
+              <RegionPopup />
             </StyledApp>
           </Background>
         </Web3ReactProvider>

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();

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;

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 (
+    <Popup
+      centerHeader
+      show={blocked && !hasDeposits && inProtocolPage}
+      close={() => navigate("/")}
+      header="Unsupported Region"
+      body={`Mero access is currently not granted to residents of ${countryName}`}
+    />
+  );
+};
+
+export default RegionPopup;

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<string, string> = {
   "1": "Mainnet",

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 => {
           <Paragraph>
             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”).
           </Paragraph>
         </Item>
         <Item>

tsconfig.json

@@ -23,6 +23,7 @@
   },
   "include": [
     "src",
-    "node_modules/@backdfund"
+    "node_modules/@backdfund",
+    "typings/**/*"
   ]
 }

typings/react-ipgeolocation.d.ts

@@ -0,0 +1 @@
+declare module "react-ipgeolocation";

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"