fix: fixed support chat init issue

push-protocol · May 16, 2024 · 27e1822 · 27e1822
1 parent 9e7432e
commit 27e1822
Show file tree

Hide file tree

Showing 13 changed files with 330 additions and 395 deletions.
diff --git a/packages/examples/sdk-frontend-react/src/app/ChatSupportTest.tsx b/packages/examples/sdk-frontend-react/src/app/ChatSupportTest.tsx
@@ -34,7 +34,7 @@ export const ChatSupportTest = () => {
     //works as Chat as well as Support Chat
     <ChatWidget
       key={'460336a9fa83112c95894af5471cd2b1091290a11298d87ec824ed74b7c14974'}
-      chatId="4ac5ab85c9c3d57adbdf2dba79357e56b2f9ef0256befe750d9f93af78d2ca68"
+      chatId="34c44214589cecc176a136ee1daf0f0231ecc6d6574b920b5ae39eb971fa3cb4"
       welcomeComponent={
         <div
           style={{

diff --git a/packages/examples/sdk-frontend-react/src/app/app.tsx b/packages/examples/sdk-frontend-react/src/app/app.tsx
@@ -343,7 +343,7 @@ export function App() {
                   <ChatUIProvider
                     env={env}
                     theme={darkChatTheme}
-                    signer={signer}
+                    // signer={signer}
                     // user={pushUser}
                     debug={true}
                   >

diff --git a/packages/uiweb/src/lib/components/chat/ConnectButton/ConnectButton.tsx b/packages/uiweb/src/lib/components/chat/ConnectButton/ConnectButton.tsx
@@ -19,7 +19,7 @@ interface IThemeProps {
   theme?: IChatTheme;
 }
 
-export const ConnectButtonSub = ({ autoConnect = false }) => {
+export const ConnectButton = ({ autoConnect = false }) => {
   const { user, preInitializeUser } = useChatData();
   const { wallet, connecting, connect, disconnect } = useAccount({ env: user ? user.env : CONSTANTS.ENV.PROD });
 

diff --git a/packages/uiweb/src/lib/components/chat/ConnectButton/index.tsx b/packages/uiweb/src/lib/components/chat/ConnectButton/index.tsx
@@ -1,100 +1,9 @@
-import { IChatTheme } from '../theme';
+export { ConnectButton } from './ConnectButton';
 
-import coinbaseWalletModule from '@web3-onboard/coinbase';
-import { ConnectButtonSub } from './ConnectButton';
-import { BLOCKNATIVE_PROJECT_ID, InfuraAPIKey } from '../../../config';
-import { Web3OnboardProvider } from '@web3-onboard/react';
-import injectedModule, { ProviderLabel } from '@web3-onboard/injected-wallets';
-import walletConnectModule from '@web3-onboard/walletconnect';
-import init from '@web3-onboard/core';
-import PushIcon from '../../../icons/Bell.svg';
+// interface IConnectButtonCompProps {
+//   autoConnect?: boolean;
+// }
 
-const APP_META_DATA = {
-  name: 'Push Protocol',
-  logo: PushIcon,
-  icon: PushIcon,
-  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 coinbaseWalletSdk = coinbaseWalletModule({ darkMode: true });
-const CHAINS = [
-  {
-    id: '0x1',
-    token: 'ETH',
-    label: 'Ethereum Mainnet',
-    rpcUrl: `https://mainnet.infura.io/v3/${InfuraAPIKey}`,
-  },
-  {
-    id: '0xAA36A7',
-    token: 'ETH',
-    label: 'Sepolia',
-    rpcUrl: `https://sepolia.infura.io/v3/${InfuraAPIKey}`,
-  },
-  {
-    id: '0x13882',
-    token: 'MATIC',
-    label: 'Polygon - Amoy',
-    rpcUrl: 'https://rpc-amoy.polygon.technology',
-  },
-  {
-    id: '0x38',
-    token: 'BNB',
-    label: 'Binance',
-    rpcUrl: 'https://bsc-dataseed.binance.org/',
-  },
-  {
-    id: '0xA',
-    token: 'OETH',
-    label: 'Optimism',
-    rpcUrl: 'https://mainnet.optimism.io',
-  },
-  {
-    id: '0xA4B1',
-    token: 'ARB-ETH',
-    label: 'Arbitrum',
-    rpcUrl: 'https://rpc.ankr.com/arbitrum',
-  },
-];
-
-const wallets = [injectedModule(), walletConnect, coinbaseWalletSdk];
-
-const web3OnBoard = init({
-  wallets,
-  chains: CHAINS,
-  appMetadata: APP_META_DATA,
-  accountCenter: {
-    desktop: {
-      enabled: false,
-    },
-    mobile: {
-      enabled: false,
-    },
-  },
-  connect: {
-    autoConnectLastWallet: true,
-  },
-});
-
-interface IConnectButtonCompProps {
-  autoConnect?: boolean;
-}
-
-export const ConnectButtonComp: React.FC<IConnectButtonCompProps> = ({
-  autoConnect,
-}) => {
-  return (
-    <Web3OnboardProvider web3Onboard={web3OnBoard}>
-      <ConnectButtonSub autoConnect={autoConnect} />
-    </Web3OnboardProvider>
-  );
-};
+// export const ConnectButtonComp: React.FC<IConnectButtonCompProps> = ({ autoConnect }) => {
+//   return <ConnectButtonSub autoConnect={autoConnect} />;
+// };
diff --git a/packages/uiweb/src/lib/components/chat/MessageInput/MessageInput.tsx b/packages/uiweb/src/lib/components/chat/MessageInput/MessageInput.tsx
@@ -20,7 +20,7 @@ import OpenLink from '../../../icons/OpenLink';
 import { SendCompIcon } from '../../../icons/SendCompIcon';
 import { Div, Section, Span, Spinner } from '../../reusables';
 import { ConditionsInformation } from '../ChatProfile/ChatProfileInfoModal';
-import { ConnectButtonComp } from '../ConnectButton';
+import { ConnectButton } from '../ConnectButton';
 import { Modal, ModalHeader } from '../reusables/Modal';
 import { ThemeContext } from '../theme/ThemeProvider';
 
@@ -60,7 +60,7 @@ const ConnectButtonSection = ({ autoConnect }: { autoConnect: boolean }) => {
           You need to connect your wallet to get started
         </Span>
       )}
-      <ConnectButtonComp autoConnect={autoConnect} />
+      <ConnectButton autoConnect={autoConnect} />
     </Section>
   );
 };

diff --git a/packages/uiweb/src/lib/components/chatWidget/Modal.tsx b/packages/uiweb/src/lib/components/chatWidget/Modal.tsx
@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import styled from 'styled-components';
 
 import { Div, Section, Span } from '../reusables/sharedStyling';
@@ -7,6 +7,7 @@ import { useChatData } from '../../hooks';
 import { SponserPushIcon } from '../../icons/SponserPush';
 import { ThemeContext } from '../chat/theme/ThemeProvider';
 import { MinimizeIcon } from '../../icons/Minimize';
+import { deriveChatId } from '../../helpers';
 
 /**
  * @interface IThemeProps
@@ -26,6 +27,26 @@ type ModalProps = {
 export const Modal: React.FC<ModalProps> = ({ chatId, isModalOpen, setIsModalOpen, modalTitle, welcomeComponent }) => {
   const { user } = useChatData();
   const theme = useContext(ThemeContext);
+  // set loading state
+  const [initialized, setInitialized] = useState({
+    loading: true,
+    derivedChatId: '',
+  });
+
+  useEffect(() => {
+    const fetchDerivedChatId = async () => {
+      setInitialized((currentState) => ({ ...currentState, loading: true }));
+
+      if (chatId) {
+        const id = await deriveChatId(chatId, user);
+        setInitialized({ loading: false, derivedChatId: id });
+      } else {
+        setInitialized({ loading: false, derivedChatId: '' });
+      }
+    };
+
+    fetchDerivedChatId();
+  }, [chatId, user]); // Re-run this effect if chatId or env changes
   return (
     <Container theme={theme}>
       {/* check other inputs for the components */}
@@ -49,31 +70,39 @@ export const Modal: React.FC<ModalProps> = ({ chatId, isModalOpen, setIsModalOpe
           <MinimizeIcon />
         </Section>
       </HeaderSection>
-      <Section
-        flexDirection="column"
-        height="82%"
-      >
-        <ChatProfile chatId={chatId} />
+      {!initialized.loading && chatId ? (
         <Section
-          flex="1 1 auto"
-          overflow="hidden"
-          padding="0 2px"
           flexDirection="column"
-          justifyContent="start"
+          height="82%"
         >
-          {!user || (user && user?.readmode()) ? <>{welcomeComponent}</> : <ChatViewList chatId={chatId} />}
-        </Section>
+          <Section flex="0 1 auto">
+            <ChatProfile chatId={initialized.derivedChatId} />
+          </Section>
+          <Section
+            flex="1 1 auto"
+            overflow="hidden"
+            padding="0 2px"
+            flexDirection="column"
+            justifyContent="start"
+          >
+            {!user || (user && user?.readmode()) ? (
+              <>{welcomeComponent}</>
+            ) : (
+              <ChatViewList chatId={initialized.derivedChatId} />
+            )}
+          </Section>
 
-        <Section
-          flex="0 1 auto"
-          position="static"
-        >
-          <MessageInput
-            chatId={chatId}
-            autoConnect={false}
-          />
+          <Section
+            flex="0 1 auto"
+            position="static"
+          >
+            <MessageInput
+              chatId={initialized.derivedChatId}
+              autoConnect={false}
+            />
+          </Section>
         </Section>
-      </Section>
+      ) : null}
       <Div
         width="100%"
         textAlign="center"

diff --git a/packages/uiweb/src/lib/components/widget/ConnectButton/ConnectButton.tsx b/packages/uiweb/src/lib/components/widget/ConnectButton/ConnectButton.tsx
@@ -1,4 +1,4 @@
-import { useContext, useEffect, useState,  } from 'react';
+import { useContext, useEffect, useState } from 'react';
 
 import styled from 'styled-components';
 
@@ -25,37 +25,35 @@ interface IConnectButtonSubProps {
   setSigner: React.Dispatch<React.SetStateAction<SignerType | undefined>>;
 }
 
-export const ConnectButtonSub: React.FC<IConnectButtonSubProps> = ({
+export const ConnectButton: React.FC<IConnectButtonSubProps> = ({
   autoconnect = false,
   setAccount,
   setSigner,
   signer,
 }) => {
   const { env } = useWidgetData();
-  const { wallet, connecting, connect, disconnect, provider, account } =
-    useAccount({ env });
-    const [clickedConnect,setClickedConnect] = useState<boolean>(false);
+  const { wallet, connecting, connect, disconnect, provider, account } = useAccount({ env });
+  const [clickedConnect, setClickedConnect] = useState<boolean>(false);
 
   const theme = useContext(ThemeContext);
 
   const setUserData = () => {
     if (wallet) {
       (async () => {
         const librarySigner = provider?.getSigner(account);
-        const newAdd = await getAddressFromSigner(librarySigner)
-     
+        const newAdd = await getAddressFromSigner(librarySigner);
+
         setAccount(account || newAdd);
         setSigner(librarySigner);
       })();
-    } else if (!wallet ) {
+    } else if (!wallet) {
       setAccount(GUEST_MODE_ACCOUNT);
       setSigner(undefined);
     }
     changeModalStyle('zIndex', '2000');
   };
   useEffect(() => {
-    if (wallet && !autoconnect ) {
-
+    if (wallet && !autoconnect) {
       disconnect(wallet);
     }
     setUserData();
@@ -90,8 +88,7 @@ const ConnectButtonDiv = styled.div<IThemeProps>`
   width: 100%;
 
   button {
-    background: ${(props) =>
-      `${props.theme.backgroundColor?.buttonBackground}!important`};
+    background: ${(props) => `${props.theme.backgroundColor?.buttonBackground}!important`};
     color: ${(props) => `${props.theme.textColor?.buttonText}!important`};
     text-align: center;
     font-size: 1em;