Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 3 commits into from
Nov 15, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 16 additions & 2 deletions apps/shared/dialog/Dialog.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
7 changes: 7 additions & 0 deletions apps/shared/hooks/useDialog.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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>;
Expand All @@ -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) => {
Expand All @@ -40,6 +46,7 @@ export function useDialog<Param = void, Return = void>(
...props,
closeDialog,
}),
...overrideProps,
});
return component;
});
Expand Down
11 changes: 11 additions & 0 deletions apps/warp-protocol/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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();

Expand All @@ -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}>
Expand Down
11 changes: 7 additions & 4 deletions apps/warp-protocol/src/components/dialog/DialogHeader.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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();

Expand All @@ -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>
Expand Down
Original file line number Diff line number Diff line change
@@ -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
Original file line number Diff line number Diff line change
@@ -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);
};
Loading