From 3e0e9ebbb76b4be2ec69b02d4117d8db39daf101 Mon Sep 17 00:00:00 2001 From: Utkarsh <83659045+0xShuk@users.noreply.github.com> Date: Sat, 28 Sep 2024 20:48:24 +0700 Subject: [PATCH] feat: reject terms popup (#25) --- package.json | 2 ++ src/TermsPopupModal.tsx | 49 +++++++++++++++++++++++++++++++++++++++++ src/pages/index.tsx | 8 +++++++ yarn.lock | 38 ++++++++++++++++++++++++++++++-- 4 files changed, 95 insertions(+), 2 deletions(-) create mode 100644 src/TermsPopupModal.tsx diff --git a/package.json b/package.json index 6286447..2b3da0e 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "react": "^18.1.0", "react-dom": "^18.1.0", "react-icons": "^4.3.1", + "react-modal": "^3.16.1", "react-responsive": "^9.0.0-beta.8", "tailwind-merge": "^1.2.1" }, @@ -40,6 +41,7 @@ "@types/lodash": "^4.14.182", "@types/mixpanel-browser": "^2.38.0", "@types/react": "^18.0.9", + "@types/react-modal": "^3.16.3", "@types/tailwindcss": "^3.0.10", "@typescript-eslint/eslint-plugin": "^5.25.0", "@typescript-eslint/parser": "^5.25.0", diff --git a/src/TermsPopupModal.tsx b/src/TermsPopupModal.tsx new file mode 100644 index 0000000..f3ba809 --- /dev/null +++ b/src/TermsPopupModal.tsx @@ -0,0 +1,49 @@ +import { useState } from 'react'; +import Modal from 'react-modal'; + +const TermsPopupModal = () => { + const [openModal, setOpenModal] = useState(true); + + const customStyles = { + content: { + top: '50%', + left: '50%', + right: 'auto', + bottom: 'auto', + marginRight: '-50%', + transform: 'translate(-50%, -50%)', + background: '#222222', + border: 0, + borderRadius: '16px', + }, + overlay: { + backgroundColor: 'rgb(0,0,0,60%)', + }, + }; + + return ( +
+ setOpenModal(false)} + ariaHideApp={false} + > +
+

+ If you would like to discuss the changes to our policies, please + contact admin@realms.today +

+ +
+ +
+ ); +}; + +export default TermsPopupModal; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index dfdfb20..56fa743 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,3 +1,5 @@ +import { useRouter } from 'next/router'; + import usePageViewTracking from '@/hooks/usePageViewTracking'; import DAOStructures from '@/components/DAOStructures'; @@ -10,8 +12,13 @@ import RealmsCommunity from '@/components/RealmsCommunity'; import SolanaStandard from '@/components/SolanaStandard'; import TrackViewportEnter from '@/components/TrackViewportEnter'; +import TermsPopupModal from '@/TermsPopupModal'; + const Index = () => { usePageViewTracking('index'); + const { query } = useRouter(); + + const showPopup = query && query.terms && query.terms === 'rejected'; return (
@@ -37,6 +44,7 @@ const Index = () => {
); }; diff --git a/yarn.lock b/yarn.lock index 8b77749..8be6193 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2076,6 +2076,13 @@ dependencies: "@types/react" "*" +"@types/react-modal@^3.16.3": + version "3.16.3" + resolved "https://registry.yarnpkg.com/@types/react-modal/-/react-modal-3.16.3.tgz#250f32c07f1de28e2bcf9c3e84b56adaa6897013" + integrity sha512-xXuGavyEGaFQDgBv4UVm8/ZsG+qxeQ7f77yNrW3n+1J6XAstUy5rYHeIHPh1KzsGc6IkCIdu6lQ2xWzu1jBTLg== + dependencies: + "@types/react" "*" + "@types/react@*": version "18.0.6" resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.6.tgz#30206c3830af6ce8639b91ace5868bc2d3d1d96c" @@ -3946,6 +3953,11 @@ execa@^5.1.1: signal-exit "^3.0.3" strip-final-newline "^2.0.0" +exenv@^1.2.0: + version "1.2.2" + resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d" + integrity sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw== + exit@^0.1.2: version "0.1.2" resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c" @@ -5409,7 +5421,7 @@ log-update@^4.0.0: slice-ansi "^4.0.0" wrap-ansi "^6.2.0" -loose-envify@^1.1.0, loose-envify@^1.4.0: +loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf" integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q== @@ -6126,7 +6138,7 @@ prompts@^2.0.1: kleur "^3.0.3" sisteransi "^1.0.5" -prop-types@^15.6.1, prop-types@^15.8.1: +prop-types@^15.6.1, prop-types@^15.7.2, prop-types@^15.8.1: version "15.8.1" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== @@ -6188,6 +6200,21 @@ react-is@^17.0.1: resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0" integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w== +react-lifecycles-compat@^3.0.0: + version "3.0.4" + resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" + integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA== + +react-modal@^3.16.1: + version "3.16.1" + resolved "https://registry.yarnpkg.com/react-modal/-/react-modal-3.16.1.tgz#34018528fc206561b1a5467fc3beeaddafb39b2b" + integrity sha512-VStHgI3BVcGo7OXczvnJN7yT2TWHJPDXZWyI/a0ssFNhGZWsPmB8cF0z33ewDXq4VfYMO1vXgiv/g8Nj9NDyWg== + dependencies: + exenv "^1.2.0" + prop-types "^15.7.2" + react-lifecycles-compat "^3.0.0" + warning "^4.0.3" + react-responsive@^9.0.0-beta.8: version "9.0.0-beta.8" resolved "https://registry.yarnpkg.com/react-responsive/-/react-responsive-9.0.0-beta.8.tgz#10717874a3faffbba989cd741e07c5fb2d7bc080" @@ -7239,6 +7266,13 @@ walker@^1.0.7: dependencies: makeerror "1.0.12" +warning@^4.0.3: + version "4.0.3" + resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3" + integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w== + dependencies: + loose-envify "^1.0.0" + webidl-conversions@^5.0.0: version "5.0.0" resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-5.0.0.tgz#ae59c8a00b121543a2acc65c0434f57b0fc11aff"