Onboarding blocknative

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

@@ -13,11 +13,8 @@ const ChatViewComponentTest = () => {
   return (
     <div>
       <h2>Chat UI Test page</h2>
-
-      {/* <Loader show={isLoading} /> */}
-    <ChatViewComponentCard>
-
-      <ChatViewComponent onClick={() => console.log("BOIIII RETURNNNSSSSS")} chatId='0x0d73BfA82E7C4f8997b989bB44C4566FA4553776' limit={10}/>
+      <ChatViewComponentCard>
+        <ChatViewComponent onClick={() => console.log("BOIIII RETURNNNSSSSS")} chatId='b8e068e02fe12d7136bc2f24408835573f30c6fbf0b65ea26ab4c7055a2c85f1' limit={10} isConnected={true} />
       </ChatViewComponentCard>
     </div>
   );

packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatViewListTest.tsx

@@ -3,37 +3,42 @@ import styled from 'styled-components';
 import * as PUSHAPI from '@pushprotocol/restapi';
 import { Link } from 'react-router-dom';
 import { Section } from '../components/StyledComponents';
-import { ChatViewList } from '@pushprotocol/uiweb';
+import {  ChatViewList } from '@pushprotocol/uiweb';
 import { EnvContext, Web3Context } from '../context';
 import { usePushChatSocket } from '@pushprotocol/uiweb';
 import { MessageInput } from '@pushprotocol/uiweb';
 
+
 const ChatViewListTest = () => {
-  const { account, pgpPrivateKey } = useContext<any>(Web3Context)
+  // const { account, pgpPrivateKey } = useContext<any>(Web3Context)
 
-  const { env } = useContext<any>(EnvContext);
+  // const { env } = useContext<any>(EnvContext);
 
 
-  usePushChatSocket();
+  // usePushChatSocket();
+
+
   return (
     <div>
       <h2>Chat UI Test page</h2>
 
       {/* <Loader show={isLoading} /> */}
-
-      <ChatViewListCard    >
-        <ChatViewList chatId='196f58cbe07c7eb5716d939e0a3be1f15b22b2334d5179c601566600016860ac' limit={10} />
+  
+      <ChatViewListCard>
+        <ChatViewList chatId='b8e068e02fe12d7136bc2f24408835573f30c6fbf0b65ea26ab4c7055a2c85f1' limit={10} />
 
       </ChatViewListCard>
-      <MessageInput chatId='196f58cbe07c7eb5716d939e0a3be1f15b22b2334d5179c601566600016860ac' isConnected={true} />
+      {/* <MessageInput chatId='196f58cbe07c7eb5716d939e0a3be1f15b22b2334d5179c601566600016860ac' isConnected={true} /> */}
     </div>
   );
 };
 
 export default ChatViewListTest;
 
 
-const ChatViewListCard = styled(Section)`
+const ChatViewListCard = styled.div`
 height:40vh;
 background:black;
+overflow: auto;
+overflow-x: hidden;
 `;

packages/uiweb/package.json

@@ -9,6 +9,9 @@
     "@pushprotocol/socket": "^0.5.0",
     "@rainbow-me/rainbowkit": "^1.0.8",
     "@unstoppabledomains/resolution": "^8.5.0",
+    "@web3-onboard/injected-wallets": "^2.10.5",
+    "@web3-onboard/react": "^2.8.11",
+    "@web3-onboard/walletconnect": "^2.4.6",
     "@web3-react/injected-connector": "^6.0.7",
     "date-fns": "^2.28.0",
     "emoji-picker-react": "^4.4.9",
@@ -19,7 +22,8 @@
     "react-icons": "^4.10.1",
     "react-toastify": "^9.1.3",
     "react-twitter-embed": "^4.0.4",
-    "wagmi": "^1.3.10"
+    "wagmi": "^1.3.10",
+    "ethers": "^5.6.8"
   },
   "peerDependencies": {
     "@pushprotocol/restapi": "^1.2.15",

packages/uiweb/src/lib/components/chat/ChatViewComponent/ChatViewComponent.tsx

@@ -1,7 +1,7 @@
-import React, { useContext} from 'react';
+import React, { useContext } from 'react';
 import { IChatTheme, IChatViewComponentProps } from '../exportedTypes';
 
-import { Section,  } from '../../reusables';
+import { Section, Span } from '../../reusables';
 import { ChatViewList } from '../ChatViewList';
 import { chatLimit, device } from '../../../config';
 
@@ -12,9 +12,6 @@ import { ChatProfile } from '../ChatProfile';
 import styled from 'styled-components';
 import useMediaQuery from '../../../hooks/useMediaQuery';
 
-
-
-
 /**
  * @interface IThemeProps
  * this interface is used for defining the props for styled components
@@ -23,7 +20,6 @@ interface IThemeProps {
   theme?: IChatTheme;
 }
 
-
 export const ChatViewComponent: React.FC<IChatViewComponentProps> = (
   options: IChatViewComponentProps
 ) => {
@@ -41,17 +37,14 @@ export const ChatViewComponent: React.FC<IChatViewComponentProps> = (
     onClick,
   } = options || {};
 
-  const {env } = useChatData();
+  const { env, signer, account, pgpPrivateKey } = useChatData();
 
-
   // const [conversationHash, setConversationHash] = useState<string>();
 
   const theme = useContext(ThemeContext);
 
   const isMobile = useMediaQuery(device.mobileL);
 
-
-
   return (
     <Conatiner
       width="100%"
@@ -64,36 +57,52 @@ export const ChatViewComponent: React.FC<IChatViewComponentProps> = (
       padding="13px"
       theme={theme}
     >
-
-    {chatProfile && <ChatProfile chatId={chatId} style="Info" />}
+      {chatProfile && <ChatProfile chatId={chatId} style="Info" />}
       <Section
         flex="1 1 auto"
         overflow="hidden"
-        padding={isMobile?"0 10px":"0 20px"}
+        padding={isMobile ? '0 10px' : '0 20px'}
         margin="0 0px 10px 0px"
         flexDirection="column"
         justifyContent="start"
       >
-
-
-        {chatId && chatViewList && <ChatViewList chatFilterList={chatFilterList} limit={limit} chatId={chatId} />}
-
+        {chatId && chatViewList && (
+          <ChatViewList
+            chatFilterList={chatFilterList}
+            limit={limit}
+            chatId={chatId}
+          />
+        )}
       </Section>
-
       {/* )} */}
-
-      {messageInput && (
+      {(!signer && !(!!account && !!pgpPrivateKey) && !isConnected) && (
         <Section flex="0 1 auto">
-          <MessageInput onClick={onClick} chatId={chatId} File={file} Emoji={emoji} GIF={gif} isConnected={isConnected} />
+          <Span>
+            You need to either pass signer or isConnected  to send
+            messages{' '}
+          </Span>
         </Section>
       )}
+      {(messageInput && (!!signer || (!!account && !!pgpPrivateKey) || isConnected )) && (
+        <Section flex="0 1 auto">
+          <MessageInput
+            onClick={onClick}
+            chatId={chatId}
+            File={file}
+            Emoji={emoji}
+            GIF={gif}
+            isConnected={isConnected}
+          />
+        </Section>
+      )}
+
     </Conatiner>
   );
 };
 
 //styles
 const Conatiner = styled(Section)<IThemeProps>`
-border:${(props) => props.theme.border?.chatViewComponent};
-backdrop-filter:${(props) => props.theme.backdropFilter};
-box-sizing:border-box;
+  border: ${(props) => props.theme.border?.chatViewComponent};
+  backdrop-filter: ${(props) => props.theme.backdropFilter};
+  box-sizing: border-box;
 `;

packages/uiweb/src/lib/components/chat/ConnectButton/ConnectButton.tsx

@@ -2,16 +2,15 @@ import styled from 'styled-components';
 import { IChatTheme } from '../theme';
 import { useChatData } from '../../../hooks';
 import * as PushAPI from '@pushprotocol/restapi';
-import { useContext, useEffect } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import { ConnectButton } from '@rainbow-me/rainbowkit';
-
+import { init, useConnectWallet } from "@web3-onboard/react";
+import injectedModule from "@web3-onboard/injected-wallets";
+import { Signer, ethers } from 'ethers';
 import './index.css';
-
-import { useAccount } from 'wagmi';
-
-import { useWalletClient } from 'wagmi';
 import { ThemeContext } from '../theme/ThemeProvider';
 import { device } from '../../../config';
+import { getAddressFromSigner } from '../../../helpers';
 
 /**
  * @interface IThemeProps
@@ -22,6 +21,8 @@ interface IThemeProps {
 }
 
 export const ConnectButtonSub = () => {
+  const [{ wallet, connecting }, connect, disconnect] = useConnectWallet();
+
   const {
     signer,
     pgpPrivateKey,
@@ -31,16 +32,31 @@ export const ConnectButtonSub = () => {
     setAccount,
     setSigner,
   } = useChatData();
-  const { address } = useAccount();
-  const { data: walletClient } = useWalletClient();
   const theme = useContext(ThemeContext);
 
+  const newFunc = () => {
+    console.log("wallet getting called")
+    if (wallet) {
+      (async () => {
+        console.log("Not sure what's happening lol")
+        const ethersProvider = new ethers.providers.Web3Provider(wallet.provider, 'any')
+        const signer = ethersProvider.getSigner()
+        const newAdd = await getAddressFromSigner(signer)
+        console.log(newAdd, "newAdd")
+        setSigner(signer)
+        setAccount(newAdd);
+      })()
+    } else if (!wallet) {
+      setAccount('')
+      setSigner(undefined)
+      setPgpPrivateKey(null)
+    }
+  }
+
   useEffect(() => {
-    (async () => {
-      if (!account) setAccount(address as string);
-      if (!signer) setSigner(walletClient as PushAPI.SignerType);
-    })();
-  }, [address, walletClient]);
+    newFunc()
+  }, [wallet])
+
 
   useEffect(() => {
     (async () => {
@@ -76,7 +92,7 @@ export const ConnectButtonSub = () => {
   };
   return !signer ? (
     <ConnectButtonDiv theme={theme}>
-      <ConnectButton />
+      <button onClick={() => (wallet ? disconnect(wallet) : connect())}>{connecting ? 'connecting' : wallet ? 'disconnect' : 'Connect Wallet'}</button>
     </ConnectButtonDiv>
   ) : (
     <></>
@@ -89,10 +105,22 @@ const ConnectButtonDiv = styled.div<IThemeProps>`
 
   button{
     background: ${(props) => `${props.theme.backgroundColor.buttonBackground}!important`};
-    color: ${(props) => `${props.theme.backgroundColor.buttonText}!important`};
+    // color: ${(props) => `${props.theme.backgroundColor.buttonText}!important`};
+    color: #fff;
     text-align:center;
+    font-size: 1em;
+    border-radius: 10px;
+    padding: 10px 20px;
+    outline: none;
+    border: none;
+    cursor: pointer;
+    font-weight: 600;
 
   }
+  button:hover{
+    scale: 1.05;
+    transition: 0.3s;
+  }
   @media ${device.mobileL} {
     font-size: 12px;
   }