feat: redirect when access from forbidden country is detected (#1209)

src/components/Geoblock/Geoblock.tsx

@@ -0,0 +1,14 @@
+import React, { ReactNode } from 'react';
+
+import { useGeoblocking } from '@/utils/hooks/use-geoblocking';
+
+type Props = {
+  children: ReactNode;
+};
+
+const GeoblockingWrapper = ({ children }: Props): JSX.Element => {
+  useGeoblocking();
+  return <>{children}</>;
+};
+
+export { GeoblockingWrapper };

src/config/links.ts

@@ -21,8 +21,13 @@ const INTERLAY_DOS_AND_DONTS_DOCS_LINK = 'https://docs.interlay.io/#/vault/insta
 
 const BANXA_LINK = 'http://talisman.banxa.com/';
 
+const GEOBLOCK_API_ENDPOINT = '/check_access';
+const GEOBLOCK_REDIRECTION_LINK = 'https://www.interlay.io/geoblock';
+
 export {
   BANXA_LINK,
+  GEOBLOCK_API_ENDPOINT,
+  GEOBLOCK_REDIRECTION_LINK,
   INTERLAY_COMPANY_LINK,
   INTERLAY_CROWDLOAN_LINK,
   INTERLAY_DISCORD_LINK,

src/index.tsx

@@ -18,6 +18,7 @@ import ThemeWrapper from '@/parts/ThemeWrapper';
 import { Subscriptions } from '@/utils/hooks/api/tokens/use-balances-subscription';
 
 import App from './App';
+import { GeoblockingWrapper } from './components/Geoblock/Geoblock';
 import reportWebVitals from './reportWebVitals';
 import { store } from './store';
 
@@ -30,26 +31,28 @@ const queryClient = new QueryClient();
 // MEMO: temporarily removed React.StrictMode. We should add back when react-spectrum handles
 // it across their library. (Issue: https://github.com/adobe/react-spectrum/issues/779#issuecomment-1353734729)
 ReactDOM.render(
-  <Router>
-    <QueryClientProvider client={queryClient}>
-      <HelmetProvider>
-        <Provider store={store}>
-          <SubstrateProvider>
-            <ThemeWrapper>
-              <SubstrateLoadingAndErrorHandlingWrapper>
-                <Subscriptions>
-                  <OverlayProvider>
-                    <App />
-                  </OverlayProvider>
-                </Subscriptions>
-              </SubstrateLoadingAndErrorHandlingWrapper>
-            </ThemeWrapper>
-          </SubstrateProvider>
-        </Provider>
-      </HelmetProvider>
-      <ReactQueryDevtools initialIsOpen={false} />
-    </QueryClientProvider>
-  </Router>,
+  <GeoblockingWrapper>
+    <Router>
+      <QueryClientProvider client={queryClient}>
+        <HelmetProvider>
+          <Provider store={store}>
+            <SubstrateProvider>
+              <ThemeWrapper>
+                <SubstrateLoadingAndErrorHandlingWrapper>
+                  <Subscriptions>
+                    <OverlayProvider>
+                      <App />
+                    </OverlayProvider>
+                  </Subscriptions>
+                </SubstrateLoadingAndErrorHandlingWrapper>
+              </ThemeWrapper>
+            </SubstrateProvider>
+          </Provider>
+        </HelmetProvider>
+        <ReactQueryDevtools initialIsOpen={false} />
+      </QueryClientProvider>
+    </Router>
+  </GeoblockingWrapper>,
   document.getElementById('root')
 );
 

src/utils/hooks/use-geoblocking.ts

@@ -0,0 +1,22 @@
+import { useEffect } from 'react';
+
+import { GEOBLOCK_API_ENDPOINT, GEOBLOCK_REDIRECTION_LINK } from '@/config/links';
+
+const useGeoblocking = (): void => {
+  useEffect(() => {
+    const checkCountry = async () => {
+      try {
+        const response = await fetch(GEOBLOCK_API_ENDPOINT);
+        if (response.status === 403) {
+          console.log('Access from forbidden country detected, user will be redirected.');
+          window.location.replace(GEOBLOCK_REDIRECTION_LINK);
+        }
+      } catch (error) {
+        console.log(error);
+      }
+    };
+    checkCountry();
+  }, []);
+};
+
+export { useGeoblocking };