fix(sdk-frontend): comment out spaces UI to remove build issues

packages/examples/sdk-frontend/components/Spaces/useSpaceComponent.tsx

@@ -1,47 +1,47 @@
-import {
-  ISpaceFeedProps,
-  ISpaceBannerProps,
-  ISpaceWidgetProps,
-  ISpaceCreateWidgetProps,
-  SpacesUI,
-  ISpaceInvitesProps,
-} from '@pushprotocol/uiweb';
-import { useAccount, useSigner } from 'wagmi';
-import React, { useContext} from 'react';
-import { ENV } from '@pushprotocol/restapi/src/lib/constants';
-import * as PushAPI from '@pushprotocol/restapi';
-import { AccountContext } from '../../contexts';
+// import {
+//   ISpaceFeedProps,
+//   ISpaceBannerProps,
+//   ISpaceWidgetProps,
+//   ISpaceCreateWidgetProps,
+//   SpacesUI,
+//   ISpaceInvitesProps,
+// } from '@pushprotocol/uiweb';
+// import { useAccount, useSigner } from 'wagmi';
+// import React, { useContext} from 'react';
+// import { ENV } from '@pushprotocol/restapi/src/lib/constants';
+// import * as PushAPI from '@pushprotocol/restapi';
+// import { AccountContext } from '../../contexts';
 
-export interface IUseSpaceReturnValues {
-  spaceUI: SpacesUI;
-  SpaceInvitesComponent: React.FC<ISpaceInvitesProps>;
-  SpaceWidgetComponent: React.FC<ISpaceWidgetProps>;
-  SpaceFeedComponent: React.FC<ISpaceFeedProps>;
-  SpaceBannerComponent: React.FC<ISpaceBannerProps>;
-  CreateSpaceComponent: React.FC<ISpaceCreateWidgetProps>;
-}
+// export interface IUseSpaceReturnValues {
+//   spaceUI: SpacesUI;
+//   SpaceInvitesComponent: React.FC<ISpaceInvitesProps>;
+//   SpaceWidgetComponent: React.FC<ISpaceWidgetProps>;
+//   SpaceFeedComponent: React.FC<ISpaceFeedProps>;
+//   SpaceBannerComponent: React.FC<ISpaceBannerProps>;
+//   CreateSpaceComponent: React.FC<ISpaceCreateWidgetProps>;
+// }
 
-export const useSpaceComponents = (): IUseSpaceReturnValues => {
-  const env = ENV.DEV;
+// export const useSpaceComponents = (): IUseSpaceReturnValues => {
+//   const env = ENV.DEV;
 
-  const { address } = useAccount();
-  const { data: signer } = useSigner();
+//   const { address } = useAccount();
+//   const { data: signer } = useSigner();
 
-  const { pgpPrivateKey } = useContext<any>(AccountContext);
+//   const { pgpPrivateKey } = useContext<any>(AccountContext);
 
-  const spaceUI = new SpacesUI({
-    account: address as string,
-    signer: signer as PushAPI.SignerType,
-    pgpPrivateKey: pgpPrivateKey,
-    env: env,
-  });
+//   const spaceUI = new SpacesUI({
+//     account: address as string,
+//     signer: signer as PushAPI.SignerType,
+//     pgpPrivateKey: pgpPrivateKey,
+//     env: env,
+//   });
 
-  return {
-    spaceUI,
-    SpaceInvitesComponent: spaceUI.SpaceInvites,
-    SpaceWidgetComponent: spaceUI.SpaceWidget,
-    SpaceBannerComponent: spaceUI.SpaceBanner,
-    SpaceFeedComponent: spaceUI.SpaceFeed,
-    CreateSpaceComponent: spaceUI.SpaceCreationButtonWidget,
-  };
-};
+//   return {
+//     spaceUI,
+//     SpaceInvitesComponent: spaceUI.SpaceInvites,
+//     SpaceWidgetComponent: spaceUI.SpaceWidget,
+//     SpaceBannerComponent: spaceUI.SpaceBanner,
+//     SpaceFeedComponent: spaceUI.SpaceFeed,
+//     CreateSpaceComponent: spaceUI.SpaceCreationButtonWidget,
+//   };
+// };

packages/examples/sdk-frontend/package.json

@@ -9,9 +9,9 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@pushprotocol/restapi": "../../../dist/packages/restapi",
-    "@pushprotocol/uiweb": "../../../dist/packages/uiweb",
+    "@pushprotocol/restapi": "^1.4.5",
     "@pushprotocol/socket": "^0.5.1",
+    "@pushprotocol/uiweb": "^1.1.8",
     "@rainbow-me/rainbowkit": "0.12.14",
     "ethers": "^5",
     "immer": "^10.0.2",

packages/examples/sdk-frontend/pages/_app.tsx

@@ -12,8 +12,8 @@ import { publicProvider } from 'wagmi/providers/public';
 import '@rainbow-me/rainbowkit/styles.css';
 import '../styles/globals.css';
 import { useEffect, useState } from 'react';
-import { SpacesUIProvider } from '@pushprotocol/uiweb';
-import { useSpaceComponents } from './../components/Spaces/useSpaceComponent';
+// import { SpacesUIProvider } from '@pushprotocol/uiweb';
+// import { useSpaceComponents } from './../components/Spaces/useSpaceComponent';
 import { AccountContext } from '../contexts';
 
 const { chains, provider } = configureChains([goerli], [publicProvider()]);
@@ -35,16 +35,16 @@ export interface ISpacesComponentProps {
 }
 
 const SpacesComponentProvider = ({ children }: ISpacesComponentProps) => {
-  const { spaceUI } = useSpaceComponents();
+  // const { spaceUI } = useSpaceComponents();
 
   const customtheme = {
     statusColorError: 'red',
   };
 
   return (
-    <SpacesUIProvider spaceUI={spaceUI} theme={customtheme}>
+    // <SpacesUIProvider spaceUI={spaceUI} theme={customtheme}>
       {children}
-    </SpacesUIProvider>
+    // </SpacesUIProvider>
   );
 };
 
@@ -63,9 +63,9 @@ function MyApp({ Component, pageProps }: AppProps) {
         <WagmiConfig client={wagmiClient}>
           <RainbowKitProvider theme={darkTheme()} chains={chains}>
           <AccountContext.Provider value={{ pgpPrivateKey, setPgpPrivateKey }}>
-              <SpacesComponentProvider>
+              {/* <SpacesComponentProvider> */}
                 <Component {...pageProps} />
-              </SpacesComponentProvider>
+              {/* </SpacesComponentProvider> */}
           </AccountContext.Provider>
           </RainbowKitProvider>
         </WagmiConfig>

packages/examples/sdk-frontend/pages/index.tsx

@@ -11,9 +11,9 @@ const Index: NextPage = () => {
       <Button>
         <Link href="/video">Video</Link>
       </Button>
-      <Button>
+      {/* <Button>
         <Link href="/spaces">Spaces UI</Link>
-      </Button>
+      </Button> */}
     </Container>
   );
 };

packages/examples/sdk-frontend/pages/video.tsx

@@ -1,17 +1,17 @@
-import type { NextPage } from "next";
-import Head from "next/head";
-import { ConnectButton } from "@rainbow-me/rainbowkit";
+import type { NextPage } from 'next';
+import Head from 'next/head';
+import { ConnectButton } from '@rainbow-me/rainbowkit';
 
-import * as PushAPI from "@pushprotocol/restapi";
-import { ENV } from "@pushprotocol/restapi/src/lib/constants";
-import { produce } from "immer";
-import { useAccount, useNetwork, useSigner } from "wagmi";
-import styled from "styled-components";
+import * as PushAPI from '@pushprotocol/restapi';
+import { ENV } from '@pushprotocol/restapi/src/lib/constants';
+import { produce } from 'immer';
+import { useAccount, useNetwork, useSigner } from 'wagmi';
+import styled from 'styled-components';
 
-import { usePushSocket } from "../hooks/usePushSocket";
-import { useEffect, useRef, useState } from "react";
-import VideoPlayer from "../components/VideoPlayer";
-import { ADDITIONAL_META_TYPE } from "@pushprotocol/restapi/src/lib/payloads/constants";
+import { usePushSocket } from '../hooks/usePushSocket';
+import { useEffect, useRef, useState } from 'react';
+import VideoPlayer from '../components/VideoPlayer';
+import { ADDITIONAL_META_TYPE } from '@pushprotocol/restapi/src/lib/payloads/constants';
 
 interface VideoCallMetaDataType {
   recipientAddress: string;
@@ -34,23 +34,51 @@ const Home: NextPage = () => {
 
   const videoObjectRef = useRef<PushAPI.video.Video>();
   const recipientAddressRef = useRef<HTMLInputElement>(null);
-  const chatIdRef = useRef<HTMLInputElement>(null);
 
   const [data, setData] = useState<PushAPI.VideoCallData>(
     PushAPI.video.initVideoCallData
   );
 
   const setRequestVideoCall = async () => {
+    // fetching chatId between the local address and the remote address
+    const user = await PushAPI.user.get({
+      account: address!,
+      env,
+    });
+    let pgpPrivateKey = null;
+    if (user?.encryptedPrivateKey) {
+      pgpPrivateKey = await PushAPI.chat.decryptPGPKey({
+        encryptedPGPPrivateKey: user.encryptedPrivateKey,
+        account: address,
+        signer,
+        env,
+      });
+    }
+    const response = await PushAPI.chat.chats({
+      account: address!,
+      toDecrypt: true,
+      pgpPrivateKey: pgpPrivateKey,
+      env,
+    });
+
+    let chatId = '';
+    response.forEach((chat) => {
+      if (chat.did === 'eip155:' + recipientAddressRef?.current?.value) {
+        chatId = chat.chatId!;
+      }
+    });
+
+    if (!chatId) return;
+
     // update the video call 'data' state with the outgoing call data
     videoObjectRef.current?.setData((oldData) => {
       return produce(oldData, (draft: any) => {
         if (!recipientAddressRef || !recipientAddressRef.current) return;
-        if (!chatIdRef || !chatIdRef.current) return;
 
         draft.local.address = address;
         draft.incoming[0].address = recipientAddressRef.current.value;
         draft.incoming[0].status = PushAPI.VideoCallStatus.INITIALIZED;
-        draft.meta.chatId = chatIdRef.current.value;
+        draft.meta.chatId = chatId;
       });
     });
 
@@ -88,9 +116,13 @@ const Home: NextPage = () => {
     });
   };
 
-  const connectHandler = (videoCallMetaData: VideoCallMetaDataType) => {
+  const connectHandler = ({
+    signalData,
+    senderAddress,
+  }: VideoCallMetaDataType) => {
     videoObjectRef.current?.connect({
-      signalData: videoCallMetaData.signalData,
+      signalData,
+      peerAddress: senderAddress,
     });
   };
 
@@ -156,19 +188,19 @@ const Home: NextPage = () => {
 
     // check for additionalMeta
     if (
-      !Object.prototype.hasOwnProperty.call(payload, "data") ||
-      !Object.prototype.hasOwnProperty.call(payload["data"], "additionalMeta")
+      !Object.prototype.hasOwnProperty.call(payload, 'data') ||
+      !Object.prototype.hasOwnProperty.call(payload['data'], 'additionalMeta')
     )
       return;
 
-    const additionalMeta = payload["data"]["additionalMeta"];
-    console.log("RECEIVED ADDITIONAL META", additionalMeta);
+    const additionalMeta = payload['data']['additionalMeta'];
+    console.log('RECEIVED ADDITIONAL META', additionalMeta);
     if (!additionalMeta) return;
 
     // check for PUSH_VIDEO
     if (additionalMeta.type !== `${ADDITIONAL_META_TYPE.PUSH_VIDEO}+1`) return;
     const videoCallMetaData = JSON.parse(additionalMeta.data);
-    console.log("RECIEVED VIDEO DATA", videoCallMetaData);
+    console.log('RECIEVED VIDEO DATA', videoCallMetaData);
 
     if (videoCallMetaData.status === PushAPI.VideoCallStatus.INITIALIZED) {
       setIncomingVideoCall(videoCallMetaData);
@@ -222,7 +254,6 @@ const Home: NextPage = () => {
               placeholder="recipient address"
               type="text"
             />
-            <input ref={chatIdRef} placeholder="chat id" type="text" />
           </HContainer>
 
           <HContainer>
@@ -250,7 +281,11 @@ const Home: NextPage = () => {
                 data.incoming[0].status ===
                 PushAPI.VideoCallStatus.UNINITIALIZED
               }
-              onClick={() => videoObjectRef.current?.disconnect()}
+              onClick={() =>
+                videoObjectRef.current?.disconnect({
+                  peerAddress: data.incoming[0].address,
+                })
+              }
             >
               Disconect
             </button>
@@ -285,10 +320,10 @@ const Home: NextPage = () => {
           </HContainer>
 
           <HContainer>
-            <p>LOCAL VIDEO: {data.local.video ? "TRUE" : "FALSE"}</p>
-            <p>LOCAL AUDIO: {data.local.audio ? "TRUE" : "FALSE"}</p>
-            <p>INCOMING VIDEO: {data.incoming[0].video ? "TRUE" : "FALSE"}</p>
-            <p>INCOMING AUDIO: {data.incoming[0].audio ? "TRUE" : "FALSE"}</p>
+            <p>LOCAL VIDEO: {data.local.video ? 'TRUE' : 'FALSE'}</p>
+            <p>LOCAL AUDIO: {data.local.audio ? 'TRUE' : 'FALSE'}</p>
+            <p>INCOMING VIDEO: {data.incoming[0].video ? 'TRUE' : 'FALSE'}</p>
+            <p>INCOMING AUDIO: {data.incoming[0].audio ? 'TRUE' : 'FALSE'}</p>
           </HContainer>
 
           <HContainer>
@@ -303,7 +338,7 @@ const Home: NextPage = () => {
           </HContainer>
         </>
       ) : (
-        "Please connect your wallet."
+        'Please connect your wallet.'
       )}
     </div>
   );

packages/restapi/README.md

@@ -4139,6 +4139,7 @@ Allowed Options (params with _ are mandatory)
 ```typescript
 export type VideoConnectInputOptions = {
   signalData: any;
+  peerAddress?: string;
 };
 
 connect(options: VideoConnectInputOptions): void {}
@@ -4148,6 +4149,7 @@ Allowed Options (params with _ are mandatory)
 | Param | Type | Default | Remarks |
 |----------|---------|---------|--------------------------------------------|
 | signalData_ | any | - | Signal data received from the receiver peer via push notification upon call acceptRequest |
+| peerAddress | string | data.incoming[0].address | Address of the receiver peer, received via push notification upon call acceptRequest |
 
 ---
 
@@ -4157,13 +4159,17 @@ Allowed Options (params with _ are mandatory)
 - Can be triggered on the initiator as well as receivers end.
 
 ```typescript
-disconnect(): void {}
+export type VideoDisconnectOptions = {
+  peerAddress: string;
+} | null;
+
+disconnect(options: VideoDisconnectOptions): void {}
 ```
 
 Allowed Options (params with \* are mandatory)
 | Param | Type | Default | Remarks |
 |----------|---------|---------|--------------------------------------------|
-| - | - | - | - |
+| peerAddress | string | data.incoming[0].address | Address of the peer to be disconnected from |
 
 ---
 

packages/restapi/src/lib/types/index.ts

@@ -649,7 +649,7 @@ export type VideoAcceptRequestInputOptions = {
 
 export type VideoConnectInputOptions = {
   signalData: any;
-  peerAddress: string;
+  peerAddress?: string;
 };
 
 export type VideoDisconnectOptions = {
@@ -658,7 +658,7 @@ export type VideoDisconnectOptions = {
     type: SPACE_DISCONNECT_TYPE;
     data: Record<string, unknown>;
   };
-};
+} | null;
 
 export type EnableVideoInputOptions = {
   state: boolean;