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 0000000..36bdba0 Binary files /dev/null and b/.yarn/cache/@hcaptcha-react-hcaptcha-npm-1.0.0-5c4fe0ed10-7c7c9062a5.zip differ 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 0000000..3ecf875 Binary files /dev/null and b/.yarn/cache/@types-hcaptcha__react-hcaptcha-npm-0.1.5-992a1fe069-d36e546bda.zip differ diff --git a/packages/react-chat/package.json b/packages/react-chat/package.json index 70f5294..d29ee62 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 e6ec4c9..80f4df6 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 0000000..a542d45 --- /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 1b098fd..e86d07f 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 4bff894..04e9ab5 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 ffb673e..9282900 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 c7c7788..0e33f95 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"