Merge pull request #934 from TempleDAO/stage

Create geoblock notification popup (#933)
TempleDAO · Dec 15, 2023 · f20d4cf · f20d4cf
2 parents 59f8baa + d71fe28
commit f20d4cf
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 0 deletions.
diff --git a/apps/dapp/src/components/Layouts/V2Layout/index.tsx b/apps/dapp/src/components/Layouts/V2Layout/index.tsx
@@ -15,6 +15,7 @@ import Payments from 'assets/icons/payments.svg?react';
 import Candle from 'assets/icons/candle.svg?react';
 import Restore from 'assets/icons/restore.svg?react';
 import { useGeoBlocked } from 'hooks/use-geo-blocked';
+import GeoblockModal from 'components/Popover/GeoblockModal';
 
 export type MenuNavItem = {
   label: string;
@@ -40,6 +41,7 @@ const V2Layout = () => {
   const loc = useLocation();
   const navigate = useNavigate();
   const { isBlocked, loading } = useGeoBlocked();
+  const [geoblockModalOpen, setGeoblockModalOpen] = useState(false);
   const [menuNavItems, setMenuNavItems] = useState<Array<MenuNavItem>>([
     {
       label: 'Trade',
@@ -89,6 +91,7 @@ const V2Layout = () => {
         permittedPaths.find((path) => path === menuItem.linkTo)
       );
       setMenuNavItems(newMenuNavItems);
+      setGeoblockModalOpen(true);
     }
   }, [loading, isBlocked, loc, navigate, menuNavItems]);
 
@@ -113,6 +116,7 @@ const V2Layout = () => {
           <MobileNav menuNavItems={menuNavItems} onSelectMenuNavItems={onSelectMenuNavItems} />
         )}
         <Content>
+          <GeoblockModal isOpen={geoblockModalOpen} onClose={() => setGeoblockModalOpen(false)} />
           <Outlet />
         </Content>
       </MainContainer>

diff --git a/apps/dapp/src/components/Popover/GeoblockModal.tsx b/apps/dapp/src/components/Popover/GeoblockModal.tsx
@@ -0,0 +1,66 @@
+import { Popover } from 'components/Popover';
+import styled from 'styled-components';
+import { Button } from 'components/Button/Button';
+import { Link } from 'react-router-dom';
+
+interface IProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export const GeoblockModal: React.FC<IProps> = ({ isOpen, onClose }) => {
+  return (
+    <>
+      <Popover isOpen={isOpen} onClose={onClose} closeOnClickOutside showCloseButton>
+        <ModalContainer>
+          <Title>Access Restricted</Title>
+          <Subtitle>
+            You are accessing the website from a prohibited jurisdiction in violation of our{' '}
+            <Link to="/disclaimer">Terms and Conditions</Link>. The dApp will only permit you to exit your legacy TEMPLE
+            position where applicable.
+          </Subtitle>
+          <ConsentButton onClick={onClose}>I Understand</ConsentButton>
+        </ModalContainer>
+      </Popover>
+    </>
+  );
+};
+
+const ConsentButton = styled(Button)`
+  background: ${({ theme }) => theme.palette.gradients.dark};
+  color: ${({ theme }) => theme.palette.brandLight};
+  border: 1px solid #95613f;
+  box-shadow: 0px 0px 20px rgba(222, 92, 6, 0.4);
+  border-radius: 0.75rem;
+  font-weight: 700;
+  font-size: 1rem;
+  letter-spacing: 0.1rem;
+  text-transform: uppercase;
+  width: max-content;
+  margin: 1rem auto;
+  height: max-content;
+  padding: 0.5rem 1rem;
+`;
+
+const Subtitle = styled.div`
+  color: ${({ theme }) => theme.palette.brand};
+  letter-spacing: 0.05rem;
+  line-height: 1.25rem;
+`;
+
+const Title = styled.div`
+  font-size: 1.5rem;
+  padding-bottom: 1rem;
+  color: ${({ theme }) => theme.palette.brandLight};
+`;
+
+const ModalContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  text-align: center;
+  color: ${({ theme }) => theme.palette.brand};
+  width: 350px;
+`;
+
+export default GeoblockModal;