Feat/spaces implementation

packages/demoreact/src/app/NotificationsTest.tsx

@@ -111,7 +111,7 @@ const NotificationsTest = () => {
       });
 
       setSpams(spams);
-  
+
     } catch (e) {
       console.error(e);
     } finally {
@@ -146,12 +146,12 @@ const NotificationsTest = () => {
           <h2>Notifications Test page</h2>
 
           {/* <TestModal /> */}
-          
+
           <ThemeSelector>
             {theme === 'dark' ? <DarkIcon title="Dark" onClick={toggleTheme}/> : <LightIcon title="Light" onClick={toggleTheme}/>}
           </ThemeSelector>
         </Header>
-                
+
         <TabButtons>
           <SectionButton onClick={() => { setViewType('notif') }}>Notifications</SectionButton>
           <SectionButton onClick={() => { setViewType('spam') }}>Spam</SectionButton>
@@ -170,8 +170,8 @@ const NotificationsTest = () => {
               {notifs ? (
                 <NotificationListContainer>
                   {notifs.map((oneNotification, i) => {
-  
-                  const { 
+
+                  const {
                     cta,
                     title,
                     message,
@@ -215,7 +215,7 @@ const NotificationsTest = () => {
               {spams ? (
                 <NotificationListContainer>
                   {spams.map((oneNotification, i) => {
-                  const { 
+                  const {
                     cta,
                     title,
                     message,
@@ -259,4 +259,4 @@ const NotificationsTest = () => {
   );
 }
 
-export default NotificationsTest;
+export default NotificationsTest;

packages/demoreact/src/app/SpaceUITest/SpaceFeed.tsx

@@ -1,6 +1,7 @@
-import React, { useState } from 'react';
+import React, { useContext, useState } from 'react';
 import { useSpaceComponents } from './useSpaceComponents';
 import { Checkbox } from '../components/Checkbox';
+import { AccountContext } from '../context';
 
 export const SpaceFeed = () => {
   const { SpaceFeedComponent } = useSpaceComponents();
@@ -10,6 +11,7 @@ export const SpaceFeed = () => {
   const [width, setWidth] = useState<number>();
   const [height, setHeight] = useState<number>(500);
   const [sortingOrder, setSortingOrder] = useState<string[]>([]);
+  const { setSpaceId } = useContext<any>(AccountContext);
 
   const handleShowTab = () => {
     setShowTab(!showTab);
@@ -78,6 +80,7 @@ export const SpaceFeed = () => {
         height={height}
         onBannerClickHandler={(spaceId: string) => {
           console.log('spaceId: ', spaceId);
+          setSpaceId(spaceId);
         }}
       />
     </>

packages/demoreact/src/app/SpaceUITest/SpaceWidget.tsx

@@ -139,11 +139,14 @@ export const SpaceWidget = () => {
           <label>isTimeToStartSpace</label>
         </SectionItem>
       </Section>
-      <SpaceWidgetComponent 
-        spaceId={spaceId} 
-        width={Number(width)} 
+      <SpaceWidgetComponent
+        spaceId={spaceId}
+        width={Number(width)}
         zIndex={Number(zIndex)}
-        shareUrl={shareUrl}
+        share={{
+          shareUrl: shareUrl,
+          shareOptions: ["Lenster", "Twitter", "CopyShareUrl"]
+        }}
         isHost={isHost}
         isLive={isLive}
         isJoined={isJoined}

packages/demoreact/src/app/SpaceUITest/index.tsx

@@ -4,9 +4,9 @@ import { useSpaceComponents } from './useSpaceComponents';
 export * from './SpaceUITest';
 export * from './SpaceWidget';
 export * from './SpaceFeed';
-export * from "./SpaceBanner";
-export * from "./CreateSpaceComponent";
-export * from "./SpaceInvites";
+export * from './SpaceBanner';
+export * from './CreateSpaceComponent';
+export * from './SpaceInvites';
 
 export interface ISpacesComponentProps {
   children: React.ReactNode;
@@ -15,15 +15,48 @@ export interface ISpacesComponentProps {
 export const SpacesComponentProvider = ({
   children,
 }: ISpacesComponentProps) => {
-  const { spaceUI } = useSpaceComponents();
 
   const customtheme = {
-    statusColorError: 'red',
-  }
+    titleBg: 'linear-gradient(45deg, #E165EC 0.01%, #A483ED 100%)', //not changed
+    titleTextColor: '#FFFFFF',
+    bgColorPrimary: '#fff',
+    bgColorSecondary: '#F7F1FB',
+    textColorPrimary: '#000',
+    textColorSecondary: '#657795',
+    textGradient: 'linear-gradient(45deg, #B6A0F5, #F46EF6, #FFDED3, #FFCFC5)', //not changed
+    btnColorPrimary: '#D53A94',
+    btnOutline: '#D53A94',
+    borderColor: '#FFFF',
+    borderRadius: '17px',
+    containerBorderRadius: '12px',
+    statusColorError: '#E93636',
+    statusColorSuccess: '#30CC8B',
+    iconColorPrimary: '#82828A',
+  };
+
+  const customDarkTheme = {
+    titleBg:
+      'linear-gradient(87.17deg, #EA4EE4 0%, #D23CDF 0.01%, #8B5CF6 100%)',
+    titleTextColor: '#fff',
+    bgColorPrimary: '#000',
+    bgColorSecondary: '#292344',
+    textColorPrimary: '#fff',
+    textColorSecondary: '#71717A',
+    textGradient: 'linear-gradient(45deg, #B6A0F5, #F46EF6, #FFDED3, #FFCFC5)',
+    btnColorPrimary: '#8B5CF6',
+    btnOutline: '#8B5CF6',
+    borderColor: '#3F3F46',
+    borderRadius: '17px',
+    containerBorderRadius: '12px',
+    statusColorError: '#E93636',
+    statusColorSuccess: '#30CC8B',
+    iconColorPrimary: '#71717A',
+  };
 
   return (
-    <SpacesUIProvider spaceUI={spaceUI} theme={customtheme}>
-      {children}
-    </SpacesUIProvider>
+    // <SpacesUIProvider spaceUI={spaceUI} theme={customDarkTheme}>
+    //   {children}
+    // </SpacesUIProvider>
+    <></>
   );
 };

packages/demoreact/src/app/SpaceUITest/useSpaceComponents.tsx

@@ -6,12 +6,10 @@ import {
   SpacesUI,
   ISpaceInvitesProps,
 } from '@pushprotocol/uiweb';
-import React, { useContext, useEffect, useState } from 'react';
-import { EnvContext, Web3Context } from '../context';
-import * as PushAPI from '@pushprotocol/restapi';
+import React, { useContext } from 'react';
+import { AccountContext, EnvContext, Web3Context } from '../context';
 
 export interface IUseSpaceReturnValues {
-  spaceUI: SpacesUI;
   SpaceInvitesComponent: React.FC<ISpaceInvitesProps>;
   SpaceWidgetComponent: React.FC<ISpaceWidgetProps>;
   SpaceFeedComponent: React.FC<ISpaceFeedProps>;
@@ -22,39 +20,17 @@ export interface IUseSpaceReturnValues {
 export const useSpaceComponents = (): IUseSpaceReturnValues => {
   const { account, library } = useContext<any>(Web3Context);
   const { env } = useContext<any>(EnvContext);
+  const { pgpPrivateKey } = useContext<any>(AccountContext);
   const librarySigner = library?.getSigner();
 
-  const [pgpPrivateKey, setPgpPrivateKey] = useState('');
-
   const spaceUI = new SpacesUI({
-    account: account,
+    account: account as string,
     signer: librarySigner,
     pgpPrivateKey: pgpPrivateKey,
     env: env,
   });
 
-  useEffect(() => {
-    (async () => {
-      if (!account || !env || !library) return;
-
-      const user = await PushAPI.user.get({ account, env });
-      let pgpPrivateKey;
-      const librarySigner = await library.getSigner(account);
-      if (user?.encryptedPrivateKey) {
-        pgpPrivateKey = await PushAPI.chat.decryptPGPKey({
-          encryptedPGPPrivateKey: user.encryptedPrivateKey,
-          account,
-          signer: librarySigner,
-          env,
-        });
-      }
-
-      setPgpPrivateKey(pgpPrivateKey);
-    })();
-  }, [account, env, library]);
-
   return {
-    spaceUI,
     SpaceInvitesComponent: spaceUI.SpaceInvites,
     SpaceWidgetComponent: spaceUI.SpaceWidget,
     SpaceBannerComponent: spaceUI.SpaceBanner,

packages/demoreact/src/app/app.tsx

@@ -1,11 +1,11 @@
-import { useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import styled from 'styled-components';
 import { Route, Routes, Link } from 'react-router-dom';
 import { useWeb3React } from '@web3-react/core';
 import ConnectButton from './components/Connect';
 import { Checkbox } from './components/Checkbox';
 import Dropdown from './components/Dropdown';
-import { Web3Context, EnvContext, SocketContext } from './context';
+import { Web3Context, EnvContext, SocketContext, AccountContext } from './context';
 import { useSDKSocket } from './hooks';
 import { ReactComponent as PushLogo } from '../assets/pushLogo.svg';
 import NotificationsTest from './NotificationsTest';
@@ -55,15 +55,16 @@ import GetSpacesRequestsTest from './SpaceTest/GetSpacesRequestsTest';
 import GetSpacesTrendingTest from './SpaceTest/GetSpacesTrendingTest';
 import SpaceUITest from './SpaceUITest/SpaceUITest';
 import {
-  SpacesComponentProvider,
   SpaceWidget,
   SpaceBanner,
   SpaceFeed,
   CreateSpaceComponent,
   SpaceInvitesComponent
 } from './SpaceUITest';
 import { useSpaceComponents } from './SpaceUITest/useSpaceComponents';
+import * as PushAPI from "@pushprotocol/restapi";
 import { ChatWidgetTest } from './ChatWidgetTest';
+import { SpacesUI, SpacesUIProvider } from '@pushprotocol/uiweb';
 
 window.Buffer = window.Buffer || Buffer;
 
@@ -147,6 +148,43 @@ const NavMenu = styled.div`
   }
 `;
 
+const customtheme = {
+  titleBg: 'linear-gradient(45deg, #E165EC 0.01%, #A483ED 100%)', //not changed
+  titleTextColor: '#FFFFFF',
+  bgColorPrimary: '#fff',
+  bgColorSecondary: '#F7F1FB',
+  textColorPrimary: '#000',
+  textColorSecondary: '#657795',
+  textGradient: 'linear-gradient(45deg, #B6A0F5, #F46EF6, #FFDED3, #FFCFC5)', //not changed
+  btnColorPrimary: '#D53A94',
+  btnOutline: '#D53A94',
+  borderColor: '#FFFF',
+  borderRadius: '17px',
+  containerBorderRadius: '12px',
+  statusColorError: '#E93636',
+  statusColorSuccess: '#30CC8B',
+  iconColorPrimary: '#82828A',
+};
+
+const customDarkTheme = {
+  titleBg:
+    'linear-gradient(87.17deg, #EA4EE4 0%, #D23CDF 0.01%, #8B5CF6 100%)',
+  titleTextColor: '#fff',
+  bgColorPrimary: '#000',
+  bgColorSecondary: '#292344',
+  textColorPrimary: '#fff',
+  textColorSecondary: '#71717A',
+  textGradient: 'linear-gradient(45deg, #B6A0F5, #F46EF6, #FFDED3, #FFCFC5)',
+  btnColorPrimary: '#8B5CF6',
+  btnOutline: '#8B5CF6',
+  borderColor: '#3F3F46',
+  borderRadius: '17px',
+  containerBorderRadius: '12px',
+  statusColorError: '#E93636',
+  statusColorSuccess: '#30CC8B',
+  iconColorPrimary: '#71717A',
+};
+
 const checkForWeb3Data = ({
   library,
   active,
@@ -157,17 +195,18 @@ const checkForWeb3Data = ({
 };
 
 export function App() {
-  const web3Data: Web3ReactState = useWeb3React();
+  const {account, library, active, chainId} = useWeb3React();
 
-  const [env, setEnv] = useState<ENV>(ENV.PROD);
+  const [env, setEnv] = useState<ENV>(ENV.DEV);
   const [isCAIP, setIsCAIP] = useState(false);
 
   const { SpaceWidgetComponent } = useSpaceComponents();
   const [spaceId, setSpaceId] = useState<string>('');
+  const [pgpPrivateKey, setPgpPrivateKey] = useState<string>('');
 
   const socketData = useSDKSocket({
-    account: web3Data.account,
-    chainId: web3Data.chainId,
+    account: account,
+    chainId: chainId,
     env,
     isCAIP,
   });
@@ -180,6 +219,33 @@ export function App() {
     setIsCAIP(!isCAIP);
   };
 
+  useEffect(() => {
+    (async () => {
+      if (!account || !env || !library) return;
+
+      const user = await PushAPI.user.get({ account: account, env });
+      let pgpPrivateKey;
+      const librarySigner = await library.getSigner(account);
+      if (user?.encryptedPrivateKey) {
+        pgpPrivateKey = await PushAPI.chat.decryptPGPKey({
+          encryptedPGPPrivateKey: user.encryptedPrivateKey,
+          account: account,
+          signer: librarySigner,
+          env,
+        });
+      }
+
+      setPgpPrivateKey(pgpPrivateKey);
+    })();
+  }, [account, env, library]);
+
+  const spaceUI = useMemo(() => new SpacesUI({
+    account: account as string,
+    signer: library?.getSigner(),
+    pgpPrivateKey: pgpPrivateKey,
+    env: env,
+  }), [account, library, pgpPrivateKey, env]);
+
   return (
     <StyledApp>
       <Link className="homeLink" to="/">
@@ -211,10 +277,13 @@ export function App() {
 
       <hr />
       <EnvContext.Provider value={{ env, isCAIP }}>
-        {checkForWeb3Data(web3Data) ? (
-          <Web3Context.Provider value={web3Data}>
+        {checkForWeb3Data({
+          active, account, library, chainId
+        }) ? (
+          <Web3Context.Provider value={{account, active, library, chainId}}>
             <SocketContext.Provider value={socketData}>
-              <SpacesComponentProvider>
+              <AccountContext.Provider value={{pgpPrivateKey, setSpaceId}}>
+              <SpacesUIProvider spaceUI={spaceUI} theme={customDarkTheme}>
                 <Routes>
                   <Route
                     path="/"
@@ -367,7 +436,8 @@ export function App() {
                {/* <ChatWidgetTest/> */}
                <ChatWidgetTest/>
                 <SpaceWidgetComponent spaceId={spaceId} />
-              </SpacesComponentProvider>
+              </SpacesUIProvider>
+              </AccountContext.Provider>
             </SocketContext.Provider>
           </Web3Context.Provider>
         ) : null}

packages/demoreact/src/app/context/accountContext.ts

@@ -0,0 +1,5 @@
+import { createContext } from 'react'
+
+const AccountContext = createContext({});
+
+export default AccountContext;