fix: added notification widget layout (#1076)

* feat(video-v2): add highlevel video class

* feat(video): add video stream

* fix(sendnotification): modify rules.access.data to be an object & code cleanup

* fix(video): remove signer from input, throw err if signer, decrypted pgp key  not found

* feat(video): add sendNotification calls in connect, disconnect methods

* fix(videonotificationrules): typo in VideoNotificationRules interface

* add: useStream.ts video-v2-example-app

* add: videoV2.tsx in video-v2-example-app

* feat(video stream): handle connect, retry internally from the SDK

* feat(video connect): remove the connect method from the videov2 SDK

* fix(videov2): create push signer instance to get chain id in initialize()

* fix(videov2-example): refactor react example component & remove useStream hook

* fix(video stream): add backwards compatibilty to rules object for older SDK versions

* fix(video stream): fix bug in rules object creation

* fix(video stream): call connect() for ApproveVideo event

* feat(example-video-1.5): video v2  example app  implementation

* feat(sdk-frontend): few ui changes

* fix(video-v2-example-app): initialisevdeo call after a call ends

* feat(video stream): add request, deny evennt handlers

* feat(sdk-frontend and sdk-frontend-react): added video-v2 example implementation

* fix: few fixes

* refactor: refator and remove console logs

* fix: fix import error

* feat(video): update param names for video.initialize()

* fix: param name changes

* chore: added few comments

* chore: ui toast added

* fix(video example): remove pushprotocol sdk direct dir reference for initVideoCallData

* fix(video example): import React in examples & update SDK version in sdk-frontend

* feat(video example): replace video events from CONSTANTS obj

* Edited video example to make it more versatile

* Update index.js

* fix: fixed message parsing (#1051)

* Minor fixes and improvements in video v2 (#1062)

* feat(video v2): add VIDEO constants and types

* feat(video v2): modify approve, deny to use internally stored peerInfo

* fix(video constants): rename DEFAULT_DATA to INITIAL_DATA

* 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

* fix: fixed signer bug (#1073)

* fix: send intent in history and latest. (#1069)

* fix: send intent in history and latest.

* fix: get chat info API sdk changes

* fix: stream helper functions

* fix: caching implementation on user profile API (#1053)

* fix: caching implementation on user profile API

* fix: cache code review comments

* fix: fix public key in read mode (#1074)

* fix: added notification widget layout

* fix: fixed naming convention

* fix: added layout for hyperlink

* Pub key cache to speed up chat messages verification (#1081)

* fix: minor fixes

* fix: cache implementation for public keys

* fix: fix encV1 key decryption (#1088)

* fix: add benchamark tests, fix reference msgs' (#1089)

* fix: added resuables

* bolierplate examples

* bolierplate examples

* bolierplate examples

* fix: added connect button

* fix: fixed lint

* fix: v2 user creation / upgrades / downgrades (#1099)

* fix: fix v2 user

* test: remove only

* Add filter for subscription (#1102)

* fix: added parsing for settings

* fix: minor fixes

* fix: added manage notifiction

* fix: added channel setting parse logic (#1107)

* fix: fixed css

* added user downgrade example

* fix: fixed lint

* fix: fixed connect modal

* fix: added readmode

* fix: fixed readMode

---------

Co-authored-by: Madhur Gupta <[email protected]>
Co-authored-by: Siddesh Sankhya <[email protected]>
Co-authored-by: Siddesh <[email protected]>
Co-authored-by: harshrajat <[email protected]>
Co-authored-by: Harsh | Push <[email protected]>
Co-authored-by: Aman Gupta <[email protected]>
Co-authored-by: Mohammed S <[email protected]>
Co-authored-by: Ashis Kumar Pradhan <[email protected]>
Co-authored-by: Mohammed S <[email protected]>

.gitignore

@@ -289,3 +289,6 @@ packages/restapi/yarn.lock
 yarn.lock
 *.env
 **/.next
+
+# NX cache
+.nx

packages/examples/sdk-frontend-react/src/app/widget/SubscriptionManagerTest.tsx

@@ -0,0 +1,14 @@
+import { SubscriptionManager } from "@pushprotocol/uiweb";
+
+export const SubscriptionManagerTest = () => {
+
+    return (
+        <div>
+            <SubscriptionManager 
+               channelAddress="eip155:11155111:0x778D3206374f8AC265728E18E3fE2Ae6b93E4ce4"
+               onClose={()=>console.debug('on close modal')}
+               autoconnect={false}
+            />
+        </div>
+    )
+}

packages/examples/sdk-frontend-react/src/app/widget/Widget.tsx

@@ -0,0 +1,40 @@
+import { useState } from 'react';
+import styled from 'styled-components';
+import { Link } from 'react-router-dom';
+import { Section } from '../components/StyledComponents';
+import Loader from '../components/Loader';
+
+const Widget = () => {
+  const [isLoading, setIsLoading] = useState(false);
+
+  const NavMenu = styled.div`
+    display: flex;
+    flex-wrap: wrap;
+    gap: 30px;
+    justify-content: center;
+
+    @media only screen and (max-width: 900px) {
+      flex-direction: column;
+    }
+  `;
+
+  return (
+    <div>
+      <h2>Widget Test page</h2>
+
+      <Loader show={isLoading} />
+
+      <Section>
+        <NavMenu>
+        <Link to="/subscriptionManager" className="nav-button">
+           SUBSCRIPTION MANAGER
+          </Link>
+
+
+        </NavMenu>
+      </Section>
+    </div>
+  );
+};
+
+export default Widget;

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;

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",

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 }}

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,
   });

packages/examples/several-examples/README.md

@@ -0,0 +1,13 @@
+# About Several Examples
+Several Examples is a collection of examples that can be used to test various functionalities available at [Push SDK Docs](https://push.org/docs)
+
+## What's the use case
+You can use this example to test various functionalities available at [Push SDK Docs](https://push.org/docs)
+
+- Create or test any boilerplate code
+
+## Install instructions
+1. Navigate to this directory from the terminal
+2. do `npm install` or `yarn install`
+3. copy and paste any example-[name] to index.js
+3. do `yarn start`

packages/examples/several-examples/example-chat-block-unblock.js

@@ -0,0 +1,140 @@
+import { CONSTANTS, PushAPI } from '@pushprotocol/restapi';
+import { ethers } from 'ethers';
+import input from 'input';
+
+console.log("Hello... what's my purpose?")
+console.log("To train all the hackers..")
+
+// Creating a random signer from a wallet, ideally this is the wallet you will connect
+const aliceSigner = ethers.Wallet.createRandom();
+const bobSigner = ethers.Wallet.createRandom();
+
+console.log(`Signer address: ${aliceSigner.address} | Signer private key: ${aliceSigner.privateKey}`);
+console.log(`Signer2 address: ${bobSigner.address} | Signer private key: ${bobSigner.privateKey}`);
+
+// Initialize wallet user, pass 'prod' instead of 'staging' for mainnet apps
+const userAlice = await PushAPI.initialize(aliceSigner, { env: 'staging' });
+const userBob = await PushAPI.initialize(bobSigner, { env: 'staging' });
+
+const aliceAccount = aliceSigner.address;
+const bobAccount = bobSigner.address;
+
+// alice sends message as request to bob
+console.log("Alice sends message as request to bob")
+const aliceMessagesBob = await userAlice.chat.send(bobAccount, {
+  type: "Text",
+  content: "Hello Bob!",
+});
+
+console.log("Alice message bob", aliceMessagesBob)
+
+const aliceMessagesBob2 = await userAlice.chat.send(bobAccount, {
+  type: "Text",
+  content: "Please accept so I can spam you with messages!",
+});
+
+console.log("Alice message bob again", aliceMessagesBob2)
+
+// bob blocks alice
+console.log("Bob blocks alice")
+const blockAlice = await userBob.chat.block([aliceAccount]);
+console.log("Bob blocks alice response", blockAlice)
+
+try {
+  const aliceMessagesBob3 = await userAlice.chat.send(bobAccount, {
+    type: "Text",
+    content: "YOU ARE NOT LISTENING TO ME!",
+  });
+  console.log("Alice message bob when bob has blocked part 1", aliceMessagesBob3)
+
+}
+catch (e) {
+  console.log("Alice message bob when bob has blocked part 1", e)
+}
+
+try {
+  const aliceMessagesBob4 = await userAlice.chat.send(bobAccount, {
+    type: "Text",
+    content: "HELLO I AM TALKNG TO YOU!",
+  });
+
+  console.log("Alice message bob when bob has blocked part 2", aliceMessagesBob4)
+}
+catch (e) {
+  console.log("Alice message bob when bob has blocked part 2", e)
+}
+
+console.log("Bob unblocks alice")
+const unblockAlice = await userBob.chat.unblock([aliceAccount]);
+console.log("Bob unblocks alice response", unblockAlice)
+
+const aliceMessagesBob5 = await userAlice.chat.send(bobAccount, {
+  type: "Text",
+  content: "I promise to be nice!",
+});
+
+console.log("Alice message bob when bob has unblocked", aliceMessagesBob5)
+
+// bob accepts alice's message
+console.log("Bob accepts alice's message")
+const bobAcceptsAlice = await userBob.chat.accept(aliceAccount);
+console.log("Bob accepts alice's message response", bobAcceptsAlice)
+
+const aliceMessagesBob6 = await userAlice.chat.send(bobAccount, {
+  type: "Text",
+  content: "Finally you are talking! you scum",
+});
+
+console.log("Alice message bob when bob has accepted and is unblocked", aliceMessagesBob5)
+
+// bob blocks alice again
+console.log("Bob blocks alice again")
+const blockAlice2 = await userBob.chat.block([aliceAccount]);
+console.log("Bob blocks alice response", blockAlice2)
+
+try {
+  const aliceMessagesBob7 = await userAlice.chat.send(bobAccount, {
+    type: "Text",
+    content: "YOU SCUM! I WILL KEEP MESSAGING YOU!",
+  });
+  console.log("Alice message bob when bob has blocked part 3", aliceMessagesBob7)
+
+}
+catch (e) {
+  console.log("Alice message bob when bob has blocked part 3", e)
+}
+
+try {
+  const bobMessageAliceWhileBobBlockedAlice = await userAlice.chat.send(aliceAccount, {
+    type: "Text",
+    content: "Hehe, you are blocked",
+  });
+
+  console.log("Bob message alice when bob has blocked Alice", aliceMessagesBob8)
+}
+catch (e) {
+  console.log("Bob message alice when bob has blocked Alice", e)
+}
+
+try {
+  const aliceMessagesBob8 = await userAlice.chat.send(bobAccount, {
+    type: "Text",
+    content: "Okay okay I will stop! I promise!",
+  });
+
+  console.log("Alice message bob when bob has blocked part 4", aliceMessagesBob8)
+}
+catch (e) {
+  console.log("Alice message bob when bob has blocked part 4", e)
+}
+
+console.log("Bob unblocks alice again")
+const unblockAlice2 = await userBob.chat.unblock([aliceAccount]);
+console.log("Bob unblocks alice response", unblockAlice2)x
+
+const aliceMessagesBob9 = await userAlice.chat.send(bobAccount, {
+  type: "Text",
+  content: "I love you! I promise to be nice!",
+});
+
+console.log("Alice message bob when bob has accepted and is unblocked", aliceMessagesBob9)

packages/examples/several-examples/example-user-downgrade.js

@@ -0,0 +1,25 @@
+import { CONSTANTS, PushAPI } from '@pushprotocol/restapi';
+import { ethers } from 'ethers';
+import input from 'input';
+
+// Requesting private key from user
+// This is a demo to show how to downgrade a user to PGP V1
+console.log("This demo requires a wallet to be initialized via private key so that it can be downgraded to PGP V1");
+console.log("Alternatively just leave the input empty and we will create a new user");
+let pk = await input.text('Enter private key of your wallet -');
+if (pk.length > 0 && pk.substr(0, 2) !== '0x') {
+  pk = '0x' + pk;
+}
+
+// Loading signer from private key, ideally this is the wallet you will connect
+const signer = pk.length > 0 ? new ethers.Wallet(pk) : ethers.Wallet.createRandom();
+
+// Print wallet address
+console.log('Wallet address: ', signer.address);
+
+// Initialize wallet user, pass 'prod' instead of 'staging' for mainnet apps
+let userAlice = await PushAPI.initialize(signer, { env: CONSTANTS.ENV.PROD });
+console.log('User initialized with current PGP Version', userAlice);
+
+userAlice = await userAlice.encryption.update(CONSTANTS.USER.ENCRYPTION_TYPE.PGP_V1);
+console.log('User downgraded to PGP V1', userAlice);

packages/examples/several-examples/index.js

@@ -0,0 +1,6 @@
+import { CONSTANTS, PushAPI } from '@pushprotocol/restapi';
+import { ethers } from 'ethers';
+import input from 'input';
+
+console.log("Hello... what's my purpose?")
+console.log("To serve as a copy paste for all example-name.js files")