diff --git a/src/components/Geoblock/Geoblock.tsx b/src/components/Geoblock/Geoblock.tsx new file mode 100644 index 0000000000..43493562d3 --- /dev/null +++ b/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 }; diff --git a/src/config/links.ts b/src/config/links.ts index 8f1d7557b1..b2d84b6a02 100644 --- a/src/config/links.ts +++ b/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, diff --git a/src/index.tsx b/src/index.tsx index 4a8ef1ba46..4901f7d9a1 100644 --- a/src/index.tsx +++ b/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( - - - - - - - - - - - - - - - - - - - - , + + + + + + + + + + + + + + + + + + + + + + , document.getElementById('root') ); diff --git a/src/utils/hooks/use-geoblocking.ts b/src/utils/hooks/use-geoblocking.ts new file mode 100644 index 0000000000..6ca37d3a02 --- /dev/null +++ b/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 };