Add agreement modal (#180)

packages/react-chat/package.json

@@ -22,8 +22,10 @@
     "proto:build": "buf generate"
   },
   "devDependencies": {
+    "@hcaptcha/react-hcaptcha": "^1.0.0",
     "@types/chai": "^4.2.21",
     "@types/emoji-mart": "^3.0.6",
+    "@types/hcaptcha__react-hcaptcha": "^0.1.5",
     "@types/mocha": "^9.0.0",
     "@types/node": "^16.9.6",
     "@types/qrcode.react": "^1.0.2",

packages/react-chat/src/components/Chat.tsx

@@ -9,6 +9,7 @@ import { ChatBody } from "./Chat/ChatBody";
 import { ChatCreation } from "./Chat/ChatCreation";
 import { Community } from "./Community";
 import { Members } from "./Members/Members";
+import { AgreementModal } from "./Modals/AgreementModal";
 import { CoinbaseModal } from "./Modals/CoinbaseModal";
 import { CommunityModal } from "./Modals/CommunityModal";
 import { EditModal } from "./Modals/EditModal";
@@ -32,6 +33,7 @@ function Modals() {
       <WalletConnectModal />
       <CoinbaseModal />
       <LogoutModal />
+      <AgreementModal />
     </>
   );
 }

packages/react-chat/src/components/Modals/AgreementModal.tsx

@@ -0,0 +1,156 @@
+import HCaptcha from "@hcaptcha/react-hcaptcha";
+import React, { useState } from "react";
+import styled, { useTheme } from "styled-components";
+
+import { useMessengerContext } from "../../contexts/messengerProvider";
+import { useModal } from "../../contexts/modalProvider";
+import { lightTheme, Theme } from "../../styles/themes";
+import { Logo } from "../CommunityIdentity";
+import { textMediumStyles } from "../Text";
+
+import { Modal } from "./Modal";
+import { Btn, ButtonSection, Heading, Section, Text } from "./ModalStyle";
+
+export const AgreementModalName = "AgreementModal";
+
+export function AgreementModal() {
+  const theme = useTheme() as Theme;
+  const { communityData } = useMessengerContext();
+  const { setModal } = useModal(AgreementModalName);
+
+  const [checked, setChecked] = useState(false);
+  const [token, setToken] = useState("");
+
+  return (
+    <Modal name={AgreementModalName} className="wide">
+      <Section>
+        <Heading>Welcome to {communityData?.name}</Heading>
+      </Section>
+      <Section>
+        <LogoWrapper>
+          <CommunityLogo
+            style={{
+              backgroundImage: communityData?.icon
+                ? `url(${communityData?.icon}`
+                : "",
+            }}
+          >
+            {" "}
+            {communityData?.icon === undefined &&
+              communityData?.name.slice(0, 1).toUpperCase()}
+          </CommunityLogo>
+        </LogoWrapper>
+        <AgreementSection>
+          <Text>{communityData?.description}</Text>
+        </AgreementSection>
+        <Agreements>
+          <Agreement>
+            <AgreementInput
+              type="checkbox"
+              name="agreement"
+              value="user agreement"
+              checked={checked}
+              onChange={(e) => setChecked(e.target.checked)}
+              required
+            />
+            <Checkmark />I agree with the above
+          </Agreement>
+
+          <form>
+            <HCaptcha
+              sitekey="64702fa3-7f57-41bb-bd43-7afeae54227e"
+              theme={theme === lightTheme ? "light" : "dark"}
+              onVerify={setToken}
+            />
+          </form>
+        </Agreements>
+      </Section>
+      <ButtonSection>
+        <Btn
+          onClick={() => {
+            setModal(false);
+          }}
+          disabled={!token || !checked}
+        >
+          Join {communityData?.name}
+        </Btn>
+      </ButtonSection>
+    </Modal>
+  );
+}
+
+const LogoWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  margin-bottom: 24px;
+`;
+
+const CommunityLogo = styled(Logo)`
+  width: 64px;
+  height: 64px;
+`;
+
+const AgreementSection = styled.div`
+  margin-bottom: 24px;
+`;
+
+const Agreements = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+const Agreement = styled.label`
+  display: flex;
+  align-items: center;
+  position: relative;
+  color: ${({ theme }) => theme.primary};
+  padding-left: 26px;
+  margin-right: 48px;
+
+  ${textMediumStyles}
+
+  & input:checked ~ span {
+    background-color: ${({ theme }) => theme.tertiary};
+    border: 1px solid ${({ theme }) => theme.tertiary};
+    border-radius: 2px;
+  }
+
+  & input:checked ~ span:after {
+    display: block;
+  }
+`;
+
+const AgreementInput = styled.input`
+  position: absolute;
+  opacity: 0;
+  height: 0;
+  width: 0;
+`;
+
+const Checkmark = styled.span`
+  position: absolute;
+  top: 2px;
+  left: 0;
+  width: 18px;
+  height: 18px;
+
+  background-color: ${({ theme }) => theme.inputColor};
+  border: 1px solid ${({ theme }) => theme.inputColor};
+  border-radius: 2px;
+  margin: 0 8px 0 0;
+
+  &:after {
+    content: "";
+    position: absolute;
+    display: none;
+
+    left: 5px;
+    top: 1px;
+    width: 4px;
+    height: 9px;
+    border: solid ${({ theme }) => theme.bodyBackgroundColor};
+    border-width: 0 2px 2px 0;
+    transform: rotate(45deg);
+  }
+`;

packages/react-chat/src/components/Modals/Modal.tsx

@@ -83,7 +83,7 @@ const ModalBody = styled.div`
     border-radius: 0;
   }
 
-  &.profile {
+  &.wide {
     max-width: 640px;
   }
 `;

packages/react-chat/src/components/Modals/ProfileModal.tsx

@@ -86,10 +86,7 @@ export const ProfileModal = () => {
 
   if (!contact) return null;
   return (
-    <Modal
-      name={ProfileModalName}
-      className={`${!requestCreation && "profile"}`}
-    >
+    <Modal name={ProfileModalName} className={`${!requestCreation && "wide"}`}>
       <Section>
         <Heading>{contact.trueName}’s Profile</Heading>
       </Section>

packages/react-chat/src/components/Modals/UserCreationModal.tsx

@@ -24,6 +24,7 @@ import { ClearSvgFull } from "../Icons/ClearIconFull";
 import { LeftIconSvg } from "../Icons/LeftIcon";
 import { UserLogo } from "../Members/UserLogo";
 
+import { AgreementModalName } from "./AgreementModal";
 import { Modal } from "./Modal";
 import {
   AddWrapper,
@@ -51,6 +52,7 @@ export function UserCreationModal() {
   const error = useNameError(customNameInput);
   const [nextStep, setNextStep] = useState(false);
   const { setModal } = useModal(UserCreationModalName);
+  const { setModal: setAgreementModal } = useModal(AgreementModalName);
 
   return (
     <Modal name={UserCreationModalName}>
@@ -158,6 +160,7 @@ export function UserCreationModal() {
           onClick={() => {
             if (nextStep) {
               setModal(false);
+              setAgreementModal(true);
             } else {
               const identity = walletIdentity || Identity.generate();
               setNickname(customNameInput);

yarn.lock

@@ -275,8 +275,10 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@dappconnect/react-chat@workspace:packages/react-chat"
   dependencies:
+    "@hcaptcha/react-hcaptcha": ^1.0.0
     "@types/chai": ^4.2.21
     "@types/emoji-mart": ^3.0.6
+    "@types/hcaptcha__react-hcaptcha": ^0.1.5
     "@types/mocha": ^9.0.0
     "@types/node": ^16.9.6
     "@types/qrcode.react": ^1.0.2
@@ -369,6 +371,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@hcaptcha/react-hcaptcha@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "@hcaptcha/react-hcaptcha@npm:1.0.0"
+  peerDependencies:
+    react: ">= 16.3.0"
+    react-dom: ">= 16.3.0"
+  checksum: 7c7c9062a5aa43f83b46d5d6028215830fe496b032652004d006460f579cf728f711d782fccede99751e0c2579d50cf0637d1908334b9f4ffcf9c92de55f7666
+  languageName: node
+  linkType: hard
+
 "@humanwhocodes/config-array@npm:^0.5.0":
   version: 0.5.0
   resolution: "@humanwhocodes/config-array@npm:0.5.0"
@@ -833,6 +845,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/hcaptcha__react-hcaptcha@npm:^0.1.5":
+  version: 0.1.5
+  resolution: "@types/hcaptcha__react-hcaptcha@npm:0.1.5"
+  dependencies:
+    "@types/react": "*"
+  checksum: d36e546bdad097a1e9ae209e22d7ddef2fceb2e9c41ee93d10aa7f0ee03c5cf512b56581518517c20e231333cdc63374e6a8cde7da5398f0e5e747fd34e9157a
+  languageName: node
+  linkType: hard
+
 "@types/history@npm:*":
   version: 4.7.9
   resolution: "@types/history@npm:4.7.9"