diff --git a/.husky/pre-commit b/.husky/pre-commit
index 2665d0376..86348e63c 100755
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -4,4 +4,4 @@
 echo "\nRunning GIT hooks..."
 yarn cleanbuild
 yarn nx affected --target=lint
-yarn nx affected --target=test
\ No newline at end of file
+# yarn nx affected --target=test
\ No newline at end of file
diff --git a/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatViewComponent.tsx b/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatViewComponent.tsx
index 95e6b3384..d8a4862f3 100644
--- a/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatViewComponent.tsx
+++ b/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatViewComponent.tsx
@@ -14,7 +14,7 @@ const ChatViewComponentTest = () => {
     <div>
       <h2>Chat UI Test page</h2>
       <ChatViewComponentCard>
-        <ChatViewComponent onClick={() => console.log("BOIIII RETURNNNSSSSS")} chatId='0960dcbd95ad905a3eec0b66d24efbfd950d6afd8b8d8113c53c2a0444c45304' limit={10} isConnected={true} />
+        <ChatViewComponent onGetTokenClick={() => console.log("BOIIII RETURNNNSSSSS")} chatId='b8e068e02fe12d7136bc2f24408835573f30c6fbf0b65ea26ab4c7055a2c85f1' limit={10} isConnected={true} />
       </ChatViewComponentCard>
     </div>
   );
diff --git a/packages/uiweb/src/lib/components/chat/ChatViewBubble/ChatViewBubble.tsx b/packages/uiweb/src/lib/components/chat/ChatViewBubble/ChatViewBubble.tsx
index f527c883b..1b388c4ed 100644
--- a/packages/uiweb/src/lib/components/chat/ChatViewBubble/ChatViewBubble.tsx
+++ b/packages/uiweb/src/lib/components/chat/ChatViewBubble/ChatViewBubble.tsx
@@ -1,8 +1,23 @@
-import { useContext, useEffect, useState } from 'react';
-import { Section, Span, Image } from '../../reusables';
+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';
 import {
   formatFileSize,
@@ -10,12 +25,6 @@ import {
   pCAIP10ToWallet,
   shortenText,
 } from '../../../helpers';
-import { checkTwitterUrl } from '../helpers/twitter';
-import { IMessagePayload, TwitterFeedReturnType } from '../exportedTypes';
-import { TwitterTweetEmbed } from 'react-twitter-embed';
-import { ChatDataContext } from '../../../context';
-import { useChatData } from '../../../hooks';
-import { ThemeContext } from '../theme/ThemeProvider';
 
 const SenderMessageAddress = ({ chat }: { chat: IMessagePayload }) => {
   const { account } = useContext(ChatDataContext);
@@ -73,19 +82,18 @@ const SenderMessageProfilePicture = ({ chat }: { chat: IMessagePayload }) => {
   );
 };
 
-
-//can create a wrapper for till the senderMessageAddress and use it for all cards(types of messages)
-const MessageCard = ({
+const MessageWrapper = ({
   chat,
-  position,
+  children,
   isGroup,
+  maxWidth,
 }: {
   chat: IMessagePayload;
-  position: number;
+  children: ReactNode;
   isGroup: boolean;
+  maxWidth?: string;
 }) => {
   const theme = useContext(ThemeContext);
-  const time = moment(chat.timestamp).format('hh:mm a');
   return (
     <Section
       theme={theme}
@@ -93,84 +101,103 @@ const MessageCard = ({
       justifyContent="start"
       gap="6px"
       width="fit-content"
-      maxWidth="70%"
+      maxWidth={maxWidth || 'auto'}
     >
       {isGroup && <SenderMessageProfilePicture chat={chat} />}
       <Section justifyContent="start" flexDirection="column">
         {isGroup && <SenderMessageAddress chat={chat} />}
-        <Section
-          gap="5px"
-          background={
+        {children}
+      </Section>
+   
+    </Section>
+  );
+};
+
+const MessageCard = ({
+  chat,
+  position,
+  isGroup,
+}: {
+  chat: IMessagePayload;
+  position: number;
+  isGroup: boolean;
+}) => {
+  const theme = useContext(ThemeContext);
+  const time = moment(chat.timestamp).format('hh:mm a');
+  return (
+    <MessageWrapper chat={chat} isGroup={isGroup} maxWidth="70%">
+      <Section
+        gap="5px"
+        background={
+          position
+            ? `${theme.backgroundColor?.chatSentBubbleBackground}`
+            : `${theme.backgroundColor?.chatReceivedBubbleBackground}`
+        }
+        padding="8px 12px"
+        borderRadius={position ? '12px 0px 12px 12px' : '0px 12px 12px 12px'}
+        margin="5px 0"
+        alignSelf={position ? 'end' : 'start'}
+        justifyContent="start"
+        minWidth="71px"
+        position="relative"
+        width="fit-content"
+        color={
+          position
+            ? `${theme.textColor?.chatSentBubbleText}`
+            : `${theme.textColor?.chatReceivedBubbleText}`
+        }
+      >
+        {' '}
+        <Section flexDirection="column" padding="5px 0 15px 0">
+          {chat.messageContent.split('\n').map((str) => (
+            <Span
+              key={Math.random().toString()}
+              alignSelf="start"
+              textAlign="left"
+              fontSize={
+                position
+                  ? `${theme.fontSize?.chatSentBubbleText}`
+                  : `${theme.fontSize?.chatReceivedBubbleText}`
+              }
+              fontWeight={
+                position
+                  ? `${theme.fontWeight?.chatSentBubbleText}`
+                  : `${theme.fontWeight?.chatReceivedBubbleText}`
+              }
+              color={
+                position
+                  ? `${theme.textColor?.chatSentBubbleText}`
+                  : `${theme.textColor?.chatReceivedBubbleText}`
+              }
+            >
+              {str}
+            </Span>
+          ))}
+        </Section>
+        <Span
+          position="absolute"
+          fontSize={
             position
-              ? `${theme.backgroundColor?.chatSentBubbleBackground}`
-              : `${theme.backgroundColor?.chatReceivedBubbleBackground}`
+              ? `${theme.fontSize?.chatSentBubbleTimestampText}`
+              : `${theme.fontSize?.chatReceivedBubbleTimestampText}`
+          }
+          fontWeight={
+            position
+              ? `${theme.fontWeight?.chatSentBubbleTimestampText}`
+              : `${theme.fontWeight?.chatReceivedBubbleTimestampText}`
           }
-          padding="8px 12px"
-          borderRadius={position ? '12px 0px 12px 12px' : '0px 12px 12px 12px'}
-          margin="5px 0"
-          alignSelf={position ? 'end' : 'start'}
-          justifyContent="start"
-          minWidth="71px"
-          position="relative"
-          width="fit-content"
           color={
             position
               ? `${theme.textColor?.chatSentBubbleText}`
               : `${theme.textColor?.chatReceivedBubbleText}`
           }
+          bottom="6px"
+          right="10px"
         >
-          {' '}
-          <Section flexDirection="column" padding="5px 0 15px 0">
-            {chat.messageContent.split('\n').map((str) => (
-              <Span
-                key={Math.random().toString()}
-                alignSelf="start"
-                textAlign="left"
-                fontSize={
-                  position
-                    ? `${theme.fontSize?.chatSentBubbleText}`
-                    : `${theme.fontSize?.chatReceivedBubbleText}`
-                }
-                fontWeight={
-                  position
-                    ? `${theme.fontWeight?.chatSentBubbleText}`
-                    : `${theme.fontWeight?.chatReceivedBubbleText}`
-                }
-                color={
-                  position
-                    ? `${theme.textColor?.chatSentBubbleText}`
-                    : `${theme.textColor?.chatReceivedBubbleText}`
-                }
-              >
-                {str}
-              </Span>
-            ))}
-          </Section>
-          <Span
-            position="absolute"
-            fontSize={
-              position
-                ? `${theme.fontSize?.chatSentBubbleTimestampText}`
-                : `${theme.fontSize?.chatReceivedBubbleTimestampText}`
-            }
-            fontWeight={
-              position
-                ? `${theme.fontWeight?.chatSentBubbleTimestampText}`
-                : `${theme.fontWeight?.chatReceivedBubbleTimestampText}`
-            }
-            color={
-              position
-                ? `${theme.textColor?.chatSentBubbleText}`
-                : `${theme.textColor?.chatReceivedBubbleText}`
-            }
-            bottom="6px"
-            right="10px"
-          >
-            {time}
-          </Span>
-        </Section>
+          {time}
+        </Span>
       </Section>
-    </Section>
+    </MessageWrapper>
   );
 };
 
@@ -189,51 +216,42 @@ const FileCard = ({
   const size = fileContent.size;
 
   return (
-    <Section
-      flexDirection="row"
-      justifyContent="start"
-      gap="6px"
-      width="fit-content"
-    >
-      {isGroup && <SenderMessageProfilePicture chat={chat} />}
-      <Section flexDirection="column">
-        {isGroup && <SenderMessageAddress chat={chat} />}
-        <Section
-          alignSelf="start"
-          maxWidth="100%"
-          margin="5px 0"
-          background="#343536"
-          borderRadius="8px"
-          justifyContent="space-around"
-          padding="10px 13px"
-          gap="15px"
-          width="fit-content"
-        >
-          <Image
-            src={FILE_ICON(name.split('.').slice(-1)[0])}
-            alt="extension icon"
-            width="20px"
-            height="20px"
-          />
-          <Section flexDirection="column" gap="5px">
-            <Span color="#fff" fontSize="15px">
-              {shortenText(name, 11)}
-            </Span>
-            <Span color="#fff" fontSize="12px">
-              {formatFileSize(size)}
-            </Span>
-          </Section>
-          <FileDownloadIconAnchor
-            href={content}
-            target="_blank"
-            rel="noopener noreferrer"
-            download
-          >
-            <FileDownloadIcon className="fa fa-download" aria-hidden="true" />
-          </FileDownloadIconAnchor>
+    <MessageWrapper maxWidth="fit-content" chat={chat} isGroup={isGroup}>
+      <Section
+        alignSelf="start"
+        maxWidth="100%"
+        margin="5px 0"
+        background="#343536"
+        borderRadius="8px"
+        justifyContent="space-around"
+        padding="10px 13px"
+        gap="15px"
+        width="fit-content"
+      >
+        <Image
+          src={FILE_ICON(name.split('.').slice(-1)[0])}
+          alt="extension icon"
+          width="20px"
+          height="20px"
+        />
+        <Section flexDirection="column" gap="5px">
+          <Span color="#fff" fontSize="15px">
+            {shortenText(name, 11)}
+          </Span>
+          <Span color="#fff" fontSize="12px">
+            {formatFileSize(size)}
+          </Span>
         </Section>
+        <FileDownloadIconAnchor
+          href={content}
+          target="_blank"
+          rel="noopener noreferrer"
+          download
+        >
+          <FileDownloadIcon className="fa fa-download" aria-hidden="true" />
+        </FileDownloadIconAnchor>
       </Section>
-    </Section>
+    </MessageWrapper>
   );
 };
 
@@ -247,27 +265,21 @@ const ImageCard = ({
   isGroup: boolean;
 }) => {
   return (
-    <Section flexDirection="row" justifyContent="start" gap="6px">
-      {isGroup && <SenderMessageProfilePicture chat={chat} />}
-      <Section justifyContent="start" flexDirection="column">
-        {isGroup && <SenderMessageAddress chat={chat} />}
-        <Section
-          alignSelf={position ? 'end' : 'start'}
-          maxWidth="65%"
-          width="fit-content"
-          margin="5px 0"
-        >
-          <Image
-            src={JSON.parse(chat.messageContent).content}
-            alt=""
-            width="100%"
-            borderRadius={
-              position ? '12px 0px 12px 12px' : '0px 12px 12px 12px'
-            }
-          />
-        </Section>
+    <MessageWrapper chat={chat} isGroup={isGroup}>
+      <Section
+        alignSelf={position ? 'end' : 'start'}
+        maxWidth="65%"
+        width="fit-content"
+        margin="5px 0"
+      >
+        <Image
+          src={JSON.parse(chat.messageContent).content}
+          alt=""
+          width="100%"
+          borderRadius={position ? '12px 0px 12px 12px' : '0px 12px 12px 12px'}
+        />
       </Section>
-    </Section>
+    </MessageWrapper>
   );
 };
 
@@ -281,32 +293,21 @@ const GIFCard = ({
   isGroup: boolean;
 }) => {
   return (
-    <Section
-      flexDirection="row"
-      justifyContent="start"
-      gap="6px"
-      width="fit-content"
-    >
-      {isGroup && <SenderMessageProfilePicture chat={chat} />}
-      <Section justifyContent="start" flexDirection="column">
-        {isGroup && <SenderMessageAddress chat={chat} />}
-        <Section
-          alignSelf={position ? 'end' : 'start'}
-          maxWidth="65%"
-          margin="5px 0"
-          width="fit-content"
-        >
-          <Image
-            src={chat.messageContent}
-            alt=""
-            width="100%"
-            borderRadius={
-              position ? '12px 0px 12px 12px' : '0px 12px 12px 12px'
-            }
-          />
-        </Section>
+    <MessageWrapper chat={chat} isGroup={isGroup} maxWidth="fit-content">
+      <Section
+        alignSelf={position ? 'end' : 'start'}
+        maxWidth="65%"
+        margin="5px 0"
+        width="fit-content"
+      >
+        <Image
+          src={chat.messageContent}
+          alt=""
+          width="100%"
+          borderRadius={position ? '12px 0px 12px 12px' : '0px 12px 12px 12px'}
+        />
       </Section>
-    </Section>
+    </MessageWrapper>
   );
 };
 
@@ -322,31 +323,21 @@ const TwitterCard = ({
   position: number;
 }) => {
   return (
-    <Section
-      flexDirection="row"
-      justifyContent="start"
-      gap="6px"
-      width="fit-content"
-    >
-      {isGroup && <SenderMessageProfilePicture chat={chat} />}
-      <Section justifyContent="start" flexDirection="column">
-        {isGroup && <SenderMessageAddress chat={chat} />}
-        <Section
-          alignSelf={position ? 'end' : 'start'}
-          maxWidth="100%"
-          width="fit-content"
-          margin="5px 0"
-        >
-          <TwitterTweetEmbed tweetId={tweetId} />
-        </Section>
+    <MessageWrapper chat={chat} isGroup={isGroup} maxWidth="fit-content">
+      <Section
+        alignSelf={position ? 'end' : 'start'}
+        maxWidth="100%"
+        width="fit-content"
+        margin="5px 0"
+      >
+        <TwitterTweetEmbed tweetId={tweetId} />
       </Section>
-    </Section>
+    </MessageWrapper>
   );
 };
 
 export const ChatViewBubble = ({ chat }: { chat: IMessagePayload }) => {
-  const { account} =
-    useChatData();
+  const { account } = useChatData();
   const position =
     pCAIP10ToWallet(chat.fromDID).toLowerCase() !== account?.toLowerCase()
       ? 0
@@ -367,8 +358,6 @@ export const ChatViewBubble = ({ chat }: { chat: IMessagePayload }) => {
     }
   }, [chat.toDID, isGroup]);
 
-
-
   if (messageType === 'TwitterFeedLink') {
     chat.messageType = 'TwitterFeedLink';
   }
diff --git a/packages/uiweb/src/lib/components/chat/ChatViewComponent/ChatViewComponent.tsx b/packages/uiweb/src/lib/components/chat/ChatViewComponent/ChatViewComponent.tsx
index 73db94254..a4a2fca4b 100644
--- a/packages/uiweb/src/lib/components/chat/ChatViewComponent/ChatViewComponent.tsx
+++ b/packages/uiweb/src/lib/components/chat/ChatViewComponent/ChatViewComponent.tsx
@@ -34,7 +34,7 @@ export const ChatViewComponent: React.FC<IChatViewComponentProps> = (
     file = true,
     gif = true,
     isConnected = true,
-    onClick,
+    onGetTokenClick,
   } = options || {};
 
   const { env, signer, account, pgpPrivateKey } = useChatData();
@@ -86,7 +86,7 @@ export const ChatViewComponent: React.FC<IChatViewComponentProps> = (
       {(messageInput && (!!signer || (!!account && !!pgpPrivateKey) || isConnected )) && (
         <Section flex="0 1 auto">
           <MessageInput
-            onClick={onClick}
+            onGetTokenClick={onGetTokenClick}
             chatId={chatId}
             File={file}
             Emoji={emoji}
diff --git a/packages/uiweb/src/lib/components/chat/ChatViewList/ChatViewList.tsx b/packages/uiweb/src/lib/components/chat/ChatViewList/ChatViewList.tsx
index 83b396e67..b63b1ee00 100644
--- a/packages/uiweb/src/lib/components/chat/ChatViewList/ChatViewList.tsx
+++ b/packages/uiweb/src/lib/components/chat/ChatViewList/ChatViewList.tsx
@@ -76,7 +76,6 @@ export const ChatViewList: React.FC<IChatViewListProps> = (
     setChatStatusText('');
   }, [chatId, account, env]);
 
-  //need to do something about fetching connectedUser in every component
   useEffect(() => {
     (async () => {
       if (!connectedProfile && account) {
@@ -129,6 +128,7 @@ export const ChatViewList: React.FC<IChatViewListProps> = (
       setLoading(false);
     })();
   }, [chatId, pgpPrivateKey, account, env]);
+
   //moniters socket changes
   useEffect(() => {
     if (checkIfSameChat(messagesSinceLastConnection, account!, chatId)) {
@@ -166,7 +166,6 @@ export const ChatViewList: React.FC<IChatViewListProps> = (
       }
     }
   }, [groupInformationSinceLastConnection]);
- 
 
   useEffect(() => {
     if (conversationHash) {
diff --git a/packages/uiweb/src/lib/components/chat/ConnectButton/ConnectButton.tsx b/packages/uiweb/src/lib/components/chat/ConnectButton/ConnectButton.tsx
index a67c40b4d..c83175e42 100644
--- a/packages/uiweb/src/lib/components/chat/ConnectButton/ConnectButton.tsx
+++ b/packages/uiweb/src/lib/components/chat/ConnectButton/ConnectButton.tsx
@@ -1,15 +1,17 @@
-import styled from 'styled-components';
-import { IChatTheme } from '../theme';
-import { useChatData } from '../../../hooks';
-import * as PushAPI from '@pushprotocol/restapi';
 import { useContext, useEffect, useState } from 'react';
-import { init, useConnectWallet } from "@web3-onboard/react";
-import injectedModule from "@web3-onboard/injected-wallets";
+
+import styled from 'styled-components';
 import { Signer, ethers } from 'ethers';
 
+import { useAccount, useChatData } from '../../../hooks';
 import { ThemeContext } from '../theme/ThemeProvider';
-import { device } from '../../../config';
+import useGetChatProfile from '../../../hooks/useGetChatProfile';
+import useCreateChatProfile from '../../../hooks/useCreateChatProfile';
+import useDecryptPGPKey from '../../../hooks/useDecryptPGPKey';
+
 import { getAddressFromSigner } from '../../../helpers';
+import { IChatTheme } from '../theme';
+import { device } from '../../../config';
 
 /**
  * @interface IThemeProps
@@ -20,7 +22,7 @@ interface IThemeProps {
 }
 
 export const ConnectButtonSub = () => {
-  const [{ wallet, connecting }, connect, disconnect] = useConnectWallet();
+  const {wallet, connecting , connect, disconnect} = useAccount();
 
   const {
     signer,
@@ -32,11 +34,14 @@ export const ConnectButtonSub = () => {
     setSigner,
   } = useChatData();
   const theme = useContext(ThemeContext);
+  const {fetchChatProfile} = useGetChatProfile();
+  const {creteChatProfile} = useCreateChatProfile();
+  const {decryptPGPKey} = useDecryptPGPKey();
+
 
-  const newFunc = () => {
+  const setUserData = () => {
     if (wallet) {
       (async () => {
-
         const ethersProvider = new ethers.providers.Web3Provider(wallet.provider, 'any')
         const signer = ethersProvider.getSigner()
         const newAdd = await getAddressFromSigner(signer)
@@ -49,12 +54,10 @@ export const ConnectButtonSub = () => {
       setPgpPrivateKey(null)
     }
   }
-
   useEffect(() => {
-    newFunc()
+    setUserData()
   }, [wallet])
 
-
   useEffect(() => {
     (async () => {
       if (account && signer) {
@@ -63,24 +66,23 @@ export const ConnectButtonSub = () => {
     })();
   }, [account, signer]);
 
+
   const handleUserCreation = async () => {
     if (!account && !env) return;
     try {
-      let user = await PushAPI.user.get({ account: account!, env: env });
+      let user  = await fetchChatProfile({ profileId: account! ,env});
       if (!user) {
         if (!signer) return;
-        user = await PushAPI.user.create({
-          signer: signer,
-          env: env,
-        });
+        user = await creteChatProfile({ signer: signer ,env});
       }
       if (user?.encryptedPrivateKey && !pgpPrivateKey) {
-        const decryptPgpKey = await PushAPI.chat.decryptPGPKey({
-          encryptedPGPPrivateKey: user.encryptedPrivateKey,
+        const decryptPgpKey = await decryptPGPKey({
+          encryptedPrivateKey: user.encryptedPrivateKey,
           account: account!,
           signer: signer,
           env: env,
         });
+        if(decryptPgpKey)
         setPgpPrivateKey(decryptPgpKey);
       }
     } catch (e: any) {
@@ -102,10 +104,10 @@ const ConnectButtonDiv = styled.div<IThemeProps>`
  
   button{
     background: ${(props) => `${props.theme.backgroundColor.buttonBackground}!important`};
-    // color: ${(props) => `${props.theme.backgroundColor.buttonText}!important`};
-    color: #fff;
+    color: ${(props) => `${props.theme.textColor.buttonText}!important`};
     text-align:center;
     font-size: 1em;
+    cursor:pointer;
     border-radius: 10px;
     padding: 10px 20px;
     outline: none;
@@ -121,4 +123,7 @@ const ConnectButtonDiv = styled.div<IThemeProps>`
   @media ${device.mobileL} {
     font-size: 12px;
   }
+  body.modal-open {
+    overflow-y: hidden;
+  }
 `;
diff --git a/packages/uiweb/src/lib/components/chat/ConnectButton/index.tsx b/packages/uiweb/src/lib/components/chat/ConnectButton/index.tsx
index 3465bf8ba..e626a4465 100644
--- a/packages/uiweb/src/lib/components/chat/ConnectButton/index.tsx
+++ b/packages/uiweb/src/lib/components/chat/ConnectButton/index.tsx
@@ -1,29 +1,23 @@
 import { IChatTheme } from '../theme';
 
 import { ConnectButtonSub } from './ConnectButton';
-import { InfuraAPIKey } from '../../../config';
+import { BLOCKNATIVE_PROJECT_ID, InfuraAPIKey } from '../../../config';
 import { Web3OnboardProvider } from '@web3-onboard/react';
 import injectedModule from '@web3-onboard/injected-wallets';
 import walletConnectModule from '@web3-onboard/walletconnect'
 import init from '@web3-onboard/core';
-import { ethers } from 'ethers';
 
+const APP_META_DATA = {
+  name: 'Push Protocol',
+  icon: 'https://files.slack.com/files-pri/T011WQBLH39-F05QWQA0MSR/pushlogoblocknative.png',
+  description: 'Example showcasing how to connect a wallet.',
 
-/**
- * @interface IThemeProps
- * this interface is used for defining the props for styled components
- */
-interface IThemeProps {
-  theme?: IChatTheme;
-}
-
-const wcv2InitOptions = {
-  projectId: '64a44a0fb537407bfe97d24330e4109c',
-  requiredChains: [1, 56]
+  recommendedInjectedWallets: [
+    { name: 'MetaMask', url: 'https://metamask.io' },
+  ]
 }
 
-const walletConnect = walletConnectModule(wcv2InitOptions)
-const chains = [
+const CHAINS = [
   {
     id: '0x1',
     token: 'ETH',
@@ -61,22 +55,23 @@ const chains = [
     rpcUrl: 'https://rpc.ankr.com/arbitrum'
   }
 ]
-const wallets = [injectedModule(), walletConnect]
 
-const appMetadata = {
-  name: 'Push Protocol',
-  icon: 'https://files.slack.com/files-pri/T011WQBLH39-F05QWQA0MSR/pushlogoblocknative.png',
-  description: 'Example showcasing how to connect a wallet.',
 
-  recommendedInjectedWallets: [
-    { name: 'MetaMask', url: 'https://metamask.io' },
-  ]
+const wcv2InitOptions = {
+  projectId: BLOCKNATIVE_PROJECT_ID,
+  requiredChains: [1, 56]
 }
 
+const walletConnect = walletConnectModule(wcv2InitOptions)
+
+const wallets = [injectedModule(), walletConnect]
+
+
+
 const web3OnBoard = init({
   wallets,
-  chains,
-  appMetadata,
+  chains:CHAINS,
+  appMetadata:APP_META_DATA,
   accountCenter: {
     desktop: {
       enabled: false
diff --git a/packages/uiweb/src/lib/components/chat/MessageInput/MessageInput.tsx b/packages/uiweb/src/lib/components/chat/MessageInput/MessageInput.tsx
index 5b06abac0..9a016c54a 100644
--- a/packages/uiweb/src/lib/components/chat/MessageInput/MessageInput.tsx
+++ b/packages/uiweb/src/lib/components/chat/MessageInput/MessageInput.tsx
@@ -1,19 +1,14 @@
-import {
-  useChatData,
-  useClickAway,
-  useDeviceWidthCheck,
-  usePushChatSocket,
-} from '../../../hooks';
-import type { FileMessageContent } from '../../../types';
 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 { MdCheckCircle, MdError } from 'react-icons/md';
+import EmojiPicker, { EmojiClickData } from 'emoji-picker-react';
+import GifPicker from 'gif-picker-react';
+import { IFeeds } from '@pushprotocol/restapi';
+
 import { Section, Div, Span } from '../../reusables';
 import { EmojiIcon } from '../../../icons/Emoji';
-import EmojiPicker, { EmojiClickData } from 'emoji-picker-react';
 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';
@@ -25,21 +20,28 @@ import TokenGatedIcon from '../../../icons/Token-Gated.svg';
 import { Modal } from '../reusables/Modal';
 import { Image } from '../../reusables';
 import { ConnectButtonComp } from '../ConnectButton';
-import useGetGroupByID from '../../../hooks/chat/useGetGroupByID';
 import {
   checkIfIntent,
   getDefaultFeedObject,
   getNewChatUser,
   setAccessControl,
-  walletToPCAIP10,
 } from '../../../helpers';
 import useFetchChat from '../../../hooks/chat/useFetchChat';
 import useGetChatProfile from '../../../hooks/useGetChatProfile';
-import { IFeeds } from '@pushprotocol/restapi';
 import useGetGroup from '../../../hooks/chat/useGetGroup';
 import useApproveChatRequest from '../../../hooks/chat/useApproveChatRequest';
+import {
+  useChatData,
+  useClickAway,
+  useDeviceWidthCheck,
+  usePushChatSocket,
+} from '../../../hooks';
+
+import type { FileMessageContent } from '../../../types';
+import { GIFType, IChatTheme, MessageInputProps } from '../exportedTypes';
+import { PUBLIC_GOOGLE_TOKEN, device } from '../../../config';
+import { checkIfAccessVerifiedGroup, checkIfMember } from '../helpers';
 import useToast from '../reusables/NewToast';
-import { MdCheckCircle, MdError } from 'react-icons/md';
 
 /**
  * @interface IThemeProps
@@ -49,13 +51,204 @@ interface IThemeProps {
   theme?: IChatTheme;
 }
 
+export interface JoinVerificationGroupSectionProps {
+  isRules: boolean;
+  isMember: boolean;
+  onGetTokenClick?: () => void;
+  handleJoinGroup: () => void;
+  checkVerification: () => void;
+}
+
+const JoinVerificationGroupSection: React.FC<
+  JoinVerificationGroupSectionProps
+> = ({ isRules, isMember, onGetTokenClick, handleJoinGroup, checkVerification }) => {
+  const theme = useContext(ThemeContext);
+  const { loading: approveLoading } = useApproveChatRequest();
+  const {
+    verificationSuccessfull,
+    setVerificationSuccessfull,
+    verified,
+    loading: accessLoading,
+  } = useVerifyAccessControl();
+  const { pgpPrivateKey } = useChatData();
+
+  const isJoinGroup = () =>{
+    return pgpPrivateKey && !isMember;
+  }
+
+  const isNotVerified = () =>{
+    return pgpPrivateKey && !verified && isMember && isRules;
+  }
+  return (
+    <>
+      {isJoinGroup() ||
+        isNotVerified() && (
+          <Section
+            width="100%"
+            justifyContent="space-between"
+            alignItems="center"
+          >
+            <Span
+              padding="8px 8px 8px 16px"
+              color={theme.textColor?.chatReceivedBubbleText}
+              fontSize="15px"
+              fontWeight="500"
+              textAlign="start"
+            >
+              {isJoinGroup() &&
+                'Click on the button to join the group'}
+              {isNotVerified() && (
+                <>
+                  Sending messages requires{' '}
+                  <Span color={theme.backgroundColor?.chatSentBubbleBackground}>
+                    1 PUSH Token
+                  </Span>{' '}
+                  for participation.{' '}
+                  <Link
+                    href="https://docs.push.org/developers/developer-tooling/push-sdk/sdk-packages-details/epnsproject-sdk-restapi/for-chat/group-chat#to-create-a-token-gated-group"
+                    target="_blank"
+                    color={theme.backgroundColor?.chatSentBubbleBackground}
+                  >
+                    Learn More <OpenLink />
+                  </Link>
+                </>
+              )}
+            </Span>
+            <ConnectWrapper>
+              <Connect
+                onClick={() =>
+                  isJoinGroup()
+                    ? handleJoinGroup()
+                    : checkVerification()
+                }
+              >
+                { isJoinGroup() && approveLoading ? (
+                  <Spinner color="#fff" size="24" />
+                ) : (
+                  ' Join Group '
+                )}
+                {isNotVerified() &&
+                  (accessLoading ? (
+                    <Spinner color="#fff" size="24" />
+                  ) : (
+                    'Verify Access'
+                  ))}
+              </Connect>
+            </ConnectWrapper>
+          </Section>
+        )}
+      {pgpPrivateKey && !verificationSuccessfull && (
+        <Modal width="439px">
+          <Section
+            padding="10px"
+            theme={theme}
+            gap="32px"
+            flexDirection="column"
+          >
+            <Span
+              fontWeight="500"
+              fontSize="24px"
+              color={theme.textColor?.encryptionMessageText}
+            >
+              Verification Failed
+            </Span>
+            <Span
+              color={theme.textColor?.encryptionMessageText}
+              fontSize="16px"
+            >
+              Please ensure the following conditions are met to participate and
+              send messages.
+            </Span>
+            <Section gap="8px" alignItems="start">
+              <Image
+                verticalAlign="start"
+                height="24"
+                width="24"
+                src={TokenGatedIcon}
+                alt="token-gated"
+              />
+              <Section flexDirection="column">
+                {' '}
+                <Span
+                  color={theme.textColor?.encryptionMessageText}
+                  textAlign="start"
+                  alignSelf="start"
+                >
+                  Token Gated
+                </Span>
+                <Span
+                  fontWeight="500"
+                  textAlign="start"
+                  color={theme.textColor?.encryptionMessageText}
+                >
+                  You need to have{' '}
+                  <Span color={theme.backgroundColor?.chatSentBubbleBackground}>
+                    1 PUSH Token
+                  </Span>{' '}
+                  in your wallet to be able to send messages.
+                </Span>
+              </Section>
+            </Section>
+            <Section gap="8px">
+              <TokenWrapper
+                onClick={() => {
+                  if (onGetTokenClick) {
+                    onGetTokenClick();
+                  }
+                  setVerificationSuccessfull(true);
+                }}
+              >
+                <TokenGet>
+                  Get Free Tokens
+                  <OpenLink height="12" width="12" />
+                </TokenGet>
+              </TokenWrapper>
+              <ConnectWrapperClose
+                onClick={() => {
+                  setVerificationSuccessfull(true);
+                }}
+              >
+                <ConnectClose>Close</ConnectClose>
+              </ConnectWrapperClose>
+            </Section>
+          </Section>
+        </Modal>
+      )}
+    </>
+  );
+};
+const ConnectButtonSection: React.FC = () => {
+  const { signer } = useChatData();
+  return (
+    <Section
+      width="100%"
+      justifyContent="space-between"
+      alignItems="center"
+      padding="8px"
+    >
+      {!signer && (
+        <Span
+          padding="8px 8px 8px 16px"
+          color="#B6BCD6"
+          fontSize="15px"
+          fontWeight="400"
+          textAlign="start"
+        >
+          You need to connect your wallet to get started
+        </Span>
+      )}
+      <ConnectButtonComp />
+    </Section>
+  );
+};
+
 export const MessageInput: React.FC<MessageInputProps> = ({
   chatId,
   Emoji = true,
   GIF = true,
   File = true,
   isConnected,
-  onClick,
+  onGetTokenClick,
 }) => {
   const [typedMessage, setTypedMessage] = useState<string>('');
   const [showEmojis, setShowEmojis] = useState<boolean>(false);
@@ -77,7 +270,6 @@ export const MessageInput: React.FC<MessageInputProps> = ({
   const isMobile = useDeviceWidthCheck(425);
   const { sendMessage, loading } = usePushSendMessage();
   const {
-    verificationSuccessfull,
     verifyAccessControl,
     setVerificationSuccessfull,
     verified,
@@ -198,8 +390,10 @@ export const MessageInput: React.FC<MessageInputProps> = ({
 
   useEffect(() => {
     if (!account && !env && !chatId) return;
-    if (account && env && chatId && chatFeed && chatFeed?.groupInformation)
-      checkIfrules();
+    if (account && env && chatId && chatFeed && chatFeed?.groupInformation) {
+      setIsMember(checkIfMember(chatFeed, account));
+      setIsRules(checkIfAccessVerifiedGroup(chatFeed));
+    }
   }, [chatId, chatFeed, account, env]);
 
   const addEmoji = (emojiData: EmojiClickData, event: MouseEvent): void => {
@@ -334,34 +528,12 @@ export const MessageInput: React.FC<MessageInputProps> = ({
     }
   };
 
-  //shift to helpers
-  const checkIfrules = async () => {
-    const members = chatFeed?.groupInformation?.members || [];
-    const pendingMembers = chatFeed?.groupInformation?.pendingMembers || [];
-    const allMembers = [...members, ...pendingMembers];
-    allMembers.forEach((acc) => {
-      if (
-        acc.wallet.toLowerCase() === walletToPCAIP10(account!).toLowerCase()
-      ) {
-        setIsMember(true);
-      }
-    });
-
-    if (
-      chatFeed?.groupInformation?.rules &&
-      (chatFeed?.groupInformation?.rules?.entry ||
-        chatFeed?.groupInformation?.rules?.chat)
-    ) {
-      setIsRules(true);
-    }
-  };
-
-  //break into different components(connect button, join group and verification, typebar input)
   return !Object.keys(chatFeed || {}).length ? (
     <>
       {!pgpPrivateKey && (isConnected || !!signer) && (
         <TypebarSection
           width="100%"
+          overflow="hidden"
           borderRadius="13px"
           position="static"
           padding={` ${pgpPrivateKey ? '13px 16px' : ''}`}
@@ -369,316 +541,154 @@ export const MessageInput: React.FC<MessageInputProps> = ({
           alignItems="center"
           justifyContent="space-between"
         >
-          <Section
-            width="100%"
-            justifyContent="space-between"
-            alignItems="center"
-            padding="8px"
-          >
-            {!signer && (
-              <Span
-                padding="8px 8px 8px 16px"
-                color="#B6BCD6"
-                fontSize="15px"
-                fontWeight="400"
-                textAlign="start"
-              >
-                You need to connect your wallet to get started
-              </Span>
-            )}
-            <ConnectButtonComp />
-          </Section>
+          <ConnectButtonSection />
         </TypebarSection>
       )}
     </>
   ) : !checkIfIntent({ chat: chatFeed, account: account! }) &&
     Object.keys(chatFeed || {}).length ? (
-    <Container theme={theme}>
-      <TypebarSection
-        borderRadius="13px"
-        position="static"
-        padding={` ${pgpPrivateKey ? '13px 16px' : ''}`}
-        background={`${theme.backgroundColor?.messageInputBackground}`}
-        alignItems="center"
-        justifyContent="space-between"
-      >
-        {Object.keys(chatFeed || {}).length && chatFeed?.groupInformation ? (
+    <TypebarSection
+      width="100%"
+      overflow="hidden"
+      borderRadius={theme.borderRadius?.messageInput}
+      position="static"
+      border={theme.border?.messageInput}
+      padding={` ${pgpPrivateKey ? '13px 16px' : ''}`}
+      background={`${theme.backgroundColor?.messageInputBackground}`}
+      alignItems="center"
+      justifyContent="space-between"
+    >
+      {Object.keys(chatFeed || {}).length && chatFeed?.groupInformation ? (
+        <JoinVerificationGroupSection
+          isMember={isMember}
+          isRules={isRules}
+          onGetTokenClick={onGetTokenClick}
+          handleJoinGroup={handleJoinGroup}
+          checkVerification={checkVerification}
+        />
+      ) : null}
+      {pgpPrivateKey &&
+        (((isRules ? verified : true) && isMember) ||
+          (chatFeed && !chatFeed?.groupInformation)) && (
           <>
-            {pgpPrivateKey && !isMember && (
-              <Section
-                width="100%"
-                justifyContent="space-between"
-                alignItems="center"
-              >
-                <Span
-                  padding="8px 8px 8px 16px"
-                  color={theme.textColor?.chatReceivedBubbleText}
-                  fontSize="15px"
-                  fontWeight="500"
-                  textAlign="start"
+            <Section gap="8px" flex="1" position="static">
+              {Emoji && (
+                <Div
+                  width="25px"
+                  cursor="pointer"
+                  height="25px"
+                  alignSelf="end"
+                  onClick={() => setShowEmojis(!showEmojis)}
                 >
-                  Click on the button to join the group
-                </Span>
-                <ConnectWrapper>
-                  <Connect onClick={() => handleJoinGroup()}>
-                    {approveLoading ? (
-                      <Spinner color="#fff" size="24" />
-                    ) : (
-                      ' Join Group '
-                    )}
-                  </Connect>
-                </ConnectWrapper>
-              </Section>
-            )}
-            {pgpPrivateKey && !verified && isMember && isRules && (
-              <Section
-                width="100%"
-                justifyContent="space-between"
-                alignItems="center"
-              >
-                <Span
-                  padding="8px 8px 8px 16px"
-                  color={theme.textColor?.chatReceivedBubbleText}
-                  fontSize="15px"
-                  fontWeight="500"
-                  textAlign="start"
+                  <EmojiIcon color={theme.iconColor?.emoji} />
+                </Div>
+              )}
+              {showEmojis && (
+                <Section
+                  ref={modalRef}
+                  position="absolute"
+                  bottom="2.5rem"
+                  left="2.5rem"
+                  zIndex="700"
                 >
-                  Sending messages requires{' '}
-                  <Span color={theme.backgroundColor?.chatSentBubbleBackground}>
-                    1 PUSH Token
-                  </Span>{' '}
-                  for participation.{' '}
-                  <Link
-                    href="https://docs.push.org/developers/developer-tooling/push-sdk/sdk-packages-details/epnsproject-sdk-restapi/for-chat/group-chat#to-create-a-token-gated-group"
-                    target="_blank"
-                    color={theme.backgroundColor?.chatSentBubbleBackground}
-                  >
-                    Learn More <OpenLink />
-                  </Link>
-                </Span>
-                <ConnectWrapper>
-                  <Connect onClick={() => checkVerification()}>
-                    {accessLoading ? (
-                      <Spinner color="#fff" size="24" />
-                    ) : (
-                      'Verify Access'
-                    )}
-                  </Connect>
-                </ConnectWrapper>
-              </Section>
-            )}
-            {pgpPrivateKey && !verificationSuccessfull && (
-              <Modal width="439px">
+                  <EmojiPicker
+                    width={isMobile ? 260 : 320}
+                    height={370}
+                    onEmojiClick={addEmoji}
+                  />
+                </Section>
+              )}
+              <MultiLineInput
+                disabled={loading ? true : false}
+                theme={theme}
+                onKeyDown={(event) => {
+                  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}
+              />
+            </Section>
+            <SendSection position="static">
+              {GIF && (
                 <Section
-                  padding="10px"
-                  theme={theme}
-                  gap="32px"
-                  flexDirection="column"
+                  width="34px"
+                  height="24px"
+                  cursor="pointer"
+                  alignSelf="end"
+                  onClick={() => setGifOpen(!gifOpen)}
                 >
-                  <Span
-                    fontWeight="500"
-                    fontSize="24px"
-                    color={theme.textColor?.encryptionMessageText}
-                  >
-                    Verification Failed
-                  </Span>
-                  <Span
-                    color={theme.textColor?.encryptionMessageText}
-                    fontSize="16px"
-                  >
-                    Please ensure the following conditions are met to
-                    participate and send messages.
-                  </Span>
-                  <Section gap="8px" alignItems="start">
-                    <Image
-                      verticalAlign="start"
-                      height="24"
-                      width="24"
-                      src={TokenGatedIcon}
-                      alt="token-gated"
-                    />
-                    <Section flexDirection="column">
-                      {' '}
-                      {/* Added marginLeft */}
-                      <Span
-                        color={theme.textColor?.encryptionMessageText}
-                        textAlign="start"
-                        alignSelf="start"
-                      >
-                        Token Gated
-                      </Span>
-                      <Span
-                        fontWeight="500"
-                        textAlign="start"
-                        color={theme.textColor?.encryptionMessageText}
-                      >
-                        You need to have{' '}
-                        <Span
-                          color={
-                            theme.backgroundColor?.chatSentBubbleBackground
-                          }
-                        >
-                          1 PUSH Token
-                        </Span>{' '}
-                        in your wallet to be able to send messages.
-                      </Span>
-                    </Section>
-                  </Section>
-                  <Section gap="8px">
-                    <TokenWrapper
-                      onClick={() => {
-                        if (onClick) {
-                          onClick();
-                        }
-                        setVerificationSuccessfull(true);
-                      }}
-                    >
-                      <TokenGet>
-                        Get Free Tokens
-                        <OpenLink height="12" width="12" />
-                      </TokenGet>
-                    </TokenWrapper>
-                    <ConnectWrapperClose
-                      onClick={() => {
-                        setVerificationSuccessfull(true);
-                      }}
-                    >
-                      <ConnectClose>Close</ConnectClose>
-                    </ConnectWrapperClose>
-                  </Section>
+                  <GifIcon />
                 </Section>
-              </Modal>
-            )}
-          </>
-        ) : null}
-        {pgpPrivateKey &&
-          (((isRules ? verified : true) && isMember) ||
-            (chatFeed && !chatFeed?.groupInformation)) && (
-            <>
-              <Section gap="8px" flex="1" position="static">
-                {Emoji && (
-                  <Div
-                    width="25px"
-                    cursor="pointer"
-                    height="25px"
-                    alignSelf="end"
-                    onClick={() => setShowEmojis(!showEmojis)}
-                  >
-                    <EmojiIcon color={theme.iconColor?.emoji} />
-                  </Div>
-                )}
-                {showEmojis && (
-                  <Section
-                    ref={modalRef}
-                    position="absolute"
-                    bottom="2.5rem"
-                    left="2.5rem"
-                    zIndex="700"
-                  >
-                    <EmojiPicker
-                      width={isMobile ? 260 : 320}
-                      height={370}
-                      onEmojiClick={addEmoji}
+              )}
+              {gifOpen && (
+                <Section
+                  position="absolute"
+                  bottom="2.5rem"
+                  zIndex="1"
+                  right={isMobile ? '7rem' : '8rem'}
+                  ref={modalRef}
+                >
+                  <GifPicker
+                    onGifClick={sendGIF}
+                    width={isMobile ? 260 : 320}
+                    height={370}
+                    tenorApiKey={String(PUBLIC_GOOGLE_TOKEN)}
+                  />
+                </Section>
+              )}
+              <Section onClick={handleUploadFile}>
+                {!fileUploading && File && (
+                  <>
+                    <Section
+                      width="17"
+                      height="24px"
+                      cursor="pointer"
+                      alignSelf="end"
+                    >
+                      <AttachmentIcon color={theme.iconColor?.attachment} />
+                    </Section>
+                    <FileInput
+                      type="file"
+                      ref={fileUploadInputRef}
+                      onChange={(e) => uploadFile(e)}
                     />
-                  </Section>
+                  </>
                 )}
-                <MultiLineInput
-                  disabled={loading ? true : false}
-                  theme={theme}
-                  onKeyDown={(event) => {
-                    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}
-                />
               </Section>
-              <SendSection position="static">
-                {GIF && (
-                  <Section
-                    width="34px"
-                    height="24px"
-                    cursor="pointer"
-                    alignSelf="end"
-                    onClick={() => setGifOpen(!gifOpen)}
-                  >
-                    <GifIcon />
-                  </Section>
-                )}
-                {gifOpen && (
-                  <Section
-                    position="absolute"
-                    bottom="2.5rem"
-                    zIndex="1"
-                    right={isMobile ? '7rem' : '8rem'}
-                    ref={modalRef}
-                  >
-                    <GifPicker
-                      onGifClick={sendGIF}
-                      width={isMobile ? 260 : 320}
-                      height={370}
-                      tenorApiKey={String(PUBLIC_GOOGLE_TOKEN)}
-                    />
-                  </Section>
-                )}
-                <Section onClick={handleUploadFile}>
-                  {!fileUploading && File && (
-                    <>
-                      <Section
-                        width="17"
-                        height="24px"
-                        cursor="pointer"
-                        alignSelf="end"
-                      >
-                        <AttachmentIcon color={theme.iconColor?.attachment} />
-                      </Section>
-                      <FileInput
-                        type="file"
-                        ref={fileUploadInputRef}
-                        onChange={(e) => uploadFile(e)}
-                      />
-                    </>
-                  )}
+              {!(loading || fileUploading) && (
+                <Section
+                  cursor="pointer"
+                  alignSelf="end"
+                  height="24px"
+                  onClick={() => sendTextMsg()}
+                >
+                  <SendCompIcon color={theme.iconColor?.sendButton} />
                 </Section>
-                {!(loading || fileUploading) && (
-                  <Section
-                    cursor="pointer"
-                    alignSelf="end"
-                    height="24px"
-                    onClick={() => sendTextMsg()}
-                  >
-                    <SendCompIcon color={theme.iconColor?.sendButton} />
-                  </Section>
-                )}
+              )}
 
-                {(loading || fileUploading) && (
-                  <Section alignSelf="end" height="24px">
-                    <Spinner color={theme.spinnerColor} size="22" />
-                  </Section>
-                )}
-              </SendSection>
-            </>
-          )}
-      </TypebarSection>
-    </Container>
+              {(loading || fileUploading) && (
+                <Section alignSelf="end" height="24px">
+                  <Spinner color={theme.spinnerColor} size="22" />
+                </Section>
+              )}
+            </SendSection>
+          </>
+        )}
+    </TypebarSection>
   ) : (
     <></>
   );
 };
 
-const Container = styled.div<IThemeProps>`
-  width: 100%;
-  overflow: hidden;
-  border: ${(props) => props.theme.border?.messageInput};
-  border-radius: ${(props) => props.theme.borderRadius?.messageInput};
-`;
-const TypebarSection = styled(Section)`
+const TypebarSection = styled(Section)<{ border?: string }>`
   gap: 10px;
+  border: ${(props) => props.border || 'none'};
   @media ${device.mobileL} {
     gap: 0px;
   }
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 4bc874936..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 '../reusables/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 (
-        <Modal width='439px'>
-            <Section theme={theme} gap='32px' flexDirection='column'>
-                <Span fontWeight='500' fontSize='24px'>Verification Failed</Span>
-                <Span color={theme.textColor?.encryptionMessageText} fontSize='16px'>Please ensure the following conditions are met to participate and send messages.</Span>
-                <Section gap='8px' alignItems='start'>
-                    <Image verticalAlign='start' height='32' width='32' src={TokenGatedIcon} alt='token-gated' />
-                    <Section flexDirection='column'> {/* Added marginLeft */}
-                        <Span textAlign='start' alignSelf='start'>Token Gated</Span>
-                        <Span textAlign='start'>You need to have 1 PUSH Token in your wallet to be able to send messages.</Span>
-                    </Section>
-                </Section>
-                <Section gap='8px'>
-                    <ConnectWrapper>
-                        <Connect>
-                            Get Tokens
-                            <OpenLink height='12' width='12' />
-                        </Connect>
-                    </ConnectWrapper>
-                    <ConnectWrapperClose onClick={() => {
-                         setVerificationSuccessfull(false)
-                         console.log(verificationSuccessfull) 
-                    }}>
-                        <ConnectClose>
-                            Close
-                        </ConnectClose>
-                    </ConnectWrapperClose>
-                </Section>
-            </Section>
-        </Modal>
-    )
-}
-
-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/components/chat/exportedTypes.ts b/packages/uiweb/src/lib/components/chat/exportedTypes.ts
index f4ac46dfa..e362528f7 100644
--- a/packages/uiweb/src/lib/components/chat/exportedTypes.ts
+++ b/packages/uiweb/src/lib/components/chat/exportedTypes.ts
@@ -19,7 +19,7 @@ export interface IChatViewComponentProps {
   gif?: boolean;
   file?: boolean;
   isConnected?: boolean;
-  onClick?: () => void;
+  onGetTokenClick?: () => void;
 }
 
 export interface IChatProfile {
@@ -57,7 +57,7 @@ export interface MessageInputProps {
   File?: boolean;
   Image?: boolean;
   isConnected?: boolean;
-  onClick?: () => void;
+  onGetTokenClick?: () => void;
 }
 
 
diff --git a/packages/uiweb/src/lib/components/chat/helpers/helper.ts b/packages/uiweb/src/lib/components/chat/helpers/helper.ts
index 531e29cea..77899a9b0 100644
--- a/packages/uiweb/src/lib/components/chat/helpers/helper.ts
+++ b/packages/uiweb/src/lib/components/chat/helpers/helper.ts
@@ -2,6 +2,7 @@ import { IMessagePayload, User } from "../exportedTypes";
 import { ethers } from "ethers";
 import { IGroup } from "../../../types";
 import { walletToPCAIP10 } from "../../../helpers";
+import { IFeeds } from "@pushprotocol/restapi";
 
 
 export const profilePicture = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAvklEQVR4AcXBsW2FMBiF0Y8r3GQb6jeBxRauYRpo4yGQkMd4A7kg7Z/GUfSKe8703fKDkTATZsJsrr0RlZSJ9r4RLayMvLmJjnQS1d6IhJkwE2bT13U/DBzp5BN73xgRZsJMmM1HOolqb/yWiWpvjJSUiRZWopIykTATZsJs5g+1N6KSMiO1N/5DmAkzYTa9Lh6MhJkwE2ZzSZlo7xvRwson3txERzqJhJkwE2bT6+JhoKTMJ2pvjAgzYSbMfgDlXixqjH6gRgAAAABJRU5ErkJggg==`;
@@ -78,4 +79,31 @@ export function isValidETHAddress(address: string) {
     return ethers.utils.isAddress(address);
   }
 
-  
\ No newline at end of file
+ export  const checkIfMember =  (chatFeed:IFeeds,account:string) => {
+    const members = chatFeed?.groupInformation?.members || [];
+    const pendingMembers = chatFeed?.groupInformation?.pendingMembers || [];
+    const allMembers = [...members, ...pendingMembers];
+    let isMember = false;
+    allMembers.forEach((acc) => {
+      if (
+        acc.wallet.toLowerCase() === walletToPCAIP10(account!).toLowerCase()
+      ) {
+       isMember = true;
+      }
+    });
+
+   
+    return isMember;
+  };
+
+  export  const checkIfAccessVerifiedGroup =  (chatFeed:IFeeds) => {
+    let isRules = false;
+    if (
+      chatFeed?.groupInformation?.rules &&
+      (chatFeed?.groupInformation?.rules?.entry ||
+        chatFeed?.groupInformation?.rules?.chat)
+    ) {
+      isRules = true;
+    }
+    return isRules;
+  };
diff --git a/packages/uiweb/src/lib/components/chat/reusables/ChatSearchInput.tsx b/packages/uiweb/src/lib/components/chat/reusables/ChatSearchInput.tsx
index 12d41764e..17d0b6355 100644
--- a/packages/uiweb/src/lib/components/chat/reusables/ChatSearchInput.tsx
+++ b/packages/uiweb/src/lib/components/chat/reusables/ChatSearchInput.tsx
@@ -60,6 +60,7 @@ export const ChatSearchInput: React.FC<ChatSearchInputPropType> = ({
       clearInput();
     }
   };
+  
   return (
     <Container
       justifyContent="space-between"
diff --git a/packages/uiweb/src/lib/config/constants.ts b/packages/uiweb/src/lib/config/constants.ts
index 068ca243b..5761f3742 100644
--- a/packages/uiweb/src/lib/config/constants.ts
+++ b/packages/uiweb/src/lib/config/constants.ts
@@ -18,8 +18,6 @@ export const Constants = {
 };
 
 export const ALCHEMY_API_KEY = 'rtkd-a4JWpnViQBZdNCiFBGTJdp5e0R2';
-export const RAINBOW_PROJECT_ID = 'e22146926e005c4e513b24024521ef51';
-export const RAINBOW_APP_NAME = 'Push-sdk';
 export const NETWORK_DETAILS = {
   5: {
     network: "goerli",
@@ -73,7 +71,7 @@ export const allowedNetworks = {
   ]
 }
 
-export const blockNativeApikey = 'f55f3a76-8510-4af8-9833-b7f85255de83'
+export const BLOCKNATIVE_PROJECT_ID = '64a44a0fb537407bfe97d24330e4109c'
 
 export const InfuraAPIKey = '150f25623ae64d08ab7ec7dd0c6b6ee9';
 
diff --git a/packages/uiweb/src/lib/hooks/chat/index.ts b/packages/uiweb/src/lib/hooks/chat/index.ts
index b83472c32..d497e66d6 100644
--- a/packages/uiweb/src/lib/hooks/chat/index.ts
+++ b/packages/uiweb/src/lib/hooks/chat/index.ts
@@ -7,4 +7,5 @@ export * from './useFetchChat';
 export * from './useFetchConversationHash';
 export * from  './usePushSendMessage';
 export * from './useGetGroupByID';
+export * from './useAccount';
 export * from './useUpdateGroup';
diff --git a/packages/uiweb/src/lib/hooks/chat/useAccount.ts b/packages/uiweb/src/lib/hooks/chat/useAccount.ts
new file mode 100644
index 000000000..396fabb54
--- /dev/null
+++ b/packages/uiweb/src/lib/hooks/chat/useAccount.ts
@@ -0,0 +1,35 @@
+import { useConnectWallet, useSetChain } from '@web3-onboard/react';
+import { ethers } from 'ethers';
+
+export const useAccount = () => {
+  const [{ wallet, connecting }, connect, disconnect, updateBalances, setWalletModules, setPrimaryWallet] =
+    useConnectWallet();
+
+  const [{ chains, connectedChain, settingChain }, setChain] = useSetChain();
+
+  const isActive = () => {
+    return wallet && wallet.accounts.length > 0 ? true : false;
+  };
+
+  const switchChain = async (desiredChain: number) => {
+    setChain({ chainId: ethers.utils.hexValue(desiredChain) });
+  };
+
+  return {
+    wallet,
+    connecting,
+    connect,
+    disconnect,
+    updateBalances,
+    setWalletModules,
+    setPrimaryWallet,
+    provider: wallet ? new ethers.providers.Web3Provider(wallet.provider, 'any') : undefined,
+    account: wallet && wallet.accounts.length > 0 ? ethers.utils.getAddress(wallet.accounts[0].address) : undefined,
+    chainId: connectedChain ? Number(connectedChain.id) : undefined,
+    isActive,
+    setChain,
+    switchChain,
+    settingChain,
+    chains,
+  };
+};
\ No newline at end of file
diff --git a/packages/uiweb/src/lib/hooks/index.ts b/packages/uiweb/src/lib/hooks/index.ts
index 7b432b467..0da0a8f8c 100644
--- a/packages/uiweb/src/lib/hooks/index.ts
+++ b/packages/uiweb/src/lib/hooks/index.ts
@@ -8,4 +8,6 @@ export * from './chatAndNotification';
 export * from './useDivOffsetWidth';
 export * from './useDeviceWidthCheck';
 export * from './useGetChatProfile';
-export * from './useMediaQuery';
\ No newline at end of file
+export * from './useMediaQuery';
+export * from './useCreateChatProfile';
+export * from './useDecryptPGPKey';
\ No newline at end of file
diff --git a/packages/uiweb/src/lib/hooks/useCreateChatProfile.ts b/packages/uiweb/src/lib/hooks/useCreateChatProfile.ts
new file mode 100644
index 000000000..fea956c0e
--- /dev/null
+++ b/packages/uiweb/src/lib/hooks/useCreateChatProfile.ts
@@ -0,0 +1,33 @@
+import * as PushAPI from '@pushprotocol/restapi';
+import { useCallback, useContext } from 'react';
+import { SignerType } from '@pushprotocol/restapi';
+
+export interface CreateChatProfileParams {
+  signer: SignerType | undefined;
+  env:PushAPI.Env
+}
+
+const useCreateChatProfile = () => {
+  const creteChatProfile = useCallback(
+    async ({
+      signer,
+      env
+    }: CreateChatProfileParams): Promise<PushAPI.IUser | undefined> => {
+      try {
+        const profile = await PushAPI.user.create({
+          env: env,
+          signer: signer,
+        });
+        return profile;
+      } catch (error) {
+        console.log(error);
+        return;
+      }
+    },
+    []
+  );
+
+  return { creteChatProfile };
+};
+
+export default useCreateChatProfile;
diff --git a/packages/uiweb/src/lib/hooks/useDecryptPGPKey.ts b/packages/uiweb/src/lib/hooks/useDecryptPGPKey.ts
new file mode 100644
index 000000000..b5fe1ff37
--- /dev/null
+++ b/packages/uiweb/src/lib/hooks/useDecryptPGPKey.ts
@@ -0,0 +1,39 @@
+import * as PushAPI from '@pushprotocol/restapi';
+import { useCallback, useContext } from 'react';
+import { SignerType } from '@pushprotocol/restapi';
+
+export interface DecryptPGPKeyParams {
+  account: string;
+  signer: SignerType | undefined;
+  encryptedPrivateKey: string;
+  env:PushAPI.Env
+}
+
+const useDecryptPGPKey = () => {
+  const decryptPGPKey = useCallback(
+    async ({
+      account,
+      encryptedPrivateKey,
+      signer,
+      env
+    }: DecryptPGPKeyParams): Promise<string |  undefined> => {
+      try {
+        const decryptPgpKey = await PushAPI.chat.decryptPGPKey({
+            encryptedPGPPrivateKey: encryptedPrivateKey,
+            account: account!,
+            signer: signer,
+            env: env,
+          });
+        return decryptPgpKey;
+      } catch (error) {
+        console.log(error);
+        return;
+      }
+    },
+    []
+  );
+
+  return { decryptPGPKey };
+};
+
+export default useDecryptPGPKey;