From 27e182217eb38553c74f69ebf183e3962820145a Mon Sep 17 00:00:00 2001 From: Monalisha Mishra Date: Thu, 16 May 2024 20:18:21 +0530 Subject: [PATCH 1/2] fix: fixed support chat init issue --- .../src/app/ChatSupportTest.tsx | 2 +- .../sdk-frontend-react/src/app/app.tsx | 2 +- .../chat/ConnectButton/ConnectButton.tsx | 2 +- .../components/chat/ConnectButton/index.tsx | 105 +---------- .../chat/MessageInput/MessageInput.tsx | 4 +- .../src/lib/components/chatWidget/Modal.tsx | 71 ++++--- .../widget/ConnectButton/ConnectButton.tsx | 21 +-- .../components/widget/ConnectButton/index.tsx | 111 +---------- .../ManageNotificationComponent.tsx | 83 +++++---- .../SubscribeComponent.tsx | 173 ++++++++++-------- .../lib/dataProviders/ChatDataProvider.tsx | 16 +- .../dataProviders/Web3OnboardDataProvider.tsx | 89 +++++++++ .../src/lib/dataProviders/WidgetProvider.tsx | 46 ++--- 13 files changed, 330 insertions(+), 395 deletions(-) create mode 100644 packages/uiweb/src/lib/dataProviders/Web3OnboardDataProvider.tsx diff --git a/packages/examples/sdk-frontend-react/src/app/ChatSupportTest.tsx b/packages/examples/sdk-frontend-react/src/app/ChatSupportTest.tsx index 6f7d9a89c..2399aedc4 100644 --- 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 diff --git a/packages/uiweb/src/lib/components/chat/ConnectButton/ConnectButton.tsx b/packages/uiweb/src/lib/components/chat/ConnectButton/ConnectButton.tsx index 6922db0de..e854bf5e1 100644 --- 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 index a339765e3..c4dea01db 100644 --- 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 = ({ - autoConnect, -}) => { - return ( - - - - ); -}; +// export const ConnectButtonComp: React.FC = ({ autoConnect }) => { +// return ; +// }; diff --git a/packages/uiweb/src/lib/components/chat/MessageInput/MessageInput.tsx b/packages/uiweb/src/lib/components/chat/MessageInput/MessageInput.tsx index 9aaa33add..b8f20b674 100644 --- 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 )} - + ); }; diff --git a/packages/uiweb/src/lib/components/chatWidget/Modal.tsx b/packages/uiweb/src/lib/components/chatWidget/Modal.tsx index e53d62e18..cb47b9e2d 100644 --- 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 = ({ 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 ( {/* check other inputs for the components */} @@ -49,31 +70,39 @@ export const Modal: React.FC = ({ chatId, isModalOpen, setIsModalOpe -
- + {!initialized.loading && chatId ? (
- {!user || (user && user?.readmode()) ? <>{welcomeComponent} : } -
+
+ +
+
+ {!user || (user && user?.readmode()) ? ( + <>{welcomeComponent} + ) : ( + + )} +
-
- +
+ +
-
+ ) : null}
>; } -export const ConnectButtonSub: React.FC = ({ +export const ConnectButton: React.FC = ({ autoconnect = false, setAccount, setSigner, signer, }) => { const { env } = useWidgetData(); - const { wallet, connecting, connect, disconnect, provider, account } = - useAccount({ env }); - const [clickedConnect,setClickedConnect] = useState(false); + const { wallet, connecting, connect, disconnect, provider, account } = useAccount({ env }); + const [clickedConnect, setClickedConnect] = useState(false); const theme = useContext(ThemeContext); @@ -42,20 +41,19 @@ export const ConnectButtonSub: React.FC = ({ 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` 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; diff --git a/packages/uiweb/src/lib/components/widget/ConnectButton/index.tsx b/packages/uiweb/src/lib/components/widget/ConnectButton/index.tsx index 9e50b9aca..d5457ba77 100644 --- a/packages/uiweb/src/lib/components/widget/ConnectButton/index.tsx +++ b/packages/uiweb/src/lib/components/widget/ConnectButton/index.tsx @@ -1,110 +1 @@ -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 from '@web3-onboard/injected-wallets'; -import walletConnectModule from '@web3-onboard/walletconnect'; -import init from '@web3-onboard/core'; -import PushIcon from '../../../icons/Bell.svg'; -import { SignerType } from '@pushprotocol/restapi'; - -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: '0x13881', - 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; - setAccount: React.Dispatch>; - signer: SignerType | undefined; - setSigner: React.Dispatch>; -} - -export const ConnectButtonComp: React.FC = ({ - autoconnect, - setAccount, - setSigner, - signer, -}) => { - return ( - - - - ); -}; +export { ConnectButton } from './ConnectButton'; diff --git a/packages/uiweb/src/lib/components/widget/subscriptionManager/ManageNotificationComponent.tsx b/packages/uiweb/src/lib/components/widget/subscriptionManager/ManageNotificationComponent.tsx index 3f99c99cd..85cb30ada 100644 --- a/packages/uiweb/src/lib/components/widget/subscriptionManager/ManageNotificationComponent.tsx +++ b/packages/uiweb/src/lib/components/widget/subscriptionManager/ManageNotificationComponent.tsx @@ -2,10 +2,7 @@ import React, { useContext, useState } from 'react'; import { Button, PoweredByPush } from '../reusables'; import { Anchor, Section, Span, Spinner } from '../../reusables'; import styled from 'styled-components'; -import { - useManageSubscriptionsUtilities, - useWidgetData, -} from '../../../hooks'; +import { useManageSubscriptionsUtilities, useWidgetData } from '../../../hooks'; import useToast from '../reusables/NewToast'; import { MdCheckCircle, MdError } from 'react-icons/md'; import { ThemeContext } from '../theme/ThemeProvider'; @@ -21,7 +18,7 @@ import { device } from '../../../config'; import * as PushAPI from '@pushprotocol/restapi'; import { notifStrictUserSettingFromat, notifUserSettingFormatString } from '../helpers'; import { ChannelDetailsComponent } from './ChannelDetailsComponent'; -import { ConnectButtonComp } from '../ConnectButton'; +import { ConnectButton } from '../ConnectButton'; /** * @interface IThemeProps @@ -38,19 +35,11 @@ interface IManageNotificationComponentProps { userSettings: any; handleNext: () => void; } -export const ManageNotficationsComponent: React.FC< - IManageNotificationComponentProps -> = (options: IManageNotificationComponentProps) => { - const { - userSettings, - channelAddress, - channelInfo, - handleNext, - autoconnect = false, - } = options || {}; - const [modifiedSettings, setModifiedSettings] = useState< - PushAPI.NotificationSettingType[] | null - >([...userSettings]); +export const ManageNotficationsComponent: React.FC = ( + options: IManageNotificationComponentProps +) => { + const { userSettings, channelAddress, channelInfo, handleNext, autoconnect = false } = options || {}; + const [modifiedSettings, setModifiedSettings] = useState([...userSettings]); const { unsubscribeError, unsubscribeLoading, @@ -71,7 +60,12 @@ export const ManageNotficationsComponent: React.FC< toastTitle: title, toastMessage: subTitle, toastType: 'ERROR', - getToastIcon: (size) => , + getToastIcon: (size) => ( + + ), }); }; @@ -80,7 +74,12 @@ export const ManageNotficationsComponent: React.FC< toastTitle: title, toastMessage: subTitle, toastType: 'SUCCESS', - getToastIcon: (size) => , + getToastIcon: (size) => ( + + ), }); }; const handleUnsubscribe = async () => { @@ -90,10 +89,7 @@ export const ManageNotficationsComponent: React.FC< }); if (response && response?.status === 204) { //show toast - showSuccess( - 'Notification Disabled', - `You have successfully disabled notifications from ${channelInfo?.name}` - ); + showSuccess('Notification Disabled', `You have successfully disabled notifications from ${channelInfo?.name}`); handleNext(); } } catch (e) { @@ -108,7 +104,6 @@ export const ManageNotficationsComponent: React.FC< } }; - const getFlexDirection = () => { if (userSettings && userSettings.length) { if (isMobile) return 'column'; @@ -125,10 +120,7 @@ export const ManageNotficationsComponent: React.FC< }); if (response && response?.status === 204) { //show toast - showSuccess( - 'Notification Preferences Updated', - 'Your notification settings were updated successfully.' - ); + showSuccess('Notification Preferences Updated', 'Your notification settings were updated successfully.'); } } catch (e) { console.debug(e); @@ -142,7 +134,10 @@ export const ManageNotficationsComponent: React.FC< } }; return ( -
+
- {(user?.readmode()) && ( - )} - {!(user?.readmode()) && ( - )} @@ -206,10 +205,16 @@ export const ManageNotficationsComponent: React.FC< fontSize="12px" fontWeight="400" > - + {' '} {unsubscribeLoading ? ( - + ) : ( 'Unsubscribe' )}{' '} @@ -238,7 +243,11 @@ const GettingStarted = ({ divider }: { divider: string }) => { theme={theme} divider={divider} > -
+
void; } -export const SubscribeComponent: React.FC = ( - options: ISubscribeComponentProps -) => { - const { - channelInfo, - handleNext, - channelAddress, - autoconnect = false, - } = options || {}; - const { subscribeToChannel, subscribeError, subscribeLoading,setSubscribeError } = - useManageSubscriptionsUtilities(); +export const SubscribeComponent: React.FC = (options: ISubscribeComponentProps) => { + const { channelInfo, handleNext, channelAddress, autoconnect = false } = options || {}; + const { subscribeToChannel, subscribeError, subscribeLoading, setSubscribeError } = useManageSubscriptionsUtilities(); const theme = useContext(ThemeContext); - const { signer, setAccount, setSigner,user,account } = useWidgetData(); + const { signer, setAccount, setSigner, user, account } = useWidgetData(); const subscribeToast = useToast(); - const [modifiedSettings, setModifiedSettings] = useState(useMemo(() => { - if (channelInfo && channelInfo?.channel_settings) { - return notifUserSettingFromChannelSetting({settings:( JSON.parse(channelInfo?.channel_settings))}); - } - return null; - }, [channelInfo])); - - + const [modifiedSettings, setModifiedSettings] = useState( + useMemo(() => { + if (channelInfo && channelInfo?.channel_settings) { + return notifUserSettingFromChannelSetting({ settings: JSON.parse(channelInfo?.channel_settings) }); + } + return null; + }, [channelInfo]) + ); const handleSubscribe = async () => { - try { const response = await subscribeToChannel({ channelAddress: channelAddress, - channelSettings:notifUserSettingFormatString({ - settings: modifiedSettings!, - }), + channelSettings: notifUserSettingFormatString({ + settings: modifiedSettings!, + }), }); if (response && response?.status === 204) { //show toast @@ -72,70 +61,100 @@ export const SubscribeComponent: React.FC = ( toastTitle: 'Notifications Enabled', toastMessage: `You have successfully enabled notifications from ${channelInfo?.name}`, toastType: 'SUCCESS', - getToastIcon: (size) => , + getToastIcon: (size) => ( + + ), }); - } } catch (e) { console.debug(e); - setSubscribeError( - WidgetErrorCodes.NOTIFICATION_WIDGET_SUBSCRIBE_ERROR - ); + setSubscribeError(WidgetErrorCodes.NOTIFICATION_WIDGET_SUBSCRIBE_ERROR); } if (subscribeError) { subscribeToast.showMessageToast({ toastTitle: 'Error while Enabling Notifications', - toastMessage: - 'We encountered an error while enabling notifications. Please try again.', + toastMessage: 'We encountered an error while enabling notifications. Please try again.', toastType: 'ERROR', - getToastIcon: (size) => , + getToastIcon: (size) => ( + + ), }); } }; return ( -
+
+
+ + Subscribe to get Notified + + + {SubHeadingText.withoutSettings} + +
+ + {channelInfo && channelInfo?.channel_settings && (
- - Subscribe to get Notified - - - {SubHeadingText.withoutSettings} - +
- - {channelInfo && channelInfo?.channel_settings &&
- -
} - - {(user && !!user?.readmode)? - <> - {user?.readmode() && ( - )} - - {!user?.readmode() && - } - - :null - } - + )} + + {user && !!user?.readmode ? ( + <> + {user?.readmode() && ( + + )} + + {!user?.readmode() && ( + + )} + + ) : null} +
); diff --git a/packages/uiweb/src/lib/dataProviders/ChatDataProvider.tsx b/packages/uiweb/src/lib/dataProviders/ChatDataProvider.tsx index 477a255bd..46d3849ab 100644 --- a/packages/uiweb/src/lib/dataProviders/ChatDataProvider.tsx +++ b/packages/uiweb/src/lib/dataProviders/ChatDataProvider.tsx @@ -3,16 +3,13 @@ import { ReactNode, useEffect, useRef, useState } from 'react'; // External Packages import { CONSTANTS, PushAPI, SignerType } from '@pushprotocol/restapi'; -import { ThemeProvider } from 'styled-components'; // Internal Compoonents import { ChatDataContext, IChatDataContextValues } from '../context/chatContext'; -import { getAddressFromSigner, pCAIP10ToWallet, traceStackCalls } from '../helpers'; -import useChatProfile from '../hooks/chat/useChatProfile'; +import { pCAIP10ToWallet } from '../helpers'; + import usePushUserInfoUtilities from '../hooks/chat/useUserInfoUtilities'; -import useCreateChatProfile from '../hooks/useCreateChatProfile'; -import useDecryptPGPKey from '../hooks/useDecryptPGPKey'; -import useGetChatProfile from '../hooks/useGetChatProfile'; + import usePushUser from '../hooks/usePushUser'; import useToast from '../components/chat/reusables/NewToast'; // Re-write this later @@ -27,6 +24,7 @@ import { Constants, ENV, GUEST_MODE_ACCOUNT } from '../config'; import { IUser } from '@pushprotocol/restapi'; import { IChatTheme } from '../components/chat/theme'; import { GlobalStyle } from '../components/reusables'; +import { Web3OnboardDataProvider } from './Web3OnboardDataProvider'; // Constants // Save original console methods @@ -471,8 +469,10 @@ export const ChatUIProvider = ({ const PROVIDER_THEME = Object.assign({}, lightChatTheme, theme); return ( - - {children} + + + {children} + ); }; diff --git a/packages/uiweb/src/lib/dataProviders/Web3OnboardDataProvider.tsx b/packages/uiweb/src/lib/dataProviders/Web3OnboardDataProvider.tsx new file mode 100644 index 000000000..d1c5f02fe --- /dev/null +++ b/packages/uiweb/src/lib/dataProviders/Web3OnboardDataProvider.tsx @@ -0,0 +1,89 @@ +import coinbaseWalletModule from '@web3-onboard/coinbase'; + +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'; +import { ReactNode } from 'react'; + +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 IWeb3OnboardDataProviderProps { + children: ReactNode; +} +export const Web3OnboardDataProvider: React.FC = ({ children }) => { + return {children}; +}; diff --git a/packages/uiweb/src/lib/dataProviders/WidgetProvider.tsx b/packages/uiweb/src/lib/dataProviders/WidgetProvider.tsx index d926c66fc..4bda08fe3 100644 --- a/packages/uiweb/src/lib/dataProviders/WidgetProvider.tsx +++ b/packages/uiweb/src/lib/dataProviders/WidgetProvider.tsx @@ -4,12 +4,10 @@ import { IWidgetTheme, lightWidgetTheme } from '../components/widget/theme'; import { ThemeContext } from '../components/widget/theme/ThemeProvider'; import { Constants, ENV } from '../config'; import { GUEST_MODE_ACCOUNT } from '../config/constants'; -import { - IWidgetDataContextValues, - WidgetDataContext, -} from '../context/widgetContext'; +import { IWidgetDataContextValues, WidgetDataContext } from '../context/widgetContext'; import { getAddressFromSigner, pCAIP10ToWallet } from '../helpers'; import usePushUser from '../hooks/usePushUser'; +import { Web3OnboardDataProvider } from './Web3OnboardDataProvider'; export interface IWidgetUIProviderProps { children: ReactNode; @@ -28,9 +26,7 @@ export const WidgetUIProvider = ({ signer = undefined, env = Constants.ENV.PROD, }: IWidgetUIProviderProps) => { - const [accountVal, setAccountVal] = useState( - pCAIP10ToWallet(account!) - ); + const [accountVal, setAccountVal] = useState(pCAIP10ToWallet(account!)); const [signerVal, setSignerVal] = useState(signer); const [userVal, setUserVal] = useState(user); const [envVal, setEnvVal] = useState(env); @@ -39,24 +35,23 @@ export const WidgetUIProvider = ({ useEffect(() => { (async () => { // resetStates(); - + setEnvVal(env); let address = null; - if (Object.keys(signer || {}).length && !user) { - address = await getAddressFromSigner(signer!); - } else if (!signer && user) { - const profile = await fetchUserProfile({user}); - if(profile) - address = (pCAIP10ToWallet(profile?.wallets)); - } - console.debug(account) - setAccountVal(address || GUEST_MODE_ACCOUNT); - setSignerVal(signer); - - setUserVal(user); + if (Object.keys(signer || {}).length && !user) { + address = await getAddressFromSigner(signer!); + } else if (!signer && user) { + const profile = await fetchUserProfile({ user }); + if (profile) address = pCAIP10ToWallet(profile?.wallets); + } + console.debug(account); + setAccountVal(address || GUEST_MODE_ACCOUNT); + setSignerVal(signer); + + setUserVal(user); })(); }, [env, account, signer, user]); - console.debug(accountVal,envVal,signerVal) + console.debug(accountVal, envVal, signerVal); useEffect(() => { (async () => { @@ -78,7 +73,6 @@ export const WidgetUIProvider = ({ // setIsPushChatStreamConnected(false); // }; - const value: IWidgetDataContextValues = { account: accountVal, signer: signerVal, @@ -93,11 +87,9 @@ export const WidgetUIProvider = ({ const PROVIDER_THEME = Object.assign({}, lightWidgetTheme, theme); return ( - - {children} - + + {children} + ); }; - - From a1ce4182d000b00bf4783b9a01403425a76442e7 Mon Sep 17 00:00:00 2001 From: Monalisha Mishra Date: Wed, 22 May 2024 13:51:48 +0530 Subject: [PATCH 2/2] fix: fixed lint errors --- .../src/app/ChatUITest/ChatPreview.tsx | 125 +++++++++--------- .../src/app/ChatUITest/ChatPreviewList.tsx | 3 - .../src/app/ChatUITest/ChatProfile.tsx | 4 +- .../src/app/ChatUITest/ChatViewComponent.tsx | 32 +---- .../src/app/ChatUITest/ChatViewListTest.tsx | 35 ++--- .../sdk-frontend-react/src/app/app.tsx | 8 +- .../sdk-frontend-react/src/app/constants.ts | 3 + .../chat/ChatViewList/ChatViewList.tsx | 2 - .../components/chat/ConnectButton/index.tsx | 8 -- .../widget/helpers/notifications.ts | 49 +++---- .../ManageNotificationComponent.tsx | 2 +- .../SettingsComponents.tsx | 38 ++---- .../SubscribeComponent.tsx | 6 +- .../dataProviders/Web3OnboardDataProvider.tsx | 5 +- packages/uiweb/src/lib/types/index.ts | 29 +++- 15 files changed, 146 insertions(+), 203 deletions(-) create mode 100644 packages/examples/sdk-frontend-react/src/app/constants.ts diff --git a/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatPreview.tsx b/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatPreview.tsx index b8633c48e..b4ca4f21b 100644 --- a/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatPreview.tsx +++ b/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatPreview.tsx @@ -1,65 +1,66 @@ -import { ChatPreview } from "@pushprotocol/uiweb"; +import { ChatPreview } from '@pushprotocol/uiweb'; const ChatPreviewTest = () => { + return ( +
+ + + +
+ ); +}; - return ( -
- - - -
- ) -} - -export default ChatPreviewTest; \ No newline at end of file +export default ChatPreviewTest; diff --git a/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatPreviewList.tsx b/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatPreviewList.tsx index 66aab03ef..832ae2461 100644 --- a/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatPreviewList.tsx +++ b/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatPreviewList.tsx @@ -191,9 +191,6 @@ const ChatPreviewListTest = () => { onPreload={(chats) => { console.log('preload chats are: ', chats); }} - // prefillChatPreviewList={prefill} - // listType='SEARCH' - // searchParamter='c2d544ad9d1efd5c5a593b143bf8232875c926cf28015564e70ad078b95f807e' />
diff --git a/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatProfile.tsx b/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatProfile.tsx index b39abfe8f..c51afedc0 100644 --- a/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatProfile.tsx +++ b/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatProfile.tsx @@ -1,4 +1,5 @@ import { ChatProfile } from '@pushprotocol/uiweb'; +import { CHAT_ID } from '../constants'; export const ChatProfileTest = () => { return ( @@ -6,8 +7,7 @@ export const ChatProfileTest = () => { left component} chatProfileRightHelperComponent={
right component
} - chatId="monalisha.wallet" - // chatId='36baf37e441fdd94e23406c6c716fc4e91a93a9ee68e070cd5b054534dbe09a6' + chatId={CHAT_ID} /> ); 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 e5c68d7cf..66beffbd1 100644 --- a/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatViewComponent.tsx +++ b/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatViewComponent.tsx @@ -1,14 +1,9 @@ import styled from 'styled-components'; -import { - ChatView, - CreateGroupModal, - MODAL_BACKGROUND_TYPE, - MODAL_POSITION_TYPE, - UserProfile, -} from '@pushprotocol/uiweb'; +import { ChatView, MODAL_BACKGROUND_TYPE } from '@pushprotocol/uiweb'; import { Section } from '../components/StyledComponents'; import Img from '../../assets/epnsLogo.png'; +import { CHAT_ID } from '../constants'; const ChatViewComponentTest = () => { const chatFilterList = [ @@ -20,16 +15,12 @@ const ChatViewComponentTest = () => {

Chat View Test page

- {/* { - console.log('in close'); - }} - /> */} + {/* uncomment the below code to test create group modal */} {/* {console.log('in close')}} modalBackground={MODAL_BACKGROUND_TYPE.OVERLAY} modalPositionType={MODAL_POSITION_TYPE.RELATIVE}/> */} console.log('Verification Failed')} - chatId="34c44214589cecc176a136ee1daf0f0231ecc6d6574b920b5ae39eb971fa3cb4" + chatId={CHAT_ID} chatProfileLeftHelperComponent={ console.debug('clicked')} /> } @@ -37,19 +28,6 @@ const ChatViewComponentTest = () => { limit={10} isConnected={true} groupInfoModalBackground={MODAL_BACKGROUND_TYPE.OVERLAY} - // groupInfoModalPositionType={MODAL_POSITION_TYPE.RELATIVE} - // verificationFailModalPosition={MODAL_POSITION_TYPE.RELATIVE} - - // welcomeComponent={
- //

Welcome

- //

new chat

- //

Welcome

- //

new chat

- //

Welcome

- //

new chat

- //

Welcome

- - //
} />
@@ -62,5 +40,3 @@ const ChatViewComponentCard = styled(Section)` height: 80vh; position: relative; `; -//c2d544ad9d1efd5c5a593b143bf8232875c926cf28015564e70ad078b95f807e -//4ac5ab85c9c3d57adbdf2dba79357e56b2f9ef0256befe750d9f93af78d2ca68 diff --git a/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatViewListTest.tsx b/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatViewListTest.tsx index 400228016..2e18a4816 100644 --- a/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatViewListTest.tsx +++ b/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatViewListTest.tsx @@ -1,44 +1,25 @@ -import { useContext, useEffect, useState } from 'react'; 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 { EnvContext, Web3Context } from '../context'; -import { usePushChatSocket } from '@pushprotocol/uiweb'; -import { MessageInput } from '@pushprotocol/uiweb'; +import { ChatViewList } from '@pushprotocol/uiweb'; +import { CHAT_ID } from '../constants'; const ChatViewListTest = () => { - // const { account, pgpPrivateKey } = useContext(Web3Context) - - // const { env } = useContext(EnvContext); - - - // usePushChatSocket(); - - return (

Chat UI Test page

- {/* */} - - - + - {/* */}
); }; export default ChatViewListTest; - const ChatViewListCard = styled.div` -height:40vh; -background:black; -overflow: auto; -overflow-x: hidden; -`; \ No newline at end of file + height: 40vh; + background: black; + overflow: auto; + overflow-x: hidden; +`; diff --git a/packages/examples/sdk-frontend-react/src/app/app.tsx b/packages/examples/sdk-frontend-react/src/app/app.tsx index 57d3ab843..80f7dd776 100644 --- a/packages/examples/sdk-frontend-react/src/app/app.tsx +++ b/packages/examples/sdk-frontend-react/src/app/app.tsx @@ -340,13 +340,7 @@ export function App() { - + = (options: IChatViewLis return () => clearTimeout(timer); } - - return () => {}; }, [chatAcceptStream, participantJoinStream]); // Change listtype to 'UINITIALIZED' and hidden to true when participantRemoveStream or participantLeaveStream is received diff --git a/packages/uiweb/src/lib/components/chat/ConnectButton/index.tsx b/packages/uiweb/src/lib/components/chat/ConnectButton/index.tsx index c4dea01db..d5457ba77 100644 --- a/packages/uiweb/src/lib/components/chat/ConnectButton/index.tsx +++ b/packages/uiweb/src/lib/components/chat/ConnectButton/index.tsx @@ -1,9 +1 @@ export { ConnectButton } from './ConnectButton'; - -// interface IConnectButtonCompProps { -// autoConnect?: boolean; -// } - -// export const ConnectButtonComp: React.FC = ({ autoConnect }) => { -// return ; -// }; diff --git a/packages/uiweb/src/lib/components/widget/helpers/notifications.ts b/packages/uiweb/src/lib/components/widget/helpers/notifications.ts index cc139590a..af441f4a9 100644 --- a/packages/uiweb/src/lib/components/widget/helpers/notifications.ts +++ b/packages/uiweb/src/lib/components/widget/helpers/notifications.ts @@ -2,13 +2,10 @@ import { NotificationSettingType, UserSetting } from '@pushprotocol/restapi'; const isSettingType1 = (setting: NotificationSettingType) => setting.type === 1; -export const notifUserSettingFormatString = ({ - settings, -}: { - settings: NotificationSettingType[]; -}) => { +export const notifUserSettingFormatString = ({ settings }: { settings: NotificationSettingType[] }) => { const _notifSettings: UserSetting[] = []; settings && + settings.length && settings.forEach((setting) => isSettingType1(setting) ? _notifSettings.push({ @@ -21,38 +18,32 @@ export const notifUserSettingFormatString = ({ ); return _notifSettings; }; -export const notifStrictUserSettingFromat = ({ - settings, -}: { - settings: NotificationSettingType[]; -}) => { +export const notifStrictUserSettingFromat = ({ settings }: { settings: NotificationSettingType[] }) => { const _notifSettings: NotificationSettingType[] = []; settings && - settings.forEach((setting) => - isSettingType1(setting) - ? _notifSettings.push({ - ...setting, - userPreferance: setting?.userPreferance?? {value:0,enabled:false}, - }) - : _notifSettings.push({ - ...setting, - userPreferance: setting?.userPreferance?? { - value: setting.default ||0, - enabled: false, - } - }) - ); + settings.length && + settings.forEach((setting) => + isSettingType1(setting) + ? _notifSettings.push({ + ...setting, + userPreferance: setting?.userPreferance ?? { value: 0, enabled: false }, + }) + : _notifSettings.push({ + ...setting, + userPreferance: setting?.userPreferance ?? { + value: setting.default || 0, + enabled: false, + }, + }) + ); return _notifSettings; }; -export const notifUserSettingFromChannelSetting = ({ - settings -}: { - settings: any[]; -}) => { +export const notifUserSettingFromChannelSetting = ({ settings }: { settings: any[] }) => { const _userSettings: NotificationSettingType[] = []; settings && + settings.length && settings.forEach((setting) => isSettingType1(setting) ? _userSettings.push({ diff --git a/packages/uiweb/src/lib/components/widget/subscriptionManager/ManageNotificationComponent.tsx b/packages/uiweb/src/lib/components/widget/subscriptionManager/ManageNotificationComponent.tsx index 85cb30ada..d54ed4d3d 100644 --- a/packages/uiweb/src/lib/components/widget/subscriptionManager/ManageNotificationComponent.tsx +++ b/packages/uiweb/src/lib/components/widget/subscriptionManager/ManageNotificationComponent.tsx @@ -39,7 +39,7 @@ export const ManageNotficationsComponent: React.FC { const { userSettings, channelAddress, channelInfo, handleNext, autoconnect = false } = options || {}; - const [modifiedSettings, setModifiedSettings] = useState([...userSettings]); + const [modifiedSettings, setModifiedSettings] = useState([...userSettings]); const { unsubscribeError, unsubscribeLoading, diff --git a/packages/uiweb/src/lib/components/widget/subscriptionManager/SettingsComponents.tsx b/packages/uiweb/src/lib/components/widget/subscriptionManager/SettingsComponents.tsx index dcf39c519..cae76f5f1 100644 --- a/packages/uiweb/src/lib/components/widget/subscriptionManager/SettingsComponents.tsx +++ b/packages/uiweb/src/lib/components/widget/subscriptionManager/SettingsComponents.tsx @@ -19,20 +19,13 @@ interface IThemeProps { interface ISettingsComponentProps { settings: PushAPI.NotificationSettingType[]; - setSettings: React.Dispatch< - React.SetStateAction - >; + setSettings: React.Dispatch>; } -export const SettingsComponent: React.FC = ( - options: ISettingsComponentProps -) => { +export const SettingsComponent: React.FC = (options: ISettingsComponentProps) => { const theme = useContext(ThemeContext); const { settings = [], setSettings } = options || {}; - const handleSliderChange = ( - index: number, - value: number | { lower: number; upper: number } - ) => { + const handleSliderChange = (index: number, value: number | { lower: number; upper: number }) => { const updatedSettings = [...settings]; updatedSettings[index].userPreferance!.value = value; @@ -41,9 +34,8 @@ export const SettingsComponent: React.FC = ( const handleToggleChange = (index: number) => { const updatedSettings = [...settings]; - if(updatedSettings[index]?.userPreferance) - updatedSettings[index].userPreferance!.enabled = - !updatedSettings[index].userPreferance!.enabled; + if (updatedSettings[index]?.userPreferance) + updatedSettings[index].userPreferance!.enabled = !updatedSettings[index].userPreferance!.enabled; setSettings(updatedSettings); }; return ( @@ -53,11 +45,12 @@ export const SettingsComponent: React.FC = ( gap="15px" width="100%" maxHeight="200px" - justifyContent='start' + justifyContent="start" overflow="hidden scroll" > - {settings.map( - (setting: PushAPI.NotificationSettingType, index: number) => ( + {settings && + settings?.length && + settings?.map((setting: PushAPI.NotificationSettingType, index: number) => ( = ( {(setting.type == 2 || setting.type == 1) && ( { handleToggleChange(index); }} /> )} - {setting.type == 2 && setting?.userPreferance?.enabled && ( = ( onChange={({ x }) => handleSliderChange(index, x)} /> )} + {/* uncomment this when we need this to be included in the settings feature + not needed as of now */} {/* {setting.type == 3 && setting?.userPreferance?.enabled && ( = ( /> )} */} - ) - )} + ))} ); }; const SettingsSection = styled(Section)` - border-bottom: ${(props) => - props.divider ? props.theme.border?.divider : 'none'}; + border-bottom: ${(props) => (props.divider ? props.theme.border?.divider : 'none')}; padding-bottom: 15px; `; const ScrollSection = styled(Section)<{ theme: IWidgetTheme }>` diff --git a/packages/uiweb/src/lib/components/widget/subscriptionManager/SubscribeComponent.tsx b/packages/uiweb/src/lib/components/widget/subscriptionManager/SubscribeComponent.tsx index 250042386..dff1838d6 100644 --- a/packages/uiweb/src/lib/components/widget/subscriptionManager/SubscribeComponent.tsx +++ b/packages/uiweb/src/lib/components/widget/subscriptionManager/SubscribeComponent.tsx @@ -37,12 +37,12 @@ export const SubscribeComponent: React.FC = (options: const theme = useContext(ThemeContext); const { signer, setAccount, setSigner, user, account } = useWidgetData(); const subscribeToast = useToast(); - const [modifiedSettings, setModifiedSettings] = useState( + const [modifiedSettings, setModifiedSettings] = useState( useMemo(() => { if (channelInfo && channelInfo?.channel_settings) { return notifUserSettingFromChannelSetting({ settings: JSON.parse(channelInfo?.channel_settings) }); } - return null; + return []; }, [channelInfo]) ); @@ -51,7 +51,7 @@ export const SubscribeComponent: React.FC = (options: const response = await subscribeToChannel({ channelAddress: channelAddress, channelSettings: notifUserSettingFormatString({ - settings: modifiedSettings!, + settings: modifiedSettings, }), }); if (response && response?.status === 204) { diff --git a/packages/uiweb/src/lib/dataProviders/Web3OnboardDataProvider.tsx b/packages/uiweb/src/lib/dataProviders/Web3OnboardDataProvider.tsx index d1c5f02fe..0e1997857 100644 --- a/packages/uiweb/src/lib/dataProviders/Web3OnboardDataProvider.tsx +++ b/packages/uiweb/src/lib/dataProviders/Web3OnboardDataProvider.tsx @@ -7,8 +7,9 @@ import walletConnectModule from '@web3-onboard/walletconnect'; import init from '@web3-onboard/core'; import PushIcon from '../icons/Bell.svg'; import { ReactNode } from 'react'; +import { AppMetaDataType, ChainType } from '../types'; -const APP_META_DATA = { +const APP_META_DATA: AppMetaDataType = { name: 'Push Protocol', logo: PushIcon, icon: PushIcon, @@ -24,7 +25,7 @@ const wcv2InitOptions = { const walletConnect = walletConnectModule(wcv2InitOptions); const coinbaseWalletSdk = coinbaseWalletModule({ darkMode: true }); -const CHAINS = [ +const CHAINS: ChainType[] = [ { id: '0x1', token: 'ETH', diff --git a/packages/uiweb/src/lib/types/index.ts b/packages/uiweb/src/lib/types/index.ts index d46024476..e9267943f 100644 --- a/packages/uiweb/src/lib/types/index.ts +++ b/packages/uiweb/src/lib/types/index.ts @@ -127,12 +127,12 @@ export const SIDEBAR_PLACEHOLDER_KEYS = { NEW_CHAT: 'NEW_CHAT', } as const; -export type SidebarPlaceholderKeys = typeof SIDEBAR_PLACEHOLDER_KEYS[keyof typeof SIDEBAR_PLACEHOLDER_KEYS]; +export type SidebarPlaceholderKeys = (typeof SIDEBAR_PLACEHOLDER_KEYS)[keyof typeof SIDEBAR_PLACEHOLDER_KEYS]; -export type LocalStorageKeys = typeof LOCAL_STORAGE_KEYS[keyof typeof LOCAL_STORAGE_KEYS]; -export type PushTabs = typeof PUSH_TABS[keyof typeof PUSH_TABS]; -export type PushSubTabs = typeof PUSH_SUB_TABS[keyof typeof PUSH_SUB_TABS]; -export type SocketType = typeof SOCKET_TYPE[keyof typeof SOCKET_TYPE]; +export type LocalStorageKeys = (typeof LOCAL_STORAGE_KEYS)[keyof typeof LOCAL_STORAGE_KEYS]; +export type PushTabs = (typeof PUSH_TABS)[keyof typeof PUSH_TABS]; +export type PushSubTabs = (typeof PUSH_SUB_TABS)[keyof typeof PUSH_SUB_TABS]; +export type SocketType = (typeof SOCKET_TYPE)[keyof typeof SOCKET_TYPE]; export interface FileMessageContent { content: string; @@ -215,3 +215,22 @@ export interface IFrame { frameDetails?: FrameDetails; message?: string; } + +export type WalletType = { + name: string; + url: string; +}; + +export type AppMetaDataType = { + name: string; + logo: string; + icon: string; + description: string; + recommendedInjectedWallets: WalletType[]; +}; +export type ChainType = { + id: string; // Assuming all IDs are in hexadecimal string format + token: string; + label: string; + rpcUrl: string; +};