Class component uiweb chat component

[KlausMikhaelson]

changed restapi of chat components with class components based apis

[github-actions]

File: .husky/pre-commit

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

echo "\nRunning GIT hooks..."
yarn cleanbuild
yarn nx affected --target=lint
yarn nx affected --target=test

All looks good.

File: packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatViewComponent.tsx

import styled from 'styled-components';

import { Section } from '../components/StyledComponents';
import { CreateGroupModal, MODAL_BACKGROUND_TYPE, MODAL_POSITION_TYPE } from "@pushprotocol/uiweb";
import { ChatView } from '@pushprotocol/uiweb';
const ChatViewComponentTest = () => {
const chatFilterList = [
'bafyreidesy6f4iu34eqccmqh55g35wu36lvlz42c63ivtmgjjhezlzdqta',
'bafyreig3gs4tpwxumiz5fxypyt4omlxhvrvuj66kfoyioeshawlau6lgem',
];
return (

Chat UI Test page

{/* <CreateGroupModal onClose={()=>{console.log('in close')}} /> /}

{/ <CreateGroupModal onClose={()=>{console.log('in close')}} modalBackground={MODAL_BACKGROUND_TYPE.OVERLAY} modalPositionType={MODAL_POSITION_TYPE.RELATIVE}/> */}
<ChatView
onVerificationFail={() => console.log("BOIIII RETURNNNSSSSS")}
chatId='a5dad31b20c9aaf761221b57f6f0ab96b03a456525159378388e896475b1f943'
limit={10}
isConnected={true}
groupInfoModalBackground={MODAL_BACKGROUND_TYPE.OVERLAY}
groupInfoModalPositionType={MODAL_POSITION_TYPE.RELATIVE}
verificationFailModalPosition={MODAL_POSITION_TYPE.RELATIVE}
/>

);
}
export default ChatViewComponentTest;
const ChatViewComponentCard = styled(Section)height: 80vh; position:relative;;
//c2d544ad9d1efd5c5a593b143bf8232875c926cf28015564e70ad078b95f807e
//4ac5ab85c9c3d57adbdf2dba79357e56b2f9ef0256befe750d9f93af78d2ca68

All looks good.

File: packages/uiweb/src/lib/components/chat/ChatViewBubble/ChatViewBubble.tsx

import {
ReactElement,
ReactNode,
useContext,
useEffect,
useState,
} from 'react';

import moment from 'moment';
import styled from 'styled-components';
import { TwitterTweetEmbed } from 'react-twitter-embed';
import { Section, Span, Image } from '../../reusables';
import { checkTwitterUrl } from '../helpers/twitter';
import { ChatDataContext } from '../../../context';
import { useChatData } from '../../../hooks';
import { ThemeContext } from '../theme/ThemeProvider';
import { FileMessageContent } from '../../../types';
import { IMessagePayload, TwitterFeedReturnType } from '../exportedTypes';
import { FILE_ICON } from '../../../config';
formatFileSize,
getPfp,
pCAIP10ToWallet,
shortenText,
} from '../../../helpers';
import { formatTime } from '../../../helpers/timestamp';
const SenderMessageAddress = ({ chat }: { chat: IMessagePayload }) => {
const { account } = useContext(ChatDataContext);
const theme = useContext(ThemeContext);
return (
<>
{(chat.fromDID).split(':')[1] !== account && (
<Span
theme={theme}
alignSelf="start"
textAlign="start"
fontSize={theme.fontSize?.chatReceivedBubbleAddressText}
fontWeight={theme.fontWeight?.chatReceivedBubbleAddressText