feat: geo fence

- add geo fence modal provider
- add Dialog styles to theme WIP🚧
- move checkbox icons to theme lib
- set default checkbox icons through theme

apps/oeth/src/main.tsx

@@ -8,6 +8,7 @@ import { Experimental_CssVarsProvider as CssVarsProvider } from '@mui/material';
 import { chains, queryClient, wagmiConfig } from '@origin/oeth/shared';
 import {
   CurveProvider,
+  GeoFenceProvider,
   NotificationsProvider,
   registerChart,
 } from '@origin/shared/providers';
@@ -42,6 +43,7 @@ root.render(
       [RainbowKitProvider, { chains: chains, theme: darkTheme() }],
       [CurveProvider],
       [NotificationsProvider],
+      [GeoFenceProvider],
     ],
     <RouterProvider router={createHashRouter(routes)} />,
   ),

libs/oeth/history/src/components/HistoryFilters.tsx

@@ -11,7 +11,6 @@ import {
   Typography,
   useTheme,
 } from '@mui/material';
-import { CheckboxIcon, EmptyCheckbox } from '@origin/shared/components';
 import { isNilOrEmpty } from '@origin/shared/utils';
 import { defineMessage, useIntl } from 'react-intl';
 
@@ -125,8 +124,6 @@ export function HistoryFilters({ filters, onChange }: HistoryFiltersProps) {
                 <Checkbox
                   checked={selected.includes(filter.value)}
                   onChange={(e) => handleSelect(e, filter.value)}
-                  checkedIcon={<CheckboxIcon />}
-                  icon={<EmptyCheckbox />}
                   sx={{
                     ':hover': {
                       backgroundColor: 'transparent',

libs/shared/components/src/index.ts

@@ -7,4 +7,3 @@ export * from './Loader';
 export * from './MiddleTruncated';
 export * from './Mix';
 export * from './top-nav';
-export * from './Checkbox';

libs/shared/providers/src/geoFence/components/GeoFenceProvider.tsx

@@ -0,0 +1,123 @@
+import { useState } from 'react';
+
+import {
+  Button,
+  Checkbox,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  Divider,
+  FormControlLabel,
+  Stack,
+  Typography,
+} from '@mui/material';
+import { useLocalStorageValue } from '@react-hookz/web';
+import { useIntl } from 'react-intl';
+
+import type { ReactNode } from 'react';
+
+export type GeoFenceProviderProps = { children: ReactNode };
+
+export const GeoFenceProvider = ({ children }: GeoFenceProviderProps) => {
+  const intl = useIntl();
+  const [checked, setChecked] = useState(false);
+  const { value: geoCheck, set: setGeoCheck } = useLocalStorageValue(
+    '@originprotocol/oeth-geo-check',
+    {
+      defaultValue: false,
+    },
+  );
+
+  return (
+    <>
+      {children}
+      <Dialog open={!geoCheck} maxWidth="sm">
+        <DialogTitle>
+          {intl.formatMessage({ defaultMessage: 'Restricted Access' })}
+        </DialogTitle>
+        <Divider />
+        <DialogContent>
+          <DialogContentText>
+            {intl.formatMessage({
+              defaultMessage: `The Origin Ether dapp is not available to restricted jurisdictions. Before proceeding, please carefully read the following:`,
+            })}
+          </DialogContentText>
+          <Stack
+            component="ul"
+            sx={{
+              backgroundColor: 'grey.800',
+              my: 3,
+              pl: 5,
+              pr: 3,
+              py: 3,
+              borderRadius: 1,
+            }}
+            spacing={3}
+          >
+            <Typography component="li" variant="body2">
+              {intl.formatMessage({
+                defaultMessage: `You confirm that you are not a resident of, citizen of, located in, incorporated in, or have a registered office in the United States or any country or region currently currently subject to sanctions by the United States.`,
+              })}
+            </Typography>
+            <Typography component="li" variant="body2">
+              {intl.formatMessage({
+                defaultMessage: `You affirm that you are not a subject of economic or trade sanctions administered or enforced by any governmental authority or otherwise designated on any list of prohibited or restricted parties, including the list maintained by the Office of Foreign Assets Control of the U.S. Department of the Treasury.`,
+              })}
+            </Typography>
+            <Typography component="li" variant="body2">
+              {intl.formatMessage({
+                defaultMessage: `You agree not to use any VPN or other privacy or anonymization tools or techniques to attempt to circumvent these eligibility restrictions.`,
+              })}
+            </Typography>
+            <Typography component="li" variant="body2">
+              {intl.formatMessage({
+                defaultMessage: `You are lawfully permitted to access this site. You understand and accept the risks associated with using Origin Ether.`,
+              })}
+            </Typography>
+          </Stack>
+          <FormControlLabel
+            label={intl.formatMessage({
+              defaultMessage: 'I have read and agree to the above terms',
+            })}
+            onChange={(_, val) => {
+              setChecked(val);
+            }}
+            control={<Checkbox checked={checked} />}
+            sx={{ pl: 0.2 }}
+          />
+        </DialogContent>
+        <DialogActions sx={{ gap: 3, px: 3, pb: 3 }}>
+          <Button
+            href="https://oeth.com"
+            variant="action"
+            fullWidth
+            sx={{
+              fontSize: 16,
+              borderRadius: 8,
+              padding: 1,
+            }}
+          >
+            {intl.formatMessage({ defaultMessage: 'Exit' })}
+          </Button>
+          <Button
+            disabled={!checked}
+            variant="action"
+            fullWidth
+            onClick={() => {
+              setGeoCheck(true);
+            }}
+            sx={{
+              fontSize: 16,
+              borderRadius: 8,
+              padding: 1,
+            }}
+          >
+            {intl.formatMessage({ defaultMessage: 'I agree' })}
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  );
+};

libs/shared/providers/src/geoFence/index.ts

@@ -0,0 +1 @@
+export * from './components/GeoFenceProvider';

libs/shared/providers/src/index.ts

@@ -1,6 +1,7 @@
 export * from './chart';
 export * from './curve';
 export * from './gas';
+export * from './geoFence';
 export * from './notifications';
 export * from './prices';
 export * from './wagmi';

libs/shared/theme/src/theme.tsx

@@ -2,6 +2,9 @@ import { alpha, Box } from '@mui/material';
 import { experimental_extendTheme as extendTheme } from '@mui/material/styles';
 import shadows from '@mui/material/styles/shadows';
 
+import { CheckboxIcon } from './components/CheckboxIcon';
+import { EmptyCheckbox } from './components/EmptyCheckbox';
+
 export const theme = extendTheme({
   colorSchemes: {
     dark: {
@@ -38,7 +41,8 @@ export const theme = extendTheme({
         },
         action: {
           hoverOpacity: 0.1,
-          disabledOpacity: 0.3,
+          disabledOpacity: 0.5,
+          disabled: alpha('#FAFBFB', 0.5),
         },
         text: {
           primary: '#FAFBFB',
@@ -178,7 +182,7 @@ export const theme = extendTheme({
           style: ({ theme }) => ({
             background: theme.palette.background.gradient1,
             color: theme.palette.text.primary,
-            paddingBlock: 16,
+            padding: theme.spacing(2),
             fontSize: theme.typography.pxToRem(20),
             lineHeight: '2rem',
             borderRadius: theme.shape.borderRadius * 2,
@@ -190,8 +194,7 @@ export const theme = extendTheme({
               opacity: 1,
             },
             '&:disabled': {
-              background: `linear-gradient(90deg, ${theme.palette.primary.main} 0%, ${theme.palette.primary.dark} 100%)`,
-              opacity: 0.3,
+              opacity: 0.5,
               color: theme.palette.text.primary,
             },
           }),
@@ -239,6 +242,19 @@ export const theme = extendTheme({
         }),
       },
     },
+    MuiCheckbox: {
+      defaultProps: {
+        checkedIcon: <CheckboxIcon />,
+        icon: <EmptyCheckbox />,
+      },
+      styleOverrides: {
+        root: ({ theme }) => ({
+          ':hover': {
+            backgroundColor: 'transparent',
+          },
+        }),
+      },
+    },
     MuiCssBaseline: {
       styleOverrides: `
           body {
@@ -262,6 +278,27 @@ export const theme = extendTheme({
         transitionDuration: 0,
         disableScrollLock: true,
       },
+      styleOverrides: {
+        paper: ({ theme }) => ({
+          borderRadius: theme.shape.borderRadius * 2,
+        }),
+      },
+    },
+    MuiDialogTitle: {
+      styleOverrides: {
+        root: ({ theme }) => ({
+          py: 3,
+          fontSize: 16,
+          fontWeight: 700,
+          lineHeight: '28px',
+          color: theme.palette.text.primary,
+        }),
+      },
+    },
+    MuiDialogContentText: {
+      styleOverrides: {
+        root: ({ theme }) => ({ color: theme.palette.text.primary }),
+      },
     },
     MuiFormControl: {
       styleOverrides: {