diff --git a/contributing.md b/contributing.md
index 393a33bb4..2fd538497 100644
--- a/contributing.md
+++ b/contributing.md
@@ -1,6 +1,7 @@
 # Contributing
 
 ## Repo Setup
+
 ```
 git clone https://github.com/ethereum-push-notification-service/sdk.git
 
@@ -10,31 +11,22 @@ cd sdk
 ```
 yarn install
 ```
-***Note*** -
-We are using `yarn` and **strongly** advise to use yarn 1.x to avoid any NPM issues.
-
-## Running the Demo React App
-We have a `demoreact` playground to test the individual packages being built out. To run the `demoreact` app
-### By GUI (preferred)
-1. click on the `NX console` extension icon in the VSCode sidebar.
-2. click on the `build` target execute icon under `demoreact`
-3. click on the `serve` target execute icon under `demoreact`
-4. wait for the localhost to be ready in the terminal & then hit `http://localhost:4200/` on your browser to run the app.
 
-### By CLI
-1. run `yarn nx build demoreact`
-2. run `yarn nx run demoreact:build:production`
+**_Note_** -
+We are using `yarn` and **strongly** advise to use yarn 1.x to avoid any NPM issues.
 
 ## Pull Requests process
+
 - All changes should be requested through PRs from a feature/bug branch to `main` branch.
-- We are using 
-   - [conventional-commits](https://www.conventionalcommits.org/en/v1.0.0/#summary): to follow [semver](https://semver.org/#summary) for npm package versioning
-   - [commitizen](https://github.com/commitizen/cz-cli) to restrict commits to follow conventional commits
-   - [husky](https://typicode.github.io/husky/#/) to run pre-commit checks
+- We are using
+  - [conventional-commits](https://www.conventionalcommits.org/en/v1.0.0/#summary): to follow [semver](https://semver.org/#summary) for npm package versioning
+  - [commitizen](https://github.com/commitizen/cz-cli) to restrict commits to follow conventional commits
+  - [husky](https://typicode.github.io/husky/#/) to run pre-commit checks
 
 So, use `yarn cz` to commit changes after `git add` (recommended) or hand crafted git commit messages to follow conventional commit. Otherwise the CLI will prevent you from committing code.
 
-- Before starting on any dev on the repo, 
+- Before starting on any dev on the repo,
+
 ```bash
 # pull latest from main
 git pull origin main
@@ -45,14 +37,16 @@ git checkout -b <your-branch-name>
 ```
 
 ### How to add commits which will decide versioning when deploying
+
 When you are ready to commit your changes.
 
 Run
+
 ```
 git add -A
 ```
 
-then 
+then
 
 ```
 yarn cz
@@ -65,42 +59,55 @@ this will pop up the below CLI
 Read through the [conventional-commits](https://www.conventionalcommits.org/en/v1.0.0/#summary) and [semver](https://semver.org/#summary) to get a better understanding for selecting which option.
 
 ### General guideline
-* for bug fixes use `fix`
-* for backward compatible new features use `feat`
 
-## NX 
+- for bug fixes use `fix`
+- for backward compatible new features use `feat`
+
+## NX
+
 We are using [NX](https://nx.dev/getting-started/intro) and some NX plugins for monorepo management, verison & publish.
 
 ### NX console
+
 The repo comes in with a baked in NX console and some other VSCode extensions to -
-* help simplify processes like build, lint, test, run demo apps
-* run scripts on affected parts of the codebase
 
-***Note*** -
+- help simplify processes like build, lint, test, run demo apps
+- run scripts on affected parts of the codebase
+
+**_Note_** -
 <span style="color:red">Don't run CI-prefixed targets in the NX console in local, they are only for CI.</span>.
 
-## Adding new packages 
+## Adding new packages
+
 The NX monorepo uses `project.json` & `package.json` to manage the monorepo workspace and also ultimately build out the bundle that will be published to NPM registry.
 
 ### - adding `dependencies` to a package
-at root, simply run 
+
+at root, simply run
+
 ```
 yarn add "dependency_package_name@x.y.z"
 ```
+
 And then simply import that dependency in your package. NX while running `build` for that package will take care of making it a `dependency` in the final bundle.
 
 ### - adding `devDependencies` to a package
-at root, simply run 
+
+at root, simply run
+
 ```
 yarn add -D "dependency_package_name@x.y.z"
 ```
+
 And then simply import that dependency in your package. NX while running `build` for that package will take care of making it a `devDependency` in the final bundle.
 
 ### - adding `peerDependencies` to a package
-at root, simply run 
+
+at root, simply run
+
 ```
 yarn add "dependency_package_name@x.y.z"
 ```
+
 And then simply import that dependency in your package. In the `package.json` of the package where you want to consume it, simply declare the dependency as `peerDependency`
 NX while running `build` for that package will take care of making it a `peerDependency` in the final bundle.
-
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/examples/Readme.md b/packages/examples/Readme.md
index 140997869..e2b773686 100644
--- a/packages/examples/Readme.md
+++ b/packages/examples/Readme.md
@@ -12,6 +12,7 @@
 </p>
 
 # Welcome to Push SDK Examples!
+
 This repository houses various practical examples that illustrate how to use the Push SDK effectively to enhance your applications with advanced web3 communication functionalities.
 
 ## One-Stop Solution for Understanding the Implementation of Push Protocol's SDK
@@ -19,13 +20,14 @@ This repository houses various practical examples that illustrate how to use the
 The `push-sdk` repository provides two comprehensive examples that serve as practical guides for developers:
 
 1. `sdk-backend-node`: A backend implementation using Node.js.
-2. `sdk-frontend/video`: A frontend implementation focusing on video notifications.
+2. `sdk-frontend-react`: A frontend implementation of notifications and chat using react.
+3. `sdk-frontend/video`: A frontend implementation focusing on video notifications.
 
 These examples illuminate the application of the Push Protocol in real-world scenarios, making it easier for you to effectively incorporate it into your own projects.
 
 They are the perfect starting point for any hacker looking to dive into the world of decentralized notifications. Explore, learn, and create with the Push Protocol. Happy hacking!
 
 # Docs
+
 - [Developer Docs](https://docs.push.org/developers)
 - [Documentation Hub](https://docs.push.org)
-
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/examples/sdk-frontend-react/Readme.md b/packages/examples/sdk-frontend-react/Readme.md
new file mode 100644
index 000000000..04fa2a03f
--- /dev/null
+++ b/packages/examples/sdk-frontend-react/Readme.md
@@ -0,0 +1,42 @@
+# SDK Frontend React Example
+
+Welcome to the SDK Frontend React Example project, a hands-on guide demonstrating how to leverage the power of Push Protocol in a frontend environment using reactJs. This resource is an invaluable companion for developers keen to integrate Push Protocol into their frontend services. Dive into the code to gain a comprehensive understanding of how to deploy various features of the Push Protocol.
+
+## Overview
+
+The `sdk-frontend-react` project offers a practical tutorial on how to set up and configure Push Protocol on a client application, including guidance on managing notifications and interfacing with the blockchain. This includes essential examples related to:
+
+- Push Notifications
+- Push Chat
+- Push NFT Chat
+- Push UI-Web
+
+Through these examples, you'll see how these features can be successfully implemented and integrated using Push Protocol.
+
+## Getting Started
+
+Embark on your journey with this project by cloning the repository and installing the dependencies:
+
+```bash
+git clone https://github.com/ethereum-push-notification-service/push-sdk.git
+cd push-sdk
+yarn install
+```
+
+**_Note_** - We are using `yarn` and **strongly** advise to use yarn 1.x to avoid any NPM issues.
+
+## Setting up the SDK-Frontend-React
+
+1. Navigate to the `packages/examples/sdk-frontend-react` directory.
+
+## Running the SDK-Frontend-React
+
+### By GUI (preferred)
+
+1. Click on the `NX console` extension icon in the VSCode sidebar.
+2. Click on the `serve` target execute icon under `examples-sdk-frontend-react`
+
+### By CLI
+
+1. Navigate to the root level of push-sdk repository.
+2. Run `yarn nx serve packages/examples/sdk-frontend-react`
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",