From 078b8310568b74604cdb142b877cb266f77b6278 Mon Sep 17 00:00:00 2001
From: Kacper Szarkiewicz <szarkiewiczmail@gmail.com>
Date: Fri, 16 Aug 2024 12:57:35 +0200
Subject: [PATCH 1/3] handle disableNativeEvents, hideCloseButton and onClose
 optional in Dialog component

---
 src/components/Dialog/index.tsx | 49 ++++++++++++++++++++++++++++-----
 1 file changed, 42 insertions(+), 7 deletions(-)

diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx
index 99c6c9df..a172dd5f 100644
--- a/src/components/Dialog/index.tsx
+++ b/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">

From 1e31a45568c9e838f1b57ff4dc1407031c7e31d2 Mon Sep 17 00:00:00 2001
From: Kacper Szarkiewicz <szarkiewiczmail@gmail.com>
Date: Fri, 16 Aug 2024 13:03:13 +0200
Subject: [PATCH 2/3] Add Terms and Conditions dialog

---
 src/components/TermsAndConditions/index.tsx | 50 +++++++++++++++++++++
 src/pages/swap/index.tsx                    | 20 +++++----
 2 files changed, 62 insertions(+), 8 deletions(-)
 create mode 100644 src/components/TermsAndConditions/index.tsx

diff --git a/src/components/TermsAndConditions/index.tsx b/src/components/TermsAndConditions/index.tsx
new file mode 100644
index 00000000..4a6d9b08
--- /dev/null
+++ b/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://pendulumchain.org/legal/portal-terms-and-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}
+    />
+  );
+};
diff --git a/src/pages/swap/index.tsx b/src/pages/swap/index.tsx
index 643ef64c..6112cea9 100644
--- a/src/pages/swap/index.tsx
+++ b/src/pages/swap/index.tsx
@@ -22,6 +22,7 @@ import { multiplyByPowerOfTen, stringifyBigWithSignificantDecimals } from '../..
 import { ProgressPage } from '../progress';
 import { SuccessPage } from '../success';
 import { FailurePage } from '../failure';
+import { TermsAndConditions } from '../../components/TermsAndConditions';
 
 const Arrow = () => (
   <div className="flex justify-center w-full my-5">
@@ -189,14 +190,17 @@ export const SwapPage = () => {
         }));
 
   const modals = (
-    <PoolSelectorModal
-      open={!!modalType}
-      onSelect={modalType === 'from' ? onFromChange : onToChange}
-      definitions={definitions}
-      selected={modalType === 'from' ? from : to}
-      onClose={() => setModalType(undefined)}
-      isLoading={false}
-    />
+    <>
+      <TermsAndConditions />
+      <PoolSelectorModal
+        open={!!modalType}
+        onSelect={modalType === 'from' ? onFromChange : onToChange}
+        definitions={definitions}
+        selected={modalType === 'from' ? from : to}
+        onClose={() => setModalType(undefined)}
+        isLoading={false}
+      />
+    </>
   );
 
   if (offrampingPhase === 'success') {

From 7a917aedcf079158d0b077402ca3e3f7280c84e4 Mon Sep 17 00:00:00 2001
From: Kacper Szarkiewicz <szarkiewiczmail@gmail.com>
Date: Fri, 8 Nov 2024 10:30:56 +0100
Subject: [PATCH 3/3] update t&c url

---
 src/components/TermsAndConditions/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/TermsAndConditions/index.tsx b/src/components/TermsAndConditions/index.tsx
index 4a6d9b08..89dce6b3 100644
--- a/src/components/TermsAndConditions/index.tsx
+++ b/src/components/TermsAndConditions/index.tsx
@@ -19,7 +19,7 @@ export const TermsAndConditions = () => {
           color="accent"
           target="_blank"
           rel="noreferrer"
-          href="https://pendulumchain.org/legal/portal-terms-and-conditions"
+          href="https://www.vortexfinance.co/terms-conditions"
         >
           View Terms and Conditions
         </Link>