feat: OFAC provider (#1852)

Co-authored-by: drewstone <[email protected]>

libs/api-provider-environment/src/OFACFilterProvider.tsx

@@ -0,0 +1,57 @@
+import { useState, useEffect, type FC, type PropsWithChildren } from 'react';
+import { OFACModal } from '@webb-tools/webb-ui-components';
+
+export type OFACFilterProviderProps = {
+  isActivated: boolean;
+  blockedCountryCodes: string[];
+  blockedRegions: string[];
+};
+
+/**
+ * Provider to block users from OFAC countries to access the website
+ */
+const OFACFilterProvider: FC<PropsWithChildren<OFACFilterProviderProps>> = ({
+  children,
+  isActivated,
+  blockedCountryCodes,
+  blockedRegions,
+}) => {
+  const [isOFAC, setIsOFAC] = useState(false);
+  const [isFetching, setIsFetching] = useState(false);
+
+  useEffect(() => {
+    if (!isActivated) return;
+
+    setIsFetching(true);
+    fetch('https://geolocation-db.com/json/')
+      .then((response) => response.json())
+      .then((data) => {
+        if (
+          blockedCountryCodes?.includes(data.country_code) ||
+          blockedRegions?.includes(data.state)
+        ) {
+          setIsOFAC(true);
+        }
+      })
+      .catch((error) => console.log(error))
+      .finally(() => {
+        setIsFetching(false);
+      });
+  }, []);
+
+  if (isFetching) {
+    return null;
+  }
+
+  if (isOFAC) {
+    return (
+      <div className="flex items-center justify-center w-screen h-screen">
+        <OFACModal />
+      </div>
+    );
+  }
+
+  return children;
+};
+
+export default OFACFilterProvider;

libs/api-provider-environment/src/index.ts

@@ -1,4 +1,5 @@
 export { default as NextThemeProvider } from './NextThemeProvider';
+export { default as OFACFilterProvider } from './OFACFilterProvider';
 export { default as RequireNoteAccountRoute } from './RequireNoteAccountRoute';
 export * from './RouterProvider';
 export * from './WebbProvider';

libs/webb-ui-components/src/components/OFACModal/OFACModal.tsx

@@ -0,0 +1,64 @@
+import { type FC } from 'react';
+import { Button } from '../buttons';
+import { Typography } from '../../typography';
+
+import { SOCIAL_URLS_RECORD } from '../../constants';
+
+const contactUs = SOCIAL_URLS_RECORD.telegram;
+const reportIssueLink = `${SOCIAL_URLS_RECORD.github}/webb-dapp/issues/new/choose`;
+
+/**
+ * Modal to show when user is accessing the website from a country in OFAC list
+ */
+const OFACModal: FC = () => {
+  return (
+    <div className="bg-mono-0 dark:bg-mono-180 p-6 rounded-lg max-w-lg space-y-4">
+      <Typography variant="h5" fw="black" ta="center">
+        OFAC Restricted
+      </Typography>
+
+      <div className="w-4/5 mx-auto flex flex-col items-center gap-4">
+        <Typography variant="body2" fw="semibold" ta="center">
+          You are accessing the website from a country in Office of Foreign
+          Assets Control (OFAC) list. Access to this website is restricted.
+        </Typography>
+
+        <div className="inline-block text-center">
+          If you find any issue, please{' '}
+          <Button
+            href={contactUs}
+            target="_blank"
+            rel="noopener noreferrer"
+            variant="link"
+            className="inline-block"
+          >
+            contact us
+          </Button>{' '}
+          or report the issue.
+        </div>
+      </div>
+
+      <div className="flex items-center justify-center gap-2">
+        <Button
+          onClick={() => window.location.reload()}
+          size="sm"
+          className="px-3 py-2 rounded-lg"
+        >
+          Refresh Page
+        </Button>
+        <Button
+          target="_blank"
+          rel="noopener noreferrer"
+          size="sm"
+          href={reportIssueLink}
+          variant="secondary"
+          className="px-3 py-2 rounded-lg"
+        >
+          Report Issue
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default OFACModal;

libs/webb-ui-components/src/components/OFACModal/index.ts

@@ -0,0 +1,3 @@
+import { default as OFACModal } from './OFACModal';
+
+export default OFACModal;

libs/webb-ui-components/src/components/index.ts

@@ -49,6 +49,7 @@ export * from './Navbar';
 export * from './NavigationMenu';
 export * from './NetworkThresholdsCard';
 export * from './Notification';
+export { default as OFACModal } from './OFACModal';
 export * from './Pagination';
 export * from './Popover';
 export * from './Progress';

libs/webb-ui-components/src/stories/molecules/OFACModal.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import OFACModal from '../../components/OFACModal';
+
+const meta: Meta<typeof OFACModal> = {
+  title: 'Design System/Molecules/OFACModal',
+  component: OFACModal,
+};
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default meta;
+
+type Story = StoryObj<typeof OFACModal>;
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+export const Default: Story = {
+  render: () => <OFACModal />,
+};