Rename DappConnect to Waku Connect (#213)

* Rename DappConnect to Waku Connect * Remove redundant qualifier on CommunityChat * Rename `Chat` to `ChatRoom` There are two components: - `CommunityChatRoom` (prev. `Chat`) contains the chat room, channels, members. -`CommunityChat` wrap `ChatRoom` is the various provider. A consumer would most likely use `CommunityChat` directly. If they want to swap a provider, they'd use `CommunityChatRoom` * Rename `GroupChat` to `GroupChatRoom` * Rename `DappConnectGroupChat` to `GroupChat` There are two components: - `GroupChatRoom` (prev. `GroupChat`) contains the chat room, members. - `GroupChat` wrap `GroupChatRoom` is the various provider. A consumer would most likely use `GroupChat` directly. If they want to swap a provider, they'd use `GroupChatRoom`. * Remove DappConnect qualifier
2022-02-03 18:51:05 +11:00 · 2022-02-03 18:51:05 +11:00 · 030a33f95a
parent 509a3a3d6b
commit 030a33f95a
20 changed files with 191 additions and 191 deletions
--- 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
--- 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.
--- 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": {
--- 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": {
--- a/packages/react-chat-example/src/index.html
+++ b/packages/react-chat-example/src/index.html
@ -4,7 +4,7 @@
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1" />
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
-    <title>DAppconnect chat</title>
+    <title>Waku Connect Chat</title>
  </head>
  <body>
    <div id="root"></div>
--- 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() {
          }}
        />
        <FloatingDiv className={showChat ? "" : "hide"}>
-          <DappConnectCommunityChat
+          <CommunityChat
            theme={theme ? lightTheme : darkTheme}
            communityKey={process.env.COMMUNITY_KEY ?? ""}
            config={{
--- a/packages/react-chat/package.json
+++ b/packages/react-chat/package.json
@ -4,7 +4,7 @@
  "module": "dist/esm/src/index.js",
  "types": "dist/esm/src/index.d.ts",
  "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": {
--- a/packages/react-chat/src/components/DappConnectCommunityChat.tsx
+++ b/packages/react-chat/src/components/DappConnectCommunityChat.tsx
@ -15,21 +15,21 @@ import { Metadata } from "../models/Metadata";
 import { GlobalStyle } from "../styles/GlobalStyle";
 import { Theme } from "../styles/themes";

-import { Chat } from "./Chat";
+import { CommunityChatRoom } from "./CommunityChatRoom";

-interface DappConnectCommunityChatProps {
+interface CommunityChatProps {
  theme: Theme;
  communityKey: string;
  config: ConfigType;
  fetchMetadata?: (url: string) => Promise<Metadata | undefined>;
 }

-export function DappConnectCommunityChat({
+export function CommunityChat({
  theme,
  config,
  fetchMetadata,
  communityKey,
-}: DappConnectCommunityChatProps) {
+}: CommunityChatProps) {
  const ref = useRef<HTMLHeadingElement>(null);
  return (
    <ConfigProvider config={config}>
@ -43,7 +43,7 @@ export function DappConnectCommunityChat({
                  <IdentityProvider>
                    <MessengerProvider communityKey={communityKey}>
                      <ChatStateProvider>
-                        <Chat />
+                        <CommunityChatRoom />
                        <div id="modal-root" />
                      </ChatStateProvider>
                    </MessengerProvider>
--- a/packages/react-chat/src/components/CommunityChatRoom.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);
--- 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 && <NextIcon />}
            <MenuText>
              {(channel.isMuted ? "Unmute" : "Mute") +
-                (channel.type === "group" ? " Group" : " Chat")}
+                (channel.type === "group" ? " Group" : " CommunityChatRoom")}
            </MenuText>
            {!channel.isMuted && showSubmenu && (
              <MuteMenu
@ -155,7 +155,9 @@ export const ChannelMenu = ({
              <DeleteIcon width={16} height={16} className="red" />
            )}
            <MenuText className="red">
-              {channel.type === "group" ? "Leave Group" : "Delete Chat"}
+              {channel.type === "group"
+                ? "Leave Group"
+                : "Delete CommunityChatRoom"}
            </MenuText>
          </MenuItem>
        )}
--- 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.",
--- a/packages/react-chat/src/groupChatComponents/DappConnectGroupChat.tsx
+++ b/packages/react-chat/src/groupChatComponents/DappConnectGroupChat.tsx
@ -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<Metadata | undefined>;
-}
-
-export function DappConnectGroupChat({
-  theme,
-  config,
-  fetchMetadata,
-}: DappConnectGroupChatProps) {
-  const ref = useRef<HTMLHeadingElement>(null);
-  return (
-    <ConfigProvider config={config}>
-      <ThemeProvider theme={theme}>
-        <NarrowProvider myRef={ref}>
-          <FetchMetadataProvider fetchMetadata={fetchMetadata}>
-            <ModalProvider>
-              <ToastProvider>
-                <Wrapper ref={ref}>
-                  <GlobalStyle />
-                  <IdentityProvider>
-                    <MessengerProvider communityKey={undefined}>
-                      <ChatStateProvider>
-                        <GroupChat />
-                        <div id="modal-root" />
-                      </ChatStateProvider>
-                    </MessengerProvider>
-                  </IdentityProvider>
-                </Wrapper>
-              </ToastProvider>
-            </ModalProvider>
-          </FetchMetadataProvider>
-        </NarrowProvider>
-      </ThemeProvider>
-    </ConfigProvider>
-  );
-}
-
-const Wrapper = styled.div`
-  height: 100%;
-  overflow: hidden;
-`;
--- 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<Metadata | undefined>;
+}
+
+export function GroupChat({ theme, config, fetchMetadata }: GroupChatProps) {
+  const ref = useRef<HTMLHeadingElement>(null);
  return (
-    <>
-      <UserCreationModal />
-      <EditModal />
-      <ProfileModal />
-      <StatusModal />
-      <WalletModal />
-      <WalletConnectModal />
-      <CoinbaseModal />
-      <LogoutModal />
-      <AgreementModal />
-      <ProfileFoundModal />
-      <UserCreationStartModal />
-      <LeavingModal />
-    </>
+    <ConfigProvider config={config}>
+      <ThemeProvider theme={theme}>
+        <NarrowProvider myRef={ref}>
+          <FetchMetadataProvider fetchMetadata={fetchMetadata}>
+            <ModalProvider>
+              <ToastProvider>
+                <Wrapper ref={ref}>
+                  <GlobalStyle />
+                  <IdentityProvider>
+                    <MessengerProvider communityKey={undefined}>
+                      <ChatStateProvider>
+                        <GroupChatRoom />
+                        <div id="modal-root" />
+                      </ChatStateProvider>
+                    </MessengerProvider>
+                  </IdentityProvider>
+                </Wrapper>
+              </ToastProvider>
+            </ModalProvider>
+          </FetchMetadataProvider>
+        </NarrowProvider>
+      </ThemeProvider>
+    </ConfigProvider>
  );
 }

-export function GroupChat() {
-  const [state] = useChatState();
-  const [showMembers, setShowMembers] = useState(false);
-  const [editGroup, setEditGroup] = useState(false);
-  const narrow = useNarrow();
-  return (
-    <ChatWrapper>
-      {!narrow && (
-        <ChannelsWrapper>
-          <Channels setEditGroup={setEditGroup} />
-        </ChannelsWrapper>
-      )}
-      {state === ChatState.ChatBody && (
-        <GroupChatBody
-          onClick={() => setShowMembers(!showMembers)}
-          showMembers={showMembers}
-          permission={true}
-          editGroup={editGroup}
-          setEditGroup={setEditGroup}
-        />
-      )}
-      {showMembers && !narrow && state === ChatState.ChatBody && (
-        <GroupMembers />
-      )}
-      {state === ChatState.ChatCreation && <ChatCreation />}
-      <Modals />
-      <ToastMessageList />
-    </ChatWrapper>
-  );
-}
-
-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;
 `;
--- a/packages/react-chat/src/groupChatComponents/GroupChatRoom.tsx
+++ 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 (
+    <>
+      <UserCreationModal />
+      <EditModal />
+      <ProfileModal />
+      <StatusModal />
+      <WalletModal />
+      <WalletConnectModal />
+      <CoinbaseModal />
+      <LogoutModal />
+      <AgreementModal />
+      <ProfileFoundModal />
+      <UserCreationStartModal />
+      <LeavingModal />
+    </>
+  );
+}
+
+export function GroupChatRoom() {
+  const [state] = useChatState();
+  const [showMembers, setShowMembers] = useState(false);
+  const [editGroup, setEditGroup] = useState(false);
+  const narrow = useNarrow();
+  return (
+    <ChatWrapper>
+      {!narrow && (
+        <ChannelsWrapper>
+          <Channels setEditGroup={setEditGroup} />
+        </ChannelsWrapper>
+      )}
+      {state === ChatState.ChatBody && (
+        <GroupChatBody
+          onClick={() => setShowMembers(!showMembers)}
+          showMembers={showMembers}
+          permission={true}
+          editGroup={editGroup}
+          setEditGroup={setEditGroup}
+        />
+      )}
+      {showMembers && !narrow && state === ChatState.ChatBody && (
+        <GroupMembers />
+      )}
+      {state === ChatState.ChatCreation && <ChatCreation />}
+      <Modals />
+      <ToastMessageList />
+    </ChatWrapper>
+  );
+}
+
+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;
+`;
--- 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 };
--- 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": {
--- a/packages/react-group-chat-example/src/index.html
+++ b/packages/react-group-chat-example/src/index.html
@ -4,7 +4,7 @@
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1" />
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
-    <title>DAppconnect group chat</title>
+    <title>Waku Connect group chat</title>
  </head>
  <body>
    <div id="root"></div>
--- 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() {
          }}
        />
        <FloatingDiv className={showChat ? "" : "hide"}>
-          <DappConnectGroupChat
+          <GroupChat
            theme={theme ? lightTheme : darkTheme}
            config={{
              environment: process.env.ENV ?? "",
--- a/packages/status-communities/package.json
+++ b/packages/status-communities/package.json
@ -4,7 +4,7 @@
  "module": "dist/esm/src/index.js",
  "types": "dist/esm/src/index.d.ts",
  "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.1.0",
  "scripts": {
--- a/yarn.lock
+++ b/yarn.lock
@ -1242,6 +1242,16 @@ __metadata:
  languageName: node
  linkType: hard

+"@waku/chat-sdk-root@workspace:.":
+  version: 0.0.0-use.local
+  resolution: "@waku/chat-sdk-root@workspace:."
+  dependencies:
+    npm-run-all: ^4.1.5
+    prettier: ^2.3.2
+    wsrun: ^5.2.4
+  languageName: unknown
+  linkType: soft
+
 "@waku/preview-proxy@workspace:packages/preview-proxy":
  version: 0.0.0-use.local
  resolution: "@waku/preview-proxy@workspace:packages/preview-proxy"
@ -3341,16 +3351,6 @@ __metadata:
  languageName: node
  linkType: hard

-"dappconnect-sdks@workspace:.":
-  version: 0.0.0-use.local
-  resolution: "dappconnect-sdks@workspace:."
-  dependencies:
-    npm-run-all: ^4.1.5
-    prettier: ^2.3.2
-    wsrun: ^5.2.4
-  languageName: unknown
-  linkType: soft
-
 "dashdash@npm:^1.12.0":
  version: 1.14.1
  resolution: "dashdash@npm:1.14.1"