1050 update video example implementation in sdk-frontend (#1070)

* fix: use latest imports in example app * feat: use latest rainbowkit library * chore: use latest restapi package * chore: remove unnecessary libs
push-protocol · Jan 29, 2024 · 3f84c10 · 3f84c10
1 parent 031a47e
commit 3f84c10
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 75 deletions.
diff --git a/packages/examples/sdk-frontend/helpers/getCAIPAddress.ts b/packages/examples/sdk-frontend/helpers/getCAIPAddress.ts
@@ -1,12 +1,12 @@
-import { ENV } from "@pushprotocol/restapi/src/lib/constants";
-import { ethers } from "ethers";
+import { ENV } from '@pushprotocol/restapi/src/lib/constants';
+import { isAddress } from 'viem';
 
 export interface AddressValidatorsType {
   [key: string]: ({ address }: { address: string }) => boolean;
 }
 
 export function isValidETHAddress(address: string) {
-  return ethers.utils.isAddress(address);
+  return isAddress(address);
 }
 
 const AddressValidators: AddressValidatorsType = {
@@ -16,7 +16,7 @@ const AddressValidators: AddressValidatorsType = {
 };
 
 function validateCAIP(addressInCAIP: string) {
-  const [blockchain, networkId, address] = addressInCAIP.split(":");
+  const [blockchain, networkId, address] = addressInCAIP.split(':');
 
   if (!blockchain) return false;
   if (!networkId) return false;

diff --git a/packages/examples/sdk-frontend/package.json b/packages/examples/sdk-frontend/package.json
@@ -9,17 +9,16 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@pushprotocol/restapi": "^1.6.2",
+    "@pushprotocol/restapi": "^1.6.4",
     "@pushprotocol/socket": "^0.5.1",
-    "@pushprotocol/uiweb": "^1.1.8",
-    "@rainbow-me/rainbowkit": "0.12.14",
-    "ethers": "^5",
+    "@rainbow-me/rainbowkit": "^1.3.3",
     "immer": "^10.0.2",
     "next": "^13.4.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "styled-components": "^5.3.11",
-    "wagmi": "0.12.13"
+    "viem": "1",
+    "wagmi": "1"
   },
   "devDependencies": {
     "@types/node": "^18.16.12",

diff --git a/packages/examples/sdk-frontend/pages/_app.tsx b/packages/examples/sdk-frontend/pages/_app.tsx
@@ -5,7 +5,7 @@ import {
   RainbowKitProvider,
   darkTheme,
 } from '@rainbow-me/rainbowkit';
-import { configureChains, createClient, WagmiConfig } from 'wagmi';
+import { configureChains, createConfig, WagmiConfig } from 'wagmi';
 import { sepolia } from 'wagmi/chains';
 import { publicProvider } from 'wagmi/providers/public';
 import { infuraProvider } from 'wagmi/providers/infura';
@@ -17,7 +17,7 @@ import { useEffect, useState } from 'react';
 // import { useSpaceComponents } from './../components/Spaces/useSpaceComponent';
 import { AccountContext } from '../contexts';
 
-const { chains, provider } = configureChains(
+const { chains, publicClient } = configureChains(
   [sepolia],
   [
     infuraProvider({ apiKey: '5524d420b29f4f7a8d8d2f582a0d43f7' }),
@@ -31,10 +31,10 @@ const { connectors } = getDefaultWallets({
   chains,
 });
 
-const wagmiClient = createClient({
+const wagmiConfig = createConfig({
   autoConnect: true,
   connectors,
-  provider,
+  publicClient,
 });
 
 export interface ISpacesComponentProps {
@@ -67,7 +67,7 @@ function MyApp({ Component, pageProps }: AppProps) {
     <>
       {/* hacky fix for wagmi ssr hydration errors */}
       {loadWagmi ? (
-        <WagmiConfig client={wagmiClient}>
+        <WagmiConfig config={wagmiConfig}>
           <RainbowKitProvider theme={darkTheme()} chains={chains}>
             <AccountContext.Provider
               value={{ pgpPrivateKey, setPgpPrivateKey }}

diff --git a/packages/examples/sdk-frontend/pages/video-v2.tsx b/packages/examples/sdk-frontend/pages/video-v2.tsx
@@ -1,16 +1,9 @@
 import type { NextPage } from 'next';
 import React, { useEffect, useRef, useState } from 'react';
 
-import { useAccount, useSigner } from 'wagmi';
+import { useAccount, useWalletClient } from 'wagmi';
 import styled from 'styled-components';
-import {
-  PushAPI,
-  CONSTANTS,
-  VideoCallData,
-  VideoEvent,
-  VideoCallStatus,
-  video,
-} from '@pushprotocol/restapi';
+import { CONSTANTS, PushAPI, TYPES } from '@pushprotocol/restapi';
 
 import IncomingVideoModal from '../components/IncomingVideoModal';
 import VideoPlayer from '../components/VideoPlayer';
@@ -19,15 +12,18 @@ import Toast from '../components/Toast';
 const VideoV2: NextPage = () => {
   const { isConnected } = useAccount();
 
-  const { data: signer } = useSigner();
+  const { data: signer } = useWalletClient();
 
   const aliceVideoCall = useRef<any>();
-  const [latestVideoEvent, setLatestVideoEvent] = useState<VideoEvent | null>(
-    null
-  );
+
   const [isPushStreamConnected, setIsPushStreamConnected] = useState(false);
 
-  const [data, setData] = useState<VideoCallData>(video.initVideoCallData);
+  const [data, setData] = useState<TYPES.VIDEO.DATA>(
+    CONSTANTS.VIDEO.INITIAL_DATA
+  );
+  const [incomingCallerAddress, setIncomingCallerAddress] = useState<
+    string | null
+  >(null);
   const [recipientAddress, setRecipientAddress] = useState<string>();
 
   const initializePushAPI = async () => {
@@ -49,27 +45,30 @@ const VideoV2: NextPage = () => {
       setIsPushStreamConnected(false);
     });
 
-    createdStream.on(CONSTANTS.STREAM.VIDEO, async (data: VideoEvent) => {
-      if (data.event === CONSTANTS.VIDEO.EVENT.REQUEST) {
-        setLatestVideoEvent(data);
-      }
-
-      if (data.event === CONSTANTS.VIDEO.EVENT.APPROVE) {
-        console.log('Video Call Approved');
-      }
-
-      if (data.event === CONSTANTS.VIDEO.EVENT.DENY) {
-        alert('User Denied the Call');
-      }
-
-      if (data.event === CONSTANTS.VIDEO.EVENT.CONNECT) {
-        console.log('Video Call Connected');
-      }
-
-      if (data.event === CONSTANTS.VIDEO.EVENT.DISCONNECT) {
-        alert('Video Call ended!');
+    createdStream.on(
+      CONSTANTS.STREAM.VIDEO,
+      async (data: TYPES.VIDEO.EVENT) => {
+        if (data.event === CONSTANTS.VIDEO.EVENT.REQUEST) {
+          setIncomingCallerAddress(data.peerInfo.address);
+        }
+
+        if (data.event === CONSTANTS.VIDEO.EVENT.APPROVE) {
+          console.log('Video Call Approved');
+        }
+
+        if (data.event === CONSTANTS.VIDEO.EVENT.DENY) {
+          alert('User Denied the Call');
+        }
+
+        if (data.event === CONSTANTS.VIDEO.EVENT.CONNECT) {
+          console.log('Video Call Connected');
+        }
+
+        if (data.event === CONSTANTS.VIDEO.EVENT.DISCONNECT) {
+          alert('Video Call ended!');
+        }
       }
-    });
+    );
 
     aliceVideoCall.current = await userAlice.video.initialize(setData, {
       stream: createdStream,
@@ -85,13 +84,14 @@ const VideoV2: NextPage = () => {
   // Here we initialize the push video API, which is the first and important step to make video calls
   useEffect(() => {
     if (!signer) return;
-    if (data?.incoming[0]?.status !== VideoCallStatus.UNINITIALIZED) return; // data?.incoming[0]?.status will have a status of VideoCallStatus.UNINITIALIZED when the video call is not initialized, call ended or denied. So we Initialize the Push API here.
+    if (data?.incoming[0]?.status !== CONSTANTS.VIDEO.STATUS.UNINITIALIZED)
+      return; // data?.incoming[0]?.status will have a status of VideoCallStatus.UNINITIALIZED when the video call is not initialized, call ended or denied. So we Initialize the Push API here.
     initializePushAPI();
   }, [signer, data.incoming[0].status]);
 
   useEffect(() => {
     console.log('isPushStreamConnected', isPushStreamConnected); // This will be true when the push stream is connected
-  }, [isPushStreamConnected, latestVideoEvent]);
+  }, [isPushStreamConnected]);
 
   // This function is used to request a video call to a recipient
   const requestVideoCall = async (recipient: string) => {
@@ -100,17 +100,17 @@ const VideoV2: NextPage = () => {
 
   // This function is used to accept the incoming video call
   const acceptIncomingCall = async () => {
-    await aliceVideoCall.current.approve(latestVideoEvent?.peerInfo);
+    await aliceVideoCall.current.approve(incomingCallerAddress);
   };
 
   // This function is used to deny the incoming video call
   const denyIncomingCall = async () => {
-    await aliceVideoCall.current.deny(latestVideoEvent?.peerInfo);
+    await aliceVideoCall.current.deny(incomingCallerAddress);
   };
 
   // This function is used to end the ongoing video call
   const endCall = async () => {
-    await aliceVideoCall.current.disconnect(data?.incoming[0]?.address);
+    await aliceVideoCall.current.disconnect();
   };
 
   return (
@@ -145,7 +145,7 @@ const VideoV2: NextPage = () => {
             <button
               disabled={!data.incoming[0]}
               onClick={() => {
-                aliceVideoCall.current?.media({ video: !data.local.video }); // This function is used to toggle the video on/off
+                aliceVideoCall.current?.config({ video: !data.local.video }); // This function is used to toggle the video on/off
               }}
             >
               Toggle Video
@@ -154,19 +154,19 @@ const VideoV2: NextPage = () => {
             <button
               disabled={!data.incoming[0]}
               onClick={() => {
-                aliceVideoCall.current?.media({ audio: !data?.local.audio }); // This function is used to toggle the audio on/off
+                aliceVideoCall.current?.config({ audio: !data?.local.audio }); // This function is used to toggle the audio on/off
               }}
             >
               Toggle Audio
             </button>
 
-            {data?.incoming[0]?.status === VideoCallStatus.CONNECTED && (
+            {data?.incoming[0]?.status === CONSTANTS.VIDEO.STATUS.CONNECTED && (
               <Toast message="Video Call Connected" bg="#4caf50" />
             )}
 
-            {data.incoming[0].status === VideoCallStatus.RECEIVED && (
+            {data.incoming[0].status === CONSTANTS.VIDEO.STATUS.RECEIVED && (
               <IncomingVideoModal
-                callerID={latestVideoEvent?.peerInfo?.address}
+                callerID={incomingCallerAddress!}
                 onAccept={acceptIncomingCall}
                 onReject={denyIncomingCall}
               />

diff --git a/packages/examples/sdk-frontend/pages/video.tsx b/packages/examples/sdk-frontend/pages/video.tsx
@@ -3,13 +3,16 @@ import type { NextPage } from 'next';
 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 { useAccount, useNetwork, useWalletClient } 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, VIDEO_NOTIFICATION_ACCESS_TYPE } from '@pushprotocol/restapi/src/lib/payloads/constants';
+import {
+  ADDITIONAL_META_TYPE,
+  VIDEO_NOTIFICATION_ACCESS_TYPE,
+} from '@pushprotocol/restapi/src/lib/payloads/constants';
 
 interface VideoCallMetaDataType {
   recipientAddress: string;
@@ -25,7 +28,7 @@ const env = ENV.DEV;
 const Home: NextPage = () => {
   const { address, isConnected } = useAccount();
   const { chain } = useNetwork();
-  const { data: signer } = useSigner();
+  const { data: signer } = useWalletClient();
   const { pushSocket, isPushSocketConnected, latestFeedItem } = usePushSocket({
     env,
   });
@@ -114,10 +117,10 @@ const Home: NextPage = () => {
         access: {
           type: VIDEO_NOTIFICATION_ACCESS_TYPE.PUSH_CHAT,
           data: {
-            chatId: data.meta.chatId
-          }
-        }
-      }
+            chatId: data.meta.chatId,
+          },
+        },
+      },
     });
   };
 
@@ -176,10 +179,10 @@ const Home: NextPage = () => {
             access: {
               type: VIDEO_NOTIFICATION_ACCESS_TYPE.PUSH_CHAT,
               data: {
-                chatId: data.meta.chatId
-              }
-            }
-          }
+                chatId: data.meta.chatId,
+              },
+            },
+          },
         });
       }
     })();
@@ -236,9 +239,9 @@ const Home: NextPage = () => {
           access: {
             type: VIDEO_NOTIFICATION_ACCESS_TYPE.PUSH_CHAT,
             data: {
-              chatId: data.meta.chatId
-            }
-          }
+              chatId: data.meta.chatId,
+            },
+          },
         },
         retry: true,
       });
@@ -254,9 +257,9 @@ const Home: NextPage = () => {
           access: {
             type: VIDEO_NOTIFICATION_ACCESS_TYPE.PUSH_CHAT,
             data: {
-              chatId: data.meta.chatId
-            }
-          }
+              chatId: data.meta.chatId,
+            },
+          },
         },
         retry: true,
       });