Merge pull request #98 from JoshuaBrigati/terms-of-use-modal

added a terms of use modal that a user has to accept to access the app

apps/shared/dialog/Dialog.tsx

@@ -8,15 +8,29 @@ interface DialogProps {
   index: number;
   closeDialog: (returnValue: any) => void;
   children: ReactNode;
+  noBackgroundClick?: boolean;
 }
 
 export const Dialog = (props: DialogProps) => {
-  const { index, closeDialog, children } = props;
+  const { index, closeDialog, children, noBackgroundClick } = props;
 
   const { dialogs } = useDialogContext();
 
+  const handleClose = (event: React.MouseEvent<HTMLDivElement>, reason: string) => {
+    if (reason !== 'backdropClick') {
+      closeDialog(undefined);
+    }
+  }
+
   return (
-    <Modal className={styles.root} open={true} hideBackdrop={index > 0} onClose={() => closeDialog(undefined)}>
+    <Modal
+      className={styles.root}
+      open={true}
+      hideBackdrop={index > 0}
+      onClose={noBackgroundClick ? handleClose : () => closeDialog(undefined)}
+      disableEnforceFocus={noBackgroundClick && true}
+      disableEscapeKeyDown={noBackgroundClick && true}
+    >
       <div
         className={classNames(styles.content, {
           [styles.hide]: index < dialogs.length - 1,

apps/shared/hooks/useDialog.ts

@@ -7,6 +7,7 @@ type CloseDialog<Return> = (returnValue: Return | undefined, opts?: Partial<{ cl
 
 export type DialogProps<Param = void, Return = void> = Param & {
   closeDialog: CloseDialog<Return>;
+  noBackgroundClick?: boolean;
 };
 
 export type OpenDialog<Param = void, Return = void> = (p: Param) => Promise<Return>;
@@ -18,6 +19,11 @@ export function useDialog<Param = void, Return = void>(
 
   const openDialog: OpenDialog<any, Return | undefined> = useCallback(
     async (props: Param) => {
+      const overrideProps: { noBackgroundClick?: boolean } = {};
+      if (props && typeof props === 'object' && 'noBackgroundClick' in props) {
+        overrideProps.noBackgroundClick = props.noBackgroundClick as boolean;
+      }
+
       const { pushDialog, popDialog, popAllDialogs } = context;
 
       return new Promise<Return | undefined>((resolve) => {
@@ -40,6 +46,7 @@ export function useDialog<Param = void, Return = void>(
               ...props,
               closeDialog,
             }),
+            ...overrideProps,
           });
           return component;
         });

apps/warp-protocol/src/App.tsx

@@ -20,6 +20,8 @@ import { TemplateNew } from 'pages/template-new/TemplateNew';
 import { TemplatesPage } from 'pages/templates';
 import { useWalletDefaultNetworks } from 'hooks/useWalletDefaultNetworks';
 import { ChainSelectorProvider } from '@terra-money/apps/hooks';
+import { useTermsOfUseDialog } from 'components/dialog/terms-of-use/TermsOfUseDialog';
+import { useEffect } from 'react';
 
 const queryClient = new QueryClient();
 
@@ -45,9 +47,18 @@ const Main = () => {
 };
 
 const Inner = () => {
+  const openTermsOfUseDialog = useTermsOfUseDialog();
   const [theme] = useTheme();
   const walletDefaultNetworks = useWalletDefaultNetworks();
 
+  useEffect(() => {
+    const accepted = localStorage.getItem('TermsOfUseAccepted_Oct-3-2023');
+    if (!accepted) {
+      openTermsOfUseDialog({ noBackgroundClick: true });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   // TODO: check later if chainOptions would cause a flicker due to being null for first couple of calls
   return walletDefaultNetworks ? (
     <WalletProvider defaultNetworks={walletDefaultNetworks}>

apps/warp-protocol/src/components/dialog/DialogHeader.tsx

@@ -8,10 +8,11 @@ import { useDialogContext } from '@terra-money/apps/dialog';
 interface DialogHeaderProps extends UIElementProps {
   title: string;
   onClose: () => void;
+  hideCloseIcon?: boolean;
 }
 
 export const DialogHeader = (props: DialogHeaderProps) => {
-  const { className, title, children, onClose } = props;
+  const { className, title, children, onClose, hideCloseIcon } = props;
 
   const { dialogs, popDialog } = useDialogContext();
 
@@ -22,9 +23,11 @@ export const DialogHeader = (props: DialogHeaderProps) => {
           Back
         </Link>
       )}
-      <div className={styles.close} onClick={onClose}>
-        <CloseIcon className={styles.close_icon} />
-      </div>
+      {!hideCloseIcon && (
+        <div className={styles.close} onClick={onClose}>
+          <CloseIcon className={styles.close_icon} />
+        </div>
+      )}
       <Text className={styles.title} variant="heading1">
         {title}
       </Text>

apps/warp-protocol/src/components/dialog/terms-of-use/TermsOfUseDialog.module.sass

@@ -0,0 +1,31 @@
+.container__override
+  display: inline
+
+.text__override
+  display: inline
+
+.link
+  text-decoration: none
+  display: inline-block
+  line-height: 1
+  min-height: unset
+
+.checkbox__override
+  padding: 0px !important
+  svg
+    fill: var(--button-color-secondary)
+
+.modal__root
+  display: flex
+
+.content
+  background: var(--dialog-background-color)
+  position: relative
+  width: 520px
+  z-index: 10000
+  margin: auto
+  min-width: 520px
+  &:focus-visible
+    outline: none
+  &.hide
+    opacity: 0

apps/warp-protocol/src/components/dialog/terms-of-use/TermsOfUseDialog.tsx

@@ -0,0 +1,82 @@
+import { useState } from 'react';
+import { Checkbox } from '@mui/material';
+import { Button, Link, Text } from 'components/primitives';
+import { useDialog, DialogProps } from '@terra-money/apps/hooks';
+import { Container } from '@terra-money/apps/components';
+import { Dialog, DialogBody, DialogFooter, DialogHeader } from 'components/dialog';
+import styles from './TermsOfUseDialog.module.sass';
+
+type TermsOfUseDialogProps = {
+  noBackgroundClick?: boolean;
+};
+
+export const TermsOfUseDialog = (props: DialogProps<TermsOfUseDialogProps, boolean>) => {
+  const { closeDialog } = props;
+  const [checked, setChecked] = useState(false);
+
+  const handleAccept = () => {
+    localStorage.setItem('TermsOfUseAccepted_Oct-3-2023', 'true');
+    closeDialog(true, { closeAll: true });
+  };
+
+  return (
+    <Dialog className={styles.content}>
+      <DialogHeader title="Terms of Use" onClose={() => {}} hideCloseIcon={true} />
+      <DialogBody>
+        <Container component="p" className={styles.container__override}>
+          <Text className={styles.text__override} variant={'text'}>
+            Please check the box below to confirm your agreement to the{' '}
+          </Text>
+          <Link
+            onClick={() => {
+              window.open('https://drive.google.com/file/d/1A4B41Cy2lR0nQnlAVLGgjNcFParcbnA_/view?usp=drive_link');
+            }}
+            className={styles.link}
+          >
+            Terms of Use
+          </Link>
+          <Text className={styles.text__override} variant={'text'}>
+            {' '}
+            and{' '}
+          </Text>
+          <Link
+            onClick={() => {
+              window.open(
+                'https://assets.website-files.com/611153e7af981472d8da199c/631ac874c79cf645a2f9b5ee_PrivacyPolicy.pdf'
+              );
+            }}
+            className={styles.link}
+          >
+            Privacy Policy
+          </Link>
+        </Container>
+        <Container gap={8}>
+          <Checkbox
+            checked={checked}
+            onChange={() => setChecked(!checked)}
+            name="Confirm"
+            classes={{
+              root: styles.checkbox__override,
+            }}
+          />
+          <Text className={styles.text__override} variant={'text'}>
+            I have read and understand, and do hereby agree to be bound by the Terms of Use and Privacy Policy,
+            including all future amendments thereto.
+          </Text>
+        </Container>
+      </DialogBody>
+      <DialogFooter>
+        <Button disabled={!checked} variant="primary" onClick={handleAccept}>
+          Accept & Continue
+        </Button>
+        <Button variant="secondary" onClick={() => (window.location.href = 'https://warp.money/home')}>
+          Reject & Exit
+        </Button>
+      </DialogFooter>
+    </Dialog>
+  );
+};
+
+export const useTermsOfUseDialog = () => {
+  return useDialog<TermsOfUseDialogProps, boolean>(TermsOfUseDialog);
+};