From b222a6a3123dc9530a2b41cc5efb6e848b5fbc50 Mon Sep 17 00:00:00 2001
From: aman035 <guptaaman200115@gmail.com>
Date: Fri, 21 Jul 2023 12:43:35 +0530
Subject: [PATCH] docs: moved demoreact

---
 nx.json                                       |   2 +-
 packages/demoreact/src/app/ChatTest/helper.ts |  19 -
 packages/demoreact/src/app/ChatWidgetTest.tsx |  48 --
 packages/demoreact/src/app/EmbedTest.tsx      |  48 --
 .../demoreact/src/app/NotificationsTest.tsx   | 262 ----------
 packages/demoreact/src/app/PayloadsTest.tsx   | 386 ---------------
 .../src/app/SecretNotificationsTest.tsx       |  11 -
 .../app/SpaceUITest/CreateSpaceComponent.tsx  |   7 -
 .../src/app/SpaceUITest/SpaceInvites.tsx      |   9 -
 .../demoreact/src/app/components/Checkbox.tsx |  15 -
 .../demoreact/src/app/components/Dropdown.tsx |  35 --
 .../demoreact/src/app/components/Feedback.tsx |  38 --
 .../demoreact/src/app/components/Icons.tsx    |  17 -
 .../demoreact/src/app/components/Loader.tsx   |  62 ---
 .../src/app/context/accountContext.ts         |   5 -
 .../demoreact/src/app/context/envContext.ts   |   5 -
 packages/demoreact/src/app/context/index.ts   |  11 -
 .../src/app/context/socketContext.ts          |   5 -
 .../demoreact/src/app/context/web3context.ts  |   5 -
 packages/demoreact/src/app/data.ts            | 204 --------
 packages/demoreact/src/app/hooks/index.ts     |   1 -
 .../sdk-frontend-react}/.babelrc              |   0
 .../sdk-frontend-react}/.browserslistrc       |   0
 .../sdk-frontend-react}/.eslintrc.json        |   2 +-
 .../sdk-frontend-react}/jest.config.ts        |   6 +-
 .../sdk-frontend-react}/project.json          |  36 +-
 .../sdk-frontend-react}/src/app/AliasTest.tsx |  45 +-
 .../src/app/ChannelsTest.tsx                  | 140 +++---
 .../src/app/ChatSupportTest.tsx               |   2 +-
 .../src/app/ChatTest/AddAdminsToGroupTest.tsx |  55 +--
 .../app/ChatTest/AddMembersToGroupTest.tsx    |  55 ++-
 .../src/app/ChatTest/ApproveRequestTest.tsx   |   4 +-
 .../src/app/ChatTest/AuthUpdateUser.tsx       |   0
 .../src/app/ChatTest/ChatTest.tsx             |   2 +-
 .../src/app/ChatTest/ConversationHash.tsx     |   0
 .../src/app/ChatTest/CreateGroupTest.tsx      |   0
 .../src/app/ChatTest/CreateUser.tsx           |   0
 .../src/app/ChatTest/GetChats.tsx             |   0
 .../src/app/ChatTest/GetGroupTest.tsx         |  23 +-
 .../src/app/ChatTest/GetRequests.tsx          |   0
 .../src/app/ChatTest/GetUser.tsx              |   0
 .../src/app/ChatTest/GetUsersBatchTest.tsx    |   5 +-
 .../src/app/ChatTest/History.tsx              |   0
 .../ChatTest/RemoveAdminsFromGroupTest.tsx    |  53 ++-
 .../ChatTest/RemoveMembersFromGroupTest.tsx   |  43 +-
 .../src/app/ChatTest/SendMessageTest.tsx      |   0
 .../src/app/ChatTest/UpdateGroupTest.tsx      |   0
 .../src/app/ChatTest/UpdateUserProfile.tsx    |   0
 .../src/app/ChatTest/helper.ts                |  17 +
 .../src/app/ChatWidgetTest.tsx                |  43 ++
 .../src/app/DelegationTest.tsx                |  32 +-
 .../sdk-frontend-react/src/app/EmbedTest.tsx  |  47 ++
 .../src/app/NotificationsTest.tsx             | 293 ++++++++++++
 .../src/app/PayloadsTest.tsx                  | 448 ++++++++++++++++++
 .../src/app/SecretNotificationsTest.tsx       |  11 +
 .../src/app/SocketTest.tsx                    |  79 +--
 .../app/SpaceTest/AddListenersToSpaceTest.tsx |  53 ++-
 .../app/SpaceTest/AddSpeakersToSpaceTest.tsx  |  53 ++-
 .../app/SpaceTest/ApproveSpaceRequestTest.tsx |   2 +-
 .../src/app/SpaceTest/CreateSpaceTest.tsx     |  16 +-
 .../src/app/SpaceTest/GetSpaceInfoTest.tsx    |  21 +-
 .../src/app/SpaceTest/GetSpaceTest.tsx        |  23 +-
 .../app/SpaceTest/GetSpacesRequestsTest.tsx   |   7 +-
 .../src/app/SpaceTest/GetSpacesTest.tsx       |   0
 .../app/SpaceTest/GetSpacesTrendingTest.tsx   |   8 +-
 .../RemoveListenersFromSpaceTest.tsx          |  57 ++-
 .../SpaceTest/RemoveSpeakersFromSpaceTest.tsx |  57 +--
 .../src/app/SpaceTest/SpaceTest.tsx           |   4 +-
 .../src/app/SpaceTest/StartSpaceTest.tsx      |  43 +-
 .../src/app/SpaceTest/StopSpaceTest.tsx       |  41 +-
 .../src/app/SpaceTest/UpdateSpaceTest.tsx     |  17 +-
 .../app/SpaceUITest/CreateSpaceComponent.tsx  |   7 +
 .../src/app/SpaceUITest/SpaceBanner.tsx       |   2 +-
 .../src/app/SpaceUITest/SpaceFeed.tsx         |   0
 .../src/app/SpaceUITest/SpaceInvites.tsx      |   7 +
 .../src/app/SpaceUITest/SpaceUITest.tsx       |   4 +-
 .../src/app/SpaceUITest/SpaceWidget.tsx       |  20 +-
 .../src/app/SpaceUITest/index.tsx             |   1 -
 .../app/SpaceUITest/useSpaceComponents.tsx    |   0
 .../sdk-frontend-react}/src/app/app.tsx       | 361 +++++++-------
 .../src/app/components/Checkbox.tsx           |  20 +
 .../src/app/components/Connect.tsx            |  67 +--
 .../src/app/components/Dropdown.tsx           |  37 ++
 .../src/app/components/Feedback.tsx           |  33 ++
 .../src/app/components/Icons.tsx              |  24 +
 .../src/app/components/Loader.tsx             |  64 +++
 .../src/app/components/StyledComponents.tsx   |  12 +-
 .../src/app/context/accountContext.ts         |   5 +
 .../src/app/context/envContext.ts             |   5 +
 .../src/app/context/index.ts                  |   6 +
 .../src/app/context/socketContext.ts          |   5 +
 .../src/app/context/web3context.ts            |   5 +
 .../sdk-frontend-react/src/app/data.ts        | 205 ++++++++
 .../sdk-frontend-react}/src/app/helpers.ts    |  52 +-
 .../sdk-frontend-react/src/app/hooks/index.ts |   1 +
 .../src/app/hooks/useSDKSocket.ts             |  63 +--
 .../sdk-frontend-react}/src/assets/.gitkeep   |   0
 .../sdk-frontend-react}/src/assets/dark.svg   |   0
 .../src/assets/epnsLogo.png                   | Bin
 .../sdk-frontend-react}/src/assets/light.svg  |   0
 .../src/assets/pushLogo.svg                   |   0
 .../src/environments/environment.prod.ts      |   0
 .../src/environments/environment.ts           |   0
 .../sdk-frontend-react}/src/favicon.ico       | Bin
 .../sdk-frontend-react}/src/index.html        |   4 +-
 .../sdk-frontend-react}/src/main.tsx          |  13 +-
 .../sdk-frontend-react}/src/polyfills.ts      |   0
 .../sdk-frontend-react}/tsconfig.app.json     |   6 +-
 .../sdk-frontend-react}/tsconfig.json         |   2 +-
 .../sdk-frontend-react}/tsconfig.spec.json    |   6 +-
 packages/reactnative/project.json             |   5 +-
 packages/uiweb/project.json                   |   5 +-
 workspace.json                                |   2 +-
 113 files changed, 2119 insertions(+), 1968 deletions(-)
 delete mode 100644 packages/demoreact/src/app/ChatTest/helper.ts
 delete mode 100644 packages/demoreact/src/app/ChatWidgetTest.tsx
 delete mode 100644 packages/demoreact/src/app/EmbedTest.tsx
 delete mode 100644 packages/demoreact/src/app/NotificationsTest.tsx
 delete mode 100644 packages/demoreact/src/app/PayloadsTest.tsx
 delete mode 100644 packages/demoreact/src/app/SecretNotificationsTest.tsx
 delete mode 100644 packages/demoreact/src/app/SpaceUITest/CreateSpaceComponent.tsx
 delete mode 100644 packages/demoreact/src/app/SpaceUITest/SpaceInvites.tsx
 delete mode 100644 packages/demoreact/src/app/components/Checkbox.tsx
 delete mode 100644 packages/demoreact/src/app/components/Dropdown.tsx
 delete mode 100644 packages/demoreact/src/app/components/Feedback.tsx
 delete mode 100644 packages/demoreact/src/app/components/Icons.tsx
 delete mode 100644 packages/demoreact/src/app/components/Loader.tsx
 delete mode 100644 packages/demoreact/src/app/context/accountContext.ts
 delete mode 100644 packages/demoreact/src/app/context/envContext.ts
 delete mode 100644 packages/demoreact/src/app/context/index.ts
 delete mode 100644 packages/demoreact/src/app/context/socketContext.ts
 delete mode 100644 packages/demoreact/src/app/context/web3context.ts
 delete mode 100644 packages/demoreact/src/app/data.ts
 delete mode 100644 packages/demoreact/src/app/hooks/index.ts
 rename packages/{demoreact => examples/sdk-frontend-react}/.babelrc (100%)
 rename packages/{demoreact => examples/sdk-frontend-react}/.browserslistrc (100%)
 rename packages/{demoreact => examples/sdk-frontend-react}/.eslintrc.json (79%)
 rename packages/{demoreact => examples/sdk-frontend-react}/jest.config.ts (57%)
 rename packages/{demoreact => examples/sdk-frontend-react}/project.json (53%)
 rename packages/{demoreact => examples/sdk-frontend-react}/src/app/AliasTest.tsx (67%)
 rename packages/{demoreact => examples/sdk-frontend-react}/src/app/ChannelsTest.tsx (69%)
 rename packages/{demoreact => examples/sdk-frontend-react}/src/app/ChatSupportTest.tsx (97%)
 rename packages/{demoreact => examples/sdk-frontend-react}/src/app/ChatTest/AddAdminsToGroupTest.tsx (72%)
 rename packages/{demoreact => examples/sdk-frontend-react}/src/app/ChatTest/AddMembersToGroupTest.tsx (72%)
 rename packages/{demoreact => examples/sdk-frontend-react}/src/app/ChatTest/ApproveRequestTest.tsx (98%)
 rename packages/{demoreact => examples/sdk-frontend-react}/src/app/ChatTest/AuthUpdateUser.tsx (100%)
 rename packages/{demoreact => examples/sdk-frontend-react}/src/app/ChatTest/ChatTest.tsx (99%)
 rename packages/{demoreact => examples/sdk-frontend-react}/src/app/ChatTest/ConversationHash.tsx (100%)
 rename packages/{demoreact => examples/sdk-frontend-react}/src/app/ChatTest/CreateGroupTest.tsx (100%)
 rename packages/{demoreact => examples/sdk-frontend-react}/src/app/ChatTest/CreateUser.tsx (100%)
 rename packages/{demoreact => examples/sdk-frontend-react}/src/app/ChatTest/GetChats.tsx (100%)
 rename packages/{demoreact => examples/sdk-frontend-react}/src/app/ChatTest/GetGroupTest.tsx (83%)
 rename packages/{demoreact => examples/sdk-frontend-react}/src/app/ChatTest/GetRequests.tsx (100%)
 rename packages/{demoreact => examples/sdk-frontend-react}/src/app/ChatTest/GetUser.tsx (100%)
 rename packages/{demoreact => examples/sdk-frontend-react}/src/app/ChatTest/GetUsersBatchTest.tsx (94%)
 rename packages/{demoreact => examples/sdk-frontend-react}/src/app/ChatTest/History.tsx (100%)
 rename packages/{demoreact => examples/sdk-frontend-react}/src/app/ChatTest/RemoveAdminsFromGroupTest.tsx (72%)
 rename packages/{demoreact => examples/sdk-frontend-react}/src/app/ChatTest/RemoveMembersFromGroupTest.tsx (70%)
 rename packages/{demoreact => examples/sdk-frontend-react}/src/app/ChatTest/SendMessageTest.tsx (100%)
 rename packages/{demoreact => examples/sdk-frontend-react}/src/app/ChatTest/UpdateGroupTest.tsx (100%)
 rename packages/{demoreact => examples/sdk-frontend-react}/src/app/ChatTest/UpdateUserProfile.tsx (100%)
 create mode 100644 packages/examples/sdk-frontend-react/src/app/ChatTest/helper.ts
 create mode 100644 packages/examples/sdk-frontend-react/src/app/ChatWidgetTest.tsx
 rename packages/{demoreact => examples/sdk-frontend-react}/src/app/DelegationTest.tsx (74%)
 create mode 100644 packages/examples/sdk-frontend-react/src/app/EmbedTest.tsx
 create mode 100644 packages/examples/sdk-frontend-react/src/app/NotificationsTest.tsx
 create mode 100644 packages/examples/sdk-frontend-react/src/app/PayloadsTest.tsx
 create mode 100644 packages/examples/sdk-frontend-react/src/app/SecretNotificationsTest.tsx
 rename packages/{demoreact => examples/sdk-frontend-react}/src/app/SocketTest.tsx (51%)
 rename packages/{demoreact => examples/sdk-frontend-react}/src/app/SpaceTest/AddListenersToSpaceTest.tsx (72%)
 rename packages/{demoreact => examples/sdk-frontend-react}/src/app/SpaceTest/AddSpeakersToSpaceTest.tsx (71%)
 rename packages/{demoreact => examples/sdk-frontend-react}/src/app/SpaceTest/ApproveSpaceRequestTest.tsx (98%)
 rename packages/{demoreact => examples/sdk-frontend-react}/src/app/SpaceTest/CreateSpaceTest.tsx (97%)
 rename packages/{demoreact => examples/sdk-frontend-react}/src/app/SpaceTest/GetSpaceInfoTest.tsx (85%)
 rename packages/{demoreact => examples/sdk-frontend-react}/src/app/SpaceTest/GetSpaceTest.tsx (83%)
 rename packages/{demoreact => examples/sdk-frontend-react}/src/app/SpaceTest/GetSpacesRequestsTest.tsx (96%)
 rename packages/{demoreact => examples/sdk-frontend-react}/src/app/SpaceTest/GetSpacesTest.tsx (100%)
 rename packages/{demoreact => examples/sdk-frontend-react}/src/app/SpaceTest/GetSpacesTrendingTest.tsx (95%)
 rename packages/{demoreact => examples/sdk-frontend-react}/src/app/SpaceTest/RemoveListenersFromSpaceTest.tsx (73%)
 rename packages/{demoreact => examples/sdk-frontend-react}/src/app/SpaceTest/RemoveSpeakersFromSpaceTest.tsx (69%)
 rename packages/{demoreact => examples/sdk-frontend-react}/src/app/SpaceTest/SpaceTest.tsx (97%)
 rename packages/{demoreact => examples/sdk-frontend-react}/src/app/SpaceTest/StartSpaceTest.tsx (72%)
 rename packages/{demoreact => examples/sdk-frontend-react}/src/app/SpaceTest/StopSpaceTest.tsx (76%)
 rename packages/{demoreact => examples/sdk-frontend-react}/src/app/SpaceTest/UpdateSpaceTest.tsx (95%)
 create mode 100644 packages/examples/sdk-frontend-react/src/app/SpaceUITest/CreateSpaceComponent.tsx
 rename packages/{demoreact => examples/sdk-frontend-react}/src/app/SpaceUITest/SpaceBanner.tsx (99%)
 rename packages/{demoreact => examples/sdk-frontend-react}/src/app/SpaceUITest/SpaceFeed.tsx (100%)
 create mode 100644 packages/examples/sdk-frontend-react/src/app/SpaceUITest/SpaceInvites.tsx
 rename packages/{demoreact => examples/sdk-frontend-react}/src/app/SpaceUITest/SpaceUITest.tsx (95%)
 rename packages/{demoreact => examples/sdk-frontend-react}/src/app/SpaceUITest/SpaceWidget.tsx (91%)
 rename packages/{demoreact => examples/sdk-frontend-react}/src/app/SpaceUITest/index.tsx (99%)
 rename packages/{demoreact => examples/sdk-frontend-react}/src/app/SpaceUITest/useSpaceComponents.tsx (100%)
 rename packages/{demoreact => examples/sdk-frontend-react}/src/app/app.tsx (51%)
 create mode 100644 packages/examples/sdk-frontend-react/src/app/components/Checkbox.tsx
 rename packages/{demoreact => examples/sdk-frontend-react}/src/app/components/Connect.tsx (63%)
 create mode 100644 packages/examples/sdk-frontend-react/src/app/components/Dropdown.tsx
 create mode 100644 packages/examples/sdk-frontend-react/src/app/components/Feedback.tsx
 create mode 100644 packages/examples/sdk-frontend-react/src/app/components/Icons.tsx
 create mode 100644 packages/examples/sdk-frontend-react/src/app/components/Loader.tsx
 rename packages/{demoreact => examples/sdk-frontend-react}/src/app/components/StyledComponents.tsx (76%)
 create mode 100644 packages/examples/sdk-frontend-react/src/app/context/accountContext.ts
 create mode 100644 packages/examples/sdk-frontend-react/src/app/context/envContext.ts
 create mode 100644 packages/examples/sdk-frontend-react/src/app/context/index.ts
 create mode 100644 packages/examples/sdk-frontend-react/src/app/context/socketContext.ts
 create mode 100644 packages/examples/sdk-frontend-react/src/app/context/web3context.ts
 create mode 100644 packages/examples/sdk-frontend-react/src/app/data.ts
 rename packages/{demoreact => examples/sdk-frontend-react}/src/app/helpers.ts (70%)
 create mode 100644 packages/examples/sdk-frontend-react/src/app/hooks/index.ts
 rename packages/{demoreact => examples/sdk-frontend-react}/src/app/hooks/useSDKSocket.ts (72%)
 rename packages/{demoreact => examples/sdk-frontend-react}/src/assets/.gitkeep (100%)
 rename packages/{demoreact => examples/sdk-frontend-react}/src/assets/dark.svg (100%)
 rename packages/{demoreact => examples/sdk-frontend-react}/src/assets/epnsLogo.png (100%)
 rename packages/{demoreact => examples/sdk-frontend-react}/src/assets/light.svg (100%)
 rename packages/{demoreact => examples/sdk-frontend-react}/src/assets/pushLogo.svg (100%)
 rename packages/{demoreact => examples/sdk-frontend-react}/src/environments/environment.prod.ts (100%)
 rename packages/{demoreact => examples/sdk-frontend-react}/src/environments/environment.ts (100%)
 rename packages/{demoreact => examples/sdk-frontend-react}/src/favicon.ico (100%)
 rename packages/{demoreact => examples/sdk-frontend-react}/src/index.html (84%)
 rename packages/{demoreact => examples/sdk-frontend-react}/src/main.tsx (79%)
 rename packages/{demoreact => examples/sdk-frontend-react}/src/polyfills.ts (100%)
 rename packages/{demoreact => examples/sdk-frontend-react}/tsconfig.app.json (69%)
 rename packages/{demoreact => examples/sdk-frontend-react}/tsconfig.json (92%)
 rename packages/{demoreact => examples/sdk-frontend-react}/tsconfig.spec.json (68%)

diff --git a/nx.json b/nx.json
index 5eaa1bbc3..48445ce1a 100644
--- a/nx.json
+++ b/nx.json
@@ -32,5 +32,5 @@
       }
     }
   },
-  "defaultProject": "demoreact"
+  "defaultProject": "examples-sdk-frontend-react"
 }
diff --git a/packages/demoreact/src/app/ChatTest/helper.ts b/packages/demoreact/src/app/ChatTest/helper.ts
deleted file mode 100644
index 9200ac5ab..000000000
--- a/packages/demoreact/src/app/ChatTest/helper.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import {
-    ChatStatus
-} from "@pushprotocol/restapi";
-
-export const stringToChatStatus = (status: string | undefined): ChatStatus => {
-    if (!status) {
-        throw new Error(`Invalid ChatStatus string: ${status}`);
-    }
-    switch (status.toUpperCase()) {
-        case 'ACTIVE':
-            return ChatStatus.ACTIVE;
-        case 'ENDED':
-            return ChatStatus.ENDED;
-        case 'PENDING':
-            return ChatStatus.PENDING;
-        default:
-            throw new Error(`Invalid ChatStatus string: ${status}`);
-    }
-};
\ No newline at end of file
diff --git a/packages/demoreact/src/app/ChatWidgetTest.tsx b/packages/demoreact/src/app/ChatWidgetTest.tsx
deleted file mode 100644
index 1fe239289..000000000
--- a/packages/demoreact/src/app/ChatWidgetTest.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import React, { useContext, useEffect, useState } from 'react';
-import { ChatAndNotificationWidget, PUSH_TABS } from '@pushprotocol/uiweb';
-import { EnvContext, Web3Context } from './context';
-import * as PushAPI from '@pushprotocol/restapi';
-import { IUser } from '@pushprotocol/restapi';
-
-
-
-
-export const ChatWidgetTest = () => {
-
-  const { account, library } = useContext<any>(Web3Context);
-  const librarySigner = library.getSigner();
-  const [pvtKey,setPvtKey] = useState<string>('');
-  const {env} = useContext<any>(EnvContext);
-
-  useEffect(()=>{
-    (async()=>{
-        const user = await PushAPI.user.get({ account: account, env });
-        const pvtkey = null;
-        if (user?.encryptedPrivateKey) {
-            const response = await PushAPI.chat.decryptPGPKey({
-                encryptedPGPPrivateKey: (user as IUser).encryptedPrivateKey,
-                account: account,
-                signer: librarySigner,
-                env,
-                toUpgrade: true,
-              });
-          setPvtKey(response)
-        }
-    })();
-   
-  },[account,env])
-  const onClose = () => {
-    console.log('in here widget')
-  };
-
-  return (
-    <ChatAndNotificationWidget
-      account={account}
-      env={env}
-      decryptedPgpPvtKey={pvtKey}
-      signer={librarySigner}
-      // activeTab={PUSH_TABS.APP_NOTIFICATIONS}
-      activeChat='0x3Cf13f6d91F50dca6eAD7356b78482c54CDd95ff'
-    />
-  );
-};
diff --git a/packages/demoreact/src/app/EmbedTest.tsx b/packages/demoreact/src/app/EmbedTest.tsx
deleted file mode 100644
index 5ee418b19..000000000
--- a/packages/demoreact/src/app/EmbedTest.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { useEffect, useContext } from 'react';
-import { EmbedSDK } from "@pushprotocol/uiembed";
-import { Web3Context } from './context';
-
-const EmbedTest = () => {
-    const { account, chainId } = useContext<any>(Web3Context);
-
-    useEffect(() => {
-        if (account) { // 'your connected wallet address'
-          EmbedSDK.init({
-            chainId,
-            headerText: 'Hello DeFi', // optional
-            targetID: 'sdk-trigger-id', // mandatory
-            appName: 'consumerApp', // mandatory
-            user: account, // mandatory
-            viewOptions: {
-                type: 'sidebar', // optional [default: 'sidebar', 'modal']
-                showUnreadIndicator: true, // optional
-                unreadIndicatorColor: '#cc1919',
-                unreadIndicatorPosition: 'top-right',
-            },
-            theme: 'light',
-            onOpen: () => {
-              console.log('-> client dApp onOpen callback');
-            },
-            onClose: () => {
-              console.log('-> client dApp onClose callback');
-            }
-          });
-        }
-    
-        return () => {
-          EmbedSDK.cleanup();
-        };
-      }, [account, chainId]);
-
-
-    return (
-        <div>
-          <h2>Embed Test page</h2>
-
-
-          <button id="sdk-trigger-id">trigger button</button>
-        </div>
-    );
-}
-
-export default EmbedTest;
\ No newline at end of file
diff --git a/packages/demoreact/src/app/NotificationsTest.tsx b/packages/demoreact/src/app/NotificationsTest.tsx
deleted file mode 100644
index 5cb12858f..000000000
--- a/packages/demoreact/src/app/NotificationsTest.tsx
+++ /dev/null
@@ -1,262 +0,0 @@
-import { useEffect, useState, useContext, useCallback } from 'react';
-import styled from 'styled-components';
-import { Section, SectionItem, SectionButton } from './components/StyledComponents';
-import Loader from './components/Loader';
-import { DarkIcon, LightIcon } from './components/Icons';
-import { Web3Context, EnvContext } from './context';
-import * as PushAPI from '@pushprotocol/restapi';
-import { NotificationItem, chainNameType, SubscribedModal, INotificationItemTheme, notificationBaseTheme, notificationLightTheme } from '@pushprotocol/uiweb';
-import { getCAIPAddress } from './helpers';
-
-import sampleNotifications from './data';
-
-const NotificationListContainer = styled.div`
-  margin: 20px;
-  padding: 20px;
-  width: 100%;
-
-  @media (max-width: 600px) {
-    margin: 0;
-    padding: 0;
-  }
-`
-
-
-const TabButtons = styled.div`
-  margin: 20px 0;
-  display: flex;
-  flex-direction: row;
-`;
-
-const Header = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-`;
-
-const ThemeSelector = styled.div`
-  display: flex;
-  justify-content: flex-end;
-  height: 32px;
-`;
-
-const devWorkingAddress = '0xD8634C39BBFd4033c0d3289C4515275102423681';
-
-const NotificationsTest = () => {
-  const { account, chainId } = useContext<any>(Web3Context);
-  const { env, isCAIP } = useContext<any>(EnvContext);
-  const [isLoading, setLoading] = useState(false);
-  const [notifs, setNotifs] = useState<PushAPI.ParsedResponseType[]>();
-  const [spams, setSpams] = useState<PushAPI.ParsedResponseType[]>();
-  const [theme, setTheme] = useState('dark');
-  const [viewType, setViewType] = useState('notif');
-  const [showSubscribe, setShowSubscribe] = useState(false);
-//   const customTheme: INotificationItemTheme = {...notificationLightTheme,...{
-//     borderRadius:{
-//       ...notificationLightTheme.borderRadius,
-//       modal:'12px',
-//     },
-//     color:{
-//       ...notificationLightTheme.color,
-//         channelNameText:'#62626A',
-//         notificationTitleText:'#000',
-//         notificationContentText:'#62626A',
-//         timestamp:'#62626A',
-//     },
-//     fontWeight:{
-//       ...notificationLightTheme.fontWeight,
-//       channelNameText:700,
-//       notificationTitleText:700,
-//       notificationContentText:800,
-//       timestamp:400
-//     },
-//     fontSize:{
-//       ...notificationLightTheme.fontSize,
-//       channelNameText:'16px',
-//       notificationTitleText:'16px',
-//       notificationContentText:'16px',
-//       timestamp:'12px'
-//     },
-//     modalDivider:'none'
-// }};
-  const loadNotifications = useCallback(async () => {
-    try {
-      setLoading(true);
-      const feeds = await PushAPI.user.getFeeds({
-        user: isCAIP ? getCAIPAddress(env, account) : account,
-        // user: isCAIP ? getCAIPAddress(env, devWorkingAddress) : devWorkingAddress,
-        limit: 30,
-        env: env
-      });
-
-      console.log('feeds: ', feeds);
-
-      setNotifs(feeds);
-
-    } catch (e) {
-      console.error(e);
-    } finally {
-      setLoading(false);
-    }
-  }, [account, env, isCAIP]);
-
-  const loadSpam = useCallback(async () => {
-    try {
-      setLoading(true);
-      const spams = await PushAPI.user.getFeeds({
-        user: isCAIP ? getCAIPAddress(env, account) : account,
-        spam: true,
-        env: env
-      });
-
-      setSpams(spams);
-
-    } catch (e) {
-      console.error(e);
-    } finally {
-      setLoading(false);
-    }
-  }, [account, env, isCAIP]);
-
-  const toggleTheme = () => {
-    setTheme(lastTheme => {
-      return lastTheme === 'dark' ? 'light' : 'dark'
-    })
-  };
-
-  const toggleSubscribedModal = () => {
-    setShowSubscribe((lastVal) => !lastVal);
-  };
-
-
-  useEffect(() => {
-    if (account) {
-      if (viewType === 'notif') {
-        loadNotifications();
-      } else {
-        loadSpam();
-      }
-    }
-  }, [account, viewType, loadNotifications, loadSpam]);
-
-  return (
-      <div>
-        <Header>
-          <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>
-          <SectionButton onClick={toggleSubscribedModal}>show subscribed modal</SectionButton>
-        </TabButtons>
-
-        <Loader show={isLoading} />
-
-        {showSubscribe ? <SubscribedModal onClose={toggleSubscribedModal}/> : null}
-
-        <Section theme={theme}>
-          {viewType === 'notif' ? (
-            <>
-            <b className='headerText'>Notifications: </b>
-            <SectionItem>
-              {notifs ? (
-                <NotificationListContainer>
-                  {notifs.map((oneNotification, i) => {
-
-                  const {
-                    cta,
-                    title,
-                    message,
-                    app,
-                    icon,
-                    image,
-                    url,
-                    blockchain,
-                    secret,
-                    notification
-                  } = oneNotification;
-
-                  // const chainName = blockchain as chainNameType;
-
-                  return (
-                    <NotificationItem
-                      key={`notif-${i}`}
-                      notificationTitle={secret ? notification['title'] : title}
-                      notificationBody={secret ? notification['body'] : message}
-                      cta={cta}
-                      app={app}
-                      icon={icon}
-                      image={image}
-                      url={url}
-                      theme={theme}
-                      // customTheme={customTheme}
-                      // chainName="ETH_TEST_GOERLI"
-                      chainName={blockchain as chainNameType}
-                    />
-                  );
-                })}
-                </NotificationListContainer>
-              ) : null}
-            </SectionItem>
-            </>
-
-          ) : (
-            <>
-              <b className='headerText'>Spams: </b>
-              <SectionItem>
-              {spams ? (
-                <NotificationListContainer>
-                  {spams.map((oneNotification, i) => {
-                  const {
-                    cta,
-                    title,
-                    message,
-                    app,
-                    icon,
-                    image,
-                    url,
-                    blockchain,
-                    secret,
-                    notification
-                  } = oneNotification;
-
-                  return (
-                    <NotificationItem
-                      key={`spam-${i}`}
-                      notificationTitle={secret ? notification['title'] : title}
-                      notificationBody={secret ? notification['body'] : message}
-                      cta={cta}
-                      app={app}
-                      icon={icon}
-                      image={image}
-                      url={url}
-                      // optional parameters for rendering spambox
-                      isSpam
-                      subscribeFn={async () => console.log("yayy spam")}
-                      isSubscribedFn={async () => false}
-                      theme={theme}
-                      chainName={blockchain as chainNameType}
-                    />
-                  );
-                })}
-                </NotificationListContainer>
-              ) : null}
-              </SectionItem>
-            </>
-
-          )}
-        </Section>
-
-      </div>
-  );
-}
-
-export default NotificationsTest;
diff --git a/packages/demoreact/src/app/PayloadsTest.tsx b/packages/demoreact/src/app/PayloadsTest.tsx
deleted file mode 100644
index 0c2fc2132..000000000
--- a/packages/demoreact/src/app/PayloadsTest.tsx
+++ /dev/null
@@ -1,386 +0,0 @@
-import { useState, useContext } from 'react';
-import styled from 'styled-components';
-// import * as ethers from 'ethers';
-import { Section, SectionButton, CodeFormatter } from './components/StyledComponents';
-import Loader from './components/Loader';
-import Dropdown from './components/Dropdown';
-import { APIFeedback } from './components/Feedback';
-import { DarkIcon, LightIcon } from './components/Icons';
-import { Web3Context, EnvContext } from './context';
-import * as PushAPI from '@pushprotocol/restapi';
-import { getCAIPAddress, ENV } from './helpers';
-
-const Header = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-`;
-
-const ThemeSelector = styled.div`
-  display: flex;
-  justify-content: flex-end;
-  height: 32px;
-`;
-
-
-
-type optionsMatrixType = {
-  [key: string]: {
-    [key: string]: any
-  }
-};
-
-const getOptionsMatrix = (
-  { signer, env = ENV.PROD, isCAIP, channel, timestamp } :
-  { signer: any, env?: ENV, isCAIP?: boolean, channel: string, timestamp: string }
-) : optionsMatrixType => {
-  if (!signer) throw Error(`No Signer provided`);
-
-  const channelAddr = isCAIP ? getCAIPAddress(env, channel) : channel;
-
-
-  // EDIT here to change recipients, title, body etc
-
-  return {
-    [PushAPI.payloads.NOTIFICATION_TYPE.TARGETTED]: {
-      [PushAPI.payloads.IDENTITY_TYPE.DIRECT_PAYLOAD]:  {
-          signer,
-          env,
-          type: PushAPI.payloads.NOTIFICATION_TYPE.TARGETTED,
-          identityType: PushAPI.payloads.IDENTITY_TYPE.DIRECT_PAYLOAD,
-          notification: {
-              title: `[SDK-TEST] notification TITLE: ${timestamp}`,
-              body: `[sdk-test] notification BODY ${timestamp}`
-          },
-          payload: {
-              title: `[sdk-test] payload title ${timestamp}`,
-              body: `type:${PushAPI.payloads.NOTIFICATION_TYPE.TARGETTED} identity:${PushAPI.payloads.IDENTITY_TYPE.DIRECT_PAYLOAD}`,
-              cta: '',
-              img: ''
-          },
-          recipients: isCAIP ? getCAIPAddress(env, '0xD8634C39BBFd4033c0d3289C4515275102423681') : '0xD8634C39BBFd4033c0d3289C4515275102423681',
-          channel: channelAddr,
-      },
-      [PushAPI.payloads.IDENTITY_TYPE.IPFS]: {
-          signer,
-          env,
-          type: PushAPI.payloads.NOTIFICATION_TYPE.TARGETTED,
-          identityType: PushAPI.payloads.IDENTITY_TYPE.IPFS,
-          ipfsHash: 'bafkreicuttr5gpbyzyn6cyapxctlr7dk2g6fnydqxy6lps424mcjcn73we', // from BE devtools
-          recipients: isCAIP ? getCAIPAddress(env, '0xD8634C39BBFd4033c0d3289C4515275102423681') : '0xD8634C39BBFd4033c0d3289C4515275102423681',
-          channel: channelAddr,
-      },
-      [PushAPI.payloads.IDENTITY_TYPE.MINIMAL]: {
-          signer,
-          env,
-          type: PushAPI.payloads.NOTIFICATION_TYPE.TARGETTED,
-          identityType: PushAPI.payloads.IDENTITY_TYPE.MINIMAL,
-          notification: {
-              title: `[SDK-TEST] notification TITLE: ${timestamp}`,
-              body: `[sdk-test] notification BODY ${timestamp}`
-          },
-          payload: {
-              title: `[sdk-test] payload title ${timestamp}`,
-              body: `type:${PushAPI.payloads.NOTIFICATION_TYPE.TARGETTED} identity:${PushAPI.payloads.IDENTITY_TYPE.MINIMAL}`,
-              cta: '',
-              img: ''
-          },
-          recipients: isCAIP ? getCAIPAddress(env, '0xD8634C39BBFd4033c0d3289C4515275102423681') : '0xD8634C39BBFd4033c0d3289C4515275102423681',
-          channel: channelAddr,
-      },
-      [PushAPI.payloads.IDENTITY_TYPE.SUBGRAPH]: {
-          signer,
-          env,
-          type: PushAPI.payloads.NOTIFICATION_TYPE.TARGETTED,
-          identityType: PushAPI.payloads.IDENTITY_TYPE.SUBGRAPH,
-          graph: {
-            id: 'aiswaryawalter/graph-poc-sample',
-            counter: 3
-          },
-          recipients: isCAIP ? getCAIPAddress(env, '0xD8634C39BBFd4033c0d3289C4515275102423681') : '0xD8634C39BBFd4033c0d3289C4515275102423681',
-          channel: channelAddr,
-      }
-    },
-    [PushAPI.payloads.NOTIFICATION_TYPE.SUBSET]: {
-      [PushAPI.payloads.IDENTITY_TYPE.DIRECT_PAYLOAD]:  {
-          signer,
-          env,
-          type: PushAPI.payloads.NOTIFICATION_TYPE.SUBSET,
-          identityType: PushAPI.payloads.IDENTITY_TYPE.DIRECT_PAYLOAD,
-          notification: {
-              title: `[SDK-TEST] notification TITLE: ${timestamp}`,
-              body: `[sdk-test] notification BODY ${timestamp}`
-          },
-          payload: {
-              title: `[sdk-test] payload title ${timestamp}`,
-              body: `type:${PushAPI.payloads.NOTIFICATION_TYPE.SUBSET} identity:${PushAPI.payloads.IDENTITY_TYPE.DIRECT_PAYLOAD}`,
-              cta: '',
-              img: ''
-          },
-          recipients: isCAIP ? 
-            ['0xCdBE6D076e05c5875D90fa35cc85694E1EAFBBd1', '0xD8634C39BBFd4033c0d3289C4515275102423681'].map(addr => getCAIPAddress(env, addr))
-            : ['0xCdBE6D076e05c5875D90fa35cc85694E1EAFBBd1', '0xD8634C39BBFd4033c0d3289C4515275102423681'],
-          channel: channelAddr,
-      },
-      [PushAPI.payloads.IDENTITY_TYPE.IPFS]: {
-          signer,
-          env,
-          type: PushAPI.payloads.NOTIFICATION_TYPE.SUBSET,
-          identityType: PushAPI.payloads.IDENTITY_TYPE.IPFS,
-          ipfsHash: 'bafkreicuttr5gpbyzyn6cyapxctlr7dk2g6fnydqxy6lps424mcjcn73we', // from BE devtools
-          recipients: isCAIP ? 
-            ['0xCdBE6D076e05c5875D90fa35cc85694E1EAFBBd1', '0xD8634C39BBFd4033c0d3289C4515275102423681'].map(addr => getCAIPAddress(env, addr))
-            : ['0xCdBE6D076e05c5875D90fa35cc85694E1EAFBBd1', '0xD8634C39BBFd4033c0d3289C4515275102423681'],
-          channel: channelAddr,
-      },
-      [PushAPI.payloads.IDENTITY_TYPE.MINIMAL]: {
-          signer,
-          env,
-          type: PushAPI.payloads.NOTIFICATION_TYPE.SUBSET,
-          identityType: PushAPI.payloads.IDENTITY_TYPE.MINIMAL,
-          notification: {
-              title: `[SDK-TEST] notification TITLE: ${timestamp}`,
-              body: `[sdk-test] notification BODY ${timestamp}`
-          },
-          payload: {
-              title: `[sdk-test] payload title ${timestamp}`,
-              body: `type:${PushAPI.payloads.NOTIFICATION_TYPE.SUBSET} identity:${PushAPI.payloads.IDENTITY_TYPE.MINIMAL}`,
-              cta: '',
-              img: ''
-          },
-          recipients: isCAIP ? 
-            ['0xCdBE6D076e05c5875D90fa35cc85694E1EAFBBd1', '0xD8634C39BBFd4033c0d3289C4515275102423681'].map(addr => getCAIPAddress(env, addr))
-            : ['0xCdBE6D076e05c5875D90fa35cc85694E1EAFBBd1', '0xD8634C39BBFd4033c0d3289C4515275102423681'],
-          channel: channelAddr,
-      },
-      [PushAPI.payloads.IDENTITY_TYPE.SUBGRAPH]: {
-          signer,
-          env,
-          type: PushAPI.payloads.NOTIFICATION_TYPE.SUBSET,
-          identityType: PushAPI.payloads.IDENTITY_TYPE.SUBGRAPH,
-          graph: {
-            id: 'aiswaryawalter/graph-poc-sample',
-            counter: 3
-          },
-          recipients: isCAIP ? 
-            ['0xCdBE6D076e05c5875D90fa35cc85694E1EAFBBd1', '0xD8634C39BBFd4033c0d3289C4515275102423681'].map(addr => getCAIPAddress(env, addr))
-            : ['0xCdBE6D076e05c5875D90fa35cc85694E1EAFBBd1', '0xD8634C39BBFd4033c0d3289C4515275102423681'],
-          channel: channelAddr,
-      }
-    },
-    [PushAPI.payloads.NOTIFICATION_TYPE.BROADCAST]: {
-      [PushAPI.payloads.IDENTITY_TYPE.DIRECT_PAYLOAD]:  {
-          signer,
-          env,
-          type: PushAPI.payloads.NOTIFICATION_TYPE.BROADCAST,
-          identityType: PushAPI.payloads.IDENTITY_TYPE.DIRECT_PAYLOAD,
-          notification: {
-              title: `[SDK-TEST] notification TITLE: ${timestamp}`,
-              body: `[sdk-test] notification BODY ${timestamp}`
-          },
-          payload: {
-              title: `[sdk-test] payload title ${timestamp}`,
-              body: `type:${PushAPI.payloads.NOTIFICATION_TYPE.BROADCAST} identity:${PushAPI.payloads.IDENTITY_TYPE.DIRECT_PAYLOAD}`,
-              cta: '',
-              img: ''
-          },
-          channel: channelAddr,
-      },
-      [PushAPI.payloads.IDENTITY_TYPE.IPFS]: {
-          signer,
-          env,
-          type: PushAPI.payloads.NOTIFICATION_TYPE.BROADCAST,
-          identityType: PushAPI.payloads.IDENTITY_TYPE.IPFS,
-          ipfsHash: 'bafkreicuttr5gpbyzyn6cyapxctlr7dk2g6fnydqxy6lps424mcjcn73we', // from BE devtools
-          channel: channelAddr,
-      },
-      [PushAPI.payloads.IDENTITY_TYPE.MINIMAL]: {
-          signer,
-          env,
-          type: PushAPI.payloads.NOTIFICATION_TYPE.BROADCAST,
-          identityType: PushAPI.payloads.IDENTITY_TYPE.MINIMAL,
-          notification: {
-              title: `[SDK-TEST] notification TITLE: ${timestamp}`,
-              body: `[sdk-test] notification BODY ${timestamp}`
-          },
-          payload: {
-              title: `[sdk-test] payload title ${timestamp}`,
-              body: `type:${PushAPI.payloads.NOTIFICATION_TYPE.BROADCAST} identity:${PushAPI.payloads.IDENTITY_TYPE.MINIMAL}`,
-              cta: '',
-              img: ''
-          },
-          channel: channelAddr,
-      },
-      [PushAPI.payloads.IDENTITY_TYPE.SUBGRAPH]: {
-          signer,
-          env,
-          type: PushAPI.payloads.NOTIFICATION_TYPE.BROADCAST,
-          identityType: PushAPI.payloads.IDENTITY_TYPE.SUBGRAPH,
-          graph: {
-            id: 'aiswaryawalter/graph-poc-sample',
-            counter: 3
-          },
-          channel: channelAddr,
-      }
-    },
-  };
-
-}
-
-const NOTIFICATION_TYPE_OPTIONS = [
-  { label: 'TARGETTED', value: '3' },
-  { label: 'SUBSET', value: '4' },
-  { label: 'BROADCAST', value: '1' }
-];
-
-const IDENTITY_TYPE_OPTIONS = [
-  { label: 'MINIMAL', value: '0' },
-  { label: 'IPFS', value: '1' },
-  { label: 'DIRECT_PAYLOAD', value: '2' },
-  { label: 'SUBGRAPH', value: '3' }
-]
-
-
-const PayloadsTest = () => {
-  const { library, account, chainId } = useContext<any>(Web3Context);
-  const { env, isCAIP }  = useContext<any>(EnvContext);
-  const [isLoading, setLoading] = useState(false);
-  const [theme, setTheme] = useState('dark');
- 
-  const [apiStatus, setApiStatus] = useState<any>();
-
-
-  const [notificationTypeOption, setNotificationTypeOption] = useState('3');
-  const [identityTypeOption, setIdentityTypeOption] = useState('2');
-
-  // const PK = 'd5797b255933f72a6a084fcfc0f5f4881defee8c1ae387197805647d0b10a8a0'; // PKey, server code
-  // const Pkey = `0x${PK}`;
-  // const testChannelAddress = '0xD8634C39BBFd4033c0d3289C4515275102423681'; // server code
-  const testChannelAddress = account; // UI 
-  
-
-  // for server code
-  // const signer = new ethers.Wallet(Pkey);
-
-  // for UI code
-  const signer = library.getSigner(account);
-
-  const OPTIONS_MATRIX: optionsMatrixType = getOptionsMatrix({
-    signer,
-    channel: testChannelAddress,
-    env,
-    isCAIP,
-    timestamp: JSON.stringify(Date.now())
-  });
-
-  const onChangeNotificationType = (e: any) => {
-    setApiStatus('');
-    setNotificationTypeOption(e.target.value);
-  };
-
-  const onChangeIdentityType = (e: any) => {
-    setApiStatus('');
-    setIdentityTypeOption(e.target.value);
-  };
-
-
-  const toggleTheme = () => {
-    setTheme(lastTheme => {
-      return lastTheme === 'dark' ? 'light' : 'dark'
-    })
-  };
-
-  const triggerNotification = async () => {
-    setApiStatus('');
-    setLoading(true);
-    try {
-      const sdkInput = OPTIONS_MATRIX[notificationTypeOption][identityTypeOption];
-
-      console.log('sdkInput: ', sdkInput);
-
-      const apiResponse = await PushAPI.payloads.sendNotification(sdkInput);
-      console.log('apiResponse: ', apiResponse);
-      setApiStatus({
-        status: apiResponse?.status,
-        data: apiResponse?.config?.data
-      });
-    } catch (e) {
-      console.error('sendNotification error: \n', e);
-      setApiStatus(JSON.stringify(e));
-    } finally {
-      setLoading(false);
-    }
-  };
-
-
-  const renderInputOption = () => {
-    const optionsObject = OPTIONS_MATRIX[notificationTypeOption.toString()][identityTypeOption.toString()];
-
-    if (optionsObject) {
-      const { signer, ...renderInputOption} = optionsObject;
-
-      return (
-        <CodeFormatter>  
-          {JSON.stringify({ ...renderInputOption, signer: {} }, null, 4)}
-        </CodeFormatter>
-      );
-    }
-
-    return null;
-  }
-
-  return (
-      <div>
-        <Header>
-          <h2>Payloads Test page</h2>
-          <ThemeSelector>
-            {theme === 'dark' ? <DarkIcon title="Dark" onClick={toggleTheme}/> : <LightIcon title="Light" onClick={toggleTheme}/>}
-          </ThemeSelector>
-        </Header>
-
-        <p>IMPORTANT: Will only work if the channel address you are providing exists in the ENV you are running the app!!</p>
-                
-
-        <Loader show={isLoading} />
-
-       
-        <Section theme={theme}>
-          <div style={{ display: 'flex', alignItems: 'center', flexDirection: 'column', marginBottom: 16 }}>
-            <p style={{ color: '#b57f38' }}>Please choose both the options below and hit "send notification" button</p>
-
-            <div style={{ display: 'flex', gap: 20 }}>
-              <Dropdown
-                style={{ color: 'green' }}
-                width={200}
-                label="NOTIFICATION TYPE"
-                options={NOTIFICATION_TYPE_OPTIONS}
-                value={notificationTypeOption}
-                onChange={onChangeNotificationType}
-              />
-
-              <Dropdown
-                style={{ color: 'green' }}
-                width={200}
-                label="IDENTITY TYPE"
-                options={IDENTITY_TYPE_OPTIONS}
-                value={identityTypeOption}
-                onChange={onChangeIdentityType}
-              />
-            </div>
-
-
-            <div>
-              {renderInputOption()}
-            </div>
-
-            <SectionButton style={{ width: 400 }} onClick={() => triggerNotification()}>send notification</SectionButton>
-            {apiStatus ? <APIFeedback status={apiStatus?.status === 204 ? 'success' : 'error'}>{JSON.stringify(apiStatus)}</APIFeedback> : null}
-          </div>
-        </Section>
-
-      </div>
-  );
-}
-
-export default PayloadsTest;
\ No newline at end of file
diff --git a/packages/demoreact/src/app/SecretNotificationsTest.tsx b/packages/demoreact/src/app/SecretNotificationsTest.tsx
deleted file mode 100644
index 9f53e8a4c..000000000
--- a/packages/demoreact/src/app/SecretNotificationsTest.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-
-const SecretNotificationsTest = () => {
-    return (
-        <div>
-          <h2>Secret Notifications Test page</h2>
-        </div>
-    );
-}
-
-export default SecretNotificationsTest;
\ No newline at end of file
diff --git a/packages/demoreact/src/app/SpaceUITest/CreateSpaceComponent.tsx b/packages/demoreact/src/app/SpaceUITest/CreateSpaceComponent.tsx
deleted file mode 100644
index d06ba6635..000000000
--- a/packages/demoreact/src/app/SpaceUITest/CreateSpaceComponent.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { useSpaceComponents } from "./useSpaceComponents"
-
-export const CreateSpaceComponent = () => {
-    const { CreateSpaceComponent } = useSpaceComponents();
-
-    return <CreateSpaceComponent />
-}
diff --git a/packages/demoreact/src/app/SpaceUITest/SpaceInvites.tsx b/packages/demoreact/src/app/SpaceUITest/SpaceInvites.tsx
deleted file mode 100644
index 8b1493262..000000000
--- a/packages/demoreact/src/app/SpaceUITest/SpaceInvites.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { useSpaceComponents } from "./useSpaceComponents"
-
-export const SpaceInvitesComponent = () => {
-    const { SpaceInvitesComponent } = useSpaceComponents();
-
-    return (
-      <SpaceInvitesComponent />
-    )
-}
diff --git a/packages/demoreact/src/app/components/Checkbox.tsx b/packages/demoreact/src/app/components/Checkbox.tsx
deleted file mode 100644
index 58e759c59..000000000
--- a/packages/demoreact/src/app/components/Checkbox.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react';
-
-export const Checkbox = (props: { id: string, label: string, value?: boolean, onChange: () => void }) => {
-    return (
-      <div>
-        <input 
-          id={props.id}
-          type="checkbox" 
-          checked={props.value} 
-          onChange={props.onChange} 
-        />
-        <label htmlFor={props.id}>{props.label}</label>
-      </div>
-    );
-  };
\ No newline at end of file
diff --git a/packages/demoreact/src/app/components/Dropdown.tsx b/packages/demoreact/src/app/components/Dropdown.tsx
deleted file mode 100644
index b97e8e9ee..000000000
--- a/packages/demoreact/src/app/components/Dropdown.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from 'react';
-
-type DropdownOptionsType = {
-    value: string,
-    label: string
-};
-
-const Dropdown = ({
-    style,
-    label,
-    value,
-    width,
-    options,
-    onChange
-}: {
-    style?: any,
-    label: string,
-    value?: string,
-    width?: string | number,
-    options: DropdownOptionsType[],
-    onChange: (arg0: any) => void 
-}) => {
-    return (
-      <label style={{ display: 'flex', gap: 8, ...style }}>
-        {label}
-        <select value={value} onChange={onChange} style={{ width: width }}>
-          {options.map((option) => (
-            <option key={`option: ${option.label}`} value={option.value}>{option.label}</option>
-          ))}
-        </select>
-      </label>
-    );
-};
-
-export default Dropdown;
\ No newline at end of file
diff --git a/packages/demoreact/src/app/components/Feedback.tsx b/packages/demoreact/src/app/components/Feedback.tsx
deleted file mode 100644
index 61380441e..000000000
--- a/packages/demoreact/src/app/components/Feedback.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import styled from 'styled-components';
-
-type FeedbackType = {
-  status?: string;
-};
-  
-
-export const Feedback = styled.div<FeedbackType>`
-    background: ${(props) => {
-    if (props.status === "error") {
-    return '#efc3ba';
-    }
-    return '#d4efe7';
-    }};
-    border-color: ${(props) => {
-    if (props.status === "error") {
-    return '#efc3ba';
-    }
-    return '#d4efe7';
-    }};
-    border-radius: 7px;
-    border-width: 2px;
-
-    display: flex;
-    padding: 25px;
-    justify-content: center;
-    font-size: 1rem;
-    margin: 30px;
-    word-break: break-word;
-`;
-
-export const APIFeedback = (props: { status: any, children: any }) => {
-    return (
-        <Feedback status={props.status}>
-            {props.children}
-        </Feedback>
-    );
-};
\ No newline at end of file
diff --git a/packages/demoreact/src/app/components/Icons.tsx b/packages/demoreact/src/app/components/Icons.tsx
deleted file mode 100644
index d02f899b0..000000000
--- a/packages/demoreact/src/app/components/Icons.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import styled from 'styled-components';
-import { ReactComponent as DarkSVGIcon } from '../../assets/dark.svg';
-import { ReactComponent as LightSVGIcon } from '../../assets/light.svg';
-
-
-const SVGIconButton = styled.div`
-  cursor: pointer;
-`;
-
-type IconProp = {
-  onClick: (arg0: any) => any,
-  title: string
-};
-
-export const DarkIcon = ({ title, onClick }: IconProp) => <SVGIconButton title={title} onClick={onClick}><DarkSVGIcon /></SVGIconButton>;
-export const LightIcon = ({ title, onClick }: IconProp) => <SVGIconButton title={title} onClick={onClick}><LightSVGIcon /></SVGIconButton>;
diff --git a/packages/demoreact/src/app/components/Loader.tsx b/packages/demoreact/src/app/components/Loader.tsx
deleted file mode 100644
index d7bbe2488..000000000
--- a/packages/demoreact/src/app/components/Loader.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import React from 'react';
-import styled from 'styled-components'
-
-const LoadingOverlay = styled.div`
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: #000;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    opacity: 0.7;
-
-    & .loaderText {
-      font-size: 3rem;
-      color: #fff;
-    }
-
-    z-index: 999999;
-`;
-
-const LoadingSpinner = styled.div`
-  @keyframes spinner {
-    to {transform: rotate(360deg);}
-  }
-
-  &:before {
-    content: '';
-    box-sizing: border-box;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 60px;
-    height: 60px;
-    margin-top: -10px;
-    margin-left: -10px;
-    border-radius: 50%;
-    border-top: 4px solid #07d;
-    border-right: 2px solid transparent;
-    animation: spinner .6s linear infinite;
-  }
-`;
-
-interface LoaderProps {
-  show?: boolean;
-}
-
-function Loader({ show } : LoaderProps) {
-  if (show) {
-    return (
-        <LoadingOverlay>
-            <LoadingSpinner />
-        </LoadingOverlay>
-    )
-  }
-
-  return null; 
-}
-
-export default Loader;
\ No newline at end of file
diff --git a/packages/demoreact/src/app/context/accountContext.ts b/packages/demoreact/src/app/context/accountContext.ts
deleted file mode 100644
index 45750805a..000000000
--- a/packages/demoreact/src/app/context/accountContext.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { createContext } from 'react'
-
-const AccountContext = createContext({});
-
-export default AccountContext;
\ No newline at end of file
diff --git a/packages/demoreact/src/app/context/envContext.ts b/packages/demoreact/src/app/context/envContext.ts
deleted file mode 100644
index 242a5d11f..000000000
--- a/packages/demoreact/src/app/context/envContext.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { createContext } from 'react'
-
-const EnvContext = createContext({});
-
-export default EnvContext; 
\ No newline at end of file
diff --git a/packages/demoreact/src/app/context/index.ts b/packages/demoreact/src/app/context/index.ts
deleted file mode 100644
index 80db31f5d..000000000
--- a/packages/demoreact/src/app/context/index.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import Web3Context from "./web3context";
-import EnvContext from "./envContext";
-import SocketContext from "./socketContext";
-import AccountContext from "./accountContext";
-
-export {
-  Web3Context, 
-  EnvContext,
-  SocketContext,
-  AccountContext
-};
\ No newline at end of file
diff --git a/packages/demoreact/src/app/context/socketContext.ts b/packages/demoreact/src/app/context/socketContext.ts
deleted file mode 100644
index 58aaef654..000000000
--- a/packages/demoreact/src/app/context/socketContext.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { createContext } from 'react'
-
-const SocketContext = createContext({});
-
-export default SocketContext;
\ No newline at end of file
diff --git a/packages/demoreact/src/app/context/web3context.ts b/packages/demoreact/src/app/context/web3context.ts
deleted file mode 100644
index 1e951f3ad..000000000
--- a/packages/demoreact/src/app/context/web3context.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { createContext } from 'react'
-
-const Web3Context = createContext({});
-
-export default Web3Context;
\ No newline at end of file
diff --git a/packages/demoreact/src/app/data.ts b/packages/demoreact/src/app/data.ts
deleted file mode 100644
index ec71791ed..000000000
--- a/packages/demoreact/src/app/data.ts
+++ /dev/null
@@ -1,204 +0,0 @@
-export default [
-    {
-      payload: {
-        data: {
-          app: "App Bot",
-          sid: "22710",
-          url: "https://epns.io/",
-          acta: "",
-            aimg: "https://res.cloudinary.com/xand6r/image/upload/v1632235676/Screenshot_2021-09-21_at_15.44.49_s6vfta.png",
-          amsg: "The [d:Bell] on the [b:top right] keeps track of any incoming messages and will inform you about it.\n\nClicking on the [b:bell] will update your feed [i:(Alternatively, pull feed down to refresh)]",
-          asub: "Ring the Bell",
-          icon: "https://backend-staging.epns.io/cache/bafkreibzn4s6nfa4jwyuswkojxclec5nhvj3e4ac5cvamzc2ajznh7t77a.jpg",
-          type: "1",
-          // epoch: "1625139867",
-          appbot: "1",
-          hidden: "0",
-          secret: "",
-        },
-        notification: {
-          body: "",
-        },
-      },
-    },
-    {
-      payload: {
-        data: {
-          app: "App Bot",
-          sid: "22710",
-          url: "https://epns.io/",
-          acta: "",
-          aimg: "https://www.youtube.com/watch?v=gUwXCt1qkBU",
-          amsg: "The [d:Bell] on the [b:top right] keeps track of any incoming messages and will inform you about it.\n\nClicking on the [b:bell] will update your feed [i:(Alternatively, pull feed down to refresh)]",
-          asub: "Ring the Bell",
-          icon: "https://backend-staging.epns.io/cache/bafkreibzn4s6nfa4jwyuswkojxclec5nhvj3e4ac5cvamzc2ajznh7t77a.jpg",
-          type: "1",
-          appbot: "1",
-          hidden: "0",
-          secret: "",
-        },
-        notification: {
-          body: "",
-        },
-      },
-    },  {
-      payload: {
-        data: {
-          app: "App Bot",
-          sid: "22710",
-          url: "https://epns.io/",
-          acta: "",
-          aimg: "https://www.w3schools.com/html/mov_bbb.mp4",
-          amsg: "The [d:Bell] on the [b:top right] keeps track of any incoming messages and will inform you about it.\n\nClicking on the [b:bell] will update your feed [i:(Alternatively, pull feed down to refresh)] [timestamp: 1634766446]",
-          asub: "Ring the Bell",
-          icon: "https://backend-staging.epns.io/cache/bafkreibzn4s6nfa4jwyuswkojxclec5nhvj3e4ac5cvamzc2ajznh7t77a.jpg",
-          type: "1",
-          appbot: "1",
-          hidden: "0",
-          secret: "",
-        },
-        notification: {
-          body: "",
-        },
-      },
-    },
-    {
-      payload_id: 1,
-      channel: "0x0b5E9fa12C4C1946fA2f14b7271cC60541508f23",
-      payload: {
-        apns: {
-          payload: {
-            aps: {
-              category: "withappicon",
-              "mutable-content": 1,
-              "content-available": 1,
-            },
-          },
-          fcm_options: {
-            image:
-              "https://backend-staging.epns.io/cache/bafkreibzn4s6nfa4jwyuswkojxclec5nhvj3e4ac5cvamzc2ajznh7t77a.jpg",
-          },
-        },
-        data: {
-          app: "App Bot",
-          sid: "22710",
-          url: "https://epns.io/",
-          acta: "",
-          aimg: "",
-          amsg: "[b:Greetings] fellow users! Welcome aboard!\n\nI am your personalized [d:App Bot] whose sole purpose is to guide you about the app. [timestamp: 1634766446]",
-          asub: "Welcome to EPNS",
-          icon: "https://backend-staging.epns.io/cache/bafkreibzn4s6nfa4jwyuswkojxclec5nhvj3e4ac5cvamzc2ajznh7t77a.jpg",
-          type: "1",
-          appbot: "1",
-          hidden: "0",
-          secret: "",
-        },
-        android: {
-          notification: {
-            icon: "@drawable/ic_stat_name",
-            color: "#e20880",
-            image:
-              "https://backend-staging.epns.io/cache/bafkreibzn4s6nfa4jwyuswkojxclec5nhvj3e4ac5cvamzc2ajznh7t77a.jpg",
-            default_vibrate_timings: true,
-          },
-        },
-        notification: {
-          body: "\nHourly Movement: 0.33%\nDaily Movement: 4.66%\nWeekly Movement: 14.91%",
-          title: "ETH Tracker - ETH at $2,216.38",
-        },
-      },
-    },
-    {
-      payload_id: 2,
-      channel: "0x0b5E9fa12C4C1946fA2f14b7271cC60541508f23",
-      payload: {
-        apns: {
-          payload: {
-            aps: {
-              category: "withappicon",
-              "mutable-content": 1,
-              "content-available": 1,
-            },
-          },
-          fcm_options: {
-            image:
-              "https://backend-staging.epns.io/cache/bafkreibzn4s6nfa4jwyuswkojxclec5nhvj3e4ac5cvamzc2ajznh7t77a.jpg",
-          },
-        },
-        data: {
-          app: "App Bot",
-          sid: "22710",
-          url: "https://epns.io/",
-          acta: "",
-          aimg: "",
-          amsg: "[d:Channels] represent your favorite [b:dApps] or [b:Smart Contracts]. You will often get notifications from different channels.\n\nThe [b:top section] of the message contains information about these channels.\n\n[b:Clicking on it] takes you to their [b:website]. [timestamp: 1634716446]",
-          asub: "About Channels",
-          icon: "https://backend-staging.epns.io/cache/bafkreibzn4s6nfa4jwyuswkojxclec5nhvj3e4ac5cvamzc2ajznh7t77a.jpg",
-          type: "1",
-          appbot: "1",
-          hidden: "0",
-          secret: "",
-        },
-        android: {
-          notification: {
-            icon: "@drawable/ic_stat_name",
-            color: "#e20880",
-            image:
-              "https://backend-staging.epns.io/cache/bafkreibzn4s6nfa4jwyuswkojxclec5nhvj3e4ac5cvamzc2ajznh7t77a.jpg",
-            default_vibrate_timings: true,
-          },
-        },
-        notification: {
-          body: "\nHourly Movement: 0.33%\nDaily Movement: 4.66%\nWeekly Movement: 14.91%",
-          title: "ETH Tracker - ETH at $2,216.38",
-        },
-      },
-    },
-    {
-      payload_id: 4,
-      channel: "0x0b5E9fa12C4C1946fA2f14b7271cC60541508f23",
-      // epoch: "2021-07-01T11:44:27.000Z",
-      payload: {
-        apns: {
-          payload: {
-            aps: {
-              category: "withappicon",
-              "mutable-content": 1,
-              "content-available": 1,
-            },
-          },
-          fcm_options: {
-            image:
-              "https://backend-staging.epns.io/cache/bafkreibzn4s6nfa4jwyuswkojxclec5nhvj3e4ac5cvamzc2ajznh7t77a.jpg",
-          },
-        },
-        data: {
-          app: "App Bot",
-          sid: "22710",
-          url: "https://epns.io/",
-          acta: "https://epns.io",
-          aimg: "",
-          amsg: "Notifications are [b:never boring] in EPNS.\n\nThe messages with [b:blueish outlines] are links that the [b:dApp] has provided you. \n\n[d:Tapping the message opens it.] [timestamp: 1634766446]",
-          asub: "Nofications Types",
-          icon: "https://backend-staging.epns.io/cache/bafkreibzn4s6nfa4jwyuswkojxclec5nhvj3e4ac5cvamzc2ajznh7t77a.jpg",
-          type: "1",
-          appbot: "1",
-          hidden: "0",
-          secret: "",
-        },
-        android: {
-          notification: {
-            icon: "@drawable/ic_stat_name",
-            color: "#e20880",
-            image:
-              "https://backend-staging.epns.io/cache/bafkreibzn4s6nfa4jwyuswkojxclec5nhvj3e4ac5cvamzc2ajznh7t77a.jpg",
-            default_vibrate_timings: true,
-          },
-        },
-        notification: {
-          body: "\nHourly Movement: 0.33%\nDaily Movement: 4.66%\nWeekly Movement: 14.91%",
-          title: "ETH Tracker - ETH at $2,216.38",
-        },
-      },
-    },
-];
\ No newline at end of file
diff --git a/packages/demoreact/src/app/hooks/index.ts b/packages/demoreact/src/app/hooks/index.ts
deleted file mode 100644
index dc6b2d72f..000000000
--- a/packages/demoreact/src/app/hooks/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './useSDKSocket';
\ No newline at end of file
diff --git a/packages/demoreact/.babelrc b/packages/examples/sdk-frontend-react/.babelrc
similarity index 100%
rename from packages/demoreact/.babelrc
rename to packages/examples/sdk-frontend-react/.babelrc
diff --git a/packages/demoreact/.browserslistrc b/packages/examples/sdk-frontend-react/.browserslistrc
similarity index 100%
rename from packages/demoreact/.browserslistrc
rename to packages/examples/sdk-frontend-react/.browserslistrc
diff --git a/packages/demoreact/.eslintrc.json b/packages/examples/sdk-frontend-react/.eslintrc.json
similarity index 79%
rename from packages/demoreact/.eslintrc.json
rename to packages/examples/sdk-frontend-react/.eslintrc.json
index 734ddacee..50e59482c 100644
--- a/packages/demoreact/.eslintrc.json
+++ b/packages/examples/sdk-frontend-react/.eslintrc.json
@@ -1,5 +1,5 @@
 {
-  "extends": ["plugin:@nrwl/nx/react", "../../.eslintrc.json"],
+  "extends": ["plugin:@nrwl/nx/react", "../../../.eslintrc.json"],
   "ignorePatterns": ["!**/*"],
   "overrides": [
     {
diff --git a/packages/demoreact/jest.config.ts b/packages/examples/sdk-frontend-react/jest.config.ts
similarity index 57%
rename from packages/demoreact/jest.config.ts
rename to packages/examples/sdk-frontend-react/jest.config.ts
index cb6917b25..9992fe35d 100644
--- a/packages/demoreact/jest.config.ts
+++ b/packages/examples/sdk-frontend-react/jest.config.ts
@@ -1,11 +1,11 @@
 /* eslint-disable */
 export default {
-  displayName: 'demoreact',
-  preset: '../../jest.preset.js',
+  displayName: 'examples-sdk-frontend-react',
+  preset: '../../../jest.preset.js',
   transform: {
     '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nrwl/react/plugins/jest',
     '^.+\\.[tj]sx?$': 'babel-jest',
   },
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
-  coverageDirectory: '../../coverage/packages/demoreact',
+  coverageDirectory: '../../../coverage/packages/examples/sdk-frontend-react',
 };
diff --git a/packages/demoreact/project.json b/packages/examples/sdk-frontend-react/project.json
similarity index 53%
rename from packages/demoreact/project.json
rename to packages/examples/sdk-frontend-react/project.json
index c5f98e02b..608ab1ecc 100644
--- a/packages/demoreact/project.json
+++ b/packages/examples/sdk-frontend-react/project.json
@@ -1,6 +1,6 @@
 {
-  "$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "sourceRoot": "packages/demoreact/src",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/examples/sdk-frontend-react/src",
   "projectType": "application",
   "targets": {
     "build": {
@@ -9,15 +9,15 @@
       "defaultConfiguration": "production",
       "options": {
         "compiler": "babel",
-        "outputPath": "dist/packages/demoreact",
-        "index": "packages/demoreact/src/index.html",
+        "outputPath": "dist/packages/examples/sdk-frontend-react",
+        "index": "packages/examples/sdk-frontend-react/src/index.html",
         "baseHref": "/",
-        "main": "packages/demoreact/src/main.tsx",
-        "polyfills": "packages/demoreact/src/polyfills.ts",
-        "tsConfig": "packages/demoreact/tsconfig.app.json",
+        "main": "packages/examples/sdk-frontend-react/src/main.tsx",
+        "polyfills": "packages/examples/sdk-frontend-react/src/polyfills.ts",
+        "tsConfig": "packages/examples/sdk-frontend-react/tsconfig.app.json",
         "assets": [
-          "packages/demoreact/src/favicon.ico",
-          "packages/demoreact/src/assets"
+          "packages/examples/sdk-frontend-react/src/favicon.ico",
+          "packages/examples/sdk-frontend-react/src/assets"
         ],
         "styles": [],
         "scripts": [],
@@ -33,8 +33,8 @@
         "production": {
           "fileReplacements": [
             {
-              "replace": "packages/demoreact/src/environments/environment.ts",
-              "with": "packages/demoreact/src/environments/environment.prod.ts"
+              "replace": "packages/examples/sdk-frontend-react/src/environments/environment.ts",
+              "with": "packages/examples/sdk-frontend-react/src/environments/environment.prod.ts"
             }
           ],
           "optimization": true,
@@ -50,15 +50,15 @@
       "executor": "@nrwl/web:dev-server",
       "defaultConfiguration": "development",
       "options": {
-        "buildTarget": "demoreact:build",
+        "buildTarget": "examples-sdk-frontend-react:build",
         "hmr": true
       },
       "configurations": {
         "development": {
-          "buildTarget": "demoreact:build:development"
+          "buildTarget": "examples-sdk-frontend-react:build:development"
         },
         "production": {
-          "buildTarget": "demoreact:build:production",
+          "buildTarget": "examples-sdk-frontend-react:build:production",
           "hmr": false
         }
       }
@@ -67,14 +67,16 @@
       "executor": "@nrwl/linter:eslint",
       "outputs": ["{options.outputFile}"],
       "options": {
-        "lintFilePatterns": ["packages/demoreact/**/*.{ts,tsx,js,jsx}"]
+        "lintFilePatterns": [
+          "packages/examples/sdk-frontend-react/**/*.{ts,tsx,js,jsx}"
+        ]
       }
     },
     "test": {
       "executor": "@nrwl/jest:jest",
-      "outputs": ["coverage/packages/demoreact"],
+      "outputs": ["coverage/packages/examples/sdk-frontend-react"],
       "options": {
-        "jestConfig": "packages/demoreact/jest.config.ts",
+        "jestConfig": "packages/examples/sdk-frontend-react/jest.config.ts",
         "passWithNoTests": true
       }
     }
diff --git a/packages/demoreact/src/app/AliasTest.tsx b/packages/examples/sdk-frontend-react/src/app/AliasTest.tsx
similarity index 67%
rename from packages/demoreact/src/app/AliasTest.tsx
rename to packages/examples/sdk-frontend-react/src/app/AliasTest.tsx
index b8d45414f..1dc825274 100644
--- a/packages/demoreact/src/app/AliasTest.tsx
+++ b/packages/examples/sdk-frontend-react/src/app/AliasTest.tsx
@@ -1,6 +1,11 @@
 import React, { useEffect, useState, useContext } from 'react';
-import { Section, SectionItem, CodeFormatter, SectionButton } from './components/StyledComponents';
-import Loader from './components/Loader'
+import {
+  Section,
+  SectionItem,
+  CodeFormatter,
+  SectionButton,
+} from './components/StyledComponents';
+import Loader from './components/Loader';
 import { Web3Context, EnvContext } from './context';
 import Dropdown from './components/Dropdown';
 import * as PushAPI from '@pushprotocol/restapi';
@@ -9,16 +14,13 @@ import { getCAIPAddress } from './helpers';
 const AliasTest = () => {
   const { library, account, chainId } = useContext<any>(Web3Context);
   const { env, isCAIP } = useContext<any>(EnvContext);
-  const [ aliasAddr, setAliasAddr ] = useState<string>('');
-  const [ aliasChain, setAliasChain ] = useState<'POLYGON' | 'BSC'>('POLYGON');
+  const [aliasAddr, setAliasAddr] = useState<string>('');
+  const [aliasChain, setAliasChain] = useState<'POLYGON' | 'BSC'>('POLYGON');
   const [isLoading, setLoading] = useState(false);
   const [aliasData, setAliasData] = useState();
-  
 
   const updateAliasAddr = (e: React.SyntheticEvent<HTMLElement>) => {
-    setAliasAddr(
-      (e.target as HTMLInputElement).value
-    );
+    setAliasAddr((e.target as HTMLInputElement).value);
   };
 
   const updateAliasChain = (e: any) => {
@@ -33,9 +35,9 @@ const AliasTest = () => {
       const response = await PushAPI.alias.getAliasInfo({
         aliasChain: aliasChain,
         alias: aliasAddr,
-        env: env
-      })
-      
+        env: env,
+      });
+
       setAliasData(response);
     } catch (e) {
       console.error(e);
@@ -53,7 +55,12 @@ const AliasTest = () => {
       <Section>
         <SectionItem>
           <label>Alias Address</label>
-          <input type="text" onChange={updateAliasAddr} value={aliasAddr} style={{ width: 400, height: 30 }} />
+          <input
+            type="text"
+            onChange={updateAliasAddr}
+            value={aliasAddr}
+            style={{ width: 400, height: 30 }}
+          />
           <label>Alias ChainId</label>
           <Dropdown
             label=""
@@ -64,17 +71,17 @@ const AliasTest = () => {
             value={aliasChain}
             onChange={updateAliasChain}
           />
-          <SectionButton onClick={testGetAliasInfo}>get alias info</SectionButton>
+          <SectionButton onClick={testGetAliasInfo}>
+            get alias info
+          </SectionButton>
         </SectionItem>
- 
+
         {aliasData ? (
-          <CodeFormatter>
-            {JSON.stringify(aliasData, null, 4)}
-          </CodeFormatter>
+          <CodeFormatter>{JSON.stringify(aliasData, null, 4)}</CodeFormatter>
         ) : null}
       </Section>
     </div>
   );
-}
+};
 
-export default AliasTest;
\ No newline at end of file
+export default AliasTest;
diff --git a/packages/demoreact/src/app/ChannelsTest.tsx b/packages/examples/sdk-frontend-react/src/app/ChannelsTest.tsx
similarity index 69%
rename from packages/demoreact/src/app/ChannelsTest.tsx
rename to packages/examples/sdk-frontend-react/src/app/ChannelsTest.tsx
index 414149d66..4fb659f46 100644
--- a/packages/demoreact/src/app/ChannelsTest.tsx
+++ b/packages/examples/sdk-frontend-react/src/app/ChannelsTest.tsx
@@ -1,11 +1,15 @@
 import React, { useEffect, useState, useContext } from 'react';
-import { Section, SectionItem, CodeFormatter, SectionButton } from './components/StyledComponents';
-import Loader from './components/Loader'
+import {
+  Section,
+  SectionItem,
+  CodeFormatter,
+  SectionButton,
+} from './components/StyledComponents';
+import Loader from './components/Loader';
 import { Web3Context, EnvContext } from './context';
 import * as PushAPI from '@pushprotocol/restapi';
 import { getCAIPAddress } from './helpers';
 
-
 const ChannelsTest = () => {
   const { library, account, chainId } = useContext<any>(Web3Context);
   const { env, isCAIP } = useContext<any>(EnvContext);
@@ -17,18 +21,13 @@ const ChannelsTest = () => {
   const [subscriberData, setSubscriberData] = useState<any>();
   const [channelDelegatesData, setChannelDelegatesData] = useState();
   const [subscriberStatus, setSubscriberStatus] = useState<boolean>();
-  
 
   const updateChannelAddress = (e: React.SyntheticEvent<HTMLElement>) => {
-    setChannelAddr(
-      (e.target as HTMLInputElement).value
-    );
+    setChannelAddr((e.target as HTMLInputElement).value);
   };
 
   const updateChannelName = (e: React.SyntheticEvent<HTMLElement>) => {
-    setChannelName(
-      (e.target as HTMLInputElement).value
-    );
+    setChannelName((e.target as HTMLInputElement).value);
   };
 
   const testGetChannelByAddress = async () => {
@@ -38,9 +37,9 @@ const ChannelsTest = () => {
       // object for channel data
       const response = await PushAPI.channels.getChannel({
         channel: isCAIP ? getCAIPAddress(env, channelAddr) : channelAddr,
-        env
+        env,
       });
-      
+
       setChannelData(response);
     } catch (e) {
       console.error(e);
@@ -56,7 +55,7 @@ const ChannelsTest = () => {
       // Array for channels data
       const response = await PushAPI.channels.search({
         query: channelName,
-        env
+        env,
       });
       setChannelListData(response);
     } catch (e) {
@@ -71,12 +70,12 @@ const ChannelsTest = () => {
       setLoading(true);
       const response = await PushAPI.channels.getSubscribers({
         channel: isCAIP ? getCAIPAddress(env, channelAddr) : channelAddr,
-        env: env
+        env: env,
       });
-  
+
       setSubscriberData(response);
-    } catch(e) {
-      console.error(e)
+    } catch (e) {
+      console.error(e);
     } finally {
       setLoading(false);
     }
@@ -87,12 +86,12 @@ const ChannelsTest = () => {
       setLoading(true);
       const response = await PushAPI.channels.getDelegates({
         channel: isCAIP ? getCAIPAddress(env, channelAddr) : channelAddr,
-        env: env
+        env: env,
       });
-  
+
       setChannelDelegatesData(response);
-    } catch(e) {
-      console.error(e)
+    } catch (e) {
+      console.error(e);
     } finally {
       setLoading(false);
     }
@@ -103,21 +102,21 @@ const ChannelsTest = () => {
       setLoading(true);
       let subscriptions = await PushAPI.user.getSubscriptions({
         user: isCAIP ? getCAIPAddress(env, account) : account,
-        env
+        env,
       });
 
-      subscriptions = subscriptions.map((sub: any) => sub.channel.toLowerCase());
-      
+      subscriptions = subscriptions.map((sub: any) =>
+        sub.channel.toLowerCase()
+      );
+
       const status = subscriptions.includes(channelAddr.toLowerCase());
 
       setSubscriberStatus(status);
-    } catch(e) {
-      console.error(e)
+    } catch (e) {
+      console.error(e);
     } finally {
       setLoading(false);
     }
-
-
   };
 
   const testOptFunctionality = async () => {
@@ -129,7 +128,9 @@ const ChannelsTest = () => {
       if (subscriberStatus) {
         await PushAPI.channels.unsubscribe({
           signer: _signer,
-          channelAddress: isCAIP ? getCAIPAddress(env, channelAddr) : channelAddr,
+          channelAddress: isCAIP
+            ? getCAIPAddress(env, channelAddr)
+            : channelAddr,
           userAddress: isCAIP ? getCAIPAddress(env, account) : account,
           env,
           onSuccess: () => {
@@ -139,11 +140,13 @@ const ChannelsTest = () => {
           onError: (e) => {
             console.error('opt out error', e);
           },
-        })
+        });
       } else {
         await PushAPI.channels.subscribe({
           signer: _signer,
-          channelAddress: isCAIP ? getCAIPAddress(env, channelAddr) : channelAddr,
+          channelAddress: isCAIP
+            ? getCAIPAddress(env, channelAddr)
+            : channelAddr,
           userAddress: isCAIP ? getCAIPAddress(env, account) : account,
           env,
           onSuccess: () => {
@@ -153,11 +156,10 @@ const ChannelsTest = () => {
           onError: (e) => {
             console.error('opt in error', e);
           },
-        })
+        });
       }
-
-    } catch(e) {
-      console.error(e)
+    } catch (e) {
+      console.error(e);
     } finally {
       setLoading(false);
     }
@@ -165,9 +167,9 @@ const ChannelsTest = () => {
 
   useEffect(() => {
     if (channelData && channelData['channel']) {
-      setChannelAddr(channelData['channel'])
+      setChannelAddr(channelData['channel']);
     }
-  }, [channelData])
+  }, [channelData]);
 
   useEffect(() => {
     // update the other data sections as well on opt in/out completion
@@ -188,10 +190,17 @@ const ChannelsTest = () => {
       <Section>
         <SectionItem>
           <label>Channel Address</label>
-          <input type="text" onChange={updateChannelAddress} value={channelAddr} style={{ width: 400, height: 30 }} />
-          <SectionButton onClick={testGetChannelByAddress}>get channel data</SectionButton>
+          <input
+            type="text"
+            onChange={updateChannelAddress}
+            value={channelAddr}
+            style={{ width: 400, height: 30 }}
+          />
+          <SectionButton onClick={testGetChannelByAddress}>
+            get channel data
+          </SectionButton>
         </SectionItem>
- 
+
         <SectionItem>
           <div>
             {channelData ? (
@@ -201,9 +210,11 @@ const ChannelsTest = () => {
             ) : null}
 
             <SectionItem style={{ marginTop: 20 }}>
-              <SectionButton onClick={testGetSubscribers}>get subscribers</SectionButton>
+              <SectionButton onClick={testGetSubscribers}>
+                get subscribers
+              </SectionButton>
             </SectionItem>
-            
+
             {subscriberData ? (
               <CodeFormatter>
                 {JSON.stringify(subscriberData, null, 4)}
@@ -211,7 +222,9 @@ const ChannelsTest = () => {
             ) : null}
 
             <SectionItem style={{ marginTop: 20 }}>
-              <SectionButton onClick={testGetChannelDelegates}>get channel delegates data</SectionButton>
+              <SectionButton onClick={testGetChannelDelegates}>
+                get channel delegates data
+              </SectionButton>
             </SectionItem>
 
             {channelDelegatesData ? (
@@ -221,7 +234,9 @@ const ChannelsTest = () => {
             ) : null}
 
             <SectionItem style={{ marginTop: 20 }}>
-              <SectionButton onClick={testSubscriberStatus}>check if logged-in user is subscribed</SectionButton>
+              <SectionButton onClick={testSubscriberStatus}>
+                check if logged-in user is subscribed
+              </SectionButton>
             </SectionItem>
             {typeof subscriberStatus === 'boolean' ? (
               <>
@@ -229,28 +244,37 @@ const ChannelsTest = () => {
                   {JSON.stringify(subscriberStatus, null, 4)}
                 </CodeFormatter>
 
-                <SectionButton onClick={testOptFunctionality}>{subscriberStatus ? 'OPT OUT' : 'OPT IN'}</SectionButton>
+                <SectionButton onClick={testOptFunctionality}>
+                  {subscriberStatus ? 'OPT OUT' : 'OPT IN'}
+                </SectionButton>
               </>
             ) : null}
           </div>
         </SectionItem>
 
         <div style={{ marginTop: 50, paddingTop: 30, borderTop: '1px solid' }}>
-            <SectionItem>
-              <label>Channel Name</label>
-              <input type="text" onChange={updateChannelName} value={channelName} style={{ width: 400, height: 30 }} />
-              <SectionButton onClick={testGetChannelByName}>get channel data</SectionButton>
-            </SectionItem>
-
-            {channelListData ? (
-              <CodeFormatter>
-                {JSON.stringify(channelListData, null, 4)}
-              </CodeFormatter>
-            ) : null}
+          <SectionItem>
+            <label>Channel Name</label>
+            <input
+              type="text"
+              onChange={updateChannelName}
+              value={channelName}
+              style={{ width: 400, height: 30 }}
+            />
+            <SectionButton onClick={testGetChannelByName}>
+              get channel data
+            </SectionButton>
+          </SectionItem>
+
+          {channelListData ? (
+            <CodeFormatter>
+              {JSON.stringify(channelListData, null, 4)}
+            </CodeFormatter>
+          ) : null}
         </div>
       </Section>
     </div>
   );
-}
+};
 
-export default ChannelsTest;
\ No newline at end of file
+export default ChannelsTest;
diff --git a/packages/demoreact/src/app/ChatSupportTest.tsx b/packages/examples/sdk-frontend-react/src/app/ChatSupportTest.tsx
similarity index 97%
rename from packages/demoreact/src/app/ChatSupportTest.tsx
rename to packages/examples/sdk-frontend-react/src/app/ChatSupportTest.tsx
index 10b3592a2..a87a6126f 100644
--- a/packages/demoreact/src/app/ChatSupportTest.tsx
+++ b/packages/examples/sdk-frontend-react/src/app/ChatSupportTest.tsx
@@ -11,7 +11,7 @@ export type ChatProps = {
   modalTitle?: string;
   primaryColor?: string;
   apiKey?: string;
-  env?: "dev" | "staging" | "prod";
+  env?: 'dev' | 'staging' | 'prod';
 };
 
 export const ChatSupportTest = () => {
diff --git a/packages/demoreact/src/app/ChatTest/AddAdminsToGroupTest.tsx b/packages/examples/sdk-frontend-react/src/app/ChatTest/AddAdminsToGroupTest.tsx
similarity index 72%
rename from packages/demoreact/src/app/ChatTest/AddAdminsToGroupTest.tsx
rename to packages/examples/sdk-frontend-react/src/app/ChatTest/AddAdminsToGroupTest.tsx
index b1d807e46..56f00f9f7 100644
--- a/packages/demoreact/src/app/ChatTest/AddAdminsToGroupTest.tsx
+++ b/packages/examples/sdk-frontend-react/src/app/ChatTest/AddAdminsToGroupTest.tsx
@@ -43,14 +43,13 @@ const AddAdminsToGroupTest = () => {
         signer: librarySigner,
       });
       setSendResponse(response);
-
     } catch (e) {
       console.error(e);
     } finally {
       setLoading(false);
     }
   };
-  
+
   return (
     <div>
       <ChatTest />
@@ -60,36 +59,38 @@ const AddAdminsToGroupTest = () => {
 
       <Section>
         <SectionItem>
-          <SectionButton onClick={addAdminsToGroupTest}>Add Admins to Group</SectionButton>
+          <SectionButton onClick={addAdminsToGroupTest}>
+            Add Admins to Group
+          </SectionButton>
         </SectionItem>
-         <SectionItem>
-              <label>chatId</label>
-              <input
-                type="text"
-                onChange={updateChatId}
-                value={chatId}
-                style={{ width: 400, height: 30 }}
-              />
+        <SectionItem>
+          <label>chatId</label>
+          <input
+            type="text"
+            onChange={updateChatId}
+            value={chatId}
+            style={{ width: 400, height: 30 }}
+          />
         </SectionItem>
-         <SectionItem>
-              <label>members (comma separated)</label>
-              <input
-                type="text"
-                onChange={updateMemberId}
-                value={memberAddress}
-                style={{ width: 400, height: 30 }}
-              />
+        <SectionItem>
+          <label>members (comma separated)</label>
+          <input
+            type="text"
+            onChange={updateMemberId}
+            value={memberAddress}
+            style={{ width: 400, height: 30 }}
+          />
         </SectionItem>
         <SectionItem style={{ marginTop: 20 }}>
-              <label>Account</label>
-              <input
-                type="text"
-                onChange={updateAccount}
-                value={account}
-                style={{ width: 400, height: 30 }}
-              />
+          <label>Account</label>
+          <input
+            type="text"
+            onChange={updateAccount}
+            value={account}
+            style={{ width: 400, height: 30 }}
+          />
         </SectionItem>
-         <SectionItem>
+        <SectionItem>
           <div>
             {sendResponse ? (
               <CodeFormatter>
diff --git a/packages/demoreact/src/app/ChatTest/AddMembersToGroupTest.tsx b/packages/examples/sdk-frontend-react/src/app/ChatTest/AddMembersToGroupTest.tsx
similarity index 72%
rename from packages/demoreact/src/app/ChatTest/AddMembersToGroupTest.tsx
rename to packages/examples/sdk-frontend-react/src/app/ChatTest/AddMembersToGroupTest.tsx
index 2ee6452e1..ba75111a4 100644
--- a/packages/demoreact/src/app/ChatTest/AddMembersToGroupTest.tsx
+++ b/packages/examples/sdk-frontend-react/src/app/ChatTest/AddMembersToGroupTest.tsx
@@ -43,7 +43,6 @@ const AddMembersToGroupTest = () => {
         signer: librarySigner,
       });
       setSendResponse(response);
-
     } catch (e) {
       console.error(e);
     } finally {
@@ -51,8 +50,6 @@ const AddMembersToGroupTest = () => {
     }
   };
 
-
-
   return (
     <div>
       <ChatTest />
@@ -62,36 +59,38 @@ const AddMembersToGroupTest = () => {
 
       <Section>
         <SectionItem>
-          <SectionButton onClick={addMembersToGroupTest}>Add Member to Group</SectionButton>
+          <SectionButton onClick={addMembersToGroupTest}>
+            Add Member to Group
+          </SectionButton>
         </SectionItem>
-         <SectionItem>
-              <label>chatId</label>
-              <input
-                type="text"
-                onChange={updateChatId}
-                value={chatId}
-                style={{ width: 400, height: 30 }}
-              />
+        <SectionItem>
+          <label>chatId</label>
+          <input
+            type="text"
+            onChange={updateChatId}
+            value={chatId}
+            style={{ width: 400, height: 30 }}
+          />
         </SectionItem>
-         <SectionItem>
-              <label>members (comma separated)</label>
-              <input
-                type="text"
-                onChange={updateMemberId}
-                value={memberAddress}
-                style={{ width: 400, height: 30 }}
-              />
+        <SectionItem>
+          <label>members (comma separated)</label>
+          <input
+            type="text"
+            onChange={updateMemberId}
+            value={memberAddress}
+            style={{ width: 400, height: 30 }}
+          />
         </SectionItem>
         <SectionItem style={{ marginTop: 20 }}>
-              <label>Account</label>
-              <input
-                type="text"
-                onChange={updateAccount}
-                value={account}
-                style={{ width: 400, height: 30 }}
-              />
+          <label>Account</label>
+          <input
+            type="text"
+            onChange={updateAccount}
+            value={account}
+            style={{ width: 400, height: 30 }}
+          />
         </SectionItem>
-         <SectionItem>
+        <SectionItem>
           <div>
             {sendResponse ? (
               <CodeFormatter>
diff --git a/packages/demoreact/src/app/ChatTest/ApproveRequestTest.tsx b/packages/examples/sdk-frontend-react/src/app/ChatTest/ApproveRequestTest.tsx
similarity index 98%
rename from packages/demoreact/src/app/ChatTest/ApproveRequestTest.tsx
rename to packages/examples/sdk-frontend-react/src/app/ChatTest/ApproveRequestTest.tsx
index 6412944a5..8f5890d94 100644
--- a/packages/demoreact/src/app/ChatTest/ApproveRequestTest.tsx
+++ b/packages/examples/sdk-frontend-react/src/app/ChatTest/ApproveRequestTest.tsx
@@ -38,7 +38,7 @@ const ApproveRequestTest = () => {
           encryptedPGPPrivateKey: user.encryptedPrivateKey,
           account,
           signer: librarySigner,
-          env
+          env,
         });
       }
 
@@ -48,7 +48,7 @@ const ApproveRequestTest = () => {
         senderAddress,
         env,
         pgpPrivateKey: pvtkey,
-        signer: librarySigner
+        signer: librarySigner,
       });
 
       setApproveResponse(response);
diff --git a/packages/demoreact/src/app/ChatTest/AuthUpdateUser.tsx b/packages/examples/sdk-frontend-react/src/app/ChatTest/AuthUpdateUser.tsx
similarity index 100%
rename from packages/demoreact/src/app/ChatTest/AuthUpdateUser.tsx
rename to packages/examples/sdk-frontend-react/src/app/ChatTest/AuthUpdateUser.tsx
diff --git a/packages/demoreact/src/app/ChatTest/ChatTest.tsx b/packages/examples/sdk-frontend-react/src/app/ChatTest/ChatTest.tsx
similarity index 99%
rename from packages/demoreact/src/app/ChatTest/ChatTest.tsx
rename to packages/examples/sdk-frontend-react/src/app/ChatTest/ChatTest.tsx
index 110f73ed5..f861ca6e4 100644
--- a/packages/demoreact/src/app/ChatTest/ChatTest.tsx
+++ b/packages/examples/sdk-frontend-react/src/app/ChatTest/ChatTest.tsx
@@ -79,7 +79,7 @@ const ChatTest = () => {
           </Link>
           <Link to="/removeAdminsFromGroup" className="nav-button">
             CHAT.REMOVEADMINSFROMGROUP
-           </Link>
+          </Link>
         </NavMenu>
       </Section>
     </div>
diff --git a/packages/demoreact/src/app/ChatTest/ConversationHash.tsx b/packages/examples/sdk-frontend-react/src/app/ChatTest/ConversationHash.tsx
similarity index 100%
rename from packages/demoreact/src/app/ChatTest/ConversationHash.tsx
rename to packages/examples/sdk-frontend-react/src/app/ChatTest/ConversationHash.tsx
diff --git a/packages/demoreact/src/app/ChatTest/CreateGroupTest.tsx b/packages/examples/sdk-frontend-react/src/app/ChatTest/CreateGroupTest.tsx
similarity index 100%
rename from packages/demoreact/src/app/ChatTest/CreateGroupTest.tsx
rename to packages/examples/sdk-frontend-react/src/app/ChatTest/CreateGroupTest.tsx
diff --git a/packages/demoreact/src/app/ChatTest/CreateUser.tsx b/packages/examples/sdk-frontend-react/src/app/ChatTest/CreateUser.tsx
similarity index 100%
rename from packages/demoreact/src/app/ChatTest/CreateUser.tsx
rename to packages/examples/sdk-frontend-react/src/app/ChatTest/CreateUser.tsx
diff --git a/packages/demoreact/src/app/ChatTest/GetChats.tsx b/packages/examples/sdk-frontend-react/src/app/ChatTest/GetChats.tsx
similarity index 100%
rename from packages/demoreact/src/app/ChatTest/GetChats.tsx
rename to packages/examples/sdk-frontend-react/src/app/ChatTest/GetChats.tsx
diff --git a/packages/demoreact/src/app/ChatTest/GetGroupTest.tsx b/packages/examples/sdk-frontend-react/src/app/ChatTest/GetGroupTest.tsx
similarity index 83%
rename from packages/demoreact/src/app/ChatTest/GetGroupTest.tsx
rename to packages/examples/sdk-frontend-react/src/app/ChatTest/GetGroupTest.tsx
index 8308a5b45..c3b46c136 100644
--- a/packages/demoreact/src/app/ChatTest/GetGroupTest.tsx
+++ b/packages/examples/sdk-frontend-react/src/app/ChatTest/GetGroupTest.tsx
@@ -30,7 +30,6 @@ const GetGroupTest = () => {
         env,
       });
       setSendResponse(response);
-
     } catch (e) {
       console.error(e);
     } finally {
@@ -38,8 +37,6 @@ const GetGroupTest = () => {
     }
   };
 
-
-
   return (
     <div>
       <ChatTest />
@@ -51,17 +48,17 @@ const GetGroupTest = () => {
         <SectionItem>
           <SectionButton onClick={testGetGroup}>get group data</SectionButton>
         </SectionItem>
-         <SectionItem>
-              <label>chatId</label>
-              <input
-                type="text"
-                onChange={updateChatId}
-                value={chatId}
-                style={{ width: 400, height: 30 }}
-              />
-            </SectionItem>
+        <SectionItem>
+          <label>chatId</label>
+          <input
+            type="text"
+            onChange={updateChatId}
+            value={chatId}
+            style={{ width: 400, height: 30 }}
+          />
+        </SectionItem>
 
-                    <SectionItem>
+        <SectionItem>
           <div>
             {sendResponse ? (
               <CodeFormatter>
diff --git a/packages/demoreact/src/app/ChatTest/GetRequests.tsx b/packages/examples/sdk-frontend-react/src/app/ChatTest/GetRequests.tsx
similarity index 100%
rename from packages/demoreact/src/app/ChatTest/GetRequests.tsx
rename to packages/examples/sdk-frontend-react/src/app/ChatTest/GetRequests.tsx
diff --git a/packages/demoreact/src/app/ChatTest/GetUser.tsx b/packages/examples/sdk-frontend-react/src/app/ChatTest/GetUser.tsx
similarity index 100%
rename from packages/demoreact/src/app/ChatTest/GetUser.tsx
rename to packages/examples/sdk-frontend-react/src/app/ChatTest/GetUser.tsx
diff --git a/packages/demoreact/src/app/ChatTest/GetUsersBatchTest.tsx b/packages/examples/sdk-frontend-react/src/app/ChatTest/GetUsersBatchTest.tsx
similarity index 94%
rename from packages/demoreact/src/app/ChatTest/GetUsersBatchTest.tsx
rename to packages/examples/sdk-frontend-react/src/app/ChatTest/GetUsersBatchTest.tsx
index a6ca23aa4..084a7780e 100644
--- a/packages/demoreact/src/app/ChatTest/GetUsersBatchTest.tsx
+++ b/packages/examples/sdk-frontend-react/src/app/ChatTest/GetUsersBatchTest.tsx
@@ -48,7 +48,9 @@ const GetUserBatchTest = () => {
       <Loader show={isLoading} />
       <Section>
         <SectionItem>
-          <SectionButton onClick={testGetUsersBatch}>get users batch data</SectionButton>
+          <SectionButton onClick={testGetUsersBatch}>
+            get users batch data
+          </SectionButton>
         </SectionItem>
 
         <SectionItem>
@@ -70,7 +72,6 @@ const GetUserBatchTest = () => {
             ) : null}
           </div>
         </SectionItem>
-
       </Section>
     </div>
   );
diff --git a/packages/demoreact/src/app/ChatTest/History.tsx b/packages/examples/sdk-frontend-react/src/app/ChatTest/History.tsx
similarity index 100%
rename from packages/demoreact/src/app/ChatTest/History.tsx
rename to packages/examples/sdk-frontend-react/src/app/ChatTest/History.tsx
diff --git a/packages/demoreact/src/app/ChatTest/RemoveAdminsFromGroupTest.tsx b/packages/examples/sdk-frontend-react/src/app/ChatTest/RemoveAdminsFromGroupTest.tsx
similarity index 72%
rename from packages/demoreact/src/app/ChatTest/RemoveAdminsFromGroupTest.tsx
rename to packages/examples/sdk-frontend-react/src/app/ChatTest/RemoveAdminsFromGroupTest.tsx
index b875c7c46..dd95c3e1c 100644
--- a/packages/demoreact/src/app/ChatTest/RemoveAdminsFromGroupTest.tsx
+++ b/packages/examples/sdk-frontend-react/src/app/ChatTest/RemoveAdminsFromGroupTest.tsx
@@ -43,7 +43,6 @@ const RemoveAdminsFromGroupTest = () => {
         signer: librarySigner,
       });
       setSendResponse(response);
-
     } catch (e) {
       console.error(e);
     } finally {
@@ -60,36 +59,38 @@ const RemoveAdminsFromGroupTest = () => {
 
       <Section>
         <SectionItem>
-          <SectionButton onClick={removeAdminsFromGroupTest}>Remove Admins from Group</SectionButton>
+          <SectionButton onClick={removeAdminsFromGroupTest}>
+            Remove Admins from Group
+          </SectionButton>
         </SectionItem>
-         <SectionItem>
-              <label>chatId</label>
-              <input
-                type="text"
-                onChange={updateChatId}
-                value={chatId}
-                style={{ width: 400, height: 30 }}
-              />
+        <SectionItem>
+          <label>chatId</label>
+          <input
+            type="text"
+            onChange={updateChatId}
+            value={chatId}
+            style={{ width: 400, height: 30 }}
+          />
         </SectionItem>
-         <SectionItem>
-              <label>members (comma separated)</label>
-              <input
-                type="text"
-                onChange={updateMemberId}
-                value={memberAddress}
-                style={{ width: 400, height: 30 }}
-              />
+        <SectionItem>
+          <label>members (comma separated)</label>
+          <input
+            type="text"
+            onChange={updateMemberId}
+            value={memberAddress}
+            style={{ width: 400, height: 30 }}
+          />
         </SectionItem>
         <SectionItem style={{ marginTop: 20 }}>
-              <label>Account</label>
-              <input
-                type="text"
-                onChange={updateAccount}
-                value={account}
-                style={{ width: 400, height: 30 }}
-              />
+          <label>Account</label>
+          <input
+            type="text"
+            onChange={updateAccount}
+            value={account}
+            style={{ width: 400, height: 30 }}
+          />
         </SectionItem>
-         <SectionItem>
+        <SectionItem>
           <div>
             {sendResponse ? (
               <CodeFormatter>
diff --git a/packages/demoreact/src/app/ChatTest/RemoveMembersFromGroupTest.tsx b/packages/examples/sdk-frontend-react/src/app/ChatTest/RemoveMembersFromGroupTest.tsx
similarity index 70%
rename from packages/demoreact/src/app/ChatTest/RemoveMembersFromGroupTest.tsx
rename to packages/examples/sdk-frontend-react/src/app/ChatTest/RemoveMembersFromGroupTest.tsx
index b2b3974d0..e59dfc816 100644
--- a/packages/demoreact/src/app/ChatTest/RemoveMembersFromGroupTest.tsx
+++ b/packages/examples/sdk-frontend-react/src/app/ChatTest/RemoveMembersFromGroupTest.tsx
@@ -11,7 +11,7 @@ import * as PushAPI from '@pushprotocol/restapi';
 import ChatTest from './ChatTest';
 
 const RemoveMembersFromGroupTest = () => {
-  const { account,library } = useContext<any>(Web3Context);
+  const { account, library } = useContext<any>(Web3Context);
   const { env } = useContext<any>(EnvContext);
   const [isLoading, setLoading] = useState(false);
   const [chatId, setChatId] = useState<string>('');
@@ -22,7 +22,7 @@ const RemoveMembersFromGroupTest = () => {
     setChatId((e.target as HTMLInputElement).value);
   };
 
-const updateMemberId = (e: React.SyntheticEvent<HTMLElement>) => {
+  const updateMemberId = (e: React.SyntheticEvent<HTMLElement>) => {
     setMemberAddress((e.target as HTMLInputElement).value);
   };
 
@@ -38,7 +38,6 @@ const updateMemberId = (e: React.SyntheticEvent<HTMLElement>) => {
         signer: librarySigner,
       });
       setSendResponse(response);
-
     } catch (e) {
       console.error(e);
     } finally {
@@ -55,27 +54,29 @@ const updateMemberId = (e: React.SyntheticEvent<HTMLElement>) => {
 
       <Section>
         <SectionItem>
-          <SectionButton onClick={removeMembersFromGroupTest}>Remove Member from Group</SectionButton>
+          <SectionButton onClick={removeMembersFromGroupTest}>
+            Remove Member from Group
+          </SectionButton>
         </SectionItem>
-         <SectionItem>
-              <label>chatId</label>
-              <input
-                type="text"
-                onChange={updateChatId}
-                value={chatId}
-                style={{ width: 400, height: 30 }}
-              />
+        <SectionItem>
+          <label>chatId</label>
+          <input
+            type="text"
+            onChange={updateChatId}
+            value={chatId}
+            style={{ width: 400, height: 30 }}
+          />
         </SectionItem>
-         <SectionItem>
-              <label>members (comma separated)</label>
-              <input
-                type="text"
-                onChange={updateMemberId}
-                value={memberAddress}
-                style={{ width: 400, height: 30 }}
-              />
+        <SectionItem>
+          <label>members (comma separated)</label>
+          <input
+            type="text"
+            onChange={updateMemberId}
+            value={memberAddress}
+            style={{ width: 400, height: 30 }}
+          />
         </SectionItem>
-         <SectionItem>
+        <SectionItem>
           <div>
             {sendResponse ? (
               <CodeFormatter>
diff --git a/packages/demoreact/src/app/ChatTest/SendMessageTest.tsx b/packages/examples/sdk-frontend-react/src/app/ChatTest/SendMessageTest.tsx
similarity index 100%
rename from packages/demoreact/src/app/ChatTest/SendMessageTest.tsx
rename to packages/examples/sdk-frontend-react/src/app/ChatTest/SendMessageTest.tsx
diff --git a/packages/demoreact/src/app/ChatTest/UpdateGroupTest.tsx b/packages/examples/sdk-frontend-react/src/app/ChatTest/UpdateGroupTest.tsx
similarity index 100%
rename from packages/demoreact/src/app/ChatTest/UpdateGroupTest.tsx
rename to packages/examples/sdk-frontend-react/src/app/ChatTest/UpdateGroupTest.tsx
diff --git a/packages/demoreact/src/app/ChatTest/UpdateUserProfile.tsx b/packages/examples/sdk-frontend-react/src/app/ChatTest/UpdateUserProfile.tsx
similarity index 100%
rename from packages/demoreact/src/app/ChatTest/UpdateUserProfile.tsx
rename to packages/examples/sdk-frontend-react/src/app/ChatTest/UpdateUserProfile.tsx
diff --git a/packages/examples/sdk-frontend-react/src/app/ChatTest/helper.ts b/packages/examples/sdk-frontend-react/src/app/ChatTest/helper.ts
new file mode 100644
index 000000000..9f5d41d32
--- /dev/null
+++ b/packages/examples/sdk-frontend-react/src/app/ChatTest/helper.ts
@@ -0,0 +1,17 @@
+import { ChatStatus } from '@pushprotocol/restapi';
+
+export const stringToChatStatus = (status: string | undefined): ChatStatus => {
+  if (!status) {
+    throw new Error(`Invalid ChatStatus string: ${status}`);
+  }
+  switch (status.toUpperCase()) {
+    case 'ACTIVE':
+      return ChatStatus.ACTIVE;
+    case 'ENDED':
+      return ChatStatus.ENDED;
+    case 'PENDING':
+      return ChatStatus.PENDING;
+    default:
+      throw new Error(`Invalid ChatStatus string: ${status}`);
+  }
+};
diff --git a/packages/examples/sdk-frontend-react/src/app/ChatWidgetTest.tsx b/packages/examples/sdk-frontend-react/src/app/ChatWidgetTest.tsx
new file mode 100644
index 000000000..4835849db
--- /dev/null
+++ b/packages/examples/sdk-frontend-react/src/app/ChatWidgetTest.tsx
@@ -0,0 +1,43 @@
+import React, { useContext, useEffect, useState } from 'react';
+import { ChatAndNotificationWidget, PUSH_TABS } from '@pushprotocol/uiweb';
+import { EnvContext, Web3Context } from './context';
+import * as PushAPI from '@pushprotocol/restapi';
+import { IUser } from '@pushprotocol/restapi';
+
+export const ChatWidgetTest = () => {
+  const { account, library } = useContext<any>(Web3Context);
+  const librarySigner = library.getSigner();
+  const [pvtKey, setPvtKey] = useState<string>('');
+  const { env } = useContext<any>(EnvContext);
+
+  useEffect(() => {
+    (async () => {
+      const user = await PushAPI.user.get({ account: account, env });
+      const pvtkey = null;
+      if (user?.encryptedPrivateKey) {
+        const response = await PushAPI.chat.decryptPGPKey({
+          encryptedPGPPrivateKey: (user as IUser).encryptedPrivateKey,
+          account: account,
+          signer: librarySigner,
+          env,
+          toUpgrade: true,
+        });
+        setPvtKey(response);
+      }
+    })();
+  }, [account, env]);
+  const onClose = () => {
+    console.log('in here widget');
+  };
+
+  return (
+    <ChatAndNotificationWidget
+      account={account}
+      env={env}
+      decryptedPgpPvtKey={pvtKey}
+      signer={librarySigner}
+      // activeTab={PUSH_TABS.APP_NOTIFICATIONS}
+      activeChat="0x3Cf13f6d91F50dca6eAD7356b78482c54CDd95ff"
+    />
+  );
+};
diff --git a/packages/demoreact/src/app/DelegationTest.tsx b/packages/examples/sdk-frontend-react/src/app/DelegationTest.tsx
similarity index 74%
rename from packages/demoreact/src/app/DelegationTest.tsx
rename to packages/examples/sdk-frontend-react/src/app/DelegationTest.tsx
index d4b40ce9c..657c0e000 100644
--- a/packages/demoreact/src/app/DelegationTest.tsx
+++ b/packages/examples/sdk-frontend-react/src/app/DelegationTest.tsx
@@ -1,28 +1,31 @@
 import React, { useEffect, useState, useContext } from 'react';
-import { Section, SectionItem, CodeFormatter, SectionButton } from './components/StyledComponents';
-import Loader from './components/Loader'
+import {
+  Section,
+  SectionItem,
+  CodeFormatter,
+  SectionButton,
+} from './components/StyledComponents';
+import Loader from './components/Loader';
 import { Web3Context, EnvContext } from './context';
 import * as PushAPI from '@pushprotocol/restapi';
 import { getCAIPAddress } from './helpers';
 
-
 const DelegationTest = () => {
   const { account } = useContext<any>(Web3Context);
   const { env, isCAIP } = useContext<any>(EnvContext);
   const [delegationData, setDelegationData] = useState();
 
-
   const testGetDelegations = async () => {
     try {
       const response = await PushAPI.user.getDelegations({
         user: isCAIP ? getCAIPAddress(env, account) : account,
-        env
+        env,
       });
-  
+
       setDelegationData(response);
-    } catch(e) {
-      console.error(e)
-    } 
+    } catch (e) {
+      console.error(e);
+    }
   };
 
   return (
@@ -31,9 +34,11 @@ const DelegationTest = () => {
 
       <Section>
         <SectionItem>
-          <SectionButton onClick={testGetDelegations}>get delegations data</SectionButton>
+          <SectionButton onClick={testGetDelegations}>
+            get delegations data
+          </SectionButton>
         </SectionItem>
- 
+
         <SectionItem style={{ marginTop: 20 }}>
           <div>
             {delegationData ? (
@@ -43,10 +48,9 @@ const DelegationTest = () => {
             ) : null}
           </div>
         </SectionItem>
-        
       </Section>
     </div>
   );
-}
+};
 
-export default DelegationTest;
\ No newline at end of file
+export default DelegationTest;
diff --git a/packages/examples/sdk-frontend-react/src/app/EmbedTest.tsx b/packages/examples/sdk-frontend-react/src/app/EmbedTest.tsx
new file mode 100644
index 000000000..12f213d44
--- /dev/null
+++ b/packages/examples/sdk-frontend-react/src/app/EmbedTest.tsx
@@ -0,0 +1,47 @@
+import { useEffect, useContext } from 'react';
+import { EmbedSDK } from '@pushprotocol/uiembed';
+import { Web3Context } from './context';
+
+const EmbedTest = () => {
+  const { account, chainId } = useContext<any>(Web3Context);
+
+  useEffect(() => {
+    if (account) {
+      // 'your connected wallet address'
+      EmbedSDK.init({
+        chainId,
+        headerText: 'Hello DeFi', // optional
+        targetID: 'sdk-trigger-id', // mandatory
+        appName: 'consumerApp', // mandatory
+        user: account, // mandatory
+        viewOptions: {
+          type: 'sidebar', // optional [default: 'sidebar', 'modal']
+          showUnreadIndicator: true, // optional
+          unreadIndicatorColor: '#cc1919',
+          unreadIndicatorPosition: 'top-right',
+        },
+        theme: 'light',
+        onOpen: () => {
+          console.log('-> client dApp onOpen callback');
+        },
+        onClose: () => {
+          console.log('-> client dApp onClose callback');
+        },
+      });
+    }
+
+    return () => {
+      EmbedSDK.cleanup();
+    };
+  }, [account, chainId]);
+
+  return (
+    <div>
+      <h2>Embed Test page</h2>
+
+      <button id="sdk-trigger-id">trigger button</button>
+    </div>
+  );
+};
+
+export default EmbedTest;
diff --git a/packages/examples/sdk-frontend-react/src/app/NotificationsTest.tsx b/packages/examples/sdk-frontend-react/src/app/NotificationsTest.tsx
new file mode 100644
index 000000000..9f41cf932
--- /dev/null
+++ b/packages/examples/sdk-frontend-react/src/app/NotificationsTest.tsx
@@ -0,0 +1,293 @@
+import { useEffect, useState, useContext, useCallback } from 'react';
+import styled from 'styled-components';
+import {
+  Section,
+  SectionItem,
+  SectionButton,
+} from './components/StyledComponents';
+import Loader from './components/Loader';
+import { DarkIcon, LightIcon } from './components/Icons';
+import { Web3Context, EnvContext } from './context';
+import * as PushAPI from '@pushprotocol/restapi';
+import {
+  NotificationItem,
+  chainNameType,
+  SubscribedModal,
+  INotificationItemTheme,
+  notificationBaseTheme,
+  notificationLightTheme,
+} from '@pushprotocol/uiweb';
+import { getCAIPAddress } from './helpers';
+
+import sampleNotifications from './data';
+
+const NotificationListContainer = styled.div`
+  margin: 20px;
+  padding: 20px;
+  width: 100%;
+
+  @media (max-width: 600px) {
+    margin: 0;
+    padding: 0;
+  }
+`;
+
+const TabButtons = styled.div`
+  margin: 20px 0;
+  display: flex;
+  flex-direction: row;
+`;
+
+const Header = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+`;
+
+const ThemeSelector = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  height: 32px;
+`;
+
+const devWorkingAddress = '0xD8634C39BBFd4033c0d3289C4515275102423681';
+
+const NotificationsTest = () => {
+  const { account, chainId } = useContext<any>(Web3Context);
+  const { env, isCAIP } = useContext<any>(EnvContext);
+  const [isLoading, setLoading] = useState(false);
+  const [notifs, setNotifs] = useState<PushAPI.ParsedResponseType[]>();
+  const [spams, setSpams] = useState<PushAPI.ParsedResponseType[]>();
+  const [theme, setTheme] = useState('dark');
+  const [viewType, setViewType] = useState('notif');
+  const [showSubscribe, setShowSubscribe] = useState(false);
+  //   const customTheme: INotificationItemTheme = {...notificationLightTheme,...{
+  //     borderRadius:{
+  //       ...notificationLightTheme.borderRadius,
+  //       modal:'12px',
+  //     },
+  //     color:{
+  //       ...notificationLightTheme.color,
+  //         channelNameText:'#62626A',
+  //         notificationTitleText:'#000',
+  //         notificationContentText:'#62626A',
+  //         timestamp:'#62626A',
+  //     },
+  //     fontWeight:{
+  //       ...notificationLightTheme.fontWeight,
+  //       channelNameText:700,
+  //       notificationTitleText:700,
+  //       notificationContentText:800,
+  //       timestamp:400
+  //     },
+  //     fontSize:{
+  //       ...notificationLightTheme.fontSize,
+  //       channelNameText:'16px',
+  //       notificationTitleText:'16px',
+  //       notificationContentText:'16px',
+  //       timestamp:'12px'
+  //     },
+  //     modalDivider:'none'
+  // }};
+  const loadNotifications = useCallback(async () => {
+    try {
+      setLoading(true);
+      const feeds = await PushAPI.user.getFeeds({
+        user: isCAIP ? getCAIPAddress(env, account) : account,
+        // user: isCAIP ? getCAIPAddress(env, devWorkingAddress) : devWorkingAddress,
+        limit: 30,
+        env: env,
+      });
+
+      console.log('feeds: ', feeds);
+
+      setNotifs(feeds);
+    } catch (e) {
+      console.error(e);
+    } finally {
+      setLoading(false);
+    }
+  }, [account, env, isCAIP]);
+
+  const loadSpam = useCallback(async () => {
+    try {
+      setLoading(true);
+      const spams = await PushAPI.user.getFeeds({
+        user: isCAIP ? getCAIPAddress(env, account) : account,
+        spam: true,
+        env: env,
+      });
+
+      setSpams(spams);
+    } catch (e) {
+      console.error(e);
+    } finally {
+      setLoading(false);
+    }
+  }, [account, env, isCAIP]);
+
+  const toggleTheme = () => {
+    setTheme((lastTheme) => {
+      return lastTheme === 'dark' ? 'light' : 'dark';
+    });
+  };
+
+  const toggleSubscribedModal = () => {
+    setShowSubscribe((lastVal) => !lastVal);
+  };
+
+  useEffect(() => {
+    if (account) {
+      if (viewType === 'notif') {
+        loadNotifications();
+      } else {
+        loadSpam();
+      }
+    }
+  }, [account, viewType, loadNotifications, loadSpam]);
+
+  return (
+    <div>
+      <Header>
+        <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>
+        <SectionButton onClick={toggleSubscribedModal}>
+          show subscribed modal
+        </SectionButton>
+      </TabButtons>
+
+      <Loader show={isLoading} />
+
+      {showSubscribe ? (
+        <SubscribedModal onClose={toggleSubscribedModal} />
+      ) : null}
+
+      <Section theme={theme}>
+        {viewType === 'notif' ? (
+          <>
+            <b className="headerText">Notifications: </b>
+            <SectionItem>
+              {notifs ? (
+                <NotificationListContainer>
+                  {notifs.map((oneNotification, i) => {
+                    const {
+                      cta,
+                      title,
+                      message,
+                      app,
+                      icon,
+                      image,
+                      url,
+                      blockchain,
+                      secret,
+                      notification,
+                    } = oneNotification;
+
+                    // const chainName = blockchain as chainNameType;
+
+                    return (
+                      <NotificationItem
+                        key={`notif-${i}`}
+                        notificationTitle={
+                          secret ? notification['title'] : title
+                        }
+                        notificationBody={
+                          secret ? notification['body'] : message
+                        }
+                        cta={cta}
+                        app={app}
+                        icon={icon}
+                        image={image}
+                        url={url}
+                        theme={theme}
+                        // customTheme={customTheme}
+                        // chainName="ETH_TEST_GOERLI"
+                        chainName={blockchain as chainNameType}
+                      />
+                    );
+                  })}
+                </NotificationListContainer>
+              ) : null}
+            </SectionItem>
+          </>
+        ) : (
+          <>
+            <b className="headerText">Spams: </b>
+            <SectionItem>
+              {spams ? (
+                <NotificationListContainer>
+                  {spams.map((oneNotification, i) => {
+                    const {
+                      cta,
+                      title,
+                      message,
+                      app,
+                      icon,
+                      image,
+                      url,
+                      blockchain,
+                      secret,
+                      notification,
+                    } = oneNotification;
+
+                    return (
+                      <NotificationItem
+                        key={`spam-${i}`}
+                        notificationTitle={
+                          secret ? notification['title'] : title
+                        }
+                        notificationBody={
+                          secret ? notification['body'] : message
+                        }
+                        cta={cta}
+                        app={app}
+                        icon={icon}
+                        image={image}
+                        url={url}
+                        // optional parameters for rendering spambox
+                        isSpam
+                        subscribeFn={async () => console.log('yayy spam')}
+                        isSubscribedFn={async () => false}
+                        theme={theme}
+                        chainName={blockchain as chainNameType}
+                      />
+                    );
+                  })}
+                </NotificationListContainer>
+              ) : null}
+            </SectionItem>
+          </>
+        )}
+      </Section>
+    </div>
+  );
+};
+
+export default NotificationsTest;
diff --git a/packages/examples/sdk-frontend-react/src/app/PayloadsTest.tsx b/packages/examples/sdk-frontend-react/src/app/PayloadsTest.tsx
new file mode 100644
index 000000000..bc527240c
--- /dev/null
+++ b/packages/examples/sdk-frontend-react/src/app/PayloadsTest.tsx
@@ -0,0 +1,448 @@
+import { useState, useContext } from 'react';
+import styled from 'styled-components';
+// import * as ethers from 'ethers';
+import {
+  Section,
+  SectionButton,
+  CodeFormatter,
+} from './components/StyledComponents';
+import Loader from './components/Loader';
+import Dropdown from './components/Dropdown';
+import { APIFeedback } from './components/Feedback';
+import { DarkIcon, LightIcon } from './components/Icons';
+import { Web3Context, EnvContext } from './context';
+import * as PushAPI from '@pushprotocol/restapi';
+import { getCAIPAddress, ENV } from './helpers';
+
+const Header = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+`;
+
+const ThemeSelector = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  height: 32px;
+`;
+
+type optionsMatrixType = {
+  [key: string]: {
+    [key: string]: any;
+  };
+};
+
+const getOptionsMatrix = ({
+  signer,
+  env = ENV.PROD,
+  isCAIP,
+  channel,
+  timestamp,
+}: {
+  signer: any;
+  env?: ENV;
+  isCAIP?: boolean;
+  channel: string;
+  timestamp: string;
+}): optionsMatrixType => {
+  if (!signer) throw Error(`No Signer provided`);
+
+  const channelAddr = isCAIP ? getCAIPAddress(env, channel) : channel;
+
+  // EDIT here to change recipients, title, body etc
+
+  return {
+    [PushAPI.payloads.NOTIFICATION_TYPE.TARGETTED]: {
+      [PushAPI.payloads.IDENTITY_TYPE.DIRECT_PAYLOAD]: {
+        signer,
+        env,
+        type: PushAPI.payloads.NOTIFICATION_TYPE.TARGETTED,
+        identityType: PushAPI.payloads.IDENTITY_TYPE.DIRECT_PAYLOAD,
+        notification: {
+          title: `[SDK-TEST] notification TITLE: ${timestamp}`,
+          body: `[sdk-test] notification BODY ${timestamp}`,
+        },
+        payload: {
+          title: `[sdk-test] payload title ${timestamp}`,
+          body: `type:${PushAPI.payloads.NOTIFICATION_TYPE.TARGETTED} identity:${PushAPI.payloads.IDENTITY_TYPE.DIRECT_PAYLOAD}`,
+          cta: '',
+          img: '',
+        },
+        recipients: isCAIP
+          ? getCAIPAddress(env, '0xD8634C39BBFd4033c0d3289C4515275102423681')
+          : '0xD8634C39BBFd4033c0d3289C4515275102423681',
+        channel: channelAddr,
+      },
+      [PushAPI.payloads.IDENTITY_TYPE.IPFS]: {
+        signer,
+        env,
+        type: PushAPI.payloads.NOTIFICATION_TYPE.TARGETTED,
+        identityType: PushAPI.payloads.IDENTITY_TYPE.IPFS,
+        ipfsHash: 'bafkreicuttr5gpbyzyn6cyapxctlr7dk2g6fnydqxy6lps424mcjcn73we', // from BE devtools
+        recipients: isCAIP
+          ? getCAIPAddress(env, '0xD8634C39BBFd4033c0d3289C4515275102423681')
+          : '0xD8634C39BBFd4033c0d3289C4515275102423681',
+        channel: channelAddr,
+      },
+      [PushAPI.payloads.IDENTITY_TYPE.MINIMAL]: {
+        signer,
+        env,
+        type: PushAPI.payloads.NOTIFICATION_TYPE.TARGETTED,
+        identityType: PushAPI.payloads.IDENTITY_TYPE.MINIMAL,
+        notification: {
+          title: `[SDK-TEST] notification TITLE: ${timestamp}`,
+          body: `[sdk-test] notification BODY ${timestamp}`,
+        },
+        payload: {
+          title: `[sdk-test] payload title ${timestamp}`,
+          body: `type:${PushAPI.payloads.NOTIFICATION_TYPE.TARGETTED} identity:${PushAPI.payloads.IDENTITY_TYPE.MINIMAL}`,
+          cta: '',
+          img: '',
+        },
+        recipients: isCAIP
+          ? getCAIPAddress(env, '0xD8634C39BBFd4033c0d3289C4515275102423681')
+          : '0xD8634C39BBFd4033c0d3289C4515275102423681',
+        channel: channelAddr,
+      },
+      [PushAPI.payloads.IDENTITY_TYPE.SUBGRAPH]: {
+        signer,
+        env,
+        type: PushAPI.payloads.NOTIFICATION_TYPE.TARGETTED,
+        identityType: PushAPI.payloads.IDENTITY_TYPE.SUBGRAPH,
+        graph: {
+          id: 'aiswaryawalter/graph-poc-sample',
+          counter: 3,
+        },
+        recipients: isCAIP
+          ? getCAIPAddress(env, '0xD8634C39BBFd4033c0d3289C4515275102423681')
+          : '0xD8634C39BBFd4033c0d3289C4515275102423681',
+        channel: channelAddr,
+      },
+    },
+    [PushAPI.payloads.NOTIFICATION_TYPE.SUBSET]: {
+      [PushAPI.payloads.IDENTITY_TYPE.DIRECT_PAYLOAD]: {
+        signer,
+        env,
+        type: PushAPI.payloads.NOTIFICATION_TYPE.SUBSET,
+        identityType: PushAPI.payloads.IDENTITY_TYPE.DIRECT_PAYLOAD,
+        notification: {
+          title: `[SDK-TEST] notification TITLE: ${timestamp}`,
+          body: `[sdk-test] notification BODY ${timestamp}`,
+        },
+        payload: {
+          title: `[sdk-test] payload title ${timestamp}`,
+          body: `type:${PushAPI.payloads.NOTIFICATION_TYPE.SUBSET} identity:${PushAPI.payloads.IDENTITY_TYPE.DIRECT_PAYLOAD}`,
+          cta: '',
+          img: '',
+        },
+        recipients: isCAIP
+          ? [
+              '0xCdBE6D076e05c5875D90fa35cc85694E1EAFBBd1',
+              '0xD8634C39BBFd4033c0d3289C4515275102423681',
+            ].map((addr) => getCAIPAddress(env, addr))
+          : [
+              '0xCdBE6D076e05c5875D90fa35cc85694E1EAFBBd1',
+              '0xD8634C39BBFd4033c0d3289C4515275102423681',
+            ],
+        channel: channelAddr,
+      },
+      [PushAPI.payloads.IDENTITY_TYPE.IPFS]: {
+        signer,
+        env,
+        type: PushAPI.payloads.NOTIFICATION_TYPE.SUBSET,
+        identityType: PushAPI.payloads.IDENTITY_TYPE.IPFS,
+        ipfsHash: 'bafkreicuttr5gpbyzyn6cyapxctlr7dk2g6fnydqxy6lps424mcjcn73we', // from BE devtools
+        recipients: isCAIP
+          ? [
+              '0xCdBE6D076e05c5875D90fa35cc85694E1EAFBBd1',
+              '0xD8634C39BBFd4033c0d3289C4515275102423681',
+            ].map((addr) => getCAIPAddress(env, addr))
+          : [
+              '0xCdBE6D076e05c5875D90fa35cc85694E1EAFBBd1',
+              '0xD8634C39BBFd4033c0d3289C4515275102423681',
+            ],
+        channel: channelAddr,
+      },
+      [PushAPI.payloads.IDENTITY_TYPE.MINIMAL]: {
+        signer,
+        env,
+        type: PushAPI.payloads.NOTIFICATION_TYPE.SUBSET,
+        identityType: PushAPI.payloads.IDENTITY_TYPE.MINIMAL,
+        notification: {
+          title: `[SDK-TEST] notification TITLE: ${timestamp}`,
+          body: `[sdk-test] notification BODY ${timestamp}`,
+        },
+        payload: {
+          title: `[sdk-test] payload title ${timestamp}`,
+          body: `type:${PushAPI.payloads.NOTIFICATION_TYPE.SUBSET} identity:${PushAPI.payloads.IDENTITY_TYPE.MINIMAL}`,
+          cta: '',
+          img: '',
+        },
+        recipients: isCAIP
+          ? [
+              '0xCdBE6D076e05c5875D90fa35cc85694E1EAFBBd1',
+              '0xD8634C39BBFd4033c0d3289C4515275102423681',
+            ].map((addr) => getCAIPAddress(env, addr))
+          : [
+              '0xCdBE6D076e05c5875D90fa35cc85694E1EAFBBd1',
+              '0xD8634C39BBFd4033c0d3289C4515275102423681',
+            ],
+        channel: channelAddr,
+      },
+      [PushAPI.payloads.IDENTITY_TYPE.SUBGRAPH]: {
+        signer,
+        env,
+        type: PushAPI.payloads.NOTIFICATION_TYPE.SUBSET,
+        identityType: PushAPI.payloads.IDENTITY_TYPE.SUBGRAPH,
+        graph: {
+          id: 'aiswaryawalter/graph-poc-sample',
+          counter: 3,
+        },
+        recipients: isCAIP
+          ? [
+              '0xCdBE6D076e05c5875D90fa35cc85694E1EAFBBd1',
+              '0xD8634C39BBFd4033c0d3289C4515275102423681',
+            ].map((addr) => getCAIPAddress(env, addr))
+          : [
+              '0xCdBE6D076e05c5875D90fa35cc85694E1EAFBBd1',
+              '0xD8634C39BBFd4033c0d3289C4515275102423681',
+            ],
+        channel: channelAddr,
+      },
+    },
+    [PushAPI.payloads.NOTIFICATION_TYPE.BROADCAST]: {
+      [PushAPI.payloads.IDENTITY_TYPE.DIRECT_PAYLOAD]: {
+        signer,
+        env,
+        type: PushAPI.payloads.NOTIFICATION_TYPE.BROADCAST,
+        identityType: PushAPI.payloads.IDENTITY_TYPE.DIRECT_PAYLOAD,
+        notification: {
+          title: `[SDK-TEST] notification TITLE: ${timestamp}`,
+          body: `[sdk-test] notification BODY ${timestamp}`,
+        },
+        payload: {
+          title: `[sdk-test] payload title ${timestamp}`,
+          body: `type:${PushAPI.payloads.NOTIFICATION_TYPE.BROADCAST} identity:${PushAPI.payloads.IDENTITY_TYPE.DIRECT_PAYLOAD}`,
+          cta: '',
+          img: '',
+        },
+        channel: channelAddr,
+      },
+      [PushAPI.payloads.IDENTITY_TYPE.IPFS]: {
+        signer,
+        env,
+        type: PushAPI.payloads.NOTIFICATION_TYPE.BROADCAST,
+        identityType: PushAPI.payloads.IDENTITY_TYPE.IPFS,
+        ipfsHash: 'bafkreicuttr5gpbyzyn6cyapxctlr7dk2g6fnydqxy6lps424mcjcn73we', // from BE devtools
+        channel: channelAddr,
+      },
+      [PushAPI.payloads.IDENTITY_TYPE.MINIMAL]: {
+        signer,
+        env,
+        type: PushAPI.payloads.NOTIFICATION_TYPE.BROADCAST,
+        identityType: PushAPI.payloads.IDENTITY_TYPE.MINIMAL,
+        notification: {
+          title: `[SDK-TEST] notification TITLE: ${timestamp}`,
+          body: `[sdk-test] notification BODY ${timestamp}`,
+        },
+        payload: {
+          title: `[sdk-test] payload title ${timestamp}`,
+          body: `type:${PushAPI.payloads.NOTIFICATION_TYPE.BROADCAST} identity:${PushAPI.payloads.IDENTITY_TYPE.MINIMAL}`,
+          cta: '',
+          img: '',
+        },
+        channel: channelAddr,
+      },
+      [PushAPI.payloads.IDENTITY_TYPE.SUBGRAPH]: {
+        signer,
+        env,
+        type: PushAPI.payloads.NOTIFICATION_TYPE.BROADCAST,
+        identityType: PushAPI.payloads.IDENTITY_TYPE.SUBGRAPH,
+        graph: {
+          id: 'aiswaryawalter/graph-poc-sample',
+          counter: 3,
+        },
+        channel: channelAddr,
+      },
+    },
+  };
+};
+
+const NOTIFICATION_TYPE_OPTIONS = [
+  { label: 'TARGETTED', value: '3' },
+  { label: 'SUBSET', value: '4' },
+  { label: 'BROADCAST', value: '1' },
+];
+
+const IDENTITY_TYPE_OPTIONS = [
+  { label: 'MINIMAL', value: '0' },
+  { label: 'IPFS', value: '1' },
+  { label: 'DIRECT_PAYLOAD', value: '2' },
+  { label: 'SUBGRAPH', value: '3' },
+];
+
+const PayloadsTest = () => {
+  const { library, account, chainId } = useContext<any>(Web3Context);
+  const { env, isCAIP } = useContext<any>(EnvContext);
+  const [isLoading, setLoading] = useState(false);
+  const [theme, setTheme] = useState('dark');
+
+  const [apiStatus, setApiStatus] = useState<any>();
+
+  const [notificationTypeOption, setNotificationTypeOption] = useState('3');
+  const [identityTypeOption, setIdentityTypeOption] = useState('2');
+
+  // const PK = 'd5797b255933f72a6a084fcfc0f5f4881defee8c1ae387197805647d0b10a8a0'; // PKey, server code
+  // const Pkey = `0x${PK}`;
+  // const testChannelAddress = '0xD8634C39BBFd4033c0d3289C4515275102423681'; // server code
+  const testChannelAddress = account; // UI
+
+  // for server code
+  // const signer = new ethers.Wallet(Pkey);
+
+  // for UI code
+  const signer = library.getSigner(account);
+
+  const OPTIONS_MATRIX: optionsMatrixType = getOptionsMatrix({
+    signer,
+    channel: testChannelAddress,
+    env,
+    isCAIP,
+    timestamp: JSON.stringify(Date.now()),
+  });
+
+  const onChangeNotificationType = (e: any) => {
+    setApiStatus('');
+    setNotificationTypeOption(e.target.value);
+  };
+
+  const onChangeIdentityType = (e: any) => {
+    setApiStatus('');
+    setIdentityTypeOption(e.target.value);
+  };
+
+  const toggleTheme = () => {
+    setTheme((lastTheme) => {
+      return lastTheme === 'dark' ? 'light' : 'dark';
+    });
+  };
+
+  const triggerNotification = async () => {
+    setApiStatus('');
+    setLoading(true);
+    try {
+      const sdkInput =
+        OPTIONS_MATRIX[notificationTypeOption][identityTypeOption];
+
+      console.log('sdkInput: ', sdkInput);
+
+      const apiResponse = await PushAPI.payloads.sendNotification(sdkInput);
+      console.log('apiResponse: ', apiResponse);
+      setApiStatus({
+        status: apiResponse?.status,
+        data: apiResponse?.config?.data,
+      });
+    } catch (e) {
+      console.error('sendNotification error: \n', e);
+      setApiStatus(JSON.stringify(e));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const renderInputOption = () => {
+    const optionsObject =
+      OPTIONS_MATRIX[notificationTypeOption.toString()][
+        identityTypeOption.toString()
+      ];
+
+    if (optionsObject) {
+      const { signer, ...renderInputOption } = optionsObject;
+
+      return (
+        <CodeFormatter>
+          {JSON.stringify({ ...renderInputOption, signer: {} }, null, 4)}
+        </CodeFormatter>
+      );
+    }
+
+    return null;
+  };
+
+  return (
+    <div>
+      <Header>
+        <h2>Payloads Test page</h2>
+        <ThemeSelector>
+          {theme === 'dark' ? (
+            <DarkIcon title="Dark" onClick={toggleTheme} />
+          ) : (
+            <LightIcon title="Light" onClick={toggleTheme} />
+          )}
+        </ThemeSelector>
+      </Header>
+
+      <p>
+        IMPORTANT: Will only work if the channel address you are providing
+        exists in the ENV you are running the app!!
+      </p>
+
+      <Loader show={isLoading} />
+
+      <Section theme={theme}>
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            flexDirection: 'column',
+            marginBottom: 16,
+          }}
+        >
+          <p style={{ color: '#b57f38' }}>
+            Please choose both the options below and hit "send notification"
+            button
+          </p>
+
+          <div style={{ display: 'flex', gap: 20 }}>
+            <Dropdown
+              style={{ color: 'green' }}
+              width={200}
+              label="NOTIFICATION TYPE"
+              options={NOTIFICATION_TYPE_OPTIONS}
+              value={notificationTypeOption}
+              onChange={onChangeNotificationType}
+            />
+
+            <Dropdown
+              style={{ color: 'green' }}
+              width={200}
+              label="IDENTITY TYPE"
+              options={IDENTITY_TYPE_OPTIONS}
+              value={identityTypeOption}
+              onChange={onChangeIdentityType}
+            />
+          </div>
+
+          <div>{renderInputOption()}</div>
+
+          <SectionButton
+            style={{ width: 400 }}
+            onClick={() => triggerNotification()}
+          >
+            send notification
+          </SectionButton>
+          {apiStatus ? (
+            <APIFeedback
+              status={apiStatus?.status === 204 ? 'success' : 'error'}
+            >
+              {JSON.stringify(apiStatus)}
+            </APIFeedback>
+          ) : null}
+        </div>
+      </Section>
+    </div>
+  );
+};
+
+export default PayloadsTest;
diff --git a/packages/examples/sdk-frontend-react/src/app/SecretNotificationsTest.tsx b/packages/examples/sdk-frontend-react/src/app/SecretNotificationsTest.tsx
new file mode 100644
index 000000000..39cfbcdc6
--- /dev/null
+++ b/packages/examples/sdk-frontend-react/src/app/SecretNotificationsTest.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+const SecretNotificationsTest = () => {
+  return (
+    <div>
+      <h2>Secret Notifications Test page</h2>
+    </div>
+  );
+};
+
+export default SecretNotificationsTest;
diff --git a/packages/demoreact/src/app/SocketTest.tsx b/packages/examples/sdk-frontend-react/src/app/SocketTest.tsx
similarity index 51%
rename from packages/demoreact/src/app/SocketTest.tsx
rename to packages/examples/sdk-frontend-react/src/app/SocketTest.tsx
index eef4fb6a5..800299607 100644
--- a/packages/demoreact/src/app/SocketTest.tsx
+++ b/packages/examples/sdk-frontend-react/src/app/SocketTest.tsx
@@ -39,21 +39,21 @@ const Connection = styled.span`
   }
 `;
 
-const SocketTest = () => {  
+const SocketTest = () => {
   const [isLoading, setLoading] = useState(false);
   const [theme, setTheme] = useState('dark');
-  
+
   const {
     epnsSDKSocket,
     feedsSinceLastConnection,
     isSDKSocketConnected,
-    lastConnectionTimestamp
+    lastConnectionTimestamp,
   } = useContext<any>(SocketContext);
 
   const toggleTheme = () => {
-    setTheme(lastTheme => {
-      return lastTheme === 'dark' ? 'light' : 'dark'
-    })
+    setTheme((lastTheme) => {
+      return lastTheme === 'dark' ? 'light' : 'dark';
+    });
   };
 
   const toggleSocketConnection = () => {
@@ -62,34 +62,47 @@ const SocketTest = () => {
     } else {
       epnsSDKSocket?.disconnect();
     }
-  };  
+  };
 
   return (
-      <div>
-        <Header>
-          <h2>Socket Test page</h2>
-          
-          <ThemeSelector>
-            {theme === 'dark' ? <DarkIcon title="Dark" onClick={toggleTheme}/> : <LightIcon title="Light" onClick={toggleTheme}/>}
-          </ThemeSelector>
-        </Header>
-                
-        <TabButtons>
-          <SectionButton onClick={toggleSocketConnection}>{isSDKSocketConnected ? 'Disconnect Socket' : 'Connect Socket'}</SectionButton>
-          <Connection className={isSDKSocketConnected ? 'connected' : 'disconnected'} />
-        </TabButtons>
-
-        <p>{lastConnectionTimestamp ? `Last connected at: ${lastConnectionTimestamp}`: null}</p>
-
-        <Loader show={isLoading} />
-
-        <Section theme={theme}>
-          <p style={{ color: 'green' }}>Socket feeds:</p>
-          <pre style={{ color: 'green' }}>{JSON.stringify(feedsSinceLastConnection, null, 4)}</pre>
-        </Section>
-
-      </div>
+    <div>
+      <Header>
+        <h2>Socket Test page</h2>
+
+        <ThemeSelector>
+          {theme === 'dark' ? (
+            <DarkIcon title="Dark" onClick={toggleTheme} />
+          ) : (
+            <LightIcon title="Light" onClick={toggleTheme} />
+          )}
+        </ThemeSelector>
+      </Header>
+
+      <TabButtons>
+        <SectionButton onClick={toggleSocketConnection}>
+          {isSDKSocketConnected ? 'Disconnect Socket' : 'Connect Socket'}
+        </SectionButton>
+        <Connection
+          className={isSDKSocketConnected ? 'connected' : 'disconnected'}
+        />
+      </TabButtons>
+
+      <p>
+        {lastConnectionTimestamp
+          ? `Last connected at: ${lastConnectionTimestamp}`
+          : null}
+      </p>
+
+      <Loader show={isLoading} />
+
+      <Section theme={theme}>
+        <p style={{ color: 'green' }}>Socket feeds:</p>
+        <pre style={{ color: 'green' }}>
+          {JSON.stringify(feedsSinceLastConnection, null, 4)}
+        </pre>
+      </Section>
+    </div>
   );
-}
+};
 
-export default SocketTest;
\ No newline at end of file
+export default SocketTest;
diff --git a/packages/demoreact/src/app/SpaceTest/AddListenersToSpaceTest.tsx b/packages/examples/sdk-frontend-react/src/app/SpaceTest/AddListenersToSpaceTest.tsx
similarity index 72%
rename from packages/demoreact/src/app/SpaceTest/AddListenersToSpaceTest.tsx
rename to packages/examples/sdk-frontend-react/src/app/SpaceTest/AddListenersToSpaceTest.tsx
index 7afbaa113..7de8ebd4d 100644
--- a/packages/demoreact/src/app/SpaceTest/AddListenersToSpaceTest.tsx
+++ b/packages/examples/sdk-frontend-react/src/app/SpaceTest/AddListenersToSpaceTest.tsx
@@ -42,7 +42,6 @@ const AddListenersToSpaceTest = () => {
         signer: librarySigner,
       });
       setSendResponse(response);
-
     } catch (e) {
       console.error(e);
     } finally {
@@ -58,36 +57,38 @@ const AddListenersToSpaceTest = () => {
 
       <Section>
         <SectionItem>
-          <SectionButton onClick={addListenersToSpaceTest}>Add Listeners to Space</SectionButton>
+          <SectionButton onClick={addListenersToSpaceTest}>
+            Add Listeners to Space
+          </SectionButton>
         </SectionItem>
-         <SectionItem>
-              <label>spaceId</label>
-              <input
-                type="text"
-                onChange={updateSpaceId}
-                value={spaceId}
-                style={{ width: 400, height: 30 }}
-              />
+        <SectionItem>
+          <label>spaceId</label>
+          <input
+            type="text"
+            onChange={updateSpaceId}
+            value={spaceId}
+            style={{ width: 400, height: 30 }}
+          />
         </SectionItem>
-         <SectionItem>
-              <label>listeners (comma separated)</label>
-              <input
-                type="text"
-                onChange={updateListenerId}
-                value={listenerAddress}
-                style={{ width: 400, height: 30 }}
-              />
+        <SectionItem>
+          <label>listeners (comma separated)</label>
+          <input
+            type="text"
+            onChange={updateListenerId}
+            value={listenerAddress}
+            style={{ width: 400, height: 30 }}
+          />
         </SectionItem>
         <SectionItem style={{ marginTop: 20 }}>
-              <label>Account</label>
-              <input
-                type="text"
-                onChange={updateAccount}
-                value={account}
-                style={{ width: 400, height: 30 }}
-              />
+          <label>Account</label>
+          <input
+            type="text"
+            onChange={updateAccount}
+            value={account}
+            style={{ width: 400, height: 30 }}
+          />
         </SectionItem>
-         <SectionItem>
+        <SectionItem>
           <div>
             {sendResponse ? (
               <CodeFormatter>
diff --git a/packages/demoreact/src/app/SpaceTest/AddSpeakersToSpaceTest.tsx b/packages/examples/sdk-frontend-react/src/app/SpaceTest/AddSpeakersToSpaceTest.tsx
similarity index 71%
rename from packages/demoreact/src/app/SpaceTest/AddSpeakersToSpaceTest.tsx
rename to packages/examples/sdk-frontend-react/src/app/SpaceTest/AddSpeakersToSpaceTest.tsx
index 2b95f9c6b..27b09172b 100644
--- a/packages/demoreact/src/app/SpaceTest/AddSpeakersToSpaceTest.tsx
+++ b/packages/examples/sdk-frontend-react/src/app/SpaceTest/AddSpeakersToSpaceTest.tsx
@@ -42,7 +42,6 @@ const AddSpeakersToSpaceTest = () => {
         signer: librarySigner,
       });
       setSendResponse(response);
-
     } catch (e) {
       console.error(e);
     } finally {
@@ -59,36 +58,38 @@ const AddSpeakersToSpaceTest = () => {
 
       <Section>
         <SectionItem>
-          <SectionButton onClick={testAddSpeakersToSpaceTest}>Add Speakers to Space</SectionButton>
+          <SectionButton onClick={testAddSpeakersToSpaceTest}>
+            Add Speakers to Space
+          </SectionButton>
         </SectionItem>
-         <SectionItem>
-              <label>spaceId</label>
-              <input
-                type="text"
-                onChange={updateSpaceId}
-                value={spaceId}
-                style={{ width: 400, height: 30 }}
-              />
+        <SectionItem>
+          <label>spaceId</label>
+          <input
+            type="text"
+            onChange={updateSpaceId}
+            value={spaceId}
+            style={{ width: 400, height: 30 }}
+          />
         </SectionItem>
-         <SectionItem>
-              <label>speakers (comma separated)</label>
-              <input
-                type="text"
-                onChange={updateSpeakerId}
-                value={speakerAddress}
-                style={{ width: 400, height: 30 }}
-              />
+        <SectionItem>
+          <label>speakers (comma separated)</label>
+          <input
+            type="text"
+            onChange={updateSpeakerId}
+            value={speakerAddress}
+            style={{ width: 400, height: 30 }}
+          />
         </SectionItem>
         <SectionItem style={{ marginTop: 20 }}>
-              <label>Account</label>
-              <input
-                type="text"
-                onChange={updateAccount}
-                value={account}
-                style={{ width: 400, height: 30 }}
-              />
+          <label>Account</label>
+          <input
+            type="text"
+            onChange={updateAccount}
+            value={account}
+            style={{ width: 400, height: 30 }}
+          />
         </SectionItem>
-         <SectionItem>
+        <SectionItem>
           <div>
             {sendResponse ? (
               <CodeFormatter>
diff --git a/packages/demoreact/src/app/SpaceTest/ApproveSpaceRequestTest.tsx b/packages/examples/sdk-frontend-react/src/app/SpaceTest/ApproveSpaceRequestTest.tsx
similarity index 98%
rename from packages/demoreact/src/app/SpaceTest/ApproveSpaceRequestTest.tsx
rename to packages/examples/sdk-frontend-react/src/app/SpaceTest/ApproveSpaceRequestTest.tsx
index d154d0b35..6f3eed0ed 100644
--- a/packages/demoreact/src/app/SpaceTest/ApproveSpaceRequestTest.tsx
+++ b/packages/examples/sdk-frontend-react/src/app/SpaceTest/ApproveSpaceRequestTest.tsx
@@ -35,7 +35,7 @@ const ApproveRequestTest = () => {
       const response = await PushAPI.space.approve({
         status: 'Approved',
         account: isCAIP ? walletToPCAIP10(account) : account,
-        signer: librarySigner,        
+        signer: librarySigner,
         senderAddress,
         env,
       });
diff --git a/packages/demoreact/src/app/SpaceTest/CreateSpaceTest.tsx b/packages/examples/sdk-frontend-react/src/app/SpaceTest/CreateSpaceTest.tsx
similarity index 97%
rename from packages/demoreact/src/app/SpaceTest/CreateSpaceTest.tsx
rename to packages/examples/sdk-frontend-react/src/app/SpaceTest/CreateSpaceTest.tsx
index 1ce5d4925..889a97b65 100644
--- a/packages/demoreact/src/app/SpaceTest/CreateSpaceTest.tsx
+++ b/packages/examples/sdk-frontend-react/src/app/SpaceTest/CreateSpaceTest.tsx
@@ -30,7 +30,6 @@ const CreateSpaceTest = () => {
   const [scheduleEnd, setScheduleEnd] = useState<string>();
   const [account, setAccount] = useState<string>(acc);
 
-
   const [sendResponse, setSendResponse] = useState<any>('');
 
   const updateSpaceName = (e: React.SyntheticEvent<HTMLElement>) => {
@@ -100,20 +99,21 @@ const CreateSpaceTest = () => {
         listeners: members.split(','),
         spaceImage,
         speakers: admins.split(','),
-        isPublic: (isPublic === "true"),
+        isPublic: isPublic === 'true',
         contractAddressNFT,
         numberOfNFTs: numberOfNFTs != null ? Number(numberOfNFTs) : undefined,
         contractAddressERC20,
-        numberOfERC20: numberOfERC20 != null ? Number(numberOfERC20) : undefined,
+        numberOfERC20:
+          numberOfERC20 != null ? Number(numberOfERC20) : undefined,
         signer: librarySigner,
         env,
         meta: meta,
-        scheduleAt:  new Date(scheduleAt) ,
-        scheduleEnd: scheduleEnd ? new Date(scheduleEnd) : null
+        scheduleAt: new Date(scheduleAt),
+        scheduleEnd: scheduleEnd ? new Date(scheduleEnd) : null,
       });
 
       setSendResponse(response);
-    } catch (e:any) {
+    } catch (e: any) {
       console.error(e.message);
     } finally {
       setLoading(false);
@@ -150,7 +150,6 @@ const CreateSpaceTest = () => {
               />
             </SectionItem>
 
-
             <SectionItem>
               <label>members</label>
               <input
@@ -161,7 +160,6 @@ const CreateSpaceTest = () => {
               />
             </SectionItem>
 
-
             <SectionItem style={{ marginTop: 20 }}>
               <label>spaceImage</label>
               <input
@@ -202,7 +200,6 @@ const CreateSpaceTest = () => {
               />
             </SectionItem>
 
-
             <SectionItem style={{ marginTop: 20 }}>
               <label>numberOfNFTs</label>
               <input
@@ -263,7 +260,6 @@ const CreateSpaceTest = () => {
               />
             </SectionItem>
 
-
             <SectionItem style={{ marginTop: 20 }}>
               <label>scheduleEnd</label>
               <input
diff --git a/packages/demoreact/src/app/SpaceTest/GetSpaceInfoTest.tsx b/packages/examples/sdk-frontend-react/src/app/SpaceTest/GetSpaceInfoTest.tsx
similarity index 85%
rename from packages/demoreact/src/app/SpaceTest/GetSpaceInfoTest.tsx
rename to packages/examples/sdk-frontend-react/src/app/SpaceTest/GetSpaceInfoTest.tsx
index 4306a2b14..0d5609779 100644
--- a/packages/demoreact/src/app/SpaceTest/GetSpaceInfoTest.tsx
+++ b/packages/examples/sdk-frontend-react/src/app/SpaceTest/GetSpaceInfoTest.tsx
@@ -30,7 +30,6 @@ const GetSpaceInfoTest = () => {
         env,
       });
       setSendResponse(response);
-
     } catch (e) {
       console.error(e);
     } finally {
@@ -38,8 +37,6 @@ const GetSpaceInfoTest = () => {
     }
   };
 
-
-
   return (
     <div>
       <SpaceTest />
@@ -51,15 +48,15 @@ const GetSpaceInfoTest = () => {
         <SectionItem>
           <SectionButton onClick={testGetSpace}>get space data</SectionButton>
         </SectionItem>
-         <SectionItem>
-              <label>spaceId</label>
-              <input
-                type="text"
-                onChange={updateSpaceId}
-                value={spaceId}
-                style={{ width: 400, height: 30 }}
-              />
-            </SectionItem>
+        <SectionItem>
+          <label>spaceId</label>
+          <input
+            type="text"
+            onChange={updateSpaceId}
+            value={spaceId}
+            style={{ width: 400, height: 30 }}
+          />
+        </SectionItem>
 
         <SectionItem>
           <div>
diff --git a/packages/demoreact/src/app/SpaceTest/GetSpaceTest.tsx b/packages/examples/sdk-frontend-react/src/app/SpaceTest/GetSpaceTest.tsx
similarity index 83%
rename from packages/demoreact/src/app/SpaceTest/GetSpaceTest.tsx
rename to packages/examples/sdk-frontend-react/src/app/SpaceTest/GetSpaceTest.tsx
index cb331c130..4de7a836f 100644
--- a/packages/demoreact/src/app/SpaceTest/GetSpaceTest.tsx
+++ b/packages/examples/sdk-frontend-react/src/app/SpaceTest/GetSpaceTest.tsx
@@ -30,7 +30,6 @@ const GetSpaceTest = () => {
         env,
       });
       setSendResponse(response);
-
     } catch (e) {
       console.error(e);
     } finally {
@@ -38,8 +37,6 @@ const GetSpaceTest = () => {
     }
   };
 
-
-
   return (
     <div>
       <SpaceTest />
@@ -51,17 +48,17 @@ const GetSpaceTest = () => {
         <SectionItem>
           <SectionButton onClick={testGetSpace}>get space data</SectionButton>
         </SectionItem>
-         <SectionItem>
-              <label>spaceId</label>
-              <input
-                type="text"
-                onChange={updateSpaceId}
-                value={spaceId}
-                style={{ width: 400, height: 30 }}
-              />
-            </SectionItem>
+        <SectionItem>
+          <label>spaceId</label>
+          <input
+            type="text"
+            onChange={updateSpaceId}
+            value={spaceId}
+            style={{ width: 400, height: 30 }}
+          />
+        </SectionItem>
 
-          <SectionItem>
+        <SectionItem>
           <div>
             {sendResponse ? (
               <CodeFormatter>
diff --git a/packages/demoreact/src/app/SpaceTest/GetSpacesRequestsTest.tsx b/packages/examples/sdk-frontend-react/src/app/SpaceTest/GetSpacesRequestsTest.tsx
similarity index 96%
rename from packages/demoreact/src/app/SpaceTest/GetSpacesRequestsTest.tsx
rename to packages/examples/sdk-frontend-react/src/app/SpaceTest/GetSpacesRequestsTest.tsx
index f046e9fab..2223993d4 100644
--- a/packages/demoreact/src/app/SpaceTest/GetSpacesRequestsTest.tsx
+++ b/packages/examples/sdk-frontend-react/src/app/SpaceTest/GetSpacesRequestsTest.tsx
@@ -14,7 +14,8 @@ const GetSpacesRequestsTest = () => {
   const { account: acc, library } = useContext<any>(Web3Context);
   const { env } = useContext<any>(EnvContext);
   const [isLoading, setLoading] = useState(false);
-  const [getSpacesReqeustsResponse, setSpacesReqeustsResponse] = useState<any>('');
+  const [getSpacesReqeustsResponse, setSpacesReqeustsResponse] =
+    useState<any>('');
   const [toDecrypt, setToDecrypt] = useState<boolean>(false);
   const [account, setAccount] = useState<string>(acc);
   const [page, setPage] = useState<number>(1);
@@ -112,7 +113,9 @@ const GetSpacesRequestsTest = () => {
             <label>Decrypt response</label>
           </SectionItem>
           <SectionItem style={{ marginTop: 20 }}>
-            <SectionButton onClick={testGetSpaceRequests}>get spaces</SectionButton>
+            <SectionButton onClick={testGetSpaceRequests}>
+              get spaces
+            </SectionButton>
           </SectionItem>
         </div>
         <SectionItem>
diff --git a/packages/demoreact/src/app/SpaceTest/GetSpacesTest.tsx b/packages/examples/sdk-frontend-react/src/app/SpaceTest/GetSpacesTest.tsx
similarity index 100%
rename from packages/demoreact/src/app/SpaceTest/GetSpacesTest.tsx
rename to packages/examples/sdk-frontend-react/src/app/SpaceTest/GetSpacesTest.tsx
diff --git a/packages/demoreact/src/app/SpaceTest/GetSpacesTrendingTest.tsx b/packages/examples/sdk-frontend-react/src/app/SpaceTest/GetSpacesTrendingTest.tsx
similarity index 95%
rename from packages/demoreact/src/app/SpaceTest/GetSpacesTrendingTest.tsx
rename to packages/examples/sdk-frontend-react/src/app/SpaceTest/GetSpacesTrendingTest.tsx
index 95bccb3e5..fecb063df 100644
--- a/packages/demoreact/src/app/SpaceTest/GetSpacesTrendingTest.tsx
+++ b/packages/examples/sdk-frontend-react/src/app/SpaceTest/GetSpacesTrendingTest.tsx
@@ -13,12 +13,12 @@ import SpaceTest from './SpaceTest';
 const GetSpacesTrendingTest = () => {
   const { env } = useContext<any>(EnvContext);
   const [isLoading, setLoading] = useState(false);
-  const [getSpacesTrendingResponse, setGetSpacesTrendingResponse] = useState<any>('');
+  const [getSpacesTrendingResponse, setGetSpacesTrendingResponse] =
+    useState<any>('');
   const [toDecrypt, setToDecrypt] = useState<boolean>(false);
   const [page, setPage] = useState<number>(1);
   const [limit, setLimit] = useState<number>(10);
 
-
   const updatePage = (e: React.SyntheticEvent<HTMLElement>) => {
     setPage(parseInt((e.target as HTMLInputElement).value));
   };
@@ -85,7 +85,9 @@ const GetSpacesTrendingTest = () => {
             <label>Decrypt response</label>
           </SectionItem>
           <SectionItem style={{ marginTop: 20 }}>
-            <SectionButton onClick={testGetSpacesTrending}>get spaces</SectionButton>
+            <SectionButton onClick={testGetSpacesTrending}>
+              get spaces
+            </SectionButton>
           </SectionItem>
         </div>
         <SectionItem>
diff --git a/packages/demoreact/src/app/SpaceTest/RemoveListenersFromSpaceTest.tsx b/packages/examples/sdk-frontend-react/src/app/SpaceTest/RemoveListenersFromSpaceTest.tsx
similarity index 73%
rename from packages/demoreact/src/app/SpaceTest/RemoveListenersFromSpaceTest.tsx
rename to packages/examples/sdk-frontend-react/src/app/SpaceTest/RemoveListenersFromSpaceTest.tsx
index fe0b3b4c1..3e9848515 100644
--- a/packages/demoreact/src/app/SpaceTest/RemoveListenersFromSpaceTest.tsx
+++ b/packages/examples/sdk-frontend-react/src/app/SpaceTest/RemoveListenersFromSpaceTest.tsx
@@ -43,7 +43,6 @@ const RemoveListenersFromSpaceTest = () => {
         signer: librarySigner,
       });
       setSendResponse(response);
-
     } catch (e) {
       console.error(e);
     } finally {
@@ -51,8 +50,6 @@ const RemoveListenersFromSpaceTest = () => {
     }
   };
 
-
-
   return (
     <div>
       <SpaceTest />
@@ -62,36 +59,38 @@ const RemoveListenersFromSpaceTest = () => {
 
       <Section>
         <SectionItem>
-          <SectionButton onClick={removeListenersFromSpaceTest}>Remove Listeners from Space</SectionButton>
+          <SectionButton onClick={removeListenersFromSpaceTest}>
+            Remove Listeners from Space
+          </SectionButton>
         </SectionItem>
-         <SectionItem>
-              <label>spaceId</label>
-              <input
-                type="text"
-                onChange={updateSpaceId}
-                value={spaceId}
-                style={{ width: 400, height: 30 }}
-              />
+        <SectionItem>
+          <label>spaceId</label>
+          <input
+            type="text"
+            onChange={updateSpaceId}
+            value={spaceId}
+            style={{ width: 400, height: 30 }}
+          />
         </SectionItem>
-         <SectionItem>
-              <label>listeners (comma separated)</label>
-              <input
-                type="text"
-                onChange={updateListenerId}
-                value={listenerAddress}
-                style={{ width: 400, height: 30 }}
-              />
+        <SectionItem>
+          <label>listeners (comma separated)</label>
+          <input
+            type="text"
+            onChange={updateListenerId}
+            value={listenerAddress}
+            style={{ width: 400, height: 30 }}
+          />
         </SectionItem>
         <SectionItem style={{ marginTop: 20 }}>
-              <label>Account</label>
-              <input
-                type="text"
-                onChange={updateAccount}
-                value={account}
-                style={{ width: 400, height: 30 }}
-              />
-          </SectionItem>
-         <SectionItem>
+          <label>Account</label>
+          <input
+            type="text"
+            onChange={updateAccount}
+            value={account}
+            style={{ width: 400, height: 30 }}
+          />
+        </SectionItem>
+        <SectionItem>
           <div>
             {sendResponse ? (
               <CodeFormatter>
diff --git a/packages/demoreact/src/app/SpaceTest/RemoveSpeakersFromSpaceTest.tsx b/packages/examples/sdk-frontend-react/src/app/SpaceTest/RemoveSpeakersFromSpaceTest.tsx
similarity index 69%
rename from packages/demoreact/src/app/SpaceTest/RemoveSpeakersFromSpaceTest.tsx
rename to packages/examples/sdk-frontend-react/src/app/SpaceTest/RemoveSpeakersFromSpaceTest.tsx
index 411a0f398..047741b16 100644
--- a/packages/demoreact/src/app/SpaceTest/RemoveSpeakersFromSpaceTest.tsx
+++ b/packages/examples/sdk-frontend-react/src/app/SpaceTest/RemoveSpeakersFromSpaceTest.tsx
@@ -28,7 +28,7 @@ const RemoveSpeakersFromSpaceTest = () => {
   };
 
   const updateAccount = (e: React.SyntheticEvent<HTMLElement>) => {
-      setAccount((e.target as HTMLInputElement).value);
+    setAccount((e.target as HTMLInputElement).value);
   };
 
   const removeSpeakersFromSpaceTest = async () => {
@@ -42,7 +42,6 @@ const RemoveSpeakersFromSpaceTest = () => {
         signer: librarySigner,
       });
       setSendResponse(response);
-
     } catch (e) {
       console.error(e);
     } finally {
@@ -58,36 +57,38 @@ const RemoveSpeakersFromSpaceTest = () => {
 
       <Section>
         <SectionItem>
-          <SectionButton onClick={removeSpeakersFromSpaceTest}>Remove Speakers from Space</SectionButton>
+          <SectionButton onClick={removeSpeakersFromSpaceTest}>
+            Remove Speakers from Space
+          </SectionButton>
         </SectionItem>
-         <SectionItem>
-              <label>spaceId</label>
-              <input
-                type="text"
-                onChange={updateSpaceId}
-                value={spaceId}
-                style={{ width: 400, height: 30 }}
-              />
+        <SectionItem>
+          <label>spaceId</label>
+          <input
+            type="text"
+            onChange={updateSpaceId}
+            value={spaceId}
+            style={{ width: 400, height: 30 }}
+          />
         </SectionItem>
-         <SectionItem>
-              <label>speakers (comma separated)</label>
-              <input
-                type="text"
-                onChange={updateSpeakerId}
-                value={speakerAddress}
-                style={{ width: 400, height: 30 }}
-              />
+        <SectionItem>
+          <label>speakers (comma separated)</label>
+          <input
+            type="text"
+            onChange={updateSpeakerId}
+            value={speakerAddress}
+            style={{ width: 400, height: 30 }}
+          />
         </SectionItem>
         <SectionItem style={{ marginTop: 20 }}>
-              <label>Account</label>
-              <input
-                type="text"
-                onChange={updateAccount}
-                value={account}
-                style={{ width: 400, height: 30 }}
-              />
-          </SectionItem>
-         <SectionItem>
+          <label>Account</label>
+          <input
+            type="text"
+            onChange={updateAccount}
+            value={account}
+            style={{ width: 400, height: 30 }}
+          />
+        </SectionItem>
+        <SectionItem>
           <div>
             {sendResponse ? (
               <CodeFormatter>
diff --git a/packages/demoreact/src/app/SpaceTest/SpaceTest.tsx b/packages/examples/sdk-frontend-react/src/app/SpaceTest/SpaceTest.tsx
similarity index 97%
rename from packages/demoreact/src/app/SpaceTest/SpaceTest.tsx
rename to packages/examples/sdk-frontend-react/src/app/SpaceTest/SpaceTest.tsx
index 6c35791ab..78405b5fc 100644
--- a/packages/demoreact/src/app/SpaceTest/SpaceTest.tsx
+++ b/packages/examples/sdk-frontend-react/src/app/SpaceTest/SpaceTest.tsx
@@ -1,9 +1,7 @@
 import { useState, useContext } from 'react';
 import styled from 'styled-components';
 import { Link } from 'react-router-dom';
-import {
-  Section,
-} from '../components/StyledComponents';
+import { Section } from '../components/StyledComponents';
 import Loader from '../components/Loader';
 
 const SpaceTest = () => {
diff --git a/packages/demoreact/src/app/SpaceTest/StartSpaceTest.tsx b/packages/examples/sdk-frontend-react/src/app/SpaceTest/StartSpaceTest.tsx
similarity index 72%
rename from packages/demoreact/src/app/SpaceTest/StartSpaceTest.tsx
rename to packages/examples/sdk-frontend-react/src/app/SpaceTest/StartSpaceTest.tsx
index 90364c22d..8a2f9f247 100644
--- a/packages/demoreact/src/app/SpaceTest/StartSpaceTest.tsx
+++ b/packages/examples/sdk-frontend-react/src/app/SpaceTest/StartSpaceTest.tsx
@@ -37,7 +37,6 @@ const StartSpaceTest = () => {
       //   env: env,
       // });
       // setSendResponse(response);
-
     } catch (e) {
       console.error(e);
     } finally {
@@ -54,27 +53,29 @@ const StartSpaceTest = () => {
 
       <Section>
         <SectionItem>
-          <SectionButton onClick={startSpaceTest}>Start space data</SectionButton>
+          <SectionButton onClick={startSpaceTest}>
+            Start space data
+          </SectionButton>
+        </SectionItem>
+        <SectionItem>
+          <label>spaceId</label>
+          <input
+            type="text"
+            onChange={updateSpaceId}
+            value={spaceId}
+            style={{ width: 400, height: 30 }}
+          />
         </SectionItem>
-         <SectionItem>
-              <label>spaceId</label>
-              <input
-                type="text"
-                onChange={updateSpaceId}
-                value={spaceId}
-                style={{ width: 400, height: 30 }}
-              />
-          </SectionItem>
-          <SectionItem style={{ marginTop: 20 }}>
-              <label>Account</label>
-              <input
-                type="text"
-                onChange={updateAccount}
-                value={account}
-                style={{ width: 400, height: 30 }}
-              />
-            </SectionItem>
-          <SectionItem>
+        <SectionItem style={{ marginTop: 20 }}>
+          <label>Account</label>
+          <input
+            type="text"
+            onChange={updateAccount}
+            value={account}
+            style={{ width: 400, height: 30 }}
+          />
+        </SectionItem>
+        <SectionItem>
           <div>
             {sendResponse ? (
               <CodeFormatter>
diff --git a/packages/demoreact/src/app/SpaceTest/StopSpaceTest.tsx b/packages/examples/sdk-frontend-react/src/app/SpaceTest/StopSpaceTest.tsx
similarity index 76%
rename from packages/demoreact/src/app/SpaceTest/StopSpaceTest.tsx
rename to packages/examples/sdk-frontend-react/src/app/SpaceTest/StopSpaceTest.tsx
index a2182ee3d..a8f56c718 100644
--- a/packages/demoreact/src/app/SpaceTest/StopSpaceTest.tsx
+++ b/packages/examples/sdk-frontend-react/src/app/SpaceTest/StopSpaceTest.tsx
@@ -37,7 +37,6 @@ const StopSpaceTest = () => {
       //   env: env,
       // });
       // setSendResponse(response);
-
     } catch (e) {
       console.error(e);
     } finally {
@@ -45,8 +44,6 @@ const StopSpaceTest = () => {
     }
   };
 
-
-
   return (
     <div>
       <SpaceTest />
@@ -58,25 +55,25 @@ const StopSpaceTest = () => {
         <SectionItem>
           <SectionButton onClick={stopSpaceTest}>Stop space data</SectionButton>
         </SectionItem>
-         <SectionItem>
-              <label>spaceId</label>
-              <input
-                type="text"
-                onChange={updateSpaceId}
-                value={spaceId}
-                style={{ width: 400, height: 30 }}
-              />
-          </SectionItem>
-          <SectionItem style={{ marginTop: 20 }}>
-              <label>Account</label>
-              <input
-                type="text"
-                onChange={updateAccount}
-                value={account}
-                style={{ width: 400, height: 30 }}
-              />
-          </SectionItem>
-          <SectionItem>
+        <SectionItem>
+          <label>spaceId</label>
+          <input
+            type="text"
+            onChange={updateSpaceId}
+            value={spaceId}
+            style={{ width: 400, height: 30 }}
+          />
+        </SectionItem>
+        <SectionItem style={{ marginTop: 20 }}>
+          <label>Account</label>
+          <input
+            type="text"
+            onChange={updateAccount}
+            value={account}
+            style={{ width: 400, height: 30 }}
+          />
+        </SectionItem>
+        <SectionItem>
           <div>
             {sendResponse ? (
               <CodeFormatter>
diff --git a/packages/demoreact/src/app/SpaceTest/UpdateSpaceTest.tsx b/packages/examples/sdk-frontend-react/src/app/SpaceTest/UpdateSpaceTest.tsx
similarity index 95%
rename from packages/demoreact/src/app/SpaceTest/UpdateSpaceTest.tsx
rename to packages/examples/sdk-frontend-react/src/app/SpaceTest/UpdateSpaceTest.tsx
index 319db5833..d97ff1f30 100644
--- a/packages/demoreact/src/app/SpaceTest/UpdateSpaceTest.tsx
+++ b/packages/examples/sdk-frontend-react/src/app/SpaceTest/UpdateSpaceTest.tsx
@@ -40,16 +40,15 @@ const UpdateSpaceTest = () => {
     setSpaceDescription((e.target as HTMLInputElement).value);
   };
 
-  const updateSpaceImage= (e: React.SyntheticEvent<HTMLElement>) => {
+  const updateSpaceImage = (e: React.SyntheticEvent<HTMLElement>) => {
     setSpaceImage((e.target as HTMLInputElement).value);
   };
 
-  const updateMembers= (e: React.SyntheticEvent<HTMLElement>) => {
+  const updateMembers = (e: React.SyntheticEvent<HTMLElement>) => {
     setMembers((e.target as HTMLInputElement).value);
   };
 
-
-  const updateAdmins= (e: React.SyntheticEvent<HTMLElement>) => {
+  const updateAdmins = (e: React.SyntheticEvent<HTMLElement>) => {
     setAdmins((e.target as HTMLInputElement).value);
   };
 
@@ -83,13 +82,13 @@ const UpdateSpaceTest = () => {
         speakers: admins.split(','),
         signer: librarySigner,
         env,
-        scheduleAt:  new Date(scheduleAt) ,
+        scheduleAt: new Date(scheduleAt),
         scheduleEnd: scheduleEnd ? new Date(scheduleEnd) : null,
-        status: stringToChatStatus(status)
+        status: stringToChatStatus(status),
       });
 
       setSendResponse(response);
-    } catch (e:any) {
+    } catch (e: any) {
       console.error(e.message);
     } finally {
       setLoading(false);
@@ -106,9 +105,7 @@ const UpdateSpaceTest = () => {
       <Section>
         <SectionItem>
           <div>
-
-
-          <SectionItem>
+            <SectionItem>
               <label>spaceId</label>
               <input
                 type="text"
diff --git a/packages/examples/sdk-frontend-react/src/app/SpaceUITest/CreateSpaceComponent.tsx b/packages/examples/sdk-frontend-react/src/app/SpaceUITest/CreateSpaceComponent.tsx
new file mode 100644
index 000000000..68412d68f
--- /dev/null
+++ b/packages/examples/sdk-frontend-react/src/app/SpaceUITest/CreateSpaceComponent.tsx
@@ -0,0 +1,7 @@
+import { useSpaceComponents } from './useSpaceComponents';
+
+export const CreateSpaceComponent = () => {
+  const { CreateSpaceComponent } = useSpaceComponents();
+
+  return <CreateSpaceComponent />;
+};
diff --git a/packages/demoreact/src/app/SpaceUITest/SpaceBanner.tsx b/packages/examples/sdk-frontend-react/src/app/SpaceUITest/SpaceBanner.tsx
similarity index 99%
rename from packages/demoreact/src/app/SpaceUITest/SpaceBanner.tsx
rename to packages/examples/sdk-frontend-react/src/app/SpaceUITest/SpaceBanner.tsx
index 44c50caee..73715d6b0 100644
--- a/packages/demoreact/src/app/SpaceUITest/SpaceBanner.tsx
+++ b/packages/examples/sdk-frontend-react/src/app/SpaceUITest/SpaceBanner.tsx
@@ -20,7 +20,7 @@ export const SpaceBanner = () => {
 
   const onClickHandler = (arg: string) => {
     console.log(arg);
-  }
+  };
 
   return (
     <div>
diff --git a/packages/demoreact/src/app/SpaceUITest/SpaceFeed.tsx b/packages/examples/sdk-frontend-react/src/app/SpaceUITest/SpaceFeed.tsx
similarity index 100%
rename from packages/demoreact/src/app/SpaceUITest/SpaceFeed.tsx
rename to packages/examples/sdk-frontend-react/src/app/SpaceUITest/SpaceFeed.tsx
diff --git a/packages/examples/sdk-frontend-react/src/app/SpaceUITest/SpaceInvites.tsx b/packages/examples/sdk-frontend-react/src/app/SpaceUITest/SpaceInvites.tsx
new file mode 100644
index 000000000..5816fedfc
--- /dev/null
+++ b/packages/examples/sdk-frontend-react/src/app/SpaceUITest/SpaceInvites.tsx
@@ -0,0 +1,7 @@
+import { useSpaceComponents } from './useSpaceComponents';
+
+export const SpaceInvitesComponent = () => {
+  const { SpaceInvitesComponent } = useSpaceComponents();
+
+  return <SpaceInvitesComponent />;
+};
diff --git a/packages/demoreact/src/app/SpaceUITest/SpaceUITest.tsx b/packages/examples/sdk-frontend-react/src/app/SpaceUITest/SpaceUITest.tsx
similarity index 95%
rename from packages/demoreact/src/app/SpaceUITest/SpaceUITest.tsx
rename to packages/examples/sdk-frontend-react/src/app/SpaceUITest/SpaceUITest.tsx
index ce3f9c8bf..0617a11a5 100644
--- a/packages/demoreact/src/app/SpaceUITest/SpaceUITest.tsx
+++ b/packages/examples/sdk-frontend-react/src/app/SpaceUITest/SpaceUITest.tsx
@@ -1,9 +1,7 @@
 import { useState } from 'react';
 import styled from 'styled-components';
 import { Link } from 'react-router-dom';
-import {
-  Section,
-} from '../components/StyledComponents';
+import { Section } from '../components/StyledComponents';
 import Loader from '../components/Loader';
 
 const SpaceUITest = () => {
diff --git a/packages/demoreact/src/app/SpaceUITest/SpaceWidget.tsx b/packages/examples/sdk-frontend-react/src/app/SpaceUITest/SpaceWidget.tsx
similarity index 91%
rename from packages/demoreact/src/app/SpaceUITest/SpaceWidget.tsx
rename to packages/examples/sdk-frontend-react/src/app/SpaceUITest/SpaceWidget.tsx
index 1aed3664d..e95b48b1a 100644
--- a/packages/demoreact/src/app/SpaceUITest/SpaceWidget.tsx
+++ b/packages/examples/sdk-frontend-react/src/app/SpaceUITest/SpaceWidget.tsx
@@ -1,7 +1,7 @@
-import { useState } from "react";
-import { Section, SectionItem } from "../components/StyledComponents";
-import SpaceUITest from "./SpaceUITest";
-import { useSpaceComponents } from "./useSpaceComponents"
+import { useState } from 'react';
+import { Section, SectionItem } from '../components/StyledComponents';
+import SpaceUITest from './SpaceUITest';
+import { useSpaceComponents } from './useSpaceComponents';
 
 export const SpaceWidget = () => {
   const { SpaceWidgetComponent } = useSpaceComponents();
@@ -51,7 +51,7 @@ export const SpaceWidget = () => {
     setisTimeToStartSpace((e.target as HTMLInputElement).checked);
   };
 
-  return  (
+  return (
     <div>
       <SpaceUITest />
       <h2>Space Widget Test page</h2>
@@ -92,7 +92,9 @@ export const SpaceWidget = () => {
             style={{ width: 400, height: 30 }}
           />
         </SectionItem>
-        <div style={{marginTop: '20px', marginBottom: '20px'}}>Temp Props</div>
+        <div style={{ marginTop: '20px', marginBottom: '20px' }}>
+          Temp Props
+        </div>
         <SectionItem>
           <input
             type="checkbox"
@@ -145,7 +147,7 @@ export const SpaceWidget = () => {
         zIndex={Number(zIndex)}
         share={{
           shareUrl: shareUrl,
-          shareOptions: ["Lenster", "Twitter", "CopyShareUrl"]
+          shareOptions: ['Lenster', 'Twitter', 'CopyShareUrl'],
         }}
         isHost={isHost}
         isLive={isLive}
@@ -153,6 +155,6 @@ export const SpaceWidget = () => {
         isMember={isMember}
         isTimeToStartSpace={isTimeToStartSpace}
       />
-  </div>
+    </div>
   );
-}
+};
diff --git a/packages/demoreact/src/app/SpaceUITest/index.tsx b/packages/examples/sdk-frontend-react/src/app/SpaceUITest/index.tsx
similarity index 99%
rename from packages/demoreact/src/app/SpaceUITest/index.tsx
rename to packages/examples/sdk-frontend-react/src/app/SpaceUITest/index.tsx
index 684d77cc6..1a3e57019 100644
--- a/packages/demoreact/src/app/SpaceUITest/index.tsx
+++ b/packages/examples/sdk-frontend-react/src/app/SpaceUITest/index.tsx
@@ -15,7 +15,6 @@ export interface ISpacesComponentProps {
 export const SpacesComponentProvider = ({
   children,
 }: ISpacesComponentProps) => {
-
   const customtheme = {
     titleBg: 'linear-gradient(45deg, #E165EC 0.01%, #A483ED 100%)', //not changed
     titleTextColor: '#FFFFFF',
diff --git a/packages/demoreact/src/app/SpaceUITest/useSpaceComponents.tsx b/packages/examples/sdk-frontend-react/src/app/SpaceUITest/useSpaceComponents.tsx
similarity index 100%
rename from packages/demoreact/src/app/SpaceUITest/useSpaceComponents.tsx
rename to packages/examples/sdk-frontend-react/src/app/SpaceUITest/useSpaceComponents.tsx
diff --git a/packages/demoreact/src/app/app.tsx b/packages/examples/sdk-frontend-react/src/app/app.tsx
similarity index 51%
rename from packages/demoreact/src/app/app.tsx
rename to packages/examples/sdk-frontend-react/src/app/app.tsx
index 279a49e41..4bffced3a 100644
--- a/packages/demoreact/src/app/app.tsx
+++ b/packages/examples/sdk-frontend-react/src/app/app.tsx
@@ -5,7 +5,12 @@ 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, AccountContext } 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';
@@ -59,10 +64,10 @@ import {
   SpaceBanner,
   SpaceFeed,
   CreateSpaceComponent,
-  SpaceInvitesComponent
+  SpaceInvitesComponent,
 } from './SpaceUITest';
 import { useSpaceComponents } from './SpaceUITest/useSpaceComponents';
-import * as PushAPI from "@pushprotocol/restapi";
+import * as PushAPI from '@pushprotocol/restapi';
 import { ChatWidgetTest } from './ChatWidgetTest';
 import { SpacesUI, SpacesUIProvider } from '@pushprotocol/uiweb';
 
@@ -167,8 +172,7 @@ const customtheme = {
 };
 
 const customDarkTheme = {
-  titleBg:
-    'linear-gradient(87.17deg, #EA4EE4 0%, #D23CDF 0.01%, #8B5CF6 100%)',
+  titleBg: 'linear-gradient(87.17deg, #EA4EE4 0%, #D23CDF 0.01%, #8B5CF6 100%)',
   titleTextColor: '#fff',
   bgColorPrimary: '#000',
   bgColorSecondary: '#292344',
@@ -195,7 +199,7 @@ const checkForWeb3Data = ({
 };
 
 export function App() {
-  const {account, library, active, chainId} = useWeb3React();
+  const { account, library, active, chainId } = useWeb3React();
 
   const [env, setEnv] = useState<ENV>(ENV.DEV);
   const [isCAIP, setIsCAIP] = useState(false);
@@ -239,12 +243,16 @@ export function App() {
     })();
   }, [account, env, library]);
 
-  const spaceUI = useMemo(() => new SpacesUI({
-    account: account as string,
-    signer: library?.getSigner(),
-    pgpPrivateKey: pgpPrivateKey,
-    env: env,
-  }), [account, library, pgpPrivateKey, env]);
+  const spaceUI = useMemo(
+    () =>
+      new SpacesUI({
+        account: account as string,
+        signer: library?.getSigner(),
+        pgpPrivateKey: pgpPrivateKey,
+        env: env,
+      }),
+    [account, library, pgpPrivateKey, env]
+  );
 
   return (
     <StyledApp>
@@ -278,165 +286,180 @@ export function App() {
       <hr />
       <EnvContext.Provider value={{ env, isCAIP }}>
         {checkForWeb3Data({
-          active, account, library, chainId
+          active,
+          account,
+          library,
+          chainId,
         }) ? (
-          <Web3Context.Provider value={{account, active, library, chainId}}>
+          <Web3Context.Provider value={{ account, active, library, chainId }}>
             <SocketContext.Provider value={socketData}>
-              <AccountContext.Provider value={{pgpPrivateKey, setSpaceId}}>
-              <SpacesUIProvider spaceUI={spaceUI} theme={customDarkTheme}>
-                <Routes>
-                  <Route
-                    path="/"
-                    element={
-                      <NavMenu>
-                        <Link to="/notifications" className="nav-button">
-                          NOTIFICATIONS
-                        </Link>
-                        <Link to="/secret" className="nav-button">
-                          SECRET NOTIFICATION
-                        </Link>
-                        <Link to="/channels" className="nav-button">
-                          CHANNELS
-                        </Link>
-                        <Link to="/alias" className="nav-button">
-                          ALIAS
-                        </Link>
-                        <Link to="/delegations" className="nav-button">
-                          DELEGATIONS
-                        </Link>
-                        <Link to="/payloads" className="nav-button">
-                          PAYLOADS
-                        </Link>
-                        <Link to="/socket" className="nav-button">
-                          SOCKET
-                        </Link>
-                        <Link to="/embed" className="nav-button">
-                          EMBED
-                        </Link>
-                        <Link to="/chat" className="nav-button">
-                          CHAT
-                        </Link>
-                        <Link to="/space" className="nav-button">
-                          SPACE
-                        </Link>
-                        <Link to="/spaceUI" className="nav-button">
-                          SPACE UI
-                        </Link>
-                      </NavMenu>
-                    }
-                  />
-                  <Route
-                    path="/notifications"
-                    element={<NotificationsTest />}
-                  />
-                  <Route path="/secret" element={<SecretNotificationsTest />} />
-
-                  <Route path="/channels" element={<ChannelsTest />} />
-
-                  <Route path="/alias" element={<AliasTest />} />
-
-                  <Route path="/delegations" element={<DelegationTest />} />
-
-                  <Route path="/payloads" element={<PayloadsTest />} />
-
-                  <Route path="/socket" element={<SocketTest />} />
-
-                  <Route path="/embed" element={<EmbedTest />} />
-
-                  <Route path="/chat" element={<ChatTest />} />
-                  <Route path="/space" element={<SpaceTest />} />
-
-                  <Route path="/spaceUI" element={<SpaceUITest />} />
-
-                  {/* chat method  routes */}
-                  <Route path="/get" element={<GetUserTest />} />
-                  <Route
-                    path="/getUsersBatch"
-                    element={<GetUsersBatchTest />}
-                  />
-                  <Route path="/create" element={<CreateUserTest />} />
-                  <Route
-                    path="/updateUserprofile"
-                    element={<UpdateUserProfile />}
-                  />
-                  <Route path="/authUpdate" element={<AuthUpdateUserTest />} />
-                  <Route path="/send" element={<SendMessageTest />} />
-                  <Route path="/approve" element={<ApproveRequestTest />} />
-                  <Route path="/chats" element={<GetChatsTest />} />
-                  <Route path="/hash" element={<ConversationHashTest />} />
-                  <Route path="/history" element={<HistoryTest />} />
-                  <Route path="/requests" element={<GetRequestsTest />} />
-                  <Route path="/createGroup" element={<CreateGroupTest />} />
-                  <Route path="/getGroup" element={<GetGroupTest />} />
-                  <Route
-                    path="/addMembersToGroup"
-                    element={<AddMembersToGroupTest />}
-                  />
-                  <Route
-                    path="/addAdminsToGroup"
-                    element={<AddAdminsToGroupTest />}
-                  />
-                  <Route
-                    path="/removeMembersFromGroup"
-                    element={<RemoveMembersFromGroupTest />}
-                  />
-                  <Route
-                    path="/removeAdminsFromGroup"
-                    element={<RemoveAdminsFromGroupTest />}
-                  />
-                  <Route path="/updateGroup" element={<UpdateGroupTest />} />
-
-                  {/* spaces method  routes */}
-                  <Route path="/createSpace" element={<CreateSpaceTest />} />
-                  <Route path="/updateSpace" element={<UpdateSpaceTest />} />
-                  <Route path="/getSpace" element={<GetSpaceTest />} />
-                  <Route path="/getSpaceInfo" element={<GetSpaceInfoTest />} />
-                  <Route
-                    path="/approveSpace"
-                    element={<ApproveSpaceRequestTest />}
-                  />
-                  <Route path="/startSpace" element={<StartSpaceTest />} />
-                  <Route path="/stopSpace" element={<StopSpaceTest />} />
-                  <Route
-                    path="/addSpeakersToSpace"
-                    element={<AddSpeakersToSpaceTest />}
-                  />
-                  <Route
-                    path="/addListenersToSpace"
-                    element={<AddListenersToSpaceTest />}
-                  />
-                  <Route
-                    path="/removeListenersFromSpace"
-                    element={<RemoveListenersFromSpaceTest />}
-                  />
-                  <Route
-                    path="/removeSpeakersFromSpace"
-                    element={<RemoveSpeakersFromSpaceTest />}
-                  />
-                  <Route path="/getSpaces" element={<GetSpacesTest />} />
-                  <Route
-                    path="/getSpacesRequests"
-                    element={<GetSpacesRequestsTest />}
-                  />
-                  <Route
-                    path="/getSpacesTrending"
-                    element={<GetSpacesTrendingTest />}
-                  />
-
-                  {/* spaces ui components routes */}
-                  <Route path="spaceWidget" element={<SpaceWidget />} />
-                  <Route path="spaceFeed" element={<SpaceFeed />} />
-                  <Route path="spaceBanner" element={<SpaceBanner />} />
-                  <Route path="spaceInvites" element={<SpaceInvitesComponent />} />
-                  <Route
-                    path="createSpaceUI"
-                    element={<CreateSpaceComponent />}
-                  />
-                </Routes>
-               {/* <ChatWidgetTest/> */}
-               <ChatWidgetTest/>
-                <SpaceWidgetComponent spaceId={spaceId} />
-              </SpacesUIProvider>
+              <AccountContext.Provider value={{ pgpPrivateKey, setSpaceId }}>
+                <SpacesUIProvider spaceUI={spaceUI} theme={customDarkTheme}>
+                  <Routes>
+                    <Route
+                      path="/"
+                      element={
+                        <NavMenu>
+                          <Link to="/notifications" className="nav-button">
+                            NOTIFICATIONS
+                          </Link>
+                          <Link to="/secret" className="nav-button">
+                            SECRET NOTIFICATION
+                          </Link>
+                          <Link to="/channels" className="nav-button">
+                            CHANNELS
+                          </Link>
+                          <Link to="/alias" className="nav-button">
+                            ALIAS
+                          </Link>
+                          <Link to="/delegations" className="nav-button">
+                            DELEGATIONS
+                          </Link>
+                          <Link to="/payloads" className="nav-button">
+                            PAYLOADS
+                          </Link>
+                          <Link to="/socket" className="nav-button">
+                            SOCKET
+                          </Link>
+                          <Link to="/embed" className="nav-button">
+                            EMBED
+                          </Link>
+                          <Link to="/chat" className="nav-button">
+                            CHAT
+                          </Link>
+                          <Link to="/space" className="nav-button">
+                            SPACE
+                          </Link>
+                          <Link to="/spaceUI" className="nav-button">
+                            SPACE UI
+                          </Link>
+                        </NavMenu>
+                      }
+                    />
+                    <Route
+                      path="/notifications"
+                      element={<NotificationsTest />}
+                    />
+                    <Route
+                      path="/secret"
+                      element={<SecretNotificationsTest />}
+                    />
+
+                    <Route path="/channels" element={<ChannelsTest />} />
+
+                    <Route path="/alias" element={<AliasTest />} />
+
+                    <Route path="/delegations" element={<DelegationTest />} />
+
+                    <Route path="/payloads" element={<PayloadsTest />} />
+
+                    <Route path="/socket" element={<SocketTest />} />
+
+                    <Route path="/embed" element={<EmbedTest />} />
+
+                    <Route path="/chat" element={<ChatTest />} />
+                    <Route path="/space" element={<SpaceTest />} />
+
+                    <Route path="/spaceUI" element={<SpaceUITest />} />
+
+                    {/* chat method  routes */}
+                    <Route path="/get" element={<GetUserTest />} />
+                    <Route
+                      path="/getUsersBatch"
+                      element={<GetUsersBatchTest />}
+                    />
+                    <Route path="/create" element={<CreateUserTest />} />
+                    <Route
+                      path="/updateUserprofile"
+                      element={<UpdateUserProfile />}
+                    />
+                    <Route
+                      path="/authUpdate"
+                      element={<AuthUpdateUserTest />}
+                    />
+                    <Route path="/send" element={<SendMessageTest />} />
+                    <Route path="/approve" element={<ApproveRequestTest />} />
+                    <Route path="/chats" element={<GetChatsTest />} />
+                    <Route path="/hash" element={<ConversationHashTest />} />
+                    <Route path="/history" element={<HistoryTest />} />
+                    <Route path="/requests" element={<GetRequestsTest />} />
+                    <Route path="/createGroup" element={<CreateGroupTest />} />
+                    <Route path="/getGroup" element={<GetGroupTest />} />
+                    <Route
+                      path="/addMembersToGroup"
+                      element={<AddMembersToGroupTest />}
+                    />
+                    <Route
+                      path="/addAdminsToGroup"
+                      element={<AddAdminsToGroupTest />}
+                    />
+                    <Route
+                      path="/removeMembersFromGroup"
+                      element={<RemoveMembersFromGroupTest />}
+                    />
+                    <Route
+                      path="/removeAdminsFromGroup"
+                      element={<RemoveAdminsFromGroupTest />}
+                    />
+                    <Route path="/updateGroup" element={<UpdateGroupTest />} />
+
+                    {/* spaces method  routes */}
+                    <Route path="/createSpace" element={<CreateSpaceTest />} />
+                    <Route path="/updateSpace" element={<UpdateSpaceTest />} />
+                    <Route path="/getSpace" element={<GetSpaceTest />} />
+                    <Route
+                      path="/getSpaceInfo"
+                      element={<GetSpaceInfoTest />}
+                    />
+                    <Route
+                      path="/approveSpace"
+                      element={<ApproveSpaceRequestTest />}
+                    />
+                    <Route path="/startSpace" element={<StartSpaceTest />} />
+                    <Route path="/stopSpace" element={<StopSpaceTest />} />
+                    <Route
+                      path="/addSpeakersToSpace"
+                      element={<AddSpeakersToSpaceTest />}
+                    />
+                    <Route
+                      path="/addListenersToSpace"
+                      element={<AddListenersToSpaceTest />}
+                    />
+                    <Route
+                      path="/removeListenersFromSpace"
+                      element={<RemoveListenersFromSpaceTest />}
+                    />
+                    <Route
+                      path="/removeSpeakersFromSpace"
+                      element={<RemoveSpeakersFromSpaceTest />}
+                    />
+                    <Route path="/getSpaces" element={<GetSpacesTest />} />
+                    <Route
+                      path="/getSpacesRequests"
+                      element={<GetSpacesRequestsTest />}
+                    />
+                    <Route
+                      path="/getSpacesTrending"
+                      element={<GetSpacesTrendingTest />}
+                    />
+
+                    {/* spaces ui components routes */}
+                    <Route path="spaceWidget" element={<SpaceWidget />} />
+                    <Route path="spaceFeed" element={<SpaceFeed />} />
+                    <Route path="spaceBanner" element={<SpaceBanner />} />
+                    <Route
+                      path="spaceInvites"
+                      element={<SpaceInvitesComponent />}
+                    />
+                    <Route
+                      path="createSpaceUI"
+                      element={<CreateSpaceComponent />}
+                    />
+                  </Routes>
+                  {/* <ChatWidgetTest/> */}
+                  <ChatWidgetTest />
+                  <SpaceWidgetComponent spaceId={spaceId} />
+                </SpacesUIProvider>
               </AccountContext.Provider>
             </SocketContext.Provider>
           </Web3Context.Provider>
diff --git a/packages/examples/sdk-frontend-react/src/app/components/Checkbox.tsx b/packages/examples/sdk-frontend-react/src/app/components/Checkbox.tsx
new file mode 100644
index 000000000..6275c42dd
--- /dev/null
+++ b/packages/examples/sdk-frontend-react/src/app/components/Checkbox.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+export const Checkbox = (props: {
+  id: string;
+  label: string;
+  value?: boolean;
+  onChange: () => void;
+}) => {
+  return (
+    <div>
+      <input
+        id={props.id}
+        type="checkbox"
+        checked={props.value}
+        onChange={props.onChange}
+      />
+      <label htmlFor={props.id}>{props.label}</label>
+    </div>
+  );
+};
diff --git a/packages/demoreact/src/app/components/Connect.tsx b/packages/examples/sdk-frontend-react/src/app/components/Connect.tsx
similarity index 63%
rename from packages/demoreact/src/app/components/Connect.tsx
rename to packages/examples/sdk-frontend-react/src/app/components/Connect.tsx
index 08ae29d7a..53ce68f1c 100644
--- a/packages/demoreact/src/app/components/Connect.tsx
+++ b/packages/examples/sdk-frontend-react/src/app/components/Connect.tsx
@@ -1,29 +1,29 @@
-import { useEffect } from "react"
-import styled from "styled-components"
-import { InjectedConnector } from '@web3-react/injected-connector'
-import { useWeb3React } from "@web3-react/core"
+import { useEffect } from 'react';
+import styled from 'styled-components';
+import { InjectedConnector } from '@web3-react/injected-connector';
+import { useWeb3React } from '@web3-react/core';
 
 interface NwMappingType {
-  [key: number]: string
+  [key: number]: string;
 }
 
-const NETWORK_MAPPING : NwMappingType = {
+const NETWORK_MAPPING: NwMappingType = {
   1: 'ETH_MAIN_NET',
   5: 'ETH_GOERLI',
   3: 'ETH_ROPSTEN',
   137: 'POLYGON_MAINNET',
   80001: 'POLYGON_MUMBAI',
-  56: "BSC_MAINNET",
-  97: "BSC_TESTNET",
+  56: 'BSC_MAINNET',
+  97: 'BSC_TESTNET',
   420: 'OPTIMISM_TESTNET',
   10: 'OPTIMISM_MAINNET',
   1442: 'POLYGON_ZK_EVM_TESTNET',
-  1101: 'POLYGON_ZK_EVM_MAINNET'
+  1101: 'POLYGON_ZK_EVM_MAINNET',
 };
 
 const injected = new InjectedConnector({
   supportedChainIds: [1, 3, 4, 5, 42, 137, 80001, 56, 97, 10, 420, 1442, 1101],
-})
+});
 
 const ConnectWrapper = styled.div`
   display: flex;
@@ -58,32 +58,31 @@ const StyledButton = styled.button`
 const Connect = styled(StyledButton)`
   color: rgb(255, 255, 255);
   background: rgb(103, 76, 159);
-`
+`;
 
 const Disconnect = styled(StyledButton)`
   color: rgb(255, 255, 255);
   background: rgb(226, 8, 128);
-`
+`;
 
 const ConnectButton = () => {
-  const { active, account, activate, deactivate, chainId } = useWeb3React()
-
+  const { active, account, activate, deactivate, chainId } = useWeb3React();
 
   async function connect() {
     try {
-      await activate(injected)
-      localStorage.setItem('isWalletConnected', 'true')
+      await activate(injected);
+      localStorage.setItem('isWalletConnected', 'true');
     } catch (ex) {
-      console.log(ex)
+      console.log(ex);
     }
   }
 
   async function disconnect() {
     try {
-      deactivate()
-      localStorage.setItem('isWalletConnected', 'false')
+      deactivate();
+      localStorage.setItem('isWalletConnected', 'false');
     } catch (ex) {
-      console.log(ex)
+      console.log(ex);
     }
   }
 
@@ -91,29 +90,33 @@ const ConnectButton = () => {
     const connectWalletOnPageLoad = async () => {
       if (localStorage?.getItem('isWalletConnected') === 'true') {
         try {
-          await activate(injected)
-          localStorage.setItem('isWalletConnected', 'true')
+          await activate(injected);
+          localStorage.setItem('isWalletConnected', 'true');
         } catch (ex) {
-          console.log(ex)
+          console.log(ex);
         }
       }
-    }
-    connectWalletOnPageLoad()
+    };
+    connectWalletOnPageLoad();
   }, [activate]);
 
   return (
     <ConnectWrapper>
       {active ? (
-          <>
-            <p>Connected with <span className="account">{account}</span></p>
-            {chainId ? <p className="network">{NETWORK_MAPPING[chainId]}</p> : null}
-            <Disconnect onClick={disconnect}>Disconnect Metamask</Disconnect>
-          </>
+        <>
+          <p>
+            Connected with <span className="account">{account}</span>
+          </p>
+          {chainId ? (
+            <p className="network">{NETWORK_MAPPING[chainId]}</p>
+          ) : null}
+          <Disconnect onClick={disconnect}>Disconnect Metamask</Disconnect>
+        </>
       ) : (
         <Connect onClick={connect}>Connect to MetaMask</Connect>
       )}
     </ConnectWrapper>
-  )
+  );
 };
 
-export default ConnectButton;
\ No newline at end of file
+export default ConnectButton;
diff --git a/packages/examples/sdk-frontend-react/src/app/components/Dropdown.tsx b/packages/examples/sdk-frontend-react/src/app/components/Dropdown.tsx
new file mode 100644
index 000000000..09baf95b8
--- /dev/null
+++ b/packages/examples/sdk-frontend-react/src/app/components/Dropdown.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+
+type DropdownOptionsType = {
+  value: string;
+  label: string;
+};
+
+const Dropdown = ({
+  style,
+  label,
+  value,
+  width,
+  options,
+  onChange,
+}: {
+  style?: any;
+  label: string;
+  value?: string;
+  width?: string | number;
+  options: DropdownOptionsType[];
+  onChange: (arg0: any) => void;
+}) => {
+  return (
+    <label style={{ display: 'flex', gap: 8, ...style }}>
+      {label}
+      <select value={value} onChange={onChange} style={{ width: width }}>
+        {options.map((option) => (
+          <option key={`option: ${option.label}`} value={option.value}>
+            {option.label}
+          </option>
+        ))}
+      </select>
+    </label>
+  );
+};
+
+export default Dropdown;
diff --git a/packages/examples/sdk-frontend-react/src/app/components/Feedback.tsx b/packages/examples/sdk-frontend-react/src/app/components/Feedback.tsx
new file mode 100644
index 000000000..1a2bf2ead
--- /dev/null
+++ b/packages/examples/sdk-frontend-react/src/app/components/Feedback.tsx
@@ -0,0 +1,33 @@
+import styled from 'styled-components';
+
+type FeedbackType = {
+  status?: string;
+};
+
+export const Feedback = styled.div<FeedbackType>`
+  background: ${(props) => {
+    if (props.status === 'error') {
+      return '#efc3ba';
+    }
+    return '#d4efe7';
+  }};
+  border-color: ${(props) => {
+    if (props.status === 'error') {
+      return '#efc3ba';
+    }
+    return '#d4efe7';
+  }};
+  border-radius: 7px;
+  border-width: 2px;
+
+  display: flex;
+  padding: 25px;
+  justify-content: center;
+  font-size: 1rem;
+  margin: 30px;
+  word-break: break-word;
+`;
+
+export const APIFeedback = (props: { status: any; children: any }) => {
+  return <Feedback status={props.status}>{props.children}</Feedback>;
+};
diff --git a/packages/examples/sdk-frontend-react/src/app/components/Icons.tsx b/packages/examples/sdk-frontend-react/src/app/components/Icons.tsx
new file mode 100644
index 000000000..87989d0b5
--- /dev/null
+++ b/packages/examples/sdk-frontend-react/src/app/components/Icons.tsx
@@ -0,0 +1,24 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import styled from 'styled-components';
+import { ReactComponent as DarkSVGIcon } from '../../assets/dark.svg';
+import { ReactComponent as LightSVGIcon } from '../../assets/light.svg';
+
+const SVGIconButton = styled.div`
+  cursor: pointer;
+`;
+
+type IconProp = {
+  onClick: (arg0: any) => any;
+  title: string;
+};
+
+export const DarkIcon = ({ title, onClick }: IconProp) => (
+  <SVGIconButton title={title} onClick={onClick}>
+    <DarkSVGIcon />
+  </SVGIconButton>
+);
+export const LightIcon = ({ title, onClick }: IconProp) => (
+  <SVGIconButton title={title} onClick={onClick}>
+    <LightSVGIcon />
+  </SVGIconButton>
+);
diff --git a/packages/examples/sdk-frontend-react/src/app/components/Loader.tsx b/packages/examples/sdk-frontend-react/src/app/components/Loader.tsx
new file mode 100644
index 000000000..46faee564
--- /dev/null
+++ b/packages/examples/sdk-frontend-react/src/app/components/Loader.tsx
@@ -0,0 +1,64 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const LoadingOverlay = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #000;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  opacity: 0.7;
+
+  & .loaderText {
+    font-size: 3rem;
+    color: #fff;
+  }
+
+  z-index: 999999;
+`;
+
+const LoadingSpinner = styled.div`
+  @keyframes spinner {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  &:before {
+    content: '';
+    box-sizing: border-box;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 60px;
+    height: 60px;
+    margin-top: -10px;
+    margin-left: -10px;
+    border-radius: 50%;
+    border-top: 4px solid #07d;
+    border-right: 2px solid transparent;
+    animation: spinner 0.6s linear infinite;
+  }
+`;
+
+interface LoaderProps {
+  show?: boolean;
+}
+
+function Loader({ show }: LoaderProps) {
+  if (show) {
+    return (
+      <LoadingOverlay>
+        <LoadingSpinner />
+      </LoadingOverlay>
+    );
+  }
+
+  return null;
+}
+
+export default Loader;
diff --git a/packages/demoreact/src/app/components/StyledComponents.tsx b/packages/examples/sdk-frontend-react/src/app/components/StyledComponents.tsx
similarity index 76%
rename from packages/demoreact/src/app/components/StyledComponents.tsx
rename to packages/examples/sdk-frontend-react/src/app/components/StyledComponents.tsx
index cb13603e4..bbbf28043 100644
--- a/packages/demoreact/src/app/components/StyledComponents.tsx
+++ b/packages/examples/sdk-frontend-react/src/app/components/StyledComponents.tsx
@@ -6,18 +6,18 @@ export const Section = styled.section`
   margin: 10px 0;
   display: flex;
   flex-direction: column;
-  background-color: ${(props) => props.theme === 'dark' ? '#000' : '#fff'};
+  background-color: ${(props) => (props.theme === 'dark' ? '#000' : '#fff')};
 
   & .headerText {
-    color: ${(props) => props.theme === 'dark' ? '#fff' : '#000'};
+    color: ${(props) => (props.theme === 'dark' ? '#fff' : '#000')};
     font-size: 2rem;
   }
 
   & .subHeaderText {
-    color: ${(props) => props.theme === 'dark' ? '#fff' : '#000'};
+    color: ${(props) => (props.theme === 'dark' ? '#fff' : '#000')};
     font-size: 1.2rem;
   }
-`
+`;
 
 export const SectionItem = styled.div`
   display: flex;
@@ -42,12 +42,12 @@ export const CodeFormatter = styled.pre`
 `;
 
 export const SectionButton = styled.button`
-  font-family: "Source Sans Pro",Arial,sans-serif;
+  font-family: 'Source Sans Pro', Arial, sans-serif;
   font-size: 16px;
   display: flex;
   margin-right: 15px;
   padding: 15px 20px;
-  background: #674C9F;
+  background: #674c9f;
   border: 0;
   border-radius: 7px;
   box-shadow: rgb(0 0 0 / 52%) 0px 0px 5px;
diff --git a/packages/examples/sdk-frontend-react/src/app/context/accountContext.ts b/packages/examples/sdk-frontend-react/src/app/context/accountContext.ts
new file mode 100644
index 000000000..b5a89e79a
--- /dev/null
+++ b/packages/examples/sdk-frontend-react/src/app/context/accountContext.ts
@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const AccountContext = createContext({});
+
+export default AccountContext;
diff --git a/packages/examples/sdk-frontend-react/src/app/context/envContext.ts b/packages/examples/sdk-frontend-react/src/app/context/envContext.ts
new file mode 100644
index 000000000..102e80e7c
--- /dev/null
+++ b/packages/examples/sdk-frontend-react/src/app/context/envContext.ts
@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const EnvContext = createContext({});
+
+export default EnvContext;
diff --git a/packages/examples/sdk-frontend-react/src/app/context/index.ts b/packages/examples/sdk-frontend-react/src/app/context/index.ts
new file mode 100644
index 000000000..83886ecbc
--- /dev/null
+++ b/packages/examples/sdk-frontend-react/src/app/context/index.ts
@@ -0,0 +1,6 @@
+import Web3Context from './web3context';
+import EnvContext from './envContext';
+import SocketContext from './socketContext';
+import AccountContext from './accountContext';
+
+export { Web3Context, EnvContext, SocketContext, AccountContext };
diff --git a/packages/examples/sdk-frontend-react/src/app/context/socketContext.ts b/packages/examples/sdk-frontend-react/src/app/context/socketContext.ts
new file mode 100644
index 000000000..160afdd45
--- /dev/null
+++ b/packages/examples/sdk-frontend-react/src/app/context/socketContext.ts
@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const SocketContext = createContext({});
+
+export default SocketContext;
diff --git a/packages/examples/sdk-frontend-react/src/app/context/web3context.ts b/packages/examples/sdk-frontend-react/src/app/context/web3context.ts
new file mode 100644
index 000000000..8c72f8fd2
--- /dev/null
+++ b/packages/examples/sdk-frontend-react/src/app/context/web3context.ts
@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const Web3Context = createContext({});
+
+export default Web3Context;
diff --git a/packages/examples/sdk-frontend-react/src/app/data.ts b/packages/examples/sdk-frontend-react/src/app/data.ts
new file mode 100644
index 000000000..da196b300
--- /dev/null
+++ b/packages/examples/sdk-frontend-react/src/app/data.ts
@@ -0,0 +1,205 @@
+export default [
+  {
+    payload: {
+      data: {
+        app: 'App Bot',
+        sid: '22710',
+        url: 'https://epns.io/',
+        acta: '',
+        aimg: 'https://res.cloudinary.com/xand6r/image/upload/v1632235676/Screenshot_2021-09-21_at_15.44.49_s6vfta.png',
+        amsg: 'The [d:Bell] on the [b:top right] keeps track of any incoming messages and will inform you about it.\n\nClicking on the [b:bell] will update your feed [i:(Alternatively, pull feed down to refresh)]',
+        asub: 'Ring the Bell',
+        icon: 'https://backend-staging.epns.io/cache/bafkreibzn4s6nfa4jwyuswkojxclec5nhvj3e4ac5cvamzc2ajznh7t77a.jpg',
+        type: '1',
+        // epoch: "1625139867",
+        appbot: '1',
+        hidden: '0',
+        secret: '',
+      },
+      notification: {
+        body: '',
+      },
+    },
+  },
+  {
+    payload: {
+      data: {
+        app: 'App Bot',
+        sid: '22710',
+        url: 'https://epns.io/',
+        acta: '',
+        aimg: 'https://www.youtube.com/watch?v=gUwXCt1qkBU',
+        amsg: 'The [d:Bell] on the [b:top right] keeps track of any incoming messages and will inform you about it.\n\nClicking on the [b:bell] will update your feed [i:(Alternatively, pull feed down to refresh)]',
+        asub: 'Ring the Bell',
+        icon: 'https://backend-staging.epns.io/cache/bafkreibzn4s6nfa4jwyuswkojxclec5nhvj3e4ac5cvamzc2ajznh7t77a.jpg',
+        type: '1',
+        appbot: '1',
+        hidden: '0',
+        secret: '',
+      },
+      notification: {
+        body: '',
+      },
+    },
+  },
+  {
+    payload: {
+      data: {
+        app: 'App Bot',
+        sid: '22710',
+        url: 'https://epns.io/',
+        acta: '',
+        aimg: 'https://www.w3schools.com/html/mov_bbb.mp4',
+        amsg: 'The [d:Bell] on the [b:top right] keeps track of any incoming messages and will inform you about it.\n\nClicking on the [b:bell] will update your feed [i:(Alternatively, pull feed down to refresh)] [timestamp: 1634766446]',
+        asub: 'Ring the Bell',
+        icon: 'https://backend-staging.epns.io/cache/bafkreibzn4s6nfa4jwyuswkojxclec5nhvj3e4ac5cvamzc2ajznh7t77a.jpg',
+        type: '1',
+        appbot: '1',
+        hidden: '0',
+        secret: '',
+      },
+      notification: {
+        body: '',
+      },
+    },
+  },
+  {
+    payload_id: 1,
+    channel: '0x0b5E9fa12C4C1946fA2f14b7271cC60541508f23',
+    payload: {
+      apns: {
+        payload: {
+          aps: {
+            category: 'withappicon',
+            'mutable-content': 1,
+            'content-available': 1,
+          },
+        },
+        fcm_options: {
+          image:
+            'https://backend-staging.epns.io/cache/bafkreibzn4s6nfa4jwyuswkojxclec5nhvj3e4ac5cvamzc2ajznh7t77a.jpg',
+        },
+      },
+      data: {
+        app: 'App Bot',
+        sid: '22710',
+        url: 'https://epns.io/',
+        acta: '',
+        aimg: '',
+        amsg: '[b:Greetings] fellow users! Welcome aboard!\n\nI am your personalized [d:App Bot] whose sole purpose is to guide you about the app. [timestamp: 1634766446]',
+        asub: 'Welcome to EPNS',
+        icon: 'https://backend-staging.epns.io/cache/bafkreibzn4s6nfa4jwyuswkojxclec5nhvj3e4ac5cvamzc2ajznh7t77a.jpg',
+        type: '1',
+        appbot: '1',
+        hidden: '0',
+        secret: '',
+      },
+      android: {
+        notification: {
+          icon: '@drawable/ic_stat_name',
+          color: '#e20880',
+          image:
+            'https://backend-staging.epns.io/cache/bafkreibzn4s6nfa4jwyuswkojxclec5nhvj3e4ac5cvamzc2ajznh7t77a.jpg',
+          default_vibrate_timings: true,
+        },
+      },
+      notification: {
+        body: '\nHourly Movement: 0.33%\nDaily Movement: 4.66%\nWeekly Movement: 14.91%',
+        title: 'ETH Tracker - ETH at $2,216.38',
+      },
+    },
+  },
+  {
+    payload_id: 2,
+    channel: '0x0b5E9fa12C4C1946fA2f14b7271cC60541508f23',
+    payload: {
+      apns: {
+        payload: {
+          aps: {
+            category: 'withappicon',
+            'mutable-content': 1,
+            'content-available': 1,
+          },
+        },
+        fcm_options: {
+          image:
+            'https://backend-staging.epns.io/cache/bafkreibzn4s6nfa4jwyuswkojxclec5nhvj3e4ac5cvamzc2ajznh7t77a.jpg',
+        },
+      },
+      data: {
+        app: 'App Bot',
+        sid: '22710',
+        url: 'https://epns.io/',
+        acta: '',
+        aimg: '',
+        amsg: '[d:Channels] represent your favorite [b:dApps] or [b:Smart Contracts]. You will often get notifications from different channels.\n\nThe [b:top section] of the message contains information about these channels.\n\n[b:Clicking on it] takes you to their [b:website]. [timestamp: 1634716446]',
+        asub: 'About Channels',
+        icon: 'https://backend-staging.epns.io/cache/bafkreibzn4s6nfa4jwyuswkojxclec5nhvj3e4ac5cvamzc2ajznh7t77a.jpg',
+        type: '1',
+        appbot: '1',
+        hidden: '0',
+        secret: '',
+      },
+      android: {
+        notification: {
+          icon: '@drawable/ic_stat_name',
+          color: '#e20880',
+          image:
+            'https://backend-staging.epns.io/cache/bafkreibzn4s6nfa4jwyuswkojxclec5nhvj3e4ac5cvamzc2ajznh7t77a.jpg',
+          default_vibrate_timings: true,
+        },
+      },
+      notification: {
+        body: '\nHourly Movement: 0.33%\nDaily Movement: 4.66%\nWeekly Movement: 14.91%',
+        title: 'ETH Tracker - ETH at $2,216.38',
+      },
+    },
+  },
+  {
+    payload_id: 4,
+    channel: '0x0b5E9fa12C4C1946fA2f14b7271cC60541508f23',
+    // epoch: "2021-07-01T11:44:27.000Z",
+    payload: {
+      apns: {
+        payload: {
+          aps: {
+            category: 'withappicon',
+            'mutable-content': 1,
+            'content-available': 1,
+          },
+        },
+        fcm_options: {
+          image:
+            'https://backend-staging.epns.io/cache/bafkreibzn4s6nfa4jwyuswkojxclec5nhvj3e4ac5cvamzc2ajznh7t77a.jpg',
+        },
+      },
+      data: {
+        app: 'App Bot',
+        sid: '22710',
+        url: 'https://epns.io/',
+        acta: 'https://epns.io',
+        aimg: '',
+        amsg: 'Notifications are [b:never boring] in EPNS.\n\nThe messages with [b:blueish outlines] are links that the [b:dApp] has provided you. \n\n[d:Tapping the message opens it.] [timestamp: 1634766446]',
+        asub: 'Nofications Types',
+        icon: 'https://backend-staging.epns.io/cache/bafkreibzn4s6nfa4jwyuswkojxclec5nhvj3e4ac5cvamzc2ajznh7t77a.jpg',
+        type: '1',
+        appbot: '1',
+        hidden: '0',
+        secret: '',
+      },
+      android: {
+        notification: {
+          icon: '@drawable/ic_stat_name',
+          color: '#e20880',
+          image:
+            'https://backend-staging.epns.io/cache/bafkreibzn4s6nfa4jwyuswkojxclec5nhvj3e4ac5cvamzc2ajznh7t77a.jpg',
+          default_vibrate_timings: true,
+        },
+      },
+      notification: {
+        body: '\nHourly Movement: 0.33%\nDaily Movement: 4.66%\nWeekly Movement: 14.91%',
+        title: 'ETH Tracker - ETH at $2,216.38',
+      },
+    },
+  },
+];
diff --git a/packages/demoreact/src/app/helpers.ts b/packages/examples/sdk-frontend-react/src/app/helpers.ts
similarity index 70%
rename from packages/demoreact/src/app/helpers.ts
rename to packages/examples/sdk-frontend-react/src/app/helpers.ts
index 309927910..d5af6bc15 100644
--- a/packages/demoreact/src/app/helpers.ts
+++ b/packages/examples/sdk-frontend-react/src/app/helpers.ts
@@ -9,21 +9,21 @@ export enum ENV {
   LOCAL = 'local',
 }
 const Constants = {
-    ENV,
-    PAGINATION: {
-      INITIAL_PAGE: 1,
-      LIMIT: 10,
-      LIMIT_MIN: 1,
-      LIMIT_MAX: 50
-    },
-    DEFAULT_CHAIN_ID: 5,
-    DEV_CHAIN_ID: 99999,
-    NON_ETH_CHAINS: [137, 80001, 56, 97, 10, 420, 1442, 1101],
-    ETH_CHAINS: [1, 5]
+  ENV,
+  PAGINATION: {
+    INITIAL_PAGE: 1,
+    LIMIT: 10,
+    LIMIT_MIN: 1,
+    LIMIT_MAX: 50,
+  },
+  DEFAULT_CHAIN_ID: 5,
+  DEV_CHAIN_ID: 99999,
+  NON_ETH_CHAINS: [137, 80001, 56, 97, 10, 420, 1442, 1101],
+  ETH_CHAINS: [1, 5],
 };
 
 export interface AddressValidatorsType {
-  [key: string]: ({ address } : { address: string }) => boolean;
+  [key: string]: ({ address }: { address: string }) => boolean;
 }
 
 export function isValidETHAddress(address: string) {
@@ -32,18 +32,14 @@ export function isValidETHAddress(address: string) {
 
 const AddressValidators: AddressValidatorsType = {
   // Ethereum
-  'eip155': ({ address } : { address: string }) => {
+  eip155: ({ address }: { address: string }) => {
     return isValidETHAddress(address);
-  }
+  },
   // Add other chains here
 };
 
 export function validateCAIP(addressInCAIP: string) {
-  const [
-    blockchain,
-    networkId,
-    address
-  ] = addressInCAIP.split(':');
+  const [blockchain, networkId, address] = addressInCAIP.split(':');
 
   if (!blockchain) return false;
   if (!networkId) return false;
@@ -65,13 +61,13 @@ export function getFallbackETHCAIPAddress(env: ENV, address: string) {
 }
 
 /**
- * This helper 
+ * This helper
  *  checks if a VALID CAIP
  *    return the CAIP
  *  else
  *    check if valid ETH
  *      return a CAIP representation of that address (EIP155 + env)
- *    else 
+ *    else
  *      throw error!
  */
 export function getCAIPAddress(env: ENV, address: string, msg?: string) {
@@ -87,14 +83,14 @@ export function getCAIPAddress(env: ENV, address: string, msg?: string) {
 }
 
 // P = Partial CAIP
-export const walletToPCAIP10 = (account:string): string => {
+export const walletToPCAIP10 = (account: string): string => {
   if (account.includes('eip155:')) {
-    return account
+    return account;
   }
-  return 'eip155:' + account
-}
+  return 'eip155:' + account;
+};
 
 export const pCAIP10ToWallet = (wallet: string): string => {
-  wallet = wallet.replace('eip155:', '')
-  return wallet
-}
\ No newline at end of file
+  wallet = wallet.replace('eip155:', '');
+  return wallet;
+};
diff --git a/packages/examples/sdk-frontend-react/src/app/hooks/index.ts b/packages/examples/sdk-frontend-react/src/app/hooks/index.ts
new file mode 100644
index 000000000..e59adae6f
--- /dev/null
+++ b/packages/examples/sdk-frontend-react/src/app/hooks/index.ts
@@ -0,0 +1 @@
+export * from './useSDKSocket';
diff --git a/packages/demoreact/src/app/hooks/useSDKSocket.ts b/packages/examples/sdk-frontend-react/src/app/hooks/useSDKSocket.ts
similarity index 72%
rename from packages/demoreact/src/app/hooks/useSDKSocket.ts
rename to packages/examples/sdk-frontend-react/src/app/hooks/useSDKSocket.ts
index 41c21689a..6c703cfa5 100644
--- a/packages/demoreact/src/app/hooks/useSDKSocket.ts
+++ b/packages/examples/sdk-frontend-react/src/app/hooks/useSDKSocket.ts
@@ -1,23 +1,28 @@
 import { useEffect, useState } from 'react';
-import {
-  createSocketConnection,
-  EVENTS
-} from '@pushprotocol/socket';
+import { createSocketConnection, EVENTS } from '@pushprotocol/socket';
 
 import { getCAIPAddress, ENV } from '../helpers';
 
 export type SDKSocketHookOptions = {
-  account?: string | null,
-  env?: ENV,
-  chainId?: number,
-  isCAIP?: boolean
+  account?: string | null;
+  env?: ENV;
+  chainId?: number;
+  isCAIP?: boolean;
 };
 
-export const useSDKSocket = ({ account, env = ENV.PROD, chainId, isCAIP }: SDKSocketHookOptions) => {
-  
+export const useSDKSocket = ({
+  account,
+  env = ENV.PROD,
+  chainId,
+  isCAIP,
+}: SDKSocketHookOptions) => {
   const [epnsSDKSocket, setEpnsSDKSocket] = useState<any>(null);
-  const [feedsSinceLastConnection, setFeedsSinceLastConnection] = useState<any>([]);
-  const [isSDKSocketConnected, setIsSDKSocketConnected] = useState(epnsSDKSocket?.connected);
+  const [feedsSinceLastConnection, setFeedsSinceLastConnection] = useState<any>(
+    []
+  );
+  const [isSDKSocketConnected, setIsSDKSocketConnected] = useState(
+    epnsSDKSocket?.connected
+  );
   const [lastConnectionTimestamp, setLastConnectionTimestamp] = useState('');
 
   const addSocketEvents = () => {
@@ -25,7 +30,7 @@ export const useSDKSocket = ({ account, env = ENV.PROD, chainId, isCAIP }: SDKSo
     epnsSDKSocket?.on(EVENTS.CONNECT, () => {
       console.log('CONNECTED: ');
       setIsSDKSocketConnected(true);
-      setLastConnectionTimestamp((new Date()).toUTCString());
+      setLastConnectionTimestamp(new Date().toUTCString());
     });
 
     epnsSDKSocket?.on(EVENTS.DISCONNECT, () => {
@@ -40,11 +45,11 @@ export const useSDKSocket = ({ account, env = ENV.PROD, chainId, isCAIP }: SDKSo
       /**
        * We receive a 1 feed item.
        */
-      console.log("\n\n\n\neachFeed event: ", feed);
+      console.log('\n\n\n\neachFeed event: ', feed);
 
       // do stuff with data
       setFeedsSinceLastConnection((oldFeeds: any) => {
-        return [...oldFeeds, feed]
+        return [...oldFeeds, feed];
       });
     });
   };
@@ -60,19 +65,18 @@ export const useSDKSocket = ({ account, env = ENV.PROD, chainId, isCAIP }: SDKSo
     if (epnsSDKSocket) {
       addSocketEvents();
     }
-  
+
     return () => {
       if (epnsSDKSocket) {
         removeSocketEvents();
       }
-    }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [epnsSDKSocket]);
 
-
   /**
    * Whenever the requisite params to create a connection object change
-   *  - disconnect the old connection 
+   *  - disconnect the old connection
    *  - create a new connection object
    */
   useEffect(() => {
@@ -81,24 +85,23 @@ export const useSDKSocket = ({ account, env = ENV.PROD, chainId, isCAIP }: SDKSo
         // console.log('=================>>> disconnection in the hook');
         epnsSDKSocket?.disconnect();
       }
-      
+
       const connectionObject = createSocketConnection({
         user: getCAIPAddress(env, account, 'User'),
         env,
-        socketOptions: { autoConnect: false }
+        socketOptions: { autoConnect: false },
       });
       console.warn('new connection object: ', connectionObject);
       // set to context
       setEpnsSDKSocket(connectionObject);
     }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [account, env, chainId, isCAIP]);
 
-
   return {
-      epnsSDKSocket,
-      isSDKSocketConnected,
-      feedsSinceLastConnection,
-      lastConnectionTimestamp
-  }
-};
\ No newline at end of file
+    epnsSDKSocket,
+    isSDKSocketConnected,
+    feedsSinceLastConnection,
+    lastConnectionTimestamp,
+  };
+};
diff --git a/packages/demoreact/src/assets/.gitkeep b/packages/examples/sdk-frontend-react/src/assets/.gitkeep
similarity index 100%
rename from packages/demoreact/src/assets/.gitkeep
rename to packages/examples/sdk-frontend-react/src/assets/.gitkeep
diff --git a/packages/demoreact/src/assets/dark.svg b/packages/examples/sdk-frontend-react/src/assets/dark.svg
similarity index 100%
rename from packages/demoreact/src/assets/dark.svg
rename to packages/examples/sdk-frontend-react/src/assets/dark.svg
diff --git a/packages/demoreact/src/assets/epnsLogo.png b/packages/examples/sdk-frontend-react/src/assets/epnsLogo.png
similarity index 100%
rename from packages/demoreact/src/assets/epnsLogo.png
rename to packages/examples/sdk-frontend-react/src/assets/epnsLogo.png
diff --git a/packages/demoreact/src/assets/light.svg b/packages/examples/sdk-frontend-react/src/assets/light.svg
similarity index 100%
rename from packages/demoreact/src/assets/light.svg
rename to packages/examples/sdk-frontend-react/src/assets/light.svg
diff --git a/packages/demoreact/src/assets/pushLogo.svg b/packages/examples/sdk-frontend-react/src/assets/pushLogo.svg
similarity index 100%
rename from packages/demoreact/src/assets/pushLogo.svg
rename to packages/examples/sdk-frontend-react/src/assets/pushLogo.svg
diff --git a/packages/demoreact/src/environments/environment.prod.ts b/packages/examples/sdk-frontend-react/src/environments/environment.prod.ts
similarity index 100%
rename from packages/demoreact/src/environments/environment.prod.ts
rename to packages/examples/sdk-frontend-react/src/environments/environment.prod.ts
diff --git a/packages/demoreact/src/environments/environment.ts b/packages/examples/sdk-frontend-react/src/environments/environment.ts
similarity index 100%
rename from packages/demoreact/src/environments/environment.ts
rename to packages/examples/sdk-frontend-react/src/environments/environment.ts
diff --git a/packages/demoreact/src/favicon.ico b/packages/examples/sdk-frontend-react/src/favicon.ico
similarity index 100%
rename from packages/demoreact/src/favicon.ico
rename to packages/examples/sdk-frontend-react/src/favicon.ico
diff --git a/packages/demoreact/src/index.html b/packages/examples/sdk-frontend-react/src/index.html
similarity index 84%
rename from packages/demoreact/src/index.html
rename to packages/examples/sdk-frontend-react/src/index.html
index d1d7bd245..7fb34b388 100644
--- a/packages/demoreact/src/index.html
+++ b/packages/examples/sdk-frontend-react/src/index.html
@@ -10,6 +10,8 @@
   </head>
   <body>
     <div id="root"></div>
-    <script>const global = globalThis;</script>
+    <script>
+      const global = globalThis;
+    </script>
   </body>
 </html>
diff --git a/packages/demoreact/src/main.tsx b/packages/examples/sdk-frontend-react/src/main.tsx
similarity index 79%
rename from packages/demoreact/src/main.tsx
rename to packages/examples/sdk-frontend-react/src/main.tsx
index 92ae08f80..1bd1b48f1 100644
--- a/packages/demoreact/src/main.tsx
+++ b/packages/examples/sdk-frontend-react/src/main.tsx
@@ -1,23 +1,24 @@
 import { StrictMode } from 'react';
 import { render } from 'react-dom';
 import { BrowserRouter } from 'react-router-dom';
-import { ethers } from "ethers";
-import { Web3ReactProvider } from "@web3-react/core";
+import { ethers } from 'ethers';
+import { Web3ReactProvider } from '@web3-react/core';
 import App from './app/app';
 
 function getLibrary(provider: any) {
   // this will vary according to whether you use e.g. ethers or web3.js
-  const gottenProvider = new ethers.providers.Web3Provider(provider, "any");
+  const gottenProvider = new ethers.providers.Web3Provider(provider, 'any');
   return gottenProvider;
 }
 
 const container = document.getElementById('root');
-render((
+render(
   <StrictMode>
     <Web3ReactProvider getLibrary={getLibrary}>
       <BrowserRouter>
         <App />
       </BrowserRouter>
     </Web3ReactProvider>
-  </StrictMode>
-), container);
+  </StrictMode>,
+  container
+);
diff --git a/packages/demoreact/src/polyfills.ts b/packages/examples/sdk-frontend-react/src/polyfills.ts
similarity index 100%
rename from packages/demoreact/src/polyfills.ts
rename to packages/examples/sdk-frontend-react/src/polyfills.ts
diff --git a/packages/demoreact/tsconfig.app.json b/packages/examples/sdk-frontend-react/tsconfig.app.json
similarity index 69%
rename from packages/demoreact/tsconfig.app.json
rename to packages/examples/sdk-frontend-react/tsconfig.app.json
index af84f21cf..679733fe2 100644
--- a/packages/demoreact/tsconfig.app.json
+++ b/packages/examples/sdk-frontend-react/tsconfig.app.json
@@ -1,12 +1,12 @@
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
-    "outDir": "../../dist/out-tsc",
+    "outDir": "../../../dist/out-tsc",
     "types": ["node"]
   },
   "files": [
-    "../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
-    "../../node_modules/@nrwl/react/typings/image.d.ts"
+    "../../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
+    "../../../node_modules/@nrwl/react/typings/image.d.ts"
   ],
   "exclude": [
     "jest.config.ts",
diff --git a/packages/demoreact/tsconfig.json b/packages/examples/sdk-frontend-react/tsconfig.json
similarity index 92%
rename from packages/demoreact/tsconfig.json
rename to packages/examples/sdk-frontend-react/tsconfig.json
index 9657042e4..2134dcd88 100644
--- a/packages/demoreact/tsconfig.json
+++ b/packages/examples/sdk-frontend-react/tsconfig.json
@@ -1,5 +1,5 @@
 {
-  "extends": "../../tsconfig.base.json",
+  "extends": "../../../tsconfig.base.json",
   "compilerOptions": {
     "jsx": "react-jsx",
     "allowJs": true,
diff --git a/packages/demoreact/tsconfig.spec.json b/packages/examples/sdk-frontend-react/tsconfig.spec.json
similarity index 68%
rename from packages/demoreact/tsconfig.spec.json
rename to packages/examples/sdk-frontend-react/tsconfig.spec.json
index b8a950754..25c9b209b 100644
--- a/packages/demoreact/tsconfig.spec.json
+++ b/packages/examples/sdk-frontend-react/tsconfig.spec.json
@@ -1,7 +1,7 @@
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
-    "outDir": "../../dist/out-tsc",
+    "outDir": "../../../dist/out-tsc",
     "module": "commonjs",
     "types": ["jest", "node"]
   },
@@ -18,7 +18,7 @@
     "**/*.d.ts"
   ],
   "files": [
-    "../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
-    "../../node_modules/@nrwl/react/typings/image.d.ts"
+    "../../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
+    "../../../node_modules/@nrwl/react/typings/image.d.ts"
   ]
 }
diff --git a/packages/reactnative/project.json b/packages/reactnative/project.json
index c7199bab8..3ff33e792 100644
--- a/packages/reactnative/project.json
+++ b/packages/reactnative/project.json
@@ -29,10 +29,7 @@
             "output": "lib/assets"
           }
         ],
-        "format": [
-          "esm",
-          "cjs"
-        ],
+        "format": ["esm", "cjs"],
         "updateBuildableProjectDepsInPackageJson": true,
         "buildableProjectDepsInPackageJsonType": "dependencies"
       }
diff --git a/packages/uiweb/project.json b/packages/uiweb/project.json
index b753a4836..d5f327b5f 100644
--- a/packages/uiweb/project.json
+++ b/packages/uiweb/project.json
@@ -22,10 +22,7 @@
             "output": "."
           }
         ],
-        "format": [
-          "esm",
-          "cjs"
-        ]
+        "format": ["esm", "cjs"]
       }
     },
     "lint": {
diff --git a/workspace.json b/workspace.json
index a4b43259c..a0f1a558d 100644
--- a/workspace.json
+++ b/workspace.json
@@ -3,8 +3,8 @@
   "version": 2,
   "projects": {
     "demonative": "apps/demonative",
-    "demoreact": "packages/demoreact",
     "examples-sdk-backend-node": "packages/examples/sdk-backend-node",
+    "examples-sdk-frontend-react": "packages/examples/sdk-frontend-react",
     "ledgerlive": "packages/ledgerlive",
     "reactnative": "packages/reactnative",
     "restapi": "packages/restapi",