Ready: Add accept terms and conditions pop-up to Vortex

src/components/Dialog/index.tsx

@@ -5,7 +5,7 @@ import { CloseButton } from '../buttons/CloseButton';
 
 interface DialogProps {
   visible: boolean;
-  onClose: () => void;
+  onClose?: () => void;
   headerText?: string;
   content: JSX.Element;
   actions?: JSX.Element;
@@ -14,10 +14,23 @@ interface DialogProps {
     className?: string;
   };
   id?: string;
+  disableNativeEvents?: boolean;
+  hideCloseButton?: boolean;
 }
 
-export const Dialog: FC<DialogProps> = ({ visible, onClose, headerText, content, actions, id, form }) => {
+export const Dialog: FC<DialogProps> = ({
+  visible,
+  onClose,
+  headerText,
+  content,
+  actions,
+  id,
+  form,
+  disableNativeEvents = false,
+  hideCloseButton = false,
+}) => {
   const ref = useRef<HTMLDialogElement>(null);
+  const dialog = ref.current;
 
   // If it was the form submission we want to only close the dialog without calling onClose
   const [isSubmitting, setIsSubmitting] = useState(false);
@@ -31,7 +44,7 @@ export const Dialog: FC<DialogProps> = ({ visible, onClose, headerText, content,
       }
 
       dialog.close();
-      onClose();
+      onClose && onClose();
     },
     [isSubmitting, onClose],
   );
@@ -45,7 +58,6 @@ export const Dialog: FC<DialogProps> = ({ visible, onClose, headerText, content,
 
   // Manage native <dialog> events and visibility
   useEffect(() => {
-    const dialog = ref.current;
     if (dialog) {
       dialog.addEventListener('close', closeListener);
       if (visible && !dialog.open) {
@@ -58,7 +70,25 @@ export const Dialog: FC<DialogProps> = ({ visible, onClose, headerText, content,
         dialog.removeEventListener('close', closeListener);
       };
     }
-  }, [visible, closeListener, headerText]);
+  }, [visible, closeListener, headerText, dialog]);
+
+  // This useEffect handles disableNativeEvents ( prevents the dialog from closing on Escape key press )
+  useEffect(() => {
+    if (!disableNativeEvents || !dialog) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (disableNativeEvents && e.key === 'Escape') {
+        e.preventDefault();
+        return;
+      }
+    };
+
+    dialog.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      dialog.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [disableNativeEvents, headerText, dialog]);
 
   const handleFormSubmit = (event: Event) => {
     if (form) {
@@ -79,9 +109,14 @@ export const Dialog: FC<DialogProps> = ({ visible, onClose, headerText, content,
   );
 
   return createPortal(
-    <Modal className={`bg-base-200 border border-[--modal-border]`} id={id} ref={ref}>
+    <Modal
+      className={`bg-base-200 border border-[--modal-border]`}
+      id={id}
+      ref={ref}
+      aria-labelledby={headerText ? `${id}-header` : undefined}
+    >
       <Modal.Header className={`text-2xl claim-title flex mb-5 ${headerText ? 'justify-between' : 'justify-end'}`}>
-        {headerText} <CloseButton onClick={onClose} />
+        {headerText} {hideCloseButton ? <></> : <CloseButton onClick={onClose} />}
       </Modal.Header>
       {form ? (
         <form onSubmit={handleFormSubmit} className={form.className} formMethod="dialog">

src/components/TermsAndConditions/index.tsx

@@ -0,0 +1,50 @@
+import { useState } from 'preact/compat';
+import { Button, Checkbox, Link } from 'react-daisyui';
+import { useLocalStorage } from '../../hooks/useLocalStorage';
+import { Dialog } from '../Dialog';
+
+export const TermsAndConditions = () => {
+  const { set, state } = useLocalStorage<string | undefined>({ key: 'TERMS_AND_CONDITIONS' });
+  const [checked, setChecked] = useState<boolean>(false);
+
+  const acceptTerms = () => {
+    set('accepted');
+  };
+
+  const content = (
+    <>
+      <div className="mb-5 text-lg">
+        <Link
+          style={{ textDecoration: 'underline' }}
+          color="accent"
+          target="_blank"
+          rel="noreferrer"
+          href="https://www.vortexfinance.co/terms-conditions"
+        >
+          View Terms and Conditions
+        </Link>
+      </div>
+      <div className="flex text-lg">
+        <Checkbox checked={checked} onClick={() => setChecked(!checked)} color="primary" size="md" />
+        <span className="pl-2">I have read and accept the terms and conditions</span>
+      </div>
+    </>
+  );
+
+  const actions = (
+    <Button className="w-full px-12 text-thin" color="primary" onClick={acceptTerms} disabled={!checked}>
+      Agree
+    </Button>
+  );
+
+  return (
+    <Dialog
+      content={content}
+      headerText="T&Cs"
+      visible={!state}
+      actions={actions}
+      hideCloseButton={true}
+      disableNativeEvents={true}
+    />
+  );
+};

src/pages/swap/index.tsx

@@ -23,6 +23,7 @@ import { useMainProcess } from '../../hooks/useMainProcess';
 import { ProgressPage } from '../progress';
 import { SuccessPage } from '../success';
 import { FailurePage } from '../failure';
+import { TermsAndConditions } from '../../components/TermsAndConditions';
 import { useInputTokenBalance } from '../../hooks/useInputTokenBalance';
 import { UserBalance } from '../../components/UserBalance';
 
@@ -209,13 +210,17 @@ export const SwapPage = () => {
         }));
 
   const modals = (
-    <PoolSelectorModal
-      open={!!modalType}
-      onSelect={modalType === 'from' ? onFromChange : onToChange}
-      definitions={definitions}
-      selected={modalType === 'from' ? from : to}
-      onClose={() => setModalType(undefined)}
-    />
+    <>
+      <TermsAndConditions />
+      <PoolSelectorModal
+        open={!!modalType}
+        onSelect={modalType === 'from' ? onFromChange : onToChange}
+        definitions={definitions}
+        selected={modalType === 'from' ? from : to}
+        onClose={() => setModalType(undefined)}
+        isLoading={false}
+      />
+    </>
   );
 
   if (offrampingPhase === 'success') {