From 8881ccc6f01efbb1061749426e4378f1f1bf39d6 Mon Sep 17 00:00:00 2001 From: toniocodo Date: Wed, 27 Sep 2023 23:14:14 +0200 Subject: [PATCH] feat: geo fence MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 | 2 + .../history/src/components/HistoryFilters.tsx | 3 - libs/shared/components/src/Checkbox/index.tsx | 2 - libs/shared/components/src/index.ts | 1 - .../geoFence/components/GeoFenceProvider.tsx | 123 ++++++++++++++++++ libs/shared/providers/src/geoFence/index.ts | 1 + libs/shared/providers/src/index.ts | 1 + .../src/components}/CheckboxIcon.tsx | 0 .../src/components}/EmptyCheckbox.tsx | 0 libs/shared/theme/src/theme.tsx | 45 ++++++- 10 files changed, 168 insertions(+), 10 deletions(-) delete mode 100644 libs/shared/components/src/Checkbox/index.tsx create mode 100644 libs/shared/providers/src/geoFence/components/GeoFenceProvider.tsx create mode 100644 libs/shared/providers/src/geoFence/index.ts rename libs/shared/{components/src/Checkbox => theme/src/components}/CheckboxIcon.tsx (100%) rename libs/shared/{components/src/Checkbox => theme/src/components}/EmptyCheckbox.tsx (100%) diff --git a/apps/oeth/src/main.tsx b/apps/oeth/src/main.tsx index 2076a176c..7a5c729ad 100644 --- a/apps/oeth/src/main.tsx +++ b/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], ], , ), diff --git a/libs/oeth/history/src/components/HistoryFilters.tsx b/libs/oeth/history/src/components/HistoryFilters.tsx index e12aa71fc..ce1635b64 100644 --- a/libs/oeth/history/src/components/HistoryFilters.tsx +++ b/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) { handleSelect(e, filter.value)} - checkedIcon={} - icon={} sx={{ ':hover': { backgroundColor: 'transparent', diff --git a/libs/shared/components/src/Checkbox/index.tsx b/libs/shared/components/src/Checkbox/index.tsx deleted file mode 100644 index b4fc50636..000000000 --- a/libs/shared/components/src/Checkbox/index.tsx +++ /dev/null @@ -1,2 +0,0 @@ -export * from './CheckboxIcon'; -export * from './EmptyCheckbox'; diff --git a/libs/shared/components/src/index.ts b/libs/shared/components/src/index.ts index 901526889..525e4f83b 100644 --- a/libs/shared/components/src/index.ts +++ b/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'; diff --git a/libs/shared/providers/src/geoFence/components/GeoFenceProvider.tsx b/libs/shared/providers/src/geoFence/components/GeoFenceProvider.tsx new file mode 100644 index 000000000..6060f724a --- /dev/null +++ b/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} + + + {intl.formatMessage({ defaultMessage: 'Restricted Access' })} + + + + + {intl.formatMessage({ + defaultMessage: `The Origin Ether dapp is not available to restricted jurisdictions. Before proceeding, please carefully read the following:`, + })} + + + + {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.`, + })} + + + {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.`, + })} + + + {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.`, + })} + + + {intl.formatMessage({ + defaultMessage: `You are lawfully permitted to access this site. You understand and accept the risks associated with using Origin Ether.`, + })} + + + { + setChecked(val); + }} + control={} + sx={{ pl: 0.2 }} + /> + + + + + + + + ); +}; diff --git a/libs/shared/providers/src/geoFence/index.ts b/libs/shared/providers/src/geoFence/index.ts new file mode 100644 index 000000000..9555bca9a --- /dev/null +++ b/libs/shared/providers/src/geoFence/index.ts @@ -0,0 +1 @@ +export * from './components/GeoFenceProvider'; diff --git a/libs/shared/providers/src/index.ts b/libs/shared/providers/src/index.ts index d1a15bb45..a2da75176 100644 --- a/libs/shared/providers/src/index.ts +++ b/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'; diff --git a/libs/shared/components/src/Checkbox/CheckboxIcon.tsx b/libs/shared/theme/src/components/CheckboxIcon.tsx similarity index 100% rename from libs/shared/components/src/Checkbox/CheckboxIcon.tsx rename to libs/shared/theme/src/components/CheckboxIcon.tsx diff --git a/libs/shared/components/src/Checkbox/EmptyCheckbox.tsx b/libs/shared/theme/src/components/EmptyCheckbox.tsx similarity index 100% rename from libs/shared/components/src/Checkbox/EmptyCheckbox.tsx rename to libs/shared/theme/src/components/EmptyCheckbox.tsx diff --git a/libs/shared/theme/src/theme.tsx b/libs/shared/theme/src/theme.tsx index 233abc702..04b61f3cb 100644 --- a/libs/shared/theme/src/theme.tsx +++ b/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: , + icon: , + }, + 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: {