diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5fd9036d..87d8e1f0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,4 +10,4 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Added
- Project initialization.
-[Unreleased]: https://github.com/status-im/dappconnect-sdks/compare/x...HEAD
+[Unreleased]: https://github.com/status-im/wakuconnect-chat-sdk/compare/x...HEAD
diff --git a/README.md b/README.md
index e1cc640c..6b59778f 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,18 @@
-# DappConnect Chat SDK
+# Waku Connect Chat SDK
+A ReactJS SDK to easily integrate a decentralized, end-to-end encrypted chat feature to your dApp.
+
+The Waku Connect Chat SDK enables several type of chats:
+
+- 1:1 Encrypted chats
+- Private group chats
+- Spam resistant public chats, powered by Status Communities (an admin needs to run a Status Desktop or Mobile app to moderate)
+
+It also enables user to create their identity by either:
+
+- Using their Web3 wallet, or,
+- Generate an anonymous identity locally.
+
+## Documentation
+
+WIP.
diff --git a/package.json b/package.json
index 321377eb..1f666737 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
{
- "name": "dappconnect-sdks",
+ "name": "@waku/chat-sdk-root",
"packageManager": "yarn@3.1.0",
"license": "MIT OR Apache-2.0",
"scripts": {
diff --git a/packages/react-chat-example/package.json b/packages/react-chat-example/package.json
index 36cf5266..bf198984 100644
--- a/packages/react-chat-example/package.json
+++ b/packages/react-chat-example/package.json
@@ -2,7 +2,7 @@
"name": "@waku/react-chat-sdk-example",
"main": "index.js",
"version": "0.1.0",
- "repository": "https://github.com/status-im/dappconnect-chat-sdk/",
+ "repository": "https://github.com/status-im/wakuconnect-chat-sdk/",
"license": "MIT OR Apache-2.0",
"packageManager": "yarn@3.0.1",
"scripts": {
diff --git a/packages/react-chat-example/src/index.html b/packages/react-chat-example/src/index.html
index df61d712..8bc17f8e 100644
--- a/packages/react-chat-example/src/index.html
+++ b/packages/react-chat-example/src/index.html
@@ -4,7 +4,7 @@
- DAppconnect chat
+ Waku Connect Chat
diff --git a/packages/react-chat-example/src/index.tsx b/packages/react-chat-example/src/index.tsx
index 142d1c9d..71d13474 100644
--- a/packages/react-chat-example/src/index.tsx
+++ b/packages/react-chat-example/src/index.tsx
@@ -1,8 +1,4 @@
-import {
- DappConnectCommunityChat,
- darkTheme,
- lightTheme,
-} from "@waku/react-chat-sdk";
+import { CommunityChat, darkTheme, lightTheme } from "@waku/react-chat-sdk";
import React, { useRef, useState } from "react";
import ReactDOM from "react-dom";
import styled from "styled-components";
@@ -77,7 +73,7 @@ function DragDiv() {
}}
/>
- Promise;
}
-export function DappConnectCommunityChat({
+export function CommunityChat({
theme,
config,
fetchMetadata,
communityKey,
-}: DappConnectCommunityChatProps) {
+}: CommunityChatProps) {
const ref = useRef(null);
return (
@@ -43,7 +43,7 @@ export function DappConnectCommunityChat({
-
+
diff --git a/packages/react-chat/src/components/Chat.tsx b/packages/react-chat/src/components/CommunityChatRoom.tsx
similarity index 98%
rename from packages/react-chat/src/components/Chat.tsx
rename to packages/react-chat/src/components/CommunityChatRoom.tsx
index 83effd34..b74f9ce7 100644
--- a/packages/react-chat/src/components/Chat.tsx
+++ b/packages/react-chat/src/components/CommunityChatRoom.tsx
@@ -44,7 +44,7 @@ function Modals() {
);
}
-export function Chat() {
+export function CommunityChatRoom() {
const [state] = useChatState();
const [showMembers, setShowMembers] = useState(false);
const [editGroup, setEditGroup] = useState(false);
diff --git a/packages/react-chat/src/components/Form/ChannelMenu.tsx b/packages/react-chat/src/components/Form/ChannelMenu.tsx
index 023feadb..725396dc 100644
--- a/packages/react-chat/src/components/Form/ChannelMenu.tsx
+++ b/packages/react-chat/src/components/Form/ChannelMenu.tsx
@@ -121,7 +121,7 @@ export const ChannelMenu = ({
{!channel.isMuted && }
{(channel.isMuted ? "Unmute" : "Mute") +
- (channel.type === "group" ? " Group" : " Chat")}
+ (channel.type === "group" ? " Group" : " CommunityChatRoom")}
{!channel.isMuted && showSubmenu && (
)}
- {channel.type === "group" ? "Leave Group" : "Delete Chat"}
+ {channel.type === "group"
+ ? "Leave Group"
+ : "Delete CommunityChatRoom"}
)}
diff --git a/packages/react-chat/src/components/Modals/WalletModal.tsx b/packages/react-chat/src/components/Modals/WalletModal.tsx
index 85c4c55e..2b3ffdb6 100644
--- a/packages/react-chat/src/components/Modals/WalletModal.tsx
+++ b/packages/react-chat/src/components/Modals/WalletModal.tsx
@@ -52,7 +52,7 @@ export function WalletModal() {
version: "1",
},
message: {
- action: "Status Chat Key",
+ action: "Status CommunityChatRoom Key",
onlySignOn: dappUrl,
message:
"This signature will be used to decrypt chat communications; check that the 'onlySignOn' property of this message matches the current website address.",
diff --git a/packages/react-chat/src/groupChatComponents/DappConnectGroupChat.tsx b/packages/react-chat/src/groupChatComponents/DappConnectGroupChat.tsx
deleted file mode 100644
index 5cd87acd..00000000
--- a/packages/react-chat/src/groupChatComponents/DappConnectGroupChat.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import React, { useRef } from "react";
-import { ThemeProvider } from "styled-components";
-import styled from "styled-components";
-
-import { ConfigType } from "..";
-import { ChatStateProvider } from "../contexts/chatStateProvider";
-import { ConfigProvider } from "../contexts/configProvider";
-import { FetchMetadataProvider } from "../contexts/fetchMetadataProvider";
-import { IdentityProvider } from "../contexts/identityProvider";
-import { MessengerProvider } from "../contexts/messengerProvider";
-import { ModalProvider } from "../contexts/modalProvider";
-import { NarrowProvider } from "../contexts/narrowProvider";
-import { ToastProvider } from "../contexts/toastProvider";
-import { Metadata } from "../models/Metadata";
-import { GlobalStyle } from "../styles/GlobalStyle";
-import { Theme } from "../styles/themes";
-
-import { GroupChat } from "./GroupChat";
-
-interface DappConnectGroupChatProps {
- theme: Theme;
- config: ConfigType;
- fetchMetadata?: (url: string) => Promise;
-}
-
-export function DappConnectGroupChat({
- theme,
- config,
- fetchMetadata,
-}: DappConnectGroupChatProps) {
- const ref = useRef(null);
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
-const Wrapper = styled.div`
- height: 100%;
- overflow: hidden;
-`;
diff --git a/packages/react-chat/src/groupChatComponents/GroupChat.tsx b/packages/react-chat/src/groupChatComponents/GroupChat.tsx
index 45afce25..6c7d8f45 100644
--- a/packages/react-chat/src/groupChatComponents/GroupChat.tsx
+++ b/packages/react-chat/src/groupChatComponents/GroupChat.tsx
@@ -1,90 +1,58 @@
-import React, { useState } from "react";
+import React, { useRef } from "react";
+import { ThemeProvider } from "styled-components";
import styled from "styled-components";
-import { Channels } from "../components/Channels/Channels";
-import { ChatCreation } from "../components/Chat/ChatCreation";
-import { AgreementModal } from "../components/Modals/AgreementModal";
-import { CoinbaseModal } from "../components/Modals/CoinbaseModal";
-import { EditModal } from "../components/Modals/EditModal";
-import { LeavingModal } from "../components/Modals/LeavingModal";
-import { LogoutModal } from "../components/Modals/LogoutModal";
-import { ProfileFoundModal } from "../components/Modals/ProfileFoundModal";
-import { ProfileModal } from "../components/Modals/ProfileModal";
-import { StatusModal } from "../components/Modals/StatusModal";
-import { UserCreationModal } from "../components/Modals/UserCreationModal";
-import { UserCreationStartModal } from "../components/Modals/UserCreationStartModal";
-import { WalletConnectModal } from "../components/Modals/WalletConnectModal";
-import { WalletModal } from "../components/Modals/WalletModal";
-import { ToastMessageList } from "../components/ToastMessages/ToastMessageList";
-import { ChatState, useChatState } from "../contexts/chatStateProvider";
-import { useNarrow } from "../contexts/narrowProvider";
+import { ConfigType } from "..";
+import { ChatStateProvider } from "../contexts/chatStateProvider";
+import { ConfigProvider } from "../contexts/configProvider";
+import { FetchMetadataProvider } from "../contexts/fetchMetadataProvider";
+import { IdentityProvider } from "../contexts/identityProvider";
+import { MessengerProvider } from "../contexts/messengerProvider";
+import { ModalProvider } from "../contexts/modalProvider";
+import { NarrowProvider } from "../contexts/narrowProvider";
+import { ToastProvider } from "../contexts/toastProvider";
+import { Metadata } from "../models/Metadata";
+import { GlobalStyle } from "../styles/GlobalStyle";
+import { Theme } from "../styles/themes";
-import { GroupChatBody } from "./GroupChat/GroupChatBody";
-import { GroupMembers } from "./GroupMembers/GroupMembers";
+import { GroupChatRoom } from "./GroupChatRoom";
-function Modals() {
+interface GroupChatProps {
+ theme: Theme;
+ config: ConfigType;
+ fetchMetadata?: (url: string) => Promise;
+}
+
+export function GroupChat({ theme, config, fetchMetadata }: GroupChatProps) {
+ const ref = useRef(null);
return (
- <>
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
);
}
-export function GroupChat() {
- const [state] = useChatState();
- const [showMembers, setShowMembers] = useState(false);
- const [editGroup, setEditGroup] = useState(false);
- const narrow = useNarrow();
- return (
-
- {!narrow && (
-
-
-
- )}
- {state === ChatState.ChatBody && (
- setShowMembers(!showMembers)}
- showMembers={showMembers}
- permission={true}
- editGroup={editGroup}
- setEditGroup={setEditGroup}
- />
- )}
- {showMembers && !narrow && state === ChatState.ChatBody && (
-
- )}
- {state === ChatState.ChatCreation && }
-
-
-
- );
-}
-
-const ChatWrapper = styled.div`
- width: 100%;
+const Wrapper = styled.div`
height: 100%;
- display: flex;
- position: relative;
-`;
-
-const ChannelsWrapper = styled.div`
- width: 21%;
- height: 100%;
- min-width: 250px;
- background-color: ${({ theme }) => theme.sectionBackgroundColor};
- padding: 10px 16px;
- display: flex;
- flex-direction: column;
+ overflow: hidden;
`;
diff --git a/packages/react-chat/src/groupChatComponents/GroupChatRoom.tsx b/packages/react-chat/src/groupChatComponents/GroupChatRoom.tsx
new file mode 100644
index 00000000..b6f09af2
--- /dev/null
+++ b/packages/react-chat/src/groupChatComponents/GroupChatRoom.tsx
@@ -0,0 +1,90 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+
+import { Channels } from "../components/Channels/Channels";
+import { ChatCreation } from "../components/Chat/ChatCreation";
+import { AgreementModal } from "../components/Modals/AgreementModal";
+import { CoinbaseModal } from "../components/Modals/CoinbaseModal";
+import { EditModal } from "../components/Modals/EditModal";
+import { LeavingModal } from "../components/Modals/LeavingModal";
+import { LogoutModal } from "../components/Modals/LogoutModal";
+import { ProfileFoundModal } from "../components/Modals/ProfileFoundModal";
+import { ProfileModal } from "../components/Modals/ProfileModal";
+import { StatusModal } from "../components/Modals/StatusModal";
+import { UserCreationModal } from "../components/Modals/UserCreationModal";
+import { UserCreationStartModal } from "../components/Modals/UserCreationStartModal";
+import { WalletConnectModal } from "../components/Modals/WalletConnectModal";
+import { WalletModal } from "../components/Modals/WalletModal";
+import { ToastMessageList } from "../components/ToastMessages/ToastMessageList";
+import { ChatState, useChatState } from "../contexts/chatStateProvider";
+import { useNarrow } from "../contexts/narrowProvider";
+
+import { GroupChatBody } from "./GroupChat/GroupChatBody";
+import { GroupMembers } from "./GroupMembers/GroupMembers";
+
+function Modals() {
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export function GroupChatRoom() {
+ const [state] = useChatState();
+ const [showMembers, setShowMembers] = useState(false);
+ const [editGroup, setEditGroup] = useState(false);
+ const narrow = useNarrow();
+ return (
+
+ {!narrow && (
+
+
+
+ )}
+ {state === ChatState.ChatBody && (
+ setShowMembers(!showMembers)}
+ showMembers={showMembers}
+ permission={true}
+ editGroup={editGroup}
+ setEditGroup={setEditGroup}
+ />
+ )}
+ {showMembers && !narrow && state === ChatState.ChatBody && (
+
+ )}
+ {state === ChatState.ChatCreation && }
+
+
+
+ );
+}
+
+const ChatWrapper = styled.div`
+ width: 100%;
+ height: 100%;
+ display: flex;
+ position: relative;
+`;
+
+const ChannelsWrapper = styled.div`
+ width: 21%;
+ height: 100%;
+ min-width: 250px;
+ background-color: ${({ theme }) => theme.sectionBackgroundColor};
+ padding: 10px 16px;
+ display: flex;
+ flex-direction: column;
+`;
diff --git a/packages/react-chat/src/index.ts b/packages/react-chat/src/index.ts
index c0539cea..66b3f67f 100644
--- a/packages/react-chat/src/index.ts
+++ b/packages/react-chat/src/index.ts
@@ -1,12 +1,6 @@
-import { DappConnectCommunityChat } from "./components/DappConnectCommunityChat";
+import { CommunityChat } from "./components/CommunityChat";
import { ConfigType } from "./contexts/configProvider";
-import { DappConnectGroupChat } from "./groupChatComponents/DappConnectGroupChat";
+import { GroupChat } from "./groupChatComponents/GroupChat";
import { darkTheme, lightTheme } from "./styles/themes";
-export {
- DappConnectCommunityChat,
- DappConnectGroupChat,
- lightTheme,
- darkTheme,
- ConfigType,
-};
+export { CommunityChat, GroupChat, lightTheme, darkTheme, ConfigType };
diff --git a/packages/react-group-chat-example/package.json b/packages/react-group-chat-example/package.json
index 216b0820..99c1598b 100644
--- a/packages/react-group-chat-example/package.json
+++ b/packages/react-group-chat-example/package.json
@@ -2,7 +2,7 @@
"name": "@waku/react-group-chat-sdk-example",
"main": "index.js",
"version": "0.1.0",
- "repository": "https://github.com/status-im/dappconnect-chat-sdk/",
+ "repository": "https://github.com/status-im/wakuconnect-chat-sdk/",
"license": "MIT OR Apache-2.0",
"packageManager": "yarn@3.0.1",
"scripts": {
diff --git a/packages/react-group-chat-example/src/index.html b/packages/react-group-chat-example/src/index.html
index 4b071725..9a13586c 100644
--- a/packages/react-group-chat-example/src/index.html
+++ b/packages/react-group-chat-example/src/index.html
@@ -4,7 +4,7 @@
- DAppconnect group chat
+ Waku Connect group chat
diff --git a/packages/react-group-chat-example/src/index.tsx b/packages/react-group-chat-example/src/index.tsx
index 6a0f3639..35953b1a 100644
--- a/packages/react-group-chat-example/src/index.tsx
+++ b/packages/react-group-chat-example/src/index.tsx
@@ -1,8 +1,4 @@
-import {
- DappConnectGroupChat,
- darkTheme,
- lightTheme,
-} from "@waku/react-chat-sdk";
+import { darkTheme, GroupChat, lightTheme } from "@waku/react-chat-sdk";
import React, { useRef, useState } from "react";
import ReactDOM from "react-dom";
import styled from "styled-components";
@@ -77,7 +73,7 @@ function DragDiv() {
}}
/>
-