From d1692d7993f9cea0ea43f45352511d3746790ef1 Mon Sep 17 00:00:00 2001 From: Maria Rushkova <66270386+mrushkova@users.noreply.github.com> Date: Tue, 11 Jan 2022 10:44:53 +0100 Subject: [PATCH] Add agreement modal (#180) --- ...aptcha-npm-1.0.0-5c4fe0ed10-7c7c9062a5.zip | Bin 0 -> 12622 bytes ...aptcha-npm-0.1.5-992a1fe069-d36e546bda.zip | Bin 0 -> 3361 bytes packages/react-chat/package.json | 2 + packages/react-chat/src/components/Chat.tsx | 2 + .../src/components/Modals/AgreementModal.tsx | 156 ++++++++++++++++++ .../src/components/Modals/Modal.tsx | 2 +- .../src/components/Modals/ProfileModal.tsx | 5 +- .../components/Modals/UserCreationModal.tsx | 3 + yarn.lock | 21 +++ 9 files changed, 186 insertions(+), 5 deletions(-) create mode 100644 .yarn/cache/@hcaptcha-react-hcaptcha-npm-1.0.0-5c4fe0ed10-7c7c9062a5.zip create mode 100644 .yarn/cache/@types-hcaptcha__react-hcaptcha-npm-0.1.5-992a1fe069-d36e546bda.zip create mode 100644 packages/react-chat/src/components/Modals/AgreementModal.tsx diff --git a/.yarn/cache/@hcaptcha-react-hcaptcha-npm-1.0.0-5c4fe0ed10-7c7c9062a5.zip b/.yarn/cache/@hcaptcha-react-hcaptcha-npm-1.0.0-5c4fe0ed10-7c7c9062a5.zip new file mode 100644 index 0000000000000000000000000000000000000000..36bdba00a900954326d5bfb618b8a028d3076704 GIT binary patch literal 12622 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 literal 0 HcmV?d00001 diff --git a/.yarn/cache/@types-hcaptcha__react-hcaptcha-npm-0.1.5-992a1fe069-d36e546bda.zip b/.yarn/cache/@types-hcaptcha__react-hcaptcha-npm-0.1.5-992a1fe069-d36e546bda.zip new file mode 100644 index 0000000000000000000000000000000000000000..3ecf87599e514a15abdd87d29111b83e6751bce0 GIT binary patch literal 3361 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 literal 0 HcmV?d00001 diff --git a/packages/react-chat/package.json b/packages/react-chat/package.json index 70f52941..d29ee629 100644 --- a/packages/react-chat/package.json +++ b/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", diff --git a/packages/react-chat/src/components/Chat.tsx b/packages/react-chat/src/components/Chat.tsx index e6ec4c97..80f4df69 100644 --- a/packages/react-chat/src/components/Chat.tsx +++ b/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() { + ); } diff --git a/packages/react-chat/src/components/Modals/AgreementModal.tsx b/packages/react-chat/src/components/Modals/AgreementModal.tsx new file mode 100644 index 00000000..a542d451 --- /dev/null +++ b/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 ( + +
+ Welcome to {communityData?.name} +
+
+ + + {" "} + {communityData?.icon === undefined && + communityData?.name.slice(0, 1).toUpperCase()} + + + + {communityData?.description} + + + + setChecked(e.target.checked)} + required + /> + I agree with the above + + +
+ + +
+
+ + { + setModal(false); + }} + disabled={!token || !checked} + > + Join {communityData?.name} + + + + ); +} + +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); + } +`; diff --git a/packages/react-chat/src/components/Modals/Modal.tsx b/packages/react-chat/src/components/Modals/Modal.tsx index 1b098fdb..e86d07f4 100644 --- a/packages/react-chat/src/components/Modals/Modal.tsx +++ b/packages/react-chat/src/components/Modals/Modal.tsx @@ -83,7 +83,7 @@ const ModalBody = styled.div` border-radius: 0; } - &.profile { + &.wide { max-width: 640px; } `; diff --git a/packages/react-chat/src/components/Modals/ProfileModal.tsx b/packages/react-chat/src/components/Modals/ProfileModal.tsx index 4bff8941..04e9ab5b 100644 --- a/packages/react-chat/src/components/Modals/ProfileModal.tsx +++ b/packages/react-chat/src/components/Modals/ProfileModal.tsx @@ -86,10 +86,7 @@ export const ProfileModal = () => { if (!contact) return null; return ( - +
{contact.trueName}’s Profile
diff --git a/packages/react-chat/src/components/Modals/UserCreationModal.tsx b/packages/react-chat/src/components/Modals/UserCreationModal.tsx index ffb673ea..92829007 100644 --- a/packages/react-chat/src/components/Modals/UserCreationModal.tsx +++ b/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 ( @@ -158,6 +160,7 @@ export function UserCreationModal() { onClick={() => { if (nextStep) { setModal(false); + setAgreementModal(true); } else { const identity = walletIdentity || Identity.generate(); setNickname(customNameInput); diff --git a/yarn.lock b/yarn.lock index c7c77882..0e33f95c 100644 --- a/yarn.lock +++ b/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"