status-im
/
status-web-archive
mirror of https://github.com/status-im/status-web-archive.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
This commit is contained in:
Franck R 2022-02-03 18:51:05 +11:00 committed by GitHub
parent 509a3a3d6b
commit 030a33f95a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
20 changed files with 191 additions and 191 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
CHANGELOG.md
View File

@ -10,4 +10,4 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Added ### Added
- Project initialization. - 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

18
README.md
View File

@ -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.

2
package.json
View File

@ -1,5 +1,5 @@
{ {
"name": "dappconnect-sdks", "name": "@waku/chat-sdk-root",
"packageManager": "yarn@3.1.0", "packageManager": "yarn@3.1.0",
"license": "MIT OR Apache-2.0", "license": "MIT OR Apache-2.0",
"scripts": { "scripts": {

2
packages/react-chat-example/package.json
View File

@ -2,7 +2,7 @@
"name": "@waku/react-chat-sdk-example", "name": "@waku/react-chat-sdk-example",
"main": "index.js", "main": "index.js",
"version": "0.1.0", "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", "license": "MIT OR Apache-2.0",
"packageManager": "yarn@3.0.1", "packageManager": "yarn@3.0.1",
"scripts": { "scripts": {

2
packages/react-chat-example/src/index.html
View File

@ -4,7 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1" /> <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" /> <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> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

8
packages/react-chat-example/src/index.tsx
View File

@ -1,8 +1,4 @@
import { import { CommunityChat, darkTheme, lightTheme } from "@waku/react-chat-sdk";
DappConnectCommunityChat,
darkTheme,
lightTheme,
} from "@waku/react-chat-sdk";
import React, { useRef, useState } from "react"; import React, { useRef, useState } from "react";
import ReactDOM from "react-dom"; import ReactDOM from "react-dom";
import styled from "styled-components"; import styled from "styled-components";
@ -77,7 +73,7 @@ function DragDiv() {
}} }}
/> />
<FloatingDiv className={showChat ? "" : "hide"}> <FloatingDiv className={showChat ? "" : "hide"}>
<DappConnectCommunityChat <CommunityChat
theme={theme ? lightTheme : darkTheme} theme={theme ? lightTheme : darkTheme}
communityKey={process.env.COMMUNITY_KEY ?? ""} communityKey={process.env.COMMUNITY_KEY ?? ""}
config={{ config={{

2
packages/react-chat/package.json
View File

@ -4,7 +4,7 @@
"module": "dist/esm/src/index.js", "module": "dist/esm/src/index.js",
"types": "dist/esm/src/index.d.ts", "types": "dist/esm/src/index.d.ts",
"version": "0.1.0", "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", "license": "MIT OR Apache-2.0",
"packageManager": "yarn@3.0.1", "packageManager": "yarn@3.0.1",
"scripts": { "scripts": {

10
packages/react-chat/src/components/DappConnectCommunityChat.tsx → packages/react-chat/src/components/CommunityChat.tsx
View File

@ -15,21 +15,21 @@ import { Metadata } from "../models/Metadata";
import { GlobalStyle } from "../styles/GlobalStyle"; import { GlobalStyle } from "../styles/GlobalStyle";
import { Theme } from "../styles/themes"; import { Theme } from "../styles/themes";
import { Chat } from "./Chat"; import { CommunityChatRoom } from "./CommunityChatRoom";
interface DappConnectCommunityChatProps { interface CommunityChatProps {
theme: Theme; theme: Theme;
communityKey: string; communityKey: string;
config: ConfigType; config: ConfigType;
fetchMetadata?: (url: string) => Promise<Metadata | undefined>; fetchMetadata?: (url: string) => Promise<Metadata | undefined>;
} }
export function DappConnectCommunityChat({ export function CommunityChat({
theme, theme,
config, config,
fetchMetadata, fetchMetadata,
communityKey, communityKey,
}: DappConnectCommunityChatProps) { }: CommunityChatProps) {
const ref = useRef<HTMLHeadingElement>(null); const ref = useRef<HTMLHeadingElement>(null);
return ( return (
<ConfigProvider config={config}> <ConfigProvider config={config}>
@ -43,7 +43,7 @@ export function DappConnectCommunityChat({
<IdentityProvider> <IdentityProvider>
<MessengerProvider communityKey={communityKey}> <MessengerProvider communityKey={communityKey}>
<ChatStateProvider> <ChatStateProvider>
<Chat /> <CommunityChatRoom />
<div id="modal-root" /> <div id="modal-root" />
</ChatStateProvider> </ChatStateProvider>
</MessengerProvider> </MessengerProvider>

2
packages/react-chat/src/components/Chat.tsx → packages/react-chat/src/components/CommunityChatRoom.tsx
View File

@ -44,7 +44,7 @@ function Modals() {
); );
} }
export function Chat() { export function CommunityChatRoom() {
const [state] = useChatState(); const [state] = useChatState();
const [showMembers, setShowMembers] = useState(false); const [showMembers, setShowMembers] = useState(false);
const [editGroup, setEditGroup] = useState(false); const [editGroup, setEditGroup] = useState(false);

6
packages/react-chat/src/components/Form/ChannelMenu.tsx
View File

@ -121,7 +121,7 @@ export const ChannelMenu = ({
{!channel.isMuted && <NextIcon />} {!channel.isMuted && <NextIcon />}
<MenuText> <MenuText>
{(channel.isMuted ? "Unmute" : "Mute") + {(channel.isMuted ? "Unmute" : "Mute") +
(channel.type === "group" ? " Group" : " Chat")} (channel.type === "group" ? " Group" : " CommunityChatRoom")}
</MenuText> </MenuText>
{!channel.isMuted && showSubmenu && ( {!channel.isMuted && showSubmenu && (
<MuteMenu <MuteMenu
@ -155,7 +155,9 @@ export const ChannelMenu = ({
<DeleteIcon width={16} height={16} className="red" /> <DeleteIcon width={16} height={16} className="red" />
)} )}
<MenuText className="red"> <MenuText className="red">
{channel.type === "group" ? "Leave Group" : "Delete Chat"} {channel.type === "group"
? "Leave Group"
: "Delete CommunityChatRoom"}
</MenuText> </MenuText>
</MenuItem> </MenuItem>
)} )}

2
packages/react-chat/src/components/Modals/WalletModal.tsx
View File

@ -52,7 +52,7 @@ export function WalletModal() {
version: "1", version: "1",
}, },
message: { message: {
action: "Status Chat Key", action: "Status CommunityChatRoom Key",
onlySignOn: dappUrl, onlySignOn: dappUrl,
message: message:
"This signature will be used to decrypt chat communications; check that the 'onlySignOn' property of this message matches the current website address.", "This signature will be used to decrypt chat communications; check that the 'onlySignOn' property of this message matches the current website address.",

62
packages/react-chat/src/groupChatComponents/DappConnectGroupChat.tsx
View File

@ -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;
`;

128
packages/react-chat/src/groupChatComponents/GroupChat.tsx
View File

@ -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 styled from "styled-components";
import { Channels } from "../components/Channels/Channels"; import { ConfigType } from "..";
import { ChatCreation } from "../components/Chat/ChatCreation"; import { ChatStateProvider } from "../contexts/chatStateProvider";
import { AgreementModal } from "../components/Modals/AgreementModal"; import { ConfigProvider } from "../contexts/configProvider";
import { CoinbaseModal } from "../components/Modals/CoinbaseModal"; import { FetchMetadataProvider } from "../contexts/fetchMetadataProvider";
import { EditModal } from "../components/Modals/EditModal"; import { IdentityProvider } from "../contexts/identityProvider";
import { LeavingModal } from "../components/Modals/LeavingModal"; import { MessengerProvider } from "../contexts/messengerProvider";
import { LogoutModal } from "../components/Modals/LogoutModal"; import { ModalProvider } from "../contexts/modalProvider";
import { ProfileFoundModal } from "../components/Modals/ProfileFoundModal"; import { NarrowProvider } from "../contexts/narrowProvider";
import { ProfileModal } from "../components/Modals/ProfileModal"; import { ToastProvider } from "../contexts/toastProvider";
import { StatusModal } from "../components/Modals/StatusModal"; import { Metadata } from "../models/Metadata";
import { UserCreationModal } from "../components/Modals/UserCreationModal"; import { GlobalStyle } from "../styles/GlobalStyle";
import { UserCreationStartModal } from "../components/Modals/UserCreationStartModal"; import { Theme } from "../styles/themes";
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 { GroupChatRoom } from "./GroupChatRoom";
import { GroupMembers } from "./GroupMembers/GroupMembers";
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 ( return (
<> <ConfigProvider config={config}>
<UserCreationModal /> <ThemeProvider theme={theme}>
<EditModal /> <NarrowProvider myRef={ref}>
<ProfileModal /> <FetchMetadataProvider fetchMetadata={fetchMetadata}>
<StatusModal /> <ModalProvider>
<WalletModal /> <ToastProvider>
<WalletConnectModal /> <Wrapper ref={ref}>
<CoinbaseModal /> <GlobalStyle />
<LogoutModal /> <IdentityProvider>
<AgreementModal /> <MessengerProvider communityKey={undefined}>
<ProfileFoundModal /> <ChatStateProvider>
<UserCreationStartModal /> <GroupChatRoom />
<LeavingModal /> <div id="modal-root" />
</> </ChatStateProvider>
</MessengerProvider>
</IdentityProvider>
</Wrapper>
</ToastProvider>
</ModalProvider>
</FetchMetadataProvider>
</NarrowProvider>
</ThemeProvider>
</ConfigProvider>
); );
} }
export function GroupChat() { const Wrapper = styled.div`
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%; height: 100%;
display: flex; overflow: hidden;
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;
`; `;

90
packages/react-chat/src/groupChatComponents/GroupChatRoom.tsx Normal file
View File

@ -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;
`;

12
packages/react-chat/src/index.ts
View File

@ -1,12 +1,6 @@
import { DappConnectCommunityChat } from "./components/DappConnectCommunityChat"; import { CommunityChat } from "./components/CommunityChat";
import { ConfigType } from "./contexts/configProvider"; import { ConfigType } from "./contexts/configProvider";
import { DappConnectGroupChat } from "./groupChatComponents/DappConnectGroupChat"; import { GroupChat } from "./groupChatComponents/GroupChat";
import { darkTheme, lightTheme } from "./styles/themes"; import { darkTheme, lightTheme } from "./styles/themes";
export { export { CommunityChat, GroupChat, lightTheme, darkTheme, ConfigType };
DappConnectCommunityChat,
DappConnectGroupChat,
lightTheme,
darkTheme,
ConfigType,
};

2
packages/react-group-chat-example/package.json
View File

@ -2,7 +2,7 @@
"name": "@waku/react-group-chat-sdk-example", "name": "@waku/react-group-chat-sdk-example",
"main": "index.js", "main": "index.js",
"version": "0.1.0", "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", "license": "MIT OR Apache-2.0",
"packageManager": "yarn@3.0.1", "packageManager": "yarn@3.0.1",
"scripts": { "scripts": {

2
packages/react-group-chat-example/src/index.html
View File

@ -4,7 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1" /> <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" /> <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> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

8
packages/react-group-chat-example/src/index.tsx
View File

@ -1,8 +1,4 @@
import { import { darkTheme, GroupChat, lightTheme } from "@waku/react-chat-sdk";
DappConnectGroupChat,
darkTheme,
lightTheme,
} from "@waku/react-chat-sdk";
import React, { useRef, useState } from "react"; import React, { useRef, useState } from "react";
import ReactDOM from "react-dom"; import ReactDOM from "react-dom";
import styled from "styled-components"; import styled from "styled-components";
@ -77,7 +73,7 @@ function DragDiv() {
}} }}
/> />
<FloatingDiv className={showChat ? "" : "hide"}> <FloatingDiv className={showChat ? "" : "hide"}>
<DappConnectGroupChat <GroupChat
theme={theme ? lightTheme : darkTheme} theme={theme ? lightTheme : darkTheme}
config={{ config={{
environment: process.env.ENV ?? "", environment: process.env.ENV ?? "",

2
packages/status-communities/package.json
View File

@ -4,7 +4,7 @@
"module": "dist/esm/src/index.js", "module": "dist/esm/src/index.js",
"types": "dist/esm/src/index.d.ts", "types": "dist/esm/src/index.d.ts",
"version": "0.1.0", "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", "license": "MIT OR Apache-2.0",
"packageManager": "yarn@3.1.0", "packageManager": "yarn@3.1.0",
"scripts": { "scripts": {

20
yarn.lock
View File

@ -1242,6 +1242,16 @@ __metadata:
languageName: node languageName: node
linkType: hard 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": "@waku/preview-proxy@workspace:packages/preview-proxy":
version: 0.0.0-use.local version: 0.0.0-use.local
resolution: "@waku/preview-proxy@workspace:packages/preview-proxy" resolution: "@waku/preview-proxy@workspace:packages/preview-proxy"
@ -3341,16 +3351,6 @@ __metadata:
languageName: node languageName: node
linkType: hard 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": "dashdash@npm:^1.12.0":
version: 1.14.1 version: 1.14.1
resolution: "dashdash@npm:1.14.1" resolution: "dashdash@npm:1.14.1"