From e63777fea3cc8fbb05bfa40dcd229809c1d1c72b Mon Sep 17 00:00:00 2001 From: Monalisha Mishra Date: Thu, 24 Aug 2023 12:12:24 +0530 Subject: [PATCH] fix: fixed verification on send --- .../chat/ChatViewList/ChatViewList.tsx | 6 +- .../chat/ChatViewList/MessageEncryption.tsx | 16 +- .../chat/MessageInput/MessageInput.tsx | 925 ++++++++++-------- .../chat/MessageInput/VerificationFailed.tsx | 107 -- .../src/lib/hooks/chat/usePushSendMessage.ts | 10 +- .../lib/hooks/chat/useVerifyAccessControl.ts | 7 +- 6 files changed, 527 insertions(+), 544 deletions(-) delete mode 100644 packages/uiweb/src/lib/components/chat/MessageInput/VerificationFailed.tsx diff --git a/packages/uiweb/src/lib/components/chat/ChatViewList/ChatViewList.tsx b/packages/uiweb/src/lib/components/chat/ChatViewList/ChatViewList.tsx index f60e19f05..4c8ac6f03 100644 --- a/packages/uiweb/src/lib/components/chat/ChatViewList/ChatViewList.tsx +++ b/packages/uiweb/src/lib/components/chat/ChatViewList/ChatViewList.tsx @@ -27,7 +27,7 @@ import { ThemeContext } from '../theme/ThemeProvider'; import { IChatTheme } from '../theme'; import useFetchConversationHash from '../../../hooks/chat/useFetchConversationHash'; -import { EncryptionMessage } from './MessageEncryption'; +import { ENCRYPTION_KEYS, EncryptionMessage } from './MessageEncryption'; import useGetGroup from '../../../hooks/chat/useGetGroup'; import useGetChatProfile from '../../../hooks/useGetChatProfile'; import useFetchChat from '../../../hooks/chat/useFetchChat'; @@ -308,9 +308,9 @@ export const ChatViewList: React.FC = ( (chatFeed.publicKey || (chatFeed?.groupInformation && !chatFeed?.groupInformation?.isPublic)) ? ( - + ) : ( - + )} {chatStatusText && ( diff --git a/packages/uiweb/src/lib/components/chat/ChatViewList/MessageEncryption.tsx b/packages/uiweb/src/lib/components/chat/ChatViewList/MessageEncryption.tsx index cb6b4dc51..3883bb519 100644 --- a/packages/uiweb/src/lib/components/chat/ChatViewList/MessageEncryption.tsx +++ b/packages/uiweb/src/lib/components/chat/ChatViewList/MessageEncryption.tsx @@ -6,6 +6,14 @@ import { ThemeContext } from "../theme/ThemeProvider"; import { NoEncryptionIcon } from "../../../icons/NoEncryption"; import { EncryptionIcon } from "../../../icons/Encryption"; +export const ENCRYPTION_KEYS = { + ENCRYPTED: 'ENCRYPTED', + NO_ENCRYPTED: 'NO_ENCRYPTED', + NO_ENCRYPTED_GROUP: 'NO_ENCRYPTED_GROUP' +} as const; + +export type EncryptionKeys = (typeof ENCRYPTION_KEYS)[keyof typeof ENCRYPTION_KEYS]; + const EncryptionMessageContent = { ENCRYPTED: { IconComponent: , @@ -15,8 +23,14 @@ const EncryptionMessageContent = { IconComponent: , text: `Messages are not encrypted`, }, + NO_ENCRYPTED_GROUP: { + IconComponent: , + text: `Messages in this group are not encrypted`, + }, }; - export const EncryptionMessage = ({ id }: { id: 'ENCRYPTED' | 'NO_ENCRYPTED' }) => { + + + export const EncryptionMessage = ({ id }: { id: EncryptionKeys}) => { console.log(id) const theme = useContext(ThemeContext); const isMobile = useDeviceWidthCheck(771); diff --git a/packages/uiweb/src/lib/components/chat/MessageInput/MessageInput.tsx b/packages/uiweb/src/lib/components/chat/MessageInput/MessageInput.tsx index 0a14ccbcc..7c67faee6 100644 --- a/packages/uiweb/src/lib/components/chat/MessageInput/MessageInput.tsx +++ b/packages/uiweb/src/lib/components/chat/MessageInput/MessageInput.tsx @@ -1,401 +1,486 @@ -import { useChatData, useClickAway, useDeviceWidthCheck } from "../../../hooks"; -import type { FileMessageContent, IGroup } from "../../../types"; -import type { ChatMainStateContextType } from "../../../context/chatAndNotification/chat/chatMainStateContext"; -import { ChangeEvent, useContext, useEffect, useRef, useState } from "react"; -import { GIFType, IChatTheme, MessageInputProps } from "../exportedTypes"; -import styled from "styled-components"; -import { PUBLIC_GOOGLE_TOKEN, device } from "../../../config"; -import { Section, Div, Span } from "../../reusables"; -import { EmojiIcon } from "../../../icons/Emoji"; -import EmojiPicker, { EmojiClickData } from "emoji-picker-react"; -import * as PUSHAPI from "@pushprotocol/restapi"; -import { GifIcon } from "../../../icons/Gif"; -import GifPicker from "gif-picker-react"; -import { AttachmentIcon } from "../../../icons/Attachment"; -import usePushSendMessage from "../../../hooks/chat/usePushSendMessage"; -import { SendCompIcon } from "../../../icons/SendCompIcon"; -import { Spinner } from "../../reusables"; -import { ThemeContext } from "../theme/ThemeProvider"; -import OpenLink from "../../../icons/OpenLink"; -import VerificationFailed from "./VerificationFailed"; -import useVerifyAccessControl from "../../../hooks/chat/useVerifyAccessControl"; -import TokenGatedIcon from "../../../icons/Token-Gated.svg"; -import { Modal } from "../helpers/Modal"; -import { Image } from "../../reusables"; -import { ConnectButtonComp } from "../ConnectButton"; -import useGetGroupByID from "../../../hooks/chat/useGetGroupByID"; -import { ethers } from "ethers"; -import { pCAIP10ToWallet, setAccessControl } from "../../../helpers"; +import { useChatData, useClickAway, useDeviceWidthCheck } from '../../../hooks'; +import type { FileMessageContent, IGroup } from '../../../types'; +import type { ChatMainStateContextType } from '../../../context/chatAndNotification/chat/chatMainStateContext'; +import { ChangeEvent, useContext, useEffect, useRef, useState } from 'react'; +import { GIFType, IChatTheme, MessageInputProps } from '../exportedTypes'; +import styled from 'styled-components'; +import { PUBLIC_GOOGLE_TOKEN, device } from '../../../config'; +import { Section, Div, Span } from '../../reusables'; +import { EmojiIcon } from '../../../icons/Emoji'; +import EmojiPicker, { EmojiClickData } from 'emoji-picker-react'; +import * as PUSHAPI from '@pushprotocol/restapi'; +import { GifIcon } from '../../../icons/Gif'; +import GifPicker from 'gif-picker-react'; +import { AttachmentIcon } from '../../../icons/Attachment'; +import usePushSendMessage from '../../../hooks/chat/usePushSendMessage'; +import { SendCompIcon } from '../../../icons/SendCompIcon'; +import { Spinner } from '../../reusables'; +import { ThemeContext } from '../theme/ThemeProvider'; +import OpenLink from '../../../icons/OpenLink'; +import useVerifyAccessControl from '../../../hooks/chat/useVerifyAccessControl'; +import TokenGatedIcon from '../../../icons/Token-Gated.svg'; +import { Modal } from '../helpers/Modal'; +import { Image } from '../../reusables'; +import { ConnectButtonComp } from '../ConnectButton'; +import useGetGroupByID from '../../../hooks/chat/useGetGroupByID'; +import { ethers } from 'ethers'; +import { pCAIP10ToWallet, setAccessControl } from '../../../helpers'; /** * @interface IThemeProps * this interface is used for defining the props for styled components */ interface IThemeProps { - theme?: IChatTheme; + theme?: IChatTheme; } -export const MessageInput: React.FC = ({ chatId, Emoji = true, GIF = true, File = true, isConnected, onClick }) => { - const [typedMessage, setTypedMessage] = useState(""); - const [showEmojis, setShowEmojis] = useState(false); - const [gifOpen, setGifOpen] = useState(false); - const [newChat, setNewChat] = useState(false); - const modalRef = useRef(null); - const fileUploadInputRef = useRef(null); - const [fileUploading, setFileUploading] = useState(false); - const [isRules, setIsRules] = useState(false) - const onChangeTypedMessage = (val: string) => { - setTypedMessage(val); - }; - const theme = useContext(ThemeContext); - const isMobile = useDeviceWidthCheck(425); - const { sendMessage, loading } = usePushSendMessage(); - const { verificationSuccessfull, verifyAccessControl, setVerificationSuccessfull, verified, setVerified } = useVerifyAccessControl(); - const { account } = useChatData() - const { pgpPrivateKey, signer, setPgpPrivateKey } = useChatData(); - const { getGroupByID } = useGetGroupByID(); +export const MessageInput: React.FC = ({ + chatId, + Emoji = true, + GIF = true, + File = true, + isConnected, + onClick, +}) => { + const [typedMessage, setTypedMessage] = useState(''); + const [showEmojis, setShowEmojis] = useState(false); + const [gifOpen, setGifOpen] = useState(false); + const [newChat, setNewChat] = useState(false); + const modalRef = useRef(null); + const fileUploadInputRef = useRef(null); + const [fileUploading, setFileUploading] = useState(false); + const [isRules, setIsRules] = useState(false); + const onChangeTypedMessage = (val: string) => { + setTypedMessage(val); + }; + const theme = useContext(ThemeContext); + const isMobile = useDeviceWidthCheck(425); + const { sendMessage, loading } = usePushSendMessage(); + const { + verificationSuccessfull, + verifyAccessControl, + setVerificationSuccessfull, + verified, + setVerified, + loading: accessLoading, + } = useVerifyAccessControl(); + const { account } = useChatData(); + const { pgpPrivateKey, signer } = useChatData(); + const { getGroupByID } = useGetGroupByID(); + + useClickAway(modalRef, () => { + setShowEmojis(false); + setGifOpen(false); + }); + const textAreaRef = useRef(null); + useEffect(() => { + if (textAreaRef?.current?.style) { + textAreaRef.current.style.height = 25 + 'px'; + const scrollHeight = textAreaRef.current?.scrollHeight; + textAreaRef.current.style.height = scrollHeight + 'px'; + } + }, [textAreaRef, typedMessage]); - useClickAway(modalRef, () => { - setShowEmojis(false); - setGifOpen(false); - }); - const textAreaRef = useRef(null); - useEffect(() => { - if (textAreaRef?.current?.style) { - textAreaRef.current.style.height = 25 + 'px'; - const scrollHeight = textAreaRef.current?.scrollHeight; - textAreaRef.current.style.height = scrollHeight + 'px'; - } - }, [textAreaRef, typedMessage]) + const addEmoji = (emojiData: EmojiClickData, event: MouseEvent): void => { + setTypedMessage(typedMessage + emojiData.emoji); + setShowEmojis(false); + }; - const addEmoji = (emojiData: EmojiClickData, event: MouseEvent): void => { - setTypedMessage(typedMessage + emojiData.emoji); - setShowEmojis(false); + const handleUploadFile = () => { + if (fileUploadInputRef.current) { + fileUploadInputRef.current.click(); } - - const handleUploadFile = () => { - if (fileUploadInputRef.current) { - fileUploadInputRef.current.click(); - } + }; + + const checkVerification = () => { + verifyAccessControl({ chatId, did: account! }); + }; + + useEffect(() => { + const storedTimestampJSON = localStorage.getItem(chatId); + + if (storedTimestampJSON) { + const storedTimestamp = JSON.parse(storedTimestampJSON); + const currentTimestamp = new Date().getTime(); + const twentyFourHoursInMilliseconds = 24 * 60 * 60 * 1000; + + if ( + Math.abs(currentTimestamp - storedTimestamp) < + twentyFourHoursInMilliseconds + ) { + setVerified(true); + } else { + setVerified(false); + setAccessControl(chatId, true); + } } + }, [chatId, verified]); - const checkVerification = () => { - verifyAccessControl({ chatId, did: account! }); - console.log('chatId', chatId); + const uploadFile = async ( + e: ChangeEvent + ): Promise => { + if (!(e.target instanceof HTMLInputElement)) { + return; } - - useEffect(() => { - const storedTimestampJSON = localStorage.getItem(chatId); - - if (storedTimestampJSON) { - const storedTimestamp = JSON.parse(storedTimestampJSON); - const currentTimestamp = new Date().getTime(); - const twentyFourHoursInMilliseconds = 24 * 60 * 60 * 1000; - console.log(twentyFourHoursInMilliseconds) - - if (Math.abs(currentTimestamp - storedTimestamp) < twentyFourHoursInMilliseconds) { - console.log(Math.abs(currentTimestamp - storedTimestamp)) - setVerified(true); - } else { - setVerified(false); - setAccessControl(chatId, true) - } - } - }, [chatId, verified]) - - const uploadFile = async ( - e: ChangeEvent - ): Promise => { - if (!(e.target instanceof HTMLInputElement)) { - return; - } - if (!e.target.files) { - return; - } - if ( - e.target && - (e.target as HTMLInputElement).files && - ((e.target as HTMLInputElement).files as FileList).length - ) { - const file: File = e.target.files[0]; - if (file) { - try { - const TWO_MB = 1024 * 1024 * 2; - if (file.size > TWO_MB) { - console.log('Files larger than 2mb is now allowed'); - throw new Error('Files larger than 2mb is now allowed'); - } - setFileUploading(true); - const messageType = file.type.startsWith('image') ? 'Image' : 'File'; - const reader = new FileReader(); - let fileMessageContent: FileMessageContent; - reader.readAsDataURL(file); - reader.onloadend = async (e): Promise => { - fileMessageContent = { - content: e.target!.result as string, - name: file.name, - type: file.type, - size: file.size, - }; - - sendPushMessage(JSON.stringify(fileMessageContent), messageType); - }; - } catch (err) { - console.log(err); - } finally { - setFileUploading(false); - } - } - } - }; - - const sendPushMessage = async (content: string, type: string) => { - try { - const sendTextMessage = await sendMessage({ - message: content, - chatId, - messageType: type as any, - }); - console.log(sendTextMessage, "messageee"); - } catch (error) { - console.log(error); - } + if (!e.target.files) { + return; } - - const sendTextMsg = async () => { - if (typedMessage.trim() !== '') { - await sendPushMessage(typedMessage as string, 'Text'); - setTypedMessage(''); + if ( + e.target && + (e.target as HTMLInputElement).files && + ((e.target as HTMLInputElement).files as FileList).length + ) { + const file: File = e.target.files[0]; + if (file) { + try { + const TWO_MB = 1024 * 1024 * 2; + if (file.size > TWO_MB) { + console.log('Files larger than 2mb is now allowed'); + throw new Error('Files larger than 2mb is now allowed'); + } + setFileUploading(true); + const messageType = file.type.startsWith('image') ? 'Image' : 'File'; + const reader = new FileReader(); + let fileMessageContent: FileMessageContent; + reader.readAsDataURL(file); + reader.onloadend = async (e): Promise => { + fileMessageContent = { + content: e.target!.result as string, + name: file.name, + type: file.type, + size: file.size, + }; + + sendPushMessage(JSON.stringify(fileMessageContent), messageType); + }; + } catch (err) { + console.log(err); + } finally { + setFileUploading(false); } + } } - - - const sendGIF = async (emojiObject: GIFType) => { - sendPushMessage(emojiObject.url as string, 'GIF'); - setGifOpen(false); + }; + + const sendPushMessage = async (content: string, type: string) => { + const sendMessageResponse = await sendMessage({ + message: content, + chatId, + messageType: type as any, + }); + if (sendMessageResponse.includes('400')) { + setAccessControl(chatId, true); + setVerified(false); + setVerificationSuccessfull(false); + } + + }; + + const sendTextMsg = async () => { + if (typedMessage.trim() !== '') { + await sendPushMessage(typedMessage as string, 'Text'); + setTypedMessage(''); } - - const checkIfrules = async() => { - if (!ethers.utils.isAddress(pCAIP10ToWallet(chatId))) { - console.log("beingnnggg calleddd") - const groupInfo = await getGroupByID({ groupId: chatId }) - if(groupInfo?.rules) { - setIsRules(true) - console.log(groupInfo?.rules) - } - console.log(groupInfo, "groupInfooooo") - } + }; + + const sendGIF = async (emojiObject: GIFType) => { + sendPushMessage(emojiObject.url as string, 'GIF'); + setGifOpen(false); + }; + + const checkIfrules = async () => { + if (!ethers.utils.isAddress(pCAIP10ToWallet(chatId))) { + const groupInfo = await getGroupByID({ groupId: chatId }); + if (groupInfo?.rules) { + setIsRules(true); + } } - console.log(verificationSuccessfull, "verrifficagtionnn") + }; - useEffect(() => { - console.log(chatId, "chatIdddd") - checkIfrules(); - }, [chatId]) + useEffect(() => { + checkIfrules(); + }, [chatId]); - return ( - - {/* {isConnected && ( + return ( + + {/* {isConnected && ( )} */} - + {!pgpPrivateKey && isConnected && ( +
+ {!signer && ( + + You need to connect your wallet to get started + + )} + +
+ )} + + {pgpPrivateKey && + verified && + // verified + isRules && ( +
+ + Sending messages requires{' '} + + 1 PUSH Token + {' '} + for participation.{' '} + + Learn More + + + + + {accessLoading ? ( + + ) : ( + 'Verify Access' + )} + + +
+ )} + {pgpPrivateKey && !verificationSuccessfull && ( + +
- {!pgpPrivateKey && isConnected && ( -
+ Verification Failed + + + Please ensure the following conditions are met to participate + and send messages. + +
+ token-gated +
+ {' '} + {/* Added marginLeft */} + + Token Gated + + + You need to have{' '} + - {!signer && - You need to connect your wallet to get started - } - -
- ) - } - - {pgpPrivateKey && - !verified - // verified - && isRules && ( -
{' '} + in your wallet to be able to send messages. + +
+
+
+ { + if (onClick) { + onClick(); + } + console.log('in here 25333333'); + setVerificationSuccessfull(true); + }} + > + + Get Free Tokens + + + + { + console.log('in here 2666333333'); + setVerificationSuccessfull(true); + }} + > + Close + +
+
+ + )} + {pgpPrivateKey && (isRules ? !verified : true) && ( + // true + <> +
+ {Emoji && ( +
setShowEmojis(!showEmojis)} + > + +
+ )} + {showEmojis && ( +
+ +
+ )} + { + if (event.key === 'Enter' && !event.shiftKey) { + event.preventDefault(); + sendTextMsg(); + } + }} + placeholder="Type your message..." + onChange={(e) => onChangeTypedMessage(e.target.value)} + value={typedMessage} + ref={textAreaRef} + rows={1} + /> +
+ + {GIF && ( +
setGifOpen(!gifOpen)} + > + +
+ )} + {gifOpen && ( +
+ +
+ )} +
+ {!fileUploading && File && ( + <> +
setNewChat(true)} > - - Sending messages requires 1 PUSH Token for participation. Learn More - - - - Verify Access - - +
+ uploadFile(e)} + /> + )} - {pgpPrivateKey && !verificationSuccessfull && ( - -
- Verification Failed - Please ensure the following conditions are met to participate and send messages. -
- token-gated -
{/* Added marginLeft */} - Token Gated - You need to have 1 PUSH Token in your wallet to be able to send messages. -
-
-
- { - if (onClick) { - onClick(); - } - setVerificationSuccessfull(true) - } - }> - - Get Free Tokens - - - - { - setVerificationSuccessfull(true) - console.log(verificationSuccessfull) - }}> - - Close - - -
-
- - )} - {pgpPrivateKey && - (isRules ? verified : true) - // true - && - <> -
- {Emoji && -
setShowEmojis(!showEmojis)} - > - -
- } - {showEmojis && ( -
-
- )} - { - if (event.key === 'Enter' && !event.shiftKey) { - event.preventDefault(); - sendTextMsg(); - } - }} - placeholder="Type your message..." - onChange={(e) => onChangeTypedMessage(e.target.value)} - value={typedMessage} - ref={textAreaRef} - rows={1} - /> -
- - {GIF && -
setGifOpen(!gifOpen)}> - -
- } - {gifOpen && ( -
- -
- )} -
- {!fileUploading && File && ( - <> -
setNewChat(true)} - > - -
- uploadFile(e)} - - /> - - )} -
- {!(loading || fileUploading) && ( -
sendTextMsg()} - > - -
- )} - - {(loading || fileUploading) && ( -
- -
- )} - - - } - - - ) -} +
+ {!(loading || fileUploading) && ( +
sendTextMsg()} + > + +
+ )} + + {(loading || fileUploading) && ( +
+ +
+ )} + + + )} + + + ); +}; const Container = styled.div` width: 100%; overflow: hidden; - border:${(props) => props.theme.border?.messageInput}; - border-radius:${(props) => props.theme.borderRadius?.messageInput}; + border: ${(props) => props.theme.border?.messageInput}; + border-radius: ${(props) => props.theme.borderRadius?.messageInput}; `; const TypebarSection = styled(Section)` gap: 10px; @@ -417,7 +502,7 @@ const MultiLineInput = styled.textarea` outline: none; overflow-y: auto; box-sizing: border-box; - background:${(props) => props.theme.backgroundColor?.messageInputBackground}; + background: ${(props) => props.theme.backgroundColor?.messageInputBackground}; border: none; color: ${(props) => props.theme.textColor?.messageInputText}; resize: none; @@ -452,33 +537,32 @@ const FileInput = styled.input` display: none; `; - const ConnectWrapper = styled.div` - display: flex; - align-items: center; - flex-direction: column; - `; + display: flex; + align-items: center; + flex-direction: column; +`; const StyledButton = styled.button` - border: 0px; - outline: 0px; - padding: 24px 9px; - font-weight: 500; - border-radius: 12px; - font-size: 17px; - cursor: pointer; - width: 147px; - height: 44px; - text-align: start; - align-items: center; - display: flex; - justify-content: center; - `; + border: 0px; + outline: 0px; + padding: 24px 9px; + font-weight: 500; + border-radius: 12px; + font-size: 17px; + cursor: pointer; + width: 147px; + height: 44px; + text-align: start; + align-items: center; + display: flex; + justify-content: center; +`; const Connect = styled(StyledButton)` - color: rgb(255, 255, 255); - background: #D53A94; - `; + color: rgb(255, 255, 255); + background: #d53a94; +`; const ConnectWrapperClose = styled.div` display: flex; @@ -486,7 +570,6 @@ const ConnectWrapperClose = styled.div` flex-direction: column; `; - const StyledButtonClose = styled.button` border: 0px; outline: 0px; @@ -504,43 +587,41 @@ const StyledButtonClose = styled.button` `; const ConnectClose = styled(StyledButtonClose)` - color: rgb(255, 255, 255); - background: #D53A94; - gap: 8px; - `; - + color: rgb(255, 255, 255); + background: #d53a94; + gap: 8px; +`; const TokenWrapper = styled.div` - display: flex; - align-items: center; - flex-direction: column; - `; - + display: flex; + align-items: center; + flex-direction: column; +`; const TokenStyledButton = styled.button` -border: 0px; -outline: 0px; -padding: 22px 9px; -font-weight: 500; -border-radius: 12px; -font-size: 17px; -cursor: pointer; -width: 100%; -height: 44px; -text-align: start; -align-items: center; -display: flex; -justify-content: center; + border: 0px; + outline: 0px; + padding: 22px 9px; + font-weight: 500; + border-radius: 12px; + font-size: 17px; + cursor: pointer; + width: 100%; + height: 44px; + text-align: start; + align-items: center; + display: flex; + justify-content: center; `; const TokenGet = styled(TokenStyledButton)` - color: #D53A94; - border: 2px solid #D53A94; - background: none; - gap: 8px; - `; + color: #d53a94; + border: 2px solid #d53a94; + background: none; + gap: 8px; +`; const Link = styled.a` - color: #D53A94; - link-decoration: none; - text-decoration: none; -` \ No newline at end of file + color: #d53a94; + link-decoration: none; + text-decoration: none; +`; diff --git a/packages/uiweb/src/lib/components/chat/MessageInput/VerificationFailed.tsx b/packages/uiweb/src/lib/components/chat/MessageInput/VerificationFailed.tsx deleted file mode 100644 index 98f5c3dcc..000000000 --- a/packages/uiweb/src/lib/components/chat/MessageInput/VerificationFailed.tsx +++ /dev/null @@ -1,107 +0,0 @@ -import React, { useContext } from 'react' -import { Modal } from '../helpers/Modal' -import { Image, Section, Span } from '../../reusables' -import { ThemeContext } from '../theme/ThemeProvider'; -import TokenGatedIcon from "../../../icons/Token-Gated.svg" -import OpenLink from "../../../icons/OpenLink"; -import styled from 'styled-components'; -import useVerifyAccessControl from '../../../hooks/chat/useVerifyAccessControl'; - - -const VerificationFailed = () => { - const theme = useContext(ThemeContext); - const { setVerificationSuccessfull, verificationSuccessfull } = useVerifyAccessControl(); - return ( - -
- Verification Failed - Please ensure the following conditions are met to participate and send messages. -
- token-gated -
{/* Added marginLeft */} - Token Gated - You need to have 1 PUSH Token in your wallet to be able to send messages. -
-
-
- - - Get Tokens - - - - { - setVerificationSuccessfull(false) - console.log(verificationSuccessfull) - }}> - - Close - - -
-
- - ) -} - -export default VerificationFailed - - -const ConnectWrapper = styled.div` - display: flex; - align-items: center; - flex-direction: column; - `; - -const ConnectWrapperClose = styled.div` - display: flex; - align-items: center; - flex-direction: column; -`; - - -const StyledButton = styled.button` - border: 0px; - outline: 0px; - padding: 22px 9px; - font-weight: 500; - border-radius: 12px; - font-size: 17px; - cursor: pointer; - width: 147px; - height: 44px; - text-align: start; - align-items: center; - display: flex; - justify-content: center; - `; - -const StyledButtonClose = styled.button` - border: 0px; - outline: 0px; - padding: 24px 9px; - font-weight: 500; - border-radius: 12px; - font-size: 17px; - cursor: pointer; - width: 147px; - height: 44px; - text-align: start; - align-items: center; - display: flex; - justify-content: center; -`; - - -const Connect = styled(StyledButton)` - color: #D53A94; - border: 2px solid #D53A94; - background: none; - gap: 8px; - `; - -const ConnectClose = styled(StyledButtonClose)` - color: rgb(255, 255, 255); - background: #D53A94; - gap: 8px; - `; diff --git a/packages/uiweb/src/lib/hooks/chat/usePushSendMessage.ts b/packages/uiweb/src/lib/hooks/chat/usePushSendMessage.ts index 415799e77..1c7768337 100644 --- a/packages/uiweb/src/lib/hooks/chat/usePushSendMessage.ts +++ b/packages/uiweb/src/lib/hooks/chat/usePushSendMessage.ts @@ -15,8 +15,7 @@ const usePushSendMessage = () => { const [error, setError] = useState(); const [loading, setLoading] = useState(false); - const { verificationSuccessfull, setVerificationSuccessfull, setVerified } = - useVerifyAccessControl(); + const { pgpPrivateKey, env, account } = useChatData(); const sendMessage = useCallback( @@ -39,15 +38,10 @@ const usePushSendMessage = () => { } return; } catch (error: Error | any) { - if (error.message.includes('400')) { - setAccessControl(chatId, true); - setVerified(false); - setVerificationSuccessfull(false); - } setLoading(false); setError(error.message); console.log(error); - return; + return error.message; } }, [pgpPrivateKey, account] diff --git a/packages/uiweb/src/lib/hooks/chat/useVerifyAccessControl.ts b/packages/uiweb/src/lib/hooks/chat/useVerifyAccessControl.ts index f50ce89f6..57fe6c104 100644 --- a/packages/uiweb/src/lib/hooks/chat/useVerifyAccessControl.ts +++ b/packages/uiweb/src/lib/hooks/chat/useVerifyAccessControl.ts @@ -12,13 +12,14 @@ interface VerifyAccessControlParams { const useVerifyAccessControl = () => { const [error, setError] = useState(); const [loading, setLoading] = useState(false); + console.log('in hereeeeeee'); const [verificationSuccessfull, setVerificationSuccessfull] = useState(true); const [verified, setVerified] = useState(false); const { pgpPrivateKey, env, account } = useChatData(); + console.log(verificationSuccessfull); - console.log('Verification control hook'); const verifyAccessControl = useCallback( async (options: VerifyAccessControlParams) => { const { chatId, did } = options || {}; @@ -36,7 +37,6 @@ const useVerifyAccessControl = () => { setVerified(true); setAccessControl(chatId, false); } - console.log(response); if (!response) { return false; } @@ -49,8 +49,9 @@ const useVerifyAccessControl = () => { return; } }, - [pgpPrivateKey, account, verificationSuccessfull, verified, setVerified] + [pgpPrivateKey, account,env] ); + return { verifyAccessControl, error,