Logout modal (#170)

* Fix mention in input

* Extract buttons style

* Add logout modal

packages/react-chat-example/src/index.tsx

@@ -76,7 +76,7 @@ function DragDiv() {
           <ReactChat
             theme={theme ? lightTheme : darkTheme}
             communityKey={
-              "0x03e28ca2c56526d3ebd673e779bea6aff740cf16227dc0f284fc73e5b26c0942ef"
+              "0x03c07c5a31d5a662b670a9caaccd131bb2cfad0659bcc031205f22d5788b97e3d2"
             }
             fetchMetadata={fetchMetadata}
           />

packages/react-chat/src/components/Buttons/buttonStyle.ts

@@ -1,4 +1,4 @@
-import { css } from "styled-components";
+import styled, { css } from "styled-components";
 
 export const buttonStyles = css`
   font-family: "Inter";
@@ -38,3 +38,22 @@ export const buttonTransparentStyles = css`
     background: ${({ theme }) => theme.buttonBg};
   }
 `;
+
+export const ButtonNo = styled.button`
+  padding: 11px 24px;
+  margin-right: 16px;
+
+  ${buttonStyles}
+  background: ${({ theme }) => theme.buttonNoBg};
+  color: ${({ theme }) => theme.redColor};
+
+  &:hover {
+    background: ${({ theme }) => theme.buttonNoBgHover};
+  }
+`;
+
+export const ButtonYes = styled.button`
+  padding: 11px 24px;
+
+  ${buttonStyles}
+`;

packages/react-chat/src/components/Chat.tsx

@@ -13,6 +13,7 @@ import { Members } from "./Members/Members";
 import { CoinbaseModal } from "./Modals/CoinbaseModal";
 import { CommunityModal } from "./Modals/CommunityModal";
 import { EditModal } from "./Modals/EditModal";
+import { LogoutModal } from "./Modals/LogoutModal";
 import { ProfileModal } from "./Modals/ProfileModal";
 import { StatusModal } from "./Modals/StatusModal";
 import { UserCreationModal } from "./Modals/UserCreationModal";
@@ -32,6 +33,7 @@ function Modals() {
       <WalletModal />
       <WalletConnectModal />
       <CoinbaseModal />
+      <LogoutModal />
     </>
   );
 }

packages/react-chat/src/components/Chat/ChatInput.tsx

@@ -375,7 +375,7 @@ const Input = styled.div`
   }
 
   & > span {
-    display: inline-block;
+    display: inline;
     color: ${({ theme }) => theme.mentionColor};
     background: ${({ theme }) => theme.mentionBg};
     border-radius: 4px;

packages/react-chat/src/components/Members/MembersList.tsx

@@ -3,14 +3,12 @@ import { utils } from "status-communities/dist/cjs";
 import { bufToHex } from "status-communities/dist/cjs/utils";
 import styled from "styled-components";
 
-import {
-  useIdentity,
-  useNickname,
-  useSetIdentity,
-} from "../../contexts/identityProvider";
+import { useIdentity, useNickname } from "../../contexts/identityProvider";
 import { useMessengerContext } from "../../contexts/messengerProvider";
+import { useModal } from "../../contexts/modalProvider";
 import { buttonStyles } from "../Buttons/buttonStyle";
 import { LogoutIcon } from "../Icons/LogoutIcon";
+import { LogoutModalName } from "../Modals/LogoutModal";
 
 import { Member } from "./Member";
 
@@ -21,8 +19,8 @@ interface MembersListProps {
 export function MembersList({ switchShowMembers }: MembersListProps) {
   const { contacts } = useMessengerContext();
   const identity = useIdentity();
+  const { setModal } = useModal(LogoutModalName);
 
-  const logout = useSetIdentity();
   const nickname = useNickname();
 
   const userContacts = useMemo(() => {
@@ -58,7 +56,7 @@ export function MembersList({ switchShowMembers }: MembersListProps) {
               }}
               isYou={true}
             />
-            <LogoutBtn onClick={() => logout(undefined)}>
+            <LogoutBtn onClick={() => setModal(true)}>
               <LogoutIcon />
             </LogoutBtn>
           </Row>

packages/react-chat/src/components/Modals/LinkModal.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import styled from "styled-components";
 
 import { useModal } from "../../contexts/modalProvider";
-import { buttonStyles } from "../Buttons/buttonStyle";
+import { ButtonNo, ButtonYes } from "../Buttons/buttonStyle";
 import { textMediumStyles } from "../Text";
 
 import { Modal } from "./Modal";
@@ -46,22 +46,3 @@ const Link = styled.a`
 
   ${textMediumStyles}
 `;
-
-const ButtonNo = styled.button`
-  padding: 11px 24px;
-  margin-right: 16px;
-
-  ${buttonStyles}
-  background: ${({ theme }) => theme.buttonNoBg};
-  color: ${({ theme }) => theme.redColor};
-
-  &:hover {
-    background: ${({ theme }) => theme.buttonNoBgHover};
-  }
-`;
-
-const ButtonYes = styled.button`
-  padding: 11px 24px;
-
-  ${buttonStyles}
-`;

packages/react-chat/src/components/Modals/LogoutModal.tsx

@@ -0,0 +1,98 @@
+import React from "react";
+import { utils } from "status-communities/dist/cjs";
+import styled from "styled-components";
+
+import {
+  useIdentity,
+  useNickname,
+  useSetIdentity,
+} from "../../contexts/identityProvider";
+import { useModal } from "../../contexts/modalProvider";
+import { ButtonNo, ButtonYes } from "../Buttons/buttonStyle";
+import { UserLogo } from "../Members/UserLogo";
+
+import { Modal } from "./Modal";
+import { ButtonSection, Heading, Section, Text } from "./ModalStyle";
+import {
+  EmojiKey,
+  UserAddress,
+  UserAddressWrapper,
+  UserName,
+  UserNameWrapper,
+} from "./ProfileModal";
+
+export const LogoutModalName = "LogoutModal";
+
+export const LogoutModal = () => {
+  const { setModal } = useModal(LogoutModalName);
+  const logout = useSetIdentity();
+  const identity = useIdentity();
+  const nickname = useNickname();
+
+  if (identity) {
+    return (
+      <Modal name={LogoutModalName}>
+        <Section>
+          <Heading>Disconnect</Heading>
+        </Section>
+        <Section>
+          <Text>Do you want to disconnect your profile?</Text>
+          <UserSection>
+            <UserLogo
+              contact={{
+                id: utils.bufToHex(identity.publicKey),
+                customName: nickname,
+                trueName: utils.bufToHex(identity.publicKey),
+              }}
+              radius={80}
+              colorWheel={[
+                ["red", 150],
+                ["blue", 250],
+                ["green", 360],
+              ]}
+            />
+            <UserNameWrapper className="logout">
+              {" "}
+              <UserName className="small">{nickname}</UserName>
+            </UserNameWrapper>
+
+            <UserAddressWrapper className="small">
+              <UserAddress className="small">
+                {" "}
+                Chatkey: {identity.privateKey.slice(0, 10)}...
+                {identity.privateKey.slice(-3)}{" "}
+              </UserAddress>
+            </UserAddressWrapper>
+            <EmojiKey className="small">🎩🍞🥑🦍🌈📡💅🏻♣️🔔⛸👵🅱</EmojiKey>
+          </UserSection>
+        </Section>
+        <ButtonSection>
+          <ButtonNo
+            onClick={() => {
+              setModal(false);
+              logout(undefined);
+            }}
+          >
+            Disconnect
+          </ButtonNo>
+          <ButtonYes
+            onClick={() => {
+              setModal(false);
+            }}
+          >
+            Stay Connected
+          </ButtonYes>
+        </ButtonSection>
+      </Modal>
+    );
+  }
+
+  return null;
+};
+
+const UserSection = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 8px 0;
+`;

packages/react-chat/src/components/Modals/ProfileModal.tsx

@@ -303,7 +303,7 @@ const ProfileIcon = styled.div`
   }
 `;
 
-const UserNameWrapper = styled.div`
+export const UserNameWrapper = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
@@ -312,9 +312,13 @@ const UserNameWrapper = styled.div`
   & > svg {
     fill: ${({ theme }) => theme.tertiary};
   }
+
+  &.logout {
+    margin: 8px 0;
+  }
 `;
 
-const UserName = styled.p`
+export const UserName = styled.p`
   color: ${({ theme }) => theme.primary};
   font-weight: bold;
   font-size: 22px;
@@ -337,7 +341,7 @@ const UserTrueName = styled.p`
   margin-top: 8px;
 `;
 
-const UserAddressWrapper = styled.div`
+export const UserAddressWrapper = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
@@ -370,6 +374,7 @@ export const EmojiKey = styled.div`
   letter-spacing: 0.2px;
 
   &.small {
+    width: 83px;
     ${textSmallStyles}
   }
 `;